@trafilea/afrodita-components 4.1.0 → 4.3.1-beta.1
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 +42 -9
- package/build/index.esm.js +174 -112
- package/build/index.esm.js.map +1 -1
- package/build/index.js +183 -111
- 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,9 +3488,9 @@ 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: {
|
|
3493
|
-
display: inline ? '
|
|
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
|
+
display: inline ? 'inline-flex' : 'flex',
|
|
3494
3494
|
justifyContent: 'center',
|
|
3495
3495
|
alignItems: 'center',
|
|
3496
3496
|
padding: '0.75rem 2rem',
|
|
@@ -3526,10 +3526,10 @@ var getStylesBySize$9 = function (size, theme) {
|
|
|
3526
3526
|
}
|
|
3527
3527
|
};
|
|
3528
3528
|
var BaseCTA = function (_a) {
|
|
3529
|
-
var text = _a.text,
|
|
3529
|
+
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
|
|
3530
3530
|
var theme = useTheme();
|
|
3531
3531
|
var stylesBySize = getStylesBySize$9(size, theme);
|
|
3532
|
-
return (jsx(BaseButton, __assign({
|
|
3532
|
+
return (jsx(BaseButton, __assign({}, props, { css: __assign(__assign({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
|
|
3533
3533
|
backgroundColor: theme.colors.background.disabled,
|
|
3534
3534
|
color: theme.colors.text.disabled,
|
|
3535
3535
|
cursor: 'not-allowed',
|
|
@@ -3537,9 +3537,9 @@ var BaseCTA = function (_a) {
|
|
|
3537
3537
|
};
|
|
3538
3538
|
|
|
3539
3539
|
var ButtonPrimary = function (_a) {
|
|
3540
|
-
|
|
3540
|
+
_a.testId; var props = __rest(_a, ["testId"]);
|
|
3541
3541
|
var theme = useTheme();
|
|
3542
|
-
return (jsx(BaseCTA, {
|
|
3542
|
+
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3543
3543
|
backgroundColor: theme.component.button.primary.active.backgroundColor,
|
|
3544
3544
|
color: theme.component.button.primary.active.color,
|
|
3545
3545
|
border: theme.component.button.border,
|
|
@@ -3551,13 +3551,12 @@ var ButtonPrimary = function (_a) {
|
|
|
3551
3551
|
backgroundColor: theme.colors.background.disabled,
|
|
3552
3552
|
color: theme.colors.text.disabled,
|
|
3553
3553
|
},
|
|
3554
|
-
}
|
|
3554
|
+
} }), void 0));
|
|
3555
3555
|
};
|
|
3556
3556
|
|
|
3557
|
-
var ButtonSecondary = function (
|
|
3558
|
-
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size, className = _a.className;
|
|
3557
|
+
var ButtonSecondary = function (props) {
|
|
3559
3558
|
var theme = useTheme();
|
|
3560
|
-
return (jsx(BaseCTA, {
|
|
3559
|
+
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3561
3560
|
backgroundColor: theme.component.button.secondary.active.backgroundColor,
|
|
3562
3561
|
color: theme.component.button.secondary.active.color,
|
|
3563
3562
|
border: theme.component.button.border,
|
|
@@ -3568,13 +3567,12 @@ var ButtonSecondary = function (_a) {
|
|
|
3568
3567
|
backgroundColor: theme.colors.shades['50'].color,
|
|
3569
3568
|
color: theme.colors.shades['250'].color,
|
|
3570
3569
|
},
|
|
3571
|
-
}
|
|
3570
|
+
} }), void 0));
|
|
3572
3571
|
};
|
|
3573
3572
|
|
|
3574
|
-
var ButtonSecondaryOutline = function (
|
|
3575
|
-
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size, className = _a.className;
|
|
3573
|
+
var ButtonSecondaryOutline = function (props) {
|
|
3576
3574
|
var theme = useTheme();
|
|
3577
|
-
return (jsx(BaseCTA, {
|
|
3575
|
+
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3578
3576
|
backgroundColor: theme.component.button.secondary.active.color,
|
|
3579
3577
|
color: theme.component.button.secondary.active.backgroundColor,
|
|
3580
3578
|
border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
|
|
@@ -3587,7 +3585,7 @@ var ButtonSecondaryOutline = function (_a) {
|
|
|
3587
3585
|
color: theme.colors.text.disabled,
|
|
3588
3586
|
border: 'none',
|
|
3589
3587
|
},
|
|
3590
|
-
}
|
|
3588
|
+
} }), void 0));
|
|
3591
3589
|
};
|
|
3592
3590
|
|
|
3593
3591
|
function _extends() {
|
|
@@ -6172,7 +6170,7 @@ var CustomCheckboxStyles = {
|
|
|
6172
6170
|
},
|
|
6173
6171
|
};
|
|
6174
6172
|
|
|
6175
|
-
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"])));
|
|
6176
6174
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6177
6175
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6178
6176
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6201,7 +6199,7 @@ var Checkbox = function (_a) {
|
|
|
6201
6199
|
useEffect(function () {
|
|
6202
6200
|
mounted.current = true;
|
|
6203
6201
|
}, []);
|
|
6204
|
-
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));
|
|
6205
6203
|
};
|
|
6206
6204
|
var templateObject_1$11, templateObject_2$E;
|
|
6207
6205
|
|
|
@@ -6251,8 +6249,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
6251
6249
|
});
|
|
6252
6250
|
|
|
6253
6251
|
function SimpleDropdown(_a) {
|
|
6254
|
-
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;
|
|
6255
|
-
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];
|
|
6256
6254
|
var selectedOptionLabel = useMemo(function () {
|
|
6257
6255
|
if (selectedValue) {
|
|
6258
6256
|
return selectedValue.label;
|
|
@@ -6272,7 +6270,7 @@ function SimpleDropdown(_a) {
|
|
|
6272
6270
|
setSelectedValue(value);
|
|
6273
6271
|
}, [value]);
|
|
6274
6272
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
6275
|
-
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));
|
|
6276
6274
|
}
|
|
6277
6275
|
|
|
6278
6276
|
var getStylesBySize$8 = function (size, theme) {
|
|
@@ -6290,13 +6288,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
6290
6288
|
}
|
|
6291
6289
|
};
|
|
6292
6290
|
var SimpleSelector = function (_a) {
|
|
6293
|
-
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;
|
|
6294
6292
|
var theme = useTheme();
|
|
6295
6293
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
6296
6294
|
var activeStyles = active
|
|
6297
6295
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
6298
6296
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
6299
|
-
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': {
|
|
6300
6298
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
6301
6299
|
}, '&:disabled': {
|
|
6302
6300
|
color: theme.colors.shades['250'].color,
|
|
@@ -6305,7 +6303,7 @@ var SimpleSelector = function (_a) {
|
|
|
6305
6303
|
};
|
|
6306
6304
|
|
|
6307
6305
|
var SelectorSecondary = function (_a) {
|
|
6308
|
-
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;
|
|
6309
6307
|
var theme = useTheme();
|
|
6310
6308
|
var stylesByActive = active
|
|
6311
6309
|
? {
|
|
@@ -6320,7 +6318,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6320
6318
|
border: theme.component.selector.default.border,
|
|
6321
6319
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
6322
6320
|
};
|
|
6323
|
-
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': {
|
|
6324
6322
|
background: theme.component.selector.hover.background,
|
|
6325
6323
|
color: theme.component.selector.hover.color,
|
|
6326
6324
|
}, '&:disabled': {
|
|
@@ -6473,7 +6471,7 @@ var SizeSelector = function (_a) {
|
|
|
6473
6471
|
return (jsx(SelectorSecondary, { css: {
|
|
6474
6472
|
padding: '0.75rem 1rem 0.625rem',
|
|
6475
6473
|
margin: '0 0.5rem 0.625rem 0',
|
|
6476
|
-
}, 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));
|
|
6477
6475
|
}) }), void 0)] }), void 0));
|
|
6478
6476
|
};
|
|
6479
6477
|
var templateObject_1$$;
|
|
@@ -6523,12 +6521,12 @@ var TextButton = function (_a) {
|
|
|
6523
6521
|
};
|
|
6524
6522
|
var templateObject_1$_;
|
|
6525
6523
|
|
|
6526
|
-
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"])));
|
|
6527
6525
|
var P$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6528
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"])));
|
|
6529
6527
|
var SizeFitGuide = function (_a) {
|
|
6530
6528
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6531
|
-
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));
|
|
6532
6530
|
};
|
|
6533
6531
|
var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
|
|
6534
6532
|
|
|
@@ -6560,7 +6558,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6560
6558
|
};
|
|
6561
6559
|
}
|
|
6562
6560
|
};
|
|
6563
|
-
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) {
|
|
6564
6562
|
var backgroundColor = _a.backgroundColor;
|
|
6565
6563
|
return backgroundColor;
|
|
6566
6564
|
}, function (_a) {
|
|
@@ -6597,7 +6595,7 @@ var H3$2 = newStyled.h3(templateObject_2$B || (templateObject_2$B = __makeTempla
|
|
|
6597
6595
|
var DiscountTag = function (_a) {
|
|
6598
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;
|
|
6599
6597
|
var theme = useTheme();
|
|
6600
|
-
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));
|
|
6601
6599
|
};
|
|
6602
6600
|
var templateObject_1$Y, templateObject_2$B;
|
|
6603
6601
|
|
|
@@ -6623,7 +6621,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
6623
6621
|
};
|
|
6624
6622
|
}
|
|
6625
6623
|
};
|
|
6626
|
-
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"])));
|
|
6627
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) {
|
|
6628
6626
|
var weight = _a.weight;
|
|
6629
6627
|
return (weight ? weight : '400');
|
|
@@ -6654,39 +6652,39 @@ var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __ma
|
|
|
6654
6652
|
var PriceLabel = function (_a) {
|
|
6655
6653
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6656
6654
|
var theme = useTheme();
|
|
6657
|
-
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));
|
|
6658
6656
|
};
|
|
6659
6657
|
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6660
6658
|
|
|
6661
6659
|
var OneColorSelector = function (_a) {
|
|
6662
|
-
var color = _a.color, selected = _a.selected,
|
|
6660
|
+
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
6663
6661
|
var theme = useTheme();
|
|
6664
6662
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6665
|
-
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));
|
|
6666
6664
|
};
|
|
6667
6665
|
|
|
6668
6666
|
var ThreeColorSelector = function (_a) {
|
|
6669
|
-
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;
|
|
6670
6668
|
var theme = useTheme();
|
|
6671
6669
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6672
|
-
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));
|
|
6673
6671
|
};
|
|
6674
6672
|
|
|
6675
6673
|
var TwoColorSelector = function (_a) {
|
|
6676
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected,
|
|
6674
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId;
|
|
6677
6675
|
var theme = useTheme();
|
|
6678
6676
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6679
|
-
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));
|
|
6680
6678
|
};
|
|
6681
6679
|
|
|
6682
6680
|
var ColorSelector = function (_a) {
|
|
6683
|
-
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;
|
|
6684
6682
|
if (secondaryColor && tertiaryColor)
|
|
6685
|
-
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));
|
|
6686
6684
|
else if (secondaryColor && !tertiaryColor)
|
|
6687
|
-
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));
|
|
6688
6686
|
else
|
|
6689
|
-
return jsx$1(OneColorSelector, { color: primaryColor, selected: selected,
|
|
6687
|
+
return jsx$1(OneColorSelector, { color: primaryColor, selected: selected, testId: testId }, void 0);
|
|
6690
6688
|
};
|
|
6691
6689
|
|
|
6692
6690
|
var OutOfStock = function (_a) {
|
|
@@ -6719,16 +6717,16 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6719
6717
|
});
|
|
6720
6718
|
var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
|
|
6721
6719
|
|
|
6722
|
-
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) {
|
|
6723
6721
|
var borderColor = _a.borderColor;
|
|
6724
6722
|
return borderColor;
|
|
6725
6723
|
});
|
|
6726
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"])));
|
|
6727
6725
|
var PatternSelector = function (_a) {
|
|
6728
|
-
var url = _a.url, selected = _a.selected,
|
|
6726
|
+
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
6729
6727
|
var theme = useTheme();
|
|
6730
6728
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6731
|
-
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));
|
|
6732
6730
|
};
|
|
6733
6731
|
var templateObject_1$V, templateObject_2$y;
|
|
6734
6732
|
|
|
@@ -6736,7 +6734,7 @@ var renderOptions$1 = function (options) {
|
|
|
6736
6734
|
if (options.length)
|
|
6737
6735
|
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
|
|
6738
6736
|
var checked = _a.checked;
|
|
6739
|
-
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));
|
|
6740
6738
|
} }), option.label)); });
|
|
6741
6739
|
else
|
|
6742
6740
|
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
@@ -6748,7 +6746,7 @@ var SingleColorPicker = function (_a) {
|
|
|
6748
6746
|
|
|
6749
6747
|
var renderOptions = function (selectedColor, options) {
|
|
6750
6748
|
if (options && options.length)
|
|
6751
|
-
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)); });
|
|
6752
6750
|
else
|
|
6753
6751
|
return jsx$1(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6754
6752
|
};
|
|
@@ -6793,11 +6791,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
6793
6791
|
};
|
|
6794
6792
|
var templateObject_1$U;
|
|
6795
6793
|
|
|
6796
|
-
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"])));
|
|
6797
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"])));
|
|
6798
6796
|
var ImagePreviewList = function (_a) {
|
|
6799
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick,
|
|
6800
|
-
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) {
|
|
6801
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));
|
|
6802
6800
|
}) }), void 0));
|
|
6803
6801
|
};
|
|
@@ -6810,16 +6808,16 @@ var Image = function (_a) {
|
|
|
6810
6808
|
};
|
|
6811
6809
|
var templateObject_1$S;
|
|
6812
6810
|
|
|
6813
|
-
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"])));
|
|
6814
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"])));
|
|
6815
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"])));
|
|
6816
6814
|
var ImageProductWithTags$1 = function (_a) {
|
|
6817
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
6818
|
-
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));
|
|
6819
6817
|
};
|
|
6820
6818
|
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6821
6819
|
|
|
6822
|
-
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"])));
|
|
6823
6821
|
var ProductGallery = function (_a) {
|
|
6824
6822
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6825
6823
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6827,9 +6825,9 @@ var ProductGallery = function (_a) {
|
|
|
6827
6825
|
useEffect(function () {
|
|
6828
6826
|
setSelectedImage(initialValue);
|
|
6829
6827
|
}, [initialValue]);
|
|
6830
|
-
return (jsxs$1(Container$
|
|
6828
|
+
return (jsxs$1(Container$w, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
|
|
6831
6829
|
setSelectedImage(value);
|
|
6832
|
-
} }, 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));
|
|
6833
6831
|
};
|
|
6834
6832
|
var templateObject_1$Q;
|
|
6835
6833
|
|
|
@@ -6869,7 +6867,7 @@ var StarStyles = {
|
|
|
6869
6867
|
});
|
|
6870
6868
|
},
|
|
6871
6869
|
};
|
|
6872
|
-
var Container$
|
|
6870
|
+
var Container$v = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6873
6871
|
var templateObject_1$P;
|
|
6874
6872
|
|
|
6875
6873
|
var StarContainer = newStyled.div(function (_a) {
|
|
@@ -6887,7 +6885,7 @@ var sizes = {
|
|
|
6887
6885
|
};
|
|
6888
6886
|
var StarList = function (_a) {
|
|
6889
6887
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6890
|
-
return (jsx$1(Container$
|
|
6888
|
+
return (jsx$1(Container$v, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6891
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));
|
|
6892
6890
|
}) }, void 0));
|
|
6893
6891
|
};
|
|
@@ -6931,7 +6929,7 @@ var LabelStyles = {
|
|
|
6931
6929
|
});
|
|
6932
6930
|
},
|
|
6933
6931
|
};
|
|
6934
|
-
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"])));
|
|
6935
6933
|
var templateObject_1$O;
|
|
6936
6934
|
|
|
6937
6935
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -6945,10 +6943,10 @@ var starsNumber = 5;
|
|
|
6945
6943
|
var Rating = function (_a) {
|
|
6946
6944
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6947
6945
|
var theme = useTheme();
|
|
6948
|
-
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));
|
|
6949
6947
|
};
|
|
6950
6948
|
|
|
6951
|
-
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"])));
|
|
6952
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; });
|
|
6953
6951
|
var textButtonStyles = function (theme) { return ({
|
|
6954
6952
|
border: 'none',
|
|
@@ -6962,7 +6960,7 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6962
6960
|
var FitPredictor = function (_a) {
|
|
6963
6961
|
var onClick = _a.onClick;
|
|
6964
6962
|
var theme = useTheme();
|
|
6965
|
-
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));
|
|
6966
6964
|
};
|
|
6967
6965
|
var templateObject_1$N, templateObject_2$v;
|
|
6968
6966
|
|
|
@@ -7001,7 +6999,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
7001
6999
|
position: 'absolute',
|
|
7002
7000
|
});
|
|
7003
7001
|
});
|
|
7004
|
-
var Container$
|
|
7002
|
+
var Container$s = newStyled.div(function (_a) {
|
|
7005
7003
|
var widthAuto = _a.widthAuto;
|
|
7006
7004
|
return ({
|
|
7007
7005
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -7015,7 +7013,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
7015
7013
|
var ProgressBar = function (_a) {
|
|
7016
7014
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
7017
7015
|
var theme = useTheme();
|
|
7018
|
-
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));
|
|
7019
7017
|
};
|
|
7020
7018
|
var templateObject_1$M;
|
|
7021
7019
|
|
|
@@ -7038,7 +7036,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7038
7036
|
};
|
|
7039
7037
|
}
|
|
7040
7038
|
};
|
|
7041
|
-
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) {
|
|
7042
7040
|
var backgroundColor = _a.backgroundColor;
|
|
7043
7041
|
return backgroundColor;
|
|
7044
7042
|
}, function (_a) {
|
|
@@ -7066,7 +7064,7 @@ var Container$s = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
7066
7064
|
var IconButton = function (_a) {
|
|
7067
7065
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7068
7066
|
var theme = useTheme();
|
|
7069
|
-
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));
|
|
7070
7068
|
};
|
|
7071
7069
|
var templateObject_1$L;
|
|
7072
7070
|
|
|
@@ -7348,7 +7346,7 @@ var ContainerStyles = {
|
|
|
7348
7346
|
};
|
|
7349
7347
|
|
|
7350
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"])));
|
|
7351
|
-
var Container$
|
|
7349
|
+
var Container$q = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7352
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) {
|
|
7353
7351
|
var disabled = _a.disabled;
|
|
7354
7352
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -7364,7 +7362,7 @@ var RadioInput = function (_a) {
|
|
|
7364
7362
|
var value = event.currentTarget.value;
|
|
7365
7363
|
onChange({ value: value, label: label });
|
|
7366
7364
|
};
|
|
7367
|
-
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));
|
|
7368
7366
|
};
|
|
7369
7367
|
var templateObject_1$J, templateObject_2$t;
|
|
7370
7368
|
|
|
@@ -7381,7 +7379,7 @@ var RadioGroupInput = function (_a) {
|
|
|
7381
7379
|
};
|
|
7382
7380
|
|
|
7383
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"])));
|
|
7384
|
-
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"])));
|
|
7385
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) {
|
|
7386
7384
|
var color = _a.color;
|
|
7387
7385
|
return color;
|
|
@@ -7395,18 +7393,18 @@ var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemp
|
|
|
7395
7393
|
var Minimalistic = function (_a) {
|
|
7396
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;
|
|
7397
7395
|
var theme = useTheme();
|
|
7398
|
-
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));
|
|
7399
7397
|
};
|
|
7400
7398
|
var templateObject_1$I, templateObject_2$s, templateObject_3$j;
|
|
7401
7399
|
|
|
7402
|
-
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"])));
|
|
7403
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; });
|
|
7404
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; });
|
|
7405
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"])));
|
|
7406
7404
|
var Simple = function (_a) {
|
|
7407
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;
|
|
7408
7406
|
var theme = useTheme();
|
|
7409
|
-
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));
|
|
7410
7408
|
};
|
|
7411
7409
|
var templateObject_1$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
|
|
7412
7410
|
|
|
@@ -7415,10 +7413,10 @@ var Bundle = {
|
|
|
7415
7413
|
Simple: Simple,
|
|
7416
7414
|
};
|
|
7417
7415
|
|
|
7418
|
-
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"])));
|
|
7419
7417
|
var Tag = function (_a) {
|
|
7420
7418
|
var text = _a.text, className = _a.className;
|
|
7421
|
-
return jsx$1(Container$
|
|
7419
|
+
return jsx$1(Container$n, __assign({ className: className }, { children: text }), void 0);
|
|
7422
7420
|
};
|
|
7423
7421
|
var templateObject_1$G;
|
|
7424
7422
|
|
|
@@ -7536,14 +7534,53 @@ var InputLabel = function (_a) {
|
|
|
7536
7534
|
};
|
|
7537
7535
|
var templateObject_1$F, templateObject_2$q;
|
|
7538
7536
|
|
|
7537
|
+
/**
|
|
7538
|
+
* @returns number formatted with "," and 2 decimals as string
|
|
7539
|
+
*/
|
|
7540
|
+
var decimalFormat = function (number) {
|
|
7541
|
+
return number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
|
|
7542
|
+
};
|
|
7543
|
+
|
|
7539
7544
|
var isEmpty = function (value) {
|
|
7540
7545
|
return value.length === 0;
|
|
7546
|
+
};
|
|
7547
|
+
var isEmail = function (value) {
|
|
7548
|
+
return /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value);
|
|
7549
|
+
};
|
|
7550
|
+
var isNumber = function (value) {
|
|
7551
|
+
return /^[0-9]*$/.test(value);
|
|
7552
|
+
};
|
|
7553
|
+
var isPhoneNumber = function (value) {
|
|
7554
|
+
return /^\d{10}$/.test(value);
|
|
7555
|
+
};
|
|
7556
|
+
var isValidDate = function (value) {
|
|
7557
|
+
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
7558
|
+
};
|
|
7559
|
+
|
|
7560
|
+
var mouseClickEvents = ['mousedown', 'click', 'mouseup'];
|
|
7561
|
+
var simulateMouseClick = function (element) {
|
|
7562
|
+
mouseClickEvents.forEach(function (mouseEventType) {
|
|
7563
|
+
return element.dispatchEvent(new MouseEvent(mouseEventType, {
|
|
7564
|
+
view: window,
|
|
7565
|
+
bubbles: true,
|
|
7566
|
+
cancelable: true,
|
|
7567
|
+
buttons: 1,
|
|
7568
|
+
}));
|
|
7569
|
+
});
|
|
7541
7570
|
};
|
|
7542
7571
|
|
|
7543
7572
|
var sliceString = function (str, maxLength) {
|
|
7544
7573
|
return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
|
|
7545
7574
|
};
|
|
7546
7575
|
|
|
7576
|
+
var formatPrice = function (value, _a) {
|
|
7577
|
+
var _b = _a === void 0 ? {} : _a, _c = _b.locale, locale = _c === void 0 ? 'en-US' : _c, _d = _b.currency, currency = _d === void 0 ? 'USD' : _d;
|
|
7578
|
+
return new Intl.NumberFormat(locale, {
|
|
7579
|
+
style: 'currency',
|
|
7580
|
+
currency: currency,
|
|
7581
|
+
}).format(value);
|
|
7582
|
+
};
|
|
7583
|
+
|
|
7547
7584
|
var ErrorText = newStyled.h3(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
7548
7585
|
var ErrorContainer = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"])));
|
|
7549
7586
|
var Error$1 = function (_a) {
|
|
@@ -7553,7 +7590,7 @@ var Error$1 = function (_a) {
|
|
|
7553
7590
|
};
|
|
7554
7591
|
var templateObject_1$E, templateObject_2$p;
|
|
7555
7592
|
|
|
7556
|
-
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) {
|
|
7557
7594
|
var color = _a.color;
|
|
7558
7595
|
return color;
|
|
7559
7596
|
});
|
|
@@ -7657,7 +7694,7 @@ var BaseInput = function (_a) {
|
|
|
7657
7694
|
highlight: theme.colors.border.highlight,
|
|
7658
7695
|
boxShadow: theme.component.input.boxShadow,
|
|
7659
7696
|
};
|
|
7660
|
-
return (jsxs$1(Container$
|
|
7697
|
+
return (jsxs$1(Container$m, __assign({ color: status === InputValidationType.Valid
|
|
7661
7698
|
? theme.colors.shades['700'].color
|
|
7662
7699
|
: status === InputValidationType.Error
|
|
7663
7700
|
? theme.colors.semantic.urgent.color
|
|
@@ -7678,7 +7715,7 @@ var Button$4 = function (_a) {
|
|
|
7678
7715
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7679
7716
|
};
|
|
7680
7717
|
|
|
7681
|
-
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) {
|
|
7682
7719
|
var theme = _a.theme;
|
|
7683
7720
|
return theme.component.inputCustom.input.borderRadius;
|
|
7684
7721
|
});
|
|
@@ -7695,7 +7732,7 @@ var Custom = function (_a) {
|
|
|
7695
7732
|
text: text,
|
|
7696
7733
|
disabled: rest.disabled,
|
|
7697
7734
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7698
|
-
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));
|
|
7699
7736
|
};
|
|
7700
7737
|
var templateObject_1$C, templateObject_2$n;
|
|
7701
7738
|
|
|
@@ -7730,13 +7767,13 @@ var BasePlusButton = function (_a) {
|
|
|
7730
7767
|
};
|
|
7731
7768
|
var templateObject_1$A;
|
|
7732
7769
|
|
|
7733
|
-
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"])));
|
|
7734
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; });
|
|
7735
7772
|
var BasePlusIcon = function (_a) {
|
|
7736
7773
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7737
7774
|
var theme = useTheme();
|
|
7738
7775
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7739
|
-
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
|
|
7740
7777
|
? theme.colors.shades['700'].color
|
|
7741
7778
|
: status === InputValidationType.Error
|
|
7742
7779
|
? theme.colors.semantic.urgent.color
|
|
@@ -7751,7 +7788,7 @@ var Input$1 = {
|
|
|
7751
7788
|
SimplePlusIcon: BasePlusIcon,
|
|
7752
7789
|
};
|
|
7753
7790
|
|
|
7754
|
-
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) {
|
|
7755
7792
|
var width = _a.width;
|
|
7756
7793
|
return width;
|
|
7757
7794
|
}, function (_a) {
|
|
@@ -7767,7 +7804,7 @@ var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
7767
7804
|
var PaymentMethod = function (_a) {
|
|
7768
7805
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7769
7806
|
var theme = useTheme();
|
|
7770
|
-
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));
|
|
7771
7808
|
};
|
|
7772
7809
|
var templateObject_1$y;
|
|
7773
7810
|
|
|
@@ -7788,12 +7825,12 @@ var templateObject_1$x;
|
|
|
7788
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"])));
|
|
7789
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; });
|
|
7790
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"])));
|
|
7791
|
-
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; });
|
|
7792
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"])));
|
|
7793
7830
|
var Total = function (_a) {
|
|
7794
7831
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7795
7832
|
var theme = useTheme();
|
|
7796
|
-
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));
|
|
7797
7834
|
};
|
|
7798
7835
|
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
|
|
7799
7836
|
|
|
@@ -7822,13 +7859,13 @@ var Totals = {
|
|
|
7822
7859
|
Subtotal: Subtotal,
|
|
7823
7860
|
};
|
|
7824
7861
|
|
|
7825
|
-
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; });
|
|
7826
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"])));
|
|
7827
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; });
|
|
7828
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; });
|
|
7829
7866
|
var Note = function (_a) {
|
|
7830
7867
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7831
|
-
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));
|
|
7832
7869
|
};
|
|
7833
7870
|
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
|
|
7834
7871
|
|
|
@@ -7959,21 +7996,21 @@ var DeliveryDetails = function (_a) {
|
|
|
7959
7996
|
};
|
|
7960
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;
|
|
7961
7998
|
|
|
7962
|
-
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"])));
|
|
7963
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; });
|
|
7964
8001
|
var ScrollToTop = function (_a) {
|
|
7965
8002
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7966
8003
|
var theme = useTheme();
|
|
7967
|
-
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));
|
|
7968
8005
|
};
|
|
7969
8006
|
var templateObject_1$s, templateObject_2$g;
|
|
7970
8007
|
|
|
7971
|
-
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"])));
|
|
7972
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; });
|
|
7973
8010
|
var OrderBar = function (_a) {
|
|
7974
8011
|
var message = _a.message;
|
|
7975
8012
|
var theme = useTheme();
|
|
7976
|
-
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));
|
|
7977
8014
|
};
|
|
7978
8015
|
var templateObject_1$r, templateObject_2$f;
|
|
7979
8016
|
|
|
@@ -7988,7 +8025,7 @@ var SizeTable = function (_a) {
|
|
|
7988
8025
|
};
|
|
7989
8026
|
var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
|
|
7990
8027
|
|
|
7991
|
-
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"])));
|
|
7992
8029
|
var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
7993
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) {
|
|
7994
8031
|
var theme = _a.theme;
|
|
@@ -8029,7 +8066,7 @@ var Quantity = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
|
|
|
8029
8066
|
var SimpleOrderItem = function (_a) {
|
|
8030
8067
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
8031
8068
|
var theme = useTheme();
|
|
8032
|
-
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));
|
|
8033
8070
|
};
|
|
8034
8071
|
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
|
|
8035
8072
|
|
|
@@ -8040,7 +8077,7 @@ function formatDate(date) {
|
|
|
8040
8077
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8041
8078
|
}
|
|
8042
8079
|
|
|
8043
|
-
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"])));
|
|
8044
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) {
|
|
8045
8082
|
var theme = _a.theme;
|
|
8046
8083
|
return mediaQueries({ theme: theme })({
|
|
@@ -8078,7 +8115,7 @@ var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObje
|
|
|
8078
8115
|
var Review = function (_a) {
|
|
8079
8116
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8080
8117
|
var theme = useTheme();
|
|
8081
|
-
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));
|
|
8082
8119
|
};
|
|
8083
8120
|
var templateObject_1$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8084
8121
|
|
|
@@ -12440,6 +12477,12 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
12440
12477
|
CrossSellCheckbox: CrossSellCheckbox
|
|
12441
12478
|
});
|
|
12442
12479
|
|
|
12480
|
+
var Spacing = function (_a) {
|
|
12481
|
+
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
12482
|
+
var style = useMemo(function () { return (__assign(__assign({}, styleProp), { width: size, height: size, verticalAlign: 'middle', display: type === 'block' ? 'block' : 'inline-block' })); }, [size, type, styleProp]);
|
|
12483
|
+
return jsx$1("div", __assign({ style: style }, { children: children }), void 0);
|
|
12484
|
+
};
|
|
12485
|
+
|
|
12443
12486
|
var ImageContainer = newStyled.div(function (_a) {
|
|
12444
12487
|
var width = _a.width, height = _a.height;
|
|
12445
12488
|
return ({
|
|
@@ -12448,8 +12491,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12448
12491
|
height: height,
|
|
12449
12492
|
});
|
|
12450
12493
|
});
|
|
12451
|
-
var
|
|
12452
|
-
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; });
|
|
12494
|
+
var H1 = newStyled.h1(templateObject_1$j || (templateObject_1$j = __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; });
|
|
12453
12495
|
var getStylesBySize = function (size) {
|
|
12454
12496
|
switch (size) {
|
|
12455
12497
|
case ComponentSize.Medium:
|
|
@@ -12462,6 +12504,11 @@ var getStylesBySize = function (size) {
|
|
|
12462
12504
|
width: '9.813rem',
|
|
12463
12505
|
height: '13.125rem',
|
|
12464
12506
|
};
|
|
12507
|
+
case ComponentSize.Large:
|
|
12508
|
+
return {
|
|
12509
|
+
width: '262px',
|
|
12510
|
+
height: '350px',
|
|
12511
|
+
};
|
|
12465
12512
|
/* istanbul ignore next */
|
|
12466
12513
|
default:
|
|
12467
12514
|
return {
|
|
@@ -12471,10 +12518,25 @@ var getStylesBySize = function (size) {
|
|
|
12471
12518
|
}
|
|
12472
12519
|
};
|
|
12473
12520
|
var ProductItemMobile = function (_a) {
|
|
12474
|
-
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;
|
|
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, url = _a.url;
|
|
12475
12522
|
var theme = useTheme();
|
|
12476
12523
|
var styles = getStylesBySize(size);
|
|
12477
|
-
|
|
12524
|
+
var spaces = useMemo(function () {
|
|
12525
|
+
var _a, _b;
|
|
12526
|
+
var first = (_a = {},
|
|
12527
|
+
_a[ComponentSize.Large] = 20,
|
|
12528
|
+
_a[ComponentSize.Medium] = 12,
|
|
12529
|
+
_a[ComponentSize.Small] = 6,
|
|
12530
|
+
_a)[size];
|
|
12531
|
+
var second = (_b = {},
|
|
12532
|
+
_b[ComponentSize.Large] = 12,
|
|
12533
|
+
_b[ComponentSize.Medium] = 6,
|
|
12534
|
+
_b[ComponentSize.Small] = 4,
|
|
12535
|
+
_b)[size];
|
|
12536
|
+
return [first, second];
|
|
12537
|
+
}, [size]);
|
|
12538
|
+
var Container = url ? 'a' : 'div';
|
|
12539
|
+
return (jsxs(Container, __assign({ href: url, css: css(templateObject_2$9 || (templateObject_2$9 = __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 "]))) }, { 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));
|
|
12478
12540
|
};
|
|
12479
12541
|
var templateObject_1$j, templateObject_2$9;
|
|
12480
12542
|
|
|
@@ -12705,9 +12767,9 @@ var Header = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTem
|
|
|
12705
12767
|
});
|
|
12706
12768
|
});
|
|
12707
12769
|
var ResultsPanel = function (_a) {
|
|
12708
|
-
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll,
|
|
12770
|
+
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12709
12771
|
var theme = useTheme();
|
|
12710
|
-
return (jsxs$1(Container$7, __assign({ "data-testid":
|
|
12772
|
+
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));
|
|
12711
12773
|
};
|
|
12712
12774
|
var templateObject_1$c, templateObject_2$4, templateObject_3$4;
|
|
12713
12775
|
|
|
@@ -12855,7 +12917,7 @@ var SearchBar = function (_a) {
|
|
|
12855
12917
|
return function () { return clearTimeout(id); };
|
|
12856
12918
|
}, [onChange, state.term]);
|
|
12857
12919
|
var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
|
|
12858
|
-
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, {
|
|
12920
|
+
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) {
|
|
12859
12921
|
onSearch(value.title);
|
|
12860
12922
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
12861
12923
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
@@ -12865,8 +12927,8 @@ var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __ma
|
|
|
12865
12927
|
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"])));
|
|
12866
12928
|
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"])));
|
|
12867
12929
|
var ImageProductWithTags = function (_a) {
|
|
12868
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
12869
|
-
return (jsxs$1(Container$5, __assign({ "data-testid":
|
|
12930
|
+
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
12931
|
+
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));
|
|
12870
12932
|
};
|
|
12871
12933
|
var templateObject_1$a, templateObject_2$3, templateObject_3$3;
|
|
12872
12934
|
|
|
@@ -12884,7 +12946,7 @@ var SlideDots = function (_a) {
|
|
|
12884
12946
|
var theme = useTheme();
|
|
12885
12947
|
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
|
|
12886
12948
|
? theme.colors.shades.white.color
|
|
12887
|
-
: theme.colors.shades['700'].color, opacity: 0.6,
|
|
12949
|
+
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12888
12950
|
};
|
|
12889
12951
|
var templateObject_1$8;
|
|
12890
12952
|
|
|
@@ -12892,7 +12954,7 @@ var NavigationButton = newStyled(ArrowButton)(templateObject_1$7 || (templateObj
|
|
|
12892
12954
|
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12893
12955
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12894
12956
|
var SlideNavigation = function (_a) {
|
|
12895
|
-
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate,
|
|
12957
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12896
12958
|
var theme = useTheme();
|
|
12897
12959
|
var upperLimit = quantity - 1;
|
|
12898
12960
|
var lowerLimit = 0;
|
|
@@ -12900,7 +12962,7 @@ var SlideNavigation = function (_a) {
|
|
|
12900
12962
|
onNavigate(selectedIndex - 1);
|
|
12901
12963
|
} }, 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 () {
|
|
12902
12964
|
onNavigate(selectedIndex + 1);
|
|
12903
|
-
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId:
|
|
12965
|
+
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12904
12966
|
};
|
|
12905
12967
|
var templateObject_1$7, templateObject_2$2, templateObject_3$2;
|
|
12906
12968
|
|
|
@@ -12912,7 +12974,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12912
12974
|
useEffect(function () {
|
|
12913
12975
|
setSelectedImage(initialValue);
|
|
12914
12976
|
}, [initialValue]);
|
|
12915
|
-
return (jsxs$1(Container$3, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement,
|
|
12977
|
+
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));
|
|
12916
12978
|
};
|
|
12917
12979
|
var templateObject_1$6;
|
|
12918
12980
|
|
|
@@ -13052,5 +13114,5 @@ var QuantityPicker = function (_a) {
|
|
|
13052
13114
|
};
|
|
13053
13115
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
13054
13116
|
|
|
13055
|
-
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, modalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
13117
|
+
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
13056
13118
|
//# sourceMappingURL=index.esm.js.map
|