feat(sdds-*): add Note component

packages/sdds-dfa/src/components/Note/Note.config.ts

@@ -0,0 +1,143 @@
+import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+        size: 'l',
+    },
+    variations: {
+        view: {
+            default: css`
+                ${tokens.background}: var(--surface-transparent-secondary);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-primary);
+            `,
+            positive: css`
+                ${tokens.background}: var(--surface-transparent-positive);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-positive);
+            `,
+            warning: css`
+                ${tokens.background}: var(--surface-transparent-warning);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-warning);
+            `,
+            negative: css`
+                ${tokens.background}: var(--surface-transparent-negative);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-negative);
+            `,
+            info: css`
+                ${tokens.background}: var(--surface-transparent-info);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-info);
+            `,
+        },
+        size: {
+            l: css`
+                ${tokens.padding}: 1.5rem 1.875rem;
+                ${tokens.paddingScalable}: 1.5rem 1.75rem;
+                ${tokens.borderRadius}: 0.875rem;
+                ${tokens.gap}: 0.75rem;
+                ${tokens.gapScalable}: 1rem;
+                ${tokens.contentGap}: 0.25rem;
+
+                ${tokens.fixedContentBeforeWidth}: 1.5rem;
+                ${tokens.fixedContentBeforeHeight}: 2rem;
+                ${tokens.fixedContentBeforePadding}: 0.25rem 0;
+
+                ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family);
+                ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size);
+                ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style);
+                ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight);
+                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
+                ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height);
+
+                ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family);
+                ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size);
+                ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style);
+                ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight);
+                ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
+                ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height);
+            `,
+            m: css`
+                ${tokens.padding}: 1.25rem 1.5rem;
+                ${tokens.paddingScalable}: 1.25rem;
+                ${tokens.borderRadius}: 0.75rem;
+                ${tokens.gap}: 0.625rem;
+                ${tokens.gapScalable}: 0.75rem;
+                ${tokens.contentGap}: 0.125rem;
+
+                ${tokens.fixedContentBeforeWidth}: 1.5rem;
+                ${tokens.fixedContentBeforeHeight}: 1.5rem;
+                ${tokens.fixedContentBeforePadding}: 0;
+
+                ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family);
+                ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size);
+                ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style);
+                ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight);
+                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
+                ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height);
+
+                ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family);
+                ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size);
+                ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style);
+                ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight);
+                ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
+                ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height);
+            `,
+            s: css`
+                ${tokens.padding}: 1rem 1.25rem;
+                ${tokens.paddingScalable}: 1rem;
+                ${tokens.borderRadius}: 0.625rem;
+                ${tokens.gap}: 0.5rem;
+                ${tokens.gapScalable}: 0.75rem;
+                ${tokens.contentGap}: 0.125rem;
+
+                ${tokens.fixedContentBeforeWidth}: 1rem;
+                ${tokens.fixedContentBeforeHeight}: 1.125rem;
+                ${tokens.fixedContentBeforePadding}: 0.063rem 0;
+
+                ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family);
+                ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size);
+                ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style);
+                ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight);
+                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
+                ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height);
+
+                ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family);
+                ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size);
+                ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style);
+                ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight);
+                ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
+                ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height);
+            `,
+            xs: css`
+                ${tokens.padding}: 0.75rem 1rem;
+                ${tokens.paddingScalable}: 0.75rem;
+                ${tokens.borderRadius}: 0.5rem;
+                ${tokens.gap}: 0.375rem;
+                ${tokens.gapScalable}: 0.5rem;
+                ${tokens.contentGap}: 0.125rem;
+
+                ${tokens.fixedContentBeforeWidth}: 1rem;
+                ${tokens.fixedContentBeforeHeight}: 1rem;
+                ${tokens.fixedContentBeforePadding}: 0;
+
+                ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family);
+                ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size);
+                ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style);
+                ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight);
+                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
+                ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height);
+
+                ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family);
+                ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size);
+                ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style);
+                ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight);
+                ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
+                ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height);
+            `,
+        },
+    },
+};

packages/sdds-dfa/src/components/Note/Note.stories.tsx

@@ -0,0 +1,85 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+import { Note } from './Note';
+
+const views = ['default', 'positive', 'warning', 'negative', 'info'];
+const sizes = ['l', 'm', 's', 'xs'];
+const contentBeforeSizes = ['fixed', 'scalable'];
+
+const meta: Meta<typeof Note> = {
+    title: 'Data Display/Note',
+    component: Note,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        contentBeforeSizing: {
+            options: contentBeforeSizes,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'enableContentBefore', truthy: true },
+            defaultValue: 'fixed',
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = {
+    enableContentBefore: boolean;
+} & ComponentProps<typeof Note>;
+
+const getIconSize = (size?: string, isScalable?: boolean) => {
+    if (isScalable) {
+        return 'm';
+    }
+
+    if (size === 'l' || size === 'm') {
+        return 's';
+    }
+
+    return 'xs';
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'l',
+        width: 400,
+        height: 116,
+        stretch: false,
+        title: 'Title',
+        text: 'Text',
+        enableContentBefore: true,
+        contentBeforeSizing: 'fixed',
+    },
+    render: ({ enableContentBefore, ...args }) => (
+        <div style={{ height: '100vh' }}>
+            <Note
+                contentBefore={
+                    enableContentBefore && (
+                        <IconSaluteOutline
+                            size={getIconSize(args.size, args.contentBeforeSizing === 'scalable')}
+                            color="inherit"
+                        />
+                    )
+                }
+                {...args}
+            />
+        </div>
+    ),
+};

