@salutejs/plasma-new-hope 0.114.1-canary.1333.10211221618.0 → 0.114.1-canary.1333.10245863111.0

package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -18,8 +18,11 @@ const clips = ['none', 'scroll', 'showAll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
+type Size = typeof sizes[number];
+
 type CustomStoryTabsProps = {
     hasDivider: boolean;
+    itemQuantity: number;
     contentLeft: string;
     contentRight: string;
     stretch?: boolean;
@@ -28,15 +31,20 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'text', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string) =>
-    contentLeftOption === 'icon' ? <IconMic size="xs" color="inherit" /> : undefined;
+const getContentLeft = (contentLeftOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
+};
+
+const getContentRight = (contentRightOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
-const getContentRight = (contentRightOption: string) => {
     switch (contentRightOption) {
         case 'icon':
-            return <IconMic size="xs" color="inherit" />;
+            return <IconMic size={iconSize} color="inherit" />;
         case 'counter':
-            return <Counter count={1} view="positive" />;
+            return <Counter size={counterSize} count={1} view="positive" />;
         case 'text':
             return <div>Text</div>;
         default:
@@ -64,19 +72,27 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
 export default meta;
 
 const StoryDefault = (props: StoryTabsProps) => {
-    const { disabled, size, contentLeft: contentLeftOption, contentRight: contentRightOption, hasDivider } = props;
-    const items = Array(8).fill(0);
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        stretch,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -85,8 +101,8 @@ const StoryDefault = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption)}
-                    contentRight={getContentRight(contentRightOption)}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
                 >
                     {`Label${i + 1}`}
@@ -99,13 +115,14 @@ const StoryDefault = (props: StoryTabsProps) => {
 const StoryScroll = (props: StoryTabsProps) => {
     const {
         disabled,
+        itemQuantity,
         clip,
         size,
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
     } = props;
-    const items = Array(8).fill(0);
+    const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
@@ -124,8 +141,8 @@ const StoryScroll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption)}
-                    contentRight={getContentRight(contentRightOption)}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
                 >
                     {`Label${i + 1}`}
@@ -138,21 +155,22 @@ const StoryScroll = (props: StoryTabsProps) => {
 const StoryShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
+        itemQuantity,
         clip,
         size,
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
     } = props;
-    const maxItemsNumber = 3;
-    const items = Array(8).fill(0);
+    const maxItemQuantity = 3;
+    const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
-    const visibleItems = items.slice(0, maxItemsNumber);
-    const otherItems = items.slice(maxItemsNumber);
+    const visibleItems = items.slice(0, maxItemQuantity);
+    const otherItems = items.slice(maxItemQuantity);
 
     const dropdownItems = otherItems.map((_, i) => {
-        const itemIndex = maxItemsNumber + i;
+        const itemIndex = maxItemQuantity + i;
 
         return {
             label: `Label${itemIndex + 1}`,
@@ -170,8 +188,8 @@ const StoryShowAll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption)}
-                    contentRight={getContentRight(contentRightOption)}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
                 >
                     {`Label${i + 1}`}
@@ -180,7 +198,7 @@ const StoryShowAll = (props: StoryTabsProps) => {
             {dropdownItems.length > 0 && (
                 <div style={{ marginLeft: '1.75rem' }}>
                     <Dropdown
-                        size={size as typeof sizes[number]}
+                        size={size as Size}
                         items={dropdownItems}
                         onItemSelect={(item) => setIndex(item.value as number)}
                     >
@@ -205,6 +223,8 @@ export const Default: StoryObj<StoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -219,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -232,60 +253,16 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
+const StoryHeaderTabs = (props: StoryTabsProps) => {
     const {
         disabled,
+        itemQuantity,
         size,
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        stretch,
     } = props;
-    const items = Array(8).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="divider"
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption)}
-                    contentRight={getContentRight(contentRightOption)}
-                    size={size}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
-        </Tabs>
-    );
-};
-
-export const Stretch: StoryObj<StoryTabsProps> = {
-    args: {
-        size: 'xs',
-        stretch: true,
-        disabled: false,
-        hasDivider: true,
-    },
-    argTypes: {
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    render: (args) => <StoryStretch {...args} />,
-};
-
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const { disabled, size, contentLeft: contentLeftOption, contentRight: contentRightOption, hasDivider } = props;
-    const items = Array(4).fill(0);
+    const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
@@ -298,8 +275,8 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption)}
-                    contentRight={getContentRight(contentRightOption)}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
                 >
                     {`Label${i + 1}`}
@@ -314,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {