@salutejs/plasma-new-hope 0.76.3-canary.1178.8731927215.0 → 0.76.3-canary.1180.8732245904.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Avatar/Avatar.js +29 -1
- package/cjs/components/Avatar/Avatar.js.map +1 -1
- package/es/components/Avatar/Avatar.js +30 -2
- package/es/components/Avatar/Avatar.js.map +1 -1
- package/package.json +3 -3
- package/styled-components/cjs/components/Avatar/Avatar.js +34 -1
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +52 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +26 -1
- package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +36 -18
- package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx +26 -1
- package/styled-components/cjs/examples/sds_engineer/components/Avatar/Avatar.stories.tsx +27 -1
- package/styled-components/es/components/Avatar/Avatar.js +35 -1
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +52 -2
- package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +26 -1
- package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +36 -18
- package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx +26 -1
- package/styled-components/es/examples/sds_engineer/components/Avatar/Avatar.stories.tsx +27 -1
- package/types/components/Avatar/Avatar.d.ts +3 -1
- package/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/components/Avatar/Avatar.types.d.ts +7 -0
- package/types/components/Avatar/Avatar.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts +2 -0
- package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Avatar/Avatar.d.ts +2 -0
- package/types/examples/plasma_web/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Avatar/Avatar.d.ts +1 -0
- package/types/examples/sds_engineer/components/Avatar/Avatar.d.ts.map +1 -1
|
@@ -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", "statusDict"];
|
|
20
|
+
var StatusDictDefault = {
|
|
21
|
+
active: 'Активен',
|
|
22
|
+
inactive: 'Неактивен'
|
|
23
|
+
};
|
|
20
24
|
var getAvatarContent = function getAvatarContent(_ref) {
|
|
21
25
|
var customText = _ref.customText,
|
|
22
26
|
url = _ref.url,
|
|
@@ -33,6 +37,21 @@ 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(props) {
|
|
41
|
+
var url = props.url,
|
|
42
|
+
name = props.name,
|
|
43
|
+
status = props.status,
|
|
44
|
+
ariaLabelProp = props['aria-label'],
|
|
45
|
+
role = props.role,
|
|
46
|
+
statusDict = props.statusDict;
|
|
47
|
+
|
|
48
|
+
// INFO: включаем aria-label чтобы озвучить что на изображении
|
|
49
|
+
if (url && role && role === 'button') {
|
|
50
|
+
var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
|
|
51
|
+
return status ? "".concat(ariaLabel, ". ").concat(statusDict[status]) : ariaLabel;
|
|
52
|
+
}
|
|
53
|
+
return undefined;
|
|
54
|
+
};
|
|
36
55
|
var mergedConfig = /*#__PURE__*/common.mergeConfig(Indicator$1.indicatorConfig);
|
|
37
56
|
var Indicator = /*#__PURE__*/common.component(mergedConfig);
|
|
38
57
|
var _exp = function _exp() {
|
|
@@ -63,14 +82,22 @@ var avatarRoot = function avatarRoot(Root) {
|
|
|
63
82
|
_props$focused = props.focused,
|
|
64
83
|
focused = _props$focused === void 0 ? true : _props$focused,
|
|
65
84
|
isScalable = props.isScalable,
|
|
85
|
+
_props$statusDict = props.statusDict,
|
|
86
|
+
statusDict = _props$statusDict === void 0 ? StatusDictDefault : _props$statusDict,
|
|
66
87
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
|
67
88
|
var initials = React.useMemo(function () {
|
|
68
89
|
return getInitialsForName.getInitialsForName(name);
|
|
69
90
|
}, [name]);
|
|
91
|
+
var ariaLabel = React.useMemo(function () {
|
|
92
|
+
return getAriaLabel(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
|
|
93
|
+
statusDict: statusDict
|
|
94
|
+
}));
|
|
95
|
+
}, [name, url, rest.role, status, statusDict, rest['aria-label']]);
|
|
70
96
|
return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
|
|
71
97
|
ref: ref,
|
|
72
98
|
size: avatarSize,
|
|
73
99
|
className: index.cx(Avatar_tokens.classes.avatarItem, className),
|
|
100
|
+
"aria-label": ariaLabel,
|
|
74
101
|
focused: focused
|
|
75
102
|
}, rest), /*#__PURE__*/React.createElement(Avatar_styles.Wrapper, {
|
|
76
103
|
isScalable: isScalable
|
|
@@ -80,6 +107,7 @@ var avatarRoot = function avatarRoot(Root) {
|
|
|
80
107
|
initials: initials,
|
|
81
108
|
name: name
|
|
82
109
|
})), status && /*#__PURE__*/React.createElement(Avatar_styles.StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
|
|
110
|
+
"aria-label": statusDict[status],
|
|
83
111
|
status: status
|
|
84
112
|
})));
|
|
85
113
|
});
|
|
@@ -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 {
|
|
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, StatusDict } from './Avatar.types';\n\nconst StatusDictDefault = {\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 props: Pick<AvatarProps, 'url' | 'status' | 'role' | 'name' | 'aria-label'> & {\n statusDict: StatusDict;\n },\n) => {\n const { url, name, status, 'aria-label': ariaLabelProp, role, statusDict } = props;\n\n // INFO: включаем aria-label чтобы озвучить что на изображении\n if (url && role && role === 'button') {\n const ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;\n\n return status ? `${ariaLabel}. ${statusDict[status]}` : ariaLabel;\n }\n\n return undefined;\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 statusDict = StatusDictDefault,\n ...rest\n } = props;\n\n const initials = useMemo(() => getInitialsForName(name), [name]);\n const ariaLabel = useMemo(\n () =>\n getAriaLabel({\n ...props,\n statusDict,\n }),\n [name, url, rest.role, status, statusDict, rest['aria-label']],\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={statusDict[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":["StatusDictDefault","active","inactive","getAvatarContent","_ref","customText","url","initials","name","React","createElement","Text","Image","src","alt","getAriaLabel","props","status","ariaLabelProp","role","statusDict","ariaLabel","trim","concat","undefined","mergedConfig","mergeConfig","indicatorConfig","Indicator","component","_exp","_exp5","_ref2","tokens","statusOnlineColor","statusOfflineColor","StyledIndicator","styled","class","propsAsIs","vars","avatarRoot","Root","forwardRef","ref","avatarSize","size","className","_props$focused","focused","isScalable","_props$statusDict","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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"}
|
|
@@ -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", "statusDict"];
|
|
16
|
+
var StatusDictDefault = {
|
|
17
|
+
active: 'Активен',
|
|
18
|
+
inactive: 'Неактивен'
|
|
19
|
+
};
|
|
16
20
|
var getAvatarContent = function getAvatarContent(_ref) {
|
|
17
21
|
var customText = _ref.customText,
|
|
18
22
|
url = _ref.url,
|
|
@@ -29,6 +33,21 @@ var getAvatarContent = function getAvatarContent(_ref) {
|
|
|
29
33
|
}
|
|
30
34
|
return /*#__PURE__*/React.createElement(Text, null, initials);
|
|
31
35
|
};
|
|
36
|
+
var getAriaLabel = function getAriaLabel(props) {
|
|
37
|
+
var url = props.url,
|
|
38
|
+
name = props.name,
|
|
39
|
+
status = props.status,
|
|
40
|
+
ariaLabelProp = props['aria-label'],
|
|
41
|
+
role = props.role,
|
|
42
|
+
statusDict = props.statusDict;
|
|
43
|
+
|
|
44
|
+
// INFO: включаем aria-label чтобы озвучить что на изображении
|
|
45
|
+
if (url && role && role === 'button') {
|
|
46
|
+
var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
|
|
47
|
+
return status ? "".concat(ariaLabel, ". ").concat(statusDict[status]) : ariaLabel;
|
|
48
|
+
}
|
|
49
|
+
return undefined;
|
|
50
|
+
};
|
|
32
51
|
var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
|
|
33
52
|
var Indicator = /*#__PURE__*/component(mergedConfig);
|
|
34
53
|
var _exp = function _exp() {
|
|
@@ -59,14 +78,22 @@ var avatarRoot = function avatarRoot(Root) {
|
|
|
59
78
|
_props$focused = props.focused,
|
|
60
79
|
focused = _props$focused === void 0 ? true : _props$focused,
|
|
61
80
|
isScalable = props.isScalable,
|
|
81
|
+
_props$statusDict = props.statusDict,
|
|
82
|
+
statusDict = _props$statusDict === void 0 ? StatusDictDefault : _props$statusDict,
|
|
62
83
|
rest = _objectWithoutProperties(props, _excluded);
|
|
63
84
|
var initials = useMemo(function () {
|
|
64
85
|
return getInitialsForName(name);
|
|
65
86
|
}, [name]);
|
|
87
|
+
var ariaLabel = useMemo(function () {
|
|
88
|
+
return getAriaLabel(_objectSpread2(_objectSpread2({}, props), {}, {
|
|
89
|
+
statusDict: statusDict
|
|
90
|
+
}));
|
|
91
|
+
}, [name, url, rest.role, status, statusDict, rest['aria-label']]);
|
|
66
92
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
67
93
|
ref: ref,
|
|
68
94
|
size: avatarSize,
|
|
69
95
|
className: cx(classes.avatarItem, className),
|
|
96
|
+
"aria-label": ariaLabel,
|
|
70
97
|
focused: focused
|
|
71
98
|
}, rest), /*#__PURE__*/React.createElement(Wrapper, {
|
|
72
99
|
isScalable: isScalable
|
|
@@ -76,6 +103,7 @@ var avatarRoot = function avatarRoot(Root) {
|
|
|
76
103
|
initials: initials,
|
|
77
104
|
name: name
|
|
78
105
|
})), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
|
|
106
|
+
"aria-label": statusDict[status],
|
|
79
107
|
status: status
|
|
80
108
|
})));
|
|
81
109
|
});
|
|
@@ -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 {
|
|
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, StatusDict } from './Avatar.types';\n\nconst StatusDictDefault = {\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 props: Pick<AvatarProps, 'url' | 'status' | 'role' | 'name' | 'aria-label'> & {\n statusDict: StatusDict;\n },\n) => {\n const { url, name, status, 'aria-label': ariaLabelProp, role, statusDict } = props;\n\n // INFO: включаем aria-label чтобы озвучить что на изображении\n if (url && role && role === 'button') {\n const ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;\n\n return status ? `${ariaLabel}. ${statusDict[status]}` : ariaLabel;\n }\n\n return undefined;\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 statusDict = StatusDictDefault,\n ...rest\n } = props;\n\n const initials = useMemo(() => getInitialsForName(name), [name]);\n const ariaLabel = useMemo(\n () =>\n getAriaLabel({\n ...props,\n statusDict,\n }),\n [name, url, rest.role, status, statusDict, rest['aria-label']],\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={statusDict[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":["StatusDictDefault","active","inactive","getAvatarContent","_ref","customText","url","initials","name","React","createElement","Text","Image","src","alt","getAriaLabel","props","status","ariaLabelProp","role","statusDict","ariaLabel","trim","concat","undefined","mergedConfig","mergeConfig","indicatorConfig","Indicator","component","_exp","_exp5","_ref2","tokens","statusOnlineColor","statusOfflineColor","StyledIndicator","styled","class","propsAsIs","vars","avatarRoot","Root","forwardRef","ref","avatarSize","size","className","_props$focused","focused","isScalable","_props$statusDict","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.3-canary.
|
|
3
|
+
"version": "0.76.3-canary.1180.8732245904.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"@rollup/plugin-babel": "^6.0.3",
|
|
68
68
|
"@rollup/plugin-commonjs": "^25.0.4",
|
|
69
69
|
"@rollup/plugin-node-resolve": "^15.1.0",
|
|
70
|
-
"@salutejs/plasma-sb-utils": "0.156.
|
|
70
|
+
"@salutejs/plasma-sb-utils": "0.156.0-dev.0",
|
|
71
71
|
"@storybook/addon-docs": "^7.6.17",
|
|
72
72
|
"@storybook/addon-essentials": "^7.6.17",
|
|
73
73
|
"@storybook/addons": "^7.6.17",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"react-popper": "2.3.0",
|
|
103
103
|
"storeon": "3.1.5"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "a6e0a9b3f42a33eddfe430d91b61c98517dd13a4"
|
|
106
106
|
}
|
|
@@ -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", "statusDict"];
|
|
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 && Object.prototype.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 : String(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 StatusDictDefault = {
|
|
31
|
+
active: 'Активен',
|
|
32
|
+
inactive: 'Неактивен'
|
|
33
|
+
};
|
|
25
34
|
var getAvatarContent = function getAvatarContent(_ref) {
|
|
26
35
|
var customText = _ref.customText,
|
|
27
36
|
url = _ref.url,
|
|
@@ -38,6 +47,21 @@ 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(props) {
|
|
51
|
+
var url = props.url,
|
|
52
|
+
name = props.name,
|
|
53
|
+
status = props.status,
|
|
54
|
+
ariaLabelProp = props['aria-label'],
|
|
55
|
+
role = props.role,
|
|
56
|
+
statusDict = props.statusDict;
|
|
57
|
+
|
|
58
|
+
// INFO: включаем aria-label чтобы озвучить что на изображении
|
|
59
|
+
if (url && role && role === 'button') {
|
|
60
|
+
var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
|
|
61
|
+
return status ? "".concat(ariaLabel, ". ").concat(statusDict[status]) : ariaLabel;
|
|
62
|
+
}
|
|
63
|
+
return undefined;
|
|
64
|
+
};
|
|
41
65
|
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Indicator.indicatorConfig);
|
|
42
66
|
var Indicator = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
|
43
67
|
var StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).withConfig({
|
|
@@ -57,14 +81,22 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
|
|
|
57
81
|
_props$focused = props.focused,
|
|
58
82
|
focused = _props$focused === void 0 ? true : _props$focused,
|
|
59
83
|
isScalable = props.isScalable,
|
|
84
|
+
_props$statusDict = props.statusDict,
|
|
85
|
+
statusDict = _props$statusDict === void 0 ? StatusDictDefault : _props$statusDict,
|
|
60
86
|
rest = _objectWithoutProperties(props, _excluded);
|
|
61
87
|
var initials = (0, _react.useMemo)(function () {
|
|
62
88
|
return (0, _utils2.getInitialsForName)(name);
|
|
63
89
|
}, [name]);
|
|
90
|
+
var ariaLabel = (0, _react.useMemo)(function () {
|
|
91
|
+
return getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
|
|
92
|
+
statusDict: statusDict
|
|
93
|
+
}));
|
|
94
|
+
}, [name, url, rest.role, status, statusDict, rest['aria-label']]);
|
|
64
95
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
|
65
96
|
ref: ref,
|
|
66
97
|
size: avatarSize,
|
|
67
98
|
className: (0, _utils.cx)(_Avatar.classes.avatarItem, className),
|
|
99
|
+
"aria-label": ariaLabel,
|
|
68
100
|
focused: focused
|
|
69
101
|
}, rest), /*#__PURE__*/_react["default"].createElement(_Avatar2.Wrapper, {
|
|
70
102
|
isScalable: isScalable
|
|
@@ -74,6 +106,7 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
|
|
|
74
106
|
initials: initials,
|
|
75
107
|
name: name
|
|
76
108
|
})), status && /*#__PURE__*/_react["default"].createElement(_Avatar2.StatusIcon, null, /*#__PURE__*/_react["default"].createElement(StyledIndicator, {
|
|
109
|
+
"aria-label": statusDict[status],
|
|
77
110
|
status: status
|
|
78
111
|
})));
|
|
79
112
|
});
|
|
@@ -81,7 +81,32 @@ export function App() {
|
|
|
81
81
|
```
|
|
82
82
|
|
|
83
83
|
### Доступность
|
|
84
|
-
|
|
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=
|
|
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
|
+
#### Свойство statusDict
|
|
144
|
+
|
|
145
|
+
Опциональное свойство для корректной озвучки значений свойства `status`.
|
|
146
|
+
|
|
147
|
+
По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }`.
|
|
@@ -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 =
|
|
37
|
+
render: ({ visibleCount, totalCount, ...args }: ComponentProps<typeof AvatarGroup>) => {
|
|
38
|
+
const itemLength = totalCount;
|
|
38
39
|
|
|
39
40
|
return (
|
|
40
41
|
<AvatarGroup {...args}>
|
|
41
|
-
{Array(
|
|
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 >
|
|
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
|
-
{
|
|
60
|
-
.
|
|
61
|
-
|
|
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
|
},
|
|
@@ -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
|
};
|
|
@@ -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
|
-
|
|
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
|
};
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
|
|
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", "statusDict"];
|
|
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 : String(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 StatusDictDefault = {
|
|
22
|
+
active: 'Активен',
|
|
23
|
+
inactive: 'Неактивен'
|
|
24
|
+
};
|
|
15
25
|
var getAvatarContent = function getAvatarContent(_ref) {
|
|
16
26
|
var customText = _ref.customText,
|
|
17
27
|
url = _ref.url,
|
|
@@ -28,6 +38,21 @@ var getAvatarContent = function getAvatarContent(_ref) {
|
|
|
28
38
|
}
|
|
29
39
|
return /*#__PURE__*/React.createElement(Text, null, initials);
|
|
30
40
|
};
|
|
41
|
+
var getAriaLabel = function getAriaLabel(props) {
|
|
42
|
+
var url = props.url,
|
|
43
|
+
name = props.name,
|
|
44
|
+
status = props.status,
|
|
45
|
+
ariaLabelProp = props['aria-label'],
|
|
46
|
+
role = props.role,
|
|
47
|
+
statusDict = props.statusDict;
|
|
48
|
+
|
|
49
|
+
// INFO: включаем aria-label чтобы озвучить что на изображении
|
|
50
|
+
if (url && role && role === 'button') {
|
|
51
|
+
var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
|
|
52
|
+
return status ? "".concat(ariaLabel, ". ").concat(statusDict[status]) : ariaLabel;
|
|
53
|
+
}
|
|
54
|
+
return undefined;
|
|
55
|
+
};
|
|
31
56
|
var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
|
|
32
57
|
var Indicator = /*#__PURE__*/component(mergedConfig);
|
|
33
58
|
var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
|
|
@@ -47,14 +72,22 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
|
47
72
|
_props$focused = props.focused,
|
|
48
73
|
focused = _props$focused === void 0 ? true : _props$focused,
|
|
49
74
|
isScalable = props.isScalable,
|
|
75
|
+
_props$statusDict = props.statusDict,
|
|
76
|
+
statusDict = _props$statusDict === void 0 ? StatusDictDefault : _props$statusDict,
|
|
50
77
|
rest = _objectWithoutProperties(props, _excluded);
|
|
51
78
|
var initials = useMemo(function () {
|
|
52
79
|
return getInitialsForName(name);
|
|
53
80
|
}, [name]);
|
|
81
|
+
var ariaLabel = useMemo(function () {
|
|
82
|
+
return getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
|
|
83
|
+
statusDict: statusDict
|
|
84
|
+
}));
|
|
85
|
+
}, [name, url, rest.role, status, statusDict, rest['aria-label']]);
|
|
54
86
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
55
87
|
ref: ref,
|
|
56
88
|
size: avatarSize,
|
|
57
89
|
className: cx(classes.avatarItem, className),
|
|
90
|
+
"aria-label": ariaLabel,
|
|
58
91
|
focused: focused
|
|
59
92
|
}, rest), /*#__PURE__*/React.createElement(Wrapper, {
|
|
60
93
|
isScalable: isScalable
|
|
@@ -64,6 +97,7 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
|
64
97
|
initials: initials,
|
|
65
98
|
name: name
|
|
66
99
|
})), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
|
|
100
|
+
"aria-label": statusDict[status],
|
|
67
101
|
status: status
|
|
68
102
|
})));
|
|
69
103
|
});
|
|
@@ -81,7 +81,32 @@ export function App() {
|
|
|
81
81
|
```
|
|
82
82
|
|
|
83
83
|
### Доступность
|
|
84
|
-
|
|
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=
|
|
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
|
+
#### Свойство statusDict
|
|
144
|
+
|
|
145
|
+
Опциональное свойство для корректной озвучки значений свойства `status`.
|
|
146
|
+
|
|
147
|
+
По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }`.
|
|
@@ -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 =
|
|
37
|
+
render: ({ visibleCount, totalCount, ...args }: ComponentProps<typeof AvatarGroup>) => {
|
|
38
|
+
const itemLength = totalCount;
|
|
38
39
|
|
|
39
40
|
return (
|
|
40
41
|
<AvatarGroup {...args}>
|
|
41
|
-
{Array(
|
|
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 >
|
|
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
|
-
{
|
|
60
|
-
.
|
|
61
|
-
|
|
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
|
},
|
|
@@ -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
|
};
|
|
@@ -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
|
-
|
|
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
|
};
|
|
@@ -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, StatusDict } 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
|
+
statusDict?: StatusDict | 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
|
+
statusDict?: StatusDict | undefined;
|
|
24
26
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
25
27
|
base: import("@linaria/core").LinariaClassName;
|
|
26
28
|
variations: {
|
|
@@ -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;
|
|
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,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAqD9D,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;wCA4CtE,CAAC;AAEF,eAAO,MAAM,YAAY;;;mBA9CQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;CA8DtE,CAAC"}
|
|
@@ -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
|
+
statusDict?: StatusDict;
|
|
10
16
|
};
|
|
17
|
+
export declare type StatusDict = Record<'active' | 'inactive', string>;
|
|
11
18
|
export declare type AvatarProps = HTMLAttributes<HTMLDivElement> & CustomAvatarProps;
|
|
12
19
|
export {};
|
|
13
20
|
//# sourceMappingURL=Avatar.types.d.ts.map
|
|
@@ -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;
|
|
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,UAAU,CAAC,EAAE,UAAU,CAAC;CAC3B,CAAC;AAEF,oBAAY,UAAU,GAAG,MAAM,CAAC,QAAQ,GAAG,UAAU,EAAE,MAAM,CAAC,CAAC;AAE/D,oBAAY,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,iBAAiB,CAAC"}
|
|
@@ -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
|
+
statusDict?: import("../../../../components/Avatar/Avatar.types").StatusDict | 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
|
+
statusDict?: import("../../../../components/Avatar/Avatar.types").StatusDict | undefined;
|
|
61
63
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
62
64
|
//# sourceMappingURL=Avatar.d.ts.map
|
|
@@ -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
|
|
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"}
|
|
@@ -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
|
+
statusDict?: import("../../../../components/Avatar/Avatar.types").StatusDict | 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
|
+
statusDict?: import("../../../../components/Avatar/Avatar.types").StatusDict | undefined;
|
|
61
63
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
62
64
|
//# sourceMappingURL=Avatar.d.ts.map
|
|
@@ -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
|
|
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"}
|
|
@@ -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
|
+
statusDict?: import("../../../../components/Avatar/Avatar.types").StatusDict | undefined;
|
|
24
25
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
25
26
|
//# sourceMappingURL=Avatar.d.ts.map
|
|
@@ -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
|
|
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"}
|