feat(plasma-new-hope): Add docs

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

@@ -118,7 +118,6 @@ import { gridGutters } from '@salutejs/plasma-hope';
 import { gridMargins } from '@salutejs/plasma-hope';
 import { gridSizes } from '@salutejs/plasma-hope';
 import { HTMLAttributes } from 'react';
-import { IconButtonProps } from '@salutejs/plasma-new-hope/styled-components';
 import { ImageProps } from '@salutejs/plasma-new-hope/styled-components';
 import { ImgHTMLAttributes } from 'react';
 import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components';
@@ -1127,7 +1126,7 @@ headline5: string;
 // @public
 export const IconButton: FunctionComponent<PropsType<    {
 view: {
-primary: string;
+default: string;
 accent: string;
 secondary: string;
 clear: string;
@@ -1154,9 +1153,7 @@ true: string;
 focused: {
 true: string;
 };
-}> & IconButtonProps & RefAttributes<HTMLButtonElement>>;
-
-export { IconButtonProps }
+}> & ButtonProps<HTMLElement> & RefAttributes<HTMLButtonElement>>;
 
 // @public
 const Image_2: FunctionComponent<PropsType<Variants> & ImgHTMLAttributes<HTMLImageElement> & {
@@ -1729,7 +1726,7 @@ true: string;
     onChangeChips?: undefined;
     enumerationType?: "plain" | undefined;
     onSearch?: ((value: string, event?: React_2.KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
-} & Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size"> & React_2.RefAttributes<HTMLInputElement>) | ({
+} & Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size"> & React_2.RefAttributes<HTMLDivElement>) | ({
     size?: string | undefined;
     view?: string | undefined;
     readOnly?: boolean | undefined;
@@ -1746,7 +1743,7 @@ true: string;
     onSearch?: undefined;
     chips?: TextFieldPrimitiveValue[] | undefined;
     onChangeChips?: ((value: TextFieldPrimitiveValue[]) => void) | undefined;
-} & Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size"> & React_2.RefAttributes<HTMLInputElement>)), "enumerationType" | "chips" | "onChangeChips"> & React_2.RefAttributes<HTMLInputElement>>;
+} & Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size"> & React_2.RefAttributes<HTMLDivElement>)), "enumerationType" | "chips" | "onChangeChips"> & React_2.RefAttributes<HTMLInputElement>>;
 
 // Warning: (ae-forgotten-export) The symbol "newHopeTextFieldProps" needs to be exported by the entry point index.d.ts
 //

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

@@ -2,13 +2,13 @@ import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-componen
 
 export const config = {
     defaults: {
-        view: 'primary',
+        view: 'default',
         focused: 'true',
         size: 'm',
     },
     variations: {
         view: {
-            primary: css`
+            default: css`
                 ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary);
                 ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
                 ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary);
@@ -83,9 +83,9 @@ export const config = {
             white: css`
                 ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary);
                 ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default);
-                ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary);
+                ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover);
                 ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
-                ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary);
+                ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active);
                 ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active);
             `,
         },
@@ -148,7 +148,7 @@ export const config = {
             `,
             s: css`
                 ${iconButtonTokens.iconButtonHeight}: 2.5rem;
-                ${iconButtonTokens.iconButtonWidth}: 2.5remm;
+                ${iconButtonTokens.iconButtonWidth}: 2.5rem;
                 ${iconButtonTokens.iconButtonPadding}: 1rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.625rem;
                 ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);

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

@@ -7,19 +7,7 @@ import { IconButton } from './IconButton';
 
 type StoryButtonProps = ComponentProps<typeof IconButton> & { contentType: string; isLoading: boolean };
 
-const views = [
-    'default',
-    'accent',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-    'critical',
-    'clear',
-    'dark',
-    'black',
-    'white',
-];
+const views = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white'];
 const sizes = ['l', 'm', 's', 'xs'];
 const pins = [
     'square-square',
@@ -55,31 +43,25 @@ const meta: Meta<StoryButtonProps> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']),
+        ...disableProps(['children', 'theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']),
     },
 };
 
 export default meta;
 
 const getSizeForIcon = (size) => {
-    if (size === 'mr') {
-        return 's';
-    }
-    if (size === 'lr') {
-        return 's';
-    }
-    if (size === 'm') {
-        return 's';
-    }
-    if (size === 'l') {
-        return 's';
-    }
-    if (size === 'sr') {
-        return 's';
-    }
-    if (size === 'xsr') {
-        return 'xs';
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
     }
+
     return size;
 };
 
@@ -92,5 +74,10 @@ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
         focused: true,
         isLoading: false,
     },
-    render: (args) => <IconButton {...args} icon={<IconClose color="inhert" size={getSizeForIcon(args.size)} />} />,
+    argTypes: { ...disableProps(['children']) },
+    render: (args) => (
+        <IconButton {...args}>
+            <IconClose color="inhert" size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
 };

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

@@ -6,6 +6,6 @@ const mergedConfig = mergeConfig(iconButtonConfig, config);
 const IconButtonComponent = component(mergedConfig);
 
 /**
- * Кнопка.
+ * Кнопка с иконкой.
  */
 export const IconButton = IconButtonComponent;

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

@@ -1,3 +1 @@
 export { IconButton } from './IconButton';
-
-export type { IconButtonProps } from '@salutejs/plasma-new-hope/styled-components';

