@salutejs/plasma-new-hope 0.184.0-canary.1539.11687316067.0 → 0.184.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +3 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/Range/Range.js +7 -4
- package/cjs/components/Range/Range.js.map +1 -1
- 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/DatePicker/RangeDate/RangeDate.js +3 -1
- package/emotion/cjs/components/Range/Range.js +7 -4
- 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/DatePicker/RangeDate/RangeDate.js +3 -1
- package/emotion/es/components/Range/Range.js +7 -4
- 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/DatePicker/RangeDate/RangeDate.js +3 -1
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/Range/Range.js +7 -4
- package/es/components/Range/Range.js.map +1 -1
- 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 +2 -2
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +3 -1
- package/styled-components/cjs/components/Range/Range.js +7 -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/DatePicker/RangeDate/RangeDate.js +3 -1
- package/styled-components/es/components/Range/Range.js +7 -4
- 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/DatePicker/RangeDate/RangeDate.d.ts +2 -0
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts +3 -0
- package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts.map +1 -1
- package/types/components/Range/Range.d.ts.map +1 -1
- package/types/components/Range/Range.types.d.ts +4 -0
- package/types/components/Range/Range.types.d.ts.map +1 -1
- 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/DatePicker/DatePicker.d.ts +1 -0
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Range/Range.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Range/Range.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/DatePicker/DatePicker.d.ts +1 -0
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Range/Range.d.ts +3 -0
- package/types/examples/plasma_web/components/Range/Range.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
@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports.switchRoot = exports.switchConfig = void 0;
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
9
|
var _base = /*#__PURE__*/require("../Switch/_size/base");
|
10
|
-
var _base2 = /*#__PURE__*/require("../Switch/
|
11
|
-
var _base3 = /*#__PURE__*/require("../Switch/
|
12
|
-
var _base4 = /*#__PURE__*/require("../Switch/
|
13
|
-
var _base5 = /*#__PURE__*/require("../Switch/_disabled/base");
|
10
|
+
var _base2 = /*#__PURE__*/require("../Switch/_view/base");
|
11
|
+
var _base3 = /*#__PURE__*/require("../Switch/_focused/base");
|
12
|
+
var _base4 = /*#__PURE__*/require("../Switch/_disabled/base");
|
14
13
|
var _utils = /*#__PURE__*/require("../../utils");
|
15
14
|
var _Switch = /*#__PURE__*/require("./Switch.styles");
|
16
15
|
var _Switch2 = /*#__PURE__*/require("./Switch.tokens");
|
17
16
|
var _StyledTrigger;
|
18
|
-
var _excluded = ["size", "
|
17
|
+
var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
|
19
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
20
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
21
20
|
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); }
|
@@ -24,14 +23,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
24
23
|
var switchRoot = exports.switchRoot = function switchRoot(Root) {
|
25
24
|
return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
26
25
|
var size = props.size,
|
27
|
-
toggleSize = props.toggleSize,
|
28
26
|
view = props.view,
|
29
27
|
focused = props.focused,
|
30
28
|
outlined = props.outlined,
|
31
29
|
disabled = props.disabled,
|
32
30
|
labelPosition = props.labelPosition,
|
33
31
|
label = props.label,
|
34
|
-
description = props.description,
|
35
32
|
id = props.id,
|
36
33
|
style = props.style,
|
37
34
|
className = props.className,
|
@@ -43,15 +40,12 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
|
|
43
40
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
44
41
|
view: view,
|
45
42
|
size: size,
|
46
|
-
toggleSize: toggleSize,
|
47
43
|
disabled: disabled,
|
48
44
|
focused: focused !== null && focused !== void 0 ? focused : outlined,
|
49
45
|
labelPosition: labelPosition,
|
50
46
|
id: id,
|
51
47
|
style: style,
|
52
|
-
className: (0, _utils.cx)(className)
|
53
|
-
}, /*#__PURE__*/_react["default"].createElement(_Switch.StyledContent, {
|
54
|
-
className: (0, _utils.cx)(_Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
|
48
|
+
className: (0, _utils.cx)(className, _Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
|
55
49
|
}, /*#__PURE__*/_react["default"].createElement(_Switch.StyledInput, _extends({}, rest, {
|
56
50
|
ref: ref,
|
57
51
|
role: "switch",
|
@@ -64,7 +58,7 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
|
|
64
58
|
tabIndex: -1
|
65
59
|
}, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/_react["default"].createElement(_Switch.StyledTrigger, {
|
66
60
|
"aria-hidden": true
|
67
|
-
})))
|
61
|
+
})));
|
68
62
|
});
|
69
63
|
};
|
70
64
|
var switchConfig = exports.switchConfig = {
|
@@ -77,17 +71,14 @@ var switchConfig = exports.switchConfig = {
|
|
77
71
|
css: _base.base
|
78
72
|
},
|
79
73
|
view: {
|
80
|
-
css: _base3.base
|
81
|
-
},
|
82
|
-
toggleSize: {
|
83
74
|
css: _base2.base
|
84
75
|
},
|
85
76
|
disabled: {
|
86
|
-
css:
|
77
|
+
css: _base4.base,
|
87
78
|
attrs: true
|
88
79
|
},
|
89
80
|
focused: {
|
90
|
-
css:
|
81
|
+
css: _base3.base
|
91
82
|
}
|
92
83
|
},
|
93
84
|
defaults: {
|
@@ -4,25 +4,19 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
5
5
|
value: true
|
6
6
|
});
|
7
|
-
exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput =
|
7
|
+
exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput = void 0;
|
8
8
|
var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
|
9
9
|
var _mixins = /*#__PURE__*/require("../../mixins");
|
10
10
|
var _Switch = /*#__PURE__*/require("./Switch.tokens");
|
11
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
13
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:flex;
|
14
|
-
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
15
|
-
componentId: "plasma-new-hope__sc-i4fgom-0"
|
16
|
-
})(["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(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
|
17
|
-
var StyledDescription = exports.StyledDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
18
|
-
componentId: "plasma-new-hope__sc-i4fgom-1"
|
19
|
-
})(["position:relative;"]);
|
13
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
|
20
14
|
var StyledInput = exports.StyledInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
|
21
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
15
|
+
componentId: "plasma-new-hope__sc-i4fgom-0"
|
22
16
|
})(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
|
23
17
|
var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
24
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
18
|
+
componentId: "plasma-new-hope__sc-i4fgom-1"
|
25
19
|
})(["user-select:none;", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
26
20
|
var StyledTrigger = exports.StyledTrigger = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
27
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
21
|
+
componentId: "plasma-new-hope__sc-i4fgom-2"
|
28
22
|
})(["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
|
```
|
@@ -11,22 +11,11 @@ var tokens = exports.tokens = {
|
|
11
11
|
fontWeight: '--plasma-switch-font-weight',
|
12
12
|
letterSpacing: '--plasma-switch-letter-spacing',
|
13
13
|
lineHeight: '--plasma-switch-line-height',
|
14
|
-
/* Токены description */
|
15
|
-
descriptionFontFamily: '--plasma-switch-description-font-family',
|
16
|
-
descriptionFontStyle: '--plasma-switch-description-font-style',
|
17
|
-
descriptionFontSize: '--plasma-switch-description-font-size',
|
18
|
-
descriptionFontWeight: '--plasma-switch-description-font-weight',
|
19
|
-
descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
|
20
|
-
descriptionLineHeight: '--plasma-switch-description-line-height',
|
21
14
|
/* Цвет подписи */
|
22
15
|
labelColor: '--plasma-switch__label-color',
|
23
16
|
labelOffset: '--plasma-switch__label-offset',
|
24
|
-
/* Цвет описания */
|
25
|
-
descriptionColor: '--plasma-switch__description-color',
|
26
|
-
descriptionOffset: '--plasma-switch__description-offset',
|
27
17
|
/** Прозрачность для всего компонента в состоянии disabled */
|
28
18
|
disabledOpacity: '--plasma-switch-disabled-opacity',
|
29
|
-
verticalGap: '--plasma-switch-vertical-gap',
|
30
19
|
trackWidth: '--plasma-switch__track-width',
|
31
20
|
trackHeight: '--plasma-switch__track-height',
|
32
21
|
trackBorderRadius: '--plasma-switch__track-border-radius',
|
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Switch = /*#__PURE__*/require("../Switch.tokens");
|
9
9
|
var _Switch2 = /*#__PURE__*/require("../Switch.styles");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.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));}"], _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledLabel, _Switch.tokens.labelOffsetPrivate, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);
|
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Switch = /*#__PURE__*/require("../Switch.tokens");
|
9
9
|
var _Switch2 = /*#__PURE__*/require("../Switch.styles");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", "));}"
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", "));}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow);
|
@@ -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,4 +1,4 @@
|
|
1
|
-
var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
1
|
+
var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -26,6 +26,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
26
26
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
27
27
|
var _rangeRef$current, _rangeRef$current2;
|
28
28
|
var className = _ref.className,
|
29
|
+
autoComplete = _ref.autoComplete,
|
29
30
|
_ref$isDoubleCalendar = _ref.isDoubleCalendar,
|
30
31
|
isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
|
31
32
|
_ref$opened = _ref.opened,
|
@@ -265,6 +266,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
|
|
265
266
|
onKeyDown = _useKeyNavigation.onKeyDown;
|
266
267
|
var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
|
267
268
|
ref: rangeRef,
|
269
|
+
autoComplete: autoComplete,
|
268
270
|
dividerIcon: dividerIcon,
|
269
271
|
dividerVariant: dividerVariant,
|
270
272
|
disabled: disabled,
|
@@ -1,5 +1,5 @@
|
|
1
1
|
var _StyledDivider;
|
2
|
-
var _excluded = ["label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "firstValue", "secondValue", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "onChangeFirstValue", "onChangeSecondValue", "onSearchFirstValue", "onSearchSecondValue", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
2
|
+
var _excluded = ["autoComplete", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "firstValue", "secondValue", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "onChangeFirstValue", "onChangeSecondValue", "onSearchFirstValue", "onSearchSecondValue", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
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; }
|
@@ -15,7 +15,8 @@ import { classes } from './Range.tokens';
|
|
15
15
|
export var rangeRoot = function rangeRoot(Root) {
|
16
16
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
17
17
|
var _StyledDivider2;
|
18
|
-
var
|
18
|
+
var autoComplete = _ref.autoComplete,
|
19
|
+
label = _ref.label,
|
19
20
|
leftHelper = _ref.leftHelper,
|
20
21
|
contentLeft = _ref.contentLeft,
|
21
22
|
contentRight = _ref.contentRight,
|
@@ -107,7 +108,8 @@ export var rangeRoot = function rangeRoot(Root) {
|
|
107
108
|
onChange: handleChangeFirstValue,
|
108
109
|
onSearch: handleSearchFirstValue,
|
109
110
|
onFocus: onFocusFirstTextfield,
|
110
|
-
onBlur: onBlurFirstTextfield
|
111
|
+
onBlur: onBlurFirstTextfield,
|
112
|
+
autoComplete: autoComplete
|
111
113
|
}), Divider, /*#__PURE__*/React.createElement(StyledInput, {
|
112
114
|
ref: secondTextFieldRef,
|
113
115
|
className: cx(secondValueErrorClass, secondValueSuccessClass),
|
@@ -122,7 +124,8 @@ export var rangeRoot = function rangeRoot(Root) {
|
|
122
124
|
onChange: handleChangeSecondValue,
|
123
125
|
onSearch: handleSearchSecondValue,
|
124
126
|
onFocus: onFocusSecondTextfield,
|
125
|
-
onBlur: onBlurSecondTextfield
|
127
|
+
onBlur: onBlurSecondTextfield,
|
128
|
+
autoComplete: autoComplete
|
126
129
|
}), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
|
127
130
|
});
|
128
131
|
};
|
@@ -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);
|