@salutejs/plasma-new-hope 0.184.0-canary.1539.11687316067.0 → 0.184.0-canary.1540.11688781632.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Switch/Switch.css +7 -11
- package/cjs/components/Switch/Switch.js +7 -16
- package/cjs/components/Switch/Switch.js.map +1 -1
- package/cjs/components/Switch/Switch.styles.js +4 -16
- package/cjs/components/Switch/Switch.styles.js.map +1 -1
- package/cjs/components/Switch/Switch.styles_1kk0qzz.css +4 -0
- package/cjs/components/Switch/Switch.tokens.js +0 -11
- package/cjs/components/Switch/Switch.tokens.js.map +1 -1
- package/cjs/components/Switch/_focused/base.js +1 -1
- package/{es/components/Switch/_focused/base_sz3n0x.css → cjs/components/Switch/_focused/base_j4murk.css} +1 -1
- package/cjs/components/Switch/_size/base.js +1 -1
- package/cjs/components/Switch/_size/base.js.map +1 -1
- package/cjs/components/Switch/_size/base_1rjzpi4.css +1 -0
- package/cjs/components/Switch/_view/base.js +1 -1
- package/cjs/components/Switch/_view/base.js.map +1 -1
- package/cjs/components/Switch/_view/base_1mtyz12.css +1 -0
- package/cjs/index.css +7 -11
- package/emotion/cjs/components/Switch/Switch.js +8 -17
- package/emotion/cjs/components/Switch/Switch.styles.js +5 -21
- package/emotion/cjs/components/Switch/Switch.template-doc.mdx +1 -37
- package/emotion/cjs/components/Switch/Switch.tokens.js +0 -11
- package/emotion/cjs/components/Switch/_size/base.js +1 -1
- package/emotion/cjs/components/Switch/_view/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +4 -11
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +4 -11
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
- package/emotion/es/components/Switch/Switch.js +4 -13
- package/emotion/es/components/Switch/Switch.styles.js +4 -20
- package/emotion/es/components/Switch/Switch.template-doc.mdx +1 -37
- package/emotion/es/components/Switch/Switch.tokens.js +0 -11
- package/emotion/es/components/Switch/_size/base.js +2 -2
- package/emotion/es/components/Switch/_view/base.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +4 -11
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
- package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +4 -11
- package/emotion/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
- package/es/components/Switch/Switch.css +7 -11
- package/es/components/Switch/Switch.js +8 -17
- package/es/components/Switch/Switch.js.map +1 -1
- package/es/components/Switch/Switch.styles.js +5 -15
- package/es/components/Switch/Switch.styles.js.map +1 -1
- package/es/components/Switch/Switch.styles_1kk0qzz.css +4 -0
- package/es/components/Switch/Switch.tokens.js +0 -11
- package/es/components/Switch/Switch.tokens.js.map +1 -1
- package/es/components/Switch/_focused/base.js +1 -1
- package/{cjs/components/Switch/_focused/base_sz3n0x.css → es/components/Switch/_focused/base_j4murk.css} +1 -1
- package/es/components/Switch/_size/base.js +1 -1
- package/es/components/Switch/_size/base.js.map +1 -1
- package/es/components/Switch/_size/base_1rjzpi4.css +1 -0
- package/es/components/Switch/_view/base.js +1 -1
- package/es/components/Switch/_view/base.js.map +1 -1
- package/es/components/Switch/_view/base_1mtyz12.css +1 -0
- package/es/index.css +7 -11
- package/package.json +4 -4
- package/styled-components/cjs/components/Switch/Switch.js +8 -17
- package/styled-components/cjs/components/Switch/Switch.styles.js +5 -11
- package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +1 -37
- package/styled-components/cjs/components/Switch/Switch.tokens.js +0 -11
- package/styled-components/cjs/components/Switch/_size/base.js +1 -1
- package/styled-components/cjs/components/Switch/_view/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +2 -9
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +2 -9
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
- package/styled-components/es/components/Switch/Switch.js +4 -13
- package/styled-components/es/components/Switch/Switch.styles.js +4 -10
- package/styled-components/es/components/Switch/Switch.template-doc.mdx +1 -37
- package/styled-components/es/components/Switch/Switch.tokens.js +0 -11
- package/styled-components/es/components/Switch/_size/base.js +2 -2
- package/styled-components/es/components/Switch/_view/base.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +2 -9
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +2 -9
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
- package/types/components/Switch/Switch.d.ts +0 -3
- package/types/components/Switch/Switch.d.ts.map +1 -1
- package/types/components/Switch/Switch.styles.d.ts +0 -2
- package/types/components/Switch/Switch.styles.d.ts.map +1 -1
- package/types/components/Switch/Switch.tokens.d.ts +0 -9
- package/types/components/Switch/Switch.tokens.d.ts.map +1 -1
- package/types/components/Switch/Switch.types.d.ts +2 -10
- package/types/components/Switch/Switch.types.d.ts.map +1 -1
- package/types/components/Switch/_size/base.d.ts.map +1 -1
- package/types/components/Switch/_view/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts +0 -7
- package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.d.ts +0 -6
- package/types/examples/plasma_b2c/components/Switch/Switch.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.config.d.ts +0 -7
- package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.d.ts +0 -6
- package/types/examples/plasma_web/components/Switch/Switch.d.ts.map +1 -1
- package/cjs/components/Switch/Switch.styles_bei7bh.css +0 -6
- package/cjs/components/Switch/_size/base_1tcl212.css +0 -1
- package/cjs/components/Switch/_toggleSize/base.js +0 -9
- package/cjs/components/Switch/_toggleSize/base.js.map +0 -1
- package/cjs/components/Switch/_toggleSize/base_6i0904.css +0 -1
- package/cjs/components/Switch/_view/base_yxkf3s.css +0 -1
- package/emotion/cjs/components/Switch/_toggleSize/base.js +0 -10
- package/emotion/es/components/Switch/_toggleSize/base.js +0 -4
- package/es/components/Switch/Switch.styles_bei7bh.css +0 -6
- package/es/components/Switch/_size/base_1tcl212.css +0 -1
- package/es/components/Switch/_toggleSize/base.js +0 -5
- package/es/components/Switch/_toggleSize/base.js.map +0 -1
- package/es/components/Switch/_toggleSize/base_6i0904.css +0 -1
- package/es/components/Switch/_view/base_yxkf3s.css +0 -1
- package/styled-components/cjs/components/Switch/_toggleSize/base.js +0 -10
- package/styled-components/es/components/Switch/_toggleSize/base.js +0 -4
- package/types/components/Switch/_toggleSize/base.d.ts +0 -2
- package/types/components/Switch/_toggleSize/base.d.ts.map +0 -1
@@ -10,22 +10,15 @@ var config = exports.config = {
|
|
10
10
|
defaults: {
|
11
11
|
view: 'default',
|
12
12
|
size: 'm',
|
13
|
-
toggleSize: 'l',
|
14
13
|
labelPosition: 'before',
|
15
14
|
focused: 'true'
|
16
15
|
},
|
17
16
|
variations: {
|
18
17
|
size: {
|
19
|
-
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
|
21
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
|
22
|
-
},
|
23
|
-
toggleSize: {
|
24
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
|
25
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
|
18
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
|
26
19
|
},
|
27
20
|
view: {
|
28
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--
|
21
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
|
29
22
|
},
|
30
23
|
disabled: {
|
31
24
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
|
@@ -18,7 +18,7 @@ const meta: Meta<SwitchProps> = {
|
|
18
18
|
decorators: [WithTheme],
|
19
19
|
component: Switch,
|
20
20
|
argTypes: {
|
21
|
-
...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
|
21
|
+
...argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
|
22
22
|
labelPosition: {
|
23
23
|
options: ['before', 'after'],
|
24
24
|
control: { type: 'select' },
|
@@ -26,7 +26,6 @@ const meta: Meta<SwitchProps> = {
|
|
26
26
|
},
|
27
27
|
args: {
|
28
28
|
label: 'Label',
|
29
|
-
description: 'Description',
|
30
29
|
labelPosition: 'before',
|
31
30
|
},
|
32
31
|
};
|
@@ -65,10 +64,5 @@ const StoryDefault = (args: SwitchProps) => {
|
|
65
64
|
};
|
66
65
|
|
67
66
|
export const Default: StoryObj<SwitchProps> = {
|
68
|
-
args: {
|
69
|
-
size: 'm',
|
70
|
-
toggleSize: 'l',
|
71
|
-
disabled: false,
|
72
|
-
},
|
73
67
|
render: (args) => <StoryDefault {...args} />,
|
74
68
|
};
|
@@ -10,22 +10,15 @@ var config = exports.config = {
|
|
10
10
|
defaults: {
|
11
11
|
view: 'default',
|
12
12
|
size: 'm',
|
13
|
-
toggleSize: 'l',
|
14
13
|
labelPosition: 'before',
|
15
14
|
focused: 'true'
|
16
15
|
},
|
17
16
|
variations: {
|
18
17
|
size: {
|
19
|
-
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
|
21
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
|
22
|
-
},
|
23
|
-
toggleSize: {
|
24
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
|
25
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
|
18
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
|
26
19
|
},
|
27
20
|
view: {
|
28
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--
|
21
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
|
29
22
|
},
|
30
23
|
disabled: {
|
31
24
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
|
@@ -17,17 +17,9 @@ const meta: Meta<SwitchProps> = {
|
|
17
17
|
title: 'plasma_web/Switch',
|
18
18
|
decorators: [WithTheme],
|
19
19
|
component: Switch,
|
20
|
-
argTypes:
|
21
|
-
...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
|
22
|
-
labelPosition: {
|
23
|
-
options: ['before', 'after'],
|
24
|
-
control: { type: 'select' },
|
25
|
-
},
|
26
|
-
},
|
20
|
+
argTypes: argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
|
27
21
|
args: {
|
28
22
|
label: 'Label',
|
29
|
-
description: 'Description',
|
30
|
-
labelPosition: 'before',
|
31
23
|
},
|
32
24
|
};
|
33
25
|
|
@@ -65,10 +57,5 @@ const StoryDefault = (args: SwitchProps) => {
|
|
65
57
|
};
|
66
58
|
|
67
59
|
export const Default: StoryObj<SwitchProps> = {
|
68
|
-
args: {
|
69
|
-
size: 'm',
|
70
|
-
toggleSize: 'l',
|
71
|
-
disabled: false,
|
72
|
-
},
|
73
60
|
render: (args) => <StoryDefault {...args} />,
|
74
61
|
};
|
@@ -1,28 +1,25 @@
|
|
1
1
|
var _StyledTrigger;
|
2
|
-
var _excluded = ["size", "
|
2
|
+
var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
4
|
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; }
|
5
5
|
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; }
|
6
6
|
import React, { forwardRef } from 'react';
|
7
7
|
import { base as sizeCSS } from '../Switch/_size/base';
|
8
|
-
import { base as toggleSizeCSS } from '../Switch/_toggleSize/base';
|
9
8
|
import { base as viewCSS } from '../Switch/_view/base';
|
10
9
|
import { base as focusedCSS } from '../Switch/_focused/base';
|
11
10
|
import { base as disabledCSS } from '../Switch/_disabled/base';
|
12
11
|
import { cx } from '../../utils';
|
13
|
-
import {
|
12
|
+
import { StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles';
|
14
13
|
import { classes } from './Switch.tokens';
|
15
14
|
export var switchRoot = function switchRoot(Root) {
|
16
15
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
17
16
|
var size = props.size,
|
18
|
-
toggleSize = props.toggleSize,
|
19
17
|
view = props.view,
|
20
18
|
focused = props.focused,
|
21
19
|
outlined = props.outlined,
|
22
20
|
disabled = props.disabled,
|
23
21
|
labelPosition = props.labelPosition,
|
24
22
|
label = props.label,
|
25
|
-
description = props.description,
|
26
23
|
id = props.id,
|
27
24
|
style = props.style,
|
28
25
|
className = props.className,
|
@@ -34,15 +31,12 @@ export var switchRoot = function switchRoot(Root) {
|
|
34
31
|
return /*#__PURE__*/React.createElement(Root, {
|
35
32
|
view: view,
|
36
33
|
size: size,
|
37
|
-
toggleSize: toggleSize,
|
38
34
|
disabled: disabled,
|
39
35
|
focused: focused !== null && focused !== void 0 ? focused : outlined,
|
40
36
|
labelPosition: labelPosition,
|
41
37
|
id: id,
|
42
38
|
style: style,
|
43
|
-
className: cx(className)
|
44
|
-
}, /*#__PURE__*/React.createElement(StyledContent, {
|
45
|
-
className: cx(classes["".concat(labelPosition, "SwitchLabelPosition")])
|
39
|
+
className: cx(className, classes["".concat(labelPosition, "SwitchLabelPosition")])
|
46
40
|
}, /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
|
47
41
|
ref: ref,
|
48
42
|
role: "switch",
|
@@ -55,7 +49,7 @@ export var switchRoot = function switchRoot(Root) {
|
|
55
49
|
tabIndex: -1
|
56
50
|
}, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/React.createElement(StyledTrigger, {
|
57
51
|
"aria-hidden": true
|
58
|
-
})))
|
52
|
+
})));
|
59
53
|
});
|
60
54
|
};
|
61
55
|
export var switchConfig = {
|
@@ -70,9 +64,6 @@ export var switchConfig = {
|
|
70
64
|
view: {
|
71
65
|
css: viewCSS
|
72
66
|
},
|
73
|
-
toggleSize: {
|
74
|
-
css: toggleSizeCSS
|
75
|
-
},
|
76
67
|
disabled: {
|
77
68
|
css: disabledCSS,
|
78
69
|
attrs: true
|
@@ -2,19 +2,13 @@ import styled from 'styled-components';
|
|
2
2
|
import { css } from 'styled-components';
|
3
3
|
import { applyEllipsis } from '../../mixins';
|
4
4
|
import { classes, tokens } from './Switch.tokens';
|
5
|
-
export var base = /*#__PURE__*/css(["position:relative;display:flex;
|
6
|
-
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
7
|
-
componentId: "plasma-new-hope__sc-i4fgom-0"
|
8
|
-
})(["width:100%;position:relative;display:flex;align-items:center;&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
|
9
|
-
export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
|
10
|
-
componentId: "plasma-new-hope__sc-i4fgom-1"
|
11
|
-
})(["position:relative;"]);
|
5
|
+
export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
|
12
6
|
export var StyledInput = /*#__PURE__*/styled.input.withConfig({
|
13
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
7
|
+
componentId: "plasma-new-hope__sc-i4fgom-0"
|
14
8
|
})(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
|
15
9
|
export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
|
16
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
10
|
+
componentId: "plasma-new-hope__sc-i4fgom-1"
|
17
11
|
})(["user-select:none;", ""], /*#__PURE__*/applyEllipsis());
|
18
12
|
export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
|
19
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
13
|
+
componentId: "plasma-new-hope__sc-i4fgom-2"
|
20
14
|
})(["position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}", ":checked ~ &::after{right:0;left:auto;}"], StyledInput);
|
@@ -18,43 +18,7 @@ import { Switch } from '@salutejs/{{ package }}';
|
|
18
18
|
|
19
19
|
export function App() {
|
20
20
|
return (
|
21
|
-
<Switch
|
22
|
-
);
|
23
|
-
}
|
24
|
-
```
|
25
|
-
|
26
|
-
## Примеры
|
27
|
-
|
28
|
-
### Размер Switch
|
29
|
-
Размер компонента задается с помощью свойства `size`.
|
30
|
-
|
31
|
-
```tsx live
|
32
|
-
import React from 'react';
|
33
|
-
import { Button } from '@salutejs/{{ package }}';
|
34
|
-
|
35
|
-
export function App() {
|
36
|
-
return (
|
37
|
-
<div>
|
38
|
-
<Switch size="s" description="Описание переключателя" label="Переключатель" defaultChecked />
|
39
|
-
<Switch size="m" description="Описание переключателя" label="Переключатель" defaultChecked />
|
40
|
-
<Switch size="l" description="Описание переключателя" label="Переключатель" defaultChecked />
|
41
|
-
</div>
|
42
|
-
);
|
43
|
-
}
|
44
|
-
```
|
45
|
-
|
46
|
-
Размер переключателя задается с помощью свойства `toggleSize`.
|
47
|
-
|
48
|
-
```tsx live
|
49
|
-
import React from 'react';
|
50
|
-
import { Button } from '@salutejs/{{ package }}';
|
51
|
-
|
52
|
-
export function App() {
|
53
|
-
return (
|
54
|
-
<div style=\{{ alignItems: "center" }}>
|
55
|
-
<Switch toggleSize="s" label="Переключатель" defaultChecked />
|
56
|
-
<Switch toggleSize="l" label="Переключатель" defaultChecked />
|
57
|
-
</div>
|
21
|
+
<Switch label="Переключатель" defaultChecked />
|
58
22
|
);
|
59
23
|
}
|
60
24
|
```
|
@@ -5,22 +5,11 @@ export var tokens = {
|
|
5
5
|
fontWeight: '--plasma-switch-font-weight',
|
6
6
|
letterSpacing: '--plasma-switch-letter-spacing',
|
7
7
|
lineHeight: '--plasma-switch-line-height',
|
8
|
-
/* Токены description */
|
9
|
-
descriptionFontFamily: '--plasma-switch-description-font-family',
|
10
|
-
descriptionFontStyle: '--plasma-switch-description-font-style',
|
11
|
-
descriptionFontSize: '--plasma-switch-description-font-size',
|
12
|
-
descriptionFontWeight: '--plasma-switch-description-font-weight',
|
13
|
-
descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
|
14
|
-
descriptionLineHeight: '--plasma-switch-description-line-height',
|
15
8
|
/* Цвет подписи */
|
16
9
|
labelColor: '--plasma-switch__label-color',
|
17
10
|
labelOffset: '--plasma-switch__label-offset',
|
18
|
-
/* Цвет описания */
|
19
|
-
descriptionColor: '--plasma-switch__description-color',
|
20
|
-
descriptionOffset: '--plasma-switch__description-offset',
|
21
11
|
/** Прозрачность для всего компонента в состоянии disabled */
|
22
12
|
disabledOpacity: '--plasma-switch-disabled-opacity',
|
23
|
-
verticalGap: '--plasma-switch-vertical-gap',
|
24
13
|
trackWidth: '--plasma-switch__track-width',
|
25
14
|
trackHeight: '--plasma-switch__track-height',
|
26
15
|
trackBorderRadius: '--plasma-switch__track-border-radius',
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../Switch.tokens';
|
3
|
-
import {
|
4
|
-
export var base = /*#__PURE__*/css(["
|
3
|
+
import { StyledLabel, StyledTrigger } from '../Switch.styles';
|
4
|
+
export var base = /*#__PURE__*/css(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(", ",0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledLabel, tokens.labelOffsetPrivate, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../Switch.tokens';
|
3
|
-
import { StyledTrigger, StyledInput
|
4
|
-
export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"
|
3
|
+
import { StyledTrigger, StyledInput } from '../Switch.styles';
|
4
|
+
export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow);
|
@@ -4,22 +4,15 @@ export var config = {
|
|
4
4
|
defaults: {
|
5
5
|
view: 'default',
|
6
6
|
size: 'm',
|
7
|
-
toggleSize: 'l',
|
8
7
|
labelPosition: 'before',
|
9
8
|
focused: 'true'
|
10
9
|
},
|
11
10
|
variations: {
|
12
11
|
size: {
|
13
|
-
|
14
|
-
m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
|
15
|
-
l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset)
|
16
|
-
},
|
17
|
-
toggleSize: {
|
18
|
-
l: /*#__PURE__*/css(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale),
|
19
|
-
s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
|
12
|
+
m: /*#__PURE__*/css(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale, switchTokens.labelOffset)
|
20
13
|
},
|
21
14
|
view: {
|
22
|
-
"default": /*#__PURE__*/css(["", ":var(--
|
15
|
+
"default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
|
23
16
|
},
|
24
17
|
disabled: {
|
25
18
|
"true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)
|
@@ -18,7 +18,7 @@ const meta: Meta<SwitchProps> = {
|
|
18
18
|
decorators: [WithTheme],
|
19
19
|
component: Switch,
|
20
20
|
argTypes: {
|
21
|
-
...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
|
21
|
+
...argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
|
22
22
|
labelPosition: {
|
23
23
|
options: ['before', 'after'],
|
24
24
|
control: { type: 'select' },
|
@@ -26,7 +26,6 @@ const meta: Meta<SwitchProps> = {
|
|
26
26
|
},
|
27
27
|
args: {
|
28
28
|
label: 'Label',
|
29
|
-
description: 'Description',
|
30
29
|
labelPosition: 'before',
|
31
30
|
},
|
32
31
|
};
|
@@ -65,10 +64,5 @@ const StoryDefault = (args: SwitchProps) => {
|
|
65
64
|
};
|
66
65
|
|
67
66
|
export const Default: StoryObj<SwitchProps> = {
|
68
|
-
args: {
|
69
|
-
size: 'm',
|
70
|
-
toggleSize: 'l',
|
71
|
-
disabled: false,
|
72
|
-
},
|
73
67
|
render: (args) => <StoryDefault {...args} />,
|
74
68
|
};
|
@@ -4,22 +4,15 @@ export var config = {
|
|
4
4
|
defaults: {
|
5
5
|
view: 'default',
|
6
6
|
size: 'm',
|
7
|
-
toggleSize: 'l',
|
8
7
|
labelPosition: 'before',
|
9
8
|
focused: 'true'
|
10
9
|
},
|
11
10
|
variations: {
|
12
11
|
size: {
|
13
|
-
|
14
|
-
m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
|
15
|
-
l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset)
|
16
|
-
},
|
17
|
-
toggleSize: {
|
18
|
-
l: /*#__PURE__*/css(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale),
|
19
|
-
s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
|
12
|
+
m: /*#__PURE__*/css(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale, switchTokens.labelOffset)
|
20
13
|
},
|
21
14
|
view: {
|
22
|
-
"default": /*#__PURE__*/css(["", ":var(--
|
15
|
+
"default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
|
23
16
|
},
|
24
17
|
disabled: {
|
25
18
|
"true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)
|
@@ -17,17 +17,9 @@ const meta: Meta<SwitchProps> = {
|
|
17
17
|
title: 'plasma_web/Switch',
|
18
18
|
decorators: [WithTheme],
|
19
19
|
component: Switch,
|
20
|
-
argTypes:
|
21
|
-
...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
|
22
|
-
labelPosition: {
|
23
|
-
options: ['before', 'after'],
|
24
|
-
control: { type: 'select' },
|
25
|
-
},
|
26
|
-
},
|
20
|
+
argTypes: argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
|
27
21
|
args: {
|
28
22
|
label: 'Label',
|
29
|
-
description: 'Description',
|
30
|
-
labelPosition: 'before',
|
31
23
|
},
|
32
24
|
};
|
33
25
|
|
@@ -65,10 +57,5 @@ const StoryDefault = (args: SwitchProps) => {
|
|
65
57
|
};
|
66
58
|
|
67
59
|
export const Default: StoryObj<SwitchProps> = {
|
68
|
-
args: {
|
69
|
-
size: 'm',
|
70
|
-
toggleSize: 'l',
|
71
|
-
disabled: false,
|
72
|
-
},
|
73
60
|
render: (args) => <StoryDefault {...args} />,
|
74
61
|
};
|
@@ -14,9 +14,6 @@ export declare const switchConfig: {
|
|
14
14
|
view: {
|
15
15
|
css: import("@linaria/core").LinariaClassName;
|
16
16
|
};
|
17
|
-
toggleSize: {
|
18
|
-
css: import("@linaria/core").LinariaClassName;
|
19
|
-
};
|
20
17
|
disabled: {
|
21
18
|
css: import("@linaria/core").LinariaClassName;
|
22
19
|
attrs: boolean;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,eAAO,MAAM,UAAU,SAAU,UAAU,gBAAgB,EAAE,WAAW,CAAC,yFAoDnE,CAAC;AAEP,eAAO,MAAM,YAAY;;;;mBAtDQ,UAAU,gBAAgB,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;CA8ExE,CAAC"}
|
@@ -1,7 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
export declare const base: import("@linaria/core").LinariaClassName;
|
3
|
-
export declare const StyledContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
4
|
-
export declare const StyledDescription: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
5
3
|
export declare const StyledInput: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Record<never, unknown>>;
|
6
4
|
export declare const StyledLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
|
7
5
|
export declare const StyledTrigger: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,IAAI,0CAwBhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KASvB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAKvB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAmBzB,CAAC"}
|
@@ -5,19 +5,10 @@ export declare const tokens: {
|
|
5
5
|
fontWeight: string;
|
6
6
|
letterSpacing: string;
|
7
7
|
lineHeight: string;
|
8
|
-
descriptionFontFamily: string;
|
9
|
-
descriptionFontStyle: string;
|
10
|
-
descriptionFontSize: string;
|
11
|
-
descriptionFontWeight: string;
|
12
|
-
descriptionLetterSpacing: string;
|
13
|
-
descriptionLineHeight: string;
|
14
8
|
labelColor: string;
|
15
9
|
labelOffset: string;
|
16
|
-
descriptionColor: string;
|
17
|
-
descriptionOffset: string;
|
18
10
|
/** Прозрачность для всего компонента в состоянии disabled */
|
19
11
|
disabledOpacity: string;
|
20
|
-
verticalGap: string;
|
21
12
|
trackWidth: string;
|
22
13
|
trackHeight: string;
|
23
14
|
trackBorderRadius: string;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Switch.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;IAYf,6DAA6D;;;;;;;;;;;;;;;;;;CAyBhE,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAGnB,CAAC"}
|
@@ -4,24 +4,16 @@ export interface SwitchPropsPropsBase {
|
|
4
4
|
* Метка-подпись к элементу
|
5
5
|
*/
|
6
6
|
label?: string;
|
7
|
-
/**
|
8
|
-
* Дополнительное описание
|
9
|
-
*/
|
10
|
-
description?: string;
|
11
7
|
}
|
12
8
|
export interface SwitchPropsVariations extends SwitchPropsPropsBase {
|
13
9
|
/**
|
14
|
-
* Размер
|
10
|
+
* Размер контрола.
|
15
11
|
*/
|
16
12
|
size?: string;
|
17
13
|
/**
|
18
|
-
* Вид
|
14
|
+
* Вид контрола.
|
19
15
|
*/
|
20
16
|
view?: string;
|
21
|
-
/**
|
22
|
-
* Размер toggle.
|
23
|
-
*/
|
24
|
-
toggleSize?: string;
|
25
17
|
/**
|
26
18
|
* Расположение подпись
|
27
19
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IAC/D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAEnC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB;CAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CA8BhB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/_view/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/_view/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAyBhB,CAAC"}
|
@@ -2,19 +2,12 @@ export declare const config: {
|
|
2
2
|
defaults: {
|
3
3
|
view: string;
|
4
4
|
size: string;
|
5
|
-
toggleSize: string;
|
6
5
|
labelPosition: string;
|
7
6
|
focused: string;
|
8
7
|
};
|
9
8
|
variations: {
|
10
9
|
size: {
|
11
|
-
s: import("@linaria/core").LinariaClassName;
|
12
10
|
m: import("@linaria/core").LinariaClassName;
|
13
|
-
l: import("@linaria/core").LinariaClassName;
|
14
|
-
};
|
15
|
-
toggleSize: {
|
16
|
-
l: import("@linaria/core").LinariaClassName;
|
17
|
-
s: import("@linaria/core").LinariaClassName;
|
18
11
|
};
|
19
12
|
view: {
|
20
13
|
default: import("@linaria/core").LinariaClassName;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Switch.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CAgDlB,CAAC"}
|
@@ -1,13 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
export declare const Switch: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
|
3
3
|
size: {
|
4
|
-
s: import("@linaria/core").LinariaClassName;
|
5
4
|
m: import("@linaria/core").LinariaClassName;
|
6
|
-
l: import("@linaria/core").LinariaClassName;
|
7
|
-
};
|
8
|
-
toggleSize: {
|
9
|
-
l: import("@linaria/core").LinariaClassName;
|
10
|
-
s: import("@linaria/core").LinariaClassName;
|
11
5
|
};
|
12
6
|
view: {
|
13
7
|
default: import("@linaria/core").LinariaClassName;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,MAAM;;;;;;;;;;;;;2GAA0B,CAAC"}
|