@salutejs/plasma-new-hope 0.76.4-dev.0 → 0.76.5-canary.1180.8748298731.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (27) hide show
  1. package/cjs/components/Avatar/Avatar.js +28 -3
  2. package/cjs/components/Avatar/Avatar.js.map +1 -1
  3. package/es/components/Avatar/Avatar.js +29 -4
  4. package/es/components/Avatar/Avatar.js.map +1 -1
  5. package/package.json +2 -2
  6. package/styled-components/cjs/components/Avatar/Avatar.js +33 -3
  7. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +52 -2
  8. package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +26 -1
  9. package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +36 -18
  10. package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx +26 -1
  11. package/styled-components/cjs/examples/sds_engineer/components/Avatar/Avatar.stories.tsx +27 -1
  12. package/styled-components/es/components/Avatar/Avatar.js +34 -3
  13. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +52 -2
  14. package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +26 -1
  15. package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +36 -18
  16. package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx +26 -1
  17. package/styled-components/es/examples/sds_engineer/components/Avatar/Avatar.stories.tsx +27 -1
  18. package/types/components/Avatar/Avatar.d.ts +3 -1
  19. package/types/components/Avatar/Avatar.d.ts.map +1 -1
  20. package/types/components/Avatar/Avatar.types.d.ts +7 -0
  21. package/types/components/Avatar/Avatar.types.d.ts.map +1 -1
  22. package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts +2 -0
  23. package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts.map +1 -1
  24. package/types/examples/plasma_web/components/Avatar/Avatar.d.ts +2 -0
  25. package/types/examples/plasma_web/components/Avatar/Avatar.d.ts.map +1 -1
  26. package/types/examples/sds_engineer/components/Avatar/Avatar.d.ts +1 -0
  27. package/types/examples/sds_engineer/components/Avatar/Avatar.d.ts.map +1 -1
package/cjs/components/Avatar/Avatar.js CHANGED
@@ -16,7 +16,11 @@ var base = require('./variations/_size/base.js');
16
16
  var base$1 = require('./variations/_focused/base.js');
17
17
  var getInitialsForName = require('./utils/getInitialsForName.js');
18
18
 
19
- var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
19
+ var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels"];
20
+ var StatusLabelsDefault = {
21
+ active: 'Активен',
22
+ inactive: 'Неактивен'
23
+ };
20
24
  var getAvatarContent = function getAvatarContent(_ref) {
21
25
  var customText = _ref.customText,
22
26
  url = _ref.url,
@@ -33,14 +37,28 @@ var getAvatarContent = function getAvatarContent(_ref) {
33
37
  }
34
38
  return /*#__PURE__*/React.createElement(Avatar_styles.Text, null, initials);
35
39
  };
40
+ var getAriaLabel = function getAriaLabel(_ref2) {
41
+ var url = _ref2.url,
42
+ name = _ref2.name,
43
+ status = _ref2.status,
44
+ ariaLabelProp = _ref2['aria-label'],
45
+ statusLabels = _ref2.statusLabels;
46
+ if (!url) {
47
+ return;
48
+ }
49
+
50
+ // INFO: включаем aria-label чтобы озвучить что на изображении
51
+ var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
52
+ return status ? "".concat(ariaLabel, ". ").concat(statusLabels[status]) : ariaLabel;
53
+ };
36
54
  var mergedConfig = /*#__PURE__*/common.mergeConfig(Indicator$1.indicatorConfig);
37
55
  var Indicator = /*#__PURE__*/common.component(mergedConfig);
38
56
  var _exp = function _exp() {
39
57
  return Indicator;
40
58
  };
41
59
  var _exp5 = function _exp5() {
42
- return function (_ref2) {
43
- var status = _ref2.status;
60
+ return function (_ref3) {
61
+ var status = _ref3.status;
44
62
  return status === 'active' ? "var(".concat(Avatar_tokens.tokens.statusOnlineColor, ")") : "var(".concat(Avatar_tokens.tokens.statusOfflineColor, ")");
45
63
  };
46
64
  };
@@ -63,14 +81,20 @@ var avatarRoot = function avatarRoot(Root) {
63
81
  _props$focused = props.focused,
64
82
  focused = _props$focused === void 0 ? true : _props$focused,
65
83
  isScalable = props.isScalable,
84
+ _props$statusLabels = props.statusLabels,
85
+ statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
66
86
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
67
87
  var initials = React.useMemo(function () {
68
88
  return getInitialsForName.getInitialsForName(name);
69
89
  }, [name]);
90
+ var ariaLabel = getAriaLabel(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
91
+ statusLabels: statusLabels
92
+ }));
70
93
  return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
71
94
  ref: ref,
72
95
  size: avatarSize,
73
96
  className: index.cx(Avatar_tokens.classes.avatarItem, className),
97
+ "aria-label": ariaLabel,
74
98
  focused: focused
75
99
  }, rest), /*#__PURE__*/React.createElement(Avatar_styles.Wrapper, {
76
100
  isScalable: isScalable
@@ -80,6 +104,7 @@ var avatarRoot = function avatarRoot(Root) {
80
104
  initials: initials,
81
105
  name: name
82
106
  })), status && /*#__PURE__*/React.createElement(Avatar_styles.StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
107
+ "aria-label": statusLabels[status],
83
108
  status: status
84
109
  })));
85
110
  });
