Feat icon button

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -1127,6 +1127,38 @@ headline5: string;
 };
 }> & TypographyOldProps & RefAttributes<HTMLDivElement>>;
 
+// @public
+export const IconButton: FunctionComponent<PropsType<    {
+view: {
+default: string;
+accent: string;
+secondary: string;
+clear: string;
+success: string;
+warning: string;
+critical: string;
+dark: string;
+black: string;
+white: string;
+};
+size: {
+l: string;
+lr: string;
+m: string;
+mr: string;
+s: string;
+sr: string;
+xs: string;
+xsr: string;
+};
+disabled: {
+true: string;
+};
+focused: {
+true: string;
+};
+}> & ButtonProps<HTMLElement> & RefAttributes<HTMLButtonElement>>;
+
 // @public
 const Image_2: FunctionComponent<PropsType<Variants> & ImgHTMLAttributes<HTMLImageElement> & {
 base?: "div" | "img" | undefined;

packages/plasma-b2c/src/components/IconButton/IconButton.component-test.tsx

@@ -0,0 +1 @@
+../../../../plasma-web/src/components/IconButton/IconButton.component-test.tsx

packages/plasma-b2c/src/components/IconButton/IconButton.config.ts

@@ -0,0 +1,217 @@
+import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+        focused: 'true',
+        size: 'm',
+    },
+    variations: {
+        view: {
+            default: css`
+                ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
+                ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active);
+            `,
+            accent: css`
+                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent);
+                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+            `,
+            secondary: css`
+                ${iconButtonTokens.iconButtonColor}: var(--text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary);
+                ${iconButtonTokens.iconButtonColorHover}: var(--text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+            `,
+            clear: css`
+                ${iconButtonTokens.iconButtonColor}: var(--text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear);
+                ${iconButtonTokens.iconButtonColorHover}: var(--text-primary-hover);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-clear);
+                ${iconButtonTokens.iconButtonColorActive}: var(--text-primary-active);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-clear);
+            `,
+            success: css`
+                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive);
+                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active);
+            `,
+            warning: css`
+                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning);
+                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active);
+            `,
+            critical: css`
+                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative);
+                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active);
+            `,
+            dark: css`
+                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep);
+                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
+            `,
+            black: css`
+                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default);
+                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active);
+            `,
+            white: css`
+                ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary);
+                ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default);
+                ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
+                ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active);
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active);
+            `,
+        },
+        size: {
+            l: css`
+                ${iconButtonTokens.iconButtonHeight}: 3.5rem;
+                ${iconButtonTokens.iconButtonWidth}: 3.5rem;
+                ${iconButtonTokens.iconButtonPadding}: 1.5rem;
+                ${iconButtonTokens.iconButtonRadius}: 0.875rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+            lr: css`
+                ${iconButtonTokens.iconButtonHeight}: 3.5rem;
+                ${iconButtonTokens.iconButtonWidth}: 3.5rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+            m: css`
+                ${iconButtonTokens.iconButtonHeight}: 3rem;
+                ${iconButtonTokens.iconButtonWidth}: 3rem;
+                ${iconButtonTokens.iconButtonPadding}: 1.25rem;
+                ${iconButtonTokens.iconButtonRadius}: 0.75rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+            mr: css`
+                ${iconButtonTokens.iconButtonHeight}: 3rem;
+                ${iconButtonTokens.iconButtonWidth}: 3rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+            s: css`
+                ${iconButtonTokens.iconButtonHeight}: 2.5rem;
+                ${iconButtonTokens.iconButtonWidth}: 2.5rem;
+                ${iconButtonTokens.iconButtonPadding}: 1rem;
+                ${iconButtonTokens.iconButtonRadius}: 0.625rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+            sr: css`
+                ${iconButtonTokens.iconButtonHeight}: 2.5rem;
+                ${iconButtonTokens.iconButtonWidth}: 2.5rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+            xs: css`
+                ${iconButtonTokens.iconButtonHeight}: 2rem;
+                ${iconButtonTokens.iconButtonWidth}: 2rem;
+                ${iconButtonTokens.iconButtonPadding}: 0.75rem;
+                ${iconButtonTokens.iconButtonRadius}: 0.5rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+            xsr: css`
+                ${iconButtonTokens.iconButtonHeight}: 2rem;
+                ${iconButtonTokens.iconButtonWidth}: 2rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+        },
+        disabled: {
+            true: css`
+                ${iconButtonTokens.iconButtonDisabledOpacity}: 0.4;
+            `,
+        },
+        focused: {
+            true: css`
+                ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent);
+            `,
+        },
+    },
+};

packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,83 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconClose } from '@salutejs/plasma-icons';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { IconButton } from './IconButton';
+
+type StoryButtonProps = ComponentProps<typeof IconButton> & { contentType: string; isLoading: boolean };
+
+const views = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white'];
+const sizes = ['l', 'm', 's', 'xs'];
+const pins = [
+    'square-square',
+    'square-clear',
+    'clear-square',
+    'clear-clear',
+    'clear-circle',
+    'circle-clear',
+    'circle-circle',
+    '',
+];
+
+const meta: Meta<StoryButtonProps> = {
+    title: 'Controls/IconButton',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        pin: {
+            options: pins,
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'bottom' } },
+        },
+        ...disableProps(['children', 'theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']),
+    },
+};
+
+export default meta;
+
+const getSizeForIcon = (size) => {
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
+    args: {
+        children: <IconClose />,
+        view: 'default',
+        size: 'm',
+        disabled: false,
+        focused: true,
+        isLoading: false,
+    },
+    argTypes: { ...disableProps(['children']) },
+    render: (args) => (
+        <IconButton {...args}>
+            <IconClose color="inhert" size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
+};

packages/plasma-b2c/src/components/IconButton/IconButton.ts

@@ -0,0 +1,11 @@
+import { iconButtonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './IconButton.config';
+
+const mergedConfig = mergeConfig(iconButtonConfig, config);
+const IconButtonComponent = component(mergedConfig);
+
+/**
+ * Кнопка с иконкой.
+ */
+export const IconButton = IconButtonComponent;

packages/plasma-b2c/src/components/IconButton/index.ts

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

packages/plasma-b2c/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/Editable';
 export * from './components/ElasticGrid';
 export * from './components/Grid';
 export * from './components/Image';
+export * from './components/IconButton';
 export * from './components/Link';
 export * from './components/List';
 export * from './components/Modal';