@salutejs/plasma-new-hope 0.76.5-canary.1188.8748029637.0 → 0.76.6-canary.1183.8752730341.0

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

@@ -51,56 +51,61 @@ const items = [
     { langName, value: 'elixir', label: 'Elixir', disabled: true },
 ];
 
-const StoryDefault = ({ label, description, ...props }: RadioboxProps) => {
+const StoryDefault = (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"
+                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}
+            />
+        </>
     );
 };
 
 export const Default: StoryObj<RadioboxProps> = {
-    args: {
-        ...meta.args,
-        label: 'Это label',
-        description: 'Это описание',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-export const LongText: StoryObj<RadioboxProps> = {
-    args: {
-        ...meta.args,
-        label: 'Ооооооооооооооооооооочень длинный label',
-        description: 'Ооооооооооооооооооооочень длинный description',
-    },
     render: (args) => <StoryDefault {...args} />,
 };
 
-const StoryRadioGroup = (props: RadioboxProps) => {
+const StoryComplex = (props: RadioboxProps) => {
     const [value, setValue] = useState('c');
 
     return (
-        <RadioGroup aria-labelledby="radiogroup-title-id">
+        <RadioGroup>
             <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
-                Выберите язык программирования для изучения.
+                Radiogroup Title
             </div>
             {items.map((item) => (
                 <Radiobox
@@ -124,6 +129,6 @@ const StoryRadioGroup = (props: RadioboxProps) => {
     );
 };
 
-export const ExampleRadioGroup: StoryObj<RadioboxProps> = {
-    render: (args) => <StoryRadioGroup {...args} />,
+export const Complex: StoryObj<RadioboxProps> = {
+    render: (args) => <StoryComplex {...args} />,
 };

package/styled-components/cjs/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/cjs/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/components/Avatar/Avatar.js

@@ -1,5 +1,11 @@
-var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
+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); }
+var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 : 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useMemo } from 'react';
@@ -12,6 +18,10 @@ import { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';
 import { base as viewCSS } from './variations/_size/base';
 import { base as focusedCSS } from './variations/_focused/base';
 import { getInitialsForName } from './utils';
+var StatusLabelsDefault = {
+  active: 'Активен',
+  inactive: 'Неактивен'
+};
 var getAvatarContent = function getAvatarContent(_ref) {
   var customText = _ref.customText,
     url = _ref.url,
@@ -28,12 +38,26 @@ var getAvatarContent = function getAvatarContent(_ref) {
   }
   return /*#__PURE__*/React.createElement(Text, null, initials);
 };
+var getAriaLabel = function getAriaLabel(_ref2) {
+  var url = _ref2.url,
+    name = _ref2.name,
+    status = _ref2.status,
+    ariaLabelProp = _ref2['aria-label'],
+    statusLabels = _ref2.statusLabels;
+  if (!url) {
+    return;
+  }
+
+  // INFO: включаем aria-label чтобы озвучить что на изображении
+  var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
+  return status ? "".concat(ariaLabel, ". ").concat(statusLabels[status]) : ariaLabel;
+};
 var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
 var Indicator = /*#__PURE__*/component(mergedConfig);
 var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
   componentId: "plasma-new-hope__sc-p4w0wq-0"
-})(["", ":var(", ");", ":", ""], indicatorTokens.size, tokens.statusIconSize, indicatorTokens.color, function (_ref2) {
-  var status = _ref2.status;
+})(["", ":var(", ");", ":", ""], indicatorTokens.size, tokens.statusIconSize, indicatorTokens.color, function (_ref3) {
+  var status = _ref3.status;
   return status === 'active' ? "var(".concat(tokens.statusOnlineColor, ")") : "var(".concat(tokens.statusOfflineColor, ")");
 });
 export var avatarRoot = function avatarRoot(Root) {
@@ -47,14 +71,20 @@ export var avatarRoot = function avatarRoot(Root) {
       _props$focused = props.focused,
       focused = _props$focused === void 0 ? true : _props$focused,
       isScalable = props.isScalable,
+      _props$statusLabels = props.statusLabels,
+      statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
       rest = _objectWithoutProperties(props, _excluded);
     var initials = useMemo(function () {
       return getInitialsForName(name);
     }, [name]);
+    var ariaLabel = getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
+      statusLabels: statusLabels
+    }));
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       size: avatarSize,
       className: cx(classes.avatarItem, className),
+      "aria-label": ariaLabel,
       focused: focused
     }, rest), /*#__PURE__*/React.createElement(Wrapper, {
       isScalable: isScalable
@@ -64,6 +94,7 @@ export var avatarRoot = function avatarRoot(Root) {
       initials: initials,
       name: name
     })), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
+      "aria-label": statusLabels[status],
       status: status
     })));
   });