package/cjs/components/Avatar/Avatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, ReactElement } from 'react';\nimport { styled } from '@linaria/react';\n\nimport { RootProps, component, mergeConfig } from '../../engines';\nimport { cx } from '../../utils';\nimport { indicatorConfig, indicatorTokens } from '../Indicator';\n\nimport { classes, tokens } from './Avatar.tokens';\nimport { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';\nimport { AvatarProps } from './Avatar.types';\nimport { base as viewCSS } from './variations/_size/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { getInitialsForName } from './utils';\n\nconst getAvatarContent = ({\n customText,\n url,\n initials,\n name,\n}: Omit<AvatarProps, 'size'> & { initials?: string }): ReactElement => {\n if (customText) {\n return <Text>{customText}</Text>;\n }\n\n if (url) {\n return <Image src={url} alt={name} />;\n }\n\n return <Text>{initials}</Text>;\n};\n\nconst mergedConfig = mergeConfig(indicatorConfig);\nconst Indicator: React.FunctionComponent<\n React.HTMLAttributes<HTMLDivElement> & { status: AvatarProps['status'] }\n> = component(mergedConfig) as never;\n\nconst StyledIndicator = styled(Indicator)`\n ${indicatorTokens.size}: var(${tokens.statusIconSize});\n ${indicatorTokens.color}: ${({ status }) =>\n status === 'active' ? `var(${tokens.statusOnlineColor})` : `var(${tokens.statusOfflineColor})`}\n`;\n\nexport const avatarRoot = (Root: RootProps<HTMLDivElement, AvatarProps>) => {\n return forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n const {\n size: avatarSize,\n name,\n url,\n customText,\n status,\n className,\n focused = true,\n isScalable,\n ...rest\n } = props;\n\n const initials = useMemo(() => getInitialsForName(name), [name]);\n\n return (\n <Root ref={ref} size={avatarSize} className={cx(classes.avatarItem, className)} focused={focused} {...rest}>\n <Wrapper isScalable={isScalable}>{getAvatarContent({ customText, url, initials, name })}</Wrapper>\n\n {status && (\n <StatusIcon>\n <StyledIndicator status={status} />\n </StatusIcon>\n )}\n </Root>\n );\n });\n};\n\nexport const avatarConfig = {\n name: 'Avatar',\n tag: 'div',\n layout: avatarRoot,\n base,\n variations: {\n size: {\n css: viewCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n },\n};\n"],"names":["getAvatarContent","_ref","customText","url","initials","name","React","createElement","Text","Image","src","alt","mergedConfig","mergeConfig","indicatorConfig","Indicator","component","_exp","_exp5","_ref2","status","concat","tokens","statusOnlineColor","statusOfflineColor","StyledIndicator","styled","class","propsAsIs","vars","avatarRoot","Root","forwardRef","props","ref","avatarSize","size","className","_props$focused","focused","isScalable","rest","_excluded","useMemo","getInitialsForName","_extends","cx","classes","avatarItem","Wrapper","StatusIcon","avatarConfig","tag","layout","base","variations","css","viewCSS","focusedCSS","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, ReactElement } from 'react';\nimport { styled } from '@linaria/react';\n\nimport { RootProps, component, mergeConfig } from '../../engines';\nimport { cx } from '../../utils';\nimport { indicatorConfig, indicatorTokens } from '../Indicator';\n\nimport { classes, tokens } from './Avatar.tokens';\nimport { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';\nimport { base as viewCSS } from './variations/_size/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { getInitialsForName } from './utils';\nimport type { AvatarProps, StatusLabels } from './Avatar.types';\n\nconst StatusLabelsDefault: StatusLabels = {\n active: 'Активен',\n inactive: 'Неактивен',\n};\n\nconst getAvatarContent = ({\n customText,\n url,\n initials,\n name,\n}: Omit<AvatarProps, 'size'> & { initials?: string }): ReactElement => {\n if (customText) {\n return <Text>{customText}</Text>;\n }\n\n if (url) {\n return <Image src={url} alt={name} />;\n }\n\n return <Text>{initials}</Text>;\n};\n\nconst getAriaLabel = ({\n url,\n name,\n status,\n 'aria-label': ariaLabelProp,\n statusLabels,\n}: Pick<AvatarProps, 'url' | 'status' | 'name' | 'aria-label'> & {\n statusLabels: StatusLabels;\n}) => {\n if (!url) {\n return;\n }\n\n // INFO: включаем aria-label чтобы озвучить что на изображении\n const ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;\n\n return status ? `${ariaLabel}. ${statusLabels[status]}` : ariaLabel;\n};\n\nconst mergedConfig = mergeConfig(indicatorConfig);\n\nconst Indicator: React.FunctionComponent<\n React.HTMLAttributes<HTMLDivElement> & { status: AvatarProps['status'] }\n> = component(mergedConfig) as never;\n\nconst StyledIndicator = styled(Indicator)`\n ${indicatorTokens.size}: var(${tokens.statusIconSize});\n ${indicatorTokens.color}: ${({ status }) =>\n status === 'active' ? `var(${tokens.statusOnlineColor})` : `var(${tokens.statusOfflineColor})`}\n`;\n\nexport const avatarRoot = (Root: RootProps<HTMLDivElement, AvatarProps>) => {\n return forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n const {\n size: avatarSize,\n name,\n url,\n customText,\n status,\n className,\n focused = true,\n isScalable,\n statusLabels = StatusLabelsDefault,\n ...rest\n } = props;\n\n const initials = useMemo(() => getInitialsForName(name), [name]);\n const ariaLabel = getAriaLabel({\n ...props,\n statusLabels,\n });\n\n return (\n <Root\n ref={ref}\n size={avatarSize}\n className={cx(classes.avatarItem, className)}\n aria-label={ariaLabel}\n focused={focused}\n {...rest}\n >\n <Wrapper isScalable={isScalable}>{getAvatarContent({ customText, url, initials, name })}</Wrapper>\n\n {status && (\n <StatusIcon>\n <StyledIndicator aria-label={statusLabels[status]} status={status} />\n </StatusIcon>\n )}\n </Root>\n );\n });\n};\n\nexport const avatarConfig = {\n name: 'Avatar',\n tag: 'div',\n layout: avatarRoot,\n base,\n variations: {\n size: {\n css: viewCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n },\n};\n"],"names":["StatusLabelsDefault","active","inactive","getAvatarContent","_ref","customText","url","initials","name","React","createElement","Text","Image","src","alt","getAriaLabel","_ref2","status","ariaLabelProp","statusLabels","ariaLabel","trim","concat","mergedConfig","mergeConfig","indicatorConfig","Indicator","component","_exp","_exp5","_ref3","tokens","statusOnlineColor","statusOfflineColor","StyledIndicator","styled","class","propsAsIs","vars","avatarRoot","Root","forwardRef","props","ref","avatarSize","size","className","_props$focused","focused","isScalable","_props$statusLabels","rest","_excluded","useMemo","getInitialsForName","_objectSpread","_extends","cx","classes","avatarItem","Wrapper","StatusIcon","avatarConfig","tag","layout","base","variations","css","viewCSS","focusedCSS","defaults"],"mappings":"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"}
package/es/components/Avatar/Avatar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import './Avatar_13f2qzh.css';
2
- import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
+ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import React, { forwardRef, useMemo } from 'react';
4
4
  import { styled } from '@linaria/react';
5
5
  import '@linaria/core';
@@ -12,7 +12,11 @@ import { base as base$1 } from './variations/_size/base.js';
12
12
  import { base as base$2 } from './variations/_focused/base.js';
13
13
  import { getInitialsForName } from './utils/getInitialsForName.js';
14
14
 
15
- var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
15
+ var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels"];
16
+ var StatusLabelsDefault = {
17
+ active: 'Активен',
18
+ inactive: 'Неактивен'
19
+ };
16
20
  var getAvatarContent = function getAvatarContent(_ref) {
17
21
  var customText = _ref.customText,
18
22
  url = _ref.url,
@@ -29,14 +33,28 @@ var getAvatarContent = function getAvatarContent(_ref) {
29
33
  }
30
34
  return /*#__PURE__*/React.createElement(Text, null, initials);
31
35
  };
36
+ var getAriaLabel = function getAriaLabel(_ref2) {
37
+ var url = _ref2.url,
38
+ name = _ref2.name,
39
+ status = _ref2.status,
40
+ ariaLabelProp = _ref2['aria-label'],
41
+ statusLabels = _ref2.statusLabels;
42
+ if (!url) {
43
+ return;
44
+ }
45
+
46
+ // INFO: включаем aria-label чтобы озвучить что на изображении
47
+ var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
48
+ return status ? "".concat(ariaLabel, ". ").concat(statusLabels[status]) : ariaLabel;
49
+ };
32
50
  var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
33
51
  var Indicator = /*#__PURE__*/component(mergedConfig);
34
52
  var _exp = function _exp() {
35
53
  return Indicator;
36
54
  };
37
55
  var _exp5 = function _exp5() {
38
- return function (_ref2) {
39
- var status = _ref2.status;
56
+ return function (_ref3) {
57
+ var status = _ref3.status;
40
58
  return status === 'active' ? "var(".concat(tokens.statusOnlineColor, ")") : "var(".concat(tokens.statusOfflineColor, ")");
41
59
  };
42
60
  };
@@ -59,14 +77,20 @@ var avatarRoot = function avatarRoot(Root) {
59
77
  _props$focused = props.focused,
60
78
  focused = _props$focused === void 0 ? true : _props$focused,
61
79
  isScalable = props.isScalable,
80
+ _props$statusLabels = props.statusLabels,
81
+ statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
62
82
  rest = _objectWithoutProperties(props, _excluded);
63
83
  var initials = useMemo(function () {
64
84
  return getInitialsForName(name);
65
85
  }, [name]);
86
+ var ariaLabel = getAriaLabel(_objectSpread2(_objectSpread2({}, props), {}, {
87
+ statusLabels: statusLabels
88
+ }));
66
89
  return /*#__PURE__*/React.createElement(Root, _extends({
67
90
  ref: ref,
68
91
  size: avatarSize,
69
92
  className: cx(classes.avatarItem, className),
93
+ "aria-label": ariaLabel,
70
94
  focused: focused
71
95
  }, rest), /*#__PURE__*/React.createElement(Wrapper, {
72
96
  isScalable: isScalable
@@ -76,6 +100,7 @@ var avatarRoot = function avatarRoot(Root) {
76
100
  initials: initials,
77
101
  name: name
78
102
  })), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
103
+ "aria-label": statusLabels[status],
79
104
  status: status
80
105
  })));
81
106
  });
