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

package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx

@@ -34,13 +34,38 @@ export const Default: Story = {
 };
 
 export const Accessibility: Story = {
+    args: {
+        role: 'button',
+        name: 'Геннадий Силуянович',
+        tabIndex: 0,
+        view: 'default',
+        size: 'xxl',
+        status: 'active',
+        focused: true,
+    },
+};
+
+export const AccessibilityWithURL: Story = {
     args: {
         role: 'button',
         tabIndex: 0,
         view: 'default',
         size: 'xxl',
-        name: 'Иван Фадеев',
         status: 'active',
         focused: true,
+        name: 'Микула Селянинович',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+};
+
+export const AccessibilityWithCustomText: Story = {
+    args: {
+        role: 'button',
+        tabIndex: 0,
+        view: 'default',
+        size: 'xxl',
+        status: 'inactive',
+        focused: true,
+        customText: 'ФИО',
     },
 };

package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js

@@ -15,7 +15,7 @@ export var config = {
       l: /*#__PURE__*/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, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
+      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/es/examples/plasma_web/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,35 @@ 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]}
+                    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 StoryNormal = (args: StoryDropdownProps) => {
                         value="1"
                         onChange={onChange}
                         text="Radiobox 1"
-                        role="option"
                     />
                     <DropdownItem
                         contentLeft={StyledRadiobox}
@@ -190,16 +173,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/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js

@@ -15,7 +15,7 @@ export var config = {
       l: /*#__PURE__*/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, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
+      "default": /*#__PURE__*/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);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
     }
   }
 };

package/styled-components/es/examples/plasma_web/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/es/examples/plasma_web/components/Grid/Grid.config.js

@@ -1,6 +1,6 @@
 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); }
 import { css } from 'styled-components';
 import { getBaseGridView, gridTokens } from '../../../../components/Grid';

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js

@@ -0,0 +1,39 @@
+import { css } from 'styled-components';
+import { iconButtonTokens } from '../../../../components/IconButton';
+export var config = {
+  defaults: {
+    view: 'primary',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      primary: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      accent: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      success: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      warning: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      critical: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      dark: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      black: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      white: /*#__PURE__*/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);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
+    },
+    size: {
+      l: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      lr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      m: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      mr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      s: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      sr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      xs: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      xsr: /*#__PURE__*/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;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
+    }
+  }
+};

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js

@@ -0,0 +1,5 @@
+import { iconButtonConfig } from '../../../../components/IconButton';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './IconButton.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig, config);
+export var IconButton = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_web/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_web/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/es/examples/plasma_web/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 />,
 };

package/styled-components/es/examples/sds_engineer/components/Avatar/Avatar.stories.tsx

@@ -30,10 +30,36 @@ export const Default: Story = {
 export const Accessibility: Story = {
     args: {
         role: 'button',
+        name: 'Геннадий Силуянович',
         tabIndex: 0,
         view: 'default',
         size: 'xxl',
-        name: 'Иван Фадеев',
+        status: 'active',
+        focused: true,
+    },
+};
+
+export const AccessibilityWithURL: Story = {
+    args: {
+        role: 'button',
+        tabIndex: 0,
+        view: 'default',
+        size: 'xxl',
+        status: 'active',
+        focused: true,
+        name: 'Микула Селянинович',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+};
+
+export const AccessibilityWithCustomText: Story = {
+    args: {
+        role: 'button',
+        tabIndex: 0,
+        view: 'default',
+        size: 'xxl',
+        status: 'inactive',
         focused: true,
+        customText: 'ФИО',
     },
 };

package/styled-components/es/examples/sds_engineer/components/Grid/Grid.config.js

@@ -1,6 +1,6 @@
 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); }
 import { css } from 'styled-components';
 import { getBaseGridView, gridTokens } from '../../../../components/Grid';

package/styled-components/es/index.js

@@ -5,6 +5,7 @@ export * from './engines';
 export * from './hooks';
 export * from './utils';
 export * from './components/Button';
+export * from './components/IconButton';
 export * from './components/ButtonGroup';
 export * from './components/Chip';
 export * from './components/Cell';

package/styled-components/es/mixins/applySpacing.js

@@ -8,7 +8,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 baseSpacing = {
   0: '0',

package/styled-components/es/mixins/typography.js

@@ -2,7 +2,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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); }
 export var dsplL = {
   fontFamily: 'var(--plasma-typo-dspl-l-font-family)',

package/types/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RootProps } from '../../engines';
-import { AvatarProps } from './Avatar.types';
+import type { AvatarProps, StatusLabels } from './Avatar.types';
 export declare const avatarRoot: (Root: RootProps<HTMLDivElement, AvatarProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     size: "m" | "s" | "l" | "xxl" | "fit";
     name?: string | undefined;
@@ -9,6 +9,7 @@ export declare const avatarRoot: (Root: RootProps<HTMLDivElement, AvatarProps>)
     status?: "active" | "inactive" | undefined;
     isScalable?: boolean | undefined;
     focused?: boolean | undefined;
+    statusLabels?: StatusLabels | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const avatarConfig: {
     name: string;
@@ -21,6 +22,7 @@ export declare const avatarConfig: {
         status?: "active" | "inactive" | undefined;
         isScalable?: boolean | undefined;
         focused?: boolean | undefined;
+        statusLabels?: StatusLabels | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
     base: import("@linaria/core").LinariaClassName;
     variations: {

package/types/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,SAAS,EAA0B,MAAM,eAAe,CAAC;AAMlE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAiC7C,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;wCA4BtE,CAAC;AAEF,eAAO,MAAM,YAAY;;;mBA9BQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;CA8CtE,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,SAAS,EAA0B,MAAM,eAAe,CAAC;AASlE,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuDhE,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;wCAwCtE,CAAC;AAEF,eAAO,MAAM,YAAY;;;mBA1CQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;CA0DtE,CAAC"}

package/types/components/Avatar/Avatar.types.d.ts

@@ -7,7 +7,14 @@ declare type CustomAvatarProps = {
     status?: 'active' | 'inactive';
     isScalable?: boolean;
     focused?: boolean;
+    /**
+     * Словарь для озвучивания значений свойства status [a11y]
+     * @default
+     * { active: 'Активен', inactive: 'Неактивен' }
+     */
+    statusLabels?: StatusLabels;
 };
+export declare type StatusLabels = Record<'active' | 'inactive', string>;
 export declare type AvatarProps = HTMLAttributes<HTMLDivElement> & CustomAvatarProps;
 export {};
 //# sourceMappingURL=Avatar.types.d.ts.map