@salutejs/plasma-new-hope 0.77.0-canary.1185.8720575745.0 → 0.77.0-canary.1195.8808345201.0

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

@@ -8,6 +8,7 @@ import { Avatar } from '../Avatar/Avatar';
 import { AvatarGroup } from './AvatarGroup';
 
 type Story = StoryObj<ComponentProps<typeof AvatarGroup>>;
+type Avatar = ComponentProps<typeof Avatar>;
 
 const meta: Meta<typeof AvatarGroup> = {
     title: 'plasma_b2c/AvatarGroup',
@@ -33,40 +34,57 @@ export const Default: Story = {
 
 export const DynamicSize: Story = {
     args: { totalCount: 10, visibleCount: 3 },
-    render: (args: ComponentProps<typeof AvatarGroup>) => {
-        const itemLength = args.totalCount;
+    render: ({ visibleCount, totalCount, ...args }: ComponentProps<typeof AvatarGroup>) => {
+        const itemLength = totalCount;
 
         return (
             <AvatarGroup {...args}>
-                {Array(args.visibleCount)
+                {Array(visibleCount)
                     .fill(true)
                     .map((_, index) => (
-                        <Avatar size="xxl" customText={index + 1} />
+                        <Avatar size="xxl" key={index} customText={index + 1} />
                     ))}
 
-                {itemLength > args.visibleCount && (
-                    <Avatar size="xxl" customText={`+${itemLength - args.visibleCount}`} />
-                )}
+                {itemLength > visibleCount && <Avatar size="xxl" customText={`+${itemLength - visibleCount}`} />}
             </AvatarGroup>
         );
     },
 };
 
+const list: Array<Avatar> = [
+    {
+        name: 'Илья Муромец',
+        status: 'active',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+    {
+        name: 'Алеша Попович',
+        status: 'active',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+    {
+        name: 'Добрыня Никитич',
+        status: 'active',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+    {
+        name: 'Микула Селянинович',
+        status: 'inactive',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+    {
+        name: 'Ставр Годинович',
+        status: 'inactive',
+    },
+];
+
 export const Accessibility: Story = {
     render: (args: ComponentProps<typeof AvatarGroup>) => {
         return (
             <AvatarGroup {...args}>
-                {Array(5)
-                    .fill(true)
-                    .map(() => (
-                        <Avatar
-                            role="button"
-                            tabIndex={0}
-                            focused
-                            size="xxl"
-                            url="https://avatars.githubusercontent.com/u/1813468?v=4"
-                        />
-                    ))}
+                {list.map((props) => (
+                    <Avatar role="button" tabIndex={0} focused key={props.name} size="xxl" {...props} />
+                ))}
             </AvatarGroup>
         );
     },

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

@@ -1,6 +1,9 @@
-import { ComponentProps } from 'react';
+import * as React from 'react';
+import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
+import { IconMic } from '../../../../components/_Icon';
 import { buttonConfig } from '../../../../components/Button';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
@@ -12,6 +15,16 @@ const meta: Meta<typeof Button> = {
     title: 'plasma_b2c/Button',
     decorators: [WithTheme],
     component: Button,
+    args: {
+        text: 'Hello',
+        view: 'default',
+        size: 'm',
+        disabled: false,
+        focused: true,
+        square: false,
+        stretching: 'auto',
+        isLoading: false,
+    },
     argTypes: {
         ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
         pin: {
@@ -41,15 +54,18 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 
-export const Default: StoryObj<ComponentProps<typeof Button>> = {
-    args: {
-        children: 'Hello',
-        view: 'default',
-        size: 'm',
-        disabled: false,
-        focused: true,
-        square: false,
-        stretching: 'auto',
-        isLoading: false,
+export const Default: StoryObj<ComponentProps<typeof Button>> = {};
+
+export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
+    argTypes: { ...disableProps(['text']) },
+    render: (props: ComponentProps<typeof Button>) => {
+        const args = { ...props, text: undefined };
+
+        return (
+            <Button {...args}>
+                <IconMic color="inherit" />
+                <span>Включить микрофон</span>
+            </Button>
+        );
     },
 };

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -112,10 +112,10 @@ const StoryNormal = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
+    const handleSelect = (value: string, text: string) => {
         setSelected(value);
         onSelect(value, text);
-        toggleIsOpen(false);
+        setIsOpen(false);
     };
 
     return (
@@ -127,51 +127,34 @@ const StoryNormal = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
-                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
+                        onSelect={() => handleSelect(item.value, item.child)}
                         onClick={onClick}
                         value={item.value}
-                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={
-                        <DropdownItem
-                            contentRight={DisclosureRightIcon}
-                            role="option"
-                            name="test"
-                            text="Nested dropdown"
-                        />
-                    }
+                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
-                    role="listbox"
                     offset={[0, 0]}
                     {...rest}
                 >
-                    <DropdownItem
-                        contentRight={StyledCheckbox}
-                        role="option"
-                        value="checked"
-                        onChange={onChange}
-                        text="Checkbox"
-                    />
+                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
+                            onSelect={() => handleSelect(item.value, item.child)}
                             onClick={onClick}
                             value={item.value}
-                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -182,7 +165,6 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
-                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -190,16 +172,14 @@ const StoryNormal = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
-                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
+                    onSelect={() => handleSelect('disabled', 'disabled')}
                     onClick={onClick}
                     value="disabled"
-                    role="option"
                     disabled
                 >
                     disabled

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js

@@ -21,7 +21,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemBackgroundSelected, _Dropdown.dropdownTokens.itemColorSelected, _Dropdown.dropdownTokens.itemBackgroundSelectedHover, _Dropdown.dropdownTokens.itemColorSelectedHover, _Dropdown.dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -112,10 +112,10 @@ const StoryTight = (args: StoryDropdownProps) => {
         }
     };
 
-    const handleSelect = (value: string, text: string, toggleIsOpen: React.Dispatch<React.SetStateAction<boolean>>) => {
+    const handleSelect = (value: string, text: string) => {
         setSelected(value);
         onSelect(value, text);
-        toggleIsOpen(false);
+        setIsOpen(false);
     };
 
     return (
@@ -127,51 +127,35 @@ const StoryTight = (args: StoryDropdownProps) => {
                 onToggle={onMainToggle}
                 offset={[Number(skidding), Number(distance)]}
                 placement={placement}
-                role="listbox"
                 {...rest}
             >
                 {getDropdownItems('item', 6).map((item) => (
                     <DropdownItem
                         key={item.value}
                         isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child, setIsOpen)}
+                        onSelect={() => handleSelect(item.value, item.child)}
                         onClick={onClick}
                         value={item.value}
-                        role="option"
                     >
                         {item.child}
                     </DropdownItem>
                 ))}
                 <Dropdown
-                    target={
-                        <DropdownItem
-                            contentRight={DisclosureRightIcon}
-                            role="option"
-                            name="test"
-                            text="Nested dropdown"
-                        />
-                    }
+                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
                     onToggle={(is) => setIsOpenDropdown2(is)}
                     isOpen={isOpenDropdown2}
-                    role="listbox"
                     offset={[0, 0]}
+                    isNested
                     {...rest}
                 >
-                    <DropdownItem
-                        contentRight={StyledCheckbox}
-                        role="option"
-                        value="checked"
-                        onChange={onChange}
-                        text="Checkbox"
-                    />
+                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
                     {getDropdownItems('nested', 4).map((item) => (
                         <DropdownItem
                             key={item.value}
                             isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child, setIsOpenDropdown2)}
+                            onSelect={() => handleSelect(item.value, item.child)}
                             onClick={onClick}
                             value={item.value}
-                            role="option"
                         >
                             {item.child}
                         </DropdownItem>
@@ -182,7 +166,6 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
-                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -190,16 +173,14 @@ const StoryTight = (args: StoryDropdownProps) => {
                         value="2"
                         onChange={onChange}
                         text="Radiobox 2"
-                        role="option"
                     />
                 </Dropdown>
 
                 <DropdownItem
                     isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled', setIsOpen)}
+                    onSelect={() => handleSelect('disabled', 'disabled')}
                     onClick={onClick}
                     value="disabled"
-                    role="option"
                     disabled
                 >
                     disabled

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

@@ -8,7 +8,7 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Grid = /*#__PURE__*/require("../../../../components/Grid");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var config = exports.config = {
   defaults: {

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var config = exports.config = {
+  defaults: {
+    view: 'primary',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      success: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      critical: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":3.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":3rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5remm;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":2.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":2rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _IconButton.iconButtonTokens.iconButtonDisabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _IconButton.iconButtonTokens.iconButtonFocusColor)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = void 0;
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _IconButton2 = /*#__PURE__*/require("./IconButton.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig, _IconButton2.config);
+var IconButton = exports.IconButton = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -0,0 +1,65 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { iconButtonConfig } from '../../../../components/IconButton';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconChevronLeft } from '../../../../components/_Icon';
+
+import { config } from './IconButton.config';
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+    title: 'plasma_b2c/IconButton',
+    decorators: [WithTheme],
+    component: IconButton,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
+        pin: {
+            options: [
+                'square-square',
+                'square-clear',
+                'clear-square',
+                'clear-clear',
+                'clear-circle',
+                'circle-clear',
+                'circle-circle',
+                '',
+            ],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'bottom' } },
+        },
+    },
+};
+
+export default meta;
+
+const getSizeForIcon = (size) => {
+    if (size === 'mr') {
+        return 'm';
+    }
+    if (size === 'lr') {
+        return 'l';
+    }
+    if (size === 'sr') {
+        return 's';
+    }
+    if (size === 'xsr') {
+        return 'xs';
+    }
+    return size;
+};
+
+export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
+    args: {
+        children: <IconChevronLeft />,
+        view: 'primary',
+        size: 'm',
+        disabled: false,
+        focused: true,
+        isLoading: false,
+    },
+    render: (args) => <IconButton {...args} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
+};

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

@@ -51,61 +51,56 @@ const items = [
     { langName, value: 'elixir', label: 'Elixir', disabled: true },
 ];
 
-const StoryDefault = (props: RadioboxProps) => {
+const StoryDefault = ({ label, description, name, ...props }: RadioboxProps) => {
     const value = 0;
     const [checked, setChecked] = useState(true);
 
     return (
-        <>
-            <Radiobox
-                name="item.name"
-                value={value}
-                singleLine
-                label="Label"
-                description="Description"
-                checked={checked}
-                onChange={(event) => {
-                    event.persist();
-
-                    setChecked(event.target.checked);
-                    onChange(event);
-                }}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...props}
-            />
-            <Radiobox
-                name="item.name"
-                value={value}
-                singleLine
-                label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
-                description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
-                checked={checked}
-                onChange={(event) => {
-                    event.persist();
-
-                    setChecked(event.target.checked);
-                    onChange(event);
-                }}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...props}
-            />
-        </>
+        <Radiobox
+            name={name}
+            value={value}
+            singleLine
+            label={label}
+            description={description}
+            checked={checked}
+            onChange={(event) => {
+                event.persist();
+
+                setChecked(event.target.checked);
+                onChange(event);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            {...props}
+        />
     );
 };
 
 export const Default: StoryObj<RadioboxProps> = {
+    args: {
+        label: 'Это label',
+        description: 'Это описание',
+        name: 'default',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+export const LongText: StoryObj<RadioboxProps> = {
+    args: {
+        label: 'Ооооооооооооооооооооочень длинный label',
+        description: 'Ооооооооооооооооооооочень длинный description',
+        name: 'long',
+    },
     render: (args) => <StoryDefault {...args} />,
 };
 
-const StoryComplex = (props: RadioboxProps) => {
+const StoryRadioGroup = () => {
     const [value, setValue] = useState('c');
 
     return (
-        <RadioGroup>
+        <RadioGroup aria-labelledby="radiogroup-title-id">
             <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
-                Radiogroup Title
+                Выберите язык программирования для изучения.
             </div>
             {items.map((item) => (
                 <Radiobox
@@ -122,13 +117,12 @@ const StoryComplex = (props: RadioboxProps) => {
                     }}
                     onFocus={onFocus}
                     onBlur={onBlur}
-                    {...props}
                 />
             ))}
         </RadioGroup>
     );
 };
 
-export const Complex: StoryObj<RadioboxProps> = {
-    render: (args) => <StoryComplex {...args} />,
+export const ExampleRadioGroup: StoryObj<RadioboxProps> = {
+    render: () => <StoryRadioGroup />,
 };