@salutejs/plasma-new-hope 0.172.0-canary.1493.11403245502.0 → 0.172.0-canary.1494.11453767955.0

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

@@ -12,7 +12,6 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
-const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -53,7 +52,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
 type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
 type VerticalStoryTabsProps = StoryTabsProps & { height: string };
-type HeaderStoryTabsProps = StoryTabsProps & { width: string };
 
 const meta: Meta<StoryTabsProps> = {
     title: 'plasma_web/Tabs',
@@ -70,7 +68,6 @@ const meta: Meta<StoryTabsProps> = {
             'forwardedAs',
             'outsideScroll',
             'index',
-            'header',
         ]),
         contentRight: {
             options: contentRightOptions,
@@ -606,55 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderDefault = (props: HeaderStoryTabsProps) => {
-    const { disabled, itemQuantity, size, hasDivider, helperText } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs header view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size as HeaderSize}>
-            {items.map((_, i) => (
-                <TabItem
-                    header
-                    key={`item:${i}`}
-                    view="divider"
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    value={helperText}
-                    size={size as HeaderSize}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
-        </Tabs>
-    );
-};
-
-const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
-    const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
+const StoryHeaderTabs = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        stretch,
+    } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs
-            header
-            view={hasDivider ? 'divider' : 'clear'}
-            disabled={disabled}
-            size={size as HeaderSize}
-            style={{ width }}
-        >
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
-                    header
                     key={`item:${i}`}
                     view="divider"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={helperText}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -664,14 +637,12 @@ const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
         hasDivider: true,
-        helperText: '',
-        itemQuantity: 6,
-        width: '12rem',
+        itemQuantity: 4,
     },
     argTypes: {
         size: {
@@ -680,36 +651,23 @@ export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
                 type: 'select',
             },
         },
-        clip: {
-            options: headerClips,
+        contentLeft: {
+            options: contentLeftOptions,
             control: {
                 type: 'select',
             },
-            if: { arg: 'stretch', truthy: false },
         },
-        width: {
+        contentRight: {
+            options: contentRightOptions,
             control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
-        stretch: {
-            table: {
-                disable: true,
+                type: 'select',
             },
         },
-        contentRight: {
+        clip: {
             table: {
                 disable: true,
             },
         },
     },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryHeaderScroll {...args} />;
-            default:
-                return <StoryHeaderDefault {...args} />;
-        }
-    },
+    render: (args) => <StoryHeaderTabs {...args} />,
 };