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

package/styled-components/es/examples/plasma_b2c/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_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/es/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/es/examples/plasma_b2c/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_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/es/examples/plasma_b2c/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_b2c/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -92,7 +92,7 @@ const DisclosureRightIcon = (props) => (
     </StyledDisclosureRightIcon>
 );
 
-const StoryNormal = (args: StoryDropdownProps) => {
+const StoryTight = (args: StoryDropdownProps) => {
     const [selected, setSelected] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
@@ -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
@@ -209,6 +190,6 @@ const StoryNormal = (args: StoryDropdownProps) => {
     );
 };
 
-export const Normal: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryNormal {...args} />,
+export const Tight: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryTight {...args} />,
 };

package/styled-components/es/examples/plasma_b2c/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_b2c/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_b2c/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_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)} />} />,
+};