@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.js
CHANGED
|
@@ -439,8 +439,8 @@ var Payment = /*#__PURE__*/Object.freeze({
|
|
|
439
439
|
});
|
|
440
440
|
|
|
441
441
|
var SlideDot = function (_a) {
|
|
442
|
-
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity,
|
|
443
|
-
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid:
|
|
442
|
+
var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
|
|
443
|
+
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid: testId, fill: "none" }, { children: jsxRuntime.jsx("g", __assign({ opacity: opacity }, { children: jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
|
|
444
444
|
};
|
|
445
445
|
|
|
446
446
|
var SlideDots$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -3457,7 +3457,7 @@ var AssetsProvider = function (_a) {
|
|
|
3457
3457
|
};
|
|
3458
3458
|
var useThemeAssets = function () { return React.useContext(AssetsContext); };
|
|
3459
3459
|
|
|
3460
|
-
var Container$
|
|
3460
|
+
var Container$E = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
3461
3461
|
var flex = _a.flex;
|
|
3462
3462
|
return flex &&
|
|
3463
3463
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3470,7 +3470,7 @@ var Container$F = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
3470
3470
|
var Card = function (_a) {
|
|
3471
3471
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
3472
3472
|
var theme = useTheme();
|
|
3473
|
-
return (jsxRuntime.jsx(Container$
|
|
3473
|
+
return (jsxRuntime.jsx(Container$E, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3474
3474
|
};
|
|
3475
3475
|
var Card$1 = Object.assign(Card, {
|
|
3476
3476
|
Header: CardHeader,
|
|
@@ -3496,9 +3496,9 @@ function jsxs(type, props, key) {
|
|
|
3496
3496
|
}
|
|
3497
3497
|
|
|
3498
3498
|
var BaseButton = function (_a) {
|
|
3499
|
-
var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline;
|
|
3500
|
-
return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: {
|
|
3501
|
-
display: inline ? '
|
|
3499
|
+
var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.testId, testId = _c === void 0 ? 'base-button' : _c;
|
|
3500
|
+
return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
|
|
3501
|
+
display: inline ? 'inline-flex' : 'flex',
|
|
3502
3502
|
justifyContent: 'center',
|
|
3503
3503
|
alignItems: 'center',
|
|
3504
3504
|
padding: '0.75rem 2rem',
|
|
@@ -3534,10 +3534,10 @@ var getStylesBySize$9 = function (size, theme) {
|
|
|
3534
3534
|
}
|
|
3535
3535
|
};
|
|
3536
3536
|
var BaseCTA = function (_a) {
|
|
3537
|
-
var text = _a.text,
|
|
3537
|
+
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
|
|
3538
3538
|
var theme = useTheme();
|
|
3539
3539
|
var stylesBySize = getStylesBySize$9(size, theme);
|
|
3540
|
-
return (jsx(BaseButton, __assign({
|
|
3540
|
+
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': {
|
|
3541
3541
|
backgroundColor: theme.colors.background.disabled,
|
|
3542
3542
|
color: theme.colors.text.disabled,
|
|
3543
3543
|
cursor: 'not-allowed',
|
|
@@ -3545,9 +3545,9 @@ var BaseCTA = function (_a) {
|
|
|
3545
3545
|
};
|
|
3546
3546
|
|
|
3547
3547
|
var ButtonPrimary = function (_a) {
|
|
3548
|
-
|
|
3548
|
+
_a.testId; var props = __rest(_a, ["testId"]);
|
|
3549
3549
|
var theme = useTheme();
|
|
3550
|
-
return (jsx(BaseCTA, {
|
|
3550
|
+
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3551
3551
|
backgroundColor: theme.component.button.primary.active.backgroundColor,
|
|
3552
3552
|
color: theme.component.button.primary.active.color,
|
|
3553
3553
|
border: theme.component.button.border,
|
|
@@ -3559,13 +3559,12 @@ var ButtonPrimary = function (_a) {
|
|
|
3559
3559
|
backgroundColor: theme.colors.background.disabled,
|
|
3560
3560
|
color: theme.colors.text.disabled,
|
|
3561
3561
|
},
|
|
3562
|
-
}
|
|
3562
|
+
} }), void 0));
|
|
3563
3563
|
};
|
|
3564
3564
|
|
|
3565
|
-
var ButtonSecondary = function (
|
|
3566
|
-
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;
|
|
3565
|
+
var ButtonSecondary = function (props) {
|
|
3567
3566
|
var theme = useTheme();
|
|
3568
|
-
return (jsx(BaseCTA, {
|
|
3567
|
+
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3569
3568
|
backgroundColor: theme.component.button.secondary.active.backgroundColor,
|
|
3570
3569
|
color: theme.component.button.secondary.active.color,
|
|
3571
3570
|
border: theme.component.button.border,
|
|
@@ -3576,13 +3575,12 @@ var ButtonSecondary = function (_a) {
|
|
|
3576
3575
|
backgroundColor: theme.colors.shades['50'].color,
|
|
3577
3576
|
color: theme.colors.shades['250'].color,
|
|
3578
3577
|
},
|
|
3579
|
-
}
|
|
3578
|
+
} }), void 0));
|
|
3580
3579
|
};
|
|
3581
3580
|
|
|
3582
|
-
var ButtonSecondaryOutline = function (
|
|
3583
|
-
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;
|
|
3581
|
+
var ButtonSecondaryOutline = function (props) {
|
|
3584
3582
|
var theme = useTheme();
|
|
3585
|
-
return (jsx(BaseCTA, {
|
|
3583
|
+
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3586
3584
|
backgroundColor: theme.component.button.secondary.active.color,
|
|
3587
3585
|
color: theme.component.button.secondary.active.backgroundColor,
|
|
3588
3586
|
border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
|
|
@@ -3595,7 +3593,7 @@ var ButtonSecondaryOutline = function (_a) {
|
|
|
3595
3593
|
color: theme.colors.text.disabled,
|
|
3596
3594
|
border: 'none',
|
|
3597
3595
|
},
|
|
3598
|
-
}
|
|
3596
|
+
} }), void 0));
|
|
3599
3597
|
};
|
|
3600
3598
|
|
|
3601
3599
|
function _extends() {
|
|
@@ -6180,7 +6178,7 @@ var CustomCheckboxStyles = {
|
|
|
6180
6178
|
},
|
|
6181
6179
|
};
|
|
6182
6180
|
|
|
6183
|
-
var Container$
|
|
6181
|
+
var Container$D = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
6184
6182
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6185
6183
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6186
6184
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6209,7 +6207,7 @@ var Checkbox = function (_a) {
|
|
|
6209
6207
|
React.useEffect(function () {
|
|
6210
6208
|
mounted.current = true;
|
|
6211
6209
|
}, []);
|
|
6212
|
-
return (jsxRuntime.jsxs(Container$
|
|
6210
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6213
6211
|
};
|
|
6214
6212
|
var templateObject_1$11, templateObject_2$E;
|
|
6215
6213
|
|
|
@@ -6259,8 +6257,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
6259
6257
|
});
|
|
6260
6258
|
|
|
6261
6259
|
function SimpleDropdown(_a) {
|
|
6262
|
-
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;
|
|
6263
|
-
var
|
|
6260
|
+
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e;
|
|
6261
|
+
var _f = React.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
6264
6262
|
var selectedOptionLabel = React.useMemo(function () {
|
|
6265
6263
|
if (selectedValue) {
|
|
6266
6264
|
return selectedValue.label;
|
|
@@ -6280,7 +6278,7 @@ function SimpleDropdown(_a) {
|
|
|
6280
6278
|
setSelectedValue(value);
|
|
6281
6279
|
}, [value]);
|
|
6282
6280
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
6283
|
-
return (jsxRuntime.jsxs(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6281
|
+
return (jsxRuntime.jsxs(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6284
6282
|
}
|
|
6285
6283
|
|
|
6286
6284
|
var getStylesBySize$8 = function (size, theme) {
|
|
@@ -6298,13 +6296,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
6298
6296
|
}
|
|
6299
6297
|
};
|
|
6300
6298
|
var SimpleSelector = function (_a) {
|
|
6301
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
|
|
6299
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
|
|
6302
6300
|
var theme = useTheme();
|
|
6303
6301
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
6304
6302
|
var activeStyles = active
|
|
6305
6303
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
6306
6304
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
6307
|
-
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
6305
|
+
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
6308
6306
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
6309
6307
|
}, '&:disabled': {
|
|
6310
6308
|
color: theme.colors.shades['250'].color,
|
|
@@ -6313,7 +6311,7 @@ var SimpleSelector = function (_a) {
|
|
|
6313
6311
|
};
|
|
6314
6312
|
|
|
6315
6313
|
var SelectorSecondary = function (_a) {
|
|
6316
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, onClick = _a.onClick;
|
|
6314
|
+
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
6317
6315
|
var theme = useTheme();
|
|
6318
6316
|
var stylesByActive = active
|
|
6319
6317
|
? {
|
|
@@ -6328,7 +6326,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6328
6326
|
border: theme.component.selector.default.border,
|
|
6329
6327
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
6330
6328
|
};
|
|
6331
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
6329
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
6332
6330
|
background: theme.component.selector.hover.background,
|
|
6333
6331
|
color: theme.component.selector.hover.color,
|
|
6334
6332
|
}, '&:disabled': {
|
|
@@ -6481,7 +6479,7 @@ var SizeSelector = function (_a) {
|
|
|
6481
6479
|
return (jsx(SelectorSecondary, { css: {
|
|
6482
6480
|
padding: '0.75rem 1rem 0.625rem',
|
|
6483
6481
|
margin: '0 0.5rem 0.625rem 0',
|
|
6484
|
-
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6482
|
+
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
|
|
6485
6483
|
}) }), void 0)] }), void 0));
|
|
6486
6484
|
};
|
|
6487
6485
|
var templateObject_1$$;
|
|
@@ -6531,12 +6529,12 @@ var TextButton = function (_a) {
|
|
|
6531
6529
|
};
|
|
6532
6530
|
var templateObject_1$_;
|
|
6533
6531
|
|
|
6534
|
-
var Container$
|
|
6532
|
+
var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
6535
6533
|
var P$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6536
6534
|
var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6537
6535
|
var SizeFitGuide = function (_a) {
|
|
6538
6536
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6539
|
-
return (jsxRuntime.jsxs(Container$
|
|
6537
|
+
return (jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$3, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6540
6538
|
};
|
|
6541
6539
|
var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
|
|
6542
6540
|
|
|
@@ -6568,7 +6566,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6568
6566
|
};
|
|
6569
6567
|
}
|
|
6570
6568
|
};
|
|
6571
|
-
var Container$
|
|
6569
|
+
var Container$B = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
6572
6570
|
var backgroundColor = _a.backgroundColor;
|
|
6573
6571
|
return backgroundColor;
|
|
6574
6572
|
}, function (_a) {
|
|
@@ -6605,7 +6603,7 @@ var H3$2 = newStyled.h3(templateObject_2$B || (templateObject_2$B = __makeTempla
|
|
|
6605
6603
|
var DiscountTag = function (_a) {
|
|
6606
6604
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
6607
6605
|
var theme = useTheme();
|
|
6608
|
-
return (jsxRuntime.jsx(Container$
|
|
6606
|
+
return (jsxRuntime.jsx(Container$B, __assign({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6609
6607
|
};
|
|
6610
6608
|
var templateObject_1$Y, templateObject_2$B;
|
|
6611
6609
|
|
|
@@ -6631,7 +6629,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
6631
6629
|
};
|
|
6632
6630
|
}
|
|
6633
6631
|
};
|
|
6634
|
-
var Container$
|
|
6632
|
+
var Container$A = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6635
6633
|
var Price = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
6636
6634
|
var weight = _a.weight;
|
|
6637
6635
|
return (weight ? weight : '400');
|
|
@@ -6662,39 +6660,39 @@ var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __ma
|
|
|
6662
6660
|
var PriceLabel = function (_a) {
|
|
6663
6661
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6664
6662
|
var theme = useTheme();
|
|
6665
|
-
return (jsxRuntime.jsxs(Container$
|
|
6663
|
+
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsx(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6666
6664
|
};
|
|
6667
6665
|
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6668
6666
|
|
|
6669
6667
|
var OneColorSelector = function (_a) {
|
|
6670
|
-
var color = _a.color, selected = _a.selected,
|
|
6668
|
+
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
6671
6669
|
var theme = useTheme();
|
|
6672
6670
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6673
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6671
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6674
6672
|
};
|
|
6675
6673
|
|
|
6676
6674
|
var ThreeColorSelector = function (_a) {
|
|
6677
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected,
|
|
6675
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
|
|
6678
6676
|
var theme = useTheme();
|
|
6679
6677
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6680
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6678
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsxRuntime.jsx("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6681
6679
|
};
|
|
6682
6680
|
|
|
6683
6681
|
var TwoColorSelector = function (_a) {
|
|
6684
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected,
|
|
6682
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId;
|
|
6685
6683
|
var theme = useTheme();
|
|
6686
6684
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6687
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6685
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6688
6686
|
};
|
|
6689
6687
|
|
|
6690
6688
|
var ColorSelector = function (_a) {
|
|
6691
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected,
|
|
6689
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
|
|
6692
6690
|
if (secondaryColor && tertiaryColor)
|
|
6693
|
-
return (jsxRuntime.jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected,
|
|
6691
|
+
return (jsxRuntime.jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId }, void 0));
|
|
6694
6692
|
else if (secondaryColor && !tertiaryColor)
|
|
6695
|
-
return (jsxRuntime.jsx(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected,
|
|
6693
|
+
return (jsxRuntime.jsx(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected, testId: testId }, void 0));
|
|
6696
6694
|
else
|
|
6697
|
-
return jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected,
|
|
6695
|
+
return jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected, testId: testId }, void 0);
|
|
6698
6696
|
};
|
|
6699
6697
|
|
|
6700
6698
|
var OutOfStock = function (_a) {
|
|
@@ -6727,16 +6725,16 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6727
6725
|
});
|
|
6728
6726
|
var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
|
|
6729
6727
|
|
|
6730
|
-
var Container$
|
|
6728
|
+
var Container$z = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
|
|
6731
6729
|
var borderColor = _a.borderColor;
|
|
6732
6730
|
return borderColor;
|
|
6733
6731
|
});
|
|
6734
6732
|
var Image$2 = newStyled.img(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6735
6733
|
var PatternSelector = function (_a) {
|
|
6736
|
-
var url = _a.url, selected = _a.selected,
|
|
6734
|
+
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
6737
6735
|
var theme = useTheme();
|
|
6738
6736
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6739
|
-
return (jsxRuntime.jsx(Container$
|
|
6737
|
+
return (jsxRuntime.jsx(Container$z, __assign({ "data-testid": testId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6740
6738
|
};
|
|
6741
6739
|
var templateObject_1$V, templateObject_2$y;
|
|
6742
6740
|
|
|
@@ -6744,7 +6742,7 @@ var renderOptions$1 = function (options) {
|
|
|
6744
6742
|
if (options.length)
|
|
6745
6743
|
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
|
|
6746
6744
|
var checked = _a.checked;
|
|
6747
|
-
return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked,
|
|
6745
|
+
return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector") }), void 0)) : (option.pattern && jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
|
|
6748
6746
|
} }), option.label)); });
|
|
6749
6747
|
else
|
|
6750
6748
|
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
@@ -6756,7 +6754,7 @@ var SingleColorPicker = function (_a) {
|
|
|
6756
6754
|
|
|
6757
6755
|
var renderOptions = function (selectedColor, options) {
|
|
6758
6756
|
if (options && options.length)
|
|
6759
|
-
return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option),
|
|
6757
|
+
return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), testId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && (jsxRuntime.jsx(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
|
|
6760
6758
|
else
|
|
6761
6759
|
return jsxRuntime.jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6762
6760
|
};
|
|
@@ -6801,11 +6799,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
6801
6799
|
};
|
|
6802
6800
|
var templateObject_1$U;
|
|
6803
6801
|
|
|
6804
|
-
var Container$
|
|
6802
|
+
var Container$y = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"], ["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"])));
|
|
6805
6803
|
var Button$5 = newStyled.button(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
|
|
6806
6804
|
var ImagePreviewList = function (_a) {
|
|
6807
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick,
|
|
6808
|
-
return (jsxRuntime.jsx(Container$
|
|
6805
|
+
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
6806
|
+
return (jsxRuntime.jsx(Container$y, __assign({ "data-testid": testId }, { children: images.map(function (item) {
|
|
6809
6807
|
return (jsxRuntime.jsx(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6810
6808
|
}) }), void 0));
|
|
6811
6809
|
};
|
|
@@ -6818,16 +6816,16 @@ var Image = function (_a) {
|
|
|
6818
6816
|
};
|
|
6819
6817
|
var templateObject_1$S;
|
|
6820
6818
|
|
|
6821
|
-
var Container$
|
|
6819
|
+
var Container$x = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
6822
6820
|
var TopTagContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6823
6821
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
6824
6822
|
var ImageProductWithTags$1 = function (_a) {
|
|
6825
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
6826
|
-
return (jsxRuntime.jsxs(Container$
|
|
6823
|
+
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
6824
|
+
return (jsxRuntime.jsxs(Container$x, __assign({ "data-testid": testId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsxRuntime.jsx(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6827
6825
|
};
|
|
6828
6826
|
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6829
6827
|
|
|
6830
|
-
var Container$
|
|
6828
|
+
var Container$w = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
6831
6829
|
var ProductGallery = function (_a) {
|
|
6832
6830
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6833
6831
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6835,9 +6833,9 @@ var ProductGallery = function (_a) {
|
|
|
6835
6833
|
React.useEffect(function () {
|
|
6836
6834
|
setSelectedImage(initialValue);
|
|
6837
6835
|
}, [initialValue]);
|
|
6838
|
-
return (jsxRuntime.jsxs(Container$
|
|
6836
|
+
return (jsxRuntime.jsxs(Container$w, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
|
|
6839
6837
|
setSelectedImage(value);
|
|
6840
|
-
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement,
|
|
6838
|
+
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
6841
6839
|
};
|
|
6842
6840
|
var templateObject_1$Q;
|
|
6843
6841
|
|
|
@@ -6877,7 +6875,7 @@ var StarStyles = {
|
|
|
6877
6875
|
});
|
|
6878
6876
|
},
|
|
6879
6877
|
};
|
|
6880
|
-
var Container$
|
|
6878
|
+
var Container$v = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6881
6879
|
var templateObject_1$P;
|
|
6882
6880
|
|
|
6883
6881
|
var StarContainer = newStyled.div(function (_a) {
|
|
@@ -6895,7 +6893,7 @@ var sizes = {
|
|
|
6895
6893
|
};
|
|
6896
6894
|
var StarList = function (_a) {
|
|
6897
6895
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6898
|
-
return (jsxRuntime.jsx(Container$
|
|
6896
|
+
return (jsxRuntime.jsx(Container$v, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6899
6897
|
return (jsxRuntime.jsx(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
6900
6898
|
}) }, void 0));
|
|
6901
6899
|
};
|
|
@@ -6939,7 +6937,7 @@ var LabelStyles = {
|
|
|
6939
6937
|
});
|
|
6940
6938
|
},
|
|
6941
6939
|
};
|
|
6942
|
-
var Container$
|
|
6940
|
+
var Container$u = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6943
6941
|
var templateObject_1$O;
|
|
6944
6942
|
|
|
6945
6943
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -6953,10 +6951,10 @@ var starsNumber = 5;
|
|
|
6953
6951
|
var Rating = function (_a) {
|
|
6954
6952
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6955
6953
|
var theme = useTheme();
|
|
6956
|
-
return (jsxRuntime.jsxs(Container$
|
|
6954
|
+
return (jsxRuntime.jsxs(Container$u, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6957
6955
|
};
|
|
6958
6956
|
|
|
6959
|
-
var Container$
|
|
6957
|
+
var Container$t = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
6960
6958
|
var P$2 = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
6961
6959
|
var textButtonStyles = function (theme) { return ({
|
|
6962
6960
|
border: 'none',
|
|
@@ -6970,7 +6968,7 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6970
6968
|
var FitPredictor = function (_a) {
|
|
6971
6969
|
var onClick = _a.onClick;
|
|
6972
6970
|
var theme = useTheme();
|
|
6973
|
-
return (jsxs(Container$
|
|
6971
|
+
return (jsxs(Container$t, __assign({ theme: theme }, { children: [jsx(Container$t, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
6974
6972
|
};
|
|
6975
6973
|
var templateObject_1$N, templateObject_2$v;
|
|
6976
6974
|
|
|
@@ -7009,7 +7007,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
7009
7007
|
position: 'absolute',
|
|
7010
7008
|
});
|
|
7011
7009
|
});
|
|
7012
|
-
var Container$
|
|
7010
|
+
var Container$s = newStyled.div(function (_a) {
|
|
7013
7011
|
var widthAuto = _a.widthAuto;
|
|
7014
7012
|
return ({
|
|
7015
7013
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -7023,7 +7021,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
7023
7021
|
var ProgressBar = function (_a) {
|
|
7024
7022
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
7025
7023
|
var theme = useTheme();
|
|
7026
|
-
return (jsxRuntime.jsxs(Container$
|
|
7024
|
+
return (jsxRuntime.jsxs(Container$s, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
7027
7025
|
};
|
|
7028
7026
|
var templateObject_1$M;
|
|
7029
7027
|
|
|
@@ -7046,7 +7044,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7046
7044
|
};
|
|
7047
7045
|
}
|
|
7048
7046
|
};
|
|
7049
|
-
var Container$
|
|
7047
|
+
var Container$r = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
7050
7048
|
var backgroundColor = _a.backgroundColor;
|
|
7051
7049
|
return backgroundColor;
|
|
7052
7050
|
}, function (_a) {
|
|
@@ -7074,7 +7072,7 @@ var Container$s = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
7074
7072
|
var IconButton = function (_a) {
|
|
7075
7073
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7076
7074
|
var theme = useTheme();
|
|
7077
|
-
return (jsxRuntime.jsx(Container$
|
|
7075
|
+
return (jsxRuntime.jsx(Container$r, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
7078
7076
|
};
|
|
7079
7077
|
var templateObject_1$L;
|
|
7080
7078
|
|
|
@@ -7356,7 +7354,7 @@ var ContainerStyles = {
|
|
|
7356
7354
|
};
|
|
7357
7355
|
|
|
7358
7356
|
var Wrapper$4 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7359
|
-
var Container$
|
|
7357
|
+
var Container$q = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7360
7358
|
var Input$2 = newStyled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
7361
7359
|
var disabled = _a.disabled;
|
|
7362
7360
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -7372,7 +7370,7 @@ var RadioInput = function (_a) {
|
|
|
7372
7370
|
var value = event.currentTarget.value;
|
|
7373
7371
|
onChange({ value: value, label: label });
|
|
7374
7372
|
};
|
|
7375
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
7373
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$q, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7376
7374
|
};
|
|
7377
7375
|
var templateObject_1$J, templateObject_2$t;
|
|
7378
7376
|
|
|
@@ -7389,7 +7387,7 @@ var RadioGroupInput = function (_a) {
|
|
|
7389
7387
|
};
|
|
7390
7388
|
|
|
7391
7389
|
var Wrapper$3 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7392
|
-
var Container$
|
|
7390
|
+
var Container$p = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7393
7391
|
var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
7394
7392
|
var color = _a.color;
|
|
7395
7393
|
return color;
|
|
@@ -7403,18 +7401,18 @@ var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemp
|
|
|
7403
7401
|
var Minimalistic = function (_a) {
|
|
7404
7402
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
|
|
7405
7403
|
var theme = useTheme();
|
|
7406
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
7404
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$p, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$4, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: exports.ComponentSize.Small }, void 0)] }), void 0), jsxRuntime.jsxs(Container$p, __assign({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxRuntime.jsxs(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7407
7405
|
};
|
|
7408
7406
|
var templateObject_1$I, templateObject_2$s, templateObject_3$j;
|
|
7409
7407
|
|
|
7410
|
-
var Container$
|
|
7408
|
+
var Container$o = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7411
7409
|
var Title$3 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
7412
7410
|
var Details$1 = newStyled.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7413
7411
|
var PriceContainer$1 = newStyled.span(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
7414
7412
|
var Simple = function (_a) {
|
|
7415
7413
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
7416
7414
|
var theme = useTheme();
|
|
7417
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
7415
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(Title$3, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7418
7416
|
};
|
|
7419
7417
|
var templateObject_1$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
|
|
7420
7418
|
|
|
@@ -7423,10 +7421,10 @@ var Bundle = {
|
|
|
7423
7421
|
Simple: Simple,
|
|
7424
7422
|
};
|
|
7425
7423
|
|
|
7426
|
-
var Container$
|
|
7424
|
+
var Container$n = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
7427
7425
|
var Tag = function (_a) {
|
|
7428
7426
|
var text = _a.text, className = _a.className;
|
|
7429
|
-
return jsxRuntime.jsx(Container$
|
|
7427
|
+
return jsxRuntime.jsx(Container$n, __assign({ className: className }, { children: text }), void 0);
|
|
7430
7428
|
};
|
|
7431
7429
|
var templateObject_1$G;
|
|
7432
7430
|
|
|
@@ -7544,14 +7542,53 @@ var InputLabel = function (_a) {
|
|
|
7544
7542
|
};
|
|
7545
7543
|
var templateObject_1$F, templateObject_2$q;
|
|
7546
7544
|
|
|
7545
|
+
/**
|
|
7546
|
+
* @returns number formatted with "," and 2 decimals as string
|
|
7547
|
+
*/
|
|
7548
|
+
var decimalFormat = function (number) {
|
|
7549
|
+
return number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
|
|
7550
|
+
};
|
|
7551
|
+
|
|
7547
7552
|
var isEmpty = function (value) {
|
|
7548
7553
|
return value.length === 0;
|
|
7554
|
+
};
|
|
7555
|
+
var isEmail = function (value) {
|
|
7556
|
+
return /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value);
|
|
7557
|
+
};
|
|
7558
|
+
var isNumber = function (value) {
|
|
7559
|
+
return /^[0-9]*$/.test(value);
|
|
7560
|
+
};
|
|
7561
|
+
var isPhoneNumber = function (value) {
|
|
7562
|
+
return /^\d{10}$/.test(value);
|
|
7563
|
+
};
|
|
7564
|
+
var isValidDate = function (value) {
|
|
7565
|
+
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
7566
|
+
};
|
|
7567
|
+
|
|
7568
|
+
var mouseClickEvents = ['mousedown', 'click', 'mouseup'];
|
|
7569
|
+
var simulateMouseClick = function (element) {
|
|
7570
|
+
mouseClickEvents.forEach(function (mouseEventType) {
|
|
7571
|
+
return element.dispatchEvent(new MouseEvent(mouseEventType, {
|
|
7572
|
+
view: window,
|
|
7573
|
+
bubbles: true,
|
|
7574
|
+
cancelable: true,
|
|
7575
|
+
buttons: 1,
|
|
7576
|
+
}));
|
|
7577
|
+
});
|
|
7549
7578
|
};
|
|
7550
7579
|
|
|
7551
7580
|
var sliceString = function (str, maxLength) {
|
|
7552
7581
|
return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
|
|
7553
7582
|
};
|
|
7554
7583
|
|
|
7584
|
+
var formatPrice = function (value, _a) {
|
|
7585
|
+
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;
|
|
7586
|
+
return new Intl.NumberFormat(locale, {
|
|
7587
|
+
style: 'currency',
|
|
7588
|
+
currency: currency,
|
|
7589
|
+
}).format(value);
|
|
7590
|
+
};
|
|
7591
|
+
|
|
7555
7592
|
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; });
|
|
7556
7593
|
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"])));
|
|
7557
7594
|
var Error$1 = function (_a) {
|
|
@@ -7561,7 +7598,7 @@ var Error$1 = function (_a) {
|
|
|
7561
7598
|
};
|
|
7562
7599
|
var templateObject_1$E, templateObject_2$p;
|
|
7563
7600
|
|
|
7564
|
-
var Container$
|
|
7601
|
+
var Container$m = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
7565
7602
|
var color = _a.color;
|
|
7566
7603
|
return color;
|
|
7567
7604
|
});
|
|
@@ -7665,7 +7702,7 @@ var BaseInput = function (_a) {
|
|
|
7665
7702
|
highlight: theme.colors.border.highlight,
|
|
7666
7703
|
boxShadow: theme.component.input.boxShadow,
|
|
7667
7704
|
};
|
|
7668
|
-
return (jsxRuntime.jsxs(Container$
|
|
7705
|
+
return (jsxRuntime.jsxs(Container$m, __assign({ color: status === exports.InputValidationType.Valid
|
|
7669
7706
|
? theme.colors.shades['700'].color
|
|
7670
7707
|
: status === exports.InputValidationType.Error
|
|
7671
7708
|
? theme.colors.semantic.urgent.color
|
|
@@ -7686,7 +7723,7 @@ var Button$4 = function (_a) {
|
|
|
7686
7723
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7687
7724
|
};
|
|
7688
7725
|
|
|
7689
|
-
var Container$
|
|
7726
|
+
var Container$l = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
7690
7727
|
var theme = _a.theme;
|
|
7691
7728
|
return theme.component.inputCustom.input.borderRadius;
|
|
7692
7729
|
});
|
|
@@ -7703,7 +7740,7 @@ var Custom = function (_a) {
|
|
|
7703
7740
|
text: text,
|
|
7704
7741
|
disabled: rest.disabled,
|
|
7705
7742
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7706
|
-
return (jsxRuntime.jsx(Container$
|
|
7743
|
+
return (jsxRuntime.jsx(Container$l, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7707
7744
|
};
|
|
7708
7745
|
var templateObject_1$C, templateObject_2$n;
|
|
7709
7746
|
|
|
@@ -7738,13 +7775,13 @@ var BasePlusButton = function (_a) {
|
|
|
7738
7775
|
};
|
|
7739
7776
|
var templateObject_1$A;
|
|
7740
7777
|
|
|
7741
|
-
var Container$
|
|
7778
|
+
var Container$k = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
7742
7779
|
var IconContainer$3 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
7743
7780
|
var BasePlusIcon = function (_a) {
|
|
7744
7781
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7745
7782
|
var theme = useTheme();
|
|
7746
7783
|
var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7747
|
-
return (jsxRuntime.jsx(Container$
|
|
7784
|
+
return (jsxRuntime.jsx(Container$k, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$3, __assign({ color: status === exports.InputValidationType.Valid
|
|
7748
7785
|
? theme.colors.shades['700'].color
|
|
7749
7786
|
: status === exports.InputValidationType.Error
|
|
7750
7787
|
? theme.colors.semantic.urgent.color
|
|
@@ -7759,7 +7796,7 @@ var Input$1 = {
|
|
|
7759
7796
|
SimplePlusIcon: BasePlusIcon,
|
|
7760
7797
|
};
|
|
7761
7798
|
|
|
7762
|
-
var Container$
|
|
7799
|
+
var Container$j = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
7763
7800
|
var width = _a.width;
|
|
7764
7801
|
return width;
|
|
7765
7802
|
}, function (_a) {
|
|
@@ -7775,7 +7812,7 @@ var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
7775
7812
|
var PaymentMethod = function (_a) {
|
|
7776
7813
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7777
7814
|
var theme = useTheme();
|
|
7778
|
-
return (jsxRuntime.jsx(Container$
|
|
7815
|
+
return (jsxRuntime.jsx(Container$j, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
|
|
7779
7816
|
};
|
|
7780
7817
|
var templateObject_1$y;
|
|
7781
7818
|
|
|
@@ -7796,12 +7833,12 @@ var templateObject_1$x;
|
|
|
7796
7833
|
var Wrapper$2 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
7797
7834
|
var GrandTotal = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
7798
7835
|
var Currency = newStyled.span(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
7799
|
-
var Container$
|
|
7836
|
+
var Container$i = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
7800
7837
|
var Discount = newStyled.h3(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
7801
7838
|
var Total = function (_a) {
|
|
7802
7839
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7803
7840
|
var theme = useTheme();
|
|
7804
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
7841
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$i, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7805
7842
|
};
|
|
7806
7843
|
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
|
|
7807
7844
|
|
|
@@ -7830,13 +7867,13 @@ var Totals = {
|
|
|
7830
7867
|
Subtotal: Subtotal,
|
|
7831
7868
|
};
|
|
7832
7869
|
|
|
7833
|
-
var Container$
|
|
7870
|
+
var Container$h = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
7834
7871
|
var IconContainer$2 = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7835
7872
|
var Text$2 = newStyled.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7836
7873
|
var Details = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7837
7874
|
var Note = function (_a) {
|
|
7838
7875
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7839
|
-
return (jsxRuntime.jsxs(Container$
|
|
7876
|
+
return (jsxRuntime.jsxs(Container$h, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$2, __assign({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7840
7877
|
};
|
|
7841
7878
|
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
|
|
7842
7879
|
|
|
@@ -7967,21 +8004,21 @@ var DeliveryDetails = function (_a) {
|
|
|
7967
8004
|
};
|
|
7968
8005
|
var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7969
8006
|
|
|
7970
|
-
var Container$
|
|
8007
|
+
var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
7971
8008
|
var H1$2 = newStyled.h1(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
7972
8009
|
var ScrollToTop = function (_a) {
|
|
7973
8010
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7974
8011
|
var theme = useTheme();
|
|
7975
|
-
return (jsxRuntime.jsxs(Container$
|
|
8012
|
+
return (jsxRuntime.jsxs(Container$g, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
7976
8013
|
};
|
|
7977
8014
|
var templateObject_1$s, templateObject_2$g;
|
|
7978
8015
|
|
|
7979
|
-
var Container$
|
|
8016
|
+
var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"])));
|
|
7980
8017
|
var H1$1 = newStyled.h1(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
7981
8018
|
var OrderBar = function (_a) {
|
|
7982
8019
|
var message = _a.message;
|
|
7983
8020
|
var theme = useTheme();
|
|
7984
|
-
return (jsxRuntime.jsxs(Container$
|
|
8021
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
7985
8022
|
};
|
|
7986
8023
|
var templateObject_1$r, templateObject_2$f;
|
|
7987
8024
|
|
|
@@ -7996,7 +8033,7 @@ var SizeTable = function (_a) {
|
|
|
7996
8033
|
};
|
|
7997
8034
|
var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
|
|
7998
8035
|
|
|
7999
|
-
var Container$
|
|
8036
|
+
var Container$e = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
8000
8037
|
var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
8001
8038
|
var DescriptionContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), function (_a) {
|
|
8002
8039
|
var theme = _a.theme;
|
|
@@ -8037,7 +8074,7 @@ var Quantity = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
|
|
|
8037
8074
|
var SimpleOrderItem = function (_a) {
|
|
8038
8075
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
8039
8076
|
var theme = useTheme();
|
|
8040
|
-
return (jsxRuntime.jsxs(Container$
|
|
8077
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
8041
8078
|
};
|
|
8042
8079
|
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
|
|
8043
8080
|
|
|
@@ -8048,7 +8085,7 @@ function formatDate(date) {
|
|
|
8048
8085
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8049
8086
|
}
|
|
8050
8087
|
|
|
8051
|
-
var Container$
|
|
8088
|
+
var Container$d = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
8052
8089
|
var Heading = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), function (_a) {
|
|
8053
8090
|
var theme = _a.theme;
|
|
8054
8091
|
return mediaQueries({ theme: theme })({
|
|
@@ -8086,7 +8123,7 @@ var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObje
|
|
|
8086
8123
|
var Review = function (_a) {
|
|
8087
8124
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8088
8125
|
var theme = useTheme();
|
|
8089
|
-
return (jsxRuntime.jsxs(Container$
|
|
8126
|
+
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsxs(Heading, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
8090
8127
|
};
|
|
8091
8128
|
var templateObject_1$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8092
8129
|
|
|
@@ -12448,6 +12485,12 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
12448
12485
|
CrossSellCheckbox: CrossSellCheckbox
|
|
12449
12486
|
});
|
|
12450
12487
|
|
|
12488
|
+
var Spacing = function (_a) {
|
|
12489
|
+
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
12490
|
+
var style = React.useMemo(function () { return (__assign(__assign({}, styleProp), { width: size, height: size, verticalAlign: 'middle', display: type === 'block' ? 'block' : 'inline-block' })); }, [size, type, styleProp]);
|
|
12491
|
+
return jsxRuntime.jsx("div", __assign({ style: style }, { children: children }), void 0);
|
|
12492
|
+
};
|
|
12493
|
+
|
|
12451
12494
|
var ImageContainer = newStyled.div(function (_a) {
|
|
12452
12495
|
var width = _a.width, height = _a.height;
|
|
12453
12496
|
return ({
|
|
@@ -12456,8 +12499,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12456
12499
|
height: height,
|
|
12457
12500
|
});
|
|
12458
12501
|
});
|
|
12459
|
-
var
|
|
12460
|
-
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; });
|
|
12502
|
+
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; });
|
|
12461
12503
|
var getStylesBySize = function (size) {
|
|
12462
12504
|
switch (size) {
|
|
12463
12505
|
case exports.ComponentSize.Medium:
|
|
@@ -12470,6 +12512,11 @@ var getStylesBySize = function (size) {
|
|
|
12470
12512
|
width: '9.813rem',
|
|
12471
12513
|
height: '13.125rem',
|
|
12472
12514
|
};
|
|
12515
|
+
case exports.ComponentSize.Large:
|
|
12516
|
+
return {
|
|
12517
|
+
width: '262px',
|
|
12518
|
+
height: '350px',
|
|
12519
|
+
};
|
|
12473
12520
|
/* istanbul ignore next */
|
|
12474
12521
|
default:
|
|
12475
12522
|
return {
|
|
@@ -12479,10 +12526,25 @@ var getStylesBySize = function (size) {
|
|
|
12479
12526
|
}
|
|
12480
12527
|
};
|
|
12481
12528
|
var ProductItemMobile = function (_a) {
|
|
12482
|
-
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;
|
|
12529
|
+
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url;
|
|
12483
12530
|
var theme = useTheme();
|
|
12484
12531
|
var styles = getStylesBySize(size);
|
|
12485
|
-
|
|
12532
|
+
var spaces = React.useMemo(function () {
|
|
12533
|
+
var _a, _b;
|
|
12534
|
+
var first = (_a = {},
|
|
12535
|
+
_a[exports.ComponentSize.Large] = 20,
|
|
12536
|
+
_a[exports.ComponentSize.Medium] = 12,
|
|
12537
|
+
_a[exports.ComponentSize.Small] = 6,
|
|
12538
|
+
_a)[size];
|
|
12539
|
+
var second = (_b = {},
|
|
12540
|
+
_b[exports.ComponentSize.Large] = 12,
|
|
12541
|
+
_b[exports.ComponentSize.Medium] = 6,
|
|
12542
|
+
_b[exports.ComponentSize.Small] = 4,
|
|
12543
|
+
_b)[size];
|
|
12544
|
+
return [first, second];
|
|
12545
|
+
}, [size]);
|
|
12546
|
+
var Container = url ? 'a' : 'div';
|
|
12547
|
+
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: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
|
|
12486
12548
|
};
|
|
12487
12549
|
var templateObject_1$j, templateObject_2$9;
|
|
12488
12550
|
|
|
@@ -12713,9 +12775,9 @@ var Header = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTem
|
|
|
12713
12775
|
});
|
|
12714
12776
|
});
|
|
12715
12777
|
var ResultsPanel = function (_a) {
|
|
12716
|
-
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll,
|
|
12778
|
+
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12717
12779
|
var theme = useTheme();
|
|
12718
|
-
return (jsxRuntime.jsxs(Container$7, __assign({ "data-testid":
|
|
12780
|
+
return (jsxRuntime.jsxs(Container$7, __assign({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign({ theme: theme }, { children: jsxRuntime.jsx(Text$5, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12719
12781
|
};
|
|
12720
12782
|
var templateObject_1$c, templateObject_2$4, templateObject_3$4;
|
|
12721
12783
|
|
|
@@ -12863,7 +12925,7 @@ var SearchBar = function (_a) {
|
|
|
12863
12925
|
return function () { return clearTimeout(id); };
|
|
12864
12926
|
}, [onChange, state.term]);
|
|
12865
12927
|
var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
|
|
12866
|
-
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$6, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(ResultsPanel, {
|
|
12928
|
+
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$6, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (".concat(resultOptions.length, ")") : undefined, onClick: function (value) {
|
|
12867
12929
|
onSearch(value.title);
|
|
12868
12930
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
12869
12931
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
@@ -12873,8 +12935,8 @@ var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __ma
|
|
|
12873
12935
|
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"])));
|
|
12874
12936
|
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"])));
|
|
12875
12937
|
var ImageProductWithTags = function (_a) {
|
|
12876
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
12877
|
-
return (jsxRuntime.jsxs(Container$5, __assign({ "data-testid":
|
|
12938
|
+
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
12939
|
+
return (jsxRuntime.jsxs(Container$5, __assign({ "data-testid": testId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
12878
12940
|
};
|
|
12879
12941
|
var templateObject_1$a, templateObject_2$3, templateObject_3$3;
|
|
12880
12942
|
|
|
@@ -12892,7 +12954,7 @@ var SlideDots = function (_a) {
|
|
|
12892
12954
|
var theme = useTheme();
|
|
12893
12955
|
return (jsxRuntime.jsx(Container$4, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12894
12956
|
? theme.colors.shades.white.color
|
|
12895
|
-
: theme.colors.shades['700'].color, opacity: 0.6,
|
|
12957
|
+
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12896
12958
|
};
|
|
12897
12959
|
var templateObject_1$8;
|
|
12898
12960
|
|
|
@@ -12900,7 +12962,7 @@ var NavigationButton = newStyled(ArrowButton)(templateObject_1$7 || (templateObj
|
|
|
12900
12962
|
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12901
12963
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12902
12964
|
var SlideNavigation = function (_a) {
|
|
12903
|
-
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate,
|
|
12965
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12904
12966
|
var theme = useTheme();
|
|
12905
12967
|
var upperLimit = quantity - 1;
|
|
12906
12968
|
var lowerLimit = 0;
|
|
@@ -12908,7 +12970,7 @@ var SlideNavigation = function (_a) {
|
|
|
12908
12970
|
onNavigate(selectedIndex - 1);
|
|
12909
12971
|
} }, void 0)), selectedIndex < upperLimit && (jsxRuntime.jsx(RightButton, { Icon: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
|
|
12910
12972
|
onNavigate(selectedIndex + 1);
|
|
12911
|
-
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId:
|
|
12973
|
+
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12912
12974
|
};
|
|
12913
12975
|
var templateObject_1$7, templateObject_2$2, templateObject_3$2;
|
|
12914
12976
|
|
|
@@ -12920,7 +12982,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12920
12982
|
React.useEffect(function () {
|
|
12921
12983
|
setSelectedImage(initialValue);
|
|
12922
12984
|
}, [initialValue]);
|
|
12923
|
-
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement,
|
|
12985
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12924
12986
|
};
|
|
12925
12987
|
var templateObject_1$6;
|
|
12926
12988
|
|
|
@@ -13112,6 +13174,7 @@ exports.SizeFitGuide = SizeFitGuide;
|
|
|
13112
13174
|
exports.SizeSelector = SizeSelector;
|
|
13113
13175
|
exports.SizeTable = SizeTable;
|
|
13114
13176
|
exports.SliderNavigation = SliderNavigation;
|
|
13177
|
+
exports.Spacing = Spacing;
|
|
13115
13178
|
exports.Spinner = Spinner;
|
|
13116
13179
|
exports.StarList = StarList;
|
|
13117
13180
|
exports.Text = Text$5;
|
|
@@ -13121,7 +13184,16 @@ exports.ThemeVariables = ThemeVariables;
|
|
|
13121
13184
|
exports.Timer = Timer;
|
|
13122
13185
|
exports.Tooltip = Tooltip;
|
|
13123
13186
|
exports.Totals = Totals;
|
|
13187
|
+
exports.decimalFormat = decimalFormat;
|
|
13188
|
+
exports.formatPrice = formatPrice;
|
|
13189
|
+
exports.isEmail = isEmail;
|
|
13190
|
+
exports.isEmpty = isEmpty;
|
|
13191
|
+
exports.isNumber = isNumber;
|
|
13192
|
+
exports.isPhoneNumber = isPhoneNumber;
|
|
13193
|
+
exports.isValidDate = isValidDate;
|
|
13124
13194
|
exports.modalEvent = modalEvent;
|
|
13195
|
+
exports.simulateMouseClick = simulateMouseClick;
|
|
13196
|
+
exports.sliceString = sliceString;
|
|
13125
13197
|
exports.useOnClickOutside = useOnClickOutside;
|
|
13126
13198
|
exports.useTheme = useTheme;
|
|
13127
13199
|
exports.useThemeAssets = useThemeAssets;
|