@trafilea/afrodita-components 4.3.1-beta.0 → 4.3.1-beta.4
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 +2 -1
- package/build/index.esm.js +59 -61
- package/build/index.esm.js.map +1 -1
- package/build/index.js +59 -61
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -1344,6 +1344,7 @@ interface ProductItemProps {
|
|
|
1344
1344
|
};
|
|
1345
1345
|
alignName?: 'left' | 'center';
|
|
1346
1346
|
url?: string;
|
|
1347
|
+
className?: string;
|
|
1347
1348
|
}
|
|
1348
1349
|
|
|
1349
1350
|
interface ProductItemSmallMobileProps extends ProductItemProps {
|
|
@@ -1356,7 +1357,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
|
|
|
1356
1357
|
};
|
|
1357
1358
|
|
|
1358
1359
|
declare const Collection: {
|
|
1359
|
-
ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1360
|
+
ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1360
1361
|
withProductGrid: typeof withProductGrid;
|
|
1361
1362
|
};
|
|
1362
1363
|
|
package/build/index.esm.js
CHANGED
|
@@ -3449,7 +3449,7 @@ var AssetsProvider = function (_a) {
|
|
|
3449
3449
|
};
|
|
3450
3450
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3451
3451
|
|
|
3452
|
-
var Container$
|
|
3452
|
+
var Container$F = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
3453
3453
|
var flex = _a.flex;
|
|
3454
3454
|
return flex &&
|
|
3455
3455
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3462,7 +3462,7 @@ var Container$E = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
3462
3462
|
var Card = function (_a) {
|
|
3463
3463
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
3464
3464
|
var theme = useTheme();
|
|
3465
|
-
return (jsx$1(Container$
|
|
3465
|
+
return (jsx$1(Container$F, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3466
3466
|
};
|
|
3467
3467
|
var Card$1 = Object.assign(Card, {
|
|
3468
3468
|
Header: CardHeader,
|
|
@@ -6170,7 +6170,7 @@ var CustomCheckboxStyles = {
|
|
|
6170
6170
|
},
|
|
6171
6171
|
};
|
|
6172
6172
|
|
|
6173
|
-
var Container$
|
|
6173
|
+
var Container$E = 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"])));
|
|
6174
6174
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6175
6175
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6176
6176
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6199,7 +6199,7 @@ var Checkbox = function (_a) {
|
|
|
6199
6199
|
useEffect(function () {
|
|
6200
6200
|
mounted.current = true;
|
|
6201
6201
|
}, []);
|
|
6202
|
-
return (jsxs$1(Container$
|
|
6202
|
+
return (jsxs$1(Container$E, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6203
6203
|
};
|
|
6204
6204
|
var templateObject_1$11, templateObject_2$E;
|
|
6205
6205
|
|
|
@@ -6521,12 +6521,12 @@ var TextButton = function (_a) {
|
|
|
6521
6521
|
};
|
|
6522
6522
|
var templateObject_1$_;
|
|
6523
6523
|
|
|
6524
|
-
var Container$
|
|
6524
|
+
var Container$D = 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"])));
|
|
6525
6525
|
var P$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6526
6526
|
var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6527
6527
|
var SizeFitGuide = function (_a) {
|
|
6528
6528
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6529
|
-
return (jsxs$1(Container$
|
|
6529
|
+
return (jsxs$1(Container$D, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6530
6530
|
};
|
|
6531
6531
|
var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
|
|
6532
6532
|
|
|
@@ -6558,7 +6558,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6558
6558
|
};
|
|
6559
6559
|
}
|
|
6560
6560
|
};
|
|
6561
|
-
var Container$
|
|
6561
|
+
var Container$C = 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) {
|
|
6562
6562
|
var backgroundColor = _a.backgroundColor;
|
|
6563
6563
|
return backgroundColor;
|
|
6564
6564
|
}, function (_a) {
|
|
@@ -6595,7 +6595,7 @@ var H3$2 = newStyled.h3(templateObject_2$B || (templateObject_2$B = __makeTempla
|
|
|
6595
6595
|
var DiscountTag = function (_a) {
|
|
6596
6596
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
6597
6597
|
var theme = useTheme();
|
|
6598
|
-
return (jsx$1(Container$
|
|
6598
|
+
return (jsx$1(Container$C, __assign({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6599
6599
|
};
|
|
6600
6600
|
var templateObject_1$Y, templateObject_2$B;
|
|
6601
6601
|
|
|
@@ -6621,7 +6621,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
6621
6621
|
};
|
|
6622
6622
|
}
|
|
6623
6623
|
};
|
|
6624
|
-
var Container$
|
|
6624
|
+
var Container$B = 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"])));
|
|
6625
6625
|
var Price = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
6626
6626
|
var weight = _a.weight;
|
|
6627
6627
|
return (weight ? weight : '400');
|
|
@@ -6652,7 +6652,7 @@ var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __ma
|
|
|
6652
6652
|
var PriceLabel = function (_a) {
|
|
6653
6653
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6654
6654
|
var theme = useTheme();
|
|
6655
|
-
return (jsxs$1(Container$
|
|
6655
|
+
return (jsxs$1(Container$B, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6656
6656
|
};
|
|
6657
6657
|
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6658
6658
|
|
|
@@ -6717,7 +6717,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6717
6717
|
});
|
|
6718
6718
|
var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
|
|
6719
6719
|
|
|
6720
|
-
var Container$
|
|
6720
|
+
var Container$A = 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) {
|
|
6721
6721
|
var borderColor = _a.borderColor;
|
|
6722
6722
|
return borderColor;
|
|
6723
6723
|
});
|
|
@@ -6726,7 +6726,7 @@ var PatternSelector = function (_a) {
|
|
|
6726
6726
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
6727
6727
|
var theme = useTheme();
|
|
6728
6728
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6729
|
-
return (jsx$1(Container$
|
|
6729
|
+
return (jsx$1(Container$A, __assign({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6730
6730
|
};
|
|
6731
6731
|
var templateObject_1$V, templateObject_2$y;
|
|
6732
6732
|
|
|
@@ -6791,11 +6791,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
6791
6791
|
};
|
|
6792
6792
|
var templateObject_1$U;
|
|
6793
6793
|
|
|
6794
|
-
var Container$
|
|
6794
|
+
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"])));
|
|
6795
6795
|
var Button$5 = newStyled.button(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
|
|
6796
6796
|
var ImagePreviewList = function (_a) {
|
|
6797
6797
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
6798
|
-
return (jsx$1(Container$
|
|
6798
|
+
return (jsx$1(Container$z, __assign({ "data-testid": testId }, { children: images.map(function (item) {
|
|
6799
6799
|
return (jsx$1(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6800
6800
|
}) }), void 0));
|
|
6801
6801
|
};
|
|
@@ -6808,16 +6808,16 @@ var Image = function (_a) {
|
|
|
6808
6808
|
};
|
|
6809
6809
|
var templateObject_1$S;
|
|
6810
6810
|
|
|
6811
|
-
var Container$
|
|
6811
|
+
var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
6812
6812
|
var TopTagContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6813
6813
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
6814
6814
|
var ImageProductWithTags$1 = function (_a) {
|
|
6815
6815
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
6816
|
-
return (jsxs$1(Container$
|
|
6816
|
+
return (jsxs$1(Container$y, __assign({ "data-testid": testId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6817
6817
|
};
|
|
6818
6818
|
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6819
6819
|
|
|
6820
|
-
var Container$
|
|
6820
|
+
var Container$x = 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"])));
|
|
6821
6821
|
var ProductGallery = function (_a) {
|
|
6822
6822
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6823
6823
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6825,7 +6825,7 @@ var ProductGallery = function (_a) {
|
|
|
6825
6825
|
useEffect(function () {
|
|
6826
6826
|
setSelectedImage(initialValue);
|
|
6827
6827
|
}, [initialValue]);
|
|
6828
|
-
return (jsxs$1(Container$
|
|
6828
|
+
return (jsxs$1(Container$x, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
|
|
6829
6829
|
setSelectedImage(value);
|
|
6830
6830
|
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
6831
6831
|
};
|
|
@@ -6867,7 +6867,7 @@ var StarStyles = {
|
|
|
6867
6867
|
});
|
|
6868
6868
|
},
|
|
6869
6869
|
};
|
|
6870
|
-
var Container$
|
|
6870
|
+
var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6871
6871
|
var templateObject_1$P;
|
|
6872
6872
|
|
|
6873
6873
|
var StarContainer = newStyled.div(function (_a) {
|
|
@@ -6885,7 +6885,7 @@ var sizes = {
|
|
|
6885
6885
|
};
|
|
6886
6886
|
var StarList = function (_a) {
|
|
6887
6887
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6888
|
-
return (jsx$1(Container$
|
|
6888
|
+
return (jsx$1(Container$w, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6889
6889
|
return (jsx$1(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
6890
6890
|
}) }, void 0));
|
|
6891
6891
|
};
|
|
@@ -6929,7 +6929,7 @@ var LabelStyles = {
|
|
|
6929
6929
|
});
|
|
6930
6930
|
},
|
|
6931
6931
|
};
|
|
6932
|
-
var Container$
|
|
6932
|
+
var Container$v = 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"])));
|
|
6933
6933
|
var templateObject_1$O;
|
|
6934
6934
|
|
|
6935
6935
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -6943,10 +6943,10 @@ var starsNumber = 5;
|
|
|
6943
6943
|
var Rating = function (_a) {
|
|
6944
6944
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6945
6945
|
var theme = useTheme();
|
|
6946
|
-
return (jsxs$1(Container$
|
|
6946
|
+
return (jsxs$1(Container$v, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxs$1(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6947
6947
|
};
|
|
6948
6948
|
|
|
6949
|
-
var Container$
|
|
6949
|
+
var Container$u = 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"])));
|
|
6950
6950
|
var P$2 = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
6951
6951
|
var textButtonStyles = function (theme) { return ({
|
|
6952
6952
|
border: 'none',
|
|
@@ -6960,7 +6960,7 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6960
6960
|
var FitPredictor = function (_a) {
|
|
6961
6961
|
var onClick = _a.onClick;
|
|
6962
6962
|
var theme = useTheme();
|
|
6963
|
-
return (jsxs(Container$
|
|
6963
|
+
return (jsxs(Container$u, __assign({ theme: theme }, { children: [jsx(Container$u, { 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));
|
|
6964
6964
|
};
|
|
6965
6965
|
var templateObject_1$N, templateObject_2$v;
|
|
6966
6966
|
|
|
@@ -6999,7 +6999,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6999
6999
|
position: 'absolute',
|
|
7000
7000
|
});
|
|
7001
7001
|
});
|
|
7002
|
-
var Container$
|
|
7002
|
+
var Container$t = newStyled.div(function (_a) {
|
|
7003
7003
|
var widthAuto = _a.widthAuto;
|
|
7004
7004
|
return ({
|
|
7005
7005
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -7013,7 +7013,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
7013
7013
|
var ProgressBar = function (_a) {
|
|
7014
7014
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
7015
7015
|
var theme = useTheme();
|
|
7016
|
-
return (jsxs$1(Container$
|
|
7016
|
+
return (jsxs$1(Container$t, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
7017
7017
|
};
|
|
7018
7018
|
var templateObject_1$M;
|
|
7019
7019
|
|
|
@@ -7036,7 +7036,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7036
7036
|
};
|
|
7037
7037
|
}
|
|
7038
7038
|
};
|
|
7039
|
-
var Container$
|
|
7039
|
+
var Container$s = 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) {
|
|
7040
7040
|
var backgroundColor = _a.backgroundColor;
|
|
7041
7041
|
return backgroundColor;
|
|
7042
7042
|
}, function (_a) {
|
|
@@ -7064,7 +7064,7 @@ var Container$r = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
7064
7064
|
var IconButton = function (_a) {
|
|
7065
7065
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7066
7066
|
var theme = useTheme();
|
|
7067
|
-
return (jsx$1(Container$
|
|
7067
|
+
return (jsx$1(Container$s, __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));
|
|
7068
7068
|
};
|
|
7069
7069
|
var templateObject_1$L;
|
|
7070
7070
|
|
|
@@ -7346,7 +7346,7 @@ var ContainerStyles = {
|
|
|
7346
7346
|
};
|
|
7347
7347
|
|
|
7348
7348
|
var Wrapper$4 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7349
|
-
var Container$
|
|
7349
|
+
var Container$r = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7350
7350
|
var Input$2 = newStyled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
7351
7351
|
var disabled = _a.disabled;
|
|
7352
7352
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -7362,7 +7362,7 @@ var RadioInput = function (_a) {
|
|
|
7362
7362
|
var value = event.currentTarget.value;
|
|
7363
7363
|
onChange({ value: value, label: label });
|
|
7364
7364
|
};
|
|
7365
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
7365
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$r, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7366
7366
|
};
|
|
7367
7367
|
var templateObject_1$J, templateObject_2$t;
|
|
7368
7368
|
|
|
@@ -7379,7 +7379,7 @@ var RadioGroupInput = function (_a) {
|
|
|
7379
7379
|
};
|
|
7380
7380
|
|
|
7381
7381
|
var Wrapper$3 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7382
|
-
var Container$
|
|
7382
|
+
var Container$q = 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"])));
|
|
7383
7383
|
var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
7384
7384
|
var color = _a.color;
|
|
7385
7385
|
return color;
|
|
@@ -7393,18 +7393,18 @@ var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemp
|
|
|
7393
7393
|
var Minimalistic = function (_a) {
|
|
7394
7394
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
|
|
7395
7395
|
var theme = useTheme();
|
|
7396
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
7396
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$4, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$q, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7397
7397
|
};
|
|
7398
7398
|
var templateObject_1$I, templateObject_2$s, templateObject_3$j;
|
|
7399
7399
|
|
|
7400
|
-
var Container$
|
|
7400
|
+
var Container$p = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7401
7401
|
var Title$3 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
7402
7402
|
var Details$1 = newStyled.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7403
7403
|
var PriceContainer$1 = newStyled.span(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
7404
7404
|
var Simple = function (_a) {
|
|
7405
7405
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
7406
7406
|
var theme = useTheme();
|
|
7407
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
7407
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$p, { children: [jsx$1(Title$3, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7408
7408
|
};
|
|
7409
7409
|
var templateObject_1$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
|
|
7410
7410
|
|
|
@@ -7413,10 +7413,10 @@ var Bundle = {
|
|
|
7413
7413
|
Simple: Simple,
|
|
7414
7414
|
};
|
|
7415
7415
|
|
|
7416
|
-
var Container$
|
|
7416
|
+
var Container$o = 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"])));
|
|
7417
7417
|
var Tag = function (_a) {
|
|
7418
7418
|
var text = _a.text, className = _a.className;
|
|
7419
|
-
return jsx$1(Container$
|
|
7419
|
+
return jsx$1(Container$o, __assign({ className: className }, { children: text }), void 0);
|
|
7420
7420
|
};
|
|
7421
7421
|
var templateObject_1$G;
|
|
7422
7422
|
|
|
@@ -7590,7 +7590,7 @@ var Error$1 = function (_a) {
|
|
|
7590
7590
|
};
|
|
7591
7591
|
var templateObject_1$E, templateObject_2$p;
|
|
7592
7592
|
|
|
7593
|
-
var Container$
|
|
7593
|
+
var Container$n = 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) {
|
|
7594
7594
|
var color = _a.color;
|
|
7595
7595
|
return color;
|
|
7596
7596
|
});
|
|
@@ -7694,7 +7694,7 @@ var BaseInput = function (_a) {
|
|
|
7694
7694
|
highlight: theme.colors.border.highlight,
|
|
7695
7695
|
boxShadow: theme.component.input.boxShadow,
|
|
7696
7696
|
};
|
|
7697
|
-
return (jsxs$1(Container$
|
|
7697
|
+
return (jsxs$1(Container$n, __assign({ color: status === InputValidationType.Valid
|
|
7698
7698
|
? theme.colors.shades['700'].color
|
|
7699
7699
|
: status === InputValidationType.Error
|
|
7700
7700
|
? theme.colors.semantic.urgent.color
|
|
@@ -7715,7 +7715,7 @@ var Button$4 = function (_a) {
|
|
|
7715
7715
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7716
7716
|
};
|
|
7717
7717
|
|
|
7718
|
-
var Container$
|
|
7718
|
+
var Container$m = 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) {
|
|
7719
7719
|
var theme = _a.theme;
|
|
7720
7720
|
return theme.component.inputCustom.input.borderRadius;
|
|
7721
7721
|
});
|
|
@@ -7732,7 +7732,7 @@ var Custom = function (_a) {
|
|
|
7732
7732
|
text: text,
|
|
7733
7733
|
disabled: rest.disabled,
|
|
7734
7734
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7735
|
-
return (jsx$1(Container$
|
|
7735
|
+
return (jsx$1(Container$m, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: jsx$1(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7736
7736
|
};
|
|
7737
7737
|
var templateObject_1$C, templateObject_2$n;
|
|
7738
7738
|
|
|
@@ -7767,13 +7767,13 @@ var BasePlusButton = function (_a) {
|
|
|
7767
7767
|
};
|
|
7768
7768
|
var templateObject_1$A;
|
|
7769
7769
|
|
|
7770
|
-
var Container$
|
|
7770
|
+
var Container$l = 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"])));
|
|
7771
7771
|
var IconContainer$3 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
7772
7772
|
var BasePlusIcon = function (_a) {
|
|
7773
7773
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7774
7774
|
var theme = useTheme();
|
|
7775
7775
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7776
|
-
return (jsx$1(Container$
|
|
7776
|
+
return (jsx$1(Container$l, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$3, __assign({ color: status === InputValidationType.Valid
|
|
7777
7777
|
? theme.colors.shades['700'].color
|
|
7778
7778
|
: status === InputValidationType.Error
|
|
7779
7779
|
? theme.colors.semantic.urgent.color
|
|
@@ -7788,7 +7788,7 @@ var Input$1 = {
|
|
|
7788
7788
|
SimplePlusIcon: BasePlusIcon,
|
|
7789
7789
|
};
|
|
7790
7790
|
|
|
7791
|
-
var Container$
|
|
7791
|
+
var Container$k = 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) {
|
|
7792
7792
|
var width = _a.width;
|
|
7793
7793
|
return width;
|
|
7794
7794
|
}, function (_a) {
|
|
@@ -7804,7 +7804,7 @@ var Container$j = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
7804
7804
|
var PaymentMethod = function (_a) {
|
|
7805
7805
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7806
7806
|
var theme = useTheme();
|
|
7807
|
-
return (jsx$1(Container$
|
|
7807
|
+
return (jsx$1(Container$k, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
7808
7808
|
};
|
|
7809
7809
|
var templateObject_1$y;
|
|
7810
7810
|
|
|
@@ -7825,12 +7825,12 @@ var templateObject_1$x;
|
|
|
7825
7825
|
var Wrapper$2 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
7826
7826
|
var GrandTotal = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
7827
7827
|
var Currency = newStyled.span(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
7828
|
-
var Container$
|
|
7828
|
+
var Container$j = 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; });
|
|
7829
7829
|
var Discount = newStyled.h3(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
7830
7830
|
var Total = function (_a) {
|
|
7831
7831
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7832
7832
|
var theme = useTheme();
|
|
7833
|
-
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
7833
|
+
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$j, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7834
7834
|
};
|
|
7835
7835
|
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
|
|
7836
7836
|
|
|
@@ -7859,13 +7859,13 @@ var Totals = {
|
|
|
7859
7859
|
Subtotal: Subtotal,
|
|
7860
7860
|
};
|
|
7861
7861
|
|
|
7862
|
-
var Container$
|
|
7862
|
+
var Container$i = 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; });
|
|
7863
7863
|
var IconContainer$2 = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7864
7864
|
var Text$2 = newStyled.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7865
7865
|
var Details = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7866
7866
|
var Note = function (_a) {
|
|
7867
7867
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7868
|
-
return (jsxs$1(Container$
|
|
7868
|
+
return (jsxs$1(Container$i, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$2, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$2, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7869
7869
|
};
|
|
7870
7870
|
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
|
|
7871
7871
|
|
|
@@ -7996,21 +7996,21 @@ var DeliveryDetails = function (_a) {
|
|
|
7996
7996
|
};
|
|
7997
7997
|
var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7998
7998
|
|
|
7999
|
-
var Container$
|
|
7999
|
+
var Container$h = 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"])));
|
|
8000
8000
|
var H1$2 = newStyled.h1(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
8001
8001
|
var ScrollToTop = function (_a) {
|
|
8002
8002
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
8003
8003
|
var theme = useTheme();
|
|
8004
|
-
return (jsxs$1(Container$
|
|
8004
|
+
return (jsxs$1(Container$h, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
8005
8005
|
};
|
|
8006
8006
|
var templateObject_1$s, templateObject_2$g;
|
|
8007
8007
|
|
|
8008
|
-
var Container$
|
|
8008
|
+
var Container$g = 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"])));
|
|
8009
8009
|
var H1$1 = newStyled.h1(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
8010
8010
|
var OrderBar = function (_a) {
|
|
8011
8011
|
var message = _a.message;
|
|
8012
8012
|
var theme = useTheme();
|
|
8013
|
-
return (jsxs$1(Container$
|
|
8013
|
+
return (jsxs$1(Container$g, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
8014
8014
|
};
|
|
8015
8015
|
var templateObject_1$r, templateObject_2$f;
|
|
8016
8016
|
|
|
@@ -8025,7 +8025,7 @@ var SizeTable = function (_a) {
|
|
|
8025
8025
|
};
|
|
8026
8026
|
var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
|
|
8027
8027
|
|
|
8028
|
-
var Container$
|
|
8028
|
+
var Container$f = 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"])));
|
|
8029
8029
|
var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
8030
8030
|
var DescriptionContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), function (_a) {
|
|
8031
8031
|
var theme = _a.theme;
|
|
@@ -8066,7 +8066,7 @@ var Quantity = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
|
|
|
8066
8066
|
var SimpleOrderItem = function (_a) {
|
|
8067
8067
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
8068
8068
|
var theme = useTheme();
|
|
8069
|
-
return (jsxs$1(Container$
|
|
8069
|
+
return (jsxs$1(Container$f, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
8070
8070
|
};
|
|
8071
8071
|
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
|
|
8072
8072
|
|
|
@@ -8077,7 +8077,7 @@ function formatDate(date) {
|
|
|
8077
8077
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8078
8078
|
}
|
|
8079
8079
|
|
|
8080
|
-
var Container$
|
|
8080
|
+
var Container$e = 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"])));
|
|
8081
8081
|
var Heading = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), function (_a) {
|
|
8082
8082
|
var theme = _a.theme;
|
|
8083
8083
|
return mediaQueries({ theme: theme })({
|
|
@@ -8115,7 +8115,7 @@ var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObje
|
|
|
8115
8115
|
var Review = function (_a) {
|
|
8116
8116
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8117
8117
|
var theme = useTheme();
|
|
8118
|
-
return (jsxs$1(Container$
|
|
8118
|
+
return (jsxs$1(Container$e, { children: [jsxs$1(Heading, __assign({ theme: theme }, { children: [jsx$1(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign({ theme: theme }, { children: [jsx$1(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
8119
8119
|
};
|
|
8120
8120
|
var templateObject_1$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8121
8121
|
|
|
@@ -12491,8 +12491,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12491
12491
|
height: height,
|
|
12492
12492
|
});
|
|
12493
12493
|
});
|
|
12494
|
-
var
|
|
12495
|
-
var ContainerLink = ContainerNoLink.withComponent('a');
|
|
12494
|
+
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"])));
|
|
12496
12495
|
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; });
|
|
12497
12496
|
var getStylesBySize = function (size) {
|
|
12498
12497
|
switch (size) {
|
|
@@ -12520,7 +12519,7 @@ var getStylesBySize = function (size) {
|
|
|
12520
12519
|
}
|
|
12521
12520
|
};
|
|
12522
12521
|
var ProductItemMobile = function (_a) {
|
|
12523
|
-
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url;
|
|
12522
|
+
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;
|
|
12524
12523
|
var theme = useTheme();
|
|
12525
12524
|
var styles = getStylesBySize(size);
|
|
12526
12525
|
var spaces = useMemo(function () {
|
|
@@ -12537,8 +12536,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12537
12536
|
_b)[size];
|
|
12538
12537
|
return [first, second];
|
|
12539
12538
|
}, [size]);
|
|
12540
|
-
|
|
12541
|
-
return (jsxs(Container, __assign({ href: url }, { children: [tags ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
|
|
12539
|
+
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: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
|
|
12542
12540
|
};
|
|
12543
12541
|
var templateObject_1$j, templateObject_2$9;
|
|
12544
12542
|
|