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';
@@ -1131,7 +1130,7 @@ headline5: string;
 // @public
 export const IconButton: FunctionComponent<PropsType<    {
 view: {
-primary: string;
+default: string;
 accent: string;
 secondary: string;
 clear: string;
@@ -1158,9 +1157,7 @@ true: string;
 focused: {
 true: string;
 };
-}> & IconButtonProps & RefAttributes<HTMLButtonElement>>;
-
-export { IconButtonProps }
+}> & ButtonProps<HTMLElement> & RefAttributes<HTMLButtonElement>>;
 
 // @public
 const Image_2: FunctionComponent<PropsType<Variants> & ImgHTMLAttributes<HTMLImageElement> & {

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',

packages/plasma-new-hope/src/components/IconButton/IconButton.tsx

@@ -1,61 +1,18 @@
-import React, { forwardRef } from 'react';
+import { buttonRoot } from '../Button';
+import { base as viewCSS } from '../Button/variations/_view/base';
+import { base as sizeCSS } from '../Button/variations/_size/base';
+import { base as disabledCSS } from '../Button/variations/_disabled/base';
+import { base as focusedCSS } from '../Button/variations/_focused/base';
+import { base as blurredCSS } from '../Button/variations/_blurred/base';
+import { base as stretchingCSS } from '../Button/variations/_stretching/base';
 
-import type { RootProps } from '../../engines';
-import { cx } from '../../utils';
+import { base } from './IconButton.styles';
 
-import { base, IconButtonStyled } from './IconButton.styles';
-import type { IconButtonProps } from './IconButton.types';
-import { classes } from './IconButton.tokens';
-import { base as viewCSS } from './variations/_view/base';
-import { base as sizeCSS } from './variations/_size/base';
-import { base as disabledCSS } from './variations/_disabled/base';
-import { base as focusedCSS } from './variations/_focused/base';
-
-export const iconButtonRoot = (Root: RootProps<HTMLButtonElement, IconButtonProps>) =>
-    forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-        const {
-            children,
-            view,
-            size,
-            icon,
-            isLoading,
-            loader,
-            pin,
-            disabled,
-            focused,
-            outlined,
-            className,
-            style,
-            ...rest
-        } = props;
-
-        return (
-            <Root view={view} size={size} focused={focused} disabled={disabled} className={classes.iconButtonItem}>
-                <IconButtonStyled
-                    view={view}
-                    size={size}
-                    loader={loader}
-                    isLoading={isLoading}
-                    pin={pin}
-                    disabled={disabled}
-                    focused={focused}
-                    outlined={outlined}
-                    ref={ref}
-                    square // Временное решение
-                    stretching="fixed" // Не работает не понятное почему
-                    className={cx(className)}
-                    style={style}
-                    {...rest}
-                >
-                    {icon || children}
-                </IconButtonStyled>
-            </Root>
-        );
-    });
+export const iconButtonRoot = buttonRoot;
 
 export const iconButtonConfig = {
-    name: 'Button',
-    tag: 'div',
+    name: 'IconButton',
+    tag: 'button',
     layout: iconButtonRoot,
     base,
     variations: {
@@ -72,9 +29,16 @@ export const iconButtonConfig = {
         focused: {
             css: focusedCSS,
         },
+        blurred: {
+            css: blurredCSS,
+        },
+        stretching: {
+            css: stretchingCSS,
+        },
     },
     defaults: {
         view: 'secondary',
         size: 'm',
+        stretching: 'fixed',
     },
 };