@salutejs/plasma-new-hope 0.76.2-canary.1179.8707316396.0 → 0.76.2-canary.1180.8704132147.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Avatar/Avatar.js +15 -1
- package/cjs/components/Avatar/Avatar.js.map +1 -1
- package/cjs/components/Chip/Chip.css +0 -2
- package/cjs/components/Chip/Chip.js +2 -14
- package/cjs/components/Chip/Chip.js.map +1 -1
- package/cjs/components/Chip/Chip.tokens.js +0 -5
- package/cjs/components/Chip/Chip.tokens.js.map +1 -1
- package/cjs/components/Combobox/Combobox.css +0 -2
- package/cjs/components/Combobox/ui/ComboboxChip/ComboboxChip.css +0 -2
- package/cjs/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +0 -2
- package/cjs/components/Pagination/Pagination.css +0 -2
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +0 -2
- package/cjs/components/Select/Select.css +0 -2
- package/cjs/components/Select/ui/SelectChip/SelectChip.css +0 -2
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +0 -2
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.css +0 -2
- package/cjs/index.css +0 -2
- package/es/components/Avatar/Avatar.js +15 -1
- package/es/components/Avatar/Avatar.js.map +1 -1
- package/es/components/Chip/Chip.css +0 -2
- package/es/components/Chip/Chip.js +3 -15
- package/es/components/Chip/Chip.js.map +1 -1
- package/es/components/Chip/Chip.tokens.js +1 -5
- package/es/components/Chip/Chip.tokens.js.map +1 -1
- package/es/components/Combobox/Combobox.css +0 -2
- package/es/components/Combobox/ui/ComboboxChip/ComboboxChip.css +0 -2
- package/es/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +0 -2
- package/es/components/Pagination/Pagination.css +0 -2
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +0 -2
- package/es/components/Select/Select.css +0 -2
- package/es/components/Select/ui/SelectChip/SelectChip.css +0 -2
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +0 -2
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.css +0 -2
- package/es/index.css +0 -2
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.js +15 -1
- package/styled-components/cjs/components/Chip/Chip.js +2 -14
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.tokens.js +1 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -0
- package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +36 -18
- package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.config.js +7 -10
- package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.stories.tsx +2 -18
- package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.config.js +7 -10
- package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.stories.tsx +2 -18
- package/styled-components/es/components/Avatar/Avatar.js +15 -1
- package/styled-components/es/components/Chip/Chip.js +3 -15
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.tokens.js +0 -4
- package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +1 -0
- package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +36 -18
- package/styled-components/es/examples/plasma_b2c/components/Chip/Chip.config.js +7 -10
- package/styled-components/es/examples/plasma_b2c/components/Chip/Chip.stories.tsx +2 -18
- package/styled-components/es/examples/plasma_web/components/Chip/Chip.config.js +7 -10
- package/styled-components/es/examples/plasma_web/components/Chip/Chip.stories.tsx +2 -18
- package/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/components/Chip/Chip.d.ts +0 -4
- package/types/components/Chip/Chip.d.ts.map +1 -1
- package/types/components/Chip/Chip.tokens.d.ts +0 -4
- package/types/components/Chip/Chip.tokens.d.ts.map +1 -1
- package/types/components/Chip/Chip.types.d.ts +0 -6
- package/types/components/Chip/Chip.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Chip/Chip.config.d.ts +1 -4
- package/types/examples/plasma_b2c/components/Chip/Chip.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Chip/Chip.d.ts +1 -4
- package/types/examples/plasma_b2c/components/Chip/Chip.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Chip/Chip.config.d.ts +1 -4
- package/types/examples/plasma_web/components/Chip/Chip.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Chip/Chip.d.ts +1 -4
- package/types/examples/plasma_web/components/Chip/Chip.d.ts.map +1 -1
- package/cjs/components/Chip/variations/_pilled/base.js +0 -9
- package/cjs/components/Chip/variations/_pilled/base.js.map +0 -1
- package/cjs/components/Chip/variations/_pilled/base_3kce4h.css +0 -1
- package/es/components/Chip/variations/_pilled/base.js +0 -5
- package/es/components/Chip/variations/_pilled/base.js.map +0 -1
- package/es/components/Chip/variations/_pilled/base_3kce4h.css +0 -1
- package/styled-components/cjs/components/Chip/variations/_pilled/base.js +0 -9
- package/styled-components/cjs/components/Chip/variations/_pilled/tokens.json +0 -4
- package/styled-components/es/components/Chip/variations/_pilled/base.js +0 -3
- package/styled-components/es/components/Chip/variations/_pilled/tokens.json +0 -4
- package/types/components/Chip/variations/_pilled/base.d.ts +0 -2
- package/types/components/Chip/variations/_pilled/base.d.ts.map +0 -1
@@ -14,24 +14,21 @@ var config = exports.config = {
|
|
14
14
|
},
|
15
15
|
variations: {
|
16
16
|
view: {
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default
|
18
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary
|
19
|
-
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
|
18
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
|
19
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)
|
20
20
|
},
|
21
21
|
size: {
|
22
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":
|
23
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":
|
24
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":
|
25
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":
|
22
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
23
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
24
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
25
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize)
|
26
26
|
},
|
27
27
|
disabled: {
|
28
28
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Chip.chipTokens.disabledOpacity)
|
29
29
|
},
|
30
30
|
focused: {
|
31
31
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Chip.chipTokens.focusColor)
|
32
|
-
},
|
33
|
-
pilled: {
|
34
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
35
32
|
}
|
36
33
|
}
|
37
34
|
};
|
@@ -40,33 +40,17 @@ const TrashIcon = (props) => (
|
|
40
40
|
export const Default: Story = {
|
41
41
|
args: {
|
42
42
|
text: 'Hello',
|
43
|
-
view: '
|
43
|
+
view: 'primary',
|
44
44
|
size: 'm',
|
45
45
|
disabled: false,
|
46
46
|
focused: true,
|
47
|
-
pilled: false,
|
48
47
|
onClear,
|
49
48
|
},
|
50
49
|
};
|
51
50
|
|
52
51
|
export const WithIcon: Story = {
|
53
52
|
args: { ...Default.args },
|
54
|
-
render: (args) => {
|
55
|
-
const iconSizeMapper = {
|
56
|
-
l: '1.5rem',
|
57
|
-
m: '1.25rem',
|
58
|
-
s: '1rem',
|
59
|
-
xs: '0.75rem',
|
60
|
-
};
|
61
|
-
const iconSize = args.size || 'm';
|
62
|
-
|
63
|
-
return (
|
64
|
-
<Chip
|
65
|
-
contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
|
66
|
-
{...args}
|
67
|
-
/>
|
68
|
-
);
|
69
|
-
},
|
53
|
+
render: (args) => <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...args} />,
|
70
54
|
};
|
71
55
|
|
72
56
|
export const LongText: Story = {
|
@@ -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", "aria-label"];
|
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,6 +36,10 @@ 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
|
+
};
|
39
43
|
export var avatarRoot = function avatarRoot(Root) {
|
40
44
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
41
45
|
var avatarSize = props.size,
|
@@ -47,14 +51,23 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
47
51
|
_props$focused = props.focused,
|
48
52
|
focused = _props$focused === void 0 ? true : _props$focused,
|
49
53
|
isScalable = props.isScalable,
|
54
|
+
ariaLabelProp = props['aria-label'],
|
50
55
|
rest = _objectWithoutProperties(props, _excluded);
|
51
56
|
var initials = useMemo(function () {
|
52
57
|
return getInitialsForName(name);
|
53
58
|
}, [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
|
+
}
|
54
66
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
55
67
|
ref: ref,
|
56
68
|
size: avatarSize,
|
57
69
|
className: cx(classes.avatarItem, className),
|
70
|
+
"aria-label": ariaLabel,
|
58
71
|
focused: focused
|
59
72
|
}, rest), /*#__PURE__*/React.createElement(Wrapper, {
|
60
73
|
isScalable: isScalable
|
@@ -64,6 +77,7 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
64
77
|
initials: initials,
|
65
78
|
name: name
|
66
79
|
})), status && /*#__PURE__*/React.createElement(StatusIcon, null, /*#__PURE__*/React.createElement(StyledIndicator, {
|
80
|
+
"aria-label": StatusDict[status],
|
67
81
|
status: status
|
68
82
|
})));
|
69
83
|
});
|
@@ -1,18 +1,16 @@
|
|
1
|
-
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "
|
1
|
+
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "onClear", "onClick", "readOnly", "disabled"];
|
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; }
|
5
5
|
import React, { forwardRef, useMemo } from 'react';
|
6
6
|
import { IconClose } from '../_Icon/Icons/IconClose';
|
7
|
-
import { cx } from '../../utils';
|
8
7
|
import { base as viewCSS } from './variations/_view/base';
|
9
8
|
import { base as sizeCSS } from './variations/_size/base';
|
10
9
|
import { base as disabledCSS } from './variations/_disabled/base';
|
11
10
|
import { base as readonlyCSS } from './variations/_readonly/base';
|
12
11
|
import { base as focusedCSS } from './variations/_focused/base';
|
13
|
-
import { base as pilledCSS } from './variations/_pilled/base';
|
14
12
|
import { StyledContentClear, StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Chip.styles';
|
15
|
-
import {
|
13
|
+
import { tokens } from './Chip.tokens';
|
16
14
|
export var chipRoot = function chipRoot(Root) {
|
17
15
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
18
16
|
var children = props.children,
|
@@ -21,18 +19,14 @@ export var chipRoot = function chipRoot(Root) {
|
|
21
19
|
contentRight = props.contentRight,
|
22
20
|
contentClearButton = props.contentClearButton,
|
23
21
|
size = props.size,
|
24
|
-
className = props.className,
|
25
22
|
onClear = props.onClear,
|
26
23
|
onClick = props.onClick,
|
27
|
-
_props$pilled = props.pilled,
|
28
|
-
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
29
24
|
_props$readOnly = props.readOnly,
|
30
25
|
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
|
31
26
|
_props$disabled = props.disabled,
|
32
27
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
33
28
|
rest = _objectWithoutProperties(props, _excluded);
|
34
29
|
var txt = !text && typeof children === 'string' ? children : text;
|
35
|
-
var pilledClass = pilled ? classes.pilled : undefined;
|
36
30
|
var handleClick = function handleClick(event) {
|
37
31
|
if (disabled || readOnly) {
|
38
32
|
return;
|
@@ -49,11 +43,9 @@ export var chipRoot = function chipRoot(Root) {
|
|
49
43
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
50
44
|
type: "button",
|
51
45
|
ref: ref,
|
52
|
-
className: cx(pilledClass, className),
|
53
46
|
tabIndex: readOnly ? -1 : 0,
|
54
47
|
onClick: handleClick,
|
55
48
|
disabled: disabled,
|
56
|
-
pilled: pilled,
|
57
49
|
readOnly: !disabled && readOnly,
|
58
50
|
size: size
|
59
51
|
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), ClearContent);
|
@@ -81,14 +73,10 @@ export var chipConfig = {
|
|
81
73
|
},
|
82
74
|
focused: {
|
83
75
|
css: focusedCSS
|
84
|
-
},
|
85
|
-
pilled: {
|
86
|
-
css: pilledCSS,
|
87
|
-
attrs: true
|
88
76
|
}
|
89
77
|
},
|
90
78
|
defaults: {
|
91
|
-
view: '
|
79
|
+
view: 'primary',
|
92
80
|
size: 'm'
|
93
81
|
}
|
94
82
|
};
|
@@ -72,7 +72,7 @@ export function App() {
|
|
72
72
|
Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
|
73
73
|
+ `"default"` – основная;
|
74
74
|
+ `"secondary"` – вторичная;
|
75
|
-
+ `"
|
75
|
+
+ `"positive"` – успешное завершение;
|
76
76
|
|
77
77
|
```tsx live
|
78
78
|
import React from 'react';
|
@@ -83,7 +83,7 @@ export function App() {
|
|
83
83
|
<div>
|
84
84
|
<Chip text="Chip" size="m" view="default" />
|
85
85
|
<Chip text="Chip" size="m" view="secondary" />
|
86
|
-
<Chip text="Chip" size="m" view="
|
86
|
+
<Chip text="Chip" size="m" view="positive" />
|
87
87
|
</div>
|
88
88
|
);
|
89
89
|
}
|
@@ -1,6 +1,3 @@
|
|
1
|
-
export var classes = {
|
2
|
-
pilled: 'chip-pilled'
|
3
|
-
};
|
4
1
|
export var tokens = {
|
5
2
|
background: '--plasma-chip-background',
|
6
3
|
color: '--plasma-chip-color',
|
@@ -18,7 +15,6 @@ export var tokens = {
|
|
18
15
|
outlineSize: '--plasma-chip-outline-size',
|
19
16
|
closeIconColor: '--plasma-chip-close-icon-color',
|
20
17
|
borderRadius: '--plasma-chip-border-radius',
|
21
|
-
pilledBorderRadius: '--plasma-chip-pilled-border-radius',
|
22
18
|
width: '--plasma-chip-width',
|
23
19
|
height: '--plasma-chip-height',
|
24
20
|
paddingTop: '--plasma-chip-padding-top',
|
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
|
},
|
@@ -8,24 +8,21 @@ export var config = {
|
|
8
8
|
},
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default
|
12
|
-
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary
|
13
|
-
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
|
12
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
|
13
|
+
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
14
14
|
},
|
15
15
|
size: {
|
16
|
-
l: /*#__PURE__*/css(["", ":0.75rem;", ":
|
17
|
-
m: /*#__PURE__*/css(["", ":0.625rem;", ":
|
18
|
-
s: /*#__PURE__*/css(["", ":0.5rem;", ":
|
19
|
-
xs: /*#__PURE__*/css(["", ":0.375rem;", ":
|
16
|
+
l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
17
|
+
m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
18
|
+
s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
19
|
+
xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize)
|
20
20
|
},
|
21
21
|
disabled: {
|
22
22
|
"true": /*#__PURE__*/css(["", ":0.4;"], chipTokens.disabledOpacity)
|
23
23
|
},
|
24
24
|
focused: {
|
25
25
|
"true": /*#__PURE__*/css(["", ":var(--surface-accent);"], chipTokens.focusColor)
|
26
|
-
},
|
27
|
-
pilled: {
|
28
|
-
"true": /*#__PURE__*/css([""])
|
29
26
|
}
|
30
27
|
}
|
31
28
|
};
|
@@ -40,33 +40,17 @@ const TrashIcon = (props) => (
|
|
40
40
|
export const Default: Story = {
|
41
41
|
args: {
|
42
42
|
text: 'Hello',
|
43
|
-
view: '
|
43
|
+
view: 'primary',
|
44
44
|
size: 'm',
|
45
45
|
disabled: false,
|
46
46
|
focused: true,
|
47
|
-
pilled: false,
|
48
47
|
onClear,
|
49
48
|
},
|
50
49
|
};
|
51
50
|
|
52
51
|
export const WithIcon: Story = {
|
53
52
|
args: { ...Default.args },
|
54
|
-
render: (args) => {
|
55
|
-
const iconSizeMapper = {
|
56
|
-
l: '1.5rem',
|
57
|
-
m: '1.25rem',
|
58
|
-
s: '1rem',
|
59
|
-
xs: '0.75rem',
|
60
|
-
};
|
61
|
-
const iconSize = args.size || 'm';
|
62
|
-
|
63
|
-
return (
|
64
|
-
<Chip
|
65
|
-
contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
|
66
|
-
{...args}
|
67
|
-
/>
|
68
|
-
);
|
69
|
-
},
|
53
|
+
render: (args) => <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...args} />,
|
70
54
|
};
|
71
55
|
|
72
56
|
export const LongText: Story = {
|
@@ -8,24 +8,21 @@ export var config = {
|
|
8
8
|
},
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default
|
12
|
-
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary
|
13
|
-
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
|
12
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
|
13
|
+
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
14
14
|
},
|
15
15
|
size: {
|
16
|
-
l: /*#__PURE__*/css(["", ":0.75rem;", ":
|
17
|
-
m: /*#__PURE__*/css(["", ":0.625rem;", ":
|
18
|
-
s: /*#__PURE__*/css(["", ":0.5rem;", ":
|
19
|
-
xs: /*#__PURE__*/css(["", ":0.375rem;", ":
|
16
|
+
l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
17
|
+
m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
18
|
+
s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
19
|
+
xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize)
|
20
20
|
},
|
21
21
|
disabled: {
|
22
22
|
"true": /*#__PURE__*/css(["", ":0.4;"], chipTokens.disabledOpacity)
|
23
23
|
},
|
24
24
|
focused: {
|
25
25
|
"true": /*#__PURE__*/css(["", ":var(--surface-accent);"], chipTokens.focusColor)
|
26
|
-
},
|
27
|
-
pilled: {
|
28
|
-
"true": /*#__PURE__*/css([""])
|
29
26
|
}
|
30
27
|
}
|
31
28
|
};
|
@@ -40,33 +40,17 @@ const TrashIcon = (props) => (
|
|
40
40
|
export const Default: Story = {
|
41
41
|
args: {
|
42
42
|
text: 'Hello',
|
43
|
-
view: '
|
43
|
+
view: 'primary',
|
44
44
|
size: 'm',
|
45
45
|
disabled: false,
|
46
46
|
focused: true,
|
47
|
-
pilled: false,
|
48
47
|
onClear,
|
49
48
|
},
|
50
49
|
};
|
51
50
|
|
52
51
|
export const WithIcon: Story = {
|
53
52
|
args: { ...Default.args },
|
54
|
-
render: (args) => {
|
55
|
-
const iconSizeMapper = {
|
56
|
-
l: '1.5rem',
|
57
|
-
m: '1.25rem',
|
58
|
-
s: '1rem',
|
59
|
-
xs: '0.75rem',
|
60
|
-
};
|
61
|
-
const iconSize = args.size || 'm';
|
62
|
-
|
63
|
-
return (
|
64
|
-
<Chip
|
65
|
-
contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
|
66
|
-
{...args}
|
67
|
-
/>
|
68
|
-
);
|
69
|
-
},
|
53
|
+
render: (args) => <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...args} />,
|
70
54
|
};
|
71
55
|
|
72
56
|
export const LongText: Story = {
|
@@ -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;AAuC7C,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;wCA2CtE,CAAC;AAEF,eAAO,MAAM,YAAY;;;mBA7CQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;CA6DtE,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,eAAO,MAAM,QAAQ,SAAU,UAAU,iBAAiB,EAAE,SAAS,CAAC,wFAsDhE,CAAC;AAEP,eAAO,MAAM,UAAU;;;mBAxDQ,UAAU,iBAAiB,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAoFrE,CAAC"}
|
@@ -1,6 +1,3 @@
|
|
1
|
-
export declare const classes: {
|
2
|
-
pilled: string;
|
3
|
-
};
|
4
1
|
export declare const tokens: {
|
5
2
|
background: string;
|
6
3
|
color: string;
|
@@ -18,7 +15,6 @@ export declare const tokens: {
|
|
18
15
|
outlineSize: string;
|
19
16
|
closeIconColor: string;
|
20
17
|
borderRadius: string;
|
21
|
-
pilledBorderRadius: string;
|
22
18
|
width: string;
|
23
19
|
height: string;
|
24
20
|
paddingTop: string;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,
|
1
|
+
{"version":3,"file":"Chip.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhF,aAAK,eAAe,GAAG;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B;;;;OAIG;IACH,
|
1
|
+
{"version":3,"file":"Chip.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhF,aAAK,eAAe,GAAG;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,WAAW,SAAU,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,eAAe;CAAG"}
|
@@ -8,7 +8,7 @@ export declare const config: {
|
|
8
8
|
view: {
|
9
9
|
default: import("@linaria/core").LinariaClassName;
|
10
10
|
secondary: import("@linaria/core").LinariaClassName;
|
11
|
-
|
11
|
+
positive: import("@linaria/core").LinariaClassName;
|
12
12
|
};
|
13
13
|
size: {
|
14
14
|
l: import("@linaria/core").LinariaClassName;
|
@@ -22,9 +22,6 @@ export declare const config: {
|
|
22
22
|
focused: {
|
23
23
|
true: import("@linaria/core").LinariaClassName;
|
24
24
|
};
|
25
|
-
pilled: {
|
26
|
-
true: import("@linaria/core").LinariaClassName;
|
27
|
-
};
|
28
25
|
};
|
29
26
|
};
|
30
27
|
//# sourceMappingURL=Chip.config.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Chip/Chip.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Chip.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Chip/Chip.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CA8KlB,CAAC"}
|