@trafilea/afrodita-components 4.3.0 → 4.3.1-beta.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/build/index.d.ts +10 -6
- package/build/index.esm.js +100 -97
- package/build/index.esm.js.map +1 -1
- package/build/index.js +100 -97
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -439,8 +439,8 @@ var Payment = /*#__PURE__*/Object.freeze({
|
|
|
439
439
|
});
|
|
440
440
|
|
|
441
441
|
var SlideDot = function (_a) {
|
|
442
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity,
|
|
443
|
-
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid:
|
|
442
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
443
|
+
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid: testId, fill: "none" }, { children: jsxRuntime.jsx("g", __assign({ opacity: opacity }, { children: jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
|
|
444
444
|
};
|
|
445
445
|
|
|
446
446
|
var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -3457,7 +3457,7 @@ var AssetsProvider = function (_a) {
|
|
|
3457
3457
|
};
|
|
3458
3458
|
var useThemeAssets = function () { return React.useContext(AssetsContext); };
|
|
3459
3459
|
|
|
3460
|
-
var Container$
|
|
3460
|
+
var Container$E = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
3461
3461
|
var flex = _a.flex;
|
|
3462
3462
|
return flex &&
|
|
3463
3463
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3470,7 +3470,7 @@ var Container$F = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
3470
3470
|
var Card = function (_a) {
|
|
3471
3471
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
3472
3472
|
var theme = useTheme();
|
|
3473
|
-
return (jsxRuntime.jsx(Container$
|
|
3473
|
+
return (jsxRuntime.jsx(Container$E, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3474
3474
|
};
|
|
3475
3475
|
var Card$1 = Object.assign(Card, {
|
|
3476
3476
|
Header: CardHeader,
|
|
@@ -3496,8 +3496,8 @@ function jsxs(type, props, key) {
|
|
|
3496
3496
|
}
|
|
3497
3497
|
|
|
3498
3498
|
var BaseButton = function (_a) {
|
|
3499
|
-
var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline;
|
|
3500
|
-
return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: {
|
|
3499
|
+
var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.testId, testId = _c === void 0 ? 'base-button' : _c;
|
|
3500
|
+
return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
|
|
3501
3501
|
display: inline ? 'inline-flex' : 'flex',
|
|
3502
3502
|
justifyContent: 'center',
|
|
3503
3503
|
alignItems: 'center',
|
|
@@ -3544,7 +3544,8 @@ var BaseCTA = function (_a) {
|
|
|
3544
3544
|
} }) }, { children: text }), void 0));
|
|
3545
3545
|
};
|
|
3546
3546
|
|
|
3547
|
-
var ButtonPrimary = function (
|
|
3547
|
+
var ButtonPrimary = function (_a) {
|
|
3548
|
+
_a.testId; var props = __rest(_a, ["testId"]);
|
|
3548
3549
|
var theme = useTheme();
|
|
3549
3550
|
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3550
3551
|
backgroundColor: theme.component.button.primary.active.backgroundColor,
|
|
@@ -6177,7 +6178,7 @@ var CustomCheckboxStyles = {
|
|
|
6177
6178
|
},
|
|
6178
6179
|
};
|
|
6179
6180
|
|
|
6180
|
-
var Container$
|
|
6181
|
+
var Container$D = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
6181
6182
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6182
6183
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6183
6184
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6206,7 +6207,7 @@ var Checkbox = function (_a) {
|
|
|
6206
6207
|
React.useEffect(function () {
|
|
6207
6208
|
mounted.current = true;
|
|
6208
6209
|
}, []);
|
|
6209
|
-
return (jsxRuntime.jsxs(Container$
|
|
6210
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6210
6211
|
};
|
|
6211
6212
|
var templateObject_1$11, templateObject_2$E;
|
|
6212
6213
|
|
|
@@ -6256,8 +6257,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
6256
6257
|
});
|
|
6257
6258
|
|
|
6258
6259
|
function SimpleDropdown(_a) {
|
|
6259
|
-
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value;
|
|
6260
|
-
var
|
|
6260
|
+
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e;
|
|
6261
|
+
var _f = React.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
6261
6262
|
var selectedOptionLabel = React.useMemo(function () {
|
|
6262
6263
|
if (selectedValue) {
|
|
6263
6264
|
return selectedValue.label;
|
|
@@ -6277,7 +6278,7 @@ function SimpleDropdown(_a) {
|
|
|
6277
6278
|
setSelectedValue(value);
|
|
6278
6279
|
}, [value]);
|
|
6279
6280
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
6280
|
-
return (jsxRuntime.jsxs(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6281
|
+
return (jsxRuntime.jsxs(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6281
6282
|
}
|
|
6282
6283
|
|
|
6283
6284
|
var getStylesBySize$8 = function (size, theme) {
|
|
@@ -6295,13 +6296,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
6295
6296
|
}
|
|
6296
6297
|
};
|
|
6297
6298
|
var SimpleSelector = function (_a) {
|
|
6298
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
|
|
6299
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
|
|
6299
6300
|
var theme = useTheme();
|
|
6300
6301
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
6301
6302
|
var activeStyles = active
|
|
6302
6303
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
6303
6304
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
6304
|
-
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
6305
|
+
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
6305
6306
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
6306
6307
|
}, '&:disabled': {
|
|
6307
6308
|
color: theme.colors.shades['250'].color,
|
|
@@ -6310,7 +6311,7 @@ var SimpleSelector = function (_a) {
|
|
|
6310
6311
|
};
|
|
6311
6312
|
|
|
6312
6313
|
var SelectorSecondary = function (_a) {
|
|
6313
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, onClick = _a.onClick;
|
|
6314
|
+
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
6314
6315
|
var theme = useTheme();
|
|
6315
6316
|
var stylesByActive = active
|
|
6316
6317
|
? {
|
|
@@ -6325,7 +6326,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6325
6326
|
border: theme.component.selector.default.border,
|
|
6326
6327
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
6327
6328
|
};
|
|
6328
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
6329
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
6329
6330
|
background: theme.component.selector.hover.background,
|
|
6330
6331
|
color: theme.component.selector.hover.color,
|
|
6331
6332
|
}, '&:disabled': {
|
|
@@ -6478,7 +6479,7 @@ var SizeSelector = function (_a) {
|
|
|
6478
6479
|
return (jsx(SelectorSecondary, { css: {
|
|
6479
6480
|
padding: '0.75rem 1rem 0.625rem',
|
|
6480
6481
|
margin: '0 0.5rem 0.625rem 0',
|
|
6481
|
-
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6482
|
+
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
|
|
6482
6483
|
}) }), void 0)] }), void 0));
|
|
6483
6484
|
};
|
|
6484
6485
|
var templateObject_1$$;
|
|
@@ -6528,12 +6529,12 @@ var TextButton = function (_a) {
|
|
|
6528
6529
|
};
|
|
6529
6530
|
var templateObject_1$_;
|
|
6530
6531
|
|
|
6531
|
-
var Container$
|
|
6532
|
+
var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
6532
6533
|
var P$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6533
6534
|
var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6534
6535
|
var SizeFitGuide = function (_a) {
|
|
6535
6536
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6536
|
-
return (jsxRuntime.jsxs(Container$
|
|
6537
|
+
return (jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$3, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6537
6538
|
};
|
|
6538
6539
|
var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
|
|
6539
6540
|
|
|
@@ -6565,7 +6566,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6565
6566
|
};
|
|
6566
6567
|
}
|
|
6567
6568
|
};
|
|
6568
|
-
var Container$
|
|
6569
|
+
var Container$B = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
6569
6570
|
var backgroundColor = _a.backgroundColor;
|
|
6570
6571
|
return backgroundColor;
|
|
6571
6572
|
}, function (_a) {
|
|
@@ -6602,7 +6603,7 @@ var H3$2 = newStyled.h3(templateObject_2$B || (templateObject_2$B = __makeTempla
|
|
|
6602
6603
|
var DiscountTag = function (_a) {
|
|
6603
6604
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
6604
6605
|
var theme = useTheme();
|
|
6605
|
-
return (jsxRuntime.jsx(Container$
|
|
6606
|
+
return (jsxRuntime.jsx(Container$B, __assign({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6606
6607
|
};
|
|
6607
6608
|
var templateObject_1$Y, templateObject_2$B;
|
|
6608
6609
|
|
|
@@ -6628,7 +6629,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
6628
6629
|
};
|
|
6629
6630
|
}
|
|
6630
6631
|
};
|
|
6631
|
-
var Container$
|
|
6632
|
+
var Container$A = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6632
6633
|
var Price = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
6633
6634
|
var weight = _a.weight;
|
|
6634
6635
|
return (weight ? weight : '400');
|
|
@@ -6659,39 +6660,39 @@ var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __ma
|
|
|
6659
6660
|
var PriceLabel = function (_a) {
|
|
6660
6661
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6661
6662
|
var theme = useTheme();
|
|
6662
|
-
return (jsxRuntime.jsxs(Container$
|
|
6663
|
+
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsx(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6663
6664
|
};
|
|
6664
6665
|
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6665
6666
|
|
|
6666
6667
|
var OneColorSelector = function (_a) {
|
|
6667
|
-
var color = _a.color, selected = _a.selected,
|
|
6668
|
+
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
6668
6669
|
var theme = useTheme();
|
|
6669
6670
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6670
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6671
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6671
6672
|
};
|
|
6672
6673
|
|
|
6673
6674
|
var ThreeColorSelector = function (_a) {
|
|
6674
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected,
|
|
6675
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
|
|
6675
6676
|
var theme = useTheme();
|
|
6676
6677
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6677
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6678
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsxRuntime.jsx("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6678
6679
|
};
|
|
6679
6680
|
|
|
6680
6681
|
var TwoColorSelector = function (_a) {
|
|
6681
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected,
|
|
6682
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId;
|
|
6682
6683
|
var theme = useTheme();
|
|
6683
6684
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6684
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6685
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6685
6686
|
};
|
|
6686
6687
|
|
|
6687
6688
|
var ColorSelector = function (_a) {
|
|
6688
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected,
|
|
6689
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
|
|
6689
6690
|
if (secondaryColor && tertiaryColor)
|
|
6690
|
-
return (jsxRuntime.jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected,
|
|
6691
|
+
return (jsxRuntime.jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId }, void 0));
|
|
6691
6692
|
else if (secondaryColor && !tertiaryColor)
|
|
6692
|
-
return (jsxRuntime.jsx(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected,
|
|
6693
|
+
return (jsxRuntime.jsx(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected, testId: testId }, void 0));
|
|
6693
6694
|
else
|
|
6694
|
-
return jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected,
|
|
6695
|
+
return jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected, testId: testId }, void 0);
|
|
6695
6696
|
};
|
|
6696
6697
|
|
|
6697
6698
|
var OutOfStock = function (_a) {
|
|
@@ -6724,16 +6725,16 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6724
6725
|
});
|
|
6725
6726
|
var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
|
|
6726
6727
|
|
|
6727
|
-
var Container$
|
|
6728
|
+
var Container$z = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
|
|
6728
6729
|
var borderColor = _a.borderColor;
|
|
6729
6730
|
return borderColor;
|
|
6730
6731
|
});
|
|
6731
6732
|
var Image$2 = newStyled.img(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6732
6733
|
var PatternSelector = function (_a) {
|
|
6733
|
-
var url = _a.url, selected = _a.selected,
|
|
6734
|
+
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
6734
6735
|
var theme = useTheme();
|
|
6735
6736
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6736
|
-
return (jsxRuntime.jsx(Container$
|
|
6737
|
+
return (jsxRuntime.jsx(Container$z, __assign({ "data-testid": testId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6737
6738
|
};
|
|
6738
6739
|
var templateObject_1$V, templateObject_2$y;
|
|
6739
6740
|
|
|
@@ -6741,7 +6742,7 @@ var renderOptions$1 = function (options) {
|
|
|
6741
6742
|
if (options.length)
|
|
6742
6743
|
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
|
|
6743
6744
|
var checked = _a.checked;
|
|
6744
|
-
return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked,
|
|
6745
|
+
return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector") }), void 0)) : (option.pattern && jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
|
|
6745
6746
|
} }), option.label)); });
|
|
6746
6747
|
else
|
|
6747
6748
|
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
@@ -6753,7 +6754,7 @@ var SingleColorPicker = function (_a) {
|
|
|
6753
6754
|
|
|
6754
6755
|
var renderOptions = function (selectedColor, options) {
|
|
6755
6756
|
if (options && options.length)
|
|
6756
|
-
return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option),
|
|
6757
|
+
return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), testId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && (jsxRuntime.jsx(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
|
|
6757
6758
|
else
|
|
6758
6759
|
return jsxRuntime.jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6759
6760
|
};
|
|
@@ -6798,11 +6799,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
6798
6799
|
};
|
|
6799
6800
|
var templateObject_1$U;
|
|
6800
6801
|
|
|
6801
|
-
var Container$
|
|
6802
|
+
var Container$y = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"], ["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"])));
|
|
6802
6803
|
var Button$5 = newStyled.button(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
|
|
6803
6804
|
var ImagePreviewList = function (_a) {
|
|
6804
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick,
|
|
6805
|
-
return (jsxRuntime.jsx(Container$
|
|
6805
|
+
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
6806
|
+
return (jsxRuntime.jsx(Container$y, __assign({ "data-testid": testId }, { children: images.map(function (item) {
|
|
6806
6807
|
return (jsxRuntime.jsx(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6807
6808
|
}) }), void 0));
|
|
6808
6809
|
};
|
|
@@ -6815,16 +6816,16 @@ var Image = function (_a) {
|
|
|
6815
6816
|
};
|
|
6816
6817
|
var templateObject_1$S;
|
|
6817
6818
|
|
|
6818
|
-
var Container$
|
|
6819
|
+
var Container$x = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
6819
6820
|
var TopTagContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6820
6821
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
6821
6822
|
var ImageProductWithTags$1 = function (_a) {
|
|
6822
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
6823
|
-
return (jsxRuntime.jsxs(Container$
|
|
6823
|
+
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
6824
|
+
return (jsxRuntime.jsxs(Container$x, __assign({ "data-testid": testId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsxRuntime.jsx(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6824
6825
|
};
|
|
6825
6826
|
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6826
6827
|
|
|
6827
|
-
var Container$
|
|
6828
|
+
var Container$w = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
6828
6829
|
var ProductGallery = function (_a) {
|
|
6829
6830
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6830
6831
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6832,9 +6833,9 @@ var ProductGallery = function (_a) {
|
|
|
6832
6833
|
React.useEffect(function () {
|
|
6833
6834
|
setSelectedImage(initialValue);
|
|
6834
6835
|
}, [initialValue]);
|
|
6835
|
-
return (jsxRuntime.jsxs(Container$
|
|
6836
|
+
return (jsxRuntime.jsxs(Container$w, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
|
|
6836
6837
|
setSelectedImage(value);
|
|
6837
|
-
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement,
|
|
6838
|
+
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
6838
6839
|
};
|
|
6839
6840
|
var templateObject_1$Q;
|
|
6840
6841
|
|
|
@@ -6874,7 +6875,7 @@ var StarStyles = {
|
|
|
6874
6875
|
});
|
|
6875
6876
|
},
|
|
6876
6877
|
};
|
|
6877
|
-
var Container$
|
|
6878
|
+
var Container$v = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6878
6879
|
var templateObject_1$P;
|
|
6879
6880
|
|
|
6880
6881
|
var StarContainer = newStyled.div(function (_a) {
|
|
@@ -6892,7 +6893,7 @@ var sizes = {
|
|
|
6892
6893
|
};
|
|
6893
6894
|
var StarList = function (_a) {
|
|
6894
6895
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6895
|
-
return (jsxRuntime.jsx(Container$
|
|
6896
|
+
return (jsxRuntime.jsx(Container$v, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6896
6897
|
return (jsxRuntime.jsx(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
6897
6898
|
}) }, void 0));
|
|
6898
6899
|
};
|
|
@@ -6936,7 +6937,7 @@ var LabelStyles = {
|
|
|
6936
6937
|
});
|
|
6937
6938
|
},
|
|
6938
6939
|
};
|
|
6939
|
-
var Container$
|
|
6940
|
+
var Container$u = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6940
6941
|
var templateObject_1$O;
|
|
6941
6942
|
|
|
6942
6943
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -6950,10 +6951,10 @@ var starsNumber = 5;
|
|
|
6950
6951
|
var Rating = function (_a) {
|
|
6951
6952
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6952
6953
|
var theme = useTheme();
|
|
6953
|
-
return (jsxRuntime.jsxs(Container$
|
|
6954
|
+
return (jsxRuntime.jsxs(Container$u, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6954
6955
|
};
|
|
6955
6956
|
|
|
6956
|
-
var Container$
|
|
6957
|
+
var Container$t = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
6957
6958
|
var P$2 = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
6958
6959
|
var textButtonStyles = function (theme) { return ({
|
|
6959
6960
|
border: 'none',
|
|
@@ -6967,7 +6968,7 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6967
6968
|
var FitPredictor = function (_a) {
|
|
6968
6969
|
var onClick = _a.onClick;
|
|
6969
6970
|
var theme = useTheme();
|
|
6970
|
-
return (jsxs(Container$
|
|
6971
|
+
return (jsxs(Container$t, __assign({ theme: theme }, { children: [jsx(Container$t, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
6971
6972
|
};
|
|
6972
6973
|
var templateObject_1$N, templateObject_2$v;
|
|
6973
6974
|
|
|
@@ -7006,7 +7007,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
7006
7007
|
position: 'absolute',
|
|
7007
7008
|
});
|
|
7008
7009
|
});
|
|
7009
|
-
var Container$
|
|
7010
|
+
var Container$s = newStyled.div(function (_a) {
|
|
7010
7011
|
var widthAuto = _a.widthAuto;
|
|
7011
7012
|
return ({
|
|
7012
7013
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -7020,7 +7021,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
7020
7021
|
var ProgressBar = function (_a) {
|
|
7021
7022
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
7022
7023
|
var theme = useTheme();
|
|
7023
|
-
return (jsxRuntime.jsxs(Container$
|
|
7024
|
+
return (jsxRuntime.jsxs(Container$s, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
7024
7025
|
};
|
|
7025
7026
|
var templateObject_1$M;
|
|
7026
7027
|
|
|
@@ -7043,7 +7044,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7043
7044
|
};
|
|
7044
7045
|
}
|
|
7045
7046
|
};
|
|
7046
|
-
var Container$
|
|
7047
|
+
var Container$r = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
7047
7048
|
var backgroundColor = _a.backgroundColor;
|
|
7048
7049
|
return backgroundColor;
|
|
7049
7050
|
}, function (_a) {
|
|
@@ -7071,7 +7072,7 @@ var Container$s = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
7071
7072
|
var IconButton = function (_a) {
|
|
7072
7073
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7073
7074
|
var theme = useTheme();
|
|
7074
|
-
return (jsxRuntime.jsx(Container$
|
|
7075
|
+
return (jsxRuntime.jsx(Container$r, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
7075
7076
|
};
|
|
7076
7077
|
var templateObject_1$L;
|
|
7077
7078
|
|
|
@@ -7353,7 +7354,7 @@ var ContainerStyles = {
|
|
|
7353
7354
|
};
|
|
7354
7355
|
|
|
7355
7356
|
var Wrapper$4 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7356
|
-
var Container$
|
|
7357
|
+
var Container$q = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7357
7358
|
var Input$2 = newStyled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
7358
7359
|
var disabled = _a.disabled;
|
|
7359
7360
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -7369,7 +7370,7 @@ var RadioInput = function (_a) {
|
|
|
7369
7370
|
var value = event.currentTarget.value;
|
|
7370
7371
|
onChange({ value: value, label: label });
|
|
7371
7372
|
};
|
|
7372
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
7373
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$q, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7373
7374
|
};
|
|
7374
7375
|
var templateObject_1$J, templateObject_2$t;
|
|
7375
7376
|
|
|
@@ -7386,7 +7387,7 @@ var RadioGroupInput = function (_a) {
|
|
|
7386
7387
|
};
|
|
7387
7388
|
|
|
7388
7389
|
var Wrapper$3 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7389
|
-
var Container$
|
|
7390
|
+
var Container$p = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
7390
7391
|
var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
7391
7392
|
var color = _a.color;
|
|
7392
7393
|
return color;
|
|
@@ -7400,18 +7401,18 @@ var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemp
|
|
|
7400
7401
|
var Minimalistic = function (_a) {
|
|
7401
7402
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _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;
|
|
7402
7403
|
var theme = useTheme();
|
|
7403
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
7404
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$p, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$4, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: exports.ComponentSize.Small }, void 0)] }), void 0), jsxRuntime.jsxs(Container$p, __assign({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxRuntime.jsxs(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7404
7405
|
};
|
|
7405
7406
|
var templateObject_1$I, templateObject_2$s, templateObject_3$j;
|
|
7406
7407
|
|
|
7407
|
-
var Container$
|
|
7408
|
+
var Container$o = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7408
7409
|
var Title$3 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
7409
7410
|
var Details$1 = newStyled.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7410
7411
|
var PriceContainer$1 = newStyled.span(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
7411
7412
|
var Simple = function (_a) {
|
|
7412
7413
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
7413
7414
|
var theme = useTheme();
|
|
7414
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
7415
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(Title$3, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7415
7416
|
};
|
|
7416
7417
|
var templateObject_1$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
|
|
7417
7418
|
|
|
@@ -7420,10 +7421,10 @@ var Bundle = {
|
|
|
7420
7421
|
Simple: Simple,
|
|
7421
7422
|
};
|
|
7422
7423
|
|
|
7423
|
-
var Container$
|
|
7424
|
+
var Container$n = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
7424
7425
|
var Tag = function (_a) {
|
|
7425
7426
|
var text = _a.text, className = _a.className;
|
|
7426
|
-
return jsxRuntime.jsx(Container$
|
|
7427
|
+
return jsxRuntime.jsx(Container$n, __assign({ className: className }, { children: text }), void 0);
|
|
7427
7428
|
};
|
|
7428
7429
|
var templateObject_1$G;
|
|
7429
7430
|
|
|
@@ -7597,7 +7598,7 @@ var Error$1 = function (_a) {
|
|
|
7597
7598
|
};
|
|
7598
7599
|
var templateObject_1$E, templateObject_2$p;
|
|
7599
7600
|
|
|
7600
|
-
var Container$
|
|
7601
|
+
var Container$m = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
7601
7602
|
var color = _a.color;
|
|
7602
7603
|
return color;
|
|
7603
7604
|
});
|
|
@@ -7701,7 +7702,7 @@ var BaseInput = function (_a) {
|
|
|
7701
7702
|
highlight: theme.colors.border.highlight,
|
|
7702
7703
|
boxShadow: theme.component.input.boxShadow,
|
|
7703
7704
|
};
|
|
7704
|
-
return (jsxRuntime.jsxs(Container$
|
|
7705
|
+
return (jsxRuntime.jsxs(Container$m, __assign({ color: status === exports.InputValidationType.Valid
|
|
7705
7706
|
? theme.colors.shades['700'].color
|
|
7706
7707
|
: status === exports.InputValidationType.Error
|
|
7707
7708
|
? theme.colors.semantic.urgent.color
|
|
@@ -7722,7 +7723,7 @@ var Button$4 = function (_a) {
|
|
|
7722
7723
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7723
7724
|
};
|
|
7724
7725
|
|
|
7725
|
-
var Container$
|
|
7726
|
+
var Container$l = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
7726
7727
|
var theme = _a.theme;
|
|
7727
7728
|
return theme.component.inputCustom.input.borderRadius;
|
|
7728
7729
|
});
|
|
@@ -7739,7 +7740,7 @@ var Custom = function (_a) {
|
|
|
7739
7740
|
text: text,
|
|
7740
7741
|
disabled: rest.disabled,
|
|
7741
7742
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7742
|
-
return (jsxRuntime.jsx(Container$
|
|
7743
|
+
return (jsxRuntime.jsx(Container$l, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7743
7744
|
};
|
|
7744
7745
|
var templateObject_1$C, templateObject_2$n;
|
|
7745
7746
|
|
|
@@ -7774,13 +7775,13 @@ var BasePlusButton = function (_a) {
|
|
|
7774
7775
|
};
|
|
7775
7776
|
var templateObject_1$A;
|
|
7776
7777
|
|
|
7777
|
-
var Container$
|
|
7778
|
+
var Container$k = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
7778
7779
|
var IconContainer$3 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
7779
7780
|
var BasePlusIcon = function (_a) {
|
|
7780
7781
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7781
7782
|
var theme = useTheme();
|
|
7782
7783
|
var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7783
|
-
return (jsxRuntime.jsx(Container$
|
|
7784
|
+
return (jsxRuntime.jsx(Container$k, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$3, __assign({ color: status === exports.InputValidationType.Valid
|
|
7784
7785
|
? theme.colors.shades['700'].color
|
|
7785
7786
|
: status === exports.InputValidationType.Error
|
|
7786
7787
|
? theme.colors.semantic.urgent.color
|
|
@@ -7795,7 +7796,7 @@ var Input$1 = {
|
|
|
7795
7796
|
SimplePlusIcon: BasePlusIcon,
|
|
7796
7797
|
};
|
|
7797
7798
|
|
|
7798
|
-
var Container$
|
|
7799
|
+
var Container$j = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
7799
7800
|
var width = _a.width;
|
|
7800
7801
|
return width;
|
|
7801
7802
|
}, function (_a) {
|
|
@@ -7811,7 +7812,7 @@ var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
7811
7812
|
var PaymentMethod = function (_a) {
|
|
7812
7813
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7813
7814
|
var theme = useTheme();
|
|
7814
|
-
return (jsxRuntime.jsx(Container$
|
|
7815
|
+
return (jsxRuntime.jsx(Container$j, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
|
|
7815
7816
|
};
|
|
7816
7817
|
var templateObject_1$y;
|
|
7817
7818
|
|
|
@@ -7832,12 +7833,12 @@ var templateObject_1$x;
|
|
|
7832
7833
|
var Wrapper$2 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
7833
7834
|
var GrandTotal = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
7834
7835
|
var Currency = newStyled.span(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
7835
|
-
var Container$
|
|
7836
|
+
var Container$i = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
7836
7837
|
var Discount = newStyled.h3(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
7837
7838
|
var Total = function (_a) {
|
|
7838
7839
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7839
7840
|
var theme = useTheme();
|
|
7840
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
7841
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$i, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7841
7842
|
};
|
|
7842
7843
|
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
|
|
7843
7844
|
|
|
@@ -7866,13 +7867,13 @@ var Totals = {
|
|
|
7866
7867
|
Subtotal: Subtotal,
|
|
7867
7868
|
};
|
|
7868
7869
|
|
|
7869
|
-
var Container$
|
|
7870
|
+
var Container$h = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
7870
7871
|
var IconContainer$2 = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7871
7872
|
var Text$2 = newStyled.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7872
7873
|
var Details = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7873
7874
|
var Note = function (_a) {
|
|
7874
7875
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7875
|
-
return (jsxRuntime.jsxs(Container$
|
|
7876
|
+
return (jsxRuntime.jsxs(Container$h, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$2, __assign({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7876
7877
|
};
|
|
7877
7878
|
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
|
|
7878
7879
|
|
|
@@ -8003,21 +8004,21 @@ var DeliveryDetails = function (_a) {
|
|
|
8003
8004
|
};
|
|
8004
8005
|
var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
8005
8006
|
|
|
8006
|
-
var Container$
|
|
8007
|
+
var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
8007
8008
|
var H1$2 = newStyled.h1(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
8008
8009
|
var ScrollToTop = function (_a) {
|
|
8009
8010
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
8010
8011
|
var theme = useTheme();
|
|
8011
|
-
return (jsxRuntime.jsxs(Container$
|
|
8012
|
+
return (jsxRuntime.jsxs(Container$g, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
8012
8013
|
};
|
|
8013
8014
|
var templateObject_1$s, templateObject_2$g;
|
|
8014
8015
|
|
|
8015
|
-
var Container$
|
|
8016
|
+
var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"])));
|
|
8016
8017
|
var H1$1 = newStyled.h1(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
8017
8018
|
var OrderBar = function (_a) {
|
|
8018
8019
|
var message = _a.message;
|
|
8019
8020
|
var theme = useTheme();
|
|
8020
|
-
return (jsxRuntime.jsxs(Container$
|
|
8021
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
8021
8022
|
};
|
|
8022
8023
|
var templateObject_1$r, templateObject_2$f;
|
|
8023
8024
|
|
|
@@ -8032,7 +8033,7 @@ var SizeTable = function (_a) {
|
|
|
8032
8033
|
};
|
|
8033
8034
|
var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
|
|
8034
8035
|
|
|
8035
|
-
var Container$
|
|
8036
|
+
var Container$e = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
8036
8037
|
var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
8037
8038
|
var DescriptionContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), function (_a) {
|
|
8038
8039
|
var theme = _a.theme;
|
|
@@ -8073,7 +8074,7 @@ var Quantity = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
|
|
|
8073
8074
|
var SimpleOrderItem = function (_a) {
|
|
8074
8075
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
8075
8076
|
var theme = useTheme();
|
|
8076
|
-
return (jsxRuntime.jsxs(Container$
|
|
8077
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
8077
8078
|
};
|
|
8078
8079
|
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
|
|
8079
8080
|
|
|
@@ -8084,7 +8085,7 @@ function formatDate(date) {
|
|
|
8084
8085
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8085
8086
|
}
|
|
8086
8087
|
|
|
8087
|
-
var Container$
|
|
8088
|
+
var Container$d = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
8088
8089
|
var Heading = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), function (_a) {
|
|
8089
8090
|
var theme = _a.theme;
|
|
8090
8091
|
return mediaQueries({ theme: theme })({
|
|
@@ -8122,7 +8123,7 @@ var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObje
|
|
|
8122
8123
|
var Review = function (_a) {
|
|
8123
8124
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8124
8125
|
var theme = useTheme();
|
|
8125
|
-
return (jsxRuntime.jsxs(Container$
|
|
8126
|
+
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsxs(Heading, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
8126
8127
|
};
|
|
8127
8128
|
var templateObject_1$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8128
8129
|
|
|
@@ -12498,7 +12499,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12498
12499
|
height: height,
|
|
12499
12500
|
});
|
|
12500
12501
|
});
|
|
12501
|
-
var
|
|
12502
|
+
var ContainerNoLink = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
12503
|
+
var ContainerLink = ContainerNoLink.withComponent('a');
|
|
12502
12504
|
var H1 = newStyled.h1(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
12503
12505
|
var getStylesBySize = function (size) {
|
|
12504
12506
|
switch (size) {
|
|
@@ -12526,7 +12528,7 @@ var getStylesBySize = function (size) {
|
|
|
12526
12528
|
}
|
|
12527
12529
|
};
|
|
12528
12530
|
var ProductItemMobile = function (_a) {
|
|
12529
|
-
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
|
|
12531
|
+
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url;
|
|
12530
12532
|
var theme = useTheme();
|
|
12531
12533
|
var styles = getStylesBySize(size);
|
|
12532
12534
|
var spaces = React.useMemo(function () {
|
|
@@ -12543,7 +12545,8 @@ var ProductItemMobile = function (_a) {
|
|
|
12543
12545
|
_b)[size];
|
|
12544
12546
|
return [first, second];
|
|
12545
12547
|
}, [size]);
|
|
12546
|
-
|
|
12548
|
+
var Container = url ? ContainerLink : ContainerNoLink;
|
|
12549
|
+
return (jsxs(Container, __assign({ href: url }, { children: [tags ? (jsxs(ImageContainer, __assign({ 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: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
|
|
12547
12550
|
};
|
|
12548
12551
|
var templateObject_1$j, templateObject_2$9;
|
|
12549
12552
|
|
|
@@ -12774,9 +12777,9 @@ var Header = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTem
|
|
|
12774
12777
|
});
|
|
12775
12778
|
});
|
|
12776
12779
|
var ResultsPanel = function (_a) {
|
|
12777
|
-
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll,
|
|
12780
|
+
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12778
12781
|
var theme = useTheme();
|
|
12779
|
-
return (jsxRuntime.jsxs(Container$7, __assign({ "data-testid":
|
|
12782
|
+
return (jsxRuntime.jsxs(Container$7, __assign({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign({ theme: theme }, { children: jsxRuntime.jsx(Text$5, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12780
12783
|
};
|
|
12781
12784
|
var templateObject_1$c, templateObject_2$4, templateObject_3$4;
|
|
12782
12785
|
|
|
@@ -12924,7 +12927,7 @@ var SearchBar = function (_a) {
|
|
|
12924
12927
|
return function () { return clearTimeout(id); };
|
|
12925
12928
|
}, [onChange, state.term]);
|
|
12926
12929
|
var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
|
|
12927
|
-
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$6, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(ResultsPanel, {
|
|
12930
|
+
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$6, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (".concat(resultOptions.length, ")") : undefined, onClick: function (value) {
|
|
12928
12931
|
onSearch(value.title);
|
|
12929
12932
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
12930
12933
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
@@ -12934,8 +12937,8 @@ var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __ma
|
|
|
12934
12937
|
var TopTagContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
12935
12938
|
var BottomTagContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
12936
12939
|
var ImageProductWithTags = function (_a) {
|
|
12937
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
12938
|
-
return (jsxRuntime.jsxs(Container$5, __assign({ "data-testid":
|
|
12940
|
+
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
12941
|
+
return (jsxRuntime.jsxs(Container$5, __assign({ "data-testid": testId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
12939
12942
|
};
|
|
12940
12943
|
var templateObject_1$a, templateObject_2$3, templateObject_3$3;
|
|
12941
12944
|
|
|
@@ -12953,7 +12956,7 @@ var SlideDots = function (_a) {
|
|
|
12953
12956
|
var theme = useTheme();
|
|
12954
12957
|
return (jsxRuntime.jsx(Container$4, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12955
12958
|
? theme.colors.shades.white.color
|
|
12956
|
-
: theme.colors.shades['700'].color, opacity: 0.6,
|
|
12959
|
+
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12957
12960
|
};
|
|
12958
12961
|
var templateObject_1$8;
|
|
12959
12962
|
|
|
@@ -12961,7 +12964,7 @@ var NavigationButton = newStyled(ArrowButton)(templateObject_1$7 || (templateObj
|
|
|
12961
12964
|
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12962
12965
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12963
12966
|
var SlideNavigation = function (_a) {
|
|
12964
|
-
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate,
|
|
12967
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12965
12968
|
var theme = useTheme();
|
|
12966
12969
|
var upperLimit = quantity - 1;
|
|
12967
12970
|
var lowerLimit = 0;
|
|
@@ -12969,7 +12972,7 @@ var SlideNavigation = function (_a) {
|
|
|
12969
12972
|
onNavigate(selectedIndex - 1);
|
|
12970
12973
|
} }, void 0)), selectedIndex < upperLimit && (jsxRuntime.jsx(RightButton, { Icon: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
|
|
12971
12974
|
onNavigate(selectedIndex + 1);
|
|
12972
|
-
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId:
|
|
12975
|
+
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12973
12976
|
};
|
|
12974
12977
|
var templateObject_1$7, templateObject_2$2, templateObject_3$2;
|
|
12975
12978
|
|
|
@@ -12981,7 +12984,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12981
12984
|
React.useEffect(function () {
|
|
12982
12985
|
setSelectedImage(initialValue);
|
|
12983
12986
|
}, [initialValue]);
|
|
12984
|
-
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement,
|
|
12987
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12985
12988
|
};
|
|
12986
12989
|
var templateObject_1$6;
|
|
12987
12990
|
|