feat(plasma-web): add chip from new hope

packages/plasma-web/src/components/Chip/Chip.component-test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { IconDownload } from '@salutejs/plasma-icons';
+import { mount, CypressTestDecorator, getComponent, PadMe, SpaceMe } from '@salutejs/plasma-cy-utils';
+
+const Icon = () => <IconDownload color="inherit" />;
+
+describe('plasma-web: Chip', () => {
+    const Chip = getComponent('Chip');
+
+    it('simple', () => {
+        mount(
+            <CypressTestDecorator>
+                <Chip>Hello Plasma</Chip>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('with Icon', () => {
+        mount(
+            <CypressTestDecorator>
+                <Chip text="with Icon" contentLeft={<Icon />} />
+                <PadMe />
+                <Chip text="with Icon" contentRight={<Icon />} />
+                <PadMe />
+                <Chip text="with Icon" contentLeft={<Icon />} contentRight={<Icon />} />
+                <PadMe />
+                <Chip contentLeft={<Icon />} contentRight={<Icon />}>
+                    text as children
+                </Chip>
+                <PadMe />
+                <Chip contentLeft={<Icon />} contentRight={<Icon />}>
+                    <Icon />
+                </Chip>
+                <SpaceMe />
+                <Chip>
+                    <Icon />
+                </Chip>
+                <SpaceMe />
+                <Chip contentLeft={<Icon />} />
+                <SpaceMe />
+                <Chip contentRight={<Icon />} />
+            </CypressTestDecorator>,
+        );
+        cy.matchImageSnapshot();
+    });
+
+    it('with Clear', () => {
+        mount(
+            <CypressTestDecorator>
+                <Chip hasClear>Hello Plasma</Chip>
+                <PadMe />
+                <Chip hasClear text="with Icon" contentLeft={<Icon />} />
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('_view', () => {
+        mount(
+            <CypressTestDecorator>
+                <Chip view="default" text="Chip_view_default" contentLeft={<Icon />} />
+                <SpaceMe />
+                <Chip view="default" text="_disabled" disabled contentLeft={<Icon />} />
+                <PadMe />
+                <Chip view="secondary" text="Chip_view_secondary" contentLeft={<Icon />} />
+                <SpaceMe />
+                <Chip view="secondary" text="_disabled" disabled contentLeft={<Icon />} />
+                <PadMe />
+                <Chip view="positive" text="Chip_view_positive" contentLeft={<Icon />} />
+                <SpaceMe />
+                <Chip view="positive" text="_disabled" disabled contentLeft={<Icon />} />
+            </CypressTestDecorator>,
+        );
+        cy.matchImageSnapshot();
+    });
+
+    it('_size', () => {
+        mount(
+            <CypressTestDecorator>
+                <Chip text="Chip_size_l" size="l" contentLeft={<Icon />} />
+                <PadMe />
+                <Chip text="Chip_size_m" size="m" contentLeft={<Icon />} />
+                <PadMe />
+                <Chip text="Chip_size_s" size="s" contentLeft={<Icon />} />
+                <PadMe />
+                <Chip text="Chip_size_xs" size="xs" contentLeft={<Icon />} />
+            </CypressTestDecorator>,
+        );
+        cy.matchImageSnapshot();
+    });
+});

packages/plasma-web/src/components/Chip/Chip.config.tsx

@@ -0,0 +1,143 @@
+import { css, chipTokens } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+        focused: 'true',
+        size: 'm',
+    },
+    variations: {
+        view: {
+            default: css`
+                ${chipTokens.color}: var(--plasma-colors-inverse);
+                ${chipTokens.background}: var(--plasma-colors-primary);
+                ${chipTokens.colorHover}: var(--plasma-colors-inverse);
+                ${chipTokens.backgroundHover}: color-mix(in srgb, var(--plasma-colors-inverse), var(--plasma-colors-primary) 85%);
+                ${chipTokens.scaleHover}: 1.02;
+                ${chipTokens.colorActive}: var(--plasma-colors-inverse);
+                ${chipTokens.backgroundActive}: color-mix(in srgb, var(--plasma-colors-inverse), var(--plasma-colors-primary) 80%);
+                ${chipTokens.scaleActive}: 0.98;
+                ${chipTokens.backgroundReadOnly}: var(--plasma-colors-primary);
+                ${chipTokens.colorReadOnly}: var(--plasma-colors-inverse);
+                ${chipTokens.backgroundReadOnlyHover}: var(--plasma-colors-primary);
+                ${chipTokens.colorReadOnlyHover}: var(--plasma-colors-inverse);
+            `,
+            secondary: css`
+                ${chipTokens.color}: var(--plasma-colors-text);
+                ${chipTokens.background}: var(--plasma-colors-surface-liquid02);
+                ${chipTokens.colorHover}: var(--plasma-colors-text);
+                ${chipTokens.backgroundHover}: color-mix(in srgb, var(--plasma-colors-inverse), var(--plasma-colors-surface-liquid02) 85%);
+                ${chipTokens.scaleHover}: 1.02;
+                ${chipTokens.colorActive}: var(--plasma-colors-text);
+                ${chipTokens.backgroundActive}: color-mix(in srgb, var(--plasma-colors-inverse), var(--plasma-colors-surface-liquid02) 80%);
+                ${chipTokens.scaleActive}: 0.98;
+                ${chipTokens.backgroundReadOnly}: var(--plasma-colors-surface-liquid02);
+                ${chipTokens.colorReadOnly}: var(--plasma-colors-text);
+                ${chipTokens.backgroundReadOnlyHover}: var(--plasma-colors-surface-liquid02);
+                ${chipTokens.colorReadOnlyHover}: var(--plasma-colors-text);
+            `,
+            positive: css`
+                ${chipTokens.color}: var(--plasma-colors-white-primary);
+                ${chipTokens.background}: var(--plasma-colors-success);
+                ${chipTokens.colorHover}: var(--plasma-colors-white-primary);
+                ${chipTokens.backgroundHover}: color-mix(in srgb, var(--plasma-colors-inverse), var(--plasma-colors-success) 85%);
+                ${chipTokens.scaleHover}: 1.02;
+                ${chipTokens.colorActive}: var(--plasma-colors-white-primary);
+                ${chipTokens.backgroundActive}: color-mix(in srgb, var(--plasma-colors-inverse), var(--plasma-colors-success) 85%);
+                ${chipTokens.scaleActive}: 0.98;
+                ${chipTokens.backgroundReadOnly}: var(--plasma-colors-success);
+                ${chipTokens.colorReadOnly}: var(--plasma-colors-white-primary);
+                ${chipTokens.backgroundReadOnlyHover}: var(--plasma-colors-success);
+                ${chipTokens.colorReadOnlyHover}: var(--plasma-colors-white-primary);
+            `,
+        },
+        size: {
+            l: css`
+                ${chipTokens.borderRadius}: 0.75rem;
+                ${chipTokens.width}: auto;
+                ${chipTokens.height}: 3rem;
+                ${chipTokens.paddingRight}: 1rem;
+                ${chipTokens.paddingLeft}: 1rem;
+
+                ${chipTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
+                ${chipTokens.fontSize}: var(--plasma-typo-body-l-font-size);
+                ${chipTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
+                ${chipTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
+                ${chipTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${chipTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${chipTokens.leftContentMarginLeft}: -0.125rem;
+                ${chipTokens.leftContentMarginRight}: 0.5rem;
+                ${chipTokens.clearContentMarginLeft}: 0.625rem;
+                ${chipTokens.clearContentMarginRight}: -0.25rem;
+            `,
+            m: css`
+                ${chipTokens.borderRadius}: 0.625rem;
+                ${chipTokens.width}: auto;
+                ${chipTokens.height}: 2.5rem;
+                ${chipTokens.paddingRight}: 0.875rem;
+                ${chipTokens.paddingLeft}: 0.875rem;
+
+                ${chipTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
+                ${chipTokens.fontSize}: var(--plasma-typo-body-m-font-size);
+                ${chipTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
+                ${chipTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
+                ${chipTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${chipTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${chipTokens.leftContentMarginLeft}: -0.125rem;
+                ${chipTokens.leftContentMarginRight}: 0.375rem;
+                ${chipTokens.clearContentMarginLeft}: 0.5rem;
+                ${chipTokens.clearContentMarginRight}: -0.25rem;
+            `,
+            s: css`
+                ${chipTokens.borderRadius}: 0.5rem;
+                ${chipTokens.width}: auto;
+                ${chipTokens.height}: 2rem;
+                ${chipTokens.paddingRight}: 0.875rem;
+                ${chipTokens.paddingLeft}: 0.875rem;
+
+                ${chipTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
+                ${chipTokens.fontSize}: var(--plasma-typo-body-s-font-size);
+                ${chipTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
+                ${chipTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${chipTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${chipTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${chipTokens.leftContentMarginLeft}: -0.125rem;
+                ${chipTokens.leftContentMarginRight}: 0.25rem;
+                ${chipTokens.clearContentMarginLeft}: 0.375rem;
+                ${chipTokens.clearContentMarginRight}: -0.25rem;
+            `,
+            xs: css`
+                ${chipTokens.borderRadius}: 0.375rem;
+                ${chipTokens.width}: auto;
+                ${chipTokens.height}: 1.5rem;
+                ${chipTokens.paddingRight}: 0.625rem;
+                ${chipTokens.paddingLeft}: 0.625rem;
+
+                ${chipTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${chipTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
+                ${chipTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${chipTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${chipTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${chipTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${chipTokens.leftContentMarginLeft}: -0.125rem;
+                ${chipTokens.leftContentMarginRight}: 0.25rem;
+                ${chipTokens.clearContentMarginLeft}: 0.25rem;
+                ${chipTokens.clearContentMarginRight}: -0.25rem;
+            `,
+        },
+        disabled: {
+            true: css`
+                ${chipTokens.disabledOpacity}: 0.4;
+            `,
+        },
+        focused: {
+            true: css`
+                ${chipTokens.focusColor}: var(--plasma-colors-accent);
+            `,
+        },
+    },
+};

packages/plasma-web/src/components/Chip/Chip.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import { Chip } from '.';
+
+const views = ['default', 'secondary', 'positive'];
+const sizes = ['l', 'm', 's', 'xs'];
+
+const onClear = action('onClear');
+
+const meta: Meta<typeof Chip> = {
+    title: 'Controls/Chip',
+    component: Chip,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['onClear', 'contentLeft', 'contentRight', 'contentClear', 'text']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+type StoryChipProps = ComponentProps<typeof Chip>;
+
+const StoryBaseChip: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        disabled: false,
+        readOnly: false,
+        hasClear: false,
+        focused: true,
+        onClear,
+    },
+};
+
+const TrashIcon = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 5.5A2.5 2.5 0 0110.5 3h3A2.5 2.5 0 0116 5.5V6h-2v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V6H8v-.5zM4 8a1 1 0 011-1h14a1 1 0 110 2h-1v9.5a2.5 2.5 0 01-2.5 2.5h-7A2.5 2.5 0 016 18.5V9H5a1 1 0 01-1-1z"
+            fill="currentColor"
+        />
+    </svg>
+);
+
+const StoryDefault = (props: StoryChipProps) => {
+    return <Chip {...props}>This is chip</Chip>;
+};
+
+export const Default: Story = {
+    ...StoryBaseChip,
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryWithIcon = (props: StoryChipProps) => {
+    return (
+        <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...props}>
+            This is chip
+        </Chip>
+    );
+};
+
+export const WithIcon: Story = {
+    ...StoryBaseChip,
+    render: (args) => <StoryWithIcon {...args} />,
+};

packages/plasma-web/src/components/Chip/Chip.tsx

@@ -0,0 +1,11 @@
+import { chipConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Chip.config';
+
+const mergedConfig = mergeConfig(chipConfig, config);
+const ChipComponent = component(mergedConfig);
+
+/**
+ * Ссылка.
+ */
+export const Chip = ChipComponent;

packages/plasma-web/src/components/Chip/index.ts

@@ -0,0 +1 @@
+export { Chip } from './Chip';

packages/plasma-web/src/index.ts

@@ -6,6 +6,7 @@ export * from './components/Card';
 export * from './components/Carousel';
 export * from './components/Cell';
 export * from './components/Checkbox';
+export * from './components/Chip';
 export * from './components/Dropdown';
 export * from './components/Editable';
 export * from './components/ElasticGrid';