package/es/components/Avatar/Avatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, ReactElement } from 'react';\nimport { styled } from '@linaria/react';\n\nimport { RootProps, component, mergeConfig } from '../../engines';\nimport { cx } from '../../utils';\nimport { indicatorConfig, indicatorTokens } from '../Indicator';\n\nimport { classes, tokens } from './Avatar.tokens';\nimport { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';\nimport { AvatarProps } from './Avatar.types';\nimport { base as viewCSS } from './variations/_size/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { getInitialsForName } from './utils';\n\nconst getAvatarContent = ({\n customText,\n url,\n initials,\n name,\n}: Omit<AvatarProps, 'size'> & { initials?: string }): ReactElement => {\n if (customText) {\n return <Text>{customText}</Text>;\n }\n\n if (url) {\n return <Image src={url} alt={name} />;\n }\n\n return <Text>{initials}</Text>;\n};\n\nconst mergedConfig = mergeConfig(indicatorConfig);\nconst Indicator: React.FunctionComponent<\n React.HTMLAttributes<HTMLDivElement> & { status: AvatarProps['status'] }\n> = component(mergedConfig) as never;\n\nconst StyledIndicator = styled(Indicator)`\n ${indicatorTokens.size}: var(${tokens.statusIconSize});\n ${indicatorTokens.color}: ${({ status }) =>\n status === 'active' ? `var(${tokens.statusOnlineColor})` : `var(${tokens.statusOfflineColor})`}\n`;\n\nexport const avatarRoot = (Root: RootProps<HTMLDivElement, AvatarProps>) => {\n return forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n const {\n size: avatarSize,\n name,\n url,\n customText,\n status,\n className,\n focused = true,\n isScalable,\n ...rest\n } = props;\n\n const initials = useMemo(() => getInitialsForName(name), [name]);\n\n return (\n <Root ref={ref} size={avatarSize} className={cx(classes.avatarItem, className)} focused={focused} {...rest}>\n <Wrapper isScalable={isScalable}>{getAvatarContent({ customText, url, initials, name })}</Wrapper>\n\n {status && (\n <StatusIcon>\n <StyledIndicator status={status} />\n </StatusIcon>\n )}\n </Root>\n );\n });\n};\n\nexport const avatarConfig = {\n name: 'Avatar',\n tag: 'div',\n layout: avatarRoot,\n base,\n variations: {\n size: {\n css: viewCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n },\n};\n"],"names":["getAvatarContent","_ref","customText","url","initials","name","React","createElement","Text","Image","src","alt","mergedConfig","mergeConfig","indicatorConfig","Indicator","component","_exp","_exp5","_ref2","status","concat","tokens","statusOnlineColor","statusOfflineColor","StyledIndicator","styled","class","propsAsIs","vars","avatarRoot","Root","forwardRef","props","ref","avatarSize","size","className","_props$focused","focused","isScalable","rest","_excluded","useMemo","getInitialsForName","_extends","cx","classes","avatarItem","Wrapper","StatusIcon","avatarConfig","tag","layout","base","variations","css","viewCSS","focusedCSS","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, ReactElement } from 'react';\nimport { styled } from '@linaria/react';\n\nimport { RootProps, component, mergeConfig } from '../../engines';\nimport { cx } from '../../utils';\nimport { indicatorConfig, indicatorTokens } from '../Indicator';\n\nimport { classes, tokens } from './Avatar.tokens';\nimport { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';\nimport { base as viewCSS } from './variations/_size/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { getInitialsForName } from './utils';\nimport type { AvatarProps, StatusLabels } from './Avatar.types';\n\nconst StatusLabelsDefault: StatusLabels = {\n active: 'Активен',\n inactive: 'Неактивен',\n};\n\nconst getAvatarContent = ({\n customText,\n url,\n initials,\n name,\n}: Omit<AvatarProps, 'size'> & { initials?: string }): ReactElement => {\n if (customText) {\n return <Text>{customText}</Text>;\n }\n\n if (url) {\n return <Image src={url} alt={name} />;\n }\n\n return <Text>{initials}</Text>;\n};\n\nconst getAriaLabel = ({\n url,\n name,\n status,\n 'aria-label': ariaLabelProp,\n statusLabels,\n}: Pick<AvatarProps, 'url' | 'status' | 'name' | 'aria-label'> & {\n statusLabels: StatusLabels;\n}) => {\n if (!url) {\n return;\n }\n\n // INFO: включаем aria-label чтобы озвучить что на изображении\n const ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;\n\n return status ? `${ariaLabel}. ${statusLabels[status]}` : ariaLabel;\n};\n\nconst mergedConfig = mergeConfig(indicatorConfig);\n\nconst Indicator: React.FunctionComponent<\n React.HTMLAttributes<HTMLDivElement> & { status: AvatarProps['status'] }\n> = component(mergedConfig) as never;\n\nconst StyledIndicator = styled(Indicator)`\n ${indicatorTokens.size}: var(${tokens.statusIconSize});\n ${indicatorTokens.color}: ${({ status }) =>\n status === 'active' ? `var(${tokens.statusOnlineColor})` : `var(${tokens.statusOfflineColor})`}\n`;\n\nexport const avatarRoot = (Root: RootProps<HTMLDivElement, AvatarProps>) => {\n return forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n const {\n size: avatarSize,\n name,\n url,\n customText,\n status,\n className,\n focused = true,\n isScalable,\n statusLabels = StatusLabelsDefault,\n ...rest\n } = props;\n\n const initials = useMemo(() => getInitialsForName(name), [name]);\n const ariaLabel = getAriaLabel({\n ...props,\n statusLabels,\n });\n\n return (\n <Root\n ref={ref}\n size={avatarSize}\n className={cx(classes.avatarItem, className)}\n aria-label={ariaLabel}\n focused={focused}\n {...rest}\n >\n <Wrapper isScalable={isScalable}>{getAvatarContent({ customText, url, initials, name })}</Wrapper>\n\n {status && (\n <StatusIcon>\n <StyledIndicator aria-label={statusLabels[status]} status={status} />\n </StatusIcon>\n )}\n </Root>\n );\n });\n};\n\nexport const avatarConfig = {\n name: 'Avatar',\n tag: 'div',\n layout: avatarRoot,\n base,\n variations: {\n size: {\n css: viewCSS,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 'm',\n },\n};\n"],"names":["StatusLabelsDefault","active","inactive","getAvatarContent","_ref","customText","url","initials","name","React","createElement","Text","Image","src","alt","getAriaLabel","_ref2","status","ariaLabelProp","statusLabels","ariaLabel","trim","concat","mergedConfig","mergeConfig","indicatorConfig","Indicator","component","_exp","_exp5","_ref3","tokens","statusOnlineColor","statusOfflineColor","StyledIndicator","styled","class","propsAsIs","vars","avatarRoot","Root","forwardRef","props","ref","avatarSize","size","className","_props$focused","focused","isScalable","_props$statusLabels","rest","_excluded","useMemo","getInitialsForName","_objectSpread","_extends","cx","classes","avatarItem","Wrapper","StatusIcon","avatarConfig","tag","layout","base","variations","css","viewCSS","focusedCSS","defaults"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.76.4-dev.0",
3
+ "version": "0.76.5-canary.1180.8748298731.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -102,5 +102,5 @@
102
102
  "react-popper": "2.3.0",
103
103
  "storeon": "3.1.5"
104
104
  },
105
- "gitHead": "c4320b08271fa5b670d1eedaca3dc0a8a01bb5fc"
105
+ "gitHead": "a64954f917ad8547ebbf1df4a8b8ab21d16a7907"
106
106
  }
