@salutejs/plasma-new-hope 0.78.0-canary.1176.8921778834.0 → 0.78.0-canary.1176.8925416119.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Checkbox/Checkbox.css +8 -8
- package/cjs/components/Checkbox/Checkbox.js +3 -1
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/Checkbox/{Checkbox.styles_d1mumx.css → Checkbox.styles_1266095.css} +1 -1
- package/cjs/components/Checkbox/Checkbox.tokens.js +4 -1
- package/cjs/components/Checkbox/Checkbox.tokens.js.map +1 -1
- package/cjs/components/Checkbox/variations/_focused/base.js +1 -1
- package/cjs/components/Checkbox/variations/_focused/base.js.map +1 -1
- package/{es/components/Checkbox/variations/_focused/base_1rx10n8.css → cjs/components/Checkbox/variations/_focused/base_hr4zpz.css} +1 -1
- package/cjs/components/Radiobox/Radiobox.css +10 -10
- package/cjs/components/Radiobox/Radiobox.js +3 -1
- package/cjs/components/Radiobox/Radiobox.js.map +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/cjs/components/Radiobox/Radiobox.styles_1skfuon.css +2 -0
- package/cjs/components/Radiobox/Radiobox.tokens.js +3 -1
- package/cjs/components/Radiobox/Radiobox.tokens.js.map +1 -1
- package/cjs/components/Radiobox/variations/_focused/base.js +1 -1
- package/cjs/components/Radiobox/variations/_focused/base.js.map +1 -1
- package/{es/components/Radiobox/variations/_focused/base_25xwn7.css → cjs/components/Radiobox/variations/_focused/base_1d7o4za.css} +1 -1
- package/cjs/index.css +11 -11
- package/es/components/Checkbox/Checkbox.css +8 -8
- package/es/components/Checkbox/Checkbox.js +3 -1
- package/es/components/Checkbox/Checkbox.js.map +1 -1
- package/es/components/Checkbox/Checkbox.styles.js +1 -1
- package/es/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/es/components/Checkbox/{Checkbox.styles_d1mumx.css → Checkbox.styles_1266095.css} +1 -1
- package/es/components/Checkbox/Checkbox.tokens.js +4 -1
- package/es/components/Checkbox/Checkbox.tokens.js.map +1 -1
- package/es/components/Checkbox/variations/_focused/base.js +1 -1
- package/es/components/Checkbox/variations/_focused/base.js.map +1 -1
- package/{cjs/components/Checkbox/variations/_focused/base_1rx10n8.css → es/components/Checkbox/variations/_focused/base_hr4zpz.css} +1 -1
- package/es/components/Radiobox/Radiobox.css +10 -10
- package/es/components/Radiobox/Radiobox.js +3 -1
- package/es/components/Radiobox/Radiobox.js.map +1 -1
- package/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/es/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/es/components/Radiobox/Radiobox.styles_1skfuon.css +2 -0
- package/es/components/Radiobox/Radiobox.tokens.js +3 -1
- package/es/components/Radiobox/Radiobox.tokens.js.map +1 -1
- package/es/components/Radiobox/variations/_focused/base.js +1 -1
- package/es/components/Radiobox/variations/_focused/base.js.map +1 -1
- package/{cjs/components/Radiobox/variations/_focused/base_25xwn7.css → es/components/Radiobox/variations/_focused/base_1d7o4za.css} +1 -1
- package/es/index.css +11 -11
- package/package.json +2 -2
- package/styled-components/cjs/components/Checkbox/Checkbox.js +3 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.styles.js +1 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.tokens.js +4 -1
- package/styled-components/cjs/components/Checkbox/variations/_focused/base.js +1 -1
- package/styled-components/cjs/components/Radiobox/Radiobox.js +3 -1
- package/styled-components/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/cjs/components/Radiobox/Radiobox.tokens.js +3 -1
- package/styled-components/cjs/components/Radiobox/variations/_focused/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/styled-components/cjs/examples/plasma_web/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/es/components/Checkbox/Checkbox.js +3 -1
- package/styled-components/es/components/Checkbox/Checkbox.styles.js +1 -1
- package/styled-components/es/components/Checkbox/Checkbox.tokens.js +4 -1
- package/styled-components/es/components/Checkbox/variations/_focused/base.js +1 -1
- package/styled-components/es/components/Radiobox/Radiobox.js +3 -1
- package/styled-components/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/es/components/Radiobox/Radiobox.tokens.js +3 -1
- package/styled-components/es/components/Radiobox/variations/_focused/base.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Checkbox/Checkbox.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Radiobox/Radiobox.config.js +2 -2
- package/types/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/types/components/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/types/components/Checkbox/Checkbox.tokens.d.ts +3 -0
- package/types/components/Checkbox/Checkbox.tokens.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.styles.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.tokens.d.ts +2 -0
- package/types/components/Radiobox/Radiobox.tokens.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/cjs/components/Radiobox/Radiobox.styles_155ubn2.css +0 -2
- package/es/components/Radiobox/Radiobox.styles_155ubn2.css +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.78.0-canary.1176.
|
|
3
|
+
"version": "0.78.0-canary.1176.8925416119.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"react-popper": "2.3.0",
|
|
103
103
|
"storeon": "3.1.5"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "7189b2c6a63ea69d16c61fe1c5289f16577876a6"
|
|
106
106
|
}
|
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.checkboxRoot = exports.checkboxConfig = void 0;
|
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
|
9
9
|
var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
|
|
10
|
+
var _utils = /*#__PURE__*/require("../../utils");
|
|
10
11
|
var _base = /*#__PURE__*/require("./variations/_view/base");
|
|
11
12
|
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
|
12
13
|
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
|
@@ -55,6 +56,7 @@ var checkboxRoot = exports.checkboxRoot = function checkboxRoot(Root) {
|
|
|
55
56
|
var canFocused = focused ? 0 : -1;
|
|
56
57
|
var hasContent = label || description;
|
|
57
58
|
var singleLineClass = singleLine ? _Checkbox2.classes.singleLine : undefined;
|
|
59
|
+
var onlyDescriptionClass = !label && description ? _Checkbox2.classes.onlyDescription : undefined;
|
|
58
60
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
|
59
61
|
view: view,
|
|
60
62
|
size: size,
|
|
@@ -82,7 +84,7 @@ var checkboxRoot = exports.checkboxRoot = function checkboxRoot(Root) {
|
|
|
82
84
|
id: uniqLabelId,
|
|
83
85
|
"aria-hidden": isLabelAriaHidden
|
|
84
86
|
}, label), description && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledDescription, {
|
|
85
|
-
className: singleLineClass,
|
|
87
|
+
className: (0, _utils.cx)(singleLineClass, onlyDescriptionClass),
|
|
86
88
|
id: uniqDescriptionId
|
|
87
89
|
}, description))));
|
|
88
90
|
});
|
|
@@ -30,4 +30,4 @@ var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"
|
|
|
30
30
|
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Checkbox.tokens.labelFontFamily, _Checkbox.tokens.labelFontSize, _Checkbox.tokens.labelFontStyle, _Checkbox.tokens.labelFontWeight, _Checkbox.tokens.labelLetterSpacing, _Checkbox.tokens.labelLineHeight);
|
|
31
31
|
var StyledDescription = exports.StyledDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
32
32
|
componentId: "plasma-new-hope__sc-tydhc1-5"
|
|
33
|
-
})(["margin-top:
|
|
33
|
+
})(["margin-top:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&.", "{margin-top:0;}"], _Checkbox.tokens.descriptionMarginTop, _Checkbox.tokens.descriptionColor, _Checkbox.tokens.descriptionFontFamily, _Checkbox.tokens.descriptionFontSize, _Checkbox.tokens.descriptionFontStyle, _Checkbox.tokens.descriptionFontWeight, _Checkbox.tokens.descriptionLetterSpacing, _Checkbox.tokens.descriptionLineHeight, _Checkbox.classes.onlyDescription);
|
|
@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.tokens = exports.classes = void 0;
|
|
7
7
|
var classes = exports.classes = {
|
|
8
8
|
singleLine: 'single-line',
|
|
9
|
-
checkboxTrigger: 'checkbox-trigger'
|
|
9
|
+
checkboxTrigger: 'checkbox-trigger',
|
|
10
|
+
onlyDescription: 'only-description'
|
|
10
11
|
};
|
|
11
12
|
var tokens = exports.tokens = {
|
|
12
13
|
margin: '--plasma-checkbox-margin',
|
|
@@ -21,6 +22,8 @@ var tokens = exports.tokens = {
|
|
|
21
22
|
labelFontWeight: '--plasma-checkbox-label-font-weight',
|
|
22
23
|
labelLetterSpacing: '--plasma-checkbox-label-letter-spacing',
|
|
23
24
|
labelLineHeight: '--plasma-checkbox-label-line-height',
|
|
25
|
+
descriptionMarginTop: '--plasma-checkbox-description-margin-top',
|
|
26
|
+
descriptionOnlyMarginTop: '--plasma-checkbox-description-only-margin-top',
|
|
24
27
|
descriptionFontFamily: '--plasma-checkbox-description-font-family',
|
|
25
28
|
descriptionFontSize: '--plasma-checkbox-description-font-size',
|
|
26
29
|
descriptionFontStyle: '--plasma-checkbox-description-font-style',
|
|
@@ -18,7 +18,7 @@ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{", "}i
|
|
|
18
18
|
outlineRadius: /*#__PURE__*/"var(".concat(_Checkbox.tokens.triggerBorderRadius, ")"),
|
|
19
19
|
outlineColor: 'transparent'
|
|
20
20
|
}), _Checkbox.classes.checkboxTrigger, /*#__PURE__*/(0, _mixins.addFocus)({
|
|
21
|
-
outlineOffset: '-0.
|
|
21
|
+
outlineOffset: '-0.125rem',
|
|
22
22
|
outlineSize: '0.125rem',
|
|
23
23
|
outlineRadius: /*#__PURE__*/"var(".concat(_Checkbox.tokens.triggerBorderRadius, ")"),
|
|
24
24
|
outlineColor: /*#__PURE__*/"var(".concat(_Checkbox.tokens.focusColor, ")"),
|
|
@@ -8,6 +8,7 @@ exports.radioboxRoot = exports.radioboxConfig = void 0;
|
|
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
|
9
9
|
var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
|
|
10
10
|
var _Checkbox = /*#__PURE__*/require("../Checkbox/Checkbox.styles");
|
|
11
|
+
var _utils = /*#__PURE__*/require("../../utils");
|
|
11
12
|
var _base = /*#__PURE__*/require("./variations/_view/base");
|
|
12
13
|
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
|
13
14
|
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
|
@@ -47,6 +48,7 @@ var radioboxRoot = exports.radioboxRoot = function radioboxRoot(Root) {
|
|
|
47
48
|
var canFocused = focused ? 0 : -1;
|
|
48
49
|
var hasContent = label || description;
|
|
49
50
|
var singleLineClass = singleLine ? _Radiobox2.classes.singleLine : undefined;
|
|
51
|
+
var onlyDescriptionClass = !label && description ? _Radiobox2.classes.onlyDescription : undefined;
|
|
50
52
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
|
51
53
|
view: view,
|
|
52
54
|
size: size,
|
|
@@ -70,7 +72,7 @@ var radioboxRoot = exports.radioboxRoot = function radioboxRoot(Root) {
|
|
|
70
72
|
}, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/_react["default"].createElement(_Radiobox.StyledEllipse, null))), hasContent && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContent, {
|
|
71
73
|
className: singleLineClass
|
|
72
74
|
}, label && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledLabel, {
|
|
73
|
-
className: singleLineClass,
|
|
75
|
+
className: (0, _utils.cx)(singleLineClass, onlyDescriptionClass),
|
|
74
76
|
id: uniqLabelId,
|
|
75
77
|
"aria-hidden": isLabelAriaHidden
|
|
76
78
|
}, label), description && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledDescription, {
|
|
@@ -12,7 +12,7 @@ var _Radiobox = /*#__PURE__*/require("./Radiobox.tokens");
|
|
|
12
12
|
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); }
|
|
13
13
|
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; }
|
|
14
14
|
// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
|
|
15
|
-
var mappingOverride = /*#__PURE__*/"\n ".concat(_Checkbox.checkboxTokens.labelFontFamily, ": var(").concat(_Radiobox.tokens.labelFontFamily, ");\n ").concat(_Checkbox.checkboxTokens.labelFontSize, ": var(").concat(_Radiobox.tokens.labelFontSize, ");\n ").concat(_Checkbox.checkboxTokens.labelFontStyle, ": var(").concat(_Radiobox.tokens.labelFontStyle, ");\n ").concat(_Checkbox.checkboxTokens.labelFontWeight, ": var(").concat(_Radiobox.tokens.labelFontWeight, ");\n ").concat(_Checkbox.checkboxTokens.labelLetterSpacing, ": var(").concat(_Radiobox.tokens.labelLetterSpacing, ");\n ").concat(_Checkbox.checkboxTokens.labelLineHeight, ": var(").concat(_Radiobox.tokens.labelLineHeight, ");\n ").concat(_Checkbox.checkboxTokens.descriptionFontFamily, ": var(").concat(_Radiobox.tokens.descriptionFontFamily, ");\n ").concat(_Checkbox.checkboxTokens.descriptionFontSize, ": var(").concat(_Radiobox.tokens.descriptionFontSize, ");\n ").concat(_Checkbox.checkboxTokens.descriptionFontStyle, ": var(").concat(_Radiobox.tokens.descriptionFontStyle, ");\n ").concat(_Checkbox.checkboxTokens.descriptionFontWeight, ": var(").concat(_Radiobox.tokens.descriptionFontWeight, ");\n ").concat(_Checkbox.checkboxTokens.descriptionLetterSpacing, ": var(").concat(_Radiobox.tokens.descriptionLetterSpacing, ");\n ").concat(_Checkbox.checkboxTokens.descriptionLineHeight, ": var(").concat(_Radiobox.tokens.descriptionLineHeight, ");\n\n ").concat(_Checkbox.checkboxTokens.fillColor, ": var(").concat(_Radiobox.tokens.fillColor, ");\n ").concat(_Checkbox.checkboxTokens.descriptionColor, ": var(").concat(_Radiobox.tokens.descriptionColor, ");\n ").concat(_Checkbox.checkboxTokens.triggerBorderColor, ": var(").concat(_Radiobox.tokens.triggerBorderColor, ");\n\n ").concat(_Checkbox.checkboxTokens.contentTopOffset, ": var(").concat(_Radiobox.tokens.contentTopOffset, ");\n ").concat(_Checkbox.checkboxTokens.contentLeftOffset, ": var(").concat(_Radiobox.tokens.contentLeftOffset, ");\n ").concat(_Checkbox.checkboxTokens.triggerSize, ": var(").concat(_Radiobox.tokens.triggerSize, ");\n ").concat(_Checkbox.checkboxTokens.triggerBorderRadius, ": var(").concat(_Radiobox.tokens.triggerBorderRadius, ");\n ").concat(_Checkbox.checkboxTokens.triggerMargin, ": var(").concat(_Radiobox.tokens.triggerMargin, ");\n");
|
|
15
|
+
var mappingOverride = /*#__PURE__*/"\n ".concat(_Checkbox.checkboxTokens.labelFontFamily, ": var(").concat(_Radiobox.tokens.labelFontFamily, ");\n ").concat(_Checkbox.checkboxTokens.labelFontSize, ": var(").concat(_Radiobox.tokens.labelFontSize, ");\n ").concat(_Checkbox.checkboxTokens.labelFontStyle, ": var(").concat(_Radiobox.tokens.labelFontStyle, ");\n ").concat(_Checkbox.checkboxTokens.labelFontWeight, ": var(").concat(_Radiobox.tokens.labelFontWeight, ");\n ").concat(_Checkbox.checkboxTokens.labelLetterSpacing, ": var(").concat(_Radiobox.tokens.labelLetterSpacing, ");\n ").concat(_Checkbox.checkboxTokens.labelLineHeight, ": var(").concat(_Radiobox.tokens.labelLineHeight, ");\n ").concat(_Checkbox.checkboxTokens.descriptionMarginTop, ": var(").concat(_Radiobox.tokens.descriptionMarginTop, ");\n ").concat(_Checkbox.checkboxTokens.descriptionFontFamily, ": var(").concat(_Radiobox.tokens.descriptionFontFamily, ");\n ").concat(_Checkbox.checkboxTokens.descriptionFontSize, ": var(").concat(_Radiobox.tokens.descriptionFontSize, ");\n ").concat(_Checkbox.checkboxTokens.descriptionFontStyle, ": var(").concat(_Radiobox.tokens.descriptionFontStyle, ");\n ").concat(_Checkbox.checkboxTokens.descriptionFontWeight, ": var(").concat(_Radiobox.tokens.descriptionFontWeight, ");\n ").concat(_Checkbox.checkboxTokens.descriptionLetterSpacing, ": var(").concat(_Radiobox.tokens.descriptionLetterSpacing, ");\n ").concat(_Checkbox.checkboxTokens.descriptionLineHeight, ": var(").concat(_Radiobox.tokens.descriptionLineHeight, ");\n\n ").concat(_Checkbox.checkboxTokens.fillColor, ": var(").concat(_Radiobox.tokens.fillColor, ");\n ").concat(_Checkbox.checkboxTokens.descriptionColor, ": var(").concat(_Radiobox.tokens.descriptionColor, ");\n ").concat(_Checkbox.checkboxTokens.triggerBorderColor, ": var(").concat(_Radiobox.tokens.triggerBorderColor, ");\n\n ").concat(_Checkbox.checkboxTokens.contentTopOffset, ": var(").concat(_Radiobox.tokens.contentTopOffset, ");\n ").concat(_Checkbox.checkboxTokens.contentLeftOffset, ": var(").concat(_Radiobox.tokens.contentLeftOffset, ");\n ").concat(_Checkbox.checkboxTokens.triggerSize, ": var(").concat(_Radiobox.tokens.triggerSize, ");\n ").concat(_Checkbox.checkboxTokens.triggerBorderRadius, ": var(").concat(_Radiobox.tokens.triggerBorderRadius, ");\n ").concat(_Checkbox.checkboxTokens.triggerMargin, ": var(").concat(_Radiobox.tokens.triggerMargin, ");\n");
|
|
16
16
|
var StyledEllipse = exports.StyledEllipse = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
17
17
|
componentId: "plasma-new-hope__sc-rqiilp-0"
|
|
18
18
|
})(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseColor);
|
|
@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.tokens = exports.classes = void 0;
|
|
7
7
|
var classes = exports.classes = {
|
|
8
8
|
singleLine: 'single-line',
|
|
9
|
-
radioboxTrigger: 'radiobox-trigger'
|
|
9
|
+
radioboxTrigger: 'radiobox-trigger',
|
|
10
|
+
onlyDescription: 'only-description'
|
|
10
11
|
};
|
|
11
12
|
var tokens = exports.tokens = {
|
|
12
13
|
labelFontFamily: '--plasma-radiobox-label-font-family',
|
|
@@ -15,6 +16,7 @@ var tokens = exports.tokens = {
|
|
|
15
16
|
labelFontWeight: '--plasma-radiobox-label-font-weight',
|
|
16
17
|
labelLetterSpacing: '--plasma-radiobox-label-letter-spacing',
|
|
17
18
|
labelLineHeight: '--plasma-radiobox-label-line-height',
|
|
19
|
+
descriptionMarginTop: '--plasma-checkbox-description-margin-top',
|
|
18
20
|
descriptionFontFamily: '--plasma-radiobox-description-font-family',
|
|
19
21
|
descriptionFontSize: '--plasma-radiobox-description-font-size',
|
|
20
22
|
descriptionFontStyle: '--plasma-radiobox-description-font-style',
|
|
@@ -13,7 +13,7 @@ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{", "}i
|
|
|
13
13
|
outlineRadius: /*#__PURE__*/"var(".concat(_Radiobox.tokens.triggerBorderRadius, ")"),
|
|
14
14
|
outlineColor: 'transparent'
|
|
15
15
|
}), _Radiobox.classes.radioboxTrigger, /*#__PURE__*/(0, _mixins.addFocus)({
|
|
16
|
-
outlineOffset: '-0.
|
|
16
|
+
outlineOffset: '-0.125rem',
|
|
17
17
|
outlineSize: '0.125rem',
|
|
18
18
|
outlineRadius: /*#__PURE__*/"var(".concat(_Radiobox.tokens.triggerBorderRadius, ")"),
|
|
19
19
|
outlineColor: /*#__PURE__*/"var(".concat(_Radiobox.tokens.focusColor, ")"),
|
|
@@ -15,8 +15,8 @@ var config = exports.config = {
|
|
|
15
15
|
* Размер контрола.
|
|
16
16
|
*/
|
|
17
17
|
size: {
|
|
18
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
19
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
18
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerMargin, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight),
|
|
19
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerMargin, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight)
|
|
20
20
|
},
|
|
21
21
|
/**
|
|
22
22
|
* Вид контрола.
|
|
@@ -96,6 +96,7 @@ const getState = (values: Record<string, boolean | undefined>, value: string) =>
|
|
|
96
96
|
const StoryDefault = (props: CheckboxProps) => {
|
|
97
97
|
return (
|
|
98
98
|
<>
|
|
99
|
+
<Checkbox {...props} />
|
|
99
100
|
<Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
|
|
100
101
|
<Checkbox
|
|
101
102
|
name="item.name"
|
|
@@ -16,8 +16,8 @@ var config = exports.config = {
|
|
|
16
16
|
* Размер контрола.
|
|
17
17
|
*/
|
|
18
18
|
size: {
|
|
19
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0
|
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
19
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionMarginTop, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight),
|
|
20
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionMarginTop, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight)
|
|
21
21
|
},
|
|
22
22
|
/**
|
|
23
23
|
* Вид контрола.
|
|
@@ -15,8 +15,8 @@ var config = exports.config = {
|
|
|
15
15
|
* Размер контрола.
|
|
16
16
|
*/
|
|
17
17
|
size: {
|
|
18
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
19
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
18
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerMargin, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight),
|
|
19
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerMargin, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight)
|
|
20
20
|
},
|
|
21
21
|
/**
|
|
22
22
|
* Вид контрола.
|
|
@@ -96,6 +96,7 @@ const getState = (values: Record<string, boolean | undefined>, value: string) =>
|
|
|
96
96
|
const StoryDefault = (props: CheckboxProps) => {
|
|
97
97
|
return (
|
|
98
98
|
<>
|
|
99
|
+
<Checkbox {...props} />
|
|
99
100
|
<Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
|
|
100
101
|
<Checkbox
|
|
101
102
|
name="item.name"
|
|
@@ -16,8 +16,8 @@ var config = exports.config = {
|
|
|
16
16
|
* Размер контрола.
|
|
17
17
|
*/
|
|
18
18
|
size: {
|
|
19
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0
|
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
19
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionMarginTop, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight),
|
|
20
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionMarginTop, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight)
|
|
21
21
|
},
|
|
22
22
|
/**
|
|
23
23
|
* Вид контрола.
|
|
@@ -15,8 +15,8 @@ var config = exports.config = {
|
|
|
15
15
|
* Размер контрола.
|
|
16
16
|
*/
|
|
17
17
|
size: {
|
|
18
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
19
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
18
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerMargin, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight),
|
|
19
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerMargin, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight)
|
|
20
20
|
},
|
|
21
21
|
/**
|
|
22
22
|
* Вид контрола.
|
|
@@ -16,8 +16,8 @@ var config = exports.config = {
|
|
|
16
16
|
* Размер контрола.
|
|
17
17
|
*/
|
|
18
18
|
size: {
|
|
19
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0
|
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.
|
|
19
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionMarginTop, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight),
|
|
20
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionMarginTop, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight)
|
|
21
21
|
},
|
|
22
22
|
/**
|
|
23
23
|
* Вид контрола.
|
|
@@ -5,6 +5,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
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, useEffect, useMemo, useRef } from 'react';
|
|
7
7
|
import { safeUseId, useForkRef, extractTextFrom } from '@salutejs/plasma-core';
|
|
8
|
+
import { cx } from '../../utils';
|
|
8
9
|
import { base as viewCSS } from './variations/_view/base';
|
|
9
10
|
import { base as sizeCSS } from './variations/_size/base';
|
|
10
11
|
import { base as disabledCSS } from './variations/_disabled/base';
|
|
@@ -46,6 +47,7 @@ export var checkboxRoot = function checkboxRoot(Root) {
|
|
|
46
47
|
var canFocused = focused ? 0 : -1;
|
|
47
48
|
var hasContent = label || description;
|
|
48
49
|
var singleLineClass = singleLine ? classes.singleLine : undefined;
|
|
50
|
+
var onlyDescriptionClass = !label && description ? classes.onlyDescription : undefined;
|
|
49
51
|
return /*#__PURE__*/React.createElement(Root, {
|
|
50
52
|
view: view,
|
|
51
53
|
size: size,
|
|
@@ -73,7 +75,7 @@ export var checkboxRoot = function checkboxRoot(Root) {
|
|
|
73
75
|
id: uniqLabelId,
|
|
74
76
|
"aria-hidden": isLabelAriaHidden
|
|
75
77
|
}, label), description && /*#__PURE__*/React.createElement(StyledDescription, {
|
|
76
|
-
className: singleLineClass,
|
|
78
|
+
className: cx(singleLineClass, onlyDescriptionClass),
|
|
77
79
|
id: uniqDescriptionId
|
|
78
80
|
}, description))));
|
|
79
81
|
});
|
|
@@ -22,4 +22,4 @@ export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
|
|
|
22
22
|
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight);
|
|
23
23
|
export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
|
|
24
24
|
componentId: "plasma-new-hope__sc-tydhc1-5"
|
|
25
|
-
})(["margin-top:
|
|
25
|
+
})(["margin-top:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&.", "{margin-top:0;}"], tokens.descriptionMarginTop, tokens.descriptionColor, tokens.descriptionFontFamily, tokens.descriptionFontSize, tokens.descriptionFontStyle, tokens.descriptionFontWeight, tokens.descriptionLetterSpacing, tokens.descriptionLineHeight, classes.onlyDescription);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export var classes = {
|
|
2
2
|
singleLine: 'single-line',
|
|
3
|
-
checkboxTrigger: 'checkbox-trigger'
|
|
3
|
+
checkboxTrigger: 'checkbox-trigger',
|
|
4
|
+
onlyDescription: 'only-description'
|
|
4
5
|
};
|
|
5
6
|
export var tokens = {
|
|
6
7
|
margin: '--plasma-checkbox-margin',
|
|
@@ -15,6 +16,8 @@ export var tokens = {
|
|
|
15
16
|
labelFontWeight: '--plasma-checkbox-label-font-weight',
|
|
16
17
|
labelLetterSpacing: '--plasma-checkbox-label-letter-spacing',
|
|
17
18
|
labelLineHeight: '--plasma-checkbox-label-line-height',
|
|
19
|
+
descriptionMarginTop: '--plasma-checkbox-description-margin-top',
|
|
20
|
+
descriptionOnlyMarginTop: '--plasma-checkbox-description-only-margin-top',
|
|
18
21
|
descriptionFontFamily: '--plasma-checkbox-description-font-family',
|
|
19
22
|
descriptionFontSize: '--plasma-checkbox-description-font-size',
|
|
20
23
|
descriptionFontStyle: '--plasma-checkbox-description-font-style',
|
|
@@ -13,7 +13,7 @@ export var base = /*#__PURE__*/css([".", "{", "}input[data-focus-visible-added]
|
|
|
13
13
|
outlineRadius: /*#__PURE__*/"var(".concat(tokens.triggerBorderRadius, ")"),
|
|
14
14
|
outlineColor: 'transparent'
|
|
15
15
|
}), classes.checkboxTrigger, /*#__PURE__*/addFocus({
|
|
16
|
-
outlineOffset: '-0.
|
|
16
|
+
outlineOffset: '-0.125rem',
|
|
17
17
|
outlineSize: '0.125rem',
|
|
18
18
|
outlineRadius: /*#__PURE__*/"var(".concat(tokens.triggerBorderRadius, ")"),
|
|
19
19
|
outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
|
|
@@ -6,6 +6,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
6
6
|
import React, { forwardRef, useMemo } from 'react';
|
|
7
7
|
import { safeUseId, extractTextFrom } from '@salutejs/plasma-core';
|
|
8
8
|
import { StyledContentWrapper, StyledDescription, StyledInput, StyledLabel, StyledContent, StyledTrigger } from '../Checkbox/Checkbox.styles';
|
|
9
|
+
import { cx } from '../../utils';
|
|
9
10
|
import { base as viewCSS } from './variations/_view/base';
|
|
10
11
|
import { base as sizeCSS } from './variations/_size/base';
|
|
11
12
|
import { base as disabledCSS } from './variations/_disabled/base';
|
|
@@ -38,6 +39,7 @@ export var radioboxRoot = function radioboxRoot(Root) {
|
|
|
38
39
|
var canFocused = focused ? 0 : -1;
|
|
39
40
|
var hasContent = label || description;
|
|
40
41
|
var singleLineClass = singleLine ? classes.singleLine : undefined;
|
|
42
|
+
var onlyDescriptionClass = !label && description ? classes.onlyDescription : undefined;
|
|
41
43
|
return /*#__PURE__*/React.createElement(Root, {
|
|
42
44
|
view: view,
|
|
43
45
|
size: size,
|
|
@@ -61,7 +63,7 @@ export var radioboxRoot = function radioboxRoot(Root) {
|
|
|
61
63
|
}, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/React.createElement(StyledEllipse, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
|
|
62
64
|
className: singleLineClass
|
|
63
65
|
}, label && /*#__PURE__*/React.createElement(StyledLabel, {
|
|
64
|
-
className: singleLineClass,
|
|
66
|
+
className: cx(singleLineClass, onlyDescriptionClass),
|
|
65
67
|
id: uniqLabelId,
|
|
66
68
|
"aria-hidden": isLabelAriaHidden
|
|
67
69
|
}, label), description && /*#__PURE__*/React.createElement(StyledDescription, {
|
|
@@ -5,7 +5,7 @@ import { applyEllipsis, applyNoUserSelect } from '../../mixins';
|
|
|
5
5
|
import { classes, tokens } from './Radiobox.tokens';
|
|
6
6
|
|
|
7
7
|
// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
|
|
8
|
-
var mappingOverride = /*#__PURE__*/"\n ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n\n ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n ").concat(checkboxTokens.triggerMargin, ": var(").concat(tokens.triggerMargin, ");\n");
|
|
8
|
+
var mappingOverride = /*#__PURE__*/"\n ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n\n ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n ").concat(checkboxTokens.triggerMargin, ": var(").concat(tokens.triggerMargin, ");\n");
|
|
9
9
|
export var StyledEllipse = /*#__PURE__*/styled.div.withConfig({
|
|
10
10
|
componentId: "plasma-new-hope__sc-rqiilp-0"
|
|
11
11
|
})(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseColor);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export var classes = {
|
|
2
2
|
singleLine: 'single-line',
|
|
3
|
-
radioboxTrigger: 'radiobox-trigger'
|
|
3
|
+
radioboxTrigger: 'radiobox-trigger',
|
|
4
|
+
onlyDescription: 'only-description'
|
|
4
5
|
};
|
|
5
6
|
export var tokens = {
|
|
6
7
|
labelFontFamily: '--plasma-radiobox-label-font-family',
|
|
@@ -9,6 +10,7 @@ export var tokens = {
|
|
|
9
10
|
labelFontWeight: '--plasma-radiobox-label-font-weight',
|
|
10
11
|
labelLetterSpacing: '--plasma-radiobox-label-letter-spacing',
|
|
11
12
|
labelLineHeight: '--plasma-radiobox-label-line-height',
|
|
13
|
+
descriptionMarginTop: '--plasma-checkbox-description-margin-top',
|
|
12
14
|
descriptionFontFamily: '--plasma-radiobox-description-font-family',
|
|
13
15
|
descriptionFontSize: '--plasma-radiobox-description-font-size',
|
|
14
16
|
descriptionFontStyle: '--plasma-radiobox-description-font-style',
|
|
@@ -7,7 +7,7 @@ export var base = /*#__PURE__*/css([".", "{", "}input[data-focus-visible-added]
|
|
|
7
7
|
outlineRadius: /*#__PURE__*/"var(".concat(tokens.triggerBorderRadius, ")"),
|
|
8
8
|
outlineColor: 'transparent'
|
|
9
9
|
}), classes.radioboxTrigger, /*#__PURE__*/addFocus({
|
|
10
|
-
outlineOffset: '-0.
|
|
10
|
+
outlineOffset: '-0.125rem',
|
|
11
11
|
outlineSize: '0.125rem',
|
|
12
12
|
outlineRadius: /*#__PURE__*/"var(".concat(tokens.triggerBorderRadius, ")"),
|
|
13
13
|
outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
|
|
@@ -9,8 +9,8 @@ export var config = {
|
|
|
9
9
|
* Размер контрола.
|
|
10
10
|
*/
|
|
11
11
|
size: {
|
|
12
|
-
s: /*#__PURE__*/css(["", ":0;", ":0.
|
|
13
|
-
m: /*#__PURE__*/css(["", ":0;", ":0.
|
|
12
|
+
s: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight),
|
|
13
|
+
m: /*#__PURE__*/css(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
|
|
14
14
|
},
|
|
15
15
|
/**
|
|
16
16
|
* Вид контрола.
|
|
@@ -96,6 +96,7 @@ const getState = (values: Record<string, boolean | undefined>, value: string) =>
|
|
|
96
96
|
const StoryDefault = (props: CheckboxProps) => {
|
|
97
97
|
return (
|
|
98
98
|
<>
|
|
99
|
+
<Checkbox {...props} />
|
|
99
100
|
<Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
|
|
100
101
|
<Checkbox
|
|
101
102
|
name="item.name"
|
|
@@ -10,8 +10,8 @@ export var config = {
|
|
|
10
10
|
* Размер контрола.
|
|
11
11
|
*/
|
|
12
12
|
size: {
|
|
13
|
-
s: /*#__PURE__*/css(["", ":0;", ":0
|
|
14
|
-
m: /*#__PURE__*/css(["", ":0;", ":0.
|
|
13
|
+
s: /*#__PURE__*/css(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight),
|
|
14
|
+
m: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight)
|
|
15
15
|
},
|
|
16
16
|
/**
|
|
17
17
|
* Вид контрола.
|
|
@@ -9,8 +9,8 @@ export var config = {
|
|
|
9
9
|
* Размер контрола.
|
|
10
10
|
*/
|
|
11
11
|
size: {
|
|
12
|
-
s: /*#__PURE__*/css(["", ":0;", ":0.
|
|
13
|
-
m: /*#__PURE__*/css(["", ":0;", ":0.
|
|
12
|
+
s: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight),
|
|
13
|
+
m: /*#__PURE__*/css(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
|
|
14
14
|
},
|
|
15
15
|
/**
|
|
16
16
|
* Вид контрола.
|
|
@@ -96,6 +96,7 @@ const getState = (values: Record<string, boolean | undefined>, value: string) =>
|
|
|
96
96
|
const StoryDefault = (props: CheckboxProps) => {
|
|
97
97
|
return (
|
|
98
98
|
<>
|
|
99
|
+
<Checkbox {...props} />
|
|
99
100
|
<Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
|
|
100
101
|
<Checkbox
|
|
101
102
|
name="item.name"
|
|
@@ -10,8 +10,8 @@ export var config = {
|
|
|
10
10
|
* Размер контрола.
|
|
11
11
|
*/
|
|
12
12
|
size: {
|
|
13
|
-
s: /*#__PURE__*/css(["", ":0;", ":0
|
|
14
|
-
m: /*#__PURE__*/css(["", ":0;", ":0.
|
|
13
|
+
s: /*#__PURE__*/css(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight),
|
|
14
|
+
m: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight)
|
|
15
15
|
},
|
|
16
16
|
/**
|
|
17
17
|
* Вид контрола.
|