@salutejs/plasma-new-hope 0.76.5-canary.1180.8748298731.0 → 0.76.5-canary.1188.8748029637.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Avatar/Avatar.js +3 -28
- package/cjs/components/Avatar/Avatar.js.map +1 -1
- package/es/components/Avatar/Avatar.js +4 -29
- package/es/components/Avatar/Avatar.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.js +3 -33
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +2 -52
- package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -26
- package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +18 -36
- package/styled-components/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.stories.tsx +37 -42
- package/styled-components/cjs/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -26
- package/styled-components/cjs/examples/sds_engineer/components/Avatar/Avatar.stories.tsx +1 -27
- package/styled-components/es/components/Avatar/Avatar.js +3 -34
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +2 -52
- package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -26
- package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +18 -36
- package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.stories.tsx +37 -42
- package/styled-components/es/examples/plasma_web/components/Avatar/Avatar.stories.tsx +1 -26
- package/styled-components/es/examples/sds_engineer/components/Avatar/Avatar.stories.tsx +1 -27
- package/types/components/Avatar/Avatar.d.ts +1 -3
- package/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/components/Avatar/Avatar.types.d.ts +0 -7
- package/types/components/Avatar/Avatar.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts +0 -2
- package/types/examples/plasma_b2c/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Avatar/Avatar.d.ts +0 -2
- package/types/examples/plasma_web/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Avatar/Avatar.d.ts +0 -1
- package/types/examples/sds_engineer/components/Avatar/Avatar.d.ts.map +1 -1
@@ -34,38 +34,13 @@ 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 = {
|
49
37
|
args: {
|
50
38
|
role: 'button',
|
51
39
|
tabIndex: 0,
|
52
40
|
view: 'default',
|
53
41
|
size: 'xxl',
|
42
|
+
name: 'Иван Фадеев',
|
54
43
|
status: 'active',
|
55
44
|
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: 'ФИО',
|
70
45
|
},
|
71
46
|
};
|
@@ -30,36 +30,10 @@ export const Default: Story = {
|
|
30
30
|
export const Accessibility: Story = {
|
31
31
|
args: {
|
32
32
|
role: 'button',
|
33
|
-
name: 'Геннадий Силуянович',
|
34
33
|
tabIndex: 0,
|
35
34
|
view: 'default',
|
36
35
|
size: 'xxl',
|
37
|
-
|
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',
|
36
|
+
name: 'Иван Фадеев',
|
62
37
|
focused: true,
|
63
|
-
customText: 'ФИО',
|
64
38
|
},
|
65
39
|
};
|
@@ -1,11 +1,5 @@
|
|
1
|
-
|
2
|
-
var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "statusLabels"];
|
1
|
+
var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
|
3
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); }
|
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); }
|
9
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; }
|
10
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; }
|
11
5
|
import React, { forwardRef, useMemo } from 'react';
|
@@ -18,10 +12,6 @@ import { base, Wrapper, Image, StatusIcon, Text } from './Avatar.styles';
|
|
18
12
|
import { base as viewCSS } from './variations/_size/base';
|
19
13
|
import { base as focusedCSS } from './variations/_focused/base';
|
20
14
|
import { getInitialsForName } from './utils';
|
21
|
-
var StatusLabelsDefault = {
|
22
|
-
active: 'Активен',
|
23
|
-
inactive: 'Неактивен'
|
24
|
-
};
|
25
15
|
var getAvatarContent = function getAvatarContent(_ref) {
|
26
16
|
var customText = _ref.customText,
|
27
17
|
url = _ref.url,
|
@@ -38,26 +28,12 @@ var getAvatarContent = function getAvatarContent(_ref) {
|
|
38
28
|
}
|
39
29
|
return /*#__PURE__*/React.createElement(Text, null, initials);
|
40
30
|
};
|
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
|
-
};
|
55
31
|
var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
|
56
32
|
var Indicator = /*#__PURE__*/component(mergedConfig);
|
57
33
|
var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
|
58
34
|
componentId: "plasma-new-hope__sc-p4w0wq-0"
|
59
|
-
})(["", ":var(", ");", ":", ""], indicatorTokens.size, tokens.statusIconSize, indicatorTokens.color, function (
|
60
|
-
var status =
|
35
|
+
})(["", ":var(", ");", ":", ""], indicatorTokens.size, tokens.statusIconSize, indicatorTokens.color, function (_ref2) {
|
36
|
+
var status = _ref2.status;
|
61
37
|
return status === 'active' ? "var(".concat(tokens.statusOnlineColor, ")") : "var(".concat(tokens.statusOfflineColor, ")");
|
62
38
|
});
|
63
39
|
export var avatarRoot = function avatarRoot(Root) {
|
@@ -71,20 +47,14 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
71
47
|
_props$focused = props.focused,
|
72
48
|
focused = _props$focused === void 0 ? true : _props$focused,
|
73
49
|
isScalable = props.isScalable,
|
74
|
-
_props$statusLabels = props.statusLabels,
|
75
|
-
statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
|
76
50
|
rest = _objectWithoutProperties(props, _excluded);
|
77
51
|
var initials = useMemo(function () {
|
78
52
|
return getInitialsForName(name);
|
79
53
|
}, [name]);
|
80
|
-
var ariaLabel = getAriaLabel(_objectSpread(_objectSpread({}, props), {}, {
|
81
|
-
statusLabels: statusLabels
|
82
|
-
}));
|
83
54
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
84
55
|
ref: ref,
|
85
56
|
size: avatarSize,
|
86
57
|
className: cx(classes.avatarItem, className),
|
87
|
-
"aria-label": ariaLabel,
|
88
58
|
focused: focused
|
89
59
|
}, rest), /*#__PURE__*/React.createElement(Wrapper, {
|
90
60
|
isScalable: isScalable
|
@@ -94,7 +64,6 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
94
64
|
initials: initials,
|
95
65
|
name: name
|
96
66
|
})), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
|
97
|
-
"aria-label": statusLabels[status],
|
98
67
|
status: status
|
99
68
|
})));
|
100
69
|
});
|
@@ -81,32 +81,7 @@ export function App() {
|
|
81
81
|
```
|
82
82
|
|
83
83
|
### Доступность
|
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`.
|
84
|
+
Добавляем `"role"` и `"tabIndex"`.
|
110
85
|
|
111
86
|
```tsx live
|
112
87
|
import React from 'react';
|
@@ -115,33 +90,8 @@ import { Avatar } from '@salutejs/{{ package }}';
|
|
115
90
|
export function App() {
|
116
91
|
return (
|
117
92
|
<>
|
118
|
-
<Avatar role="button" tabIndex=
|
93
|
+
<Avatar role="button" tabIndex="0" name="Иван Фадеев" />
|
119
94
|
</>
|
120
95
|
);
|
121
96
|
}
|
122
97
|
```
|
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: 'Неактивен' }`.
|
@@ -34,38 +34,13 @@ 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 = {
|
49
37
|
args: {
|
50
38
|
role: 'button',
|
51
39
|
tabIndex: 0,
|
52
40
|
view: 'default',
|
53
41
|
size: 'xxl',
|
42
|
+
name: 'Иван Фадеев',
|
54
43
|
status: 'active',
|
55
44
|
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: 'ФИО',
|
70
45
|
},
|
71
46
|
};
|
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
|
},
|
@@ -51,61 +51,56 @@ const items = [
|
|
51
51
|
{ langName, value: 'elixir', label: 'Elixir', disabled: true },
|
52
52
|
];
|
53
53
|
|
54
|
-
const StoryDefault = (props: RadioboxProps) => {
|
54
|
+
const StoryDefault = ({ label, description, ...props }: RadioboxProps) => {
|
55
55
|
const value = 0;
|
56
56
|
const [checked, setChecked] = useState(true);
|
57
57
|
|
58
58
|
return (
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
/>
|
77
|
-
<Radiobox
|
78
|
-
name="item.name"
|
79
|
-
value={value}
|
80
|
-
singleLine
|
81
|
-
label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
|
82
|
-
description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
|
83
|
-
checked={checked}
|
84
|
-
onChange={(event) => {
|
85
|
-
event.persist();
|
86
|
-
|
87
|
-
setChecked(event.target.checked);
|
88
|
-
onChange(event);
|
89
|
-
}}
|
90
|
-
onFocus={onFocus}
|
91
|
-
onBlur={onBlur}
|
92
|
-
{...props}
|
93
|
-
/>
|
94
|
-
</>
|
59
|
+
<Radiobox
|
60
|
+
name="item.name"
|
61
|
+
value={value}
|
62
|
+
singleLine
|
63
|
+
label={label}
|
64
|
+
description={description}
|
65
|
+
checked={checked}
|
66
|
+
onChange={(event) => {
|
67
|
+
event.persist();
|
68
|
+
|
69
|
+
setChecked(event.target.checked);
|
70
|
+
onChange(event);
|
71
|
+
}}
|
72
|
+
onFocus={onFocus}
|
73
|
+
onBlur={onBlur}
|
74
|
+
{...props}
|
75
|
+
/>
|
95
76
|
);
|
96
77
|
};
|
97
78
|
|
98
79
|
export const Default: StoryObj<RadioboxProps> = {
|
80
|
+
args: {
|
81
|
+
...meta.args,
|
82
|
+
label: 'Это label',
|
83
|
+
description: 'Это описание',
|
84
|
+
},
|
85
|
+
render: (args) => <StoryDefault {...args} />,
|
86
|
+
};
|
87
|
+
|
88
|
+
export const LongText: StoryObj<RadioboxProps> = {
|
89
|
+
args: {
|
90
|
+
...meta.args,
|
91
|
+
label: 'Ооооооооооооооооооооочень длинный label',
|
92
|
+
description: 'Ооооооооооооооооооооочень длинный description',
|
93
|
+
},
|
99
94
|
render: (args) => <StoryDefault {...args} />,
|
100
95
|
};
|
101
96
|
|
102
|
-
const
|
97
|
+
const StoryRadioGroup = (props: RadioboxProps) => {
|
103
98
|
const [value, setValue] = useState('c');
|
104
99
|
|
105
100
|
return (
|
106
|
-
<RadioGroup>
|
101
|
+
<RadioGroup aria-labelledby="radiogroup-title-id">
|
107
102
|
<div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
|
108
|
-
|
103
|
+
Выберите язык программирования для изучения.
|
109
104
|
</div>
|
110
105
|
{items.map((item) => (
|
111
106
|
<Radiobox
|
@@ -129,6 +124,6 @@ const StoryComplex = (props: RadioboxProps) => {
|
|
129
124
|
);
|
130
125
|
};
|
131
126
|
|
132
|
-
export const
|
133
|
-
render: (args) => <
|
127
|
+
export const ExampleRadioGroup: StoryObj<RadioboxProps> = {
|
128
|
+
render: (args) => <StoryRadioGroup {...args} />,
|
134
129
|
};
|
@@ -34,38 +34,13 @@ 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 = {
|
49
37
|
args: {
|
50
38
|
role: 'button',
|
51
39
|
tabIndex: 0,
|
52
40
|
view: 'default',
|
53
41
|
size: 'xxl',
|
42
|
+
name: 'Иван Фадеев',
|
54
43
|
status: 'active',
|
55
44
|
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: 'ФИО',
|
70
45
|
},
|
71
46
|
};
|
@@ -30,36 +30,10 @@ export const Default: Story = {
|
|
30
30
|
export const Accessibility: Story = {
|
31
31
|
args: {
|
32
32
|
role: 'button',
|
33
|
-
name: 'Геннадий Силуянович',
|
34
33
|
tabIndex: 0,
|
35
34
|
view: 'default',
|
36
35
|
size: 'xxl',
|
37
|
-
|
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',
|
36
|
+
name: 'Иван Фадеев',
|
62
37
|
focused: true,
|
63
|
-
customText: 'ФИО',
|
64
38
|
},
|
65
39
|
};
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { RootProps } from '../../engines';
|
3
|
-
import
|
3
|
+
import { AvatarProps } 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,7 +9,6 @@ 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;
|
13
12
|
} & React.RefAttributes<HTMLDivElement>>;
|
14
13
|
export declare const avatarConfig: {
|
15
14
|
name: string;
|
@@ -22,7 +21,6 @@ export declare const avatarConfig: {
|
|
22
21
|
status?: "active" | "inactive" | undefined;
|
23
22
|
isScalable?: boolean | undefined;
|
24
23
|
focused?: boolean | undefined;
|
25
|
-
statusLabels?: StatusLabels | undefined;
|
26
24
|
} & React.RefAttributes<HTMLDivElement>>;
|
27
25
|
base: import("@linaria/core").LinariaClassName;
|
28
26
|
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;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"}
|
@@ -7,14 +7,7 @@ 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;
|
16
10
|
};
|
17
|
-
export declare type StatusLabels = Record<'active' | 'inactive', string>;
|
18
11
|
export declare type AvatarProps = HTMLAttributes<HTMLDivElement> & CustomAvatarProps;
|
19
12
|
export {};
|
20
13
|
//# 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;CACrB,CAAC;AAEF,oBAAY,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,iBAAiB,CAAC"}
|
@@ -35,7 +35,6 @@ 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;
|
39
38
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
40
39
|
export declare const Avatar: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
|
41
40
|
view: {
|
@@ -59,6 +58,5 @@ export declare const Avatar: import("react").FunctionComponent<import("../../../
|
|
59
58
|
status?: "active" | "inactive" | undefined;
|
60
59
|
isScalable?: boolean | undefined;
|
61
60
|
focused?: boolean | undefined;
|
62
|
-
statusLabels?: import("../../../../components/Avatar/Avatar.types").StatusLabels | undefined;
|
63
61
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
64
62
|
//# 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,7 +35,6 @@ 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;
|
39
38
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
40
39
|
export declare const Avatar: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
|
41
40
|
view: {
|
@@ -59,6 +58,5 @@ export declare const Avatar: import("react").FunctionComponent<import("../../../
|
|
59
58
|
status?: "active" | "inactive" | undefined;
|
60
59
|
isScalable?: boolean | undefined;
|
61
60
|
focused?: boolean | undefined;
|
62
|
-
statusLabels?: import("../../../../components/Avatar/Avatar.types").StatusLabels | undefined;
|
63
61
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
64
62
|
//# 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,6 +21,5 @@ 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;
|
25
24
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
26
25
|
//# 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"}
|