package/styled-components/cjs/components/Avatar/Avatar.js CHANGED
@@ -15,13 +15,22 @@ var _Avatar2 = /*#__PURE__*/require("./Avatar.styles");
15
15
  var _base = /*#__PURE__*/require("./variations/_size/base");
16
16
  var _base2 = /*#__PURE__*/require("./variations/_focused/base");
17
17
  var _utils2 = /*#__PURE__*/require("./utils");
18
- var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
18
+ var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels"];
19
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
20
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
21
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
22
22
  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); }
23
+ 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; }
24
+ 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; }
25
+ 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; }
26
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
27
+ 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); }
23
28
  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; }
24
29
  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; }
30
+ var StatusLabelsDefault = {
31
+ active: 'Активен',
32
+ inactive: 'Неактивен'
33
+ };
25
34
  var getAvatarContent = function getAvatarContent(_ref) {
26
35
  var customText = _ref.customText,
27
36
  url = _ref.url,
@@ -38,12 +47,26 @@ var getAvatarContent = function getAvatarContent(_ref) {
38
47
  }
39
48
  return /*#__PURE__*/_react["default"].createElement(_Avatar2.Text, null, initials);
40
49
  };
50
+ var getAriaLabel = function getAriaLabel(_ref2) {
51
+ var url = _ref2.url,
52
+ name = _ref2.name,
53
+ status = _ref2.status,
54
+ ariaLabelProp = _ref2['aria-label'],
55
+ statusLabels = _ref2.statusLabels;
56
+ if (!url) {
57
+ return;
58
+ }
59
+
60
+ // INFO: включаем aria-label чтобы озвучить что на изображении
61
+ var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
62
+ return status ? "".concat(ariaLabel, ". ").concat(statusLabels[status]) : ariaLabel;
63
+ };
41
64
  var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Indicator.indicatorConfig);
42
65
  var Indicator = /*#__PURE__*/(0, _engines.component)(mergedConfig);
43
66
  var StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).withConfig({
44
67
  componentId: "plasma-new-hope__sc-p4w0wq-0"
45
- })(["", ":var(", ");", ":", ""], _Indicator.indicatorTokens.size, _Avatar.tokens.statusIconSize, _Indicator.indicatorTokens.color, function (_ref2) {
46
- var status = _ref2.status;
68
+ })(["", ":var(", ");", ":", ""], _Indicator.indicatorTokens.size, _Avatar.tokens.statusIconSize, _Indicator.indicatorTokens.color, function (_ref3) {
69
+ var status = _ref3.status;
47
70
  return status === 'active' ? "var(".concat(_Avatar.tokens.statusOnlineColor, ")") : "var(".concat(_Avatar.tokens.statusOfflineColor, ")");
48
71
  });
49
72
  var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
@@ -57,14 +80,20 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
57
80
  _props$focused = props.focused,
58
81
  focused = _props$focused === void 0 ? true : _props$focused,
59
82
  isScalable = props.isScalable,
83
+ _props$statusLabels = props.statusLabels,
84
+ statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
60
85
  rest = _objectWithoutProperties(props, _excluded);
61
86
  var initials = (0, _react.useMemo)(function () {
62
87
  return (0, _utils2.getInitialsForName)(name);
63
88
  }, [name]);
89
+ var ariaLabel = getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
90
+ statusLabels: statusLabels
91
+ }));
64
92
  return /*#__PURE__*/_react["default"].createElement(Root, _extends({
65
93
  ref: ref,
66
94
  size: avatarSize,
67
95
  className: (0, _utils.cx)(_Avatar.classes.avatarItem, className),
96
+ "aria-label": ariaLabel,
68
97
  focused: focused
69
98
  }, rest), /*#__PURE__*/_react["default"].createElement(_Avatar2.Wrapper, {
70
99
  isScalable: isScalable
@@ -74,6 +103,7 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
74
103
  initials: initials,
75
104
  name: name
76
105
  })), status && /*#__PURE__*/_react["default"].createElement(_Avatar2.StatusIcon, null, /*#__PURE__*/_react["default"].createElement(StyledIndicator, {
106
+ "aria-label": statusLabels[status],
77
107
  status: status
78
108
  })));
79
109
  });
