fix: Button & IconButton storibook & docs

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 .idea/
+.nx/
 tsconfig.tsbuildinfo
 tsconfig.es.tsbuildinfo
 cypress/snapshots/**/__diff_output__

packages/plasma-asdk/api/plasma-asdk.api.md

@@ -157,7 +157,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("fixed" | "auto" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -178,7 +178,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("fixed" | "auto" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;

packages/plasma-asdk/src/components/Button/Button.stories.tsx

@@ -95,6 +95,8 @@ const meta: Meta<ButtonProps> = {
             'stretch',
             'as',
             'forwardedAs',
+            'pin',
+            'focused',
         ]),
     },
 };

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

@@ -3093,7 +3093,7 @@ onDecrement?: ((value: number) => void) | undefined;
 } & {
 segmentation?: "clear" | undefined;
 inputBackgroundType?: undefined;
-} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "size" | "value"> & RefAttributes<HTMLInputElement>) | ({
+} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "value" | "size"> & RefAttributes<HTMLInputElement>) | ({
 value?: number | undefined;
 min?: number | undefined;
 max?: number | undefined;
@@ -3118,7 +3118,7 @@ onDecrement?: ((value: number) => void) | undefined;
 } & {
 segmentation?: string | undefined;
 inputBackgroundType?: string | undefined;
-} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "size" | "value"> & RefAttributes<HTMLInputElement>))>;
+} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "value" | "size"> & RefAttributes<HTMLInputElement>))>;
 
 export { numberInputClasses }
 

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

@@ -95,6 +95,8 @@ const meta: Meta<ButtonProps> = {
             'stretch',
             'as',
             'forwardedAs',
+            'pin',
+            'focused',
         ]),
     },
 };

packages/plasma-new-hope/src/components/Button/Button.template-doc.mdx

@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
 # Button
 Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
 
-## Button
 <Description name="Button" />
 <PropsTable name="Button" />
 

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

@@ -58,8 +58,7 @@ type CustomButtonProps = {
     loader?: ReactNode;
     /**
      * Кнопка растягивается на всю доступную ширину
-     * @deprecated
-     * Использовать stretching
+     * @deprecated Использовать stretching
      */
     stretch?: boolean;
     /**
@@ -73,16 +72,15 @@ type CustomButtonProps = {
     stretching?: Stretching;
     /**
      * Кнопка принимает соотношение сторон 1:1
-     * @deprecated
-     * Использовать для этого случая IconButton
+     * @deprecated Использовать для этого случая IconButton
      */
     square?: boolean;
     /**
      * Кнопка сфокусирована
      */
     focused?: boolean;
     /**
-     * кнопка неактивна
+     * Кнопка неактивна
      */
     disabled?: boolean;
     /**
@@ -99,8 +97,7 @@ type CustomButtonProps = {
     size?: string;
     /**
      * Добавить рамку при фокусе
-     * @deprecated
-     * использовать focused
+     * @deprecated использовать focused
      */
     outlined?: boolean;
     /**
@@ -115,8 +112,7 @@ type CustomButtonProps = {
     shiftRight?: boolean;
     /**
      * Степень размытия фона
-     * @deprecated
-     * для кнопок без прозрачности не работает
+     * @deprecated для кнопок без прозрачности не работает
      */
     blur?: Blur;
 };

packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx

@@ -7,9 +7,59 @@ import { IconMic } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Button } from './Button';
+import { config } from './Button.config';
+
+const sizesWeights = {
+    xxs: 0,
+    xxsr: 0.5,
+    xs: 1,
+    xsr: 1.5,
+    s: 2,
+    sr: 2.5,
+    m: 3,
+    mr: 3.5,
+    l: 4,
+    lr: 4.5,
+    xl: 5,
+    xlr: 5.5,
+    xxl: 6,
+    xxlr: 6.5,
+};
+
+const nonExistSizeWeight = 100;
+
+const sortSizes = (sizes: string[]) => {
+    return sizes.sort((a, b) => {
+        return (sizesWeights[a] ?? nonExistSizeWeight) - (sizesWeights[b] ?? nonExistSizeWeight);
+    });
+};
+
+const viewsWeights = {
+    default: 0,
+};
+
+const nonExistViewWeight = 100;
+
+const sortViews = (views: string[]) => {
+    return views.sort((a, b) => (viewsWeights[a] ?? nonExistViewWeight) - (viewsWeights[b] ?? nonExistViewWeight));
+};
+
+const getConfigVariations = () => {
+    const sortLexicographically = (keys: string[]) => keys.sort((a, b) => a.localeCompare(b));
+
+    const filterCss = (keys: string[]) => keys.filter((keys) => keys !== 'css');
+
+    const viewsKeys = filterCss(Object.keys(config.variations.view));
+    const sizesKeys = filterCss(Object.keys(config.variations.size));
+
+    return {
+        views: sortViews(sortLexicographically(viewsKeys)),
+        sizes: sortSizes(sizesKeys),
+    };
+};
+
+const { views, sizes } = getConfigVariations(config);
 
