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

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

@@ -72,7 +72,7 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
@@ -86,12 +86,13 @@ const StoryDefault = (props: StoryTabsProps) => {
         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}`}
@@ -223,6 +224,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -237,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -250,58 +253,6 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-        itemQuantity,
-    } = props;
-    const items = Array(itemQuantity).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, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    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,
@@ -340,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {

package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -72,7 +72,7 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
@@ -86,12 +86,13 @@ const StoryDefault = (props: StoryTabsProps) => {
         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}`}
@@ -223,6 +224,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -237,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -250,58 +253,6 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-        itemQuantity,
-    } = props;
-    const items = Array(itemQuantity).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, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    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,
@@ -340,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {

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

@@ -72,7 +72,7 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
@@ -86,12 +86,13 @@ const StoryDefault = (props: StoryTabsProps) => {
         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}`}
@@ -223,6 +224,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -237,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -250,58 +253,6 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-        itemQuantity,
-    } = props;
-    const items = Array(itemQuantity).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, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    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,
@@ -340,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {

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

@@ -72,7 +72,7 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
@@ -86,12 +86,13 @@ const StoryDefault = (props: StoryTabsProps) => {
         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}`}
@@ -223,6 +224,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -237,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -250,58 +253,6 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-        itemQuantity,
-    } = props;
-    const items = Array(itemQuantity).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, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    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,
@@ -340,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.114.1-canary.1333.10216082008.0",
+  "version": "0.114.1-canary.1333.10245863111.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -118,5 +118,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "29878f158269bf41363f4d2242d22472666df001"
+  "gitHead": "fb51cc7966a98220cdc4fde1fac7bb4e9a39578d"
 }

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -72,7 +72,7 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
@@ -86,12 +86,13 @@ const StoryDefault = (props: StoryTabsProps) => {
         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}`}
@@ -223,6 +224,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -237,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -250,58 +253,6 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-        itemQuantity,
-    } = props;
-    const items = Array(itemQuantity).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, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    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,
@@ -340,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {

package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -72,7 +72,7 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
@@ -86,12 +86,13 @@ const StoryDefault = (props: StoryTabsProps) => {
         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}`}
@@ -223,6 +224,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -237,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -250,58 +253,6 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-        itemQuantity,
-    } = props;
-    const items = Array(itemQuantity).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, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    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,
@@ -340,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {

package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -72,7 +72,7 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
@@ -86,12 +86,13 @@ const StoryDefault = (props: StoryTabsProps) => {
         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}`}
@@ -223,6 +224,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -237,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -250,58 +253,6 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-        itemQuantity,
-    } = props;
-    const items = Array(itemQuantity).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, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    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,
@@ -340,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {

package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -72,7 +72,7 @@ const meta: Meta<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'stretch', 'view']),
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
@@ -86,12 +86,13 @@ const StoryDefault = (props: StoryTabsProps) => {
         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}`}
@@ -223,6 +224,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         itemQuantity: 8,
+        clip: 'scroll',
     },
     argTypes: {
         clip: {
@@ -237,6 +239,7 @@ export const Default: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        stretch: { control: 'boolean', if: { arg: 'clip', eq: 'none' } },
     },
     render: (args) => {
         switch (args.clip) {
@@ -250,58 +253,6 @@ export const Default: StoryObj<StoryTabsProps> = {
     },
 };
 
-const StoryStretch = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-        itemQuantity,
-    } = props;
-    const items = Array(itemQuantity).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, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    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,
@@ -340,6 +291,7 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
         size: 'h5',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
         size: {