@salutejs/plasma-new-hope 0.173.0-canary.1500.11456169969.0 → 0.173.1-canary.1502.11462220468.0

package/styled-components/cjs/components/_Icon/Icon.assets/InfoCircleOutline.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoCircleOutline = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _path;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
+var InfoCircleOutline = exports.InfoCircleOutline = function InfoCircleOutline(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8ZM12 10.25C12.4142 10.25 12.75 10.5858 12.75 11V17C12.75 17.4142 12.4142 17.75 12 17.75C11.5858 17.75 11.25 17.4142 11.25 17V11C11.25 10.5858 11.5858 10.25 12 10.25Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/cjs/components/_Icon/Icons/IconInfoCircleOutline.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconInfoCircleOutline = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _InfoCircleOutline = /*#__PURE__*/require("../Icon.assets/InfoCircleOutline");
+var _IconRoot = /*#__PURE__*/require("../IconRoot");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var IconInfoCircleOutline = exports.IconInfoCircleOutline = function IconInfoCircleOutline(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: _InfoCircleOutline.InfoCircleOutline
+  });
+};

package/styled-components/cjs/components/_Icon/index.js

@@ -141,6 +141,12 @@ Object.defineProperty(exports, "IconDone", {
     return _IconDone.IconDone;
   }
 });
