@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.js
CHANGED
|
@@ -83,8 +83,8 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
var IconWrapper = function (_a) {
|
|
86
|
-
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,
|
|
87
|
-
return (jsxRuntime.jsxs("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":
|
|
86
|
+
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;
|
|
87
|
+
return (jsxRuntime.jsxs("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: [jsxRuntime.jsxs("title", { children: [title, " icon"] }, void 0), children] }), void 0));
|
|
88
88
|
};
|
|
89
89
|
|
|
90
90
|
var SixtyDaysGuarantee = function (_a) {
|
|
@@ -120,7 +120,7 @@ var LightExclamation = function (_a) {
|
|
|
120
120
|
|
|
121
121
|
var LightCheck = function (_a) {
|
|
122
122
|
var height = _a.height, width = _a.width, fill = _a.fill, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 5 : _b;
|
|
123
|
-
return (jsxRuntime.jsxs(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 110, viewBoxY: 110, title: "check", fill: "none",
|
|
123
|
+
return (jsxRuntime.jsxs(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 110, viewBoxY: 110, title: "check", fill: "none", testId: "LightCheck" }, { children: [jsxRuntime.jsx("circle", { cx: "54.9999", cy: "55", r: "47.9167", stroke: fill, strokeWidth: strokeWidth }, void 0), jsxRuntime.jsx("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));
|
|
124
124
|
};
|
|
125
125
|
|
|
126
126
|
var Question = function (_a) {
|
|
@@ -156,7 +156,7 @@ var FitPredictor$1 = function (_a) {
|
|
|
156
156
|
|
|
157
157
|
var Loading = function (_a) {
|
|
158
158
|
var height = _a.height, width = _a.width, fill = _a.fill, backgroundColor = _a.backgroundColor;
|
|
159
|
-
return (jsxRuntime.jsxs(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 100, viewBoxY: 100, title: "loading",
|
|
159
|
+
return (jsxRuntime.jsxs(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 100, viewBoxY: 100, title: "loading", testId: "Loading" }, { children: [jsxRuntime.jsx("mask", __assign$1({ id: "loading-mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "100" }, { children: jsxRuntime.jsx("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), jsxRuntime.jsxs("g", __assign$1({ mask: "url(#loading-mask0)" }, { children: [jsxRuntime.jsx("rect", { width: "100", height: "100", fill: backgroundColor }, void 0), jsxRuntime.jsx("rect", { x: "50", width: "50", height: "50", fill: fill }, void 0)] }), void 0)] }), void 0));
|
|
160
160
|
};
|
|
161
161
|
|
|
162
162
|
var Shapermint = function (_a) {
|
|
@@ -183,13 +183,13 @@ var ChevronDown = function (_a) {
|
|
|
183
183
|
};
|
|
184
184
|
|
|
185
185
|
var ChevronLeft = function (_a) {
|
|
186
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity;
|
|
187
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron left" }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("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));
|
|
186
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
187
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron left", testId: testId }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("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));
|
|
188
188
|
};
|
|
189
189
|
|
|
190
190
|
var ChevronRight = function (_a) {
|
|
191
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity;
|
|
192
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right" }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("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));
|
|
191
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
192
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right", testId: testId }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("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));
|
|
193
193
|
};
|
|
194
194
|
|
|
195
195
|
var ChevronRightVariant = function (_a) {
|
|
@@ -250,17 +250,17 @@ var Rule = function (_a) {
|
|
|
250
250
|
|
|
251
251
|
var Star = function (_a) {
|
|
252
252
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
253
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star",
|
|
253
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star", testId: "star" }, { children: jsxRuntime.jsx("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));
|
|
254
254
|
};
|
|
255
255
|
|
|
256
256
|
var StarEmpty = function (_a) {
|
|
257
257
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
258
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star empty",
|
|
258
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star empty", testId: "star-empty" }, { children: jsxRuntime.jsx("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));
|
|
259
259
|
};
|
|
260
260
|
|
|
261
261
|
var StarHalf = function (_a) {
|
|
262
262
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
263
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star half",
|
|
263
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star half", testId: "star-half" }, { children: jsxRuntime.jsx("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));
|
|
264
264
|
};
|
|
265
265
|
|
|
266
266
|
var Stopwatch = function (_a) {
|
|
@@ -465,7 +465,7 @@ var Payment = /*#__PURE__*/Object.freeze({
|
|
|
465
465
|
|
|
466
466
|
var SlideDot = function (_a) {
|
|
467
467
|
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
468
|
-
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot",
|
|
468
|
+
return (jsxRuntime.jsx(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testId: testId, fill: "none" }, { children: jsxRuntime.jsx("g", __assign$1({ opacity: opacity }, { children: jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
|
|
469
469
|
};
|
|
470
470
|
|
|
471
471
|
var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -4108,7 +4108,7 @@ var TAGS = {
|
|
|
4108
4108
|
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' : ''); }),
|
|
4109
4109
|
};
|
|
4110
4110
|
var Text$5 = function (_a) {
|
|
4111
|
-
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
4111
|
+
var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
|
|
4112
4112
|
var theme = useTheme();
|
|
4113
4113
|
var Tag = React$2.useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
4114
4114
|
var _b = React$2.useMemo(function () {
|
|
@@ -4152,7 +4152,7 @@ var Text$5 = function (_a) {
|
|
|
4152
4152
|
}
|
|
4153
4153
|
return propsHref;
|
|
4154
4154
|
}, [props.disabled, propsHref]);
|
|
4155
|
-
return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
|
|
4155
|
+
return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href, "data-testid": testId }, { children: children }), void 0));
|
|
4156
4156
|
};
|
|
4157
4157
|
var DEFAULTS = {
|
|
4158
4158
|
heading1: {
|
|
@@ -4407,10 +4407,17 @@ var TagContainer = newStyled.h1(templateObject_3$q || (templateObject_3$q = __ma
|
|
|
4407
4407
|
var size = _a.size;
|
|
4408
4408
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
4409
4409
|
});
|
|
4410
|
+
function getTestId() {
|
|
4411
|
+
var args = [];
|
|
4412
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
4413
|
+
args[_i] = arguments[_i];
|
|
4414
|
+
}
|
|
4415
|
+
return args.filter(Boolean).join('-');
|
|
4416
|
+
}
|
|
4410
4417
|
var PriceLabel = function (_a) {
|
|
4411
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
4418
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
4412
4419
|
var theme = useTheme();
|
|
4413
|
-
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid":
|
|
4420
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": getTestId(testId, 'price') }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(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 && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4414
4421
|
};
|
|
4415
4422
|
var templateObject_1$$, templateObject_2$E, templateObject_3$q;
|
|
4416
4423
|
|
|
@@ -5163,9 +5170,9 @@ var RadioGroupInput = function (_a) {
|
|
|
5163
5170
|
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"])));
|
|
5164
5171
|
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"])));
|
|
5165
5172
|
var Minimalistic = function (_a) {
|
|
5166
|
-
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;
|
|
5173
|
+
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;
|
|
5167
5174
|
var theme = useTheme();
|
|
5168
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "
|
|
5175
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(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), jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5169
5176
|
};
|
|
5170
5177
|
var templateObject_1$M, templateObject_2$w;
|
|
5171
5178
|
|
|
@@ -10279,7 +10286,7 @@ var ProductItemMobile = function (_a) {
|
|
|
10279
10286
|
_a[exports.ComponentSize.Small] = 2,
|
|
10280
10287
|
_a)[size];
|
|
10281
10288
|
}, [size]);
|
|
10282
|
-
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: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.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: exports.ComponentSize.Small }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10289
|
+
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: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.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: exports.ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10283
10290
|
};
|
|
10284
10291
|
var templateObject_1$n, templateObject_2$d;
|
|
10285
10292
|
|
|
@@ -11218,9 +11225,9 @@ var Item = newStyled.span(templateObject_2$4 || (templateObject_2$4 = __makeTemp
|
|
|
11218
11225
|
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"])));
|
|
11219
11226
|
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"])));
|
|
11220
11227
|
var QuantityPicker = function (_a) {
|
|
11221
|
-
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;
|
|
11228
|
+
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;
|
|
11222
11229
|
var theme = useTheme();
|
|
11223
|
-
var
|
|
11230
|
+
var _e = React$2.useState(value !== null && value !== void 0 ? value : initialValue), internal = _e[0], setInternal = _e[1];
|
|
11224
11231
|
React$2.useEffect(function () {
|
|
11225
11232
|
if (onChange) {
|
|
11226
11233
|
onChange(internal);
|
|
@@ -11239,7 +11246,7 @@ var QuantityPicker = function (_a) {
|
|
|
11239
11246
|
return clamp(value);
|
|
11240
11247
|
});
|
|
11241
11248
|
}, [value, clamp]);
|
|
11242
|
-
return (jsxRuntime.jsxs(Container$2, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid":
|
|
11249
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
11243
11250
|
};
|
|
11244
11251
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3;
|
|
11245
11252
|
|
|
@@ -15072,17 +15079,39 @@ var MobileClearContainer = newStyled.div(templateObject_8 || (templateObject_8 =
|
|
|
15072
15079
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8;
|
|
15073
15080
|
|
|
15074
15081
|
var Filters = function (_a) {
|
|
15075
|
-
var
|
|
15082
|
+
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;
|
|
15076
15083
|
var theme = useTheme();
|
|
15077
|
-
var _c =
|
|
15084
|
+
var _c = React$2.useState(values), filters = _c[0], setFilter = _c[1];
|
|
15085
|
+
var _d = React$2.useState([]), checkedItems = _d[0], setCheckedItems = _d[1];
|
|
15086
|
+
var _e = React$2.useState(), filterState = _e[0], setFilterSection = _e[1];
|
|
15087
|
+
React$2.useEffect(function () {
|
|
15088
|
+
if (filters.length && filterState) {
|
|
15089
|
+
onChange(filters, filterState);
|
|
15090
|
+
}
|
|
15091
|
+
}, [filterState, filters, onChange]);
|
|
15078
15092
|
var handleCheckboxClick = React$2.useCallback(function (_a) {
|
|
15079
15093
|
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex, checked = _a.checked;
|
|
15080
|
-
|
|
15094
|
+
setFilterSection({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
|
|
15081
15095
|
setCheckedItems(function (prev) {
|
|
15082
15096
|
return checked
|
|
15083
|
-
? __spreadArray(__spreadArray([], prev, true), [
|
|
15097
|
+
? __spreadArray(__spreadArray([], prev, true), [
|
|
15098
|
+
{ sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex].label },
|
|
15099
|
+
], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
|
|
15084
15100
|
});
|
|
15085
|
-
|
|
15101
|
+
setFilter(function (prev) {
|
|
15102
|
+
return prev.map(function (filter, indexSection) {
|
|
15103
|
+
if (sectionIndex !== indexSection)
|
|
15104
|
+
return filter;
|
|
15105
|
+
return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value, indexItems) {
|
|
15106
|
+
return {
|
|
15107
|
+
label: value.label,
|
|
15108
|
+
checked: itemIndex === indexItems ? checked : value.checked,
|
|
15109
|
+
};
|
|
15110
|
+
}) });
|
|
15111
|
+
});
|
|
15112
|
+
});
|
|
15113
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15114
|
+
}, []);
|
|
15086
15115
|
var handleCloseClick = function (_a) {
|
|
15087
15116
|
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex;
|
|
15088
15117
|
var element = document.getElementById("filter[".concat(sectionIndex, ",").concat(itemIndex, "]"));
|
|
@@ -15093,15 +15122,30 @@ var Filters = function (_a) {
|
|
|
15093
15122
|
var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
|
|
15094
15123
|
handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
|
|
15095
15124
|
});
|
|
15125
|
+
setFilter(function (prev) {
|
|
15126
|
+
return prev.map(function (filter) {
|
|
15127
|
+
return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value) {
|
|
15128
|
+
return {
|
|
15129
|
+
label: value.label,
|
|
15130
|
+
checked: false,
|
|
15131
|
+
};
|
|
15132
|
+
}) });
|
|
15133
|
+
});
|
|
15134
|
+
});
|
|
15135
|
+
onResetValues();
|
|
15096
15136
|
};
|
|
15097
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsxRuntime.jsx(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsxRuntime.jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxRuntime.jsxs(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsxRuntime.jsx(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsxRuntime.jsx(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsxRuntime.jsx(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsxRuntime.jsx(FilterCheckbox, { onChange: handleCheckboxClick, text: item, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxRuntime.jsxs(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxRuntime.jsxs(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsxRuntime.jsx(MobileIconsContainer, { children: jsxRuntime.jsx(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsxRuntime.jsx(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsxRuntime.jsx(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
15137
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsxRuntime.jsx(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsxRuntime.jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxRuntime.jsxs(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsxRuntime.jsx(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsxRuntime.jsx(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsxRuntime.jsx(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsxRuntime.jsx(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxRuntime.jsxs(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxRuntime.jsxs(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsxRuntime.jsx(MobileIconsContainer, { children: jsxRuntime.jsx(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsxRuntime.jsx(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsxRuntime.jsx(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
15098
15138
|
};
|
|
15099
15139
|
var FilterCheckbox = function (_a) {
|
|
15100
|
-
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange;
|
|
15140
|
+
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked;
|
|
15141
|
+
var _b = React__default["default"].useState(checked), defaultChecked = _b[0], setDefaultChecked = _b[1];
|
|
15101
15142
|
var onChange = React$2.useCallback(function (checked) {
|
|
15102
|
-
|
|
15103
|
-
}, [
|
|
15104
|
-
|
|
15143
|
+
setDefaultChecked(checked);
|
|
15144
|
+
}, []);
|
|
15145
|
+
React__default["default"].useEffect(function () {
|
|
15146
|
+
onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: defaultChecked });
|
|
15147
|
+
}, [sectionIndex, itemIndex, onChangeProp, defaultChecked]);
|
|
15148
|
+
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: defaultChecked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
15105
15149
|
};
|
|
15106
15150
|
|
|
15107
15151
|
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"])));
|