@trafilea/afrodita-components 4.3.0 → 4.3.1-beta.3
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 +11 -6
- package/build/index.esm.js +46 -45
- package/build/index.esm.js.map +1 -1
- package/build/index.js +46 -45
- 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({
|
|
@@ -3496,8 +3496,8 @@ function jsxs(type, props, key) {
|
|
|
3496
3496
|
}
|
|
3497
3497
|
|
|
3498
3498
|
var BaseButton = function (_a) {
|
|
3499
|
-
var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline;
|
|
3500
|
-
return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: {
|
|
3499
|
+
var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.testId, testId = _c === void 0 ? 'base-button' : _c;
|
|
3500
|
+
return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
|
|
3501
3501
|
display: inline ? 'inline-flex' : 'flex',
|
|
3502
3502
|
justifyContent: 'center',
|
|
3503
3503
|
alignItems: 'center',
|
|
@@ -3544,7 +3544,8 @@ var BaseCTA = function (_a) {
|
|
|
3544
3544
|
} }) }, { children: text }), void 0));
|
|
3545
3545
|
};
|
|
3546
3546
|
|
|
3547
|
-
var ButtonPrimary = function (
|
|
3547
|
+
var ButtonPrimary = function (_a) {
|
|
3548
|
+
_a.testId; var props = __rest(_a, ["testId"]);
|
|
3548
3549
|
var theme = useTheme();
|
|
3549
3550
|
return (jsx(BaseCTA, __assign({}, props, { css: {
|
|
3550
3551
|
backgroundColor: theme.component.button.primary.active.backgroundColor,
|
|
@@ -6256,8 +6257,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
6256
6257
|
});
|
|
6257
6258
|
|
|
6258
6259
|
function SimpleDropdown(_a) {
|
|
6259
|
-
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value;
|
|
6260
|
-
var
|
|
6260
|
+
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e;
|
|
6261
|
+
var _f = React.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
6261
6262
|
var selectedOptionLabel = React.useMemo(function () {
|
|
6262
6263
|
if (selectedValue) {
|
|
6263
6264
|
return selectedValue.label;
|
|
@@ -6277,7 +6278,7 @@ function SimpleDropdown(_a) {
|
|
|
6277
6278
|
setSelectedValue(value);
|
|
6278
6279
|
}, [value]);
|
|
6279
6280
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
6280
|
-
return (jsxRuntime.jsxs(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6281
|
+
return (jsxRuntime.jsxs(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6281
6282
|
}
|
|
6282
6283
|
|
|
6283
6284
|
var getStylesBySize$8 = function (size, theme) {
|
|
@@ -6295,13 +6296,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
6295
6296
|
}
|
|
6296
6297
|
};
|
|
6297
6298
|
var SimpleSelector = function (_a) {
|
|
6298
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
|
|
6299
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
|
|
6299
6300
|
var theme = useTheme();
|
|
6300
6301
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
6301
6302
|
var activeStyles = active
|
|
6302
6303
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
6303
6304
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
6304
|
-
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
6305
|
+
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
6305
6306
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
6306
6307
|
}, '&:disabled': {
|
|
6307
6308
|
color: theme.colors.shades['250'].color,
|
|
@@ -6310,7 +6311,7 @@ var SimpleSelector = function (_a) {
|
|
|
6310
6311
|
};
|
|
6311
6312
|
|
|
6312
6313
|
var SelectorSecondary = function (_a) {
|
|
6313
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, onClick = _a.onClick;
|
|
6314
|
+
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
6314
6315
|
var theme = useTheme();
|
|
6315
6316
|
var stylesByActive = active
|
|
6316
6317
|
? {
|
|
@@ -6325,7 +6326,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6325
6326
|
border: theme.component.selector.default.border,
|
|
6326
6327
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
6327
6328
|
};
|
|
6328
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
6329
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
6329
6330
|
background: theme.component.selector.hover.background,
|
|
6330
6331
|
color: theme.component.selector.hover.color,
|
|
6331
6332
|
}, '&:disabled': {
|
|
@@ -6478,7 +6479,7 @@ var SizeSelector = function (_a) {
|
|
|
6478
6479
|
return (jsx(SelectorSecondary, { css: {
|
|
6479
6480
|
padding: '0.75rem 1rem 0.625rem',
|
|
6480
6481
|
margin: '0 0.5rem 0.625rem 0',
|
|
6481
|
-
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6482
|
+
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
|
|
6482
6483
|
}) }), void 0)] }), void 0));
|
|
6483
6484
|
};
|
|
6484
6485
|
var templateObject_1$$;
|
|
@@ -6664,34 +6665,34 @@ var PriceLabel = function (_a) {
|
|
|
6664
6665
|
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6665
6666
|
|
|
6666
6667
|
var OneColorSelector = function (_a) {
|
|
6667
|
-
var color = _a.color, selected = _a.selected,
|
|
6668
|
+
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
6668
6669
|
var theme = useTheme();
|
|
6669
6670
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6670
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6671
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6671
6672
|
};
|
|
6672
6673
|
|
|
6673
6674
|
var ThreeColorSelector = function (_a) {
|
|
6674
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected,
|
|
6675
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
|
|
6675
6676
|
var theme = useTheme();
|
|
6676
6677
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6677
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6678
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsxRuntime.jsx("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6678
6679
|
};
|
|
6679
6680
|
|
|
6680
6681
|
var TwoColorSelector = function (_a) {
|
|
6681
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected,
|
|
6682
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId;
|
|
6682
6683
|
var theme = useTheme();
|
|
6683
6684
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
|
|
6684
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid":
|
|
6685
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsxRuntime.jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6685
6686
|
};
|
|
6686
6687
|
|
|
6687
6688
|
var ColorSelector = function (_a) {
|
|
6688
|
-
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected,
|
|
6689
|
+
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
|
|
6689
6690
|
if (secondaryColor && tertiaryColor)
|
|
6690
|
-
return (jsxRuntime.jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected,
|
|
6691
|
+
return (jsxRuntime.jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId }, void 0));
|
|
6691
6692
|
else if (secondaryColor && !tertiaryColor)
|
|
6692
|
-
return (jsxRuntime.jsx(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected,
|
|
6693
|
+
return (jsxRuntime.jsx(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected, testId: testId }, void 0));
|
|
6693
6694
|
else
|
|
6694
|
-
return jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected,
|
|
6695
|
+
return jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected, testId: testId }, void 0);
|
|
6695
6696
|
};
|
|
6696
6697
|
|
|
6697
6698
|
var OutOfStock = function (_a) {
|
|
@@ -6730,10 +6731,10 @@ var Container$A = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
6730
6731
|
});
|
|
6731
6732
|
var Image$2 = newStyled.img(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6732
6733
|
var PatternSelector = function (_a) {
|
|
6733
|
-
var url = _a.url, selected = _a.selected,
|
|
6734
|
+
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
6734
6735
|
var theme = useTheme();
|
|
6735
6736
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6736
|
-
return (jsxRuntime.jsx(Container$A, __assign({ "data-testid":
|
|
6737
|
+
return (jsxRuntime.jsx(Container$A, __assign({ "data-testid": testId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6737
6738
|
};
|
|
6738
6739
|
var templateObject_1$V, templateObject_2$y;
|
|
6739
6740
|
|
|
@@ -6741,7 +6742,7 @@ var renderOptions$1 = function (options) {
|
|
|
6741
6742
|
if (options.length)
|
|
6742
6743
|
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
|
|
6743
6744
|
var checked = _a.checked;
|
|
6744
|
-
return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked,
|
|
6745
|
+
return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector") }), void 0)) : (option.pattern && jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
|
|
6745
6746
|
} }), option.label)); });
|
|
6746
6747
|
else
|
|
6747
6748
|
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
@@ -6753,7 +6754,7 @@ var SingleColorPicker = function (_a) {
|
|
|
6753
6754
|
|
|
6754
6755
|
var renderOptions = function (selectedColor, options) {
|
|
6755
6756
|
if (options && options.length)
|
|
6756
|
-
return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option),
|
|
6757
|
+
return options.map(function (option) { return (jsxRuntime.jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsxRuntime.jsx(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), testId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && (jsxRuntime.jsx(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
|
|
6757
6758
|
else
|
|
6758
6759
|
return jsxRuntime.jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6759
6760
|
};
|
|
@@ -6801,8 +6802,8 @@ var templateObject_1$U;
|
|
|
6801
6802
|
var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"], ["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"])));
|
|
6802
6803
|
var Button$5 = newStyled.button(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
|
|
6803
6804
|
var ImagePreviewList = function (_a) {
|
|
6804
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick,
|
|
6805
|
-
return (jsxRuntime.jsx(Container$z, __assign({ "data-testid":
|
|
6805
|
+
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
6806
|
+
return (jsxRuntime.jsx(Container$z, __assign({ "data-testid": testId }, { children: images.map(function (item) {
|
|
6806
6807
|
return (jsxRuntime.jsx(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6807
6808
|
}) }), void 0));
|
|
6808
6809
|
};
|
|
@@ -6819,8 +6820,8 @@ var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
6819
6820
|
var TopTagContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6820
6821
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
6821
6822
|
var ImageProductWithTags$1 = function (_a) {
|
|
6822
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
6823
|
-
return (jsxRuntime.jsxs(Container$y, __assign({ "data-testid":
|
|
6823
|
+
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
6824
|
+
return (jsxRuntime.jsxs(Container$y, __assign({ "data-testid": testId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsxRuntime.jsx(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6824
6825
|
};
|
|
6825
6826
|
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6826
6827
|
|
|
@@ -6832,9 +6833,9 @@ var ProductGallery = function (_a) {
|
|
|
6832
6833
|
React.useEffect(function () {
|
|
6833
6834
|
setSelectedImage(initialValue);
|
|
6834
6835
|
}, [initialValue]);
|
|
6835
|
-
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage,
|
|
6836
|
+
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
|
|
6836
6837
|
setSelectedImage(value);
|
|
6837
|
-
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement,
|
|
6838
|
+
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
6838
6839
|
};
|
|
6839
6840
|
var templateObject_1$Q;
|
|
6840
6841
|
|
|
@@ -12498,7 +12499,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12498
12499
|
height: height,
|
|
12499
12500
|
});
|
|
12500
12501
|
});
|
|
12501
|
-
var Container$d = newStyled.
|
|
12502
|
+
var Container$d = newStyled.a(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
12502
12503
|
var H1 = newStyled.h1(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
12503
12504
|
var getStylesBySize = function (size) {
|
|
12504
12505
|
switch (size) {
|
|
@@ -12526,7 +12527,7 @@ var getStylesBySize = function (size) {
|
|
|
12526
12527
|
}
|
|
12527
12528
|
};
|
|
12528
12529
|
var ProductItemMobile = function (_a) {
|
|
12529
|
-
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
|
|
12530
|
+
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, className = _a.className;
|
|
12530
12531
|
var theme = useTheme();
|
|
12531
12532
|
var styles = getStylesBySize(size);
|
|
12532
12533
|
var spaces = React.useMemo(function () {
|
|
@@ -12543,7 +12544,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12543
12544
|
_b)[size];
|
|
12544
12545
|
return [first, second];
|
|
12545
12546
|
}, [size]);
|
|
12546
|
-
return (jsxs(Container$d, { children: [tags ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12547
|
+
return (jsxs(Container$d, __assign({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
|
|
12547
12548
|
};
|
|
12548
12549
|
var templateObject_1$j, templateObject_2$9;
|
|
12549
12550
|
|
|
@@ -12774,9 +12775,9 @@ var Header = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTem
|
|
|
12774
12775
|
});
|
|
12775
12776
|
});
|
|
12776
12777
|
var ResultsPanel = function (_a) {
|
|
12777
|
-
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;
|
|
12778
12779
|
var theme = useTheme();
|
|
12779
|
-
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));
|
|
12780
12781
|
};
|
|
12781
12782
|
var templateObject_1$c, templateObject_2$4, templateObject_3$4;
|
|
12782
12783
|
|
|
@@ -12924,7 +12925,7 @@ var SearchBar = function (_a) {
|
|
|
12924
12925
|
return function () { return clearTimeout(id); };
|
|
12925
12926
|
}, [onChange, state.term]);
|
|
12926
12927
|
var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
|
|
12927
|
-
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$6, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(ResultsPanel, {
|
|
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) {
|
|
12928
12929
|
onSearch(value.title);
|
|
12929
12930
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
12930
12931
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
@@ -12934,8 +12935,8 @@ var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __ma
|
|
|
12934
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"])));
|
|
12935
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"])));
|
|
12936
12937
|
var ImageProductWithTags = function (_a) {
|
|
12937
|
-
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement,
|
|
12938
|
-
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));
|
|
12939
12940
|
};
|
|
12940
12941
|
var templateObject_1$a, templateObject_2$3, templateObject_3$3;
|
|
12941
12942
|
|
|
@@ -12953,7 +12954,7 @@ var SlideDots = function (_a) {
|
|
|
12953
12954
|
var theme = useTheme();
|
|
12954
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
|
|
12955
12956
|
? theme.colors.shades.white.color
|
|
12956
|
-
: 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));
|
|
12957
12958
|
};
|
|
12958
12959
|
var templateObject_1$8;
|
|
12959
12960
|
|
|
@@ -12961,7 +12962,7 @@ var NavigationButton = newStyled(ArrowButton)(templateObject_1$7 || (templateObj
|
|
|
12961
12962
|
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12962
12963
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12963
12964
|
var SlideNavigation = function (_a) {
|
|
12964
|
-
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate,
|
|
12965
|
+
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12965
12966
|
var theme = useTheme();
|
|
12966
12967
|
var upperLimit = quantity - 1;
|
|
12967
12968
|
var lowerLimit = 0;
|
|
@@ -12969,7 +12970,7 @@ var SlideNavigation = function (_a) {
|
|
|
12969
12970
|
onNavigate(selectedIndex - 1);
|
|
12970
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 () {
|
|
12971
12972
|
onNavigate(selectedIndex + 1);
|
|
12972
|
-
} }, 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));
|
|
12973
12974
|
};
|
|
12974
12975
|
var templateObject_1$7, templateObject_2$2, templateObject_3$2;
|
|
12975
12976
|
|
|
@@ -12981,7 +12982,7 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12981
12982
|
React.useEffect(function () {
|
|
12982
12983
|
setSelectedImage(initialValue);
|
|
12983
12984
|
}, [initialValue]);
|
|
12984
|
-
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));
|
|
12985
12986
|
};
|
|
12986
12987
|
var templateObject_1$6;
|
|
12987
12988
|
|