package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx CHANGED
@@ -81,7 +81,32 @@ export function App() {
81
81
  ```
82
82
 
83
83
  ### Доступность
84
- Добавляем `"role"` и `"tabIndex"`.
84
+
85
+ #### Avatar c использованием изображения
86
+
87
+ В данном случае руководствуемся принципом универсального дизайна, т.е. незрячий должен получить ту же информацию, что и зрячий.
88
+
89
+ Поэтому добавляем/используем свойства: `role`, `tabIndex` и `aria-label`.
90
+
91
+ Примечание:
92
+ - если указано свойство `name` то `aria-label` можно опустить;
93
+
94
+ ```tsx live
95
+ import React from 'react';
96
+ import { Avatar } from '@salutejs/{{ package }}';
97
+
98
+ export function App() {
99
+ return (
100
+ <>
101
+ <Avatar role="button" tabIndex={0} name="Иван Фадеев" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
102
+ </>
103
+ );
104
+ }
105
+ ```
106
+
107
+ #### Avatar c текстом
108
+
109
+ В этом случае достаточно указать свойство `name`.
85
110
 
86
111
  ```tsx live
87
112
  import React from 'react';
@@ -90,8 +115,33 @@ import { Avatar } from '@salutejs/{{ package }}';
90
115
  export function App() {
91
116
  return (
92
117
  <>
93
- <Avatar role="button" tabIndex="0" name="Иван Фадеев" />
118
+ <Avatar role="button" tabIndex={0} name="Иван Фадеев" />
94
119
  </>
95
120
  );
96
121
  }
97
122
  ```
123
+
124
+ #### Avatar и статус
125
+
126
+ Если указано свойство `status` его значение будет так же озвучено в комбинации со свойством `name` или `aria-label`.
127
+
128
+ ```tsx live
129
+ import React from 'react';
130
+ import { Avatar } from '@salutejs/{{ package }}';
131
+
132
+ export function App() {
133
+ return (
134
+ <>
135
+ <Avatar role="button" tabIndex={0} name="Иван Фадеев" status="inactive" />
136
+ </>
137
+ );
138
+ }
139
+ ```
140
+
141
+ Озвучит как `ИФ. Неактивен`. (В данном примере озвучиваются инициалы, производное от ФИО)
142
+
143
+ #### Свойство statusLabels
144
+
145
+ Опциональное свойство для корректной озвучки значений свойства `status`.
146
+
147
+ По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }`.
package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx CHANGED
@@ -34,13 +34,38 @@ export const Default: Story = {
34
34
  };
35
35
 
36
36
  export const Accessibility: Story = {
37
+ args: {
38
+ role: 'button',
39
+ name: 'Геннадий Силуянович',
40
+ tabIndex: 0,
41
+ view: 'default',
42
+ size: 'xxl',
43
+ status: 'active',
44
+ focused: true,
45
+ },
46
+ };
47
+
48
+ export const AccessibilityWithURL: Story = {
37
49
  args: {
38
50
  role: 'button',
39
51
  tabIndex: 0,
40
52
  view: 'default',
41
53
  size: 'xxl',
42
- name: 'Иван Фадеев',
43
54
  status: 'active',
44
55
  focused: true,
56
+ name: 'Микула Селянинович',
57
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
58
+ },
59
+ };
60
+
61
+ export const AccessibilityWithCustomText: Story = {
62
+ args: {
63
+ role: 'button',
64
+ tabIndex: 0,
65
+ view: 'default',
66
+ size: 'xxl',
67
+ status: 'inactive',
68
+ focused: true,
69
+ customText: 'ФИО',
45
70
  },
46
71
  };
package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx CHANGED
@@ -8,6 +8,7 @@ import { Avatar } from '../Avatar/Avatar';
8
8
  import { AvatarGroup } from './AvatarGroup';
9
9
 
10
10
  type Story = StoryObj<ComponentProps<typeof AvatarGroup>>;
11
+ type Avatar = ComponentProps<typeof Avatar>;
11
12
 
12
13
  const meta: Meta<typeof AvatarGroup> = {
13
14
  title: 'plasma_b2c/AvatarGroup',
@@ -33,40 +34,57 @@ export const Default: Story = {
33
34
 
34
35
  export const DynamicSize: Story = {
35
36
  args: { totalCount: 10, visibleCount: 3 },
36
- render: (args: ComponentProps<typeof AvatarGroup>) => {
37
- const itemLength = args.totalCount;
37
+ render: ({ visibleCount, totalCount, ...args }: ComponentProps<typeof AvatarGroup>) => {
38
+ const itemLength = totalCount;
38
39
 
39
40
  return (
40
41
  <AvatarGroup {...args}>
41
- {Array(args.visibleCount)
42
+ {Array(visibleCount)
42
43
  .fill(true)
43
44
  .map((_, index) => (
44
- <Avatar size="xxl" customText={index + 1} />
45
+ <Avatar size="xxl" key={index} customText={index + 1} />
45
46
  ))}
46
47
 
47
- {itemLength > args.visibleCount && (
48
- <Avatar size="xxl" customText={`+${itemLength - args.visibleCount}`} />
49
- )}
48
+ {itemLength > visibleCount && <Avatar size="xxl" customText={`+${itemLength - visibleCount}`} />}
50
49
  </AvatarGroup>
51
50
  );
52
51
  },
53
52
  };
54
53
 
54
+ const list: Array<Avatar> = [
55
+ {
56
+ name: 'Илья Муромец',
57
+ status: 'active',
58
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
59
+ },
60
+ {
61
+ name: 'Алеша Попович',
62
+ status: 'active',
63
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
64
+ },
65
+ {
66
+ name: 'Добрыня Никитич',
67
+ status: 'active',
68
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
69
+ },
70
+ {
71
+ name: 'Микула Селянинович',
72
+ status: 'inactive',
73
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
74
+ },
75
+ {
76
+ name: 'Ставр Годинович',
77
+ status: 'inactive',
78
+ },
79
+ ];
80
+
55
81
  export const Accessibility: Story = {
56
82
  render: (args: ComponentProps<typeof AvatarGroup>) => {
57
83
  return (
58
84
  <AvatarGroup {...args}>
59
- {Array(5)
60
- .fill(true)
61
- .map(() => (
62
- <Avatar
63
- role="button"
64
- tabIndex={0}
65
- focused
66
- size="xxl"
67
- url="https://avatars.githubusercontent.com/u/1813468?v=4"
68
- />
69
- ))}
85
+ {list.map((props) => (
86
+ <Avatar role="button" tabIndex={0} focused key={props.name} size="xxl" {...props} />
87
+ ))}
70
88
  </AvatarGroup>
71
89
  );
72
90
  },
package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx CHANGED
@@ -34,13 +34,38 @@ export const Default: Story = {
34
34
  };
35
35
 
36
36
  export const Accessibility: Story = {
37
+ args: {
38
+ role: 'button',
39
+ name: 'Геннадий Силуянович',
40
+ tabIndex: 0,
41
+ view: 'default',
42
+ size: 'xxl',
43
+ status: 'active',
44
+ focused: true,
45
+ },
46
+ };
47
+
48
+ export const AccessibilityWithURL: Story = {
37
49
  args: {
38
50
  role: 'button',
39
51
  tabIndex: 0,
40
52
  view: 'default',
41
53
  size: 'xxl',
42
- name: 'Иван Фадеев',
43
54
  status: 'active',
44
55
  focused: true,
56
+ name: 'Микула Селянинович',
57
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
58
+ },
59
+ };
60
+
61
+ export const AccessibilityWithCustomText: Story = {
62
+ args: {
63
+ role: 'button',
64
+ tabIndex: 0,
65
+ view: 'default',
66
+ size: 'xxl',
67
+ status: 'inactive',
68
+ focused: true,
69
+ customText: 'ФИО',
45
70
  },
46
71
  };
package/styled-components/cjs/examples/sds_engineer/components/Avatar/Avatar.stories.tsx CHANGED
@@ -30,10 +30,36 @@ export const Default: Story = {
30
30
  export const Accessibility: Story = {
31
31
  args: {
32
32
  role: 'button',
33
+ name: 'Геннадий Силуянович',
33
34
  tabIndex: 0,
34
35
  view: 'default',
35
36
  size: 'xxl',
36
- name: 'Иван Фадеев',
37
+ status: 'active',
38
+ focused: true,
39
+ },
40
+ };
41
+
42
+ export const AccessibilityWithURL: Story = {
43
+ args: {
44
+ role: 'button',
45
+ tabIndex: 0,
46
+ view: 'default',
47
+ size: 'xxl',
48
+ status: 'active',
49
+ focused: true,
50
+ name: 'Микула Селянинович',
51
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
52
+ },
53
+ };
54
+
55
+ export const AccessibilityWithCustomText: Story = {
56
+ args: {
57
+ role: 'button',
58
+ tabIndex: 0,
59
+ view: 'default',
60
+ size: 'xxl',
61
+ status: 'inactive',
37
62
  focused: true,
63
+ customText: 'ФИО',
38
64
  },
39
65
  };
package/styled-components/es/components/Avatar/Avatar.js CHANGED
@@ -1,5 +1,11 @@
1
- var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
1
+ 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); }
2
+ var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels"];
2
3
  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); }
4
+ 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; }
5
+ 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; }
6
+ 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; }
7
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
8
+ 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); }
3
9
  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; }
