@salutejs/sdds-cs 0.313.1-canary.1945.14664020647.0 → 0.313.1-canary.1946.14663041744.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Chip/Chip.config.d.ts +0 -6
- package/components/Chip/Chip.config.js +4 -10
- package/components/Chip/Chip.d.ts +0 -6
- package/emotion/cjs/components/Chip/Chip.config.js +4 -10
- package/emotion/cjs/components/Chip/Chip.stories.tsx +26 -5
- package/emotion/cjs/components/Select/Select.stories.tsx +0 -1
- package/emotion/es/components/Chip/Chip.config.js +4 -10
- package/emotion/es/components/Chip/Chip.stories.tsx +26 -5
- package/emotion/es/components/Select/Select.stories.tsx +0 -1
- package/es/components/Chip/Chip.config.js +4 -10
- package/package.json +5 -5
|
@@ -14,14 +14,8 @@ export declare const config: {
|
|
|
14
14
|
s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
15
15
|
xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
16
16
|
};
|
|
17
|
-
disabled: {
|
|
18
|
-
true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
19
|
-
};
|
|
20
17
|
focused: {
|
|
21
18
|
true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
22
19
|
};
|
|
23
|
-
pilled: {
|
|
24
|
-
true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
25
|
-
};
|
|
26
20
|
};
|
|
27
21
|
};
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.config = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
10
|
var config = exports.config = {
|
|
11
11
|
defaults: {
|
|
@@ -15,22 +15,16 @@ var config = exports.config = {
|
|
|
15
15
|
},
|
|
16
16
|
variations: {
|
|
17
17
|
view: {
|
|
18
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--
|
|
19
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-
|
|
18
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n "])), _styledComponents.chipTokens.color, _styledComponents.chipTokens.background, _styledComponents.chipTokens.colorHover, _styledComponents.chipTokens.backgroundHover, _styledComponents.chipTokens.colorActive, _styledComponents.chipTokens.backgroundActive, _styledComponents.chipTokens.backgroundReadOnly, _styledComponents.chipTokens.colorReadOnly, _styledComponents.chipTokens.backgroundReadOnlyHover, _styledComponents.chipTokens.colorReadOnlyHover, _styledComponents.chipTokens.closeIconColor),
|
|
19
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n "])), _styledComponents.chipTokens.color, _styledComponents.chipTokens.background, _styledComponents.chipTokens.colorHover, _styledComponents.chipTokens.backgroundHover, _styledComponents.chipTokens.colorActive, _styledComponents.chipTokens.backgroundActive, _styledComponents.chipTokens.backgroundReadOnly, _styledComponents.chipTokens.colorReadOnly, _styledComponents.chipTokens.backgroundReadOnlyHover, _styledComponents.chipTokens.colorReadOnlyHover, _styledComponents.chipTokens.closeIconColor),
|
|
20
20
|
accent: /*#__PURE__*/(0, _styledComponents.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), _styledComponents.chipTokens.color, _styledComponents.chipTokens.background, _styledComponents.chipTokens.colorHover, _styledComponents.chipTokens.backgroundHover, _styledComponents.chipTokens.colorActive, _styledComponents.chipTokens.backgroundActive, _styledComponents.chipTokens.backgroundReadOnly, _styledComponents.chipTokens.colorReadOnly, _styledComponents.chipTokens.backgroundReadOnlyHover, _styledComponents.chipTokens.colorReadOnlyHover)
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
23
|
s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), _styledComponents.chipTokens.borderRadius, _styledComponents.chipTokens.pilledBorderRadius, _styledComponents.chipTokens.width, _styledComponents.chipTokens.height, _styledComponents.chipTokens.padding, _styledComponents.chipTokens.fontFamily, _styledComponents.chipTokens.fontSize, _styledComponents.chipTokens.fontStyle, _styledComponents.chipTokens.fontWeight, _styledComponents.chipTokens.letterSpacing, _styledComponents.chipTokens.lineHeight, _styledComponents.chipTokens.leftContentMarginLeft, _styledComponents.chipTokens.leftContentMarginRight, _styledComponents.chipTokens.clearContentMarginLeft, _styledComponents.chipTokens.clearContentMarginRight, _styledComponents.chipTokens.scaleHover, _styledComponents.chipTokens.scaleActive, _styledComponents.chipTokens.closeIconSize),
|
|
24
24
|
xs: /*#__PURE__*/(0, _styledComponents.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), _styledComponents.chipTokens.borderRadius, _styledComponents.chipTokens.pilledBorderRadius, _styledComponents.chipTokens.width, _styledComponents.chipTokens.height, _styledComponents.chipTokens.padding, _styledComponents.chipTokens.fontFamily, _styledComponents.chipTokens.fontSize, _styledComponents.chipTokens.fontStyle, _styledComponents.chipTokens.fontWeight, _styledComponents.chipTokens.letterSpacing, _styledComponents.chipTokens.lineHeight, _styledComponents.chipTokens.leftContentMarginLeft, _styledComponents.chipTokens.leftContentMarginRight, _styledComponents.chipTokens.clearContentMarginLeft, _styledComponents.chipTokens.clearContentMarginRight, _styledComponents.chipTokens.scaleHover, _styledComponents.chipTokens.scaleActive, _styledComponents.chipTokens.closeIconSize)
|
|
25
25
|
},
|
|
26
|
-
disabled: {
|
|
27
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _styledComponents.chipTokens.disabledOpacity)
|
|
28
|
-
},
|
|
29
26
|
focused: {
|
|
30
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(
|
|
31
|
-
},
|
|
32
|
-
pilled: {
|
|
33
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
27
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), _styledComponents.chipTokens.focusColor)
|
|
34
28
|
}
|
|
35
29
|
}
|
|
36
30
|
};
|
|
@@ -12,13 +12,7 @@ export declare const Chip: import("react").FunctionComponent<import("@salutejs/p
|
|
|
12
12
|
s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
13
13
|
xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
14
14
|
};
|
|
15
|
-
disabled: {
|
|
16
|
-
true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
17
|
-
};
|
|
18
15
|
focused: {
|
|
19
16
|
true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
20
17
|
};
|
|
21
|
-
pilled: {
|
|
22
|
-
true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
23
|
-
};
|
|
24
18
|
}> & import("@salutejs/plasma-new-hope/styled-components").ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.config = void 0;
|
|
7
7
|
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
10
|
var config = exports.config = {
|
|
11
11
|
defaults: {
|
|
@@ -15,22 +15,16 @@ var config = exports.config = {
|
|
|
15
15
|
},
|
|
16
16
|
variations: {
|
|
17
17
|
view: {
|
|
18
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--
|
|
19
|
-
secondary: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-
|
|
18
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n "])), _emotion.chipTokens.color, _emotion.chipTokens.background, _emotion.chipTokens.colorHover, _emotion.chipTokens.backgroundHover, _emotion.chipTokens.colorActive, _emotion.chipTokens.backgroundActive, _emotion.chipTokens.backgroundReadOnly, _emotion.chipTokens.colorReadOnly, _emotion.chipTokens.backgroundReadOnlyHover, _emotion.chipTokens.colorReadOnlyHover, _emotion.chipTokens.closeIconColor),
|
|
19
|
+
secondary: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n "])), _emotion.chipTokens.color, _emotion.chipTokens.background, _emotion.chipTokens.colorHover, _emotion.chipTokens.backgroundHover, _emotion.chipTokens.colorActive, _emotion.chipTokens.backgroundActive, _emotion.chipTokens.backgroundReadOnly, _emotion.chipTokens.colorReadOnly, _emotion.chipTokens.backgroundReadOnlyHover, _emotion.chipTokens.colorReadOnlyHover, _emotion.chipTokens.closeIconColor),
|
|
20
20
|
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), _emotion.chipTokens.color, _emotion.chipTokens.background, _emotion.chipTokens.colorHover, _emotion.chipTokens.backgroundHover, _emotion.chipTokens.colorActive, _emotion.chipTokens.backgroundActive, _emotion.chipTokens.backgroundReadOnly, _emotion.chipTokens.colorReadOnly, _emotion.chipTokens.backgroundReadOnlyHover, _emotion.chipTokens.colorReadOnlyHover)
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
23
|
s: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), _emotion.chipTokens.borderRadius, _emotion.chipTokens.pilledBorderRadius, _emotion.chipTokens.width, _emotion.chipTokens.height, _emotion.chipTokens.padding, _emotion.chipTokens.fontFamily, _emotion.chipTokens.fontSize, _emotion.chipTokens.fontStyle, _emotion.chipTokens.fontWeight, _emotion.chipTokens.letterSpacing, _emotion.chipTokens.lineHeight, _emotion.chipTokens.leftContentMarginLeft, _emotion.chipTokens.leftContentMarginRight, _emotion.chipTokens.clearContentMarginLeft, _emotion.chipTokens.clearContentMarginRight, _emotion.chipTokens.scaleHover, _emotion.chipTokens.scaleActive, _emotion.chipTokens.closeIconSize),
|
|
24
24
|
xs: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), _emotion.chipTokens.borderRadius, _emotion.chipTokens.pilledBorderRadius, _emotion.chipTokens.width, _emotion.chipTokens.height, _emotion.chipTokens.padding, _emotion.chipTokens.fontFamily, _emotion.chipTokens.fontSize, _emotion.chipTokens.fontStyle, _emotion.chipTokens.fontWeight, _emotion.chipTokens.letterSpacing, _emotion.chipTokens.lineHeight, _emotion.chipTokens.leftContentMarginLeft, _emotion.chipTokens.leftContentMarginRight, _emotion.chipTokens.clearContentMarginLeft, _emotion.chipTokens.clearContentMarginRight, _emotion.chipTokens.scaleHover, _emotion.chipTokens.scaleActive, _emotion.chipTokens.closeIconSize)
|
|
25
25
|
},
|
|
26
|
-
disabled: {
|
|
27
|
-
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _emotion.chipTokens.disabledOpacity)
|
|
28
|
-
},
|
|
29
26
|
focused: {
|
|
30
|
-
"true": /*#__PURE__*/(0, _emotion.css)(
|
|
31
|
-
},
|
|
32
|
-
pilled: {
|
|
33
|
-
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
27
|
+
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), _emotion.chipTokens.focusColor)
|
|
34
28
|
}
|
|
35
29
|
}
|
|
36
30
|
};
|
|
@@ -27,7 +27,16 @@ const meta: Meta<typeof Chip> = {
|
|
|
27
27
|
type: 'select',
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
|
-
...disableProps([
|
|
30
|
+
...disableProps([
|
|
31
|
+
'readOnly',
|
|
32
|
+
'onClear',
|
|
33
|
+
'contentLeft',
|
|
34
|
+
'contentRight',
|
|
35
|
+
'contentClearButton',
|
|
36
|
+
'text',
|
|
37
|
+
'disabled',
|
|
38
|
+
'pilled',
|
|
39
|
+
]),
|
|
31
40
|
},
|
|
32
41
|
};
|
|
33
42
|
|
|
@@ -41,7 +50,7 @@ const TrashIcon = (props) => (
|
|
|
41
50
|
fillRule="evenodd"
|
|
42
51
|
clipRule="evenodd"
|
|
43
52
|
d="M8 5.5A2.5 2.5 0 0110.5 3h3A2.5 2.5 0 0116 5.5V6h-2v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V6H8v-.5zM4 8a1 1 0 011-1h14a1 1 0 110 2h-1v9.5a2.5 2.5 0 01-2.5 2.5h-7A2.5 2.5 0 016 18.5V9H5a1 1 0 01-1-1z"
|
|
44
|
-
fill=
|
|
53
|
+
fill={props.color}
|
|
45
54
|
/>
|
|
46
55
|
</svg>
|
|
47
56
|
);
|
|
@@ -52,9 +61,7 @@ export const Default: Story = {
|
|
|
52
61
|
view: 'default',
|
|
53
62
|
size: 's',
|
|
54
63
|
hasClear: true,
|
|
55
|
-
disabled: false,
|
|
56
64
|
focused: true,
|
|
57
|
-
pilled: false,
|
|
58
65
|
onClear,
|
|
59
66
|
},
|
|
60
67
|
};
|
|
@@ -68,9 +75,23 @@ export const WithIcon: Story = {
|
|
|
68
75
|
};
|
|
69
76
|
const iconSize = args.size || 's';
|
|
70
77
|
|
|
78
|
+
const getColor = (view) => {
|
|
79
|
+
if (view !== 'accent') {
|
|
80
|
+
return 'var(--text-accent)';
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return 'currentColor';
|
|
84
|
+
};
|
|
85
|
+
|
|
71
86
|
return (
|
|
72
87
|
<Chip
|
|
73
|
-
contentLeft={
|
|
88
|
+
contentLeft={
|
|
89
|
+
<TrashIcon
|
|
90
|
+
width={iconSizeMapper[iconSize]}
|
|
91
|
+
height={iconSizeMapper[iconSize]}
|
|
92
|
+
color={getColor(args.view)}
|
|
93
|
+
/>
|
|
94
|
+
}
|
|
74
95
|
{...args}
|
|
75
96
|
/>
|
|
76
97
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { css, chipTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
4
4
|
export var config = {
|
|
@@ -9,22 +9,16 @@ export var config = {
|
|
|
9
9
|
},
|
|
10
10
|
variations: {
|
|
11
11
|
view: {
|
|
12
|
-
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--
|
|
13
|
-
secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-
|
|
12
|
+
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover, chipTokens.closeIconColor),
|
|
13
|
+
secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover, chipTokens.closeIconColor),
|
|
14
14
|
accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
17
|
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
18
|
xs: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
19
|
},
|
|
20
|
-
disabled: {
|
|
21
|
-
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), chipTokens.disabledOpacity)
|
|
22
|
-
},
|
|
23
20
|
focused: {
|
|
24
|
-
"true": /*#__PURE__*/css(
|
|
25
|
-
},
|
|
26
|
-
pilled: {
|
|
27
|
-
"true": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), chipTokens.focusColor)
|
|
28
22
|
}
|
|
29
23
|
}
|
|
30
24
|
};
|
|
@@ -27,7 +27,16 @@ const meta: Meta<typeof Chip> = {
|
|
|
27
27
|
type: 'select',
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
|
-
...disableProps([
|
|
30
|
+
...disableProps([
|
|
31
|
+
'readOnly',
|
|
32
|
+
'onClear',
|
|
33
|
+
'contentLeft',
|
|
34
|
+
'contentRight',
|
|
35
|
+
'contentClearButton',
|
|
36
|
+
'text',
|
|
37
|
+
'disabled',
|
|
38
|
+
'pilled',
|
|
39
|
+
]),
|
|
31
40
|
},
|
|
32
41
|
};
|
|
33
42
|
|
|
@@ -41,7 +50,7 @@ const TrashIcon = (props) => (
|
|
|
41
50
|
fillRule="evenodd"
|
|
42
51
|
clipRule="evenodd"
|
|
43
52
|
d="M8 5.5A2.5 2.5 0 0110.5 3h3A2.5 2.5 0 0116 5.5V6h-2v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V6H8v-.5zM4 8a1 1 0 011-1h14a1 1 0 110 2h-1v9.5a2.5 2.5 0 01-2.5 2.5h-7A2.5 2.5 0 016 18.5V9H5a1 1 0 01-1-1z"
|
|
44
|
-
fill=
|
|
53
|
+
fill={props.color}
|
|
45
54
|
/>
|
|
46
55
|
</svg>
|
|
47
56
|
);
|
|
@@ -52,9 +61,7 @@ export const Default: Story = {
|
|
|
52
61
|
view: 'default',
|
|
53
62
|
size: 's',
|
|
54
63
|
hasClear: true,
|
|
55
|
-
disabled: false,
|
|
56
64
|
focused: true,
|
|
57
|
-
pilled: false,
|
|
58
65
|
onClear,
|
|
59
66
|
},
|
|
60
67
|
};
|
|
@@ -68,9 +75,23 @@ export const WithIcon: Story = {
|
|
|
68
75
|
};
|
|
69
76
|
const iconSize = args.size || 's';
|
|
70
77
|
|
|
78
|
+
const getColor = (view) => {
|
|
79
|
+
if (view !== 'accent') {
|
|
80
|
+
return 'var(--text-accent)';
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return 'currentColor';
|
|
84
|
+
};
|
|
85
|
+
|
|
71
86
|
return (
|
|
72
87
|
<Chip
|
|
73
|
-
contentLeft={
|
|
88
|
+
contentLeft={
|
|
89
|
+
<TrashIcon
|
|
90
|
+
width={iconSizeMapper[iconSize]}
|
|
91
|
+
height={iconSizeMapper[iconSize]}
|
|
92
|
+
color={getColor(args.view)}
|
|
93
|
+
/>
|
|
94
|
+
}
|
|
74
95
|
{...args}
|
|
75
96
|
/>
|
|
76
97
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { css, chipTokens } from '@salutejs/plasma-new-hope/styled-components';
|
|
4
4
|
export var config = {
|
|
@@ -9,22 +9,16 @@ export var config = {
|
|
|
9
9
|
},
|
|
10
10
|
variations: {
|
|
11
11
|
view: {
|
|
12
|
-
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--
|
|
13
|
-
secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-
|
|
12
|
+
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover, chipTokens.closeIconColor),
|
|
13
|
+
secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover, chipTokens.closeIconColor),
|
|
14
14
|
accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
17
|
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
18
|
xs: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
19
|
},
|
|
20
|
-
disabled: {
|
|
21
|
-
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), chipTokens.disabledOpacity)
|
|
22
|
-
},
|
|
23
20
|
focused: {
|
|
24
|
-
"true": /*#__PURE__*/css(
|
|
25
|
-
},
|
|
26
|
-
pilled: {
|
|
27
|
-
"true": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), chipTokens.focusColor)
|
|
28
22
|
}
|
|
29
23
|
}
|
|
30
24
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/sdds-cs",
|
|
3
|
-
"version": "0.313.1-canary.
|
|
3
|
+
"version": "0.313.1-canary.1946.14663041744.0",
|
|
4
4
|
"description": "Salute Design System / React UI kit for SDDS CS web applications",
|
|
5
5
|
"author": "Salute Frontend Team <salute.developers@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"directory": "packages/sdds-cs"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@salutejs/plasma-new-hope": "0.321.1-canary.
|
|
34
|
-
"@salutejs/sdds-themes": "0.35.1-canary.
|
|
33
|
+
"@salutejs/plasma-new-hope": "0.321.1-canary.1946.14663041744.0",
|
|
34
|
+
"@salutejs/sdds-themes": "0.35.1-canary.1946.14663041744.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"@emotion/react": ">=11",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@salutejs/plasma-core": "1.196.0",
|
|
58
58
|
"@salutejs/plasma-cy-utils": "0.127.0",
|
|
59
59
|
"@salutejs/plasma-icons": "1.217.0",
|
|
60
|
-
"@salutejs/plasma-sb-utils": "0.196.1-canary.
|
|
60
|
+
"@salutejs/plasma-sb-utils": "0.196.1-canary.1946.14663041744.0",
|
|
61
61
|
"@storybook/addon-docs": "7.6.17",
|
|
62
62
|
"@storybook/addon-essentials": "7.6.17",
|
|
63
63
|
"@storybook/addons": "7.6.17",
|
|
@@ -123,5 +123,5 @@
|
|
|
123
123
|
"Anton Vinogradov"
|
|
124
124
|
],
|
|
125
125
|
"sideEffects": false,
|
|
126
|
-
"gitHead": "
|
|
126
|
+
"gitHead": "914bf248093b4dd5db4c6d422cd663942234d9f1"
|
|
127
127
|
}
|