packages/sdds-dfa/src/components/Note/Note.ts

@@ -0,0 +1,7 @@
+import { noteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Note.config';
+
+const mergedConfig = mergeConfig(noteConfig, config);
+
+export const Note = component(mergedConfig);

packages/sdds-dfa/src/components/Note/index.ts

@@ -0,0 +1,2 @@
+export { Note } from './Note';
+export { noteTokens, noteClasses } from '@salutejs/plasma-new-hope/styled-components';

packages/sdds-dfa/src/index.ts

@@ -55,6 +55,7 @@ export * from './components/NumberInput';
 export * from './components/Dropzone';
 export * from './components/Rating';
 export * from './components/Tree';
+export * from './components/Note';
 
 export * from './mixins';
 export * from './tokens';

packages/sdds-finportal/src/components/Note/Note.config.ts

@@ -0,0 +1,143 @@
+import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+        size: 'l',
+    },
+    variations: {
+        view: {
+            default: css`
+                ${tokens.background}: var(--surface-transparent-secondary);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-primary);
+            `,
+            positive: css`
+                ${tokens.background}: var(--surface-transparent-positive);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-positive);
+            `,
+            warning: css`
+                ${tokens.background}: var(--surface-transparent-warning);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-warning);
+            `,
+            negative: css`
+                ${tokens.background}: var(--surface-transparent-negative);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-negative);
+            `,
+            info: css`
+                ${tokens.background}: var(--surface-transparent-info);
+                ${tokens.color}: var(--text-primary);
+                ${tokens.contentBeforeColor}: var(--text-info);
+            `,
+        },
+        size: {
+            l: css`
+                ${tokens.padding}: 1.5rem 1.875rem;
+                ${tokens.paddingScalable}: 1.5rem 1.75rem;
+                ${tokens.borderRadius}: 0.875rem;
+                ${tokens.gap}: 0.75rem;
+                ${tokens.gapScalable}: 1rem;
+                ${tokens.contentGap}: 0.25rem;
+
+                ${tokens.fixedContentBeforeWidth}: 1.5rem;
+                ${tokens.fixedContentBeforeHeight}: 2rem;
+                ${tokens.fixedContentBeforePadding}: 0.25rem 0;
+
+                ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family);
+                ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size);
+                ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style);
+                ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight);
+                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
+                ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height);
+
+                ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family);
+                ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size);
+                ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style);
+                ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight);
+                ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
+                ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height);
+            `,
+            m: css`
+                ${tokens.padding}: 1.25rem 1.5rem;
+                ${tokens.paddingScalable}: 1.25rem;
+                ${tokens.borderRadius}: 0.75rem;
+                ${tokens.gap}: 0.625rem;
+                ${tokens.gapScalable}: 0.75rem;
+                ${tokens.contentGap}: 0.125rem;
+
+                ${tokens.fixedContentBeforeWidth}: 1.5rem;
+                ${tokens.fixedContentBeforeHeight}: 1.5rem;
+                ${tokens.fixedContentBeforePadding}: 0;
+
+                ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family);
+                ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size);
+                ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style);
+                ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight);
+                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
+                ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height);
+
+                ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family);
+                ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size);
+                ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style);
+                ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight);
+                ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
+                ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height);
+            `,
+            s: css`
+                ${tokens.padding}: 1rem 1.25rem;
+                ${tokens.paddingScalable}: 1rem;
+                ${tokens.borderRadius}: 0.625rem;
+                ${tokens.gap}: 0.5rem;
+                ${tokens.gapScalable}: 0.75rem;
+                ${tokens.contentGap}: 0.125rem;
+
+                ${tokens.fixedContentBeforeWidth}: 1rem;
+                ${tokens.fixedContentBeforeHeight}: 1.125rem;
+                ${tokens.fixedContentBeforePadding}: 0.063rem 0;
+
+                ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family);
+                ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size);
+                ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style);
+                ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight);
+                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
+                ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height);
+
+                ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family);
+                ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size);
+                ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style);
+                ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight);
+                ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
+                ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height);
+            `,
+            xs: css`
+                ${tokens.padding}: 0.75rem 1rem;
+                ${tokens.paddingScalable}: 0.75rem;
+                ${tokens.borderRadius}: 0.5rem;
+                ${tokens.gap}: 0.375rem;
+                ${tokens.gapScalable}: 0.5rem;
+                ${tokens.contentGap}: 0.125rem;
+
+                ${tokens.fixedContentBeforeWidth}: 1rem;
+                ${tokens.fixedContentBeforeHeight}: 1rem;
+                ${tokens.fixedContentBeforePadding}: 0;
+
+                ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family);
+                ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size);
+                ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style);
+                ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight);
+                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
+                ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height);
+
+                ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family);
+                ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size);
+                ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style);
+                ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight);
+                ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
+                ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height);
+            `,
+        },
+    },
+};