@salutejs/plasma-new-hope 0.160.1-canary.1374.11160084202.0 → 0.160.1-canary.1374.11174853993.0

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

@@ -16,6 +16,7 @@ const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
 type Size = typeof sizes[number];
+type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
@@ -66,6 +67,13 @@ const meta: Meta<StoryTabsProps> = {
             'outsideScroll',
             'index',
         ]),
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'helperText', eq: '' },
+        },
     },
 };
 
@@ -87,22 +95,41 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
 
     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}
-                    value={helperText}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
+            {items.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            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)}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <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 as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
         </Tabs>
     );
 };
@@ -129,22 +156,41 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
             size={size}
             style={{ width: '15rem' }}
         >
-            {items.map((_, i) => (
-                <TabItem
-                    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}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
+            {items.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            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)}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <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 as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
         </Tabs>
     );
 };
@@ -178,22 +224,41 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
 
     return (
         <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
-            {visibleItems.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}
-                    value={helperText}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
+            {visibleItems.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            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)}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <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 as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
             {dropdownItems.length > 0 && (
                 <div style={{ marginLeft: '1.75rem' }}>
                     <Dropdown
@@ -206,7 +271,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
                             view="divider"
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
-                            size={size}
+                            size={size as Size}
                         >
                             ShowAll
                         </TabItem>
@@ -278,15 +343,33 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <div style={{ height: '100vh' }}>
-            <Tabs
-                orientation="vertical"
-                hasDivider={hasDivider}
-                size={size as Size}
-                disabled={disabled}
-                contentLeft={getContentLeft(contentLeftOption, size as Size)}
-            >
-                {items.map((_, i) => (
+        <Tabs
+            orientation="vertical"
+            hasDivider={hasDivider}
+            size={size as Size}
+            disabled={disabled}
+            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+        >
+            {items.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            orientation="vertical"
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
                     <TabItem
                         orientation="vertical"
                         key={`item:${i}`}
@@ -294,16 +377,15 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
                         selected={i === index}
                         onClick={() => !disabled && setIndex(i)}
                         tabIndex={!disabled ? 0 : -1}
-                        size={size as Size}
                         disabled={disabled}
-                        value={helperText}
                         contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
                     >
                         {`Label${i + 1}`}
                     </TabItem>
-                ))}
-            </Tabs>
-        </div>
+                );
+            })}
+        </Tabs>
     );
 };
 
@@ -322,17 +404,35 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <div style={{ height: '100vh' }}>
-            <Tabs
-                orientation="vertical"
-                size={size as Size}
-                disabled={disabled}
-                clip={clip}
-                style={{ height: '10rem' }}
-                contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                hasDivider={hasDivider}
-            >
-                {items.map((_, i) => (
+        <Tabs
+            orientation="vertical"
+            size={size as Size}
+            disabled={disabled}
+            clip={clip}
+            style={{ height: '10rem' }}
+            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+            hasDivider={hasDivider}
+        >
+            {items.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            orientation="vertical"
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
                     <TabItem
                         orientation="vertical"
                         key={`item:${i}`}
@@ -340,16 +440,15 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
                         selected={i === index}
                         onClick={() => !disabled && setIndex(i)}
                         tabIndex={!disabled ? 0 : -1}
-                        size={size as Size}
                         disabled={disabled}
-                        value={helperText}
                         contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
                     >
                         {`Label${i + 1}`}
                     </TabItem>
-                ))}
-            </Tabs>
-        </div>
+                );
+            })}
+        </Tabs>
     );
 };
 
@@ -389,21 +488,41 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
             contentLeft={getContentLeft(contentLeftOption, size as Size)}
             hasDivider={hasDivider}
         >
-            {visibleItems.map((_, i) => (
-                <TabItem
-                    orientation="vertical"
-                    key={`item:${i}`}
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    value={helperText}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size as Size}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
+            {visibleItems.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            orientation="vertical"
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <TabItem
+                        orientation="vertical"
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        disabled={disabled}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
             {dropdownItems.length > 0 && (
                 <Dropdown
                     size={size as Size}
@@ -504,7 +623,7 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
                     disabled={disabled}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size}
+                    size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
                 </TabItem>