package/styled-components/es/components/Avatar/Avatar.template-doc.mdx

@@ -81,7 +81,32 @@ export function App() {
 ```
 
 ### Доступность
-Добавляем `"role"` и `"tabIndex"`.
+
+#### Avatar c использованием изображения
+
+В данном случае руководствуемся принципом универсального дизайна, т.е. незрячий должен получить ту же информацию, что и зрячий.
+
+Поэтому добавляем/используем свойства: `role`, `tabIndex` и `aria-label`.
+
+Примечание:
+- если указано свойство `name` то `aria-label` можно опустить;
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar role="button" tabIndex={0} name="Иван Фадеев" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+        </>
+    );
+}
+```
+
+#### Avatar c текстом
+
+В этом случае достаточно указать свойство `name`.
 
 ```tsx live
 import React from 'react';
@@ -90,8 +115,33 @@ import { Avatar } from '@salutejs/{{ package }}';
 export function App() {
     return (
         <>
-            <Avatar role="button" tabIndex="0" name="Иван Фадеев" />
+            <Avatar role="button" tabIndex={0} name="Иван Фадеев" />
         </>
     );
 }
 ```
+
+#### Avatar и статус
+
+Если указано свойство `status` его значение будет так же озвучено в комбинации со свойством `name` или `aria-label`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar role="button" tabIndex={0} name="Иван Фадеев" status="inactive" />
+        </>
+    );
+}
+```
+
+Озвучит как `ИФ. Неактивен`. (В данном примере озвучиваются инициалы, производное от ФИО)
+
+#### Свойство statusLabels
+
+Опциональное свойство для корректной озвучки значений свойства `status`.
+
+По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }`.

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/Radiobox/Radiobox.stories.tsx

@@ -51,56 +51,61 @@ const items = [
     { langName, value: 'elixir', label: 'Elixir', disabled: true },
 ];
 
-const StoryDefault = ({ label, description, ...props }: RadioboxProps) => {
+const StoryDefault = (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"
+                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}
+            />
+        </>
     );
 };
 
 export const Default: StoryObj<RadioboxProps> = {
-    args: {
-        ...meta.args,
-        label: 'Это label',
-        description: 'Это описание',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-export const LongText: StoryObj<RadioboxProps> = {
-    args: {
-        ...meta.args,
-        label: 'Ооооооооооооооооооооочень длинный label',
-        description: 'Ооооооооооооооооооооочень длинный description',
-    },
     render: (args) => <StoryDefault {...args} />,
 };
 
-const StoryRadioGroup = (props: RadioboxProps) => {
+const StoryComplex = (props: RadioboxProps) => {
     const [value, setValue] = useState('c');
 
     return (
-        <RadioGroup aria-labelledby="radiogroup-title-id">
+        <RadioGroup>
             <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
-                Выберите язык программирования для изучения.
+                Radiogroup Title
             </div>
             {items.map((item) => (
                 <Radiobox
@@ -124,6 +129,6 @@ const StoryRadioGroup = (props: RadioboxProps) => {
     );
 };
 
-export const ExampleRadioGroup: StoryObj<RadioboxProps> = {
-    render: (args) => <StoryRadioGroup {...args} />,
+export const Complex: StoryObj<RadioboxProps> = {
+    render: (args) => <StoryComplex {...args} />,
 };

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: 'ФИО',
     },
 };