-const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
-const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
 const stretchingValues = ['auto', 'filled', 'fixed'];
 const pinValues = [
     '',
@@ -79,7 +129,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['value']),
+        ...disableProps(['value', 'focused', 'pin']),
     },
 };
 

packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx

@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['value']),
+        ...disableProps(['value', 'pin', 'focused']),
     },
 };
 

packages/plasma-ui/src/components/Button/Button.stories.tsx

@@ -60,6 +60,8 @@ const meta: Meta<ButtonProps> = {
             'onFocus',
             'onBlur',
             'blur',
+            'pin',
+            'focused',
         ]),
     },
 };

packages/plasma-web/api/plasma-web.api.md

@@ -3095,7 +3095,7 @@ onDecrement?: ((value: number) => void) | undefined;
 } & {
 segmentation?: "clear" | undefined;
 inputBackgroundType?: undefined;
-} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "size" | "value"> & RefAttributes<HTMLInputElement>) | ({
+} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "value" | "size"> & RefAttributes<HTMLInputElement>) | ({
 value?: number | undefined;
 min?: number | undefined;
 max?: number | undefined;
@@ -3120,7 +3120,7 @@ onDecrement?: ((value: number) => void) | undefined;
 } & {
 segmentation?: string | undefined;
 inputBackgroundType?: string | undefined;
-} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "size" | "value"> & RefAttributes<HTMLInputElement>))>;
+} & Omit<InputHTMLAttributes_3<HTMLInputElement>, "onChange" | "value" | "size"> & RefAttributes<HTMLInputElement>))>;
 
 export { numberInputClasses }
 

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

@@ -95,6 +95,8 @@ const meta: Meta<ButtonProps> = {
             'stretch',
             'as',
             'forwardedAs',
+            'pin',
+            'focused',
         ]),
     },
 };

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

@@ -6,6 +6,6 @@ const mergedConfig = mergeConfig(buttonConfig, config);
 const ButtonComponent = component(mergedConfig);
 
 /**
- * Кнопка.
+ * Компонент Button.
  */
 export const Button = ButtonComponent;

packages/sdds-cs/api/sdds-cs.api.md

@@ -257,7 +257,7 @@ size?: string | undefined;
 singleActive?: boolean | undefined;
 defaultActiveEventKey?: number[] | undefined;
 disabled?: boolean | undefined;
-stretching?: "fixed" | "filled" | undefined;
+stretching?: "filled" | "fixed" | undefined;
 onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined;
 children?: ReactNode;
 className?: string | undefined;
@@ -290,7 +290,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -313,7 +313,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -339,7 +339,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -363,7 +363,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -390,7 +390,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -416,7 +416,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -439,7 +439,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -466,7 +466,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -1029,7 +1029,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -1050,7 +1050,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -1158,7 +1158,7 @@ contentLeft?: ReactNode;
 contentRight?: ReactNode;
 alignContentLeft?: AlignProp | undefined;
 alignContentRight?: AlignProp | undefined;
-stretching?: "auto" | "fixed" | "filled" | undefined;
+stretching?: "auto" | "filled" | "fixed" | undefined;
 content?: ReactNode;
 description?: string | undefined;
 } & {
@@ -1173,7 +1173,7 @@ contentLeft?: ReactNode;
 contentRight?: ReactNode;
 alignContentLeft?: AlignProp | undefined;
 alignContentRight?: AlignProp | undefined;
-stretching?: "auto" | "fixed" | "filled" | undefined;
+stretching?: "auto" | "filled" | "fixed" | undefined;
 content?: ReactNode;
 description?: string | undefined;
 } & {
@@ -1486,7 +1486,7 @@ export { DrawerHeaderProps }
 export { DrawerProps }
 
 // @public (undocumented)
-export const Dropdown: <T extends DropdownItemOption>(props: Omit<DropdownNewProps<T>, "size" | "view"> & Pick<PropsType<    {
+export const Dropdown: <T extends DropdownItemOption>(props: Omit<DropdownNewProps<T>, "view" | "size"> & Pick<PropsType<    {
 size: {
 l: PolymorphicClassName;
 m: PolymorphicClassName;
@@ -1523,7 +1523,7 @@ default: PolymorphicClassName;
     listOverflow?: Property.Overflow | undefined;
     listHeight?: Property.Height<string | number> | undefined;
     hoverIndex?: number | undefined;
-} & React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>, "size" | "view"> & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | null;
+} & React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>, "view" | "size"> & React_2.RefAttributes<HTMLButtonElement>) => React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | null;
 
 // @public (undocumented)
 export const Dropzone: FunctionComponent<PropsType<    {
@@ -1727,7 +1727,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;
@@ -1748,7 +1748,7 @@ contentPlacing?: ("default" | "relaxed") | undefined;
 isLoading?: boolean | undefined;
 loader?: ReactNode;
 stretch?: boolean | undefined;
-stretching?: ("auto" | "fixed" | "filled") | undefined;
+stretching?: ("auto" | "filled" | "fixed") | undefined;
 square?: boolean | undefined;
 focused?: boolean | undefined;
 disabled?: boolean | undefined;