@trafilea/afrodita-components 5.0.0-beta.18 → 5.0.0-beta.20
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/build/index.d.ts +21 -11
- package/build/index.esm.js +76 -32
- package/build/index.esm.js.map +1 -1
- package/build/index.js +76 -32
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -33,6 +33,7 @@ interface IconProps {
|
|
|
33
33
|
height?: number;
|
|
34
34
|
fill?: string;
|
|
35
35
|
title?: string;
|
|
36
|
+
testId?: string;
|
|
36
37
|
}
|
|
37
38
|
declare type ButtonType = 'button' | 'submit' | 'reset';
|
|
38
39
|
interface CTAProps {
|
|
@@ -100,7 +101,10 @@ declare type Filter = {
|
|
|
100
101
|
title: string;
|
|
101
102
|
columns: number;
|
|
102
103
|
isOpenByDefault?: boolean;
|
|
103
|
-
items:
|
|
104
|
+
items: Array<{
|
|
105
|
+
label: string;
|
|
106
|
+
checked?: boolean;
|
|
107
|
+
}>;
|
|
104
108
|
};
|
|
105
109
|
declare type FilterChange = {
|
|
106
110
|
sectionIndex: number;
|
|
@@ -191,9 +195,9 @@ declare namespace Other {
|
|
|
191
195
|
|
|
192
196
|
declare const ChevronDown: ({ height, width, fill }: IconProps) => JSX.Element;
|
|
193
197
|
|
|
194
|
-
declare const ChevronLeft: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
|
|
198
|
+
declare const ChevronLeft: ({ height, width, fill, opacity, testId }: IconWithOpacityProps) => JSX.Element;
|
|
195
199
|
|
|
196
|
-
declare const ChevronRight: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
|
|
200
|
+
declare const ChevronRight: ({ height, width, fill, opacity, testId }: IconWithOpacityProps) => JSX.Element;
|
|
197
201
|
|
|
198
202
|
declare const ChevronRightVariant: ({ height, width, fill }: IconProps) => JSX.Element;
|
|
199
203
|
|
|
@@ -342,7 +346,7 @@ interface IconWrapperProps {
|
|
|
342
346
|
viewBoxX: number;
|
|
343
347
|
viewBoxY: number;
|
|
344
348
|
children: React.ReactNode;
|
|
345
|
-
|
|
349
|
+
testId?: string;
|
|
346
350
|
fill?: string;
|
|
347
351
|
}
|
|
348
352
|
|
|
@@ -425,7 +429,7 @@ declare namespace Emoji {
|
|
|
425
429
|
};
|
|
426
430
|
}
|
|
427
431
|
|
|
428
|
-
declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
|
|
432
|
+
declare type IconType = ({ height, width, fill, testId }: IconProps) => JSX.Element;
|
|
429
433
|
declare const Icon: {
|
|
430
434
|
Custom: typeof Custom;
|
|
431
435
|
Arrows: typeof Arrows;
|
|
@@ -554,8 +558,9 @@ interface PriceLabelProps {
|
|
|
554
558
|
color?: string;
|
|
555
559
|
size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
|
|
556
560
|
discount?: DiscountTagProps;
|
|
561
|
+
testId?: string;
|
|
557
562
|
}
|
|
558
|
-
declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, size, }: PriceLabelProps) => JSX.Element;
|
|
563
|
+
declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, size, }: PriceLabelProps) => JSX.Element;
|
|
559
564
|
|
|
560
565
|
interface ColorPickerProps {
|
|
561
566
|
options: ColorPickerOption[];
|
|
@@ -1105,10 +1110,11 @@ interface MinimalisticProps {
|
|
|
1105
1110
|
discount: number;
|
|
1106
1111
|
offText: string;
|
|
1107
1112
|
widthAuto?: boolean;
|
|
1113
|
+
testId?: string;
|
|
1108
1114
|
}
|
|
1109
1115
|
|
|
1110
1116
|
declare const Bundle: {
|
|
1111
|
-
Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: MinimalisticProps) => JSX.Element;
|
|
1117
|
+
Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, testId, }: MinimalisticProps) => JSX.Element;
|
|
1112
1118
|
Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;
|
|
1113
1119
|
};
|
|
1114
1120
|
|
|
@@ -1181,6 +1187,7 @@ interface BaseCTAProps {
|
|
|
1181
1187
|
size?: ComponentSize;
|
|
1182
1188
|
text: string;
|
|
1183
1189
|
type?: ButtonType;
|
|
1190
|
+
inline?: boolean;
|
|
1184
1191
|
testId?: string;
|
|
1185
1192
|
}
|
|
1186
1193
|
|
|
@@ -1571,6 +1578,7 @@ declare type TextTagProps = {
|
|
|
1571
1578
|
declare type TextProps = AriaAttributes & {
|
|
1572
1579
|
style?: CSSProperties;
|
|
1573
1580
|
className?: string;
|
|
1581
|
+
testId?: string;
|
|
1574
1582
|
} & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
|
|
1575
1583
|
|
|
1576
1584
|
interface SearchBarProps {
|
|
@@ -1670,8 +1678,9 @@ declare type QuantityPickerPropsUncontrolled = {
|
|
|
1670
1678
|
declare type QuantityPickerProps = {
|
|
1671
1679
|
initialValue?: number;
|
|
1672
1680
|
maxValue?: number;
|
|
1681
|
+
testId?: string;
|
|
1673
1682
|
} & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
|
|
1674
|
-
declare const QuantityPicker: ({ initialValue, maxValue, value, onChange, }: QuantityPickerProps) => JSX.Element;
|
|
1683
|
+
declare const QuantityPicker: ({ initialValue, maxValue, value, testId, onChange, }: QuantityPickerProps) => JSX.Element;
|
|
1675
1684
|
|
|
1676
1685
|
declare type SpacingProps = {
|
|
1677
1686
|
size: number;
|
|
@@ -1700,8 +1709,8 @@ interface PackSelectorProps {
|
|
|
1700
1709
|
declare const PackSelector: FC<PackSelectorProps>;
|
|
1701
1710
|
|
|
1702
1711
|
interface FiltersProps {
|
|
1703
|
-
|
|
1704
|
-
onChange: (
|
|
1712
|
+
values: Filter[];
|
|
1713
|
+
onChange: (newValues: Filter[], filtersState?: FilterChange) => void;
|
|
1705
1714
|
tagsColor?: string;
|
|
1706
1715
|
filterByText: string;
|
|
1707
1716
|
clearAllText: string;
|
|
@@ -1710,8 +1719,9 @@ interface FiltersProps {
|
|
|
1710
1719
|
applyText: string;
|
|
1711
1720
|
mobileBackArrowClick: () => void;
|
|
1712
1721
|
mobileApplyButtonClick: () => void;
|
|
1722
|
+
onResetValues: () => void;
|
|
1713
1723
|
}
|
|
1714
|
-
declare const Filters: ({
|
|
1724
|
+
declare const Filters: ({ values, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, onResetValues, }: FiltersProps) => JSX.Element;
|
|
1715
1725
|
|
|
1716
1726
|
interface SearchNavigationProps {
|
|
1717
1727
|
returnText?: string;
|
package/build/index.esm.js
CHANGED
|
@@ -57,8 +57,8 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
var IconWrapper = function (_a) {
|
|
60
|
-
var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children,
|
|
61
|
-
return (jsxs$1("svg", __assign$1({ style: { display: 'inline-block', verticalAlign: 'middle' }, width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : width ? "".concat(width, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
60
|
+
var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children, testId = _a.testId, fill = _a.fill;
|
|
61
|
+
return (jsxs$1("svg", __assign$1({ style: { display: 'inline-block', verticalAlign: 'middle' }, width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : width ? "".concat(width, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid": testId ? testId : 'IconWrapper', fill: fill }, { children: [jsxs$1("title", { children: [title, " icon"] }, void 0), children] }), void 0));
|
|
62
62
|
};
|
|
63
63
|
|
|
64
64
|
var SixtyDaysGuarantee = function (_a) {
|
|
@@ -94,7 +94,7 @@ var LightExclamation = function (_a) {
|
|
|
94
94
|
|
|
95
95
|
var LightCheck = function (_a) {
|
|
96
96
|
var height = _a.height, width = _a.width, fill = _a.fill, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 5 : _b;
|
|
97
|
-
return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 110, viewBoxY: 110, title: "check", fill: "none",
|
|
97
|
+
return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 110, viewBoxY: 110, title: "check", fill: "none", testId: "LightCheck" }, { children: [jsx$1("circle", { cx: "54.9999", cy: "55", r: "47.9167", stroke: fill, strokeWidth: strokeWidth }, void 0), jsx$1("path", { d: "M72.2976 42.0884L46.957 67.5762L37.9226 58.186C36.6005 57.0681 34.397 57.0681 33.0748 58.186C31.7527 59.3039 31.7527 61.5396 33.0748 62.8811L44.7535 74.7307C45.4146 75.4014 46.296 75.625 47.1774 75.625C48.0588 75.625 48.9402 75.4014 49.3809 74.7307L76.925 46.7835C78.2471 45.4421 78.2471 43.4299 76.925 42.0884C75.6029 40.9705 73.6197 40.9705 72.2976 42.0884Z", fill: fill }, void 0)] }), void 0));
|
|
98
98
|
};
|
|
99
99
|
|
|
100
100
|
var Question = function (_a) {
|
|
@@ -130,7 +130,7 @@ var FitPredictor$1 = function (_a) {
|
|
|
130
130
|
|
|
131
131
|
var Loading = function (_a) {
|
|
132
132
|
var height = _a.height, width = _a.width, fill = _a.fill, backgroundColor = _a.backgroundColor;
|
|
133
|
-
return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 100, viewBoxY: 100, title: "loading",
|
|
133
|
+
return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 100, viewBoxY: 100, title: "loading", testId: "Loading" }, { children: [jsx$1("mask", __assign$1({ id: "loading-mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "100" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100ZM50 95C74.8528 95 95 74.8528 95 50C95 25.1472 74.8528 5 50 5C25.1472 5 5 25.1472 5 50C5 74.8528 25.1472 95 50 95Z" }, void 0) }), void 0), jsxs$1("g", __assign$1({ mask: "url(#loading-mask0)" }, { children: [jsx$1("rect", { width: "100", height: "100", fill: backgroundColor }, void 0), jsx$1("rect", { x: "50", width: "50", height: "50", fill: fill }, void 0)] }), void 0)] }), void 0));
|
|
134
134
|
};
|
|
135
135
|
|
|
136
136
|
var Shapermint = function (_a) {
|
|
@@ -157,13 +157,13 @@ var ChevronDown = function (_a) {
|
|
|
157
157
|
};
|
|
158
158
|
|
|
159
159
|
var ChevronLeft = function (_a) {
|
|
160
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity;
|
|
161
|
-
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron left" }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("path", { d: "M15.8577 33.3343C16.7726 34.2219 18.2973 34.2219 19.2122 33.3343C20.1271 32.4467 20.1271 30.9674 19.2122 30.0798C15.5527 26.5294 11.8933 23.0776 8.2338 19.5272C8.2338 19.4286 5.79416 17.2589 5.79416 17.1603C5.79416 17.0616 8.33545 14.7933 8.33545 14.6947C11.9949 11.1443 15.6544 7.59391 19.3139 3.94489C20.2287 3.05729 20.2287 1.57795 19.3139 0.690353C18.8056 0.197243 18.1957 0 17.5858 0C16.9759 0 16.3659 0.197243 15.8577 0.690353L0.711563 15.3851C0.304956 15.7795 0 16.3713 0 17.0616C0 17.6534 0.304956 18.2451 0.711563 18.7382L15.8577 33.3343Z", fill: fill }, void 0) }), void 0) }), void 0));
|
|
160
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
161
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron left", testId: testId }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("path", { d: "M15.8577 33.3343C16.7726 34.2219 18.2973 34.2219 19.2122 33.3343C20.1271 32.4467 20.1271 30.9674 19.2122 30.0798C15.5527 26.5294 11.8933 23.0776 8.2338 19.5272C8.2338 19.4286 5.79416 17.2589 5.79416 17.1603C5.79416 17.0616 8.33545 14.7933 8.33545 14.6947C11.9949 11.1443 15.6544 7.59391 19.3139 3.94489C20.2287 3.05729 20.2287 1.57795 19.3139 0.690353C18.8056 0.197243 18.1957 0 17.5858 0C16.9759 0 16.3659 0.197243 15.8577 0.690353L0.711563 15.3851C0.304956 15.7795 0 16.3713 0 17.0616C0 17.6534 0.304956 18.2451 0.711563 18.7382L15.8577 33.3343Z", fill: fill }, void 0) }), void 0) }), void 0));
|
|
162
162
|
};
|
|
163
163
|
|
|
164
164
|
var ChevronRight = function (_a) {
|
|
165
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity;
|
|
166
|
-
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right" }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("path", { d: "M4.14231 0.6657C3.22745 -0.2219 1.70267 -0.2219 0.787802 0.6657C-0.127065 1.5533 -0.127065 3.03263 0.787802 3.92023C4.44727 7.47063 8.10673 10.9224 11.7662 14.4728C11.7662 14.5714 14.2058 16.7411 14.2058 16.8397C14.2058 16.9384 11.6645 19.2067 11.6645 19.3053C8.00508 22.8557 4.34562 26.4061 0.68615 30.0551C-0.228717 30.9427 -0.228717 32.422 0.68615 33.3096C1.19441 33.8028 1.80432 34 2.41423 34C3.02414 34 3.63405 33.8028 4.14231 33.3096L19.2884 18.6149C19.695 18.2205 20 17.6287 20 16.9384C20 16.3466 19.695 15.7549 19.2884 15.2618L4.14231 0.6657Z", fill: fill }, void 0) }), void 0) }), void 0));
|
|
165
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
166
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right", testId: testId }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("path", { d: "M4.14231 0.6657C3.22745 -0.2219 1.70267 -0.2219 0.787802 0.6657C-0.127065 1.5533 -0.127065 3.03263 0.787802 3.92023C4.44727 7.47063 8.10673 10.9224 11.7662 14.4728C11.7662 14.5714 14.2058 16.7411 14.2058 16.8397C14.2058 16.9384 11.6645 19.2067 11.6645 19.3053C8.00508 22.8557 4.34562 26.4061 0.68615 30.0551C-0.228717 30.9427 -0.228717 32.422 0.68615 33.3096C1.19441 33.8028 1.80432 34 2.41423 34C3.02414 34 3.63405 33.8028 4.14231 33.3096L19.2884 18.6149C19.695 18.2205 20 17.6287 20 16.9384C20 16.3466 19.695 15.7549 19.2884 15.2618L4.14231 0.6657Z", fill: fill }, void 0) }), void 0) }), void 0));
|
|
167
167
|
};
|
|
168
168
|
|
|
169
169
|
var ChevronRightVariant = function (_a) {
|
|
@@ -224,17 +224,17 @@ var Rule = function (_a) {
|
|
|
224
224
|
|
|
225
225
|
var Star = function (_a) {
|
|
226
226
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
227
|
-
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star",
|
|
227
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star", testId: "star" }, { children: jsx$1("path", { d: "M16.9615 1.2523L12.3234 10.5605L1.9462 12.058C0.0852673 12.3251 -0.660526 14.596 0.689004 15.8966L8.19665 23.1379L6.42096 33.3671C6.10133 35.2161 8.0688 36.6011 9.71665 35.7363L19 30.9064L28.2833 35.7363C29.9312 36.594 31.8987 35.2161 31.579 33.3671L29.8033 23.1379L37.311 15.8966C38.6605 14.596 37.9147 12.3251 36.0538 12.058L25.6766 10.5605L21.0385 1.2523C20.2075 -0.406871 17.7996 -0.427962 16.9615 1.2523Z", fill: fill }, void 0) }), void 0));
|
|
228
228
|
};
|
|
229
229
|
|
|
230
230
|
var StarEmpty = function (_a) {
|
|
231
231
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
232
|
-
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star empty",
|
|
232
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star empty", testId: "star-empty" }, { children: jsx$1("path", { d: "M36.0538 12.058L25.6766 10.5605L21.0385 1.2523C20.2075 -0.406871 17.7996 -0.427962 16.9615 1.2523L12.3234 10.5605L1.9462 12.058C0.0852673 12.3251 -0.660526 14.596 0.689004 15.8966L8.19665 23.1379L6.42096 33.3671C6.10133 35.2161 8.0688 36.6011 9.71665 35.7363L19 30.9064L28.2833 35.7363C29.9312 36.594 31.8987 35.2161 31.579 33.3671L29.8033 23.1379L37.311 15.8966C38.6605 14.596 37.9147 12.3251 36.0538 12.058ZM26.1454 21.9568L27.8288 31.6868L19 27.096L10.1712 31.6868L11.8546 21.9568L4.70918 15.067L14.5821 13.6469L19 4.78858L23.4179 13.6469L33.2908 15.067L26.1454 21.9568Z", fill: fill }, void 0) }), void 0));
|
|
233
233
|
};
|
|
234
234
|
|
|
235
235
|
var StarHalf = function (_a) {
|
|
236
236
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
237
|
-
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star half",
|
|
237
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star half", testId: "star-half" }, { children: jsx$1("path", { d: "M36.0538 12.0593L25.677 10.5609L21.0397 1.25227C20.6229 0.420469 19.8097 0 18.9966 0C18.1884 0 17.3809 0.414844 16.9626 1.25227L12.3239 10.5602L1.94638 12.0572C0.0853893 12.3244 -0.660423 14.5948 0.688703 15.8955L8.19574 23.1377L6.41912 33.3668C6.16674 34.8279 7.34288 36 8.6601 36C9.00961 36 9.36905 35.9177 9.71431 35.7363L18.998 30.9073L28.2809 35.7377C28.6255 35.917 28.9842 35.9986 29.3323 35.9986C30.6509 35.9986 31.8292 34.8307 31.5768 33.3689L29.8023 23.1391L37.3108 15.8984C38.6606 14.5976 37.9148 12.3265 36.0538 12.0593ZM27.4231 20.7218L26.1385 21.9607L26.4419 23.7101L27.8258 31.687L20.5853 27.919L18.9987 27.0935L19.0008 4.79109L22.6186 12.0537L23.4112 13.6448L25.1842 13.9008L33.2825 15.0701L27.4231 20.7218Z", fill: fill }, void 0) }), void 0));
|
|
238
238
|
};
|
|
239
239
|
|
|
240
240
|
var Stopwatch = function (_a) {
|
|
@@ -439,7 +439,7 @@ var Payment = /*#__PURE__*/Object.freeze({
|
|
|
439
439
|
|
|
440
440
|
var SlideDot = function (_a) {
|
|
441
441
|
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
442
|
-
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot",
|
|
442
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testId: testId, fill: "none" }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
|
|
443
443
|
};
|
|
444
444
|
|
|
445
445
|
var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -4082,7 +4082,7 @@ var TAGS = {
|
|
|
4082
4082
|
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4083
4083
|
};
|
|
4084
4084
|
var Text$5 = function (_a) {
|
|
4085
|
-
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
4085
|
+
var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
|
|
4086
4086
|
var theme = useTheme();
|
|
4087
4087
|
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
4088
4088
|
var _b = useMemo(function () {
|
|
@@ -4126,7 +4126,7 @@ var Text$5 = function (_a) {
|
|
|
4126
4126
|
}
|
|
4127
4127
|
return propsHref;
|
|
4128
4128
|
}, [props.disabled, propsHref]);
|
|
4129
|
-
return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
|
|
4129
|
+
return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href, "data-testid": testId }, { children: children }), void 0));
|
|
4130
4130
|
};
|
|
4131
4131
|
var DEFAULTS = {
|
|
4132
4132
|
heading1: {
|
|
@@ -4381,10 +4381,17 @@ var TagContainer = newStyled.h1(templateObject_3$q || (templateObject_3$q = __ma
|
|
|
4381
4381
|
var size = _a.size;
|
|
4382
4382
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
4383
4383
|
});
|
|
4384
|
+
function getTestId() {
|
|
4385
|
+
var args = [];
|
|
4386
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
4387
|
+
args[_i] = arguments[_i];
|
|
4388
|
+
}
|
|
4389
|
+
return args.filter(Boolean).join('-');
|
|
4390
|
+
}
|
|
4384
4391
|
var PriceLabel = function (_a) {
|
|
4385
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
4392
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
4386
4393
|
var theme = useTheme();
|
|
4387
|
-
return (jsxs$1(Container$D, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid":
|
|
4394
|
+
return (jsxs$1(Container$D, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": getTestId(testId, 'price') }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4388
4395
|
};
|
|
4389
4396
|
var templateObject_1$$, templateObject_2$E, templateObject_3$q;
|
|
4390
4397
|
|
|
@@ -5137,9 +5144,9 @@ var RadioGroupInput = function (_a) {
|
|
|
5137
5144
|
var Wrapper$3 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5138
5145
|
var Container$s = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5139
5146
|
var Minimalistic = function (_a) {
|
|
5140
|
-
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
|
|
5147
|
+
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
5141
5148
|
var theme = useTheme();
|
|
5142
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$s, __assign$1({ "data-testid": "
|
|
5149
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$s, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$s, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5143
5150
|
};
|
|
5144
5151
|
var templateObject_1$M, templateObject_2$w;
|
|
5145
5152
|
|
|
@@ -10253,7 +10260,7 @@ var ProductItemMobile = function (_a) {
|
|
|
10253
10260
|
_a[ComponentSize.Small] = 2,
|
|
10254
10261
|
_a)[size];
|
|
10255
10262
|
}, [size]);
|
|
10256
|
-
return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10263
|
+
return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10257
10264
|
};
|
|
10258
10265
|
var templateObject_1$n, templateObject_2$d;
|
|
10259
10266
|
|
|
@@ -11192,9 +11199,9 @@ var Item = newStyled.span(templateObject_2$4 || (templateObject_2$4 = __makeTemp
|
|
|
11192
11199
|
var Number$1 = newStyled(Item)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
11193
11200
|
var IncreaseDecrease = newStyled(Item)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"])));
|
|
11194
11201
|
var QuantityPicker = function (_a) {
|
|
11195
|
-
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, onChange = _a.onChange;
|
|
11202
|
+
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
11196
11203
|
var theme = useTheme();
|
|
11197
|
-
var
|
|
11204
|
+
var _e = useState(value !== null && value !== void 0 ? value : initialValue), internal = _e[0], setInternal = _e[1];
|
|
11198
11205
|
useEffect(function () {
|
|
11199
11206
|
if (onChange) {
|
|
11200
11207
|
onChange(internal);
|
|
@@ -11213,7 +11220,7 @@ var QuantityPicker = function (_a) {
|
|
|
11213
11220
|
return clamp(value);
|
|
11214
11221
|
});
|
|
11215
11222
|
}, [value, clamp]);
|
|
11216
|
-
return (jsxs$1(Container$2, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid":
|
|
11223
|
+
return (jsxs$1(Container$2, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
11217
11224
|
};
|
|
11218
11225
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3;
|
|
11219
11226
|
|
|
@@ -15046,17 +15053,39 @@ var MobileClearContainer = newStyled.div(templateObject_8 || (templateObject_8 =
|
|
|
15046
15053
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8;
|
|
15047
15054
|
|
|
15048
15055
|
var Filters = function (_a) {
|
|
15049
|
-
var
|
|
15056
|
+
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
15050
15057
|
var theme = useTheme();
|
|
15051
|
-
var _c =
|
|
15058
|
+
var _c = useState(values), filters = _c[0], setFilter = _c[1];
|
|
15059
|
+
var _d = useState([]), checkedItems = _d[0], setCheckedItems = _d[1];
|
|
15060
|
+
var _e = useState(), filterState = _e[0], setFilterSection = _e[1];
|
|
15061
|
+
useEffect(function () {
|
|
15062
|
+
if (filters.length && filterState) {
|
|
15063
|
+
onChange(filters, filterState);
|
|
15064
|
+
}
|
|
15065
|
+
}, [filterState, filters, onChange]);
|
|
15052
15066
|
var handleCheckboxClick = useCallback(function (_a) {
|
|
15053
15067
|
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex, checked = _a.checked;
|
|
15054
|
-
|
|
15068
|
+
setFilterSection({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
|
|
15055
15069
|
setCheckedItems(function (prev) {
|
|
15056
15070
|
return checked
|
|
15057
|
-
? __spreadArray(__spreadArray([], prev, true), [
|
|
15071
|
+
? __spreadArray(__spreadArray([], prev, true), [
|
|
15072
|
+
{ sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex].label },
|
|
15073
|
+
], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
|
|
15058
15074
|
});
|
|
15059
|
-
|
|
15075
|
+
setFilter(function (prev) {
|
|
15076
|
+
return prev.map(function (filter, indexSection) {
|
|
15077
|
+
if (sectionIndex !== indexSection)
|
|
15078
|
+
return filter;
|
|
15079
|
+
return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value, indexItems) {
|
|
15080
|
+
return {
|
|
15081
|
+
label: value.label,
|
|
15082
|
+
checked: itemIndex === indexItems ? checked : value.checked,
|
|
15083
|
+
};
|
|
15084
|
+
}) });
|
|
15085
|
+
});
|
|
15086
|
+
});
|
|
15087
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15088
|
+
}, []);
|
|
15060
15089
|
var handleCloseClick = function (_a) {
|
|
15061
15090
|
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex;
|
|
15062
15091
|
var element = document.getElementById("filter[".concat(sectionIndex, ",").concat(itemIndex, "]"));
|
|
@@ -15067,15 +15096,30 @@ var Filters = function (_a) {
|
|
|
15067
15096
|
var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
|
|
15068
15097
|
handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
|
|
15069
15098
|
});
|
|
15099
|
+
setFilter(function (prev) {
|
|
15100
|
+
return prev.map(function (filter) {
|
|
15101
|
+
return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value) {
|
|
15102
|
+
return {
|
|
15103
|
+
label: value.label,
|
|
15104
|
+
checked: false,
|
|
15105
|
+
};
|
|
15106
|
+
}) });
|
|
15107
|
+
});
|
|
15108
|
+
});
|
|
15109
|
+
onResetValues();
|
|
15070
15110
|
};
|
|
15071
|
-
return (jsxs$1(Fragment$1, { children: [!isMobile ? (jsxs$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxs$1(Header, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
15111
|
+
return (jsxs$1(Fragment$1, { children: [!isMobile ? (jsxs$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxs$1(Header, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
15072
15112
|
};
|
|
15073
15113
|
var FilterCheckbox = function (_a) {
|
|
15074
|
-
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange;
|
|
15114
|
+
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked;
|
|
15115
|
+
var _b = React__default.useState(checked), defaultChecked = _b[0], setDefaultChecked = _b[1];
|
|
15075
15116
|
var onChange = useCallback(function (checked) {
|
|
15076
|
-
|
|
15077
|
-
}, [
|
|
15078
|
-
|
|
15117
|
+
setDefaultChecked(checked);
|
|
15118
|
+
}, []);
|
|
15119
|
+
React__default.useEffect(function () {
|
|
15120
|
+
onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: defaultChecked });
|
|
15121
|
+
}, [sectionIndex, itemIndex, onChangeProp, defaultChecked]);
|
|
15122
|
+
return (jsx$1(Checkbox, { onChange: onChange, checked: defaultChecked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
15079
15123
|
};
|
|
15080
15124
|
|
|
15081
15125
|
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|