@salutejs/plasma-new-hope 0.173.4-canary.1502.11499843355.0 → 0.173.4-canary.1508.11499305539.0

package/emotion/cjs/examples/plasma_b2c/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;
 
@@ -21,6 +20,7 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
+    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: string) => {
+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: string) => {
+const getContentRight = (contentRightOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,47 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="clear"
-                    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: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, 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 view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="clear"
+                    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}`}
@@ -653,60 +637,37 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        helperText: '',
-        itemQuantity: 6,
-        width: '12rem',
+        hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
-        clip: {
-            options: headerClips,
+        size: {
+            options: headerSizes,
             control: {
                 type: 'select',
             },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
-        stretch: {
-            table: {
-                disable: true,
-            },
-        },
         contentLeft: {
-            table: {
-                disable: true,
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
             },
         },
         contentRight: {
-            table: {
-                disable: true,
+            options: contentRightOptions,
+            control: {
+                type: 'select',
             },
         },
-        hasDivider: {
+        clip: {
             table: {
                 disable: true,
             },
         },
-        size: {
-            options: headerSizes,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryHeaderScroll {...args} />;
-            default:
-                return <StoryHeaderDefault {...args} />;
-        }
     },
+    render: (args) => <StoryHeaderTabs {...args} />,
 };

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;
 
@@ -21,6 +20,7 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
+    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: string) => {
+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: string) => {
+const getContentRight = (contentRightOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,47 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="clear"
-                    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: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, 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 view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="clear"
+                    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}`}
@@ -653,60 +637,37 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        helperText: '',
-        itemQuantity: 6,
-        width: '12rem',
+        hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
-        clip: {
-            options: headerClips,
+        size: {
+            options: headerSizes,
             control: {
                 type: 'select',
             },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
-        stretch: {
-            table: {
-                disable: true,
-            },
-        },
         contentLeft: {
-            table: {
-                disable: true,
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
             },
         },
         contentRight: {
-            table: {
-                disable: true,
+            options: contentRightOptions,
+            control: {
+                type: 'select',
             },
         },
-        hasDivider: {
+        clip: {
             table: {
                 disable: true,
             },
         },
-        size: {
-            options: headerSizes,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryHeaderScroll {...args} />;
-            default:
-                return <StoryHeaderDefault {...args} />;
-        }
     },
+    render: (args) => <StoryHeaderTabs {...args} />,
 };

package/emotion/es/components/Drawer/Drawer.js

@@ -3,13 +3,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useMemo } from 'react';
-import { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';
+import { useForkRef, safeUseId } from '@salutejs/plasma-core';
 import { component, mergeConfig } from '../../engines';
 import { usePopupContext } from '../Popup';
 import { Overlay } from '../Overlay';
 import { DEFAULT_Z_INDEX } from '../Popup/utils';
 import { panelConfig } from '../Panel';
 import { cx, getSizeValueFromProp } from '../../utils';
+import { useFocusTrap } from '../../hooks';
 import { classes, tokens } from './Drawer.tokens';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';

package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js

@@ -92,9 +92,7 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       disabled: disabled,
       pilled: pilled,
       role: role,
-      view: view
-      // TODO: убрать каст any, когда будут удалены deprecated props
-      ,
+      view: view,
       size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,

package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className", "hasDivider"];
+var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -43,8 +43,6 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       index = props.index,
       className = props.className,
-      _props$hasDivider = props.hasDivider,
-      hasDivider = _props$hasDivider === void 0 ? true : _props$hasDivider,
       rest = _objectWithoutProperties(props, _excluded);
     var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -62,7 +60,6 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
     var isFilled = view === 'filled'; // outer padding is only for filled view
     var pilledAttr = view !== 'clear' && pilled;
     var pilledClass = pilledAttr ? classes.tabsPilled : undefined;
-    var noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;
@@ -192,15 +189,13 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       value: refs
     }, /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
-      role: "tablist"
-      // TODO: убрать каст any, когда будут удалены deprecated props
-      ,
+      role: "tablist",
       size: size,
       pilled: pilled,
       id: tabsId,
       ref: outerRef,
       disabled: disabled,
-      className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
+      className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
       className: cx(clipScrollClass, clipShowAllClass),

package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/variations/_view/base.js

@@ -1,3 +1,3 @@
 import { css } from '@emotion/react';
 import { classes, tokens } from '../../../../../tokens';
-export var base = /*#__PURE__*/css("background-color:var(", tokens.tabsBackgroundColor, ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", tokens.tabsDividerColor, ");height:var(", tokens.tabsDividerHeight, ");border-radius:var(", tokens.tabsDividerBorderRadius, ");}&.", classes.tabsHasLeftArrow, "{&::after{left:1.5rem;}}&.", classes.tabsHasRightArrow, "{&::after{right:1.5rem;}}&.", classes.tabsNoDivider, "{&::after{height:0;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVGFicy91aS9ob3Jpem9udGFsL0hvcml6b250YWxUYWJzL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbFRhYnMvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMudGFic0JhY2tncm91bmRDb2xvcn0pO1xuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3R0b206IDAuMTI1cmVtO1xuICAgICAgICBsZWZ0OiAwLjEyNXJlbTtcbiAgICAgICAgcmlnaHQ6IDAuMTI1cmVtO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMudGFic0RpdmlkZXJDb2xvcn0pO1xuICAgICAgICBoZWlnaHQ6IHZhcigke3Rva2Vucy50YWJzRGl2aWRlckhlaWdodH0pO1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMudGFic0RpdmlkZXJCb3JkZXJSYWRpdXN9KTtcbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy50YWJzSGFzTGVmdEFycm93fSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIGxlZnQ6IDEuNXJlbTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnRhYnNIYXNSaWdodEFycm93fSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIHJpZ2h0OiAxLjVyZW07XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy50YWJzTm9EaXZpZGVyfSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIGhlaWdodDogMDtcbiAgICAgICAgfVxuICAgIH1cbmA7XG4iXX0= */"));
+export var base = /*#__PURE__*/css("background-color:var(", tokens.tabsBackgroundColor, ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", tokens.tabsDividerColor, ");height:var(", tokens.tabsDividerHeight, ");border-radius:var(", tokens.tabsDividerBorderRadius, ");}&.", classes.tabsHasLeftArrow, "{&::after{left:1.5rem;}}&.", classes.tabsHasRightArrow, "{&::after{right:1.5rem;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVGFicy91aS9ob3Jpem9udGFsL0hvcml6b250YWxUYWJzL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbFRhYnMvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuLi8uLi8uLi8uLi8uLi90b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMudGFic0JhY2tncm91bmRDb2xvcn0pO1xuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3R0b206IDAuMTI1cmVtO1xuICAgICAgICBsZWZ0OiAwLjEyNXJlbTtcbiAgICAgICAgcmlnaHQ6IDAuMTI1cmVtO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMudGFic0RpdmlkZXJDb2xvcn0pO1xuICAgICAgICBoZWlnaHQ6IHZhcigke3Rva2Vucy50YWJzRGl2aWRlckhlaWdodH0pO1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMudGFic0RpdmlkZXJCb3JkZXJSYWRpdXN9KTtcbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy50YWJzSGFzTGVmdEFycm93fSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIGxlZnQ6IDEuNXJlbTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnRhYnNIYXNSaWdodEFycm93fSB7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgIHJpZ2h0OiAxLjVyZW07XG4gICAgICAgIH1cbiAgICB9XG5gO1xuIl19 */"));

package/emotion/es/examples/plasma_b2c/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;
 
@@ -21,6 +20,7 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
+    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: string) => {
+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: string) => {
+const getContentRight = (contentRightOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,47 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="clear"
-                    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: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, 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 view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="clear"
+                    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}`}
@@ -653,60 +637,37 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        helperText: '',
-        itemQuantity: 6,
-        width: '12rem',
+        hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
-        clip: {
-            options: headerClips,
+        size: {
+            options: headerSizes,
             control: {
                 type: 'select',
             },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
-        stretch: {
-            table: {
-                disable: true,
-            },
-        },
         contentLeft: {
-            table: {
-                disable: true,
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
             },
         },
         contentRight: {
-            table: {
-                disable: true,
+            options: contentRightOptions,
+            control: {
+                type: 'select',
             },
         },
-        hasDivider: {
+        clip: {
             table: {
                 disable: true,
             },
         },
-        size: {
-            options: headerSizes,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryHeaderScroll {...args} />;
-            default:
-                return <StoryHeaderDefault {...args} />;
-        }
     },
+    render: (args) => <StoryHeaderTabs {...args} />,
 };