@salutejs/plasma-new-hope 0.249.0-canary.1730.13035830009.0 → 0.250.0-canary.1724.13050656927.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Accordion/Accordion.tokens.js +1 -0
- package/cjs/components/Accordion/Accordion.tokens.js.map +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.css +11 -11
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/{AccordionItem.styles_aus2x3.css → AccordionItem.styles_56cr5h.css} +1 -1
- package/cjs/components/Autocomplete/Autocomplete.css +30 -30
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +30 -30
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +30 -30
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +30 -30
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +30 -30
- package/cjs/components/Pagination/Pagination.css +30 -30
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +30 -30
- package/cjs/components/Portal/Portal.js +5 -1
- package/cjs/components/Portal/Portal.js.map +1 -1
- package/cjs/components/Range/Range.css +30 -30
- package/cjs/components/Segment/tokens.js +1 -0
- package/cjs/components/Segment/tokens.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.css +2 -2
- package/cjs/components/Segment/ui/SegmentItem/variations/_size/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_size/base.js.map +1 -1
- package/{es/components/Segment/ui/SegmentItem/variations/_size/base_7kjuok.css → cjs/components/Segment/ui/SegmentItem/variations/_size/base_ww4ugz.css} +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
- package/{es/components/Segment/ui/SegmentItem/variations/_view/base_dettiq.css → cjs/components/Segment/ui/SegmentItem/variations/_view/base_1gbqhvi.css} +1 -1
- package/cjs/components/Select/Select.css +30 -30
- package/cjs/components/Select/ui/Target/Target.css +30 -30
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +30 -30
- package/cjs/components/Slider/Slider.css +30 -30
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +30 -30
- package/cjs/components/TextField/TextField.styles.js +42 -42
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/TextField.styles_kh1zhz.css +22 -0
- package/cjs/components/TextField/ui/Hint/Hint.css +20 -20
- package/cjs/components/TextField/variations/_clear/base.js +1 -1
- package/cjs/components/TextField/variations/_clear/base_gm5pwg.css +1 -0
- package/cjs/components/TextField/variations/_disabled/base.js +1 -1
- package/cjs/components/TextField/variations/_disabled/{base_2tv0nz.css → base_4d3opa.css} +1 -1
- package/cjs/components/TextField/variations/_hint-size/base.js +1 -1
- package/cjs/components/TextField/variations/_hint-size/{base_z7a2uf.css → base_1x99605.css} +1 -1
- package/cjs/components/TextField/variations/_hint-view/base.js +1 -1
- package/cjs/components/TextField/variations/_hint-view/{base_1htnb8e.css → base_l8etux.css} +1 -1
- package/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/cjs/components/TextField/variations/_label-placement/base_if7w35.css +1 -0
- package/cjs/components/TextField/variations/_read-only/base.js +1 -1
- package/cjs/components/TextField/variations/_read-only/base_17ypmu7.css +1 -0
- package/cjs/components/TextField/variations/_size/base.js +1 -1
- package/cjs/components/TextField/variations/_size/base_7va3kt.css +1 -0
- package/cjs/components/TextField/variations/_view/base.js +1 -1
- package/cjs/components/TextField/variations/_view/base_1uzaktg.css +1 -0
- package/cjs/components/TextFieldGroup/TextFieldGroup.css +1 -1
- package/cjs/components/TextFieldGroup/variations/_shape/base.js +1 -1
- package/cjs/components/TextFieldGroup/variations/_shape/base_52bndd.css +1 -0
- package/cjs/components/_Icon/Icons/IconChevronDownFill.js +6 -3
- package/cjs/components/_Icon/Icons/IconChevronDownFill.js.map +1 -1
- package/cjs/components/_Icon/Icons/IconMinus.js +6 -3
- package/cjs/components/_Icon/Icons/IconMinus.js.map +1 -1
- package/cjs/index.css +42 -42
- package/emotion/cjs/components/Accordion/Accordion.tokens.js +1 -0
- package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
- package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +11 -20
- package/emotion/cjs/components/Portal/Portal.js +5 -1
- package/emotion/cjs/components/Segment/tokens.js +1 -0
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_size/base.js +1 -1
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/emotion/cjs/components/TextField/TextField.styles.js +44 -45
- package/emotion/cjs/components/_Icon/Icons/IconChevronDownFill.js +8 -3
- package/emotion/cjs/components/_Icon/Icons/IconMinus.js +8 -3
- package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +10 -6
- package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +33 -3
- package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +10 -10
- package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +33 -3
- package/emotion/es/components/Accordion/Accordion.tokens.js +1 -0
- package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
- package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +11 -20
- package/emotion/es/components/Portal/Portal.js +5 -1
- package/emotion/es/components/Segment/tokens.js +1 -0
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_size/base.js +2 -2
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/emotion/es/components/TextField/TextField.styles.js +44 -45
- package/emotion/es/components/_Icon/Icons/IconChevronDownFill.js +8 -3
- package/emotion/es/components/_Icon/Icons/IconMinus.js +8 -3
- package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +10 -6
- package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +33 -3
- package/emotion/es/examples/plasma_web/components/Accordion/Accordion.config.js +10 -10
- package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +33 -3
- package/es/components/Accordion/Accordion.tokens.js +1 -0
- package/es/components/Accordion/Accordion.tokens.js.map +1 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.css +11 -11
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +1 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
- package/es/components/Accordion/ui/AccordionItem/{AccordionItem.styles_aus2x3.css → AccordionItem.styles_56cr5h.css} +1 -1
- package/es/components/Autocomplete/Autocomplete.css +30 -30
- package/es/components/Combobox/ComboboxNew/Combobox.css +30 -30
- package/es/components/DatePicker/RangeDate/RangeDate.css +30 -30
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +30 -30
- package/es/components/DatePicker/SingleDate/SingleDate.css +30 -30
- package/es/components/Pagination/Pagination.css +30 -30
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +30 -30
- package/es/components/Portal/Portal.js +5 -1
- package/es/components/Portal/Portal.js.map +1 -1
- package/es/components/Range/Range.css +30 -30
- package/es/components/Segment/tokens.js +1 -0
- package/es/components/Segment/tokens.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.css +2 -2
- package/es/components/Segment/ui/SegmentItem/variations/_size/base.js +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_size/base.js.map +1 -1
- package/{cjs/components/Segment/ui/SegmentItem/variations/_size/base_7kjuok.css → es/components/Segment/ui/SegmentItem/variations/_size/base_ww4ugz.css} +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
- package/{cjs/components/Segment/ui/SegmentItem/variations/_view/base_dettiq.css → es/components/Segment/ui/SegmentItem/variations/_view/base_1gbqhvi.css} +1 -1
- package/es/components/Select/Select.css +30 -30
- package/es/components/Select/ui/Target/Target.css +30 -30
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +30 -30
- package/es/components/Slider/Slider.css +30 -30
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +30 -30
- package/es/components/TextField/TextField.styles.js +42 -42
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/TextField.styles_kh1zhz.css +22 -0
- package/es/components/TextField/ui/Hint/Hint.css +20 -20
- package/es/components/TextField/variations/_clear/base.js +1 -1
- package/es/components/TextField/variations/_clear/base_gm5pwg.css +1 -0
- package/es/components/TextField/variations/_disabled/base.js +1 -1
- package/es/components/TextField/variations/_disabled/{base_2tv0nz.css → base_4d3opa.css} +1 -1
- package/es/components/TextField/variations/_hint-size/base.js +1 -1
- package/es/components/TextField/variations/_hint-size/{base_z7a2uf.css → base_1x99605.css} +1 -1
- package/es/components/TextField/variations/_hint-view/base.js +1 -1
- package/es/components/TextField/variations/_hint-view/{base_1htnb8e.css → base_l8etux.css} +1 -1
- package/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/es/components/TextField/variations/_label-placement/base_if7w35.css +1 -0
- package/es/components/TextField/variations/_read-only/base.js +1 -1
- package/es/components/TextField/variations/_read-only/base_17ypmu7.css +1 -0
- package/es/components/TextField/variations/_size/base.js +1 -1
- package/es/components/TextField/variations/_size/base_7va3kt.css +1 -0
- package/es/components/TextField/variations/_view/base.js +1 -1
- package/es/components/TextField/variations/_view/base_1uzaktg.css +1 -0
- package/es/components/TextFieldGroup/TextFieldGroup.css +1 -1
- package/es/components/TextFieldGroup/variations/_shape/base.js +1 -1
- package/es/components/TextFieldGroup/variations/_shape/base_52bndd.css +1 -0
- package/es/components/_Icon/Icons/IconChevronDownFill.js +6 -3
- package/es/components/_Icon/Icons/IconChevronDownFill.js.map +1 -1
- package/es/components/_Icon/Icons/IconMinus.js +6 -3
- package/es/components/_Icon/Icons/IconMinus.js.map +1 -1
- package/es/index.css +42 -42
- package/package.json +2 -2
- package/styled-components/cjs/components/Accordion/Accordion.tokens.js +1 -0
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +1 -1
- package/styled-components/cjs/components/Portal/Portal.js +5 -1
- package/styled-components/cjs/components/Segment/tokens.js +1 -0
- package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/TextField/TextField.styles.js +22 -23
- package/styled-components/cjs/components/_Icon/Icons/IconChevronDownFill.js +8 -3
- package/styled-components/cjs/components/_Icon/Icons/IconMinus.js +8 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +33 -3
- package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.config.js +6 -6
- package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +33 -3
- package/styled-components/es/components/Accordion/Accordion.tokens.js +1 -0
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +10 -8
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +1 -1
- package/styled-components/es/components/Portal/Portal.js +5 -1
- package/styled-components/es/components/Segment/tokens.js +1 -0
- package/styled-components/es/components/Segment/ui/SegmentItem/variations/_size/base.js +2 -2
- package/styled-components/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/styled-components/es/components/TextField/TextField.styles.js +22 -23
- package/styled-components/es/components/_Icon/Icons/IconChevronDownFill.js +8 -3
- package/styled-components/es/components/_Icon/Icons/IconMinus.js +8 -3
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +6 -2
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +33 -3
- package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.config.js +6 -6
- package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +33 -3
- package/types/components/Accordion/Accordion.tokens.d.ts +1 -0
- package/types/components/Accordion/Accordion.tokens.d.ts.map +1 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/types/components/Portal/Portal.d.ts.map +1 -1
- package/types/components/Segment/tokens.d.ts +1 -0
- package/types/components/Segment/tokens.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/variations/_size/base.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/variations/_view/base.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +1 -1
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts +4 -0
- package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Accordion/Accordion.d.ts +4 -0
- package/types/examples/plasma_b2c/components/Accordion/Accordion.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Accordion/Accordion.config.d.ts +4 -4
- package/types/examples/plasma_web/components/Accordion/Accordion.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Accordion/Accordion.d.ts +4 -4
- package/cjs/components/TextField/TextField.styles_1cdp5eg.css +0 -22
- package/cjs/components/TextField/variations/_clear/base_appgl3.css +0 -1
- package/cjs/components/TextField/variations/_label-placement/base_jfnl8i.css +0 -1
- package/cjs/components/TextField/variations/_read-only/base_oizdmx.css +0 -1
- package/cjs/components/TextField/variations/_size/base_uulqii.css +0 -1
- package/cjs/components/TextField/variations/_view/base_1npz45o.css +0 -1
- package/cjs/components/TextFieldGroup/variations/_shape/base_1e0je21.css +0 -1
- package/es/components/TextField/TextField.styles_1cdp5eg.css +0 -22
- package/es/components/TextField/variations/_clear/base_appgl3.css +0 -1
- package/es/components/TextField/variations/_label-placement/base_jfnl8i.css +0 -1
- package/es/components/TextField/variations/_read-only/base_oizdmx.css +0 -1
- package/es/components/TextField/variations/_size/base_uulqii.css +0 -1
- package/es/components/TextField/variations/_view/base_1npz45o.css +0 -1
- package/es/components/TextFieldGroup/variations/_shape/base_1e0je21.css +0 -1
@@ -7,16 +7,21 @@ exports.IconChevronDownFill = void 0;
|
|
7
7
|
var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
|
8
8
|
var _ChevronDownFill = /*#__PURE__*/require("../Icon.assets/ChevronDownFill");
|
9
9
|
var _IconRoot = /*#__PURE__*/require("../IconRoot");
|
10
|
+
var _excluded = ["size", "color", "className"];
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
12
|
+
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); }
|
13
|
+
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; }
|
14
|
+
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; }
|
11
15
|
var IconChevronDownFill = exports.IconChevronDownFill = function IconChevronDownFill(_ref) {
|
12
16
|
var _ref$size = _ref.size,
|
13
17
|
size = _ref$size === void 0 ? 'xs' : _ref$size,
|
14
18
|
color = _ref.color,
|
15
|
-
className = _ref.className
|
16
|
-
|
19
|
+
className = _ref.className,
|
20
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
21
|
+
return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
|
17
22
|
className: className,
|
18
23
|
size: size,
|
19
24
|
color: color,
|
20
25
|
icon: _ChevronDownFill.ChevronDownFill
|
21
|
-
});
|
26
|
+
}, rest));
|
22
27
|
};
|
@@ -7,16 +7,21 @@ exports.IconMinus = void 0;
|
|
7
7
|
var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
|
8
8
|
var _Minus = /*#__PURE__*/require("../Icon.assets/Minus");
|
9
9
|
var _IconRoot = /*#__PURE__*/require("../IconRoot");
|
10
|
+
var _excluded = ["size", "color", "className"];
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
12
|
+
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); }
|
13
|
+
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; }
|
14
|
+
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; }
|
11
15
|
var IconMinus = exports.IconMinus = function IconMinus(_ref) {
|
12
16
|
var _ref$size = _ref.size,
|
13
17
|
size = _ref$size === void 0 ? 's' : _ref$size,
|
14
18
|
color = _ref.color,
|
15
|
-
className = _ref.className
|
16
|
-
|
19
|
+
className = _ref.className,
|
20
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
21
|
+
return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
|
17
22
|
className: className,
|
18
23
|
size: size,
|
19
24
|
color: color,
|
20
25
|
icon: _Minus.Minus
|
21
|
-
});
|
26
|
+
}, rest));
|
22
27
|
};
|
@@ -14,13 +14,17 @@ var config = exports.config = {
|
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
16
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft, _Accordion.accordionTokens.accordionItemPaddingHorizontal),
|
17
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.
|
17
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.063rem solid var(--surface-solid-tertiary);", ":0;"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft)
|
18
18
|
},
|
19
19
|
size: {
|
20
20
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
21
21
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.125rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
22
22
|
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.6875rem;", ":0.875rem;", ":0.375rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
23
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
|
23
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
24
|
+
h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.25rem;", ":0.25rem;", ":0.75rem;", ":1.5rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-bold-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemIconSize, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
25
|
+
h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.125rem;", ":0.25rem;", ":0.75rem;", ":1.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-bold-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemIconSize, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
26
|
+
h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.688rem;", ":0.875rem;", ":0.25rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
27
|
+
h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-bold-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
|
24
28
|
}
|
25
29
|
}
|
26
30
|
};
|
package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx
CHANGED
@@ -95,6 +95,24 @@ export const Default: StoryObj<AccordionProps> = {
|
|
95
95
|
};
|
96
96
|
|
97
97
|
const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
|
98
|
+
const getSizeForIconButton = (size) => {
|
99
|
+
switch (size) {
|
100
|
+
case 'l':
|
101
|
+
case 'h2':
|
102
|
+
case 'h3':
|
103
|
+
return 'l';
|
104
|
+
case 'm':
|
105
|
+
return 'm';
|
106
|
+
case 's':
|
107
|
+
case 'h4':
|
108
|
+
return 's';
|
109
|
+
case 'xs':
|
110
|
+
case 'h5':
|
111
|
+
return 'xs';
|
112
|
+
default:
|
113
|
+
return 'm';
|
114
|
+
}
|
115
|
+
};
|
98
116
|
|
99
117
|
const ControlledAccordion = (props: AccordionProps) => {
|
100
118
|
const args = { ...props, text: undefined };
|
@@ -106,7 +124,11 @@ const ControlledAccordion = (props: AccordionProps) => {
|
|
106
124
|
<Accordion {...args}>
|
107
125
|
<AccordionItem
|
108
126
|
contentRight={
|
109
|
-
<IconButton
|
127
|
+
<IconButton
|
128
|
+
view="secondary"
|
129
|
+
size={getSizeForIconButton(args.size)}
|
130
|
+
onClick={() => setActiveFirst(!activeFirst)}
|
131
|
+
>
|
110
132
|
<IconPlus size={getSizeForIcon(args.size)} />
|
111
133
|
</IconButton>
|
112
134
|
}
|
@@ -120,7 +142,11 @@ const ControlledAccordion = (props: AccordionProps) => {
|
|
120
142
|
</AccordionItem>
|
121
143
|
<AccordionItem
|
122
144
|
contentRight={
|
123
|
-
<IconButton
|
145
|
+
<IconButton
|
146
|
+
view="secondary"
|
147
|
+
size={getSizeForIconButton(args.size)}
|
148
|
+
onClick={() => setActiveSecond(!activeSecond)}
|
149
|
+
>
|
124
150
|
<IconPlus size={getSizeForIcon(args.size)} />
|
125
151
|
</IconButton>
|
126
152
|
}
|
@@ -134,7 +160,11 @@ const ControlledAccordion = (props: AccordionProps) => {
|
|
134
160
|
</AccordionItem>
|
135
161
|
<AccordionItem
|
136
162
|
contentRight={
|
137
|
-
<IconButton
|
163
|
+
<IconButton
|
164
|
+
view="secondary"
|
165
|
+
size={getSizeForIconButton(args.size)}
|
166
|
+
onClick={() => setActiveThree(!activeThree)}
|
167
|
+
>
|
138
168
|
<IconPlus size={getSizeForIcon(args.size)} />
|
139
169
|
</IconButton>
|
140
170
|
}
|
@@ -14,17 +14,17 @@ var config = exports.config = {
|
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
16
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft, _Accordion.accordionTokens.accordionItemPaddingHorizontal),
|
17
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0
|
17
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.063rem solid var(--surface-solid-tertiary);", ":0;"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft)
|
18
18
|
},
|
19
19
|
size: {
|
20
20
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
21
21
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.125rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
22
22
|
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.6875rem;", ":0.875rem;", ":0.375rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
23
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
23
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
24
|
+
h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.25rem;", ":0.25rem;", ":0.75rem;", ":1.5rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-bold-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemIconSize, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
25
|
+
h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":1.125rem;", ":0.25rem;", ":0.75rem;", ":1.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-bold-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemIconSize, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
26
|
+
h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.688rem;", ":0.875rem;", ":0.25rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),
|
27
|
+
h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-bold-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":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);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight)
|
28
28
|
}
|
29
29
|
}
|
30
30
|
};
|
package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx
CHANGED
@@ -95,6 +95,24 @@ export const Default: StoryObj<AccordionProps> = {
|
|
95
95
|
};
|
96
96
|
|
97
97
|
const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
|
98
|
+
const getSizeForIconButton = (size) => {
|
99
|
+
switch (size) {
|
100
|
+
case 'l':
|
101
|
+
case 'h2':
|
102
|
+
case 'h3':
|
103
|
+
return 'l';
|
104
|
+
case 'm':
|
105
|
+
return 'm';
|
106
|
+
case 's':
|
107
|
+
case 'h4':
|
108
|
+
return 's';
|
109
|
+
case 'xs':
|
110
|
+
case 'h5':
|
111
|
+
return 'xs';
|
112
|
+
default:
|
113
|
+
return 'm';
|
114
|
+
}
|
115
|
+
};
|
98
116
|
|
99
117
|
const ControlledAccordion = (props: AccordionProps) => {
|
100
118
|
const args = { ...props, text: undefined };
|
@@ -106,7 +124,11 @@ const ControlledAccordion = (props: AccordionProps) => {
|
|
106
124
|
<Accordion {...args}>
|
107
125
|
<AccordionItem
|
108
126
|
contentRight={
|
109
|
-
<IconButton
|
127
|
+
<IconButton
|
128
|
+
view="secondary"
|
129
|
+
size={getSizeForIconButton(args.size)}
|
130
|
+
onClick={() => setActiveFirst(!activeFirst)}
|
131
|
+
>
|
110
132
|
<IconPlus size={getSizeForIcon(args.size)} />
|
111
133
|
</IconButton>
|
112
134
|
}
|
@@ -120,7 +142,11 @@ const ControlledAccordion = (props: AccordionProps) => {
|
|
120
142
|
</AccordionItem>
|
121
143
|
<AccordionItem
|
122
144
|
contentRight={
|
123
|
-
<IconButton
|
145
|
+
<IconButton
|
146
|
+
view="secondary"
|
147
|
+
size={getSizeForIconButton(args.size)}
|
148
|
+
onClick={() => setActiveSecond(!activeSecond)}
|
149
|
+
>
|
124
150
|
<IconPlus size={getSizeForIcon(args.size)} />
|
125
151
|
</IconButton>
|
126
152
|
}
|
@@ -134,7 +160,11 @@ const ControlledAccordion = (props: AccordionProps) => {
|
|
134
160
|
</AccordionItem>
|
135
161
|
<AccordionItem
|
136
162
|
contentRight={
|
137
|
-
<IconButton
|
163
|
+
<IconButton
|
164
|
+
view="secondary"
|
165
|
+
size={getSizeForIconButton(args.size)}
|
166
|
+
onClick={() => setActiveThree(!activeThree)}
|
167
|
+
>
|
138
168
|
<IconPlus size={getSizeForIcon(args.size)} />
|
139
169
|
</IconButton>
|
140
170
|
}
|
@@ -24,6 +24,7 @@ export var tokens = {
|
|
24
24
|
accordionItemBorder: '--plasma-accordion-item-border',
|
25
25
|
accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
|
26
26
|
accordionItemIconColor: '--plasma-accordion-item-color-icon',
|
27
|
+
accordionItemIconSize: '--plasma-accordion-item-icon-szie',
|
27
28
|
accordionItemTitleColor: '--plasma-accordion-item-title-color',
|
28
29
|
accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
|
29
30
|
accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
|
@@ -1,5 +1,4 @@
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
-
var _StyledMinus, _StyledArrow;
|
3
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
4
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
5
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
@@ -63,21 +62,24 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
|
|
63
62
|
}, [value, type, leftContentRef, setLeftPadding]);
|
64
63
|
var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
|
65
64
|
var StyledAnimationPlus = function StyledAnimationPlus() {
|
66
|
-
return /*#__PURE__*/React.createElement(StyledPlus, null,
|
65
|
+
return /*#__PURE__*/React.createElement(StyledPlus, null, /*#__PURE__*/React.createElement(StyledMinus, {
|
67
66
|
size: "xs",
|
68
|
-
color: "inherit"
|
69
|
-
|
67
|
+
color: "inherit",
|
68
|
+
sizeCustomProperty: tokens.accordionItemIconSize
|
69
|
+
}), /*#__PURE__*/React.createElement(StyledMinus, {
|
70
70
|
size: "xs",
|
71
71
|
color: "inhert",
|
72
|
-
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement
|
72
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement,
|
73
|
+
sizeCustomProperty: tokens.accordionItemIconSize
|
73
74
|
}));
|
74
75
|
};
|
75
76
|
var accordionBorderRadius = convertRoundnessMatrix(pin, "var(".concat(tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
76
77
|
var disabledClass = disabled ? classes.accordionDisabled : '';
|
77
|
-
var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ?
|
78
|
+
var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? /*#__PURE__*/React.createElement(StyledArrow, {
|
78
79
|
size: "xs",
|
79
|
-
color: "inherit"
|
80
|
-
|
80
|
+
color: "inherit",
|
81
|
+
sizeCustomProperty: tokens.accordionItemIconSize
|
82
|
+
}) : undefined;
|
81
83
|
var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
|
82
84
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
|
83
85
|
var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
|
@@ -39,4 +39,4 @@ export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
|
|
39
39
|
})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
|
40
40
|
export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
|
41
41
|
componentId: "plasma-new-hope__sc-20ij9z-10"
|
42
|
-
})(["position:relative;
|
42
|
+
})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], tokens.accordionItemIconSize, tokens.accordionItemIconSize);
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import ReactDOM from 'react-dom';
|
3
|
+
import { canUseDOM } from '../../utils';
|
3
4
|
/**
|
4
5
|
* Вспомогательный компонент. Используется в Popup, Popover.
|
5
6
|
* Представляет собой ReactDOM.createPortal() в форме компонента.
|
@@ -9,6 +10,9 @@ export var Portal = function Portal(_ref) {
|
|
9
10
|
container = _ref.container,
|
10
11
|
_ref$disabled = _ref.disabled,
|
11
12
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
13
|
+
if (!canUseDOM) {
|
14
|
+
return null;
|
15
|
+
}
|
12
16
|
var portalContainer = typeof container === 'function' ? container() : container;
|
13
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, disabled || !portalContainer
|
17
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, (disabled || !portalContainer) && children, !disabled && portalContainer && /*#__PURE__*/ReactDOM.createPortal(children, portalContainer));
|
14
18
|
};
|
@@ -14,6 +14,7 @@ export var tokens = {
|
|
14
14
|
fontSize: '--plasma-segment-item-font-size',
|
15
15
|
fontStyle: '--plasma-segment-item-font-style',
|
16
16
|
fontWeight: '--plasma-segment-item-font-weight',
|
17
|
+
fontWeightSelectedItem: '--plasma-segment-item-font-weight-selected-item',
|
17
18
|
letterSpacing: '--plasma-segment-item-letter-spacing',
|
18
19
|
lineHeight: '--plasma-segment-item-lineheight',
|
19
20
|
outlineFocusColor: '--plasma-segment-outline-focus-color',
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
|
-
import { tokens } from '../../../../tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");--plasma_private-outline-radius:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");padding:var(", ");"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemWidth, tokens.itemHeight, tokens.itemPadding);
|
2
|
+
import { classes, tokens } from '../../../../tokens';
|
3
|
+
export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");--plasma_private-outline-radius:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");padding:var(", ");&.", "{font-weight:var(", ",var(", "));}"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemWidth, tokens.itemHeight, tokens.itemPadding, classes.selectedSegmentItem, tokens.fontWeightSelectedItem, tokens.fontWeight);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../../../tokens';
|
3
3
|
import { RightContent } from '../../SegmentItem.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}", ".", "{color:var(", ");}}&.", "{color:var(", ");background-color:var(", ");", "{color:var(", ");}", ".", "{color:var(", ");}&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemColorHover, tokens.itemBackgroundColorHover, RightContent, tokens.itemColorHover, RightContent, classes.segmentAdditionalText, tokens.itemAdditionalColorHover,
|
4
|
+
export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}", ".", "{color:var(", ");}}&.", "{color:var(", ");background-color:var(", ");", "{color:var(", ");}", ".", "{color:var(", ");}&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}", ".", "{color:var(", ");}}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemColorHover, tokens.itemBackgroundColorHover, RightContent, tokens.itemColorHover, RightContent, classes.segmentAdditionalText, tokens.itemAdditionalColorHover, classes.selectedSegmentItem, tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, RightContent, tokens.itemSelectedColor, RightContent, classes.segmentAdditionalText, tokens.itemSelectedAdditionalColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, RightContent, tokens.itemSelectedColorHover, RightContent, classes.segmentAdditionalText, tokens.itemSelectedAdditionalColorHover);
|
@@ -1,24 +1,26 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
2
|
import { component, mergeConfig } from '../../engines';
|
3
3
|
import { tooltipConfig } from '../Tooltip';
|
4
|
-
import { popoverClasses } from '../Popover';
|
5
4
|
import { classes, tokens } from './TextField.tokens';
|
6
5
|
var mergedConfig = /*#__PURE__*/mergeConfig(tooltipConfig);
|
7
6
|
var Tooltip = /*#__PURE__*/component(mergedConfig);
|
8
|
-
export var
|
7
|
+
export var Hint = /*#__PURE__*/styled(Tooltip).withConfig({
|
9
8
|
componentId: "plasma-new-hope__sc-g4vxbb-0"
|
9
|
+
})([""]);
|
10
|
+
export var InputWrapper = /*#__PURE__*/styled.div.withConfig({
|
11
|
+
componentId: "plasma-new-hope__sc-g4vxbb-1"
|
10
12
|
})(["position:relative;display:flex;align-items:center;box-sizing:border-box;"]);
|
11
13
|
export var InputLabelWrapper = /*#__PURE__*/styled.div.withConfig({
|
12
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
14
|
+
componentId: "plasma-new-hope__sc-g4vxbb-2"
|
13
15
|
})(["flex:1;overflow:scroll;position:relative;width:100%;display:inline-flex;align-items:center;::-webkit-scrollbar{display:none;}scrollbar-width:none;overscroll-behavior:contain;&.", "{height:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.hasChips), tokens.chipHeight, tokens.chipBorderRadius);
|
14
16
|
export var StyledChips = /*#__PURE__*/styled.div.withConfig({
|
15
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
17
|
+
componentId: "plasma-new-hope__sc-g4vxbb-3"
|
16
18
|
})(["display:flex;gap:var(", ");margin-right:var(", ",var(", "));user-select:none;"], tokens.chipGap, tokens.chipMarginRight, tokens.chipGap);
|
17
19
|
export var Input = /*#__PURE__*/styled.input.withConfig({
|
18
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
20
|
+
componentId: "plasma-new-hope__sc-g4vxbb-4"
|
19
21
|
})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&::placeholder{opacity:0;}"]);
|
20
22
|
export var InputContainer = /*#__PURE__*/styled.div.withConfig({
|
21
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
23
|
+
componentId: "plasma-new-hope__sc-g4vxbb-5"
|
22
24
|
})(["position:relative;display:flex;flex:1;min-width:", ";", "{max-width:", ";}"], function (_ref) {
|
23
25
|
var hasDynamicWidth = _ref.hasDynamicWidth;
|
24
26
|
return hasDynamicWidth ? 'auto' : '60%';
|
@@ -27,13 +29,13 @@ export var InputContainer = /*#__PURE__*/styled.div.withConfig({
|
|
27
29
|
return hasDynamicWidth ? '100%' : 'none';
|
28
30
|
});
|
29
31
|
export var InputPlaceholder = /*#__PURE__*/styled.div.withConfig({
|
30
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
32
|
+
componentId: "plasma-new-hope__sc-g4vxbb-6"
|
31
33
|
})(["display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", ");padding:", ";"], tokens.placeholderColor, function (_ref3) {
|
32
34
|
var hasPadding = _ref3.hasPadding;
|
33
35
|
return hasPadding ? "var(".concat(tokens.contentLabelInnerPadding, ")") : '0';
|
34
36
|
});
|
35
37
|
export var OuterLabelWrapper = /*#__PURE__*/styled.div.withConfig({
|
36
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
38
|
+
componentId: "plasma-new-hope__sc-g4vxbb-7"
|
37
39
|
})(["display:flex;align-items:center;white-space:", ";margin-bottom:", ";"], function (_ref4) {
|
38
40
|
var isInnerLabel = _ref4.isInnerLabel;
|
39
41
|
return isInnerLabel ? 'nowrap' : 'normal';
|
@@ -42,51 +44,48 @@ export var OuterLabelWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
42
44
|
return isInnerLabel ? "var(".concat(tokens.titleCaptionInnerLabelOffset, ")") : "var(".concat(tokens.labelOffset, ")");
|
43
45
|
});
|
44
46
|
export var TitleCaption = /*#__PURE__*/styled.div.withConfig({
|
45
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
47
|
+
componentId: "plasma-new-hope__sc-g4vxbb-8"
|
46
48
|
})(["display:inline-block;margin-left:auto;"]);
|
47
49
|
export var StyledIndicatorWrapper = /*#__PURE__*/styled.div.withConfig({
|
48
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
50
|
+
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
49
51
|
})(["position:relative;display:inline-flex;align-items:center;"]);
|
50
52
|
export var Label = /*#__PURE__*/styled.label.withConfig({
|
51
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
53
|
+
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
52
54
|
})(["display:inline-flex;"]);
|
53
55
|
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
54
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
56
|
+
componentId: "plasma-new-hope__sc-g4vxbb-11"
|
55
57
|
})(["margin:var(", ");color:", ";line-height:0;"], tokens.leftContentMargin, function (_ref6) {
|
56
58
|
var isDefaultView = _ref6.isDefaultView,
|
57
59
|
isClear = _ref6.isClear;
|
58
60
|
return !isDefaultView && isClear ? "var(".concat(tokens.clearColor, ")") : "var(".concat(tokens.contentSlotColor, ")");
|
59
61
|
});
|
60
62
|
export var StyledContentRightWrapper = /*#__PURE__*/styled.div.withConfig({
|
61
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
63
|
+
componentId: "plasma-new-hope__sc-g4vxbb-12"
|
62
64
|
})(["display:flex;align-items:center;"]);
|
63
65
|
export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
|
64
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
66
|
+
componentId: "plasma-new-hope__sc-g4vxbb-13"
|
65
67
|
})(["line-height:0;margin:var(", ");color:var(", ",var(", "));&:hover{color:var(", ",var(", "));cursor:pointer;}&:active{color:var(", ",var(", "));}"], tokens.rightContentMargin, tokens.contentSlotRightColor, tokens.contentSlotColor, tokens.contentSlotRightColorHover, tokens.contentSlotColorHover, tokens.contentSlotRightColorActive, tokens.contentSlotColorActive);
|
66
68
|
export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
|
67
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
69
|
+
componentId: "plasma-new-hope__sc-g4vxbb-14"
|
68
70
|
})([""]);
|
69
71
|
export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
|
70
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
72
|
+
componentId: "plasma-new-hope__sc-g4vxbb-15"
|
71
73
|
})(["visibility:", ";"], function (_ref7) {
|
72
74
|
var isHidden = _ref7.isHidden;
|
73
75
|
return isHidden ? 'hidden' : 'visible';
|
74
76
|
});
|
75
77
|
export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
|
76
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
78
|
+
componentId: "plasma-new-hope__sc-g4vxbb-16"
|
77
79
|
})([""]);
|
78
80
|
export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
|
79
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
81
|
+
componentId: "plasma-new-hope__sc-g4vxbb-17"
|
80
82
|
})(["color:var(", ");"], tokens.optionalColor);
|
81
83
|
export var StyledHintWrapper = /*#__PURE__*/styled.div.withConfig({
|
82
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
84
|
+
componentId: "plasma-new-hope__sc-g4vxbb-18"
|
83
85
|
})(["display:inline-block;line-height:0;&.", "{position:absolute;margin:0;inset:var(", ");}"], classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
|
84
86
|
export var HintTargetWrapper = /*#__PURE__*/styled.div.withConfig({
|
85
|
-
componentId: "plasma-new-hope__sc-g4vxbb-18"
|
86
|
-
})(["color:var(", ");display:flex;justify-content:center;align-items:center;"], tokens.hintIconColor);
|
87
|
-
export var Hint = /*#__PURE__*/styled(Tooltip).withConfig({
|
88
87
|
componentId: "plasma-new-hope__sc-g4vxbb-19"
|
89
|
-
})(["", "
|
88
|
+
})(["color:var(", ");display:flex;justify-content:center;align-items:center;"], tokens.hintIconColor);
|
90
89
|
export var HintIconWrapper = /*#__PURE__*/styled.div.withConfig({
|
91
90
|
componentId: "plasma-new-hope__sc-g4vxbb-20"
|
92
91
|
})(["display:flex;"]);
|
@@ -1,3 +1,7 @@
|
|
1
|
+
var _excluded = ["size", "color", "className"];
|
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
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
|
+
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; }
|
1
5
|
import React from 'react';
|
2
6
|
import { ChevronDownFill } from '../Icon.assets/ChevronDownFill';
|
3
7
|
import { IconRoot } from '../IconRoot';
|
@@ -5,11 +9,12 @@ export var IconChevronDownFill = function IconChevronDownFill(_ref) {
|
|
5
9
|
var _ref$size = _ref.size,
|
6
10
|
size = _ref$size === void 0 ? 'xs' : _ref$size,
|
7
11
|
color = _ref.color,
|
8
|
-
className = _ref.className
|
9
|
-
|
12
|
+
className = _ref.className,
|
13
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
14
|
+
return /*#__PURE__*/React.createElement(IconRoot, _extends({
|
10
15
|
className: className,
|
11
16
|
size: size,
|
12
17
|
color: color,
|
13
18
|
icon: ChevronDownFill
|
14
|
-
});
|
19
|
+
}, rest));
|
15
20
|
};
|
@@ -1,3 +1,7 @@
|
|
1
|
+
var _excluded = ["size", "color", "className"];
|
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
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
|
+
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; }
|
1
5
|
import React from 'react';
|
2
6
|
import { Minus } from '../Icon.assets/Minus';
|
3
7
|
import { IconRoot } from '../IconRoot';
|
@@ -5,11 +9,12 @@ export var IconMinus = function IconMinus(_ref) {
|
|
5
9
|
var _ref$size = _ref.size,
|
6
10
|
size = _ref$size === void 0 ? 's' : _ref$size,
|
7
11
|
color = _ref.color,
|
8
|
-
className = _ref.className
|
9
|
-
|
12
|
+
className = _ref.className,
|
13
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
14
|
+
return /*#__PURE__*/React.createElement(IconRoot, _extends({
|
10
15
|
className: className,
|
11
16
|
size: size,
|
12
17
|
color: color,
|
13
18
|
icon: Minus
|
14
|
-
});
|
19
|
+
}, rest));
|
15
20
|
};
|