feat(sdds-serv): add Tooltip from new-hope

packages/sdds-serv/src/components/Tooltip/Tooltip.config.ts

@@ -0,0 +1,70 @@
+import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+        size: 'm',
+    },
+    variations: {
+        size: {
+            s: css`
+                ${tooltipTokens.paddingTop}: 0.5rem;
+                ${tooltipTokens.paddingRight}: 0.75rem;
+                ${tooltipTokens.paddingBottom}: 0.5rem;
+                ${tooltipTokens.paddingLeft}: 0.75rem;
+
+                ${tooltipTokens.minHeight}: 2rem;
+                ${tooltipTokens.borderRadius}: 0.5rem;
+
+                ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${tooltipTokens.contentLeftMargin}: 0.25rem;
+
+                ${tooltipTokens.arrowMaskWidth}: 1rem;
+                ${tooltipTokens.arrowMaskHeight}: 1rem;
+                ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
+                ${tooltipTokens.arrowHeight}: 0.375rem;
+                ${tooltipTokens.arrowEdgeMargin}: 0.5625rem;
+                ${tooltipTokens.arrowBackground}: var(--surface-solid-card);
+            `,
+            m: css`
+                ${tooltipTokens.paddingTop}: 0.6875rem;
+                ${tooltipTokens.paddingRight}: 0.875rem;
+                ${tooltipTokens.paddingBottom}: 0.6875rem;
+                ${tooltipTokens.paddingLeft}: 0.875rem;
+
+                ${tooltipTokens.minHeight}: 2.5rem;
+                ${tooltipTokens.borderRadius}: 0.625rem;
+
+                ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size);
+                ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${tooltipTokens.contentLeftMargin}: 0.375rem;
+
+                ${tooltipTokens.arrowMaskWidth}: 1.25rem;
+                ${tooltipTokens.arrowMaskHeight}: 1.25rem;
+                ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
+                ${tooltipTokens.arrowHeight}: 0.5rem;
+                ${tooltipTokens.arrowEdgeMargin}: 0.625rem;
+                ${tooltipTokens.arrowBackground}: var(--surface-solid-card);
+            `,
+        },
+        view: {
+            // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131
+            default: css`
+                ${tooltipTokens.backgroundColor}: var(--surface-solid-card);
+                ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08);
+                ${tooltipTokens.color}: var(--plasma-colors-primary);
+            `,
+        },
+    },
+};

packages/sdds-serv/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { IconDisclosureRight } from '@salutejs/plasma-icons';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { Button } from '../Button/Button';
+import { PopoverPlacement } from '../Popover';
+import { TextField } from '../TextField';
+
+import { Tooltip } from '.';
+import type { TooltipProps } from '.';
+
+const placements: Array<PopoverPlacement> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
+
+const meta: Meta<TooltipProps> = {
+    title: 'Controls/Tooltip',
+    decorators: [InSpacingDecorator],
+    component: Tooltip,
+};
+
+export default meta;
+
+const StyledGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-gap: 1rem 3.5rem;
+    padding: 3.5rem;
+`;
+
+const StoryDefault = ({ size }: TooltipProps) => {
+    return (
+        <StyledGrid>
+            <Tooltip
+                target={
+                    <Tooltip target={<Button>Btn</Button>} placement="left" size={size} isOpen hasArrow text="left" />
+                }
+                placement="top-start"
+                size={size}
+                isOpen
+                hasArrow
+                text="top-start"
+            />
+            <Tooltip target={<Button>Btn</Button>} placement="top" size={size} isOpen hasArrow text="top" />
+            <Tooltip
+                target={
+                    <Tooltip target={<Button>Btn</Button>} placement="right" size={size} isOpen hasArrow text="right" />
+                }
+                placement="top-end"
+                size={size}
+                isOpen
+                hasArrow
+                text="top-end"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom-start"
+                size={size}
+                isOpen
+                hasArrow
+                text="bottom-start"
+            />
+            <Tooltip target={<Button>Btn</Button>} placement="bottom" size={size} isOpen hasArrow text="bottom" />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom-end"
+                size={size}
+                isOpen
+                hasArrow
+                text="bottom-end"
+            />
+        </StyledGrid>
+    );
+};
+
+export const Default: StoryObj<TooltipProps> = {
+    argTypes: {
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        size: 'm',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StyledRow = styled.div`
+    display: flex;
+    width: 150vw;
+    height: 150vh;
+    padding: 10rem;
+`;
+
+const StoryLive = (args: TooltipProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <>
+            <StyledRow>
+                <Tooltip
+                    target={<Button onClick={() => setIsOpen(!isOpen)}>Show tooltip</Button>}
+                    contentLeft={<IconDisclosureRight size="xs" />}
+                    {...args}
+                    id="example-tooltip-firstname"
+                    text="Tooltip text"
+                    isOpen={isOpen}
+                />
+            </StyledRow>
+        </>
+    );
+};
+
+export const Live: StoryObj<TooltipProps> = {
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        placement: 'bottom',
+        maxWidth: 10,
+        minWidth: 3,
+        hasArrow: true,
+        size: 'm',
+    },
+    render: (args) => <StoryLive {...args} />,
+};

packages/sdds-serv/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TooltipProps, tooltipConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Tooltip.config';
+
+const mergedConfig = mergeConfig(tooltipConfig, config);
+
+export const Tooltip = component(mergedConfig) as ForwardRefExoticComponent<
+    TooltipProps & RefAttributes<HTMLDivElement>
+>;

packages/sdds-serv/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from '@salutejs/plasma-new-hope/styled-components';

packages/sdds-serv/src/index.ts

@@ -22,6 +22,7 @@ export * from './components/SSRProvider';
 export * from './components/Switch';
 export * from './components/Tabs';
 export * from './components/Toast';
+export * from './components/Tooltip';
 export * from './components/Typography';
 
 export * from './mixins';