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

package/styled-components/es/examples/plasma_web/components/Tabs/TabItem.config.js

@@ -15,7 +15,7 @@ export var config = {
     size: {
       xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
       s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2.5rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
-      m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":3rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.5rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+      m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":3rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.375rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
       l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3.5rem;", ":0 0.875rem;", ":0 0.75rem;", ":1.75rem;", ":0.5rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
       h5: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3rem;", ":0rem;", ":1.75rem;", ":0.625rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
       h4: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3.25rem;", ":0rem;", ":2rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),

package/styled-components/es/examples/plasma_web/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:
@@ -71,8 +79,15 @@ const meta: Meta<StoryTabsProps> = {
 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,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
@@ -85,8 +100,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 +114,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 +140,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 +154,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 +187,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 +197,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 +222,7 @@ export const Default: StoryObj<StoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
+        itemQuantity: 8,
     },
     argTypes: {
         clip: {
@@ -240,8 +258,9 @@ const StoryStretch = (props: StoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
+        itemQuantity,
     } = props;
-    const items = Array(8).fill(0);
+    const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
@@ -254,8 +273,8 @@ const StoryStretch = (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}`}
@@ -284,8 +303,15 @@ export const Stretch: StoryObj<StoryTabsProps> = {
 };
 
 const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const { disabled, size, contentLeft: contentLeftOption, contentRight: contentRightOption, hasDivider } = props;
-    const items = Array(4).fill(0);
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
@@ -298,8 +324,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}`}

package/types/components/Tabs/ui/Tabs/Tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAIzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,qKA0BhC,CAAC;AAEF,eAAO,MAAM,WAAW;;;EAyBvB,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,IAAI,0CAKhB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAIzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,qKA0BhC,CAAC;AAEF,eAAO,MAAM,WAAW;;;EAyBvB,CAAC"}