packages/plasma-new-hope/src/components/Button/Button.styles.ts

@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 
-import { applyEllipsis } from '../../mixins';
+import { applyEllipsis, addFocus } from '../../mixins';
 import { component, mergeConfig } from '../../engines';
 import { spinnerConfig, spinnerTokens } from '../Spinner';
 
@@ -72,3 +72,99 @@ export const StyledSpinner = styled(Spinner)`
     ${spinnerTokens.size}: var(${tokens.buttonSpinnerSize});
     ${spinnerTokens.color}: var(${tokens.buttonSpinnerColor});
 `;
+
+// INFO: Для возможности переиспользования стилей в других компонентах
+export const baseContent = `
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    a& {
+        text-decoration: none;
+    }
+
+    /* NOTE: 
+        --plasma_computed-btn-br-radius is defined in Button.tsx
+    */
+    --plasma_private-btn-br: var(--plasma_computed-btn-br);
+    border-radius: var(--plasma_private-btn-br);
+
+    &&.${String(classes.buttonSquare)} {
+        width: var(${tokens.buttonHeight});
+        padding: 0;
+    }
+
+    color: var(${tokens.buttonColor});
+    background-color: var(${tokens.buttonBackgroundColor});
+
+    :hover {
+        color: var(${tokens.buttonColorHover}, var(${tokens.buttonColor}));
+        background-color: var(${tokens.buttonBackgroundColorHover}, var(${tokens.buttonBackgroundColor}));
+
+        scale: var(${tokens.buttonScaleHover});
+    }
+
+    :active {
+        color: var(${tokens.buttonColorActive}, var(${tokens.buttonColor}));
+        background-color: var(${tokens.buttonBackgroundColorActive}, var(${tokens.buttonBackgroundColor}));
+
+        scale: var(${tokens.buttonScaleActive});
+    }
+
+    height: var(${tokens.buttonHeight});
+    width: var(${tokens.buttonWidth});
+
+    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */
+    padding: 0 var(${tokens.buttonPadding}, calc(var(${tokens.buttonHeight}) * 1.618 / 4));
+
+    font-family: var(${tokens.buttonFontFamily});
+    font-size: var(${tokens.buttonFontSize});
+    font-style: var(${tokens.buttonFontStyle});
+    font-weight: var(${tokens.buttonFontWeight});
+    letter-spacing: var(${tokens.buttonLetterSpacing});
+    line-height: var(${tokens.buttonLineHeight});
+
+    /* TODO: #710 make it token API ? */
+    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);
+
+    :focus {
+        outline: none;
+    }
+
+    ${addFocus({
+        outlineOffset: '-0.125rem',
+        outlineSize: 'var(--plasma_private-btn-outline-size)',
+        outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
+        outlineColor: `var(${tokens.buttonFocusColor})`,
+    })}
+
+    &[disabled] {
+        opacity: var(${tokens.buttonDisabledOpacity});
+        cursor: not-allowed;
+
+        :hover,
+        :active {
+            scale: none;
+
+            color: var(${tokens.buttonColor});
+            background-color: var(${tokens.buttonBackgroundColor});
+        }
+    }
+
+    &.${classes.fixedStretching} {
+        width: var(${tokens.buttonWidth});
+    }
+    &.${classes.filledStretching} {
+        width: 100%;
+    }
+    &.${classes.autoStretching} {
+        width: auto;
+    }
+`;

packages/plasma-new-hope/src/components/IconButton/IconButton.styles.ts

@@ -1,21 +1,13 @@
-import { styled } from '@linaria/react';
 import { css } from '@linaria/core';
 
-import { component, mergeConfig } from '../../engines';
-import { buttonConfig, buttonTokens } from '../Button';
+import { buttonTokens } from '../Button';
+import { baseContent as buttonBase } from '../Button/Button.styles';
 
-import { tokens, classes } from './IconButton.tokens';
+import { tokens } from './IconButton.tokens';
 
-const mergedConfig = mergeConfig(buttonConfig);
-const Button = component(mergedConfig);
+export const mappingOverride = `
+    ${buttonTokens.buttonPadding}: 0;
 
-export const base = css`
-    &&.${classes.iconButtonItem} {
-        display: inline-flex;
-    }
-`;
-
-export const IconButtonStyled = styled(Button)`
     ${buttonTokens.buttonColor}: var(${tokens.iconButtonColor});
     ${buttonTokens.buttonBackgroundColor}: var(${tokens.iconButtonBackgroundColor});
 
@@ -43,3 +35,8 @@ export const IconButtonStyled = styled(Button)`
     ${buttonTokens.buttonSpinnerSize}: var(${tokens.iconButtonSpinnerSize});
     ${buttonTokens.buttonSpinnerColor}: var(${tokens.iconButtonSpinnerColor});
 `;
+
+export const base = css`
+    ${buttonBase};
+    ${mappingOverride};
+`;

packages/plasma-new-hope/src/components/IconButton/IconButton.tokens.ts

@@ -1,7 +1,3 @@
-export const classes = {
-    iconButtonItem: 'icon-button-item',
-};
-
 export const tokens = {
     iconButtonColor: '--plasma-icon-button-color',
     iconButtonBackgroundColor: '--plasma-icon-button-background-color',