@salutejs/plasma-new-hope 0.76.2-canary.1180.8703198104.0 → 0.76.2-canary.1183.8704434655.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Avatar/Avatar.js +1 -15
- package/cjs/components/Avatar/Avatar.js.map +1 -1
- package/es/components/Avatar/Avatar.js +1 -15
- package/es/components/Avatar/Avatar.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.js +1 -15
- package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +0 -1
- package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +18 -36
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +27 -11
- package/styled-components/es/components/Avatar/Avatar.js +1 -15
- package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +0 -1
- package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +18 -36
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +27 -11
- package/types/components/Avatar/Avatar.d.ts.map +1 -1
|
@@ -16,7 +16,7 @@ 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"];
|
|
20
20
|
var getAvatarContent = function getAvatarContent(_ref) {
|
|
21
21
|
var customText = _ref.customText,
|
|
22
22
|
url = _ref.url,
|
|
@@ -52,10 +52,6 @@ var StyledIndicator = /*#__PURE__*/react.styled(_exp())({
|
|
|
52
52
|
"sgw0czr-0": [/*#__PURE__*/_exp5()]
|
|
53
53
|
}
|
|
54
54
|
});
|
|
55
|
-
var StatusDict = {
|
|
56
|
-
active: 'Статус активен',
|
|
57
|
-
inactive: 'Статус неактивен'
|
|
58
|
-
};
|
|
59
55
|
var avatarRoot = function avatarRoot(Root) {
|
|
60
56
|
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
61
57
|
var avatarSize = props.size,
|
|
@@ -67,23 +63,14 @@ var avatarRoot = function avatarRoot(Root) {
|
|
|
67
63
|
_props$focused = props.focused,
|
|
68
64
|
focused = _props$focused === void 0 ? true : _props$focused,
|
|
69
65
|
isScalable = props.isScalable,
|
|
70
|
-
ariaLabelProp = props['aria-label'],
|
|
71
66
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
|
72
67
|
var initials = React.useMemo(function () {
|
|
73
68
|
return getInitialsForName.getInitialsForName(name);
|
|
74
69
|
}, [name]);
|
|
75
|
-
var ariaLabel;
|
|
76
|
-
|
|
77
|
-
// INFO: есть a11y и есть изображение, поэтому нужно озвучить что на нем: включаем aria-label
|
|
78
|
-
if ((rest === null || rest === void 0 ? void 0 : rest.role) === 'button' && url) {
|
|
79
|
-
ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
|
|
80
|
-
ariaLabel = status ? "".concat(ariaLabel, " ").concat(StatusDict[status]) : ariaLabel;
|
|
81
|
-
}
|
|
82
70
|
return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
|
|
83
71
|
ref: ref,
|
|
84
72
|
size: avatarSize,
|
|
85
73
|
className: index.cx(Avatar_tokens.classes.avatarItem, className),
|
|
86
|
-
"aria-label": ariaLabel,
|
|
87
74
|
focused: focused
|
|
88
75
|
}, rest), /*#__PURE__*/React.createElement(Avatar_styles.Wrapper, {
|
|
89
76
|
isScalable: isScalable
|
|
@@ -93,7 +80,6 @@ var avatarRoot = function avatarRoot(Root) {
|
|
|
93
80
|
initials: initials,
|
|
94
81
|
name: name
|
|
95
82
|
})), status && /*#__PURE__*/React.createElement(Avatar_styles.StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
|
|
96
|
-
"aria-label": StatusDict[status],
|
|
97
83
|
status: status
|
|
98
84
|
})));
|
|
99
85
|
});
|
|
@@ -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);\
|
|
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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"}
|
|
@@ -12,7 +12,7 @@ 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"];
|
|
16
16
|
var getAvatarContent = function getAvatarContent(_ref) {
|
|
17
17
|
var customText = _ref.customText,
|
|
18
18
|
url = _ref.url,
|
|
@@ -48,10 +48,6 @@ var StyledIndicator = /*#__PURE__*/styled(_exp())({
|
|
|
48
48
|
"sgw0czr-0": [/*#__PURE__*/_exp5()]
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
|
-
var StatusDict = {
|
|
52
|
-
active: 'Статус активен',
|
|
53
|
-
inactive: 'Статус неактивен'
|
|
54
|
-
};
|
|
55
51
|
var avatarRoot = function avatarRoot(Root) {
|
|
56
52
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
|
57
53
|
var avatarSize = props.size,
|
|
@@ -63,23 +59,14 @@ var avatarRoot = function avatarRoot(Root) {
|
|
|
63
59
|
_props$focused = props.focused,
|
|
64
60
|
focused = _props$focused === void 0 ? true : _props$focused,
|
|
65
61
|
isScalable = props.isScalable,
|
|
66
|
-
ariaLabelProp = props['aria-label'],
|
|
67
62
|
rest = _objectWithoutProperties(props, _excluded);
|
|
68
63
|
var initials = useMemo(function () {
|
|
69
64
|
return getInitialsForName(name);
|
|
70
65
|
}, [name]);
|
|
71
|
-
var ariaLabel;
|
|
72
|
-
|
|
73
|
-
// INFO: есть a11y и есть изображение, поэтому нужно озвучить что на нем: включаем aria-label
|
|
74
|
-
if ((rest === null || rest === void 0 ? void 0 : rest.role) === 'button' && url) {
|
|
75
|
-
ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
|
|
76
|
-
ariaLabel = status ? "".concat(ariaLabel, " ").concat(StatusDict[status]) : ariaLabel;
|
|
77
|
-
}
|
|
78
66
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
79
67
|
ref: ref,
|
|
80
68
|
size: avatarSize,
|
|
81
69
|
className: cx(classes.avatarItem, className),
|
|
82
|
-
"aria-label": ariaLabel,
|
|
83
70
|
focused: focused
|
|
84
71
|
}, rest), /*#__PURE__*/React.createElement(Wrapper, {
|
|
85
72
|
isScalable: isScalable
|
|
@@ -89,7 +76,6 @@ var avatarRoot = function avatarRoot(Root) {
|
|
|
89
76
|
initials: initials,
|
|
90
77
|
name: name
|
|
91
78
|
})), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
|
|
92
|
-
"aria-label": StatusDict[status],
|
|
93
79
|
status: status
|
|
94
80
|
})));
|
|
95
81
|
});
|
|
@@ -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);\
|
|
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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.76.2-canary.
|
|
3
|
+
"version": "0.76.2-canary.1183.8704434655.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": "
|
|
105
|
+
"gitHead": "73767dcdfd5ae8f67fb27e4ec29315b183b919eb"
|
|
106
106
|
}
|
|
@@ -15,7 +15,7 @@ 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"];
|
|
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; }
|
|
@@ -46,10 +46,6 @@ var StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).
|
|
|
46
46
|
var status = _ref2.status;
|
|
47
47
|
return status === 'active' ? "var(".concat(_Avatar.tokens.statusOnlineColor, ")") : "var(".concat(_Avatar.tokens.statusOfflineColor, ")");
|
|
48
48
|
});
|
|
49
|
-
var StatusDict = {
|
|
50
|
-
active: 'Статус активен',
|
|
51
|
-
inactive: 'Статус неактивен'
|
|
52
|
-
};
|
|
53
49
|
var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
|
|
54
50
|
return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
55
51
|
var avatarSize = props.size,
|
|
@@ -61,23 +57,14 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
|
|
|
61
57
|
_props$focused = props.focused,
|
|
62
58
|
focused = _props$focused === void 0 ? true : _props$focused,
|
|
63
59
|
isScalable = props.isScalable,
|
|
64
|
-
ariaLabelProp = props['aria-label'],
|
|
65
60
|
rest = _objectWithoutProperties(props, _excluded);
|
|
66
61
|
var initials = (0, _react.useMemo)(function () {
|
|
67
62
|
return (0, _utils2.getInitialsForName)(name);
|
|
68
63
|
}, [name]);
|
|
69
|
-
var ariaLabel;
|
|
70
|
-
|
|
71
|
-
// INFO: есть a11y и есть изображение, поэтому нужно озвучить что на нем: включаем aria-label
|
|
72
|
-
if ((rest === null || rest === void 0 ? void 0 : rest.role) === 'button' && url) {
|
|
73
|
-
ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
|
|
74
|
-
ariaLabel = status ? "".concat(ariaLabel, " ").concat(StatusDict[status]) : ariaLabel;
|
|
75
|
-
}
|
|
76
64
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
|
77
65
|
ref: ref,
|
|
78
66
|
size: avatarSize,
|
|
79
67
|
className: (0, _utils.cx)(_Avatar.classes.avatarItem, className),
|
|
80
|
-
"aria-label": ariaLabel,
|
|
81
68
|
focused: focused
|
|
82
69
|
}, rest), /*#__PURE__*/_react["default"].createElement(_Avatar2.Wrapper, {
|
|
83
70
|
isScalable: isScalable
|
|
@@ -87,7 +74,6 @@ var avatarRoot = exports.avatarRoot = function avatarRoot(Root) {
|
|
|
87
74
|
initials: initials,
|
|
88
75
|
name: name
|
|
89
76
|
})), status && /*#__PURE__*/_react["default"].createElement(_Avatar2.StatusIcon, null, /*#__PURE__*/_react["default"].createElement(StyledIndicator, {
|
|
90
|
-
"aria-label": StatusDict[status],
|
|
91
77
|
status: status
|
|
92
78
|
})));
|
|
93
79
|
});
|
package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx
CHANGED
|
@@ -8,7 +8,6 @@ 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>;
|
|
12
11
|
|
|
13
12
|
const meta: Meta<typeof AvatarGroup> = {
|
|
14
13
|
title: 'plasma_b2c/AvatarGroup',
|
|
@@ -34,57 +33,40 @@ export const Default: Story = {
|
|
|
34
33
|
|
|
35
34
|
export const DynamicSize: Story = {
|
|
36
35
|
args: { totalCount: 10, visibleCount: 3 },
|
|
37
|
-
render: (
|
|
38
|
-
const itemLength = totalCount;
|
|
36
|
+
render: (args: ComponentProps<typeof AvatarGroup>) => {
|
|
37
|
+
const itemLength = args.totalCount;
|
|
39
38
|
|
|
40
39
|
return (
|
|
41
40
|
<AvatarGroup {...args}>
|
|
42
|
-
{Array(visibleCount)
|
|
41
|
+
{Array(args.visibleCount)
|
|
43
42
|
.fill(true)
|
|
44
43
|
.map((_, index) => (
|
|
45
|
-
<Avatar size="xxl"
|
|
44
|
+
<Avatar size="xxl" customText={index + 1} />
|
|
46
45
|
))}
|
|
47
46
|
|
|
48
|
-
{itemLength > visibleCount &&
|
|
47
|
+
{itemLength > args.visibleCount && (
|
|
48
|
+
<Avatar size="xxl" customText={`+${itemLength - args.visibleCount}`} />
|
|
49
|
+
)}
|
|
49
50
|
</AvatarGroup>
|
|
50
51
|
);
|
|
51
52
|
},
|
|
52
53
|
};
|
|
53
54
|
|
|
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
|
-
|
|
81
55
|
export const Accessibility: Story = {
|
|
82
56
|
render: (args: ComponentProps<typeof AvatarGroup>) => {
|
|
83
57
|
return (
|
|
84
58
|
<AvatarGroup {...args}>
|
|
85
|
-
{
|
|
86
|
-
|
|
87
|
-
|
|
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
|
+
))}
|
|
88
70
|
</AvatarGroup>
|
|
89
71
|
);
|
|
90
72
|
},
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { ComponentProps } from 'react';
|
|
2
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
|
3
5
|
|
|
6
|
+
import { IconMic } from '../../../../components/_Icon';
|
|
4
7
|
import { buttonConfig } from '../../../../components/Button';
|
|
5
8
|
import { mergeConfig } from '../../../../engines';
|
|
6
9
|
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
|
@@ -12,6 +15,16 @@ const meta: Meta<typeof Button> = {
|
|
|
12
15
|
title: 'plasma_b2c/Button',
|
|
13
16
|
decorators: [WithTheme],
|
|
14
17
|
component: Button,
|
|
18
|
+
args: {
|
|
19
|
+
text: 'Hello',
|
|
20
|
+
view: 'default',
|
|
21
|
+
size: 'm',
|
|
22
|
+
disabled: false,
|
|
23
|
+
focused: true,
|
|
24
|
+
square: false,
|
|
25
|
+
stretching: 'auto',
|
|
26
|
+
isLoading: false,
|
|
27
|
+
},
|
|
15
28
|
argTypes: {
|
|
16
29
|
...argTypesFromConfig(mergeConfig(buttonConfig, config)),
|
|
17
30
|
pin: {
|
|
@@ -41,15 +54,18 @@ const meta: Meta<typeof Button> = {
|
|
|
41
54
|
|
|
42
55
|
export default meta;
|
|
43
56
|
|
|
44
|
-
export const Default: StoryObj<ComponentProps<typeof Button>> = {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
57
|
+
export const Default: StoryObj<ComponentProps<typeof Button>> = {};
|
|
58
|
+
|
|
59
|
+
export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
|
|
60
|
+
args: { ...meta.args },
|
|
61
|
+
argTypes: { ...meta.argTypes, ...disableProps(['text']) },
|
|
62
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
63
|
+
render: ({ text, ...props }: ComponentProps<typeof Button>) => {
|
|
64
|
+
return (
|
|
65
|
+
<Button {...props}>
|
|
66
|
+
<IconMic color="inherit" />
|
|
67
|
+
<span>Включить микрофон</span>
|
|
68
|
+
</Button>
|
|
69
|
+
);
|
|
54
70
|
},
|
|
55
71
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"
|
|
1
|
+
var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
|
|
2
2
|
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); }
|
|
3
3
|
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
4
|
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; }
|
|
@@ -36,10 +36,6 @@ var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
|
|
|
36
36
|
var status = _ref2.status;
|
|
37
37
|
return status === 'active' ? "var(".concat(tokens.statusOnlineColor, ")") : "var(".concat(tokens.statusOfflineColor, ")");
|
|
38
38
|
});
|
|
39
|
-
var StatusDict = {
|
|
40
|
-
active: 'Статус активен',
|
|
41
|
-
inactive: 'Статус неактивен'
|
|
42
|
-
};
|
|
43
39
|
export var avatarRoot = function avatarRoot(Root) {
|
|
44
40
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
|
45
41
|
var avatarSize = props.size,
|
|
@@ -51,23 +47,14 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
|
51
47
|
_props$focused = props.focused,
|
|
52
48
|
focused = _props$focused === void 0 ? true : _props$focused,
|
|
53
49
|
isScalable = props.isScalable,
|
|
54
|
-
ariaLabelProp = props['aria-label'],
|
|
55
50
|
rest = _objectWithoutProperties(props, _excluded);
|
|
56
51
|
var initials = useMemo(function () {
|
|
57
52
|
return getInitialsForName(name);
|
|
58
53
|
}, [name]);
|
|
59
|
-
var ariaLabel;
|
|
60
|
-
|
|
61
|
-
// INFO: есть a11y и есть изображение, поэтому нужно озвучить что на нем: включаем aria-label
|
|
62
|
-
if ((rest === null || rest === void 0 ? void 0 : rest.role) === 'button' && url) {
|
|
63
|
-
ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
|
|
64
|
-
ariaLabel = status ? "".concat(ariaLabel, " ").concat(StatusDict[status]) : ariaLabel;
|
|
65
|
-
}
|
|
66
54
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
67
55
|
ref: ref,
|
|
68
56
|
size: avatarSize,
|
|
69
57
|
className: cx(classes.avatarItem, className),
|
|
70
|
-
"aria-label": ariaLabel,
|
|
71
58
|
focused: focused
|
|
72
59
|
}, rest), /*#__PURE__*/React.createElement(Wrapper, {
|
|
73
60
|
isScalable: isScalable
|
|
@@ -77,7 +64,6 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
|
77
64
|
initials: initials,
|
|
78
65
|
name: name
|
|
79
66
|
})), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
|
|
80
|
-
"aria-label": StatusDict[status],
|
|
81
67
|
status: status
|
|
82
68
|
})));
|
|
83
69
|
});
|
package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx
CHANGED
|
@@ -8,7 +8,6 @@ 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>;
|
|
12
11
|
|
|
13
12
|
const meta: Meta<typeof AvatarGroup> = {
|
|
14
13
|
title: 'plasma_b2c/AvatarGroup',
|
|
@@ -34,57 +33,40 @@ export const Default: Story = {
|
|
|
34
33
|
|
|
35
34
|
export const DynamicSize: Story = {
|
|
36
35
|
args: { totalCount: 10, visibleCount: 3 },
|
|
37
|
-
render: (
|
|
38
|
-
const itemLength = totalCount;
|
|
36
|
+
render: (args: ComponentProps<typeof AvatarGroup>) => {
|
|
37
|
+
const itemLength = args.totalCount;
|
|
39
38
|
|
|
40
39
|
return (
|
|
41
40
|
<AvatarGroup {...args}>
|
|
42
|
-
{Array(visibleCount)
|
|
41
|
+
{Array(args.visibleCount)
|
|
43
42
|
.fill(true)
|
|
44
43
|
.map((_, index) => (
|
|
45
|
-
<Avatar size="xxl"
|
|
44
|
+
<Avatar size="xxl" customText={index + 1} />
|
|
46
45
|
))}
|
|
47
46
|
|
|
48
|
-
{itemLength > visibleCount &&
|
|
47
|
+
{itemLength > args.visibleCount && (
|
|
48
|
+
<Avatar size="xxl" customText={`+${itemLength - args.visibleCount}`} />
|
|
49
|
+
)}
|
|
49
50
|
</AvatarGroup>
|
|
50
51
|
);
|
|
51
52
|
},
|
|
52
53
|
};
|
|
53
54
|
|
|
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
|
-
|
|
81
55
|
export const Accessibility: Story = {
|
|
82
56
|
render: (args: ComponentProps<typeof AvatarGroup>) => {
|
|
83
57
|
return (
|
|
84
58
|
<AvatarGroup {...args}>
|
|
85
|
-
{
|
|
86
|
-
|
|
87
|
-
|
|
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
|
+
))}
|
|
88
70
|
</AvatarGroup>
|
|
89
71
|
);
|
|
90
72
|
},
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { ComponentProps } from 'react';
|
|
2
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
|
3
5
|
|
|
6
|
+
import { IconMic } from '../../../../components/_Icon';
|
|
4
7
|
import { buttonConfig } from '../../../../components/Button';
|
|
5
8
|
import { mergeConfig } from '../../../../engines';
|
|
6
9
|
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
|
@@ -12,6 +15,16 @@ const meta: Meta<typeof Button> = {
|
|
|
12
15
|
title: 'plasma_b2c/Button',
|
|
13
16
|
decorators: [WithTheme],
|
|
14
17
|
component: Button,
|
|
18
|
+
args: {
|
|
19
|
+
text: 'Hello',
|
|
20
|
+
view: 'default',
|
|
21
|
+
size: 'm',
|
|
22
|
+
disabled: false,
|
|
23
|
+
focused: true,
|
|
24
|
+
square: false,
|
|
25
|
+
stretching: 'auto',
|
|
26
|
+
isLoading: false,
|
|
27
|
+
},
|
|
15
28
|
argTypes: {
|
|
16
29
|
...argTypesFromConfig(mergeConfig(buttonConfig, config)),
|
|
17
30
|
pin: {
|
|
@@ -41,15 +54,18 @@ const meta: Meta<typeof Button> = {
|
|
|
41
54
|
|
|
42
55
|
export default meta;
|
|
43
56
|
|
|
44
|
-
export const Default: StoryObj<ComponentProps<typeof Button>> = {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
57
|
+
export const Default: StoryObj<ComponentProps<typeof Button>> = {};
|
|
58
|
+
|
|
59
|
+
export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
|
|
60
|
+
args: { ...meta.args },
|
|
61
|
+
argTypes: { ...meta.argTypes, ...disableProps(['text']) },
|
|
62
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
63
|
+
render: ({ text, ...props }: ComponentProps<typeof Button>) => {
|
|
64
|
+
return (
|
|
65
|
+
<Button {...props}>
|
|
66
|
+
<IconMic color="inherit" />
|
|
67
|
+
<span>Включить микрофон</span>
|
|
68
|
+
</Button>
|
|
69
|
+
);
|
|
54
70
|
},
|
|
55
71
|
};
|
|
@@ -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;
|
|
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"}
|