4
10
  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; }
5
11
  import React, { forwardRef, useMemo } from 'react';
@@ -12,6 +18,10 @@ import { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';
12
18
  import { base as viewCSS } from './variations/_size/base';
13
19
  import { base as focusedCSS } from './variations/_focused/base';
14
20
  import { getInitialsForName } from './utils';
21
+ var StatusLabelsDefault = {
22
+ active: 'Активен',
23
+ inactive: 'Неактивен'
24
+ };
15
25
  var getAvatarContent = function getAvatarContent(_ref) {
16
26
  var customText = _ref.customText,
17
27
  url = _ref.url,
@@ -28,12 +38,26 @@ var getAvatarContent = function getAvatarContent(_ref) {
28
38
  }
29
39
  return /*#__PURE__*/React.createElement(Text, null, initials);
30
40
  };
41
+ var getAriaLabel = function getAriaLabel(_ref2) {
42
+ var url = _ref2.url,
43
+ name = _ref2.name,
44
+ status = _ref2.status,
45
+ ariaLabelProp = _ref2['aria-label'],
46
+ statusLabels = _ref2.statusLabels;
47
+ if (!url) {
48
+ return;
49
+ }
50
+
51
+ // INFO: включаем aria-label чтобы озвучить что на изображении
52
+ var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
53
+ return status ? "".concat(ariaLabel, ". ").concat(statusLabels[status]) : ariaLabel;
54
+ };
31
55
  var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
32
56
  var Indicator = /*#__PURE__*/component(mergedConfig);
33
57
  var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
34
58
  componentId: "plasma-new-hope__sc-p4w0wq-0"
35
- })(["", ":var(", ");", ":", ""], indicatorTokens.size, tokens.statusIconSize, indicatorTokens.color, function (_ref2) {
36
- var status = _ref2.status;
59
+ })(["", ":var(", ");", ":", ""], indicatorTokens.size, tokens.statusIconSize, indicatorTokens.color, function (_ref3) {
60
+ var status = _ref3.status;
37
61
  return status === 'active' ? "var(".concat(tokens.statusOnlineColor, ")") : "var(".concat(tokens.statusOfflineColor, ")");
38
62
  });
39
63
  export var avatarRoot = function avatarRoot(Root) {
@@ -47,14 +71,20 @@ export var avatarRoot = function avatarRoot(Root) {
47
71
  _props$focused = props.focused,
48
72
  focused = _props$focused === void 0 ? true : _props$focused,
49
73
  isScalable = props.isScalable,
74
+ _props$statusLabels = props.statusLabels,
75
+ statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
50
76
  rest = _objectWithoutProperties(props, _excluded);
51
77
  var initials = useMemo(function () {
52
78
  return getInitialsForName(name);
53
79
  }, [name]);
80
+ var ariaLabel = getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
81
+ statusLabels: statusLabels
82
+ }));
54
83
  return /*#__PURE__*/React.createElement(Root, _extends({
55
84
  ref: ref,
56
85
  size: avatarSize,
57
86
  className: cx(classes.avatarItem, className),
87
+ "aria-label": ariaLabel,
58
88
  focused: focused
59
89
  }, rest), /*#__PURE__*/React.createElement(Wrapper, {
60
90
  isScalable: isScalable
@@ -64,6 +94,7 @@ export var avatarRoot = function avatarRoot(Root) {
64
94
  initials: initials,
65
95
  name: name
66
96
  })), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
97
+ "aria-label": statusLabels[status],
67
98
  status: status
68
99
  })));
69
100
  });
