@salutejs/plasma-new-hope 0.74.1-canary.1180.8686460436.0 → 0.75.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Avatar/Avatar.js +1 -7
- package/cjs/components/Avatar/Avatar.js.map +1 -1
- package/es/components/Avatar/Avatar.js +1 -7
- package/es/components/Avatar/Avatar.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.js +1 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +0 -1
- package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +18 -34
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Counter/Counter.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Header/Header.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Header/Header.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Link/Link.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Pagination/Pagination.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/cjs/examples/plasma_web/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Counter/Counter.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Header/Header.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Header/Header.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Link/Link.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Pagination/Pagination.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Pagination/Pagination.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Badge/Badge.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Link/Link.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/es/components/Avatar/Avatar.js +1 -7
- package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +0 -1
- package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +18 -34
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Counter/Counter.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Header/Header.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Header/Header.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Link/Link.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Pagination/Pagination.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Badge/Badge.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/es/examples/plasma_web/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Counter/Counter.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Header/Header.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Header/Header.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Link/Link.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Pagination/Pagination.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Pagination/Pagination.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/es/examples/sds_engineer/components/Badge/Badge.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +1 -1
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/es/examples/sds_engineer/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/Counter/Counter.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/es/examples/sds_engineer/components/Link/Link.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Toast/Toast.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/es/index.js +0 -1
- package/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/components/Badge/Badge.types.d.ts +1 -1
- package/types/components/Counter/Counter.types.d.ts +1 -1
- package/types/components/Indicator/Indicator.d.ts +4 -4
- package/types/components/Indicator/Indicator.types.d.ts +12 -2
- package/types/components/Indicator/Indicator.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts +4 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.d.ts +4 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Calendar/Calendar.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Calendar/CalendarBase.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Calendar/CalendarDouble.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Counter/Counter.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Counter/Counter.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Header/Header.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Indicator/Indicator.d.ts +4 -4
- package/types/examples/plasma_b2c/components/Link/Link.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Link/Link.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Pagination/Pagination.config.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Pagination/Pagination.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Radiobox/Radiobox.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Radiobox/Radiobox.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Spinner/Spinner.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Spinner/Spinner.d.ts +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.d.ts +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.d.ts +1 -1
- package/types/examples/plasma_web/components/Button/Button.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Button/Button.d.ts +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts +4 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.d.ts +4 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Calendar/Calendar.d.ts +2 -2
- package/types/examples/plasma_web/components/Calendar/CalendarBase.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Calendar/CalendarDouble.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.d.ts +1 -1
- package/types/examples/plasma_web/components/Counter/Counter.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Counter/Counter.d.ts +1 -1
- package/types/examples/plasma_web/components/Header/Header.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_web/components/Indicator/Indicator.d.ts +4 -4
- package/types/examples/plasma_web/components/Link/Link.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Link/Link.d.ts +1 -1
- package/types/examples/plasma_web/components/Pagination/Pagination.config.d.ts +2 -2
- package/types/examples/plasma_web/components/Pagination/Pagination.d.ts +2 -2
- package/types/examples/plasma_web/components/Radiobox/Radiobox.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Radiobox/Radiobox.d.ts +1 -1
- package/types/examples/plasma_web/components/Spinner/Spinner.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Spinner/Spinner.d.ts +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.d.ts +1 -1
- package/types/examples/sds_engineer/components/Badge/Badge.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Badge/Badge.d.ts +1 -1
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts +4 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.d.ts +4 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Calendar/Calendar.d.ts +2 -2
- package/types/examples/sds_engineer/components/Calendar/CalendarBase.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Calendar/CalendarDouble.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Checkbox/Checkbox.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Checkbox/Checkbox.d.ts +1 -1
- package/types/examples/sds_engineer/components/Counter/Counter.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Counter/Counter.d.ts +1 -1
- package/types/examples/sds_engineer/components/Link/Link.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Link/Link.d.ts +1 -1
- package/types/examples/sds_engineer/components/Radiobox/Radiobox.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Radiobox/Radiobox.d.ts +1 -1
- package/types/examples/sds_engineer/components/Spinner/Spinner.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Spinner/Spinner.d.ts +1 -1
- package/types/examples/sds_engineer/components/TextArea/TextArea.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/TextArea/TextArea.d.ts +1 -1
- package/types/examples/sds_engineer/components/Toast/Toast.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Toast/Toast.d.ts +1 -1
- package/types/index.d.ts +0 -1
- package/types/index.d.ts.map +1 -1
@@ -57,7 +57,7 @@ const Container = styled.div`
|
|
57
57
|
export const ToastComponent: StoryComponent = {
|
58
58
|
args: {
|
59
59
|
text: 'Текст всплывающего уведомления',
|
60
|
-
view: '
|
60
|
+
view: 'default',
|
61
61
|
size: 'm',
|
62
62
|
hasClose: true,
|
63
63
|
enableContentLeft: true,
|
@@ -196,7 +196,7 @@ const StoryComplex = ({
|
|
196
196
|
<Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
|
197
197
|
<Modal frame="theme-root" isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
|
198
198
|
<div>Hello!</div>
|
199
|
-
<Button view="
|
199
|
+
<Button view="default" text="Add notification" onClick={handleShowNotification} />
|
200
200
|
</Modal>
|
201
201
|
</PopupProvider>
|
202
202
|
</NotificationsProvider>
|
@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _Badge = /*#__PURE__*/require("../../../../components/Badge");
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
|
-
view: '
|
11
|
+
view: 'default',
|
12
12
|
size: 'm'
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
17
17
|
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
18
18
|
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
19
19
|
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
|
@@ -18,7 +18,7 @@ const meta: Meta<typeof Badge> = {
|
|
18
18
|
},
|
19
19
|
},
|
20
20
|
view: {
|
21
|
-
options: ['
|
21
|
+
options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
|
22
22
|
control: {
|
23
23
|
type: 'select',
|
24
24
|
},
|
@@ -43,7 +43,7 @@ const BellIcon = (props) => (
|
|
43
43
|
export const Default: Story = {
|
44
44
|
args: {
|
45
45
|
text: 'Hello',
|
46
|
-
view: '
|
46
|
+
view: 'default',
|
47
47
|
size: 'm',
|
48
48
|
pilled: false,
|
49
49
|
transparent: false,
|
@@ -8,13 +8,13 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _Button = /*#__PURE__*/require("../../../../components/Button");
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
|
-
view: '
|
11
|
+
view: 'default',
|
12
12
|
focused: 'true',
|
13
13
|
size: 'm'
|
14
14
|
},
|
15
15
|
variations: {
|
16
16
|
view: {
|
17
|
-
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
18
18
|
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
19
19
|
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
20
20
|
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js
CHANGED
@@ -8,18 +8,21 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _ButtonGroup = /*#__PURE__*/require("../../../../components/ButtonGroup");
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
|
-
view: '
|
11
|
+
view: 'default',
|
12
12
|
size: 'm'
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":
|
18
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":
|
19
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":
|
20
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":
|
21
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":
|
22
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
20
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
21
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
22
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
23
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
24
|
+
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
25
|
+
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
|
23
26
|
},
|
24
27
|
size: {
|
25
28
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),
|
package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx
CHANGED
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
|
|
11
11
|
type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
|
12
12
|
type Story = StoryObj<StoryProps>;
|
13
13
|
|
14
|
-
const views = ['accent', '
|
14
|
+
const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
|
15
15
|
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
16
16
|
const orientationValues = ['horizontal', 'vertical'];
|
17
17
|
const gapValues = ['none', 'dense', 'wide'];
|
@@ -65,7 +65,7 @@ export default meta;
|
|
65
65
|
|
66
66
|
export const Default: Story = {
|
67
67
|
args: {
|
68
|
-
view: '
|
68
|
+
view: 'default',
|
69
69
|
size: 'm',
|
70
70
|
gap: 'dense',
|
71
71
|
orientation: 'horizontal',
|
@@ -99,7 +99,7 @@ export const CustomButtons: Story = {
|
|
99
99
|
<>
|
100
100
|
<h3>Группа кнопок с разными темами</h3>
|
101
101
|
<ButtonGroup {...args}>
|
102
|
-
<Button text="Primary" view="
|
102
|
+
<Button text="Primary" view="default" />
|
103
103
|
<Button text="Negative" view="negative" />
|
104
104
|
<Button text="Positive" view="positive" />
|
105
105
|
<Button text="Clear" view="clear" />
|
@@ -107,7 +107,7 @@ export const CustomButtons: Story = {
|
|
107
107
|
|
108
108
|
<h3>Группа кнопок с разными размерами</h3>
|
109
109
|
<ButtonGroup {...args}>
|
110
|
-
<Button text="Primary" view="
|
110
|
+
<Button text="Primary" view="default" size="l" />
|
111
111
|
<Button text="Negative" view="negative" size="m" />
|
112
112
|
<Button text="Positive" view="positive" size="s" />
|
113
113
|
<Button text="Clear" view="clear" size="l" />
|
package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarBase.config.js
CHANGED
@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _Calendar = /*#__PURE__*/require("../../../../components/Calendar/Calendar.tokens");
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
|
-
view: '
|
11
|
+
view: 'default',
|
12
12
|
size: 'm'
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], _Calendar.tokens.calendarBackgroundColor, _Calendar.tokens.calendarSelectedItemBackground, _Calendar.tokens.calendarSelectedItemColor, _Calendar.tokens.calendarSelectableItemBackgroundHover, _Calendar.tokens.calendarCurrentItemBorderColor, _Calendar.tokens.calendarCurrentItemBackgroundHover, _Calendar.tokens.calendarCurrentItemColorHover, _Calendar.tokens.calendarCurrentItemChildBackgroundHover, _Calendar.tokens.calendarActiveItemBackground, _Calendar.tokens.calendarActiveItemColor, _Calendar.tokens.calendarHoveredItemBackground, _Calendar.tokens.calendarHoveredItemColor, _Calendar.tokens.calendarRangeBackground, _Calendar.tokens.calendarOutlineFocusColor, _Calendar.tokens.calendarContentPrimaryColor, _Calendar.tokens.calendarContentSecondaryColor)
|
17
17
|
},
|
18
18
|
size: {
|
19
19
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":5.5rem;", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], _Calendar.tokens.calendarHeaderArrowContainerWidth, _Calendar.tokens.calendarItemBorderRadius, _Calendar.tokens.calendarHeaderFontFamily, _Calendar.tokens.calendarHeaderFontSize, _Calendar.tokens.calendarHeaderFontStyle, _Calendar.tokens.calendarHeaderFontLetterSpacing, _Calendar.tokens.calendarHeaderFontLineHeight, _Calendar.tokens.calendarHeaderFontWeight, _Calendar.tokens.calendarHeaderFontWeightBold, _Calendar.tokens.calendarYearFontFamily, _Calendar.tokens.calendarYearFontSize, _Calendar.tokens.calendarYearFontStyle, _Calendar.tokens.calendarYearFontLetterSpacing, _Calendar.tokens.calendarYearFontLineHeight, _Calendar.tokens.calendarYearFontWeight, _Calendar.tokens.calendarMonthFontFamily, _Calendar.tokens.calendarMonthFontSize, _Calendar.tokens.calendarMonthFontStyle, _Calendar.tokens.calendarMonthFontLetterSpacing, _Calendar.tokens.calendarMonthFontLineHeight, _Calendar.tokens.calendarMonthFontWeight, _Calendar.tokens.calendarDayFontFamily, _Calendar.tokens.calendarDayFontSize, _Calendar.tokens.calendarDayFontStyle, _Calendar.tokens.calendarDayFontLetterSpacing, _Calendar.tokens.calendarDayFontLineHeight, _Calendar.tokens.calendarDayFontWeight)
|
package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarDouble.config.js
CHANGED
@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _Calendar = /*#__PURE__*/require("../../../../components/Calendar/Calendar.tokens");
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
|
-
view: '
|
11
|
+
view: 'default',
|
12
12
|
size: 'm'
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], _Calendar.tokens.calendarBackgroundColor, _Calendar.tokens.calendarSelectedItemBackground, _Calendar.tokens.calendarSelectedItemColor, _Calendar.tokens.calendarSelectableItemBackgroundHover, _Calendar.tokens.calendarCurrentItemBorderColor, _Calendar.tokens.calendarCurrentItemBackgroundHover, _Calendar.tokens.calendarCurrentItemColorHover, _Calendar.tokens.calendarCurrentItemChildBackgroundHover, _Calendar.tokens.calendarActiveItemBackground, _Calendar.tokens.calendarActiveItemColor, _Calendar.tokens.calendarHoveredItemBackground, _Calendar.tokens.calendarHoveredItemColor, _Calendar.tokens.calendarSeparatorBackground, _Calendar.tokens.calendarRangeBackground, _Calendar.tokens.calendarOutlineFocusColor, _Calendar.tokens.calendarContentPrimaryColor, _Calendar.tokens.calendarContentSecondaryColor)
|
17
17
|
},
|
18
18
|
size: {
|
19
19
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], _Calendar.tokens.calendarItemBorderRadius, _Calendar.tokens.calendarHeaderFontFamily, _Calendar.tokens.calendarHeaderFontSize, _Calendar.tokens.calendarHeaderFontStyle, _Calendar.tokens.calendarHeaderFontLetterSpacing, _Calendar.tokens.calendarHeaderFontLineHeight, _Calendar.tokens.calendarHeaderFontWeight, _Calendar.tokens.calendarHeaderFontWeightBold, _Calendar.tokens.calendarYearFontFamily, _Calendar.tokens.calendarYearFontSize, _Calendar.tokens.calendarYearFontStyle, _Calendar.tokens.calendarYearFontLetterSpacing, _Calendar.tokens.calendarYearFontLineHeight, _Calendar.tokens.calendarYearFontWeight, _Calendar.tokens.calendarMonthFontFamily, _Calendar.tokens.calendarMonthFontSize, _Calendar.tokens.calendarMonthFontStyle, _Calendar.tokens.calendarMonthFontLetterSpacing, _Calendar.tokens.calendarMonthFontLineHeight, _Calendar.tokens.calendarMonthFontWeight, _Calendar.tokens.calendarDayFontFamily, _Calendar.tokens.calendarDayFontSize, _Calendar.tokens.calendarDayFontStyle, _Calendar.tokens.calendarDayFontLetterSpacing, _Calendar.tokens.calendarDayFontLineHeight, _Calendar.tokens.calendarDayFontWeight)
|
@@ -22,7 +22,7 @@ var config = exports.config = {
|
|
22
22
|
* Вид контрола.
|
23
23
|
*/
|
24
24
|
view: {
|
25
|
-
|
25
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
26
26
|
secondary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
27
27
|
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
28
28
|
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _Counter = /*#__PURE__*/require("../../../../components/Counter");
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
|
-
view: '
|
11
|
+
view: 'default',
|
12
12
|
size: 'xs'
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
|
17
17
|
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
|
18
18
|
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
|
19
19
|
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
|
@@ -18,7 +18,7 @@ const meta: Meta<typeof Counter> = {
|
|
18
18
|
},
|
19
19
|
},
|
20
20
|
view: {
|
21
|
-
options: ['
|
21
|
+
options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
|
22
22
|
control: {
|
23
23
|
type: 'select',
|
24
24
|
},
|
@@ -35,7 +35,7 @@ export const Default: Story = {
|
|
35
35
|
args: {
|
36
36
|
count: 25,
|
37
37
|
maxCount: 100,
|
38
|
-
view: '
|
38
|
+
view: 'default',
|
39
39
|
size: 'xs',
|
40
40
|
},
|
41
41
|
};
|
@@ -12,7 +12,7 @@ var config = exports.config = {
|
|
12
12
|
},
|
13
13
|
variations: {
|
14
14
|
view: {
|
15
|
-
|
15
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-primary);--plasma-link-color-hover:var(--text-primary-hover);--plasma-link-color-active:var(--text-primary-active);--plasma-link-color-visited:var(--text-primary);--plasma-link-color-visited-hover:var(--text-primary-hover);--plasma-link-color-visited-active:var(--text-primary-active);--plasma-link-underline-border:0;"]),
|
16
16
|
secondary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-secondary);--plasma-link-color-hover:var(--text-secondary-hover);--plasma-link-color-active:var(--text-secondary-active);--plasma-link-color-visited:var(--text-secondary);--plasma-link-color-visited-hover:var(--text-secondary-hover);--plasma-link-color-visited-active:var(--text-secondary-active);--plasma-link-underline-border:0;"]),
|
17
17
|
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-tertiary);--plasma-link-color-hover:var(--text-tertiary-hover);--plasma-link-color-active:var(--text-tertiary-active);--plasma-link-color-visited:var(--text-tertiary);--plasma-link-color-visited-hover:var(--text-tertiary-hover);--plasma-link-color-visited-active:var(--text-tertiary-active);--plasma-link-underline-border:0;"]),
|
18
18
|
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-paragraph);--plasma-link-color-hover:var(--text-paragraph-hover);--plasma-link-color-active:var(--text-paragraph-active);--plasma-link-color-visited:var(--text-paragraph);--plasma-link-color-visited-hover:var(--text-paragraph-hover);--plasma-link-color-visited-active:var(--text-paragraph-active);--plasma-link-underline-border:0;"]),
|
@@ -22,7 +22,7 @@ var config = exports.config = {
|
|
22
22
|
* Вид контрола.
|
23
23
|
*/
|
24
24
|
view: {
|
25
|
-
|
25
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
|
26
26
|
secondary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
|
27
27
|
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
|
28
28
|
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
|
@@ -18,7 +18,7 @@ var config = exports.config = {
|
|
18
18
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":36px;"], _Spinner.spinnerTokens.size)
|
19
19
|
},
|
20
20
|
view: {
|
21
|
-
|
21
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);"], _Spinner.spinnerTokens.color),
|
22
22
|
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);"], _Spinner.spinnerTokens.color),
|
23
23
|
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);"], _Spinner.spinnerTokens.color),
|
24
24
|
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);"], _Spinner.spinnerTokens.color),
|
@@ -8,7 +8,7 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _TextArea = /*#__PURE__*/require("../../../../components/TextArea");
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
|
-
view: '
|
11
|
+
view: 'default',
|
12
12
|
focused: 'true'
|
13
13
|
},
|
14
14
|
variations: {
|
@@ -18,7 +18,7 @@ var config = exports.config = {
|
|
18
18
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":5.825rem;", ":1.125rem;", ":0.125rem;", ":0.25rem;", ":0.438rem;", ":0.5rem;", ":0.563rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderSize, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight)
|
19
19
|
},
|
20
20
|
view: {
|
21
|
-
|
21
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--surface-accent-active);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus),
|
22
22
|
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-tertiary);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--surface-accent-active);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--plasma-colors-secondary);"], _TextArea.textAreaTokens.inputBackgroundColor, _TextArea.textAreaTokens.inputBackgroundColorHover, _TextArea.textAreaTokens.inputBackgroundColorActive, _TextArea.textAreaTokens.inputBackgroundColorFocus, _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus)
|
23
23
|
},
|
24
24
|
disabled: {
|
@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
|
|
8
8
|
var _Toast = /*#__PURE__*/require("../../../../components/Toast");
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
|
-
view: '
|
11
|
+
view: 'default',
|
12
12
|
size: 'm'
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
17
17
|
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
18
18
|
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
|
19
19
|
},
|
@@ -57,7 +57,7 @@ const Container = styled.div`
|
|
57
57
|
export const ToastComponent: StoryComponent = {
|
58
58
|
args: {
|
59
59
|
text: 'Текст всплывающего уведомления',
|
60
|
-
view: '
|
60
|
+
view: 'default',
|
61
61
|
size: 'm',
|
62
62
|
hasClose: true,
|
63
63
|
enableContentLeft: true,
|
@@ -196,7 +196,7 @@ const StoryComplex = ({
|
|
196
196
|
<Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
|
197
197
|
<Modal frame="theme-root" isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
|
198
198
|
<div>Hello!</div>
|
199
|
-
<Button view="
|
199
|
+
<Button view="default" text="Add notification" onClick={handleShowNotification} />
|
200
200
|
</Modal>
|
201
201
|
</PopupProvider>
|
202
202
|
</NotificationsProvider>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"
|
1
|
+
var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
@@ -47,20 +47,14 @@ export var avatarRoot = function avatarRoot(Root) {
|
|
47
47
|
_props$focused = props.focused,
|
48
48
|
focused = _props$focused === void 0 ? true : _props$focused,
|
49
49
|
isScalable = props.isScalable,
|
50
|
-
ariaLabelProp = props['aria-label'],
|
51
50
|
rest = _objectWithoutProperties(props, _excluded);
|
52
51
|
var initials = useMemo(function () {
|
53
52
|
return getInitialsForName(name);
|
54
53
|
}, [name]);
|
55
|
-
var ariaLabel = ariaLabelProp;
|
56
|
-
if ((rest === null || rest === void 0 ? void 0 : rest.role) === 'button') {
|
57
|
-
ariaLabel = !ariaLabel || ariaLabel.trim() === '' ? name : ariaLabel;
|
58
|
-
}
|
59
54
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
60
55
|
ref: ref,
|
61
56
|
size: avatarSize,
|
62
57
|
className: cx(classes.avatarItem, className),
|
63
|
-
"aria-label": ariaLabel,
|
64
58
|
focused: focused
|
65
59
|
}, rest), /*#__PURE__*/React.createElement(Wrapper, {
|
66
60
|
isScalable: isScalable
|
package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx
CHANGED
@@ -33,56 +33,40 @@ export const Default: Story = {
|
|
33
33
|
|
34
34
|
export const DynamicSize: Story = {
|
35
35
|
args: { totalCount: 10, visibleCount: 3 },
|
36
|
-
render: (
|
37
|
-
const itemLength = totalCount;
|
36
|
+
render: (args: ComponentProps<typeof AvatarGroup>) => {
|
37
|
+
const itemLength = args.totalCount;
|
38
38
|
|
39
39
|
return (
|
40
40
|
<AvatarGroup {...args}>
|
41
|
-
{Array(visibleCount)
|
41
|
+
{Array(args.visibleCount)
|
42
42
|
.fill(true)
|
43
43
|
.map((_, index) => (
|
44
|
-
<Avatar size="xxl"
|
44
|
+
<Avatar size="xxl" customText={index + 1} />
|
45
45
|
))}
|
46
46
|
|
47
|
-
{itemLength > visibleCount &&
|
47
|
+
{itemLength > args.visibleCount && (
|
48
|
+
<Avatar size="xxl" customText={`+${itemLength - args.visibleCount}`} />
|
49
|
+
)}
|
48
50
|
</AvatarGroup>
|
49
51
|
);
|
50
52
|
},
|
51
53
|
};
|
52
54
|
|
53
|
-
const list = [
|
54
|
-
{
|
55
|
-
name: 'Илья Муромец',
|
56
|
-
},
|
57
|
-
{
|
58
|
-
name: 'Алеша Попович',
|
59
|
-
},
|
60
|
-
{
|
61
|
-
name: 'Добрыня Никитич',
|
62
|
-
},
|
63
|
-
{
|
64
|
-
name: 'Микула Селянинович',
|
65
|
-
},
|
66
|
-
{
|
67
|
-
name: 'Ставр Годинович',
|
68
|
-
},
|
69
|
-
];
|
70
|
-
|
71
55
|
export const Accessibility: Story = {
|
72
56
|
render: (args: ComponentProps<typeof AvatarGroup>) => {
|
73
57
|
return (
|
74
58
|
<AvatarGroup {...args}>
|
75
|
-
{
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
59
|
+
{Array(5)
|
60
|
+
.fill(true)
|
61
|
+
.map(() => (
|
62
|
+
<Avatar
|
63
|
+
role="button"
|
64
|
+
tabIndex={0}
|
65
|
+
focused
|
66
|
+
size="xxl"
|
67
|
+
url="https://avatars.githubusercontent.com/u/1813468?v=4"
|
68
|
+
/>
|
69
|
+
))}
|
86
70
|
</AvatarGroup>
|
87
71
|
);
|
88
72
|
},
|
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { badgeTokens } from '../../../../components/Badge';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
|
11
11
|
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
|
12
12
|
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
|
13
13
|
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
|
@@ -18,7 +18,7 @@ const meta: Meta<typeof Badge> = {
|
|
18
18
|
},
|
19
19
|
},
|
20
20
|
view: {
|
21
|
-
options: ['
|
21
|
+
options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
|
22
22
|
control: {
|
23
23
|
type: 'select',
|
24
24
|
},
|
@@ -43,7 +43,7 @@ const BellIcon = (props) => (
|
|
43
43
|
export const Default: Story = {
|
44
44
|
args: {
|
45
45
|
text: 'Hello',
|
46
|
-
view: '
|
46
|
+
view: 'default',
|
47
47
|
size: 'm',
|
48
48
|
pilled: false,
|
49
49
|
transparent: false,
|
@@ -2,13 +2,13 @@ import { css } from 'styled-components';
|
|
2
2
|
import { buttonTokens } from '../../../../components/Button';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
focused: 'true',
|
7
7
|
size: 'm'
|
8
8
|
},
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
|
-
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
12
12
|
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
13
13
|
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
14
14
|
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|