@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.esm.js
CHANGED
|
@@ -431,8 +431,8 @@ var Payment = /*#__PURE__*/Object.freeze({
|
|
|
431
431
|
});
|
|
432
432
|
|
|
433
433
|
var SlideDot = function (_a) {
|
|
434
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity,
|
|
435
|
-
return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid:
|
|
434
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
435
|
+
return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid: testId, fill: "none" }, { children: jsx$1("g", __assign({ opacity: opacity }, { children: jsx$1("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
|
|
436
436
|
};
|
|
437
437
|
|
|
438
438
|
var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -3449,7 +3449,7 @@ var AssetsProvider = function (_a) {
|
|
|
3449
3449
|
};
|
|
3450
3450
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3451
3451
|
|
|
3452
|
-
var Container$
|
|
3452
|
+
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) {
|
|
3453
3453
|
var flex = _a.flex;
|
|
3454
3454
|
return flex &&
|
|
3455
3455
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3462,7 +3462,7 @@ var Container$F = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
3462
3462
|
var Card = function (_a) {
|
|
3463
3463
|
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;
|
|
3464
3464
|
var theme = useTheme();
|
|
3465
|
-
return (jsx$1(Container$
|
|
3465
|
+
return (jsx$1(Container$E, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3466
3466
|
};
|
|
3467
3467
|
var Card$1 = Object.assign(Card, {
|
|
3468
3468
|
Header: CardHeader,
|
|
@@ -3488,8 +3488,8 @@ function jsxs(type, props, key) {
|
|
|
3488
3488
|
}
|
|
3489
3489
|
|
|
3490
3490
|
var BaseButton = function (_a) {
|
|
3491
|
-
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;
|
|
3492
|
-
return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: {
|
|
3491
|
+
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;
|
|
3492
|
+
return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
|
|
3493
3493
|
display: inline ? 'inline-flex' : 'flex',
|
|
3494
3494
|
justifyContent: 'center',
|
|
3495
3495
|
alignItems: 'center',
|
|
@@ -3536,7 +3536,8 @@ var BaseCTA = function (_a) {
|
|
|
3536
3536
|
} }) }, { children: text }), void 0));
|
|
3537
3537
|
};
|
|
3538
3538
|
|
|
3539
|
-
var ButtonPrimary = function (
|
|
3539
|
+
var ButtonPrimary = function (_a) {
|
|
3540
|
+
_a.testId; var props = __rest(_a, ["testId"]);
|
|
3540
3541
|
var theme = useTheme();
|
|
3541
3542
|
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3542
3543
|
backgroundColor: theme.component.button.primary.active.backgroundColor,
|
|
@@ -6169,7 +6170,7 @@ var CustomCheckboxStyles = {
|
|
|
6169
6170
|
},
|
|
6170
6171
|
};
|
|
6171
6172
|
|
|
6172
|
-
var Container$
|
|
6173
|
+
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"])));
|
|
6173
6174
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6174
6175
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6175
6176
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6198,7 +6199,7 @@ var Checkbox = function (_a) {
|
|
|
6198
6199
|
useEffect(function () {
|
|
6199
6200
|
mounted.current = true;
|
|
6200
6201
|
}, []);
|
|
6201
|
-
return (jsxs$1(Container$
|
|
6202
|
+
return (jsxs$1(Container$D, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6202
6203
|
};
|
|
6203
6204
|
var templateObject_1$11, templateObject_2$E;
|
|
6204
6205
|
|
|
@@ -6248,8 +6249,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
6248
6249
|
});
|
|
6249
6250
|
|
|
6250
6251
|
function SimpleDropdown(_a) {
|
|
6251
|
-
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;
|
|
6252
|
-
var
|
|
6252
|
+
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;
|
|
6253
|
+
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
6253
6254
|
var selectedOptionLabel = useMemo(function () {
|
|
6254
6255
|
if (selectedValue) {
|
|
6255
6256
|
return selectedValue.label;
|
|
@@ -6269,7 +6270,7 @@ function SimpleDropdown(_a) {
|
|
|
6269
6270
|
setSelectedValue(value);
|
|
6270
6271
|
}, [value]);
|
|
6271
6272
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
6272
|
-
return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6273
|
+
return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6273
6274
|
}
|
|
6274
6275
|
|
|
6275
6276
|
var getStylesBySize$8 = function (size, theme) {
|
|
@@ -6287,13 +6288,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
6287
6288
|
}
|
|
6288
6289
|
};
|
|
6289
6290
|
var SimpleSelector = function (_a) {
|
|
6290
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
|
|
6291
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 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;
|
|
6291
6292
|
var theme = useTheme();
|
|
6292
6293
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
6293
6294
|
var activeStyles = active
|
|
6294
6295
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
6295
6296
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
6296
|
-
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': {
|
|
6297
|
+
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': {
|
|
6297
6298
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
6298
6299
|
}, '&:disabled': {
|
|
6299
6300
|
color: theme.colors.shades['250'].color,
|
|
@@ -6302,7 +6303,7 @@ var SimpleSelector = function (_a) {
|
|
|
6302
6303
|
};
|
|
6303
6304
|
|
|
6304
6305
|
var SelectorSecondary = function (_a) {
|
|
6305
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, onClick = _a.onClick;
|
|
6306
|
+
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
6306
6307
|
var theme = useTheme();
|
|
6307
6308
|
var stylesByActive = active
|
|
6308
6309
|
? {
|
|
@@ -6317,7 +6318,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6317
6318
|
border: theme.component.selector.default.border,
|
|
6318
6319
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
6319
6320
|
};
|
|
6320
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
6321
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
6321
6322
|
background: theme.component.selector.hover.background,
|
|
6322
6323
|
color: theme.component.selector.hover.color,
|
|
6323
6324
|
}, '&:disabled': {
|
|
@@ -6470,7 +6471,7 @@ var SizeSelector = function (_a) {
|
|
|
6470
6471
|
return (jsx(SelectorSecondary, { css: {
|
|
6471
6472
|
padding: '0.75rem 1rem 0.625rem',
|
|
6472
6473
|
margin: '0 0.5rem 0.625rem 0',
|
|
6473
|
-
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6474
|
+
}, size: 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));
|
|
6474
6475
|
}) }), void 0)] }), void 0));
|
|
6475
6476
|
};
|
|
6476
6477
|
var templateObject_1$$;
|
|
@@ -6520,12 +6521,12 @@ var TextButton = function (_a) {
|
|
|
6520
6521
|
};
|
|
6521
6522
|
var templateObject_1$_;
|
|
6522
6523
|
|
|
6523
|
-
var Container$
|
|
6524
|
+
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"])));
|
|
6524
6525
|
var P$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6525
6526
|
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"])));
|
|
6526
6527
|
var SizeFitGuide = function (_a) {
|
|
6527
6528
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6528
|
-
return (jsxs$1(Container$
|
|
6529
|
+
return (jsxs$1(Container$C, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6529
6530
|
};
|
|
6530
6531
|
var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
|
|
6531
6532
|
|
|
@@ -6557,7 +6558,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6557
6558
|
};
|
|
6558
6559
|
}
|
|
6559
6560
|
};
|
|
6560
|
-
var Container$
|
|
6561
|
+
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) {
|
|
6561
6562
|
var backgroundColor = _a.backgroundColor;
|
|
6562
6563
|
return backgroundColor;
|
|
6563
6564
|
}, function (_a) {
|
|
@@ -6594,7 +6595,7 @@ var H3$2 = newStyled.h3(templateObject_2$B || (templateObject_2$B = __makeTempla
|
|
|
6594
6595
|
var DiscountTag = function (_a) {
|
|
6595
6596
|
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 ? ComponentSize.Medium : _e;
|
|
6596
6597
|
var theme = useTheme();
|
|
6597
|
-
return (jsx$1(Container$
|
|
6598
|
+
return (jsx$1(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: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6598
6599
|
};
|
|
6599
6600
|
var templateObject_1$Y, templateObject_2$B;
|
|
6600
6601
|
|
|
@@ -6620,7 +6621,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
6620
6621
|
};
|
|
6621
6622
|
}
|
|
6622
6623
|
};
|
|
6623
|
-
var Container$
|
|
6624
|
+
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"])));
|
|
6624
6625
|
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) {
|
|
6625
6626
|
var weight = _a.weight;
|
|
6626
6627
|
return (weight ? weight : '400');
|
|
@@ -6651,39 +6652,39 @@ var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __ma
|
|
|
6651
6652
|
var PriceLabel = function (_a) {
|
|
6652
6653
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6653
6654
|
var theme = useTheme();
|
|
6654
|
-
return (jsxs$1(Container$
|
|
6655
|
+
return (jsxs$1(Container$A, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6655
6656
|
};
|
|
6656
6657
|
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6657
6658
|
|
|
6658
6659
|
var OneColorSelector = function (_a) {
|
|
6659
|
-
var color = _a.color, selected = _a.selected,
|
|
6660
|
+
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
6660
6661
|
var theme = useTheme();
|
|
6661
6662
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6662
|
-
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6663
|
+
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6663
6664
|
};
|
|
6664
6665
|
|
|
6665
6666
|
var ThreeColorSelector = function (_a) {
|
|
6666
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected,
|
|
6667
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
|
|
6667
6668
|
var theme = useTheme();
|
|
6668
6669
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6669
|
-
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6670
|
+
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsx$1("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsx$1("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), jsx$1("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6670
6671
|
};
|
|
6671
6672
|
|
|
6672
6673
|
var TwoColorSelector = function (_a) {
|
|
6673
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected,
|
|
6674
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId;
|
|
6674
6675
|
var theme = useTheme();
|
|
6675
6676
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6676
|
-
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6677
|
+
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsx$1("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6677
6678
|
};
|
|
6678
6679
|
|
|
6679
6680
|
var ColorSelector = function (_a) {
|
|
6680
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected,
|
|
6681
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
|
|
6681
6682
|
if (secondaryColor && tertiaryColor)
|
|
6682
|
-
return (jsx$1(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected,
|
|
6683
|
+
return (jsx$1(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId }, void 0));
|
|
6683
6684
|
else if (secondaryColor && !tertiaryColor)
|
|
6684
|
-
return (jsx$1(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected,
|
|
6685
|
+
return (jsx$1(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected, testId: testId }, void 0));
|
|
6685
6686
|
else
|
|
6686
|
-
return jsx$1(OneColorSelector, { color: primaryColor, selected: selected,
|
|
6687
|
+
return jsx$1(OneColorSelector, { color: primaryColor, selected: selected, testId: testId }, void 0);
|
|
6687
6688
|
};
|
|
6688
6689
|
|
|
6689
6690
|
var OutOfStock = function (_a) {
|
|
@@ -6716,16 +6717,16 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6716
6717
|
});
|
|
6717
6718
|
var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
|
|
6718
6719
|
|
|
6719
|
-
var Container$
|
|
6720
|
+
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) {
|
|
6720
6721
|
var borderColor = _a.borderColor;
|
|
6721
6722
|
return borderColor;
|
|
6722
6723
|
});
|
|
6723
6724
|
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"])));
|
|
6724
6725
|
var PatternSelector = function (_a) {
|
|
6725
|
-
var url = _a.url, selected = _a.selected,
|
|
6726
|
+
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
6726
6727
|
var theme = useTheme();
|
|
6727
6728
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6728
|
-
return (jsx$1(Container$
|
|
6729
|
+
return (jsx$1(Container$z, __assign({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6729
6730
|
};
|
|
6730
6731
|
var templateObject_1$V, templateObject_2$y;
|
|
6731
6732
|
|
|
@@ -6733,7 +6734,7 @@ var renderOptions$1 = function (options) {
|
|
|
6733
6734
|
if (options.length)
|
|
6734
6735
|
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
|
|
6735
6736
|
var checked = _a.checked;
|
|
6736
|
-
return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked,
|
|
6737
|
+
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));
|
|
6737
6738
|
} }), option.label)); });
|
|
6738
6739
|
else
|
|
6739
6740
|
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
@@ -6745,7 +6746,7 @@ var SingleColorPicker = function (_a) {
|
|
|
6745
6746
|
|
|
6746
6747
|
var renderOptions = function (selectedColor, options) {
|
|
6747
6748
|
if (options && options.length)
|
|
6748
|
-
return options.map(function (option) { return (jsx$1(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsx$1(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option),
|
|
6749
|
+
return options.map(function (option) { return (jsx$1(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsx$1(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), testId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && (jsx$1(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
|
|
6749
6750
|
else
|
|
6750
6751
|
return jsx$1(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6751
6752
|
};
|
|
@@ -6790,11 +6791,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
6790
6791
|
};
|
|
6791
6792
|
var templateObject_1$U;
|
|
6792
6793
|
|
|
6793
|
-
var Container$
|
|
6794
|
+
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"])));
|
|
6794
6795
|
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"])));
|
|
6795
6796
|
var ImagePreviewList = function (_a) {
|
|
6796
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick,
|
|
6797
|
-
return (jsx$1(Container$
|
|
6797
|
+
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
6798
|
+
return (jsx$1(Container$y, __assign({ "data-testid": testId }, { children: images.map(function (item) {
|
|
6798
6799
|
return (jsx$1(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6799
6800
|
}) }), void 0));
|
|
6800
6801
|
};
|
|
@@ -6807,16 +6808,16 @@ var Image = function (_a) {
|
|
|
6807
6808
|
};
|
|
6808
6809
|
var templateObject_1$S;
|
|
6809
6810
|
|
|
6810
|
-
var Container$
|
|
6811
|
+
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"])));
|
|
6811
6812
|
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"])));
|
|
6812
6813
|
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"])));
|
|
6813
6814
|
var ImageProductWithTags$1 = function (_a) {
|
|
6814
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
6815
|
-
return (jsxs$1(Container$
|
|
6815
|
+
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
6816
|
+
return (jsxs$1(Container$x, __assign({ "data-testid": testId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6816
6817
|
};
|
|
6817
6818
|
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6818
6819
|
|
|
6819
|
-
var Container$
|
|
6820
|
+
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"])));
|
|
6820
6821
|
var ProductGallery = function (_a) {
|
|
6821
6822
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6822
6823
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6824,9 +6825,9 @@ var ProductGallery = function (_a) {
|
|
|
6824
6825
|
useEffect(function () {
|
|
6825
6826
|
setSelectedImage(initialValue);
|
|
6826
6827
|
}, [initialValue]);
|
|
6827
|
-
return (jsxs$1(Container$
|
|
6828
|
+
return (jsxs$1(Container$w, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
|
|
6828
6829
|
setSelectedImage(value);
|
|
6829
|
-
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement,
|
|
6830
|
+
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
6830
6831
|
};
|
|
6831
6832
|
var templateObject_1$Q;
|
|
6832
6833
|
|
|
@@ -6866,7 +6867,7 @@ var StarStyles = {
|
|
|
6866
6867
|
});
|
|
6867
6868
|
},
|
|
6868
6869
|
};
|
|
6869
|
-
var Container$
|
|
6870
|
+
var Container$v = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6870
6871
|
var templateObject_1$P;
|
|
6871
6872
|
|
|
6872
6873
|
var StarContainer = newStyled.div(function (_a) {
|
|
@@ -6884,7 +6885,7 @@ var sizes = {
|
|
|
6884
6885
|
};
|
|
6885
6886
|
var StarList = function (_a) {
|
|
6886
6887
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6887
|
-
return (jsx$1(Container$
|
|
6888
|
+
return (jsx$1(Container$v, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6888
6889
|
return (jsx$1(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
6889
6890
|
}) }, void 0));
|
|
6890
6891
|
};
|
|
@@ -6928,7 +6929,7 @@ var LabelStyles = {
|
|
|
6928
6929
|
});
|
|
6929
6930
|
},
|
|
6930
6931
|
};
|
|
6931
|
-
var Container$
|
|
6932
|
+
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"])));
|
|
6932
6933
|
var templateObject_1$O;
|
|
6933
6934
|
|
|
6934
6935
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -6942,10 +6943,10 @@ var starsNumber = 5;
|
|
|
6942
6943
|
var Rating = function (_a) {
|
|
6943
6944
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6944
6945
|
var theme = useTheme();
|
|
6945
|
-
return (jsxs$1(Container$
|
|
6946
|
+
return (jsxs$1(Container$u, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxs$1(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6946
6947
|
};
|
|
6947
6948
|
|
|
6948
|
-
var Container$
|
|
6949
|
+
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"])));
|
|
6949
6950
|
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; });
|
|
6950
6951
|
var textButtonStyles = function (theme) { return ({
|
|
6951
6952
|
border: 'none',
|
|
@@ -6959,7 +6960,7 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6959
6960
|
var FitPredictor = function (_a) {
|
|
6960
6961
|
var onClick = _a.onClick;
|
|
6961
6962
|
var theme = useTheme();
|
|
6962
|
-
return (jsxs(Container$
|
|
6963
|
+
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));
|
|
6963
6964
|
};
|
|
6964
6965
|
var templateObject_1$N, templateObject_2$v;
|
|
6965
6966
|
|
|
@@ -6998,7 +6999,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6998
6999
|
position: 'absolute',
|
|
6999
7000
|
});
|
|
7000
7001
|
});
|
|
7001
|
-
var Container$
|
|
7002
|
+
var Container$s = newStyled.div(function (_a) {
|
|
7002
7003
|
var widthAuto = _a.widthAuto;
|
|
7003
7004
|
return ({
|
|
7004
7005
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -7012,7 +7013,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
7012
7013
|
var ProgressBar = function (_a) {
|
|
7013
7014
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
7014
7015
|
var theme = useTheme();
|
|
7015
|
-
return (jsxs$1(Container$
|
|
7016
|
+
return (jsxs$1(Container$s, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
7016
7017
|
};
|
|
7017
7018
|
var templateObject_1$M;
|
|
7018
7019
|
|
|
@@ -7035,7 +7036,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7035
7036
|
};
|
|
7036
7037
|
}
|
|
7037
7038
|
};
|
|
7038
|
-
var Container$
|
|
7039
|
+
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) {
|
|
7039
7040
|
var backgroundColor = _a.backgroundColor;
|
|
7040
7041
|
return backgroundColor;
|
|
7041
7042
|
}, function (_a) {
|
|
@@ -7063,7 +7064,7 @@ var Container$s = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
7063
7064
|
var IconButton = function (_a) {
|
|
7064
7065
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7065
7066
|
var theme = useTheme();
|
|
7066
|
-
return (jsx$1(Container$
|
|
7067
|
+
return (jsx$1(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));
|
|
7067
7068
|
};
|
|
7068
7069
|
var templateObject_1$L;
|
|
7069
7070
|
|
|
@@ -7345,7 +7346,7 @@ var ContainerStyles = {
|
|
|
7345
7346
|
};
|
|
7346
7347
|
|
|
7347
7348
|
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"])));
|
|
7348
|
-
var Container$
|
|
7349
|
+
var Container$q = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7349
7350
|
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) {
|
|
7350
7351
|
var disabled = _a.disabled;
|
|
7351
7352
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -7361,7 +7362,7 @@ var RadioInput = function (_a) {
|
|
|
7361
7362
|
var value = event.currentTarget.value;
|
|
7362
7363
|
onChange({ value: value, label: label });
|
|
7363
7364
|
};
|
|
7364
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
7365
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$q, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7365
7366
|
};
|
|
7366
7367
|
var templateObject_1$J, templateObject_2$t;
|
|
7367
7368
|
|
|
@@ -7378,7 +7379,7 @@ var RadioGroupInput = function (_a) {
|
|
|
7378
7379
|
};
|
|
7379
7380
|
|
|
7380
7381
|
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"])));
|
|
7381
|
-
var Container$
|
|
7382
|
+
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"])));
|
|
7382
7383
|
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) {
|
|
7383
7384
|
var color = _a.color;
|
|
7384
7385
|
return color;
|
|
@@ -7392,18 +7393,18 @@ var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemp
|
|
|
7392
7393
|
var Minimalistic = function (_a) {
|
|
7393
7394
|
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;
|
|
7394
7395
|
var theme = useTheme();
|
|
7395
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
7396
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$p, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$4, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$p, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7396
7397
|
};
|
|
7397
7398
|
var templateObject_1$I, templateObject_2$s, templateObject_3$j;
|
|
7398
7399
|
|
|
7399
|
-
var Container$
|
|
7400
|
+
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"])));
|
|
7400
7401
|
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; });
|
|
7401
7402
|
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; });
|
|
7402
7403
|
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"])));
|
|
7403
7404
|
var Simple = function (_a) {
|
|
7404
7405
|
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;
|
|
7405
7406
|
var theme = useTheme();
|
|
7406
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
7407
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$o, { children: [jsx$1(Title$3, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7407
7408
|
};
|
|
7408
7409
|
var templateObject_1$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
|
|
7409
7410
|
|
|
@@ -7412,10 +7413,10 @@ var Bundle = {
|
|
|
7412
7413
|
Simple: Simple,
|
|
7413
7414
|
};
|
|
7414
7415
|
|
|
7415
|
-
var Container$
|
|
7416
|
+
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"])));
|
|
7416
7417
|
var Tag = function (_a) {
|
|
7417
7418
|
var text = _a.text, className = _a.className;
|
|
7418
|
-
return jsx$1(Container$
|
|
7419
|
+
return jsx$1(Container$n, __assign({ className: className }, { children: text }), void 0);
|
|
7419
7420
|
};
|
|
7420
7421
|
var templateObject_1$G;
|
|
7421
7422
|
|
|
@@ -7589,7 +7590,7 @@ var Error$1 = function (_a) {
|
|
|
7589
7590
|
};
|
|
7590
7591
|
var templateObject_1$E, templateObject_2$p;
|
|
7591
7592
|
|
|
7592
|
-
var Container$
|
|
7593
|
+
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) {
|
|
7593
7594
|
var color = _a.color;
|
|
7594
7595
|
return color;
|
|
7595
7596
|
});
|
|
@@ -7693,7 +7694,7 @@ var BaseInput = function (_a) {
|
|
|
7693
7694
|
highlight: theme.colors.border.highlight,
|
|
7694
7695
|
boxShadow: theme.component.input.boxShadow,
|
|
7695
7696
|
};
|
|
7696
|
-
return (jsxs$1(Container$
|
|
7697
|
+
return (jsxs$1(Container$m, __assign({ color: status === InputValidationType.Valid
|
|
7697
7698
|
? theme.colors.shades['700'].color
|
|
7698
7699
|
: status === InputValidationType.Error
|
|
7699
7700
|
? theme.colors.semantic.urgent.color
|
|
@@ -7714,7 +7715,7 @@ var Button$4 = function (_a) {
|
|
|
7714
7715
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7715
7716
|
};
|
|
7716
7717
|
|
|
7717
|
-
var Container$
|
|
7718
|
+
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) {
|
|
7718
7719
|
var theme = _a.theme;
|
|
7719
7720
|
return theme.component.inputCustom.input.borderRadius;
|
|
7720
7721
|
});
|
|
@@ -7731,7 +7732,7 @@ var Custom = function (_a) {
|
|
|
7731
7732
|
text: text,
|
|
7732
7733
|
disabled: rest.disabled,
|
|
7733
7734
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7734
|
-
return (jsx$1(Container$
|
|
7735
|
+
return (jsx$1(Container$l, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: jsx$1(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7735
7736
|
};
|
|
7736
7737
|
var templateObject_1$C, templateObject_2$n;
|
|
7737
7738
|
|
|
@@ -7766,13 +7767,13 @@ var BasePlusButton = function (_a) {
|
|
|
7766
7767
|
};
|
|
7767
7768
|
var templateObject_1$A;
|
|
7768
7769
|
|
|
7769
|
-
var Container$
|
|
7770
|
+
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"])));
|
|
7770
7771
|
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; });
|
|
7771
7772
|
var BasePlusIcon = function (_a) {
|
|
7772
7773
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7773
7774
|
var theme = useTheme();
|
|
7774
7775
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7775
|
-
return (jsx$1(Container$
|
|
7776
|
+
return (jsx$1(Container$k, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$3, __assign({ color: status === InputValidationType.Valid
|
|
7776
7777
|
? theme.colors.shades['700'].color
|
|
7777
7778
|
: status === InputValidationType.Error
|
|
7778
7779
|
? theme.colors.semantic.urgent.color
|
|
@@ -7787,7 +7788,7 @@ var Input$1 = {
|
|
|
7787
7788
|
SimplePlusIcon: BasePlusIcon,
|
|
7788
7789
|
};
|
|
7789
7790
|
|
|
7790
|
-
var Container$
|
|
7791
|
+
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) {
|
|
7791
7792
|
var width = _a.width;
|
|
7792
7793
|
return width;
|
|
7793
7794
|
}, function (_a) {
|
|
@@ -7803,7 +7804,7 @@ var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
7803
7804
|
var PaymentMethod = function (_a) {
|
|
7804
7805
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7805
7806
|
var theme = useTheme();
|
|
7806
|
-
return (jsx$1(Container$
|
|
7807
|
+
return (jsx$1(Container$j, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
7807
7808
|
};
|
|
7808
7809
|
var templateObject_1$y;
|
|
7809
7810
|
|
|
@@ -7824,12 +7825,12 @@ var templateObject_1$x;
|
|
|
7824
7825
|
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"])));
|
|
7825
7826
|
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; });
|
|
7826
7827
|
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"])));
|
|
7827
|
-
var Container$
|
|
7828
|
+
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; });
|
|
7828
7829
|
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"])));
|
|
7829
7830
|
var Total = function (_a) {
|
|
7830
7831
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7831
7832
|
var theme = useTheme();
|
|
7832
|
-
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
7833
|
+
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$i, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7833
7834
|
};
|
|
7834
7835
|
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
|
|
7835
7836
|
|
|
@@ -7858,13 +7859,13 @@ var Totals = {
|
|
|
7858
7859
|
Subtotal: Subtotal,
|
|
7859
7860
|
};
|
|
7860
7861
|
|
|
7861
|
-
var Container$
|
|
7862
|
+
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; });
|
|
7862
7863
|
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"])));
|
|
7863
7864
|
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; });
|
|
7864
7865
|
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; });
|
|
7865
7866
|
var Note = function (_a) {
|
|
7866
7867
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7867
|
-
return (jsxs$1(Container$
|
|
7868
|
+
return (jsxs$1(Container$h, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$2, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$2, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7868
7869
|
};
|
|
7869
7870
|
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
|
|
7870
7871
|
|
|
@@ -7995,21 +7996,21 @@ var DeliveryDetails = function (_a) {
|
|
|
7995
7996
|
};
|
|
7996
7997
|
var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7997
7998
|
|
|
7998
|
-
var Container$
|
|
7999
|
+
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"])));
|
|
7999
8000
|
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; });
|
|
8000
8001
|
var ScrollToTop = function (_a) {
|
|
8001
8002
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
8002
8003
|
var theme = useTheme();
|
|
8003
|
-
return (jsxs$1(Container$
|
|
8004
|
+
return (jsxs$1(Container$g, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
8004
8005
|
};
|
|
8005
8006
|
var templateObject_1$s, templateObject_2$g;
|
|
8006
8007
|
|
|
8007
|
-
var Container$
|
|
8008
|
+
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"])));
|
|
8008
8009
|
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; });
|
|
8009
8010
|
var OrderBar = function (_a) {
|
|
8010
8011
|
var message = _a.message;
|
|
8011
8012
|
var theme = useTheme();
|
|
8012
|
-
return (jsxs$1(Container$
|
|
8013
|
+
return (jsxs$1(Container$f, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
8013
8014
|
};
|
|
8014
8015
|
var templateObject_1$r, templateObject_2$f;
|
|
8015
8016
|
|
|
@@ -8024,7 +8025,7 @@ var SizeTable = function (_a) {
|
|
|
8024
8025
|
};
|
|
8025
8026
|
var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
|
|
8026
8027
|
|
|
8027
|
-
var Container$
|
|
8028
|
+
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"])));
|
|
8028
8029
|
var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
8029
8030
|
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) {
|
|
8030
8031
|
var theme = _a.theme;
|
|
@@ -8065,7 +8066,7 @@ var Quantity = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
|
|
|
8065
8066
|
var SimpleOrderItem = function (_a) {
|
|
8066
8067
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
8067
8068
|
var theme = useTheme();
|
|
8068
|
-
return (jsxs$1(Container$
|
|
8069
|
+
return (jsxs$1(Container$e, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
8069
8070
|
};
|
|
8070
8071
|
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
|
|
8071
8072
|
|
|
@@ -8076,7 +8077,7 @@ function formatDate(date) {
|
|
|
8076
8077
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8077
8078
|
}
|
|
8078
8079
|
|
|
8079
|
-
var Container$
|
|
8080
|
+
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"])));
|
|
8080
8081
|
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) {
|
|
8081
8082
|
var theme = _a.theme;
|
|
8082
8083
|
return mediaQueries({ theme: theme })({
|
|
@@ -8114,7 +8115,7 @@ var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObje
|
|
|
8114
8115
|
var Review = function (_a) {
|
|
8115
8116
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8116
8117
|
var theme = useTheme();
|
|
8117
|
-
return (jsxs$1(Container$
|
|
8118
|
+
return (jsxs$1(Container$d, { children: [jsxs$1(Heading, __assign({ theme: theme }, { children: [jsx$1(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign({ theme: theme }, { children: [jsx$1(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
8118
8119
|
};
|
|
8119
8120
|
var templateObject_1$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8120
8121
|
|
|
@@ -12490,7 +12491,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12490
12491
|
height: height,
|
|
12491
12492
|
});
|
|
12492
12493
|
});
|
|
12493
|
-
var
|
|
12494
|
+
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"])));
|
|
12495
|
+
var ContainerLink = ContainerNoLink.withComponent('a');
|
|
12494
12496
|
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; });
|
|
12495
12497
|
var getStylesBySize = function (size) {
|
|
12496
12498
|
switch (size) {
|
|
@@ -12518,7 +12520,7 @@ var getStylesBySize = function (size) {
|
|
|
12518
12520
|
}
|
|
12519
12521
|
};
|
|
12520
12522
|
var ProductItemMobile = function (_a) {
|
|
12521
|
-
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;
|
|
12523
|
+
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;
|
|
12522
12524
|
var theme = useTheme();
|
|
12523
12525
|
var styles = getStylesBySize(size);
|
|
12524
12526
|
var spaces = useMemo(function () {
|
|
@@ -12535,7 +12537,8 @@ var ProductItemMobile = function (_a) {
|
|
|
12535
12537
|
_b)[size];
|
|
12536
12538
|
return [first, second];
|
|
12537
12539
|
}, [size]);
|
|
12538
|
-
|
|
12540
|
+
var Container = url ? ContainerLink : ContainerNoLink;
|
|
12541
|
+
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: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: 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: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
|
|
12539
12542
|
};
|
|
12540
12543
|
var templateObject_1$j, templateObject_2$9;
|
|
12541
12544
|
|
|
@@ -12766,9 +12769,9 @@ var Header = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTem
|
|
|
12766
12769
|
});
|
|
12767
12770
|
});
|
|
12768
12771
|
var ResultsPanel = function (_a) {
|
|
12769
|
-
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll,
|
|
12772
|
+
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12770
12773
|
var theme = useTheme();
|
|
12771
|
-
return (jsxs$1(Container$7, __assign({ "data-testid":
|
|
12774
|
+
return (jsxs$1(Container$7, __assign({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign({ theme: theme }, { children: jsx$1(Text$5, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign({ theme: theme }, { children: jsx$1(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12772
12775
|
};
|
|
12773
12776
|
var templateObject_1$c, templateObject_2$4, templateObject_3$4;
|
|
12774
12777
|
|
|
@@ -12916,7 +12919,7 @@ var SearchBar = function (_a) {
|
|
|
12916
12919
|
return function () { return clearTimeout(id); };
|
|
12917
12920
|
}, [onChange, state.term]);
|
|
12918
12921
|
var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
|
|
12919
|
-
return (jsxs$1("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(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), jsx$1(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsx$1(ResultsPanel, {
|
|
12922
|
+
return (jsxs$1("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(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), jsx$1(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsx$1(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) {
|
|
12920
12923
|
onSearch(value.title);
|
|
12921
12924
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
12922
12925
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
@@ -12926,8 +12929,8 @@ var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __ma
|
|
|
12926
12929
|
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"])));
|
|
12927
12930
|
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"])));
|
|
12928
12931
|
var ImageProductWithTags = function (_a) {
|
|
12929
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
12930
|
-
return (jsxs$1(Container$5, __assign({ "data-testid":
|
|
12932
|
+
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
12933
|
+
return (jsxs$1(Container$5, __assign({ "data-testid": testId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
12931
12934
|
};
|
|
12932
12935
|
var templateObject_1$a, templateObject_2$3, templateObject_3$3;
|
|
12933
12936
|
|
|
@@ -12945,7 +12948,7 @@ var SlideDots = function (_a) {
|
|
|
12945
12948
|
var theme = useTheme();
|
|
12946
12949
|
return (jsx$1(Container$4, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12947
12950
|
? theme.colors.shades.white.color
|
|
12948
|
-
: theme.colors.shades['700'].color, opacity: 0.6,
|
|
12951
|
+
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12949
12952
|
};
|
|
12950
12953
|
var templateObject_1$8;
|
|
12951
12954
|
|
|
@@ -12953,7 +12956,7 @@ var NavigationButton = newStyled(ArrowButton)(templateObject_1$7 || (templateObj
|
|
|
12953
12956
|
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12954
12957
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12955
12958
|
var SlideNavigation = function (_a) {
|
|
12956
|
-
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate,
|
|
12959
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12957
12960
|
var theme = useTheme();
|
|
12958
12961
|
var upperLimit = quantity - 1;
|
|
12959
12962
|
var lowerLimit = 0;
|
|
@@ -12961,7 +12964,7 @@ var SlideNavigation = function (_a) {
|
|
|
12961
12964
|
onNavigate(selectedIndex - 1);
|
|
12962
12965
|
} }, void 0)), selectedIndex < upperLimit && (jsx$1(RightButton, { Icon: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
|
|
12963
12966
|
onNavigate(selectedIndex + 1);
|
|
12964
|
-
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId:
|
|
12967
|
+
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12965
12968
|
};
|
|
12966
12969
|
var templateObject_1$7, templateObject_2$2, templateObject_3$2;
|
|
12967
12970
|
|
|
@@ -12973,7 +12976,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12973
12976
|
useEffect(function () {
|
|
12974
12977
|
setSelectedImage(initialValue);
|
|
12975
12978
|
}, [initialValue]);
|
|
12976
|
-
return (jsxs$1(Container$3, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement,
|
|
12979
|
+
return (jsxs$1(Container$3, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12977
12980
|
};
|
|
12978
12981
|
var templateObject_1$6;
|
|
12979
12982
|
|