package/styled-components/es/components/Avatar/Avatar.template-doc.mdx CHANGED
@@ -81,7 +81,32 @@ export function App() {
81
81
  ```
82
82
 
83
83
  ### Доступность
84
- Добавляем `"role"` и `"tabIndex"`.
84
+
85
+ #### Avatar c использованием изображения
86
+
87
+ В данном случае руководствуемся принципом универсального дизайна, т.е. незрячий должен получить ту же информацию, что и зрячий.
88
+
89
+ Поэтому добавляем/используем свойства: `role`, `tabIndex` и `aria-label`.
90
+
91
+ Примечание:
92
+ - если указано свойство `name` то `aria-label` можно опустить;
93
+
94
+ ```tsx live
95
+ import React from 'react';
96
+ import { Avatar } from '@salutejs/{{ package }}';
97
+
98
+ export function App() {
99
+ return (
100
+ <>
101
+ <Avatar role="button" tabIndex={0} name="Иван Фадеев" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
102
+ </>
103
+ );
104
+ }
105
+ ```
106
+
107
+ #### Avatar c текстом
108
+
109
+ В этом случае достаточно указать свойство `name`.
85
110
 
86
111
  ```tsx live
87
112
  import React from 'react';
@@ -90,8 +115,33 @@ import { Avatar } from '@salutejs/{{ package }}';
90
115
  export function App() {
91
116
  return (
92
117
  <>
93
- <Avatar role="button" tabIndex="0" name="Иван Фадеев" />
118
+ <Avatar role="button" tabIndex={0} name="Иван Фадеев" />
94
119
  </>
95
120
  );
96
121
  }
97
122
  ```
123
+
124
+ #### Avatar и статус
125
+
126
+ Если указано свойство `status` его значение будет так же озвучено в комбинации со свойством `name` или `aria-label`.
127
+
128
+ ```tsx live
129
+ import React from 'react';
130
+ import { Avatar } from '@salutejs/{{ package }}';
131
+
132
+ export function App() {
133
+ return (
134
+ <>
135
+ <Avatar role="button" tabIndex={0} name="Иван Фадеев" status="inactive" />
136
+ </>
137
+ );
138
+ }
139
+ ```
140
+
141
+ Озвучит как `ИФ. Неактивен`. (В данном примере озвучиваются инициалы, производное от ФИО)
142
+
143
+ #### Свойство statusLabels
144
+
145
+ Опциональное свойство для корректной озвучки значений свойства `status`.
146
+
147
+ По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }`.
package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx CHANGED
@@ -34,13 +34,38 @@ export const Default: Story = {
34
34
  };
35
35
 
36
36
  export const Accessibility: Story = {
37
+ args: {
38
+ role: 'button',
39
+ name: 'Геннадий Силуянович',
40
+ tabIndex: 0,
41
+ view: 'default',
42
+ size: 'xxl',
43
+ status: 'active',
44
+ focused: true,
45
+ },
46
+ };
47
+
48
+ export const AccessibilityWithURL: Story = {
37
49
  args: {
38
50
  role: 'button',
39
51
  tabIndex: 0,
40
52
  view: 'default',
41
53
  size: 'xxl',
42
- name: 'Иван Фадеев',
43
54
  status: 'active',
44
55
  focused: true,
56
+ name: 'Микула Селянинович',
57
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
58
+ },
59
+ };
60
+
61
+ export const AccessibilityWithCustomText: Story = {
62
+ args: {
63
+ role: 'button',
64
+ tabIndex: 0,
65
+ view: 'default',
66
+ size: 'xxl',
67
+ status: 'inactive',
68
+ focused: true,
69
+ customText: 'ФИО',
45
70
  },
46
71
  };
package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx CHANGED
@@ -8,6 +8,7 @@ import { Avatar } from '../Avatar/Avatar';
8
8
  import { AvatarGroup } from './AvatarGroup';
9
9
 
10
10
  type Story = StoryObj<ComponentProps<typeof AvatarGroup>>;
11
+ type Avatar = ComponentProps<typeof Avatar>;
11
12
 
12
13
  const meta: Meta<typeof AvatarGroup> = {
13
14
  title: 'plasma_b2c/AvatarGroup',
@@ -33,40 +34,57 @@ export const Default: Story = {
33
34
 
34
35
  export const DynamicSize: Story = {
35
36
  args: { totalCount: 10, visibleCount: 3 },
36
- render: (args: ComponentProps<typeof AvatarGroup>) => {
37
- const itemLength = args.totalCount;
37
+ render: ({ visibleCount, totalCount, ...args }: ComponentProps<typeof AvatarGroup>) => {
38
+ const itemLength = totalCount;
38
39
 
39
40
  return (
40
41
  <AvatarGroup {...args}>
41
- {Array(args.visibleCount)
42
+ {Array(visibleCount)
42
43
  .fill(true)
43
44
  .map((_, index) => (
44
- <Avatar size="xxl" customText={index + 1} />
45
+ <Avatar size="xxl" key={index} customText={index + 1} />
45
46
  ))}
46
47
 
47
- {itemLength > args.visibleCount && (
48
- <Avatar size="xxl" customText={`+${itemLength - args.visibleCount}`} />
49
- )}
48
+ {itemLength > visibleCount && <Avatar size="xxl" customText={`+${itemLength - visibleCount}`} />}
50
49
  </AvatarGroup>
51
50
  );
52
51
  },
53
52
  };
54
53
 
54
+ const list: Array<Avatar> = [
55
+ {
56
+ name: 'Илья Муромец',
57
+ status: 'active',
58
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
59
+ },
60
+ {
61
+ name: 'Алеша Попович',
62
+ status: 'active',
63
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
64
+ },
65
+ {
66
+ name: 'Добрыня Никитич',
67
+ status: 'active',
68
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
69
+ },
70
+ {
71
+ name: 'Микула Селянинович',
72
+ status: 'inactive',
73
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
74
+ },
75
+ {
76
+ name: 'Ставр Годинович',
77
+ status: 'inactive',
78
+ },
79
+ ];
80
+
55
81
  export const Accessibility: Story = {
56
82
  render: (args: ComponentProps<typeof AvatarGroup>) => {
57
83
  return (
58
84
  <AvatarGroup {...args}>
59
- {Array(5)
60
- .fill(true)
61
- .map(() => (
62
- <Avatar
63
- role="button"
64
- tabIndex={0}
65
- focused
66
- size="xxl"
67
- url="https://avatars.githubusercontent.com/u/1813468?v=4"
68
- />
69
- ))}
85
+ {list.map((props) => (
86
+ <Avatar role="button" tabIndex={0} focused key={props.name} size="xxl" {...props} />
87
+ ))}
70
88
  </AvatarGroup>
71
89
  );
72
90
  },
package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx CHANGED
@@ -34,13 +34,38 @@ export const Default: Story = {
34
34
  };
35
35
 
36
36
  export const Accessibility: Story = {
37
+ args: {
38
+ role: 'button',
39
+ name: 'Геннадий Силуянович',
40
+ tabIndex: 0,
41
+ view: 'default',
42
+ size: 'xxl',
43
+ status: 'active',
44
+ focused: true,
45
+ },
46
+ };
47
+
48
+ export const AccessibilityWithURL: Story = {
37
49
  args: {
38
50
  role: 'button',
39
51
  tabIndex: 0,
40
52
  view: 'default',
41
53
  size: 'xxl',
42
- name: 'Иван Фадеев',
43
54
  status: 'active',
44
55
  focused: true,
56
+ name: 'Микула Селянинович',
57
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
58
+ },
59
+ };
60
+
61
+ export const AccessibilityWithCustomText: Story = {
62
+ args: {
63
+ role: 'button',
64
+ tabIndex: 0,
65
+ view: 'default',
66
+ size: 'xxl',
67
+ status: 'inactive',
68
+ focused: true,
69
+ customText: 'ФИО',
45
70
  },
46
71
  };
package/styled-components/es/examples/sds_engineer/components/Avatar/Avatar.stories.tsx CHANGED
@@ -30,10 +30,36 @@ export const Default: Story = {
30
30
  export const Accessibility: Story = {
31
31
  args: {
32
32
  role: 'button',
33
+ name: 'Геннадий Силуянович',
33
34
  tabIndex: 0,
34
35
  view: 'default',
35
36
  size: 'xxl',
36
- name: 'Иван Фадеев',
37
+ status: 'active',
38
+ focused: true,
39
+ },
40
+ };
41
+
42
+ export const AccessibilityWithURL: Story = {
43
+ args: {
44
+ role: 'button',
45
+ tabIndex: 0,
46
+ view: 'default',
47
+ size: 'xxl',
48
+ status: 'active',
49
+ focused: true,
50
+ name: 'Микула Селянинович',
51
+ url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
52
+ },
53
+ };
54
+
55
+ export const AccessibilityWithCustomText: Story = {
56
+ args: {
57
+ role: 'button',
58
+ tabIndex: 0,
59
+ view: 'default',
60
+ size: 'xxl',
61
+ status: 'inactive',
37
62
  focused: true,
63
+ customText: 'ФИО',
38
64
  },
39
65
  };
package/types/components/Avatar/Avatar.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { RootProps } from '../../engines';
3
- import { AvatarProps } from './Avatar.types';
3
+ import type { AvatarProps, StatusLabels } from './Avatar.types';
4
4
  export declare const avatarRoot: (Root: RootProps<HTMLDivElement, AvatarProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
5
5
  size: "m" | "s" | "l" | "xxl" | "fit";
6
6
  name?: string | undefined;
@@ -9,6 +9,7 @@ export declare const avatarRoot: (Root: RootProps<HTMLDivElement, AvatarProps>)
9
9
  status?: "active" | "inactive" | undefined;
10
10
  isScalable?: boolean | undefined;
11
11
  focused?: boolean | undefined;
12
+ statusLabels?: StatusLabels | undefined;
12
13
  } & React.RefAttributes<HTMLDivElement>>;
13
14
  export declare const avatarConfig: {
14
15
  name: string;
@@ -21,6 +22,7 @@ export declare const avatarConfig: {
21
22
  status?: "active" | "inactive" | undefined;
22
23
  isScalable?: boolean | undefined;
23
24
  focused?: boolean | undefined;
25
+ statusLabels?: StatusLabels | undefined;
24
26
  } & React.RefAttributes<HTMLDivElement>>;
25
27
  base: import("@linaria/core").LinariaClassName;
26
28
  variations: {
package/types/components/Avatar/Avatar.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -7,7 +7,14 @@ declare type CustomAvatarProps = {
7
7
  status?: 'active' | 'inactive';
8
8
  isScalable?: boolean;
9
9
  focused?: boolean;
10
+ /**
11
+ * Словарь для озвучивания значений свойства status [a11y]
12
+ * @default
13
+ * { active: 'Активен', inactive: 'Неактивен' }
14
+ */
15
+ statusLabels?: StatusLabels;
10
16
  };
17
+ export declare type StatusLabels = Record<'active' | 'inactive', string>;
11
18
  export declare type AvatarProps = HTMLAttributes<HTMLDivElement> & CustomAvatarProps;
12
19
  export {};
13
20
  //# sourceMappingURL=Avatar.types.d.ts.map
package/types/components/Avatar/Avatar.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,aAAK,iBAAiB,GAAG;IAErB,IAAI,EAAE,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC;IAEtC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAE/B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,iBAAiB,CAAC"}
1
+ {"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,aAAK,iBAAiB,GAAG;IAErB,IAAI,EAAE,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC;IAEtC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAE/B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B,CAAC;AAEF,oBAAY,YAAY,GAAG,MAAM,CAAC,QAAQ,GAAG,UAAU,EAAE,MAAM,CAAC,CAAC;AAEjE,oBAAY,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,iBAAiB,CAAC"}
package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts CHANGED
@@ -35,6 +35,7 @@ export declare const mergedConfig: import("../../../../engines").ComponentConfig
35
35
  status?: "active" | "inactive" | undefined;
36
36
  isScalable?: boolean | undefined;
37
37
  focused?: boolean | undefined;
38
+ statusLabels?: import("../../../../components/Avatar/Avatar.types").StatusLabels | undefined;
38
39
  } & import("react").RefAttributes<HTMLDivElement>>;
39
40
  export declare const Avatar: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
40
41
  view: {
@@ -58,5 +59,6 @@ export declare const Avatar: import("react").FunctionComponent<import("../../../
58
59
  status?: "active" | "inactive" | undefined;
59
60
  isScalable?: boolean | undefined;
60
61
  focused?: boolean | undefined;
62
+ statusLabels?: import("../../../../components/Avatar/Avatar.types").StatusLabels | undefined;
61
63
  } & import("react").RefAttributes<HTMLDivElement>>;
62
64
  //# sourceMappingURL=Avatar.d.ts.map
package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Avatar/Avatar.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAoC,CAAC;AAE9D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;kDAA0B,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Avatar/Avatar.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAoC,CAAC;AAE9D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;kDAA0B,CAAC"}
package/types/examples/plasma_web/components/Avatar/Avatar.d.ts CHANGED
@@ -35,6 +35,7 @@ export declare const mergedConfig: import("../../../../engines").ComponentConfig
35
35
  status?: "active" | "inactive" | undefined;
36
36
  isScalable?: boolean | undefined;
37
37
  focused?: boolean | undefined;
38
+ statusLabels?: import("../../../../components/Avatar/Avatar.types").StatusLabels | undefined;
38
39
  } & import("react").RefAttributes<HTMLDivElement>>;
39
40
  export declare const Avatar: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
40
41
  view: {
@@ -58,5 +59,6 @@ export declare const Avatar: import("react").FunctionComponent<import("../../../
58
59
  status?: "active" | "inactive" | undefined;
59
60
  isScalable?: boolean | undefined;
60
61
  focused?: boolean | undefined;
62
+ statusLabels?: import("../../../../components/Avatar/Avatar.types").StatusLabels | undefined;
61
63
  } & import("react").RefAttributes<HTMLDivElement>>;
62
64
  //# sourceMappingURL=Avatar.d.ts.map
package/types/examples/plasma_web/components/Avatar/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Avatar/Avatar.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAoC,CAAC;AAE9D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;kDAA0B,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Avatar/Avatar.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAoC,CAAC;AAE9D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;kDAA0B,CAAC"}
package/types/examples/sds_engineer/components/Avatar/Avatar.d.ts CHANGED
@@ -21,5 +21,6 @@ export declare const Avatar: import("react").FunctionComponent<import("../../../
21
21
  status?: "active" | "inactive" | undefined;
22
22
  isScalable?: boolean | undefined;
23
23
  focused?: boolean | undefined;
24
+ statusLabels?: import("../../../../components/Avatar/Avatar.types").StatusLabels | undefined;
24
25
  } & import("react").RefAttributes<HTMLDivElement>>;
25
26
  //# sourceMappingURL=Avatar.d.ts.map
package/types/examples/sds_engineer/components/Avatar/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAOA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;kDAA0B,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAOA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;kDAA0B,CAAC"}