+Object.defineProperty(exports, "IconInfoCircleOutline", {
+  enumerable: true,
+  get: function get() {
+    return _IconInfoCircleOutline.IconInfoCircleOutline;
+  }
+});
 Object.defineProperty(exports, "IconMic", {
   enumerable: true,
   get: function get() {
@@ -184,4 +190,5 @@ var _IconBlankDocOutline = /*#__PURE__*/require("./Icons/IconBlankDocOutline");
 var _IconBlankOutline = /*#__PURE__*/require("./Icons/IconBlankOutline");
 var _IconBlankPdfOutline = /*#__PURE__*/require("./Icons/IconBlankPdfOutline");
 var _IconBlankTxtOutline = /*#__PURE__*/require("./Icons/IconBlankTxtOutline");
-var _IconBlankXlsOutline = /*#__PURE__*/require("./Icons/IconBlankXlsOutline");
+var _IconBlankXlsOutline = /*#__PURE__*/require("./Icons/IconBlankXlsOutline");
+var _IconInfoCircleOutline = /*#__PURE__*/require("./Icons/IconInfoCircleOutline");

package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js

@@ -35,9 +35,6 @@ var config = exports.config = {
     },
     clear: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
-    },
-    truncate: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

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

@@ -31,10 +31,6 @@ const meta: Meta<typeof Badge> = {
             control: { type: 'boolean' },
             if: { arg: 'clear', truthy: false },
         },
-        maxWidth: {
-            control: { type: 'text' },
-            if: { arg: 'truncate', truthy: true },
-        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
@@ -68,7 +64,7 @@ export const Default: Story = {
         },
     },
     args: {
-        text: 'Hello Kitty',
+        text: 'Hello',
         view: 'default',
         size: 'm',
         enableContentLeft: false,
@@ -76,10 +72,8 @@ export const Default: Story = {
         clear: false,
         pilled: false,
         transparent: false,
-        truncate: false,
-        maxWidth: '100px',
     },
-    render: ({ enableContentLeft, enableContentRight, size, maxWidth, ...rest }: StoryProps) => {
+    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
         const iconSize = size === 'l' ? '1rem' : '0.75rem';
 
         return (
@@ -87,7 +81,6 @@ export const Default: Story = {
                 contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
                 contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
                 size={size}
-                style={{ maxWidth }}
                 {...rest}
             />
         );

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

@@ -12,6 +12,7 @@ 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;
 
@@ -20,7 +21,6 @@ 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: Size) => {
+const getContentLeft = (contentLeftOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
+const getContentRight = (contentRightOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -57,9 +57,6 @@ const meta: Meta<StoryTabsProps> = {
     title: 'plasma_b2c/Tabs',
     component: Tabs,
     decorators: [WithTheme],
-    args: {
-        truncate: false,
-    },
     argTypes: {
         ...disableProps([
             'orientation',
@@ -93,21 +90,13 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        truncate,
         helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs
-            clip="none"
-            view={hasDivider ? 'divider' : 'clear'}
-            truncate={truncate}
-            stretch={stretch}
-            disabled={disabled}
-            size={size}
-        >
+        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -121,7 +110,6 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            truncate={truncate}
                         >
                             {`Label${i + 1}`}
                         </TabItem>
@@ -139,7 +127,6 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        truncate={truncate}
                     >
                         {`Label${i + 1}`}
                     </TabItem>
@@ -160,20 +147,12 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         hasDivider,
         helperText,
         width,
-        truncate,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs
-            truncate={truncate}
-            clip={clip}
-            view={hasDivider ? 'divider' : 'clear'}
-            disabled={disabled}
-            size={size}
-            style={{ width }}
-        >
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -187,7 +166,6 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            truncate={truncate}
                         >
                             {`Label${i + 1}`}
                         </TabItem>
@@ -205,7 +183,6 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        truncate={truncate}
                     >
                         {`Label${i + 1}`}
                     </TabItem>
@@ -225,7 +202,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        truncate,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -244,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs truncate={truncate} clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -258,7 +234,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            truncate={truncate}
                         >
                             {`Label${i + 1}`}
                         </TabItem>
@@ -276,7 +251,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        truncate={truncate}
                     >
                         {`Label${i + 1}`}
                     </TabItem>
@@ -295,7 +269,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
                             size={size as Size}
-                            truncate={false}
                         >
                             ShowAll
                         </TabItem>
@@ -370,19 +343,12 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        truncate,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs
-            orientation="vertical"
-            hasDivider={hasDivider}
-            size={size as Size}
-            disabled={disabled}
-            truncate={truncate}
-        >
+        <Tabs orientation="vertical" hasDivider={hasDivider} size={size as Size} disabled={disabled}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -397,7 +363,6 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            truncate={truncate}
                         >
                             {`Label${i + 1}`}
                         </TabItem>
@@ -416,7 +381,6 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        truncate={truncate}
                     >
                         {`Label${i + 1}`}
                     </TabItem>
@@ -437,7 +401,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         hasDivider,
         helperText,
         height,
-        truncate,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -450,7 +413,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
             clip={clip}
             hasDivider={hasDivider}
             style={{ height }}
-            truncate={truncate}
         >
             {items.map((_, i) => {
                 if (helperText !== '') {
@@ -466,7 +428,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            truncate={truncate}
                         >
                             {`Label${i + 1}`}
                         </TabItem>
@@ -485,7 +446,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        truncate={truncate}
                     >
                         {`Label${i + 1}`}
                     </TabItem>
@@ -505,7 +465,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        truncate,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -524,14 +483,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
     });
 
     return (
-        <Tabs
-            clip={clip}
-            orientation="vertical"
-            size={size as Size}
-            disabled={disabled}
-            hasDivider={hasDivider}
-            truncate={truncate}
-        >
+        <Tabs clip={clip} orientation="vertical" size={size as Size} disabled={disabled} hasDivider={hasDivider}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -546,7 +498,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            truncate={truncate}
                         >
                             {`Label${i + 1}`}
                         </TabItem>
@@ -565,7 +516,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        truncate={truncate}
                     >
                         {`Label${i + 1}`}
                     </TabItem>
@@ -584,7 +534,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         disabled={disabled}
                         size={size as Size}
-                        truncate={false}
                     >
                         ShowAll
                     </TabItem>
@@ -603,7 +552,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         orientation: 'vertical',
         helperText: '',
         height: '10rem',
-        truncate: false,
     },
     argTypes: {
         contentLeft: {
@@ -655,31 +603,47 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-    } = props;
+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 items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="divider"
+                    view="clear"
                     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)}
+                    value={helperText}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -689,37 +653,60 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<StoryTabsProps> = {
+export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        hasDivider: true,
-        itemQuantity: 4,
+        helperText: '',
+        itemQuantity: 6,
+        width: '12rem',
     },
     argTypes: {
-        size: {
-            options: headerSizes,
+        clip: {
+            options: headerClips,
             control: {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
+        width: {
             control: {
-                type: 'select',
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentLeft: {
+            table: {
+                disable: true,
             },
         },
         contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
+            table: {
+                disable: true,
             },
         },
-        clip: {
+        hasDivider: {
             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/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -34,9 +34,6 @@ var config = exports.config = {
     },
     pilled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Tabs.tabsTokens.itemPilledBorderRadius)
-    },
-    truncate: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -36,9 +36,6 @@ var config = exports.config = {
     },
     pilled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.625rem;"], _Tabs.tabsTokens.tabsPilledBorderRadius)
-    },
-    truncate: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js

@@ -23,9 +23,6 @@ var config = exports.config = {
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
-    },
-    truncate: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js

@@ -23,9 +23,6 @@ var config = exports.config = {
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
-    },
-    truncate: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };