@salutejs/sdds-cs 0.314.0-canary.1947.14664713311.0 → 0.314.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/Autocomplete/Autocomplete.config.js +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +1 -275
- package/components/Avatar/Avatar.config.d.ts +7 -0
- package/components/Avatar/Avatar.config.js +13 -6
- package/components/Avatar/Avatar.d.ts +21 -0
- package/components/Button/Button.config.d.ts +0 -3
- package/components/Button/Button.config.js +6 -9
- package/components/Button/Button.d.ts +0 -9
- package/components/ButtonGroup/ButtonGroup.config.js +2 -2
- package/components/Checkbox/Checkbox.config.js +2 -2
- package/components/Chip/Chip.config.d.ts +0 -6
- package/components/Chip/Chip.config.js +5 -11
- package/components/Chip/Chip.d.ts +0 -6
- package/components/Combobox/Combobox.config.js +1 -1
- package/components/Combobox/Combobox.d.ts +99 -99
- package/components/Combobox/index.d.ts +1 -1
- package/components/DatePicker/DatePicker.config.js +1 -1
- package/components/DatePicker/DatePicker.d.ts +6 -4
- package/components/IconButton/IconButton.config.d.ts +0 -6
- package/components/IconButton/IconButton.config.js +5 -11
- package/components/IconButton/IconButton.d.ts +0 -6
- package/components/Pagination/Pagination.config.js +1 -1
- package/components/Radiobox/Radiobox.config.js +1 -1
- package/components/Select/Select.config.js +1 -1
- package/components/Slider/Slider.config.d.ts +0 -1
- package/components/Slider/Slider.config.js +5 -6
- package/components/Slider/Slider.d.ts +0 -1
- package/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/components/TextArea/TextArea.config.js +1 -1
- package/components/TextField/TextField.config.js +1 -1
- package/components/Tree/Tree.config.js +1 -1
- package/emotion/cjs/components/Autocomplete/Autocomplete.config.js +1 -1
- package/emotion/cjs/components/Avatar/Avatar.config.js +13 -6
- package/emotion/cjs/components/Avatar/Avatar.stories.tsx +31 -1
- package/emotion/cjs/components/Button/Button.config.js +6 -9
- package/emotion/cjs/components/Button/Button.stories.tsx +1 -1
- package/emotion/cjs/components/ButtonGroup/ButtonGroup.config.js +2 -2
- package/emotion/cjs/components/Checkbox/Checkbox.config.js +2 -2
- package/emotion/cjs/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/emotion/cjs/components/Chip/Chip.config.js +5 -11
- package/emotion/cjs/components/Chip/Chip.stories.tsx +11 -4
- package/emotion/cjs/components/Combobox/Combobox.config.js +1 -1
- package/emotion/cjs/components/DatePicker/DatePicker.config.js +1 -1
- package/emotion/cjs/components/DatePicker/DatePicker.stories.tsx +7 -10
- package/emotion/cjs/components/IconButton/IconButton.config.js +5 -11
- package/emotion/cjs/components/Notification/Notification.stories.tsx +4 -0
- package/emotion/cjs/components/Pagination/Pagination.config.js +1 -1
- package/emotion/cjs/components/Radiobox/Radiobox.config.js +1 -1
- package/emotion/cjs/components/Select/Select.config.js +1 -1
- package/emotion/cjs/components/Select/Select.stories.tsx +0 -1
- package/emotion/cjs/components/Slider/Slider.config.js +5 -6
- package/emotion/cjs/components/Slider/Slider.stories.tsx +10 -13
- package/emotion/cjs/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/emotion/cjs/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/emotion/cjs/components/TextArea/TextArea.config.js +1 -1
- package/emotion/cjs/components/TextField/TextField.config.js +1 -1
- package/emotion/cjs/components/Tree/Tree.config.js +1 -1
- package/emotion/es/components/Autocomplete/Autocomplete.config.js +1 -1
- package/emotion/es/components/Avatar/Avatar.config.js +13 -6
- package/emotion/es/components/Avatar/Avatar.stories.tsx +31 -1
- package/emotion/es/components/Button/Button.config.js +6 -9
- package/emotion/es/components/Button/Button.stories.tsx +1 -1
- package/emotion/es/components/ButtonGroup/ButtonGroup.config.js +2 -2
- package/emotion/es/components/Checkbox/Checkbox.config.js +2 -2
- package/emotion/es/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/emotion/es/components/Chip/Chip.config.js +5 -11
- package/emotion/es/components/Chip/Chip.stories.tsx +11 -4
- package/emotion/es/components/Combobox/Combobox.config.js +1 -1
- package/emotion/es/components/DatePicker/DatePicker.config.js +1 -1
- package/emotion/es/components/DatePicker/DatePicker.stories.tsx +7 -10
- package/emotion/es/components/IconButton/IconButton.config.js +5 -11
- package/emotion/es/components/Notification/Notification.stories.tsx +4 -0
- package/emotion/es/components/Pagination/Pagination.config.js +1 -1
- package/emotion/es/components/Radiobox/Radiobox.config.js +1 -1
- package/emotion/es/components/Select/Select.config.js +1 -1
- package/emotion/es/components/Select/Select.stories.tsx +0 -1
- package/emotion/es/components/Slider/Slider.config.js +6 -7
- package/emotion/es/components/Slider/Slider.stories.tsx +10 -13
- package/emotion/es/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/emotion/es/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/emotion/es/components/TextArea/TextArea.config.js +1 -1
- package/emotion/es/components/TextField/TextField.config.js +1 -1
- package/emotion/es/components/Tree/Tree.config.js +1 -1
- package/es/components/Autocomplete/Autocomplete.config.js +1 -1
- package/es/components/Avatar/Avatar.config.js +13 -6
- package/es/components/Button/Button.config.js +6 -9
- package/es/components/ButtonGroup/ButtonGroup.config.js +2 -2
- package/es/components/Checkbox/Checkbox.config.js +2 -2
- package/es/components/Chip/Chip.config.js +5 -11
- package/es/components/Combobox/Combobox.config.js +1 -1
- package/es/components/DatePicker/DatePicker.config.js +1 -1
- package/es/components/IconButton/IconButton.config.js +5 -11
- package/es/components/Pagination/Pagination.config.js +1 -1
- package/es/components/Radiobox/Radiobox.config.js +1 -1
- package/es/components/Select/Select.config.js +1 -1
- package/es/components/Slider/Slider.config.js +6 -7
- package/es/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/es/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/es/components/TextArea/TextArea.config.js +1 -1
- package/es/components/TextField/TextField.config.js +1 -1
- package/es/components/Tree/Tree.config.js +1 -1
- package/package.json +5 -5
|
@@ -13,7 +13,7 @@ export var config = {
|
|
|
13
13
|
negative: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-accent);\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-solid-card);\n ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ", ": var(--plasma-colors-transparent);\n ", ": var(--surface-transparent-accent);\n ", ": var(--text-primary);\n\n ", ": var(--text-primary);\n\n ", ": var(--surface-solid-primary);\n "])), tokens.textFieldColor, tokens.textFieldClearColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldClearPlaceholderColor, tokens.textFieldClearPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.textFieldContentSlotRightColor, tokens.textFieldContentSlotRightColorHover, tokens.textFieldContentSlotRightColorActive, tokens.focusColor, tokens.textFieldIndicatorColor, tokens.textFieldOptionalColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.infiniteLoaderSpinnerColor, tokens.dropdownBorderColor)
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
|
-
s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.
|
|
16
|
+
s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\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.5rem;\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.25rem;\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.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.75rem;\n ", ": 0.125rem;\n ", ": 0.6875rem 0.75rem;\n ", ": 0.5rem;\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 ", ": 1.375rem 0.625rem 0.625rem 0.625rem;\n ", ": 0.25rem;\n\n ", ": 1.5rem;\n ", ": 0.25rem;\n\n ", ": 0.125rem;\n "])), tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldIndicatorSizeInner, tokens.textFieldIndicatorSizeOuter, tokens.textFieldIndicatorLabelPlacementInner, tokens.textFieldIndicatorLabelPlacementOuter, tokens.textFieldIndicatorLabelPlacementInnerRight, tokens.textFieldIndicatorLabelPlacementOuterRight, tokens.textFieldClearIndicatorLabelPlacementInner, tokens.textFieldClearIndicatorLabelPlacementInnerRight, tokens.textFieldClearIndicatorHintInnerRight, tokens.borderRadius, tokens.padding, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.emptyStatePadding, tokens.emptyStateGap, tokens.infiniteLoaderSpinnerSize, tokens.infiniteLoaderGap, tokens.dropdownBorderWidth)
|
|
17
17
|
},
|
|
18
18
|
labelPlacement: {
|
|
19
19
|
inner: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n "])), tokens.textFieldPlaceholderColor, tokens.textFieldLabelInnerFontFamily, tokens.textFieldLabelInnerFontSize, tokens.textFieldLabelInnerFontStyle, tokens.textFieldLabelInnerFontWeight, tokens.textFieldLabelInnerLetterSpacing, tokens.textFieldLabelInnerLineHeight),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
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, avatarTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
4
4
|
export var config = {
|
|
@@ -8,16 +8,23 @@ export var config = {
|
|
|
8
8
|
},
|
|
9
9
|
variations: {
|
|
10
10
|
view: {
|
|
11
|
-
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-
|
|
11
|
+
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-tertiary);\n ", ": var(--surface-positive);\n ", ": var(--on-light-surface-solid-primary);\n ", ": 1.02;\n ", ": var(--plasma-typo-text-font-family);\n "])), tokens.color, tokens.backgroundColor, tokens.statusOnlineColor, tokens.statusOfflineColor, tokens.scaleHover, tokens.fontFamily)
|
|
12
12
|
},
|
|
13
13
|
size: {
|
|
14
14
|
// TODO: #1044 токены типографики в Avatar
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
xxl: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 5.5rem;\n ", ": 2rem;\n ", ": 600;\n ", ": 2.25rem;\n ", ": 0.75rem;\n\n ", ": 1.25rem;\n ", ": 1.25rem;\n ", ": 0 0.375rem;\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 "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
|
|
16
|
+
m: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.25rem;\n ", ": 0.875rem;\n ", ": 600;\n ", ": 0.875rem;\n ", ": 0.5rem;\n\n ", ": 1rem;\n ", ": 1rem;\n ", ": 0 0.25rem;\n\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
|
|
17
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1.5rem;\n ", ": 0.5rem;\n ", ": 600;\n ", ": 0.5rem;\n ", ": 0.375rem;\n\n ", ": 0.75rem;\n ", ": 0.75rem;\n ", ": 0 0.125rem;\n\n ", ": var(--plasma-typo-body-xxs-font-family);\n ", ": var(--plasma-typo-body-xxs-font-size);\n ", ": var(--plasma-typo-body-xxs-font-style);\n ", ": var(--plasma-typo-body-xxs-font-weight);\n ", ": var(--plasma-typo-body-xxs-letter-spacing);\n ", ": var(--plasma-typo-body-xxs-line-height);\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize, tokens.counterBorderRadius, tokens.counterHeight, tokens.counterPadding, tokens.counterFontFamily, tokens.counterFontSize, tokens.counterFontStyle, tokens.counterFontWeight, tokens.counterLetterSpacing, tokens.counterLineHeight),
|
|
18
|
+
fit: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 100%;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n ", ": 0;\n "])), tokens.avatarSize, tokens.fontSize, tokens.fontWeight, tokens.lineHeight, tokens.statusIconSize)
|
|
18
19
|
},
|
|
19
20
|
focused: {
|
|
20
|
-
"true": /*#__PURE__*/css(
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.1rem;\n ", ": -0.2rem;\n ", ": var(--surface-accent);\n "])), tokens.outlineSize, tokens.outlineOffset, tokens.outlineColor)
|
|
22
|
+
},
|
|
23
|
+
counterView: {
|
|
24
|
+
"default": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
25
|
+
accent: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
26
|
+
positive: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-positive);\n "])), tokens.counterColor, tokens.counterBackground),
|
|
27
|
+
negative: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-negative);\n "])), tokens.counterColor, tokens.counterBackground)
|
|
21
28
|
}
|
|
22
29
|
}
|
|
23
30
|
};
|
|
@@ -4,13 +4,41 @@ import { disableProps } from '@salutejs/plasma-sb-utils';
|
|
|
4
4
|
|
|
5
5
|
import { Avatar } from './Avatar';
|
|
6
6
|
|
|
7
|
+
const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
|
8
|
+
const extraType = ['', 'counter'];
|
|
9
|
+
const counterViews = ['default', 'accent', 'positive', 'negative'];
|
|
10
|
+
|
|
7
11
|
const meta: Meta<typeof Avatar> = {
|
|
8
12
|
title: 'Data Display/Avatar',
|
|
9
13
|
component: Avatar,
|
|
10
14
|
argTypes: {
|
|
11
15
|
view: { control: 'inline-radio', options: ['default'] },
|
|
12
|
-
size: { control: 'select', options: ['m', 's', 'fit'] },
|
|
16
|
+
size: { control: 'select', options: ['xxl', 'm', 's', 'fit'] },
|
|
13
17
|
status: { control: 'select', options: ['active', 'inactive'] },
|
|
18
|
+
type: {
|
|
19
|
+
control: 'select',
|
|
20
|
+
options: extraType,
|
|
21
|
+
if: { arg: 'hasExtra', truthy: true },
|
|
22
|
+
},
|
|
23
|
+
extraPlacement: {
|
|
24
|
+
control: 'select',
|
|
25
|
+
options: extraPlacements,
|
|
26
|
+
if: { arg: 'hasExtra', truthy: true },
|
|
27
|
+
},
|
|
28
|
+
counterView: {
|
|
29
|
+
control: 'select',
|
|
30
|
+
options: counterViews,
|
|
31
|
+
defaultValue: 'default',
|
|
32
|
+
if: { arg: 'type', eq: 'counter' },
|
|
33
|
+
},
|
|
34
|
+
count: {
|
|
35
|
+
control: 'number',
|
|
36
|
+
if: { arg: 'type', eq: 'counter' },
|
|
37
|
+
},
|
|
38
|
+
maxCount: {
|
|
39
|
+
control: 'number',
|
|
40
|
+
if: { arg: 'type', eq: 'counter' },
|
|
41
|
+
},
|
|
14
42
|
},
|
|
15
43
|
};
|
|
16
44
|
|
|
@@ -26,6 +54,8 @@ export const Default: Story = {
|
|
|
26
54
|
url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
|
|
27
55
|
status: 'active',
|
|
28
56
|
isScalable: false,
|
|
57
|
+
hasExtra: false,
|
|
58
|
+
extraPlacement: 'bottom-left',
|
|
29
59
|
},
|
|
30
60
|
argTypes: {
|
|
31
61
|
...disableProps(['focused']),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
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, buttonTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
4
4
|
export var config = {
|
|
@@ -14,19 +14,16 @@ export var config = {
|
|
|
14
14
|
clear: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--text-accent-minor);\n ", ": var(--surface-clear);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-transparent-accent-active);\n "])), buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive)
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
|
-
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 11.25rem;\n ", ": 1rem;\n ", ": 0.
|
|
17
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 11.25rem;\n ", ": 1rem;\n ", ": 0.75rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n\n ", ": 0 0.25rem 0 -0.125rem;\n ", ": 0 -0.125rem 0 0.25rem;\n ", ": 0 0 0 0.25rem;\n "])), buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
|
|
18
18
|
sr: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 11.25rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n ", ": 0 0 0 0.25rem;\n "])), buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin)
|
|
19
19
|
},
|
|
20
|
-
disabled: {
|
|
21
|
-
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), buttonTokens.buttonDisabledOpacity)
|
|
22
|
-
},
|
|
23
20
|
focused: {
|
|
24
|
-
"true": /*#__PURE__*/css(
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-accent);\n "])), buttonTokens.buttonFocusColor)
|
|
25
22
|
},
|
|
26
23
|
stretching: {
|
|
27
|
-
auto: /*#__PURE__*/css(
|
|
28
|
-
filled: /*#__PURE__*/css(
|
|
29
|
-
fixed: /*#__PURE__*/css(
|
|
24
|
+
auto: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral([""]))),
|
|
25
|
+
filled: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""]))),
|
|
26
|
+
fixed: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
30
27
|
}
|
|
31
28
|
}
|
|
32
29
|
};
|
|
@@ -40,7 +40,6 @@ const meta: Meta<ButtonProps> = {
|
|
|
40
40
|
stretching: 'auto',
|
|
41
41
|
text: 'Hello',
|
|
42
42
|
value: 'Value',
|
|
43
|
-
disabled: false,
|
|
44
43
|
focused: true,
|
|
45
44
|
square: false,
|
|
46
45
|
isLoading: false,
|
|
@@ -99,6 +98,7 @@ const meta: Meta<ButtonProps> = {
|
|
|
99
98
|
'forwardedAs',
|
|
100
99
|
'pin',
|
|
101
100
|
'focused',
|
|
101
|
+
'disabled',
|
|
102
102
|
]),
|
|
103
103
|
},
|
|
104
104
|
};
|
|
@@ -13,8 +13,8 @@ export var config = {
|
|
|
13
13
|
clear: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n ", ": var(--surface-transparent-accent);\n ", ": var(--text-accent);\n ", ": var(--surface-transparent-accent);\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n "])), buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
|
-
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.25rem;\n ", ": 0.
|
|
17
|
-
sr: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.25rem;\n ", ": 0.
|
|
16
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.25rem;\n ", ": 0.75rem;\n ", ": 0.75rem;\n\n ", ": 2.5rem;\n ", ": 1rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), buttonGroupTokens.buttonSegmentedRadius, buttonGroupTokens.buttonSideRadius, buttonGroupTokens.buttonDefaultRadius, buttonGroupTokens.buttonHeight, buttonGroupTokens.buttonPadding, buttonGroupTokens.buttonFontFamily, buttonGroupTokens.buttonFontSize, buttonGroupTokens.buttonFontStyle, buttonGroupTokens.buttonFontWeight, buttonGroupTokens.buttonLetterSpacing, buttonGroupTokens.buttonLineHeight),
|
|
17
|
+
sr: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.25rem;\n ", ": 0.75rem;\n ", ": 0.75rem;\n\n ", ": 2.5rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), buttonGroupTokens.buttonSegmentedRadius, buttonGroupTokens.buttonDefaultRadius, buttonGroupTokens.buttonSideRadius, buttonGroupTokens.buttonHeight, buttonGroupTokens.buttonFontFamily, buttonGroupTokens.buttonFontSize, buttonGroupTokens.buttonFontStyle, buttonGroupTokens.buttonFontWeight, buttonGroupTokens.buttonLetterSpacing, buttonGroupTokens.buttonLineHeight)
|
|
18
18
|
},
|
|
19
19
|
orientation: {
|
|
20
20
|
horizontal: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": row;\n "])), buttonGroupTokens.buttonGroupOrientation),
|
|
@@ -9,10 +9,10 @@ export var config = {
|
|
|
9
9
|
},
|
|
10
10
|
variations: {
|
|
11
11
|
size: {
|
|
12
|
-
s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0;\n ", ": 0.125rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\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 ", ": 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 "])), checkboxTokens.margin, checkboxTokens.triggerPadding, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.descriptionMarginTop, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
|
|
12
|
+
s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0;\n ", ": 0.125rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n ", ": 0.125rem;\n ", ": 0rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\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 ", ": 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 "])), checkboxTokens.margin, checkboxTokens.triggerPadding, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.triggerBorderWidth, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.descriptionMarginTop, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
|
|
13
13
|
},
|
|
14
14
|
view: {
|
|
15
|
-
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--
|
|
15
|
+
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": transparent;\n "])), checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderCheckedColor)
|
|
16
16
|
},
|
|
17
17
|
disabled: {
|
|
18
18
|
"true": /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--outline-solid-primary);\n ", ": var(--surface-solid-tertiary);\n ", ": var(--text-secondary);\n "])), checkboxTokens.triggerBorderColor, checkboxTokens.fillColor, checkboxTokens.labelColor)
|
|
@@ -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 ", ": 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, chipTokens.leftContentColor),
|
|
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 ", ": 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, chipTokens.leftContentColor),
|
|
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
|
-
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.
|
|
17
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.625rem;\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
|
|
|
@@ -36,7 +45,7 @@ export default meta;
|
|
|
36
45
|
type Story = StoryObj<typeof Chip>;
|
|
37
46
|
|
|
38
47
|
const TrashIcon = (props) => (
|
|
39
|
-
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
|
48
|
+
<svg width="100%" viewBox="0 0 24 24" fill="none" color="inherit" {...props}>
|
|
40
49
|
<path
|
|
41
50
|
fillRule="evenodd"
|
|
42
51
|
clipRule="evenodd"
|
|
@@ -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
|
};
|
|
@@ -13,7 +13,7 @@ export var config = {
|
|
|
13
13
|
negative: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-accent);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n "])), tokens.textFieldColor, tokens.textFieldClearColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldClearPlaceholderColor, tokens.textFieldClearPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.textFieldContentSlotRightColor, tokens.textFieldContentSlotRightColorHover, tokens.textFieldContentSlotRightColorActive, tokens.textFieldIndicatorColor, tokens.textFieldOptionalColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly, tokens.dropdownBorderColor, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover)
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
|
-
s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.375rem;\n ", ": 0.
|
|
16
|
+
s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\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.5rem;\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.25rem;\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.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\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.625rem 0.875rem 0.625rem 0.875rem;\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.75rem;\n ", ": 0.25rem 0.75rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.375rem 0 0;\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 ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\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 ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": none;\n ", ": 0.125rem;\n ", ": var(--outline-accent);\n\n ", ": 0.375rem;\n ", ": 0.0625rem;\n "])), tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldIndicatorSizeInner, tokens.textFieldIndicatorSizeOuter, tokens.textFieldIndicatorLabelPlacementInner, tokens.textFieldIndicatorLabelPlacementOuter, tokens.textFieldIndicatorLabelPlacementInnerRight, tokens.textFieldIndicatorLabelPlacementOuterRight, tokens.textFieldClearIndicatorLabelPlacementInner, tokens.textFieldClearIndicatorLabelPlacementInnerRight, tokens.textFieldClearIndicatorHintInnerRight, tokens.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPadding, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.emptyStatePadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.itemIconMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderCheckedColor, tokens.checkboxTriggerBorderWidth, tokens.checkboxTriggerBorderColor, tokens.indicatorSize, tokens.dropdownBorderWidth)
|
|
17
17
|
},
|
|
18
18
|
labelPlacement: {
|
|
19
19
|
inner: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n "])), tokens.textFieldPlaceholderColor, tokens.textFieldLabelInnerFontFamily, tokens.textFieldLabelInnerFontSize, tokens.textFieldLabelInnerFontStyle, tokens.textFieldLabelInnerFontWeight, tokens.textFieldLabelInnerLetterSpacing, tokens.textFieldLabelInnerLineHeight),
|
|
@@ -8,7 +8,7 @@ export var config = {
|
|
|
8
8
|
},
|
|
9
9
|
variations: {
|
|
10
10
|
view: {
|
|
11
|
-
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-solid-card);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-negative);\n ", ": var(--text-positive);\n\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-accent);\n\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": var(--surface-negative);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n ", ": var(--outline-accent);\n ", ": var(--surface-solid-card);\n ", ": var(--text-secondary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n\n ", ": var(--text-accent);\n\n ", ": var(--shadow-down-soft-s);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--inverse-outline-solid-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n ", ": var(--outline-solid-primary);\n ", ": var(--text-secondary);\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n "])), tokens.background, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.borderColorError, tokens.borderColorSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.leftHelperColorError, tokens.leftHelperColorSuccess, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldBorderColorError, tokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccessFocus, tokens.textFieldBackgroundColor, tokens.textFieldContentSlotColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.calendarContentPrimaryDisabledColor, tokens.calendarContentSecondaryDisabledColor, tokens.calendarHeaderArrowColor, tokens.calendarBorderColor, tokens.calendarDayOfWeekColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor, tokens.textFieldContentRightSlotColor, tokens.textFieldContentRightSlotColorHover)
|
|
11
|
+
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-solid-card);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-negative);\n ", ": var(--text-positive);\n\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-accent);\n\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": var(--surface-negative);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n ", ": var(--outline-accent);\n ", ": var(--surface-solid-card);\n ", ": var(--text-secondary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n\n ", ": var(--text-accent);\n\n ", ": var(--shadow-down-soft-s);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--inverse-outline-solid-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n ", ": var(--outline-solid-primary);\n ", ": var(--text-secondary);\n ", ": 0.4;\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n "])), tokens.background, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.borderColorError, tokens.borderColorSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.leftHelperColorError, tokens.leftHelperColorSuccess, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.textFieldBorderColorError, tokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccessFocus, tokens.textFieldBackgroundColor, tokens.textFieldContentSlotColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.calendarContentPrimaryDisabledColor, tokens.calendarContentSecondaryDisabledColor, tokens.calendarHeaderArrowColor, tokens.calendarBorderColor, tokens.calendarDayOfWeekColor, tokens.calendarDisabledOpacity, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor, tokens.textFieldContentRightSlotColor, tokens.textFieldContentRightSlotColorHover)
|
|
12
12
|
},
|
|
13
13
|
size: {
|
|
14
14
|
s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 19.5rem;\n ", ": 0.625rem;\n ", ": 0.125rem;\n\n ", ": 0 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-size);\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 0 0 0.75rem;\n ", ": 0;\n\n ", ": 0.5rem;\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-size);\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.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n\n ", ": 2.5rem;\n ", ": 0.625rem;\n ", ": 0.125rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-size);\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 0 0 0;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-size);\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.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": 0.125rem;\n ", ": 19.5rem;\n ", ": 0.875rem;\n\n ", ": 0.5rem 1rem 0.875rem 1rem;\n ", ": 0.5rem;\n ", ": 5.5rem;\n ", ": 3.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-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n ", ": 8.25rem;\n ", ": 7rem;\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-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 1rem 0.875rem 1rem;\n ", ": 0.5rem;\n ", ": 5.5rem;\n ", ": 3.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-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 1rem 0.875rem 1rem;\n ", ": 0.5rem;\n ", ": 2.5rem;\n ", ": 2rem;\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-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.125rem;\n\n ", ": 0.75rem 1rem 0 1rem;\n ", ": 0.5rem;\n\n ", ": 0 0 0 0.5rem;\n ", ": 0.25rem;\n\n ", ": var(--plasma-typo-body-m-bold-font-family);\n ", ": var(--plasma-typo-body-m-bold-font-size);\n ", ": var(--plasma-typo-body-m-bold-font-style);\n ", ": var(--plasma-typo-body-m-bold-letter-spacing);\n ", ": var(--plasma-typo-body-m-bold-line-height);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n\n ", ": 2rem;\n ", ": 2rem;\n ", ": 0.75rem;\n ", ": 0.5rem;\n "])), tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.calendarBorderWidth, tokens.calendarWidth, tokens.calendarBorderRadius, tokens.calendarYearsPadding, tokens.calendarYearItemBorderRadius, tokens.calendarYearItemWidth, tokens.calendarYearItemHeight, tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearFontWeight, tokens.calendarYearSelectedFontWeight, tokens.calendarQuartersPadding, tokens.calendarQuarterItemBorderRadius, tokens.calendarQuarterItemWidth, tokens.calendarQuarterItemHeight, tokens.calendarQuarterFontFamily, tokens.calendarQuarterFontSize, tokens.calendarQuarterFontStyle, tokens.calendarQuarterFontLetterSpacing, tokens.calendarQuarterFontLineHeight, tokens.calendarQuarterFontWeight, tokens.calendarQuarterSelectedFontWeight, tokens.calendarMonthsPadding, tokens.calendarMonthItemBorderRadius, tokens.calendarMonthItemWidth, tokens.calendarMonthItemHeight, tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthFontWeight, tokens.calendarMonthSelectedFontWeight, tokens.calendarDaysPadding, tokens.calendarDayItemBorderRadius, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayFontWeight, tokens.calendarDaySelectedFontWeight, tokens.calendarCurrentItemBorderWidth, tokens.calendarHeaderWrapperPadding, tokens.calendarHeaderArrowGap, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderFontWeight, tokens.calendarHeaderFontWeightBold, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonRadius)
|
|
@@ -9,6 +9,7 @@ import { IconButton } from '../IconButton/IconButton';
|
|
|
9
9
|
import { DatePicker, DatePickerRange } from './DatePicker';
|
|
10
10
|
|
|
11
11
|
const onChangeValue = action('onChangeValue');
|
|
12
|
+
const onCommitDate = action('onCommitDate');
|
|
12
13
|
const onBlur = action('onBlur');
|
|
13
14
|
const onFocus = action('onFocus');
|
|
14
15
|
|
|
@@ -107,10 +108,8 @@ const StoryDefault = ({
|
|
|
107
108
|
onBlur={onBlur}
|
|
108
109
|
onFocus={onFocus}
|
|
109
110
|
onToggle={(is) => setIsOpen(is)}
|
|
110
|
-
onChangeValue={
|
|
111
|
-
|
|
112
|
-
}}
|
|
113
|
-
onCommitDate={() => setIsOpen(false)}
|
|
111
|
+
onChangeValue={onChangeValue}
|
|
112
|
+
onCommitDate={onCommitDate}
|
|
114
113
|
{...rest}
|
|
115
114
|
/>
|
|
116
115
|
);
|
|
@@ -141,6 +140,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
|
|
|
141
140
|
labelPlacement: 'outer',
|
|
142
141
|
defaultDate: new Date(2024, 5, 14),
|
|
143
142
|
renderFromDate: new Date(2024, 4, 14),
|
|
143
|
+
includeEdgeDates: true,
|
|
144
144
|
min: new Date(2024, 1, 1),
|
|
145
145
|
max: new Date(2024, 12, 29),
|
|
146
146
|
maskWithFormat: false,
|
|
@@ -236,12 +236,8 @@ const StoryRange = ({
|
|
|
236
236
|
showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
|
|
237
237
|
}
|
|
238
238
|
onToggle={(is) => setIsOpen(is)}
|
|
239
|
-
onChangeFirstValue={
|
|
240
|
-
|
|
241
|
-
}}
|
|
242
|
-
onChangeSecondValue={(e, currentValue) => {
|
|
243
|
-
onChangeSecondValue(e, currentValue);
|
|
244
|
-
}}
|
|
239
|
+
onChangeFirstValue={onChangeFirstValue}
|
|
240
|
+
onChangeSecondValue={onChangeSecondValue}
|
|
245
241
|
{...dividerIconProps}
|
|
246
242
|
{...rest}
|
|
247
243
|
/>
|
|
@@ -273,6 +269,7 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
|
273
269
|
closeAfterDateSelect: true,
|
|
274
270
|
isDoubleCalendar: false,
|
|
275
271
|
dividerVariant: 'dash',
|
|
272
|
+
includeEdgeDates: true,
|
|
276
273
|
min: new Date(2024, 1, 1),
|
|
277
274
|
max: new Date(2024, 12, 29),
|
|
278
275
|
renderFromDate: new Date(2024, 4, 14),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
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, iconButtonTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
4
4
|
export var config = {
|
|
@@ -14,20 +14,14 @@ export var config = {
|
|
|
14
14
|
clear: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-transparent-accent-active);\n "])), iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonBackgroundColorActive)
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
m: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 0.75rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
|
20
|
-
mr: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 3rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
|
21
|
-
s: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": 1rem;\n ", ": 0.625rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
|
22
|
-
sr: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 2.5rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
|
23
|
-
xs: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2rem;\n ", ": 2rem;\n ", ": 0.75rem;\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-bold-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": 1rem;\n ", ": inherit;\n "])), iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
|
24
|
-
xsr: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2rem;\n ", ": 2rem;\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-bold-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": 1rem;\n ", ": inherit;\n "])), iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
|
|
17
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": 1rem;\n ", ": 0.75rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
|
|
18
|
+
sr: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 2.5rem;\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-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
|
|
25
19
|
},
|
|
26
20
|
disabled: {
|
|
27
|
-
"true": /*#__PURE__*/css(
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), iconButtonTokens.iconButtonDisabledOpacity)
|
|
28
22
|
},
|
|
29
23
|
focused: {
|
|
30
|
-
"true": /*#__PURE__*/css(
|
|
24
|
+
"true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-accent);\n "])), iconButtonTokens.iconButtonFocusColor)
|
|
31
25
|
}
|
|
32
26
|
}
|
|
33
27
|
};
|
|
@@ -3,6 +3,7 @@ import type { ComponentProps } from 'react';
|
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
4
|
import { IconSber } from '@salutejs/plasma-icons';
|
|
5
5
|
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
6
|
+
import { action } from '@storybook/addon-actions';
|
|
6
7
|
|
|
7
8
|
import { Button } from '../Button/Button';
|
|
8
9
|
import { Modal } from '../Modal/Modal';
|
|
@@ -42,6 +43,9 @@ const getNotificationProps = (i: number) => ({
|
|
|
42
43
|
children: texts[i % 3],
|
|
43
44
|
size: size[i % 2],
|
|
44
45
|
iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
|
|
46
|
+
onTimeoutClose: () => {
|
|
47
|
+
action('onTimeoutClose')('Callback, вызываемый при автоматическом закрытии по timeout.');
|
|
48
|
+
},
|
|
45
49
|
});
|
|
46
50
|
|
|
47
51
|
const placements = ['top', 'left'];
|