@salutejs/plasma-new-hope 0.249.0-canary.1720.13031638569.0 → 0.249.0-canary.1724.12986049597.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/Calendar/CalendarBase/CalendarBase.js +0 -8
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +36 -57
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +16 -31
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- 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 +11 -11
- 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/Calendar/CalendarBase/CalendarBase.js +0 -8
- package/emotion/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +36 -57
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +16 -31
- 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/Calendar/CalendarBase/CalendarBase.js +0 -8
- package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +38 -59
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +18 -33
- 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/Calendar/CalendarBase/CalendarBase.js +0 -8
- package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDate.js +38 -59
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.js +18 -33
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- 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 +11 -11
- 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/Calendar/CalendarBase/CalendarBase.js +0 -8
- package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +36 -57
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +16 -31
- 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 +5 -1
- 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/Calendar/CalendarBase/CalendarBase.js +0 -8
- package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +0 -8
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +38 -59
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +18 -33
- 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 +5 -1
- 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/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
- package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts +0 -2
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts +0 -4
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts +0 -2
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +0 -4
- package/types/components/DatePicker/SingleDate/SingleDate.types.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_b2c/components/DatePicker/DatePicker.d.ts +0 -2
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.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/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +0 -2
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
@@ -19,7 +19,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
|
19
19
|
var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
|
20
20
|
var _RangeDate = /*#__PURE__*/require("./RangeDate.styles");
|
21
21
|
var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover/RangeDatePopover");
|
22
|
-
var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "
|
22
|
+
var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
|
23
23
|
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); }
|
24
24
|
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; }
|
25
25
|
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); }
|
@@ -40,7 +40,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
40
40
|
isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
|
41
41
|
_ref$opened = _ref.opened,
|
42
42
|
opened = _ref$opened === void 0 ? false : _ref$opened,
|
43
|
-
externalValue = _ref.value,
|
44
43
|
label = _ref.label,
|
45
44
|
leftHelper = _ref.leftHelper,
|
46
45
|
contentLeft = _ref.contentLeft,
|
@@ -123,10 +122,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
123
122
|
var rootRef = (0, _react.useRef)(null);
|
124
123
|
var innerRefFirst = (0, _react.useRef)(null);
|
125
124
|
var innerRefSecond = (0, _react.useRef)(null);
|
126
|
-
var _ref2 = externalValue || [],
|
127
|
-
_ref3 = _slicedToArray(_ref2, 2),
|
128
|
-
startExternalValue = _ref3[0],
|
129
|
-
endExternalValue = _ref3[1];
|
130
125
|
var _useState = (0, _react.useState)(rangeRef === null || rangeRef === void 0 || (_rangeRef$current = rangeRef.current) === null || _rangeRef$current === void 0 ? void 0 : _rangeRef$current.firstTextField()),
|
131
126
|
_useState2 = _slicedToArray(_useState, 2),
|
132
127
|
firstInputRef = _useState2[0],
|
@@ -139,24 +134,24 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
139
134
|
_useState6 = _slicedToArray(_useState5, 2),
|
140
135
|
isInnerOpen = _useState6[0],
|
141
136
|
setIsInnerOpen = _useState6[1];
|
142
|
-
var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(
|
137
|
+
var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang)),
|
143
138
|
_useState8 = _slicedToArray(_useState7, 2),
|
144
139
|
calendarFirstValue = _useState8[0],
|
145
140
|
setCalendarFirstValue = _useState8[1];
|
146
141
|
var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
|
147
|
-
value:
|
142
|
+
value: defaultFirstDate,
|
148
143
|
format: format,
|
149
144
|
lang: lang
|
150
145
|
})),
|
151
146
|
_useState10 = _slicedToArray(_useState9, 2),
|
152
147
|
inputFirstValue = _useState10[0],
|
153
148
|
setInputFirstValue = _useState10[1];
|
154
|
-
var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(
|
149
|
+
var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang)),
|
155
150
|
_useState12 = _slicedToArray(_useState11, 2),
|
156
151
|
calendarSecondValue = _useState12[0],
|
157
152
|
setCalendarSecondValue = _useState12[1];
|
158
153
|
var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
|
159
|
-
value:
|
154
|
+
value: defaultSecondDate,
|
160
155
|
format: format,
|
161
156
|
lang: lang
|
162
157
|
})),
|
@@ -294,8 +289,6 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
294
289
|
}));
|
295
290
|
setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(startValue, format, lang));
|
296
291
|
setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(endValue, format, lang));
|
297
|
-
handleCommitFirstDate(startValue, true, false);
|
298
|
-
handleCommitSecondDate(endValue, true, false);
|
299
292
|
outerHandler === null || outerHandler === void 0 || outerHandler(event);
|
300
293
|
};
|
301
294
|
var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
|
@@ -321,10 +314,10 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
321
314
|
handleToggle(false);
|
322
315
|
}
|
323
316
|
};
|
324
|
-
var handleChangeCalendarValue = function handleChangeCalendarValue(
|
325
|
-
var
|
326
|
-
firstDate =
|
327
|
-
secondDate =
|
317
|
+
var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
|
318
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
319
|
+
firstDate = _ref3[0],
|
320
|
+
secondDate = _ref3[1];
|
328
321
|
if (firstDate) {
|
329
322
|
handleCommitFirstDate(firstDate, false, true, dateInfo);
|
330
323
|
}
|
@@ -401,56 +394,42 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
|
|
401
394
|
});
|
402
395
|
}, [opened]);
|
403
396
|
(0, _react.useEffect)(function () {
|
404
|
-
|
405
|
-
setFullDateEntered(true);
|
406
|
-
}
|
407
|
-
}, [calendarFirstValue, calendarSecondValue]);
|
408
|
-
(0, _react.useLayoutEffect)(function () {
|
397
|
+
setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
|
409
398
|
setInputFirstValue((0, _dateHelper.formatInputValue)({
|
410
|
-
value:
|
399
|
+
value: defaultFirstDate,
|
411
400
|
format: format,
|
412
401
|
lang: lang
|
413
402
|
}));
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
}
|
418
|
-
var _validateDateWithFull = (0, _dateHelper.validateDateWithFullMonth)({
|
419
|
-
currentValue: inputFirstValue,
|
420
|
-
format: format,
|
421
|
-
lang: lang
|
422
|
-
}),
|
423
|
-
hasMonthFullName = _validateDateWithFull.hasMonthFullName,
|
424
|
-
isValidMonth = _validateDateWithFull.isValidMonth,
|
425
|
-
isLengthEqual = _validateDateWithFull.isLengthEqual;
|
426
|
-
if (!hasMonthFullName && (inputFirstValue === null || inputFirstValue === void 0 ? void 0 : inputFirstValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
|
427
|
-
setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(inputFirstValue, format, lang));
|
428
|
-
}
|
429
|
-
}, [startExternalValue, defaultFirstDate, format, lang]);
|
430
|
-
(0, _react.useLayoutEffect)(function () {
|
403
|
+
}, [defaultFirstDate]);
|
404
|
+
(0, _react.useEffect)(function () {
|
405
|
+
setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
|
431
406
|
setInputSecondValue((0, _dateHelper.formatInputValue)({
|
432
|
-
value:
|
407
|
+
value: defaultSecondDate,
|
433
408
|
format: format,
|
434
409
|
lang: lang
|
435
410
|
}));
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
411
|
+
}, [defaultSecondDate]);
|
412
|
+
(0, _react.useEffect)(function () {
|
413
|
+
setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
|
414
|
+
setInputFirstValue((0, _dateHelper.formatInputValue)({
|
415
|
+
value: defaultFirstDate,
|
416
|
+
format: format,
|
417
|
+
lang: lang
|
418
|
+
}));
|
419
|
+
setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
|
420
|
+
setInputSecondValue((0, _dateHelper.formatInputValue)({
|
421
|
+
value: defaultSecondDate,
|
422
|
+
format: format,
|
423
|
+
lang: lang
|
424
|
+
}));
|
425
|
+
}, [format, lang]);
|
426
|
+
(0, _react.useEffect)(function () {
|
427
|
+
if (calendarFirstValue && calendarSecondValue) {
|
428
|
+
setFullDateEntered(true);
|
450
429
|
}
|
451
|
-
}, [
|
452
|
-
var RootWrapper = (0, _react.useCallback)(function (
|
453
|
-
var children =
|
430
|
+
}, [calendarFirstValue, calendarSecondValue]);
|
431
|
+
var RootWrapper = (0, _react.useCallback)(function (_ref4) {
|
432
|
+
var children = _ref4.children;
|
454
433
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
455
434
|
view: view,
|
456
435
|
size: size,
|
@@ -17,7 +17,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
|
|
17
17
|
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
18
18
|
var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
|
19
19
|
var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
|
20
|
-
var _excluded = ["className", "opened", "
|
20
|
+
var _excluded = ["className", "opened", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
|
21
21
|
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); }
|
22
22
|
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; }
|
23
23
|
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); }
|
@@ -34,7 +34,6 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
34
34
|
var className = _ref.className,
|
35
35
|
_ref$opened = _ref.opened,
|
36
36
|
opened = _ref$opened === void 0 ? false : _ref$opened,
|
37
|
-
value = _ref.value,
|
38
37
|
label = _ref.label,
|
39
38
|
_ref$labelPlacement = _ref.labelPlacement,
|
40
39
|
labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
|
@@ -103,12 +102,12 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
103
102
|
_useState2 = _slicedToArray(_useState, 2),
|
104
103
|
isInnerOpen = _useState2[0],
|
105
104
|
setIsInnerOpen = _useState2[1];
|
106
|
-
var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(
|
105
|
+
var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang)),
|
107
106
|
_useState4 = _slicedToArray(_useState3, 2),
|
108
107
|
calendarValue = _useState4[0],
|
109
108
|
setCalendarValue = _useState4[1];
|
110
109
|
var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
|
111
|
-
value:
|
110
|
+
value: defaultDate,
|
112
111
|
format: format,
|
113
112
|
lang: lang
|
114
113
|
})),
|
@@ -139,12 +138,6 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
139
138
|
datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
|
140
139
|
handleChangeValue = _useDatePicker.handleChangeValue,
|
141
140
|
handleCommitDate = _useDatePicker.handleCommitDate;
|
142
|
-
var handleBlur = function handleBlur(event, date) {
|
143
|
-
if (onBlur) {
|
144
|
-
onBlur(event);
|
145
|
-
}
|
146
|
-
handleCommitDate(date, true, false);
|
147
|
-
};
|
148
141
|
var handleToggle = function handleToggle(opened, event) {
|
149
142
|
if (disabled || readOnly) {
|
150
143
|
return;
|
@@ -183,9 +176,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
183
176
|
return handleCommitDate(date, true, false);
|
184
177
|
},
|
185
178
|
onFocus: onFocus,
|
186
|
-
onBlur:
|
187
|
-
return handleBlur(event, inputValue);
|
188
|
-
},
|
179
|
+
onBlur: onBlur,
|
189
180
|
onKeyDown: onKeyDown,
|
190
181
|
required: required,
|
191
182
|
requiredPlacement: requiredPlacement,
|
@@ -198,28 +189,22 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
198
189
|
return prevOpen !== opened && opened;
|
199
190
|
});
|
200
191
|
}, [opened]);
|
201
|
-
(0, _react.
|
192
|
+
(0, _react.useEffect)(function () {
|
193
|
+
setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
|
202
194
|
setInputValue((0, _dateHelper.formatInputValue)({
|
203
|
-
value:
|
195
|
+
value: defaultDate,
|
204
196
|
format: format,
|
205
197
|
lang: lang
|
206
198
|
}));
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
hasMonthFullName = _validateDateWithFull.hasMonthFullName,
|
217
|
-
isValidMonth = _validateDateWithFull.isValidMonth,
|
218
|
-
isLengthEqual = _validateDateWithFull.isLengthEqual;
|
219
|
-
if (!hasMonthFullName && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
|
220
|
-
setCalendarValue((0, _dateHelper.formatCalendarValue)(inputValue, format, lang));
|
221
|
-
}
|
222
|
-
}, [value, defaultDate, format, lang]);
|
199
|
+
}, [defaultDate]);
|
200
|
+
(0, _react.useEffect)(function () {
|
201
|
+
setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
|
202
|
+
setInputValue((0, _dateHelper.formatInputValue)({
|
203
|
+
value: defaultDate,
|
204
|
+
format: format,
|
205
|
+
lang: lang
|
206
|
+
}));
|
207
|
+
}, [format, lang]);
|
223
208
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
224
209
|
view: view,
|
225
210
|
size: size,
|
@@ -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
|
};
|
@@ -20,7 +20,11 @@ var config = exports.config = {
|
|
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.125rem;", ":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)(["", ":
|
17
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0rem;", ":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.125rem 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.125rem;", ":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);
|