@trafilea/afrodita-components 4.3.1-beta.2 → 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.esm.js +59 -59
- package/build/index.js +59 -59
- package/package.json +1 -1
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['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
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,7 +12491,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12491
12491
|
height: height,
|
|
12492
12492
|
});
|
|
12493
12493
|
});
|
|
12494
|
-
var
|
|
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"])));
|
|
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; });
|
|
12495
12496
|
var getStylesBySize = function (size) {
|
|
12496
12497
|
switch (size) {
|
|
12497
12498
|
case ComponentSize.Medium:
|
|
@@ -12535,8 +12536,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12535
12536
|
_b)[size];
|
|
12536
12537
|
return [first, second];
|
|
12537
12538
|
}, [size]);
|
|
12538
|
-
|
|
12539
|
-
return (jsxs(Container, __assign({ href: url, css: css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n "], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n "]))), 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));
|
|
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));
|
|
12540
12540
|
};
|
|
12541
12541
|
var templateObject_1$j, templateObject_2$9;
|
|
12542
12542
|
|
package/build/index.js
CHANGED
|
@@ -3457,7 +3457,7 @@ var AssetsProvider = function (_a) {
|
|
|
3457
3457
|
};
|
|
3458
3458
|
var useThemeAssets = function () { return React.useContext(AssetsContext); };
|
|
3459
3459
|
|
|
3460
|
-
var Container$
|
|
3460
|
+
var Container$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) {
|
|
3461
3461
|
var flex = _a.flex;
|
|
3462
3462
|
return flex &&
|
|
3463
3463
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3470,7 +3470,7 @@ var Container$E = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
3470
3470
|
var Card = function (_a) {
|
|
3471
3471
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
3472
3472
|
var theme = useTheme();
|
|
3473
|
-
return (jsxRuntime.jsx(Container$
|
|
3473
|
+
return (jsxRuntime.jsx(Container$F, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3474
3474
|
};
|
|
3475
3475
|
var Card$1 = Object.assign(Card, {
|
|
3476
3476
|
Header: CardHeader,
|
|
@@ -6178,7 +6178,7 @@ var CustomCheckboxStyles = {
|
|
|
6178
6178
|
},
|
|
6179
6179
|
};
|
|
6180
6180
|
|
|
6181
|
-
var Container$
|
|
6181
|
+
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"])));
|
|
6182
6182
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6183
6183
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6184
6184
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6207,7 +6207,7 @@ var Checkbox = function (_a) {
|
|
|
6207
6207
|
React.useEffect(function () {
|
|
6208
6208
|
mounted.current = true;
|
|
6209
6209
|
}, []);
|
|
6210
|
-
return (jsxRuntime.jsxs(Container$
|
|
6210
|
+
return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6211
6211
|
};
|
|
6212
6212
|
var templateObject_1$11, templateObject_2$E;
|
|
6213
6213
|
|
|
@@ -6529,12 +6529,12 @@ var TextButton = function (_a) {
|
|
|
6529
6529
|
};
|
|
6530
6530
|
var templateObject_1$_;
|
|
6531
6531
|
|
|
6532
|
-
var Container$
|
|
6532
|
+
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"])));
|
|
6533
6533
|
var P$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6534
6534
|
var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6535
6535
|
var SizeFitGuide = function (_a) {
|
|
6536
6536
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6537
|
-
return (jsxRuntime.jsxs(Container$
|
|
6537
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$3, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6538
6538
|
};
|
|
6539
6539
|
var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
|
|
6540
6540
|
|
|
@@ -6566,7 +6566,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6566
6566
|
};
|
|
6567
6567
|
}
|
|
6568
6568
|
};
|
|
6569
|
-
var Container$
|
|
6569
|
+
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) {
|
|
6570
6570
|
var backgroundColor = _a.backgroundColor;
|
|
6571
6571
|
return backgroundColor;
|
|
6572
6572
|
}, function (_a) {
|
|
@@ -6603,7 +6603,7 @@ var H3$2 = newStyled.h3(templateObject_2$B || (templateObject_2$B = __makeTempla
|
|
|
6603
6603
|
var DiscountTag = function (_a) {
|
|
6604
6604
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
6605
6605
|
var theme = useTheme();
|
|
6606
|
-
return (jsxRuntime.jsx(Container$
|
|
6606
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6607
6607
|
};
|
|
6608
6608
|
var templateObject_1$Y, templateObject_2$B;
|
|
6609
6609
|
|
|
@@ -6629,7 +6629,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
6629
6629
|
};
|
|
6630
6630
|
}
|
|
6631
6631
|
};
|
|
6632
|
-
var Container$
|
|
6632
|
+
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"])));
|
|
6633
6633
|
var Price = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
6634
6634
|
var weight = _a.weight;
|
|
6635
6635
|
return (weight ? weight : '400');
|
|
@@ -6660,7 +6660,7 @@ var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __ma
|
|
|
6660
6660
|
var PriceLabel = function (_a) {
|
|
6661
6661
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6662
6662
|
var theme = useTheme();
|
|
6663
|
-
return (jsxRuntime.jsxs(Container$
|
|
6663
|
+
return (jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6664
6664
|
};
|
|
6665
6665
|
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6666
6666
|
|
|
@@ -6725,7 +6725,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6725
6725
|
});
|
|
6726
6726
|
var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
|
|
6727
6727
|
|
|
6728
|
-
var Container$
|
|
6728
|
+
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) {
|
|
6729
6729
|
var borderColor = _a.borderColor;
|
|
6730
6730
|
return borderColor;
|
|
6731
6731
|
});
|
|
@@ -6734,7 +6734,7 @@ var PatternSelector = function (_a) {
|
|
|
6734
6734
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
6735
6735
|
var theme = useTheme();
|
|
6736
6736
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6737
|
-
return (jsxRuntime.jsx(Container$
|
|
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));
|
|
6738
6738
|
};
|
|
6739
6739
|
var templateObject_1$V, templateObject_2$y;
|
|
6740
6740
|
|
|
@@ -6799,11 +6799,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
6799
6799
|
};
|
|
6800
6800
|
var templateObject_1$U;
|
|
6801
6801
|
|
|
6802
|
-
var Container$
|
|
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"])));
|
|
6803
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"])));
|
|
6804
6804
|
var ImagePreviewList = function (_a) {
|
|
6805
6805
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
|
|
6806
|
-
return (jsxRuntime.jsx(Container$
|
|
6806
|
+
return (jsxRuntime.jsx(Container$z, __assign({ "data-testid": testId }, { children: images.map(function (item) {
|
|
6807
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));
|
|
6808
6808
|
}) }), void 0));
|
|
6809
6809
|
};
|
|
@@ -6816,16 +6816,16 @@ var Image = function (_a) {
|
|
|
6816
6816
|
};
|
|
6817
6817
|
var templateObject_1$S;
|
|
6818
6818
|
|
|
6819
|
-
var Container$
|
|
6819
|
+
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"])));
|
|
6820
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"])));
|
|
6821
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"])));
|
|
6822
6822
|
var ImageProductWithTags$1 = function (_a) {
|
|
6823
6823
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
6824
|
-
return (jsxRuntime.jsxs(Container$
|
|
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));
|
|
6825
6825
|
};
|
|
6826
6826
|
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6827
6827
|
|
|
6828
|
-
var Container$
|
|
6828
|
+
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"])));
|
|
6829
6829
|
var ProductGallery = function (_a) {
|
|
6830
6830
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6831
6831
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6833,7 +6833,7 @@ var ProductGallery = function (_a) {
|
|
|
6833
6833
|
React.useEffect(function () {
|
|
6834
6834
|
setSelectedImage(initialValue);
|
|
6835
6835
|
}, [initialValue]);
|
|
6836
|
-
return (jsxRuntime.jsxs(Container$
|
|
6836
|
+
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
|
|
6837
6837
|
setSelectedImage(value);
|
|
6838
6838
|
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
6839
6839
|
};
|
|
@@ -6875,7 +6875,7 @@ var StarStyles = {
|
|
|
6875
6875
|
});
|
|
6876
6876
|
},
|
|
6877
6877
|
};
|
|
6878
|
-
var Container$
|
|
6878
|
+
var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6879
6879
|
var templateObject_1$P;
|
|
6880
6880
|
|
|
6881
6881
|
var StarContainer = newStyled.div(function (_a) {
|
|
@@ -6893,7 +6893,7 @@ var sizes = {
|
|
|
6893
6893
|
};
|
|
6894
6894
|
var StarList = function (_a) {
|
|
6895
6895
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6896
|
-
return (jsxRuntime.jsx(Container$
|
|
6896
|
+
return (jsxRuntime.jsx(Container$w, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6897
6897
|
return (jsxRuntime.jsx(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
6898
6898
|
}) }, void 0));
|
|
6899
6899
|
};
|
|
@@ -6937,7 +6937,7 @@ var LabelStyles = {
|
|
|
6937
6937
|
});
|
|
6938
6938
|
},
|
|
6939
6939
|
};
|
|
6940
|
-
var Container$
|
|
6940
|
+
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"])));
|
|
6941
6941
|
var templateObject_1$O;
|
|
6942
6942
|
|
|
6943
6943
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -6951,10 +6951,10 @@ var starsNumber = 5;
|
|
|
6951
6951
|
var Rating = function (_a) {
|
|
6952
6952
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6953
6953
|
var theme = useTheme();
|
|
6954
|
-
return (jsxRuntime.jsxs(Container$
|
|
6954
|
+
return (jsxRuntime.jsxs(Container$v, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6955
6955
|
};
|
|
6956
6956
|
|
|
6957
|
-
var Container$
|
|
6957
|
+
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"])));
|
|
6958
6958
|
var P$2 = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
6959
6959
|
var textButtonStyles = function (theme) { return ({
|
|
6960
6960
|
border: 'none',
|
|
@@ -6968,7 +6968,7 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6968
6968
|
var FitPredictor = function (_a) {
|
|
6969
6969
|
var onClick = _a.onClick;
|
|
6970
6970
|
var theme = useTheme();
|
|
6971
|
-
return (jsxs(Container$
|
|
6971
|
+
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));
|
|
6972
6972
|
};
|
|
6973
6973
|
var templateObject_1$N, templateObject_2$v;
|
|
6974
6974
|
|
|
@@ -7007,7 +7007,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
7007
7007
|
position: 'absolute',
|
|
7008
7008
|
});
|
|
7009
7009
|
});
|
|
7010
|
-
var Container$
|
|
7010
|
+
var Container$t = newStyled.div(function (_a) {
|
|
7011
7011
|
var widthAuto = _a.widthAuto;
|
|
7012
7012
|
return ({
|
|
7013
7013
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -7021,7 +7021,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
7021
7021
|
var ProgressBar = function (_a) {
|
|
7022
7022
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
7023
7023
|
var theme = useTheme();
|
|
7024
|
-
return (jsxRuntime.jsxs(Container$
|
|
7024
|
+
return (jsxRuntime.jsxs(Container$t, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
7025
7025
|
};
|
|
7026
7026
|
var templateObject_1$M;
|
|
7027
7027
|
|
|
@@ -7044,7 +7044,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7044
7044
|
};
|
|
7045
7045
|
}
|
|
7046
7046
|
};
|
|
7047
|
-
var Container$
|
|
7047
|
+
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) {
|
|
7048
7048
|
var backgroundColor = _a.backgroundColor;
|
|
7049
7049
|
return backgroundColor;
|
|
7050
7050
|
}, function (_a) {
|
|
@@ -7072,7 +7072,7 @@ var Container$r = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
7072
7072
|
var IconButton = function (_a) {
|
|
7073
7073
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7074
7074
|
var theme = useTheme();
|
|
7075
|
-
return (jsxRuntime.jsx(Container$
|
|
7075
|
+
return (jsxRuntime.jsx(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));
|
|
7076
7076
|
};
|
|
7077
7077
|
var templateObject_1$L;
|
|
7078
7078
|
|
|
@@ -7354,7 +7354,7 @@ var ContainerStyles = {
|
|
|
7354
7354
|
};
|
|
7355
7355
|
|
|
7356
7356
|
var Wrapper$4 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7357
|
-
var Container$
|
|
7357
|
+
var Container$r = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7358
7358
|
var Input$2 = newStyled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
7359
7359
|
var disabled = _a.disabled;
|
|
7360
7360
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -7370,7 +7370,7 @@ var RadioInput = function (_a) {
|
|
|
7370
7370
|
var value = event.currentTarget.value;
|
|
7371
7371
|
onChange({ value: value, label: label });
|
|
7372
7372
|
};
|
|
7373
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
7373
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$r, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7374
7374
|
};
|
|
7375
7375
|
var templateObject_1$J, templateObject_2$t;
|
|
7376
7376
|
|
|
@@ -7387,7 +7387,7 @@ var RadioGroupInput = function (_a) {
|
|
|
7387
7387
|
};
|
|
7388
7388
|
|
|
7389
7389
|
var Wrapper$3 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7390
|
-
var Container$
|
|
7390
|
+
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"])));
|
|
7391
7391
|
var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
7392
7392
|
var color = _a.color;
|
|
7393
7393
|
return color;
|
|
@@ -7401,18 +7401,18 @@ var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemp
|
|
|
7401
7401
|
var Minimalistic = function (_a) {
|
|
7402
7402
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
|
|
7403
7403
|
var theme = useTheme();
|
|
7404
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
7404
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$q, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$4, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: exports.ComponentSize.Small }, void 0)] }), void 0), jsxRuntime.jsxs(Container$q, __assign({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxRuntime.jsxs(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7405
7405
|
};
|
|
7406
7406
|
var templateObject_1$I, templateObject_2$s, templateObject_3$j;
|
|
7407
7407
|
|
|
7408
|
-
var Container$
|
|
7408
|
+
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"])));
|
|
7409
7409
|
var Title$3 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
7410
7410
|
var Details$1 = newStyled.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7411
7411
|
var PriceContainer$1 = newStyled.span(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
7412
7412
|
var Simple = function (_a) {
|
|
7413
7413
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
7414
7414
|
var theme = useTheme();
|
|
7415
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
7415
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$p, { children: [jsxRuntime.jsx(Title$3, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7416
7416
|
};
|
|
7417
7417
|
var templateObject_1$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
|
|
7418
7418
|
|
|
@@ -7421,10 +7421,10 @@ var Bundle = {
|
|
|
7421
7421
|
Simple: Simple,
|
|
7422
7422
|
};
|
|
7423
7423
|
|
|
7424
|
-
var Container$
|
|
7424
|
+
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"])));
|
|
7425
7425
|
var Tag = function (_a) {
|
|
7426
7426
|
var text = _a.text, className = _a.className;
|
|
7427
|
-
return jsxRuntime.jsx(Container$
|
|
7427
|
+
return jsxRuntime.jsx(Container$o, __assign({ className: className }, { children: text }), void 0);
|
|
7428
7428
|
};
|
|
7429
7429
|
var templateObject_1$G;
|
|
7430
7430
|
|
|
@@ -7598,7 +7598,7 @@ var Error$1 = function (_a) {
|
|
|
7598
7598
|
};
|
|
7599
7599
|
var templateObject_1$E, templateObject_2$p;
|
|
7600
7600
|
|
|
7601
|
-
var Container$
|
|
7601
|
+
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) {
|
|
7602
7602
|
var color = _a.color;
|
|
7603
7603
|
return color;
|
|
7604
7604
|
});
|
|
@@ -7702,7 +7702,7 @@ var BaseInput = function (_a) {
|
|
|
7702
7702
|
highlight: theme.colors.border.highlight,
|
|
7703
7703
|
boxShadow: theme.component.input.boxShadow,
|
|
7704
7704
|
};
|
|
7705
|
-
return (jsxRuntime.jsxs(Container$
|
|
7705
|
+
return (jsxRuntime.jsxs(Container$n, __assign({ color: status === exports.InputValidationType.Valid
|
|
7706
7706
|
? theme.colors.shades['700'].color
|
|
7707
7707
|
: status === exports.InputValidationType.Error
|
|
7708
7708
|
? theme.colors.semantic.urgent.color
|
|
@@ -7723,7 +7723,7 @@ var Button$4 = function (_a) {
|
|
|
7723
7723
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7724
7724
|
};
|
|
7725
7725
|
|
|
7726
|
-
var Container$
|
|
7726
|
+
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) {
|
|
7727
7727
|
var theme = _a.theme;
|
|
7728
7728
|
return theme.component.inputCustom.input.borderRadius;
|
|
7729
7729
|
});
|
|
@@ -7740,7 +7740,7 @@ var Custom = function (_a) {
|
|
|
7740
7740
|
text: text,
|
|
7741
7741
|
disabled: rest.disabled,
|
|
7742
7742
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7743
|
-
return (jsxRuntime.jsx(Container$
|
|
7743
|
+
return (jsxRuntime.jsx(Container$m, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7744
7744
|
};
|
|
7745
7745
|
var templateObject_1$C, templateObject_2$n;
|
|
7746
7746
|
|
|
@@ -7775,13 +7775,13 @@ var BasePlusButton = function (_a) {
|
|
|
7775
7775
|
};
|
|
7776
7776
|
var templateObject_1$A;
|
|
7777
7777
|
|
|
7778
|
-
var Container$
|
|
7778
|
+
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"])));
|
|
7779
7779
|
var IconContainer$3 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
7780
7780
|
var BasePlusIcon = function (_a) {
|
|
7781
7781
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7782
7782
|
var theme = useTheme();
|
|
7783
7783
|
var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7784
|
-
return (jsxRuntime.jsx(Container$
|
|
7784
|
+
return (jsxRuntime.jsx(Container$l, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$3, __assign({ color: status === exports.InputValidationType.Valid
|
|
7785
7785
|
? theme.colors.shades['700'].color
|
|
7786
7786
|
: status === exports.InputValidationType.Error
|
|
7787
7787
|
? theme.colors.semantic.urgent.color
|
|
@@ -7796,7 +7796,7 @@ var Input$1 = {
|
|
|
7796
7796
|
SimplePlusIcon: BasePlusIcon,
|
|
7797
7797
|
};
|
|
7798
7798
|
|
|
7799
|
-
var Container$
|
|
7799
|
+
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) {
|
|
7800
7800
|
var width = _a.width;
|
|
7801
7801
|
return width;
|
|
7802
7802
|
}, function (_a) {
|
|
@@ -7812,7 +7812,7 @@ var Container$j = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
7812
7812
|
var PaymentMethod = function (_a) {
|
|
7813
7813
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7814
7814
|
var theme = useTheme();
|
|
7815
|
-
return (jsxRuntime.jsx(Container$
|
|
7815
|
+
return (jsxRuntime.jsx(Container$k, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
|
|
7816
7816
|
};
|
|
7817
7817
|
var templateObject_1$y;
|
|
7818
7818
|
|
|
@@ -7833,12 +7833,12 @@ var templateObject_1$x;
|
|
|
7833
7833
|
var Wrapper$2 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
7834
7834
|
var GrandTotal = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
7835
7835
|
var Currency = newStyled.span(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
7836
|
-
var Container$
|
|
7836
|
+
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; });
|
|
7837
7837
|
var Discount = newStyled.h3(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
7838
7838
|
var Total = function (_a) {
|
|
7839
7839
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7840
7840
|
var theme = useTheme();
|
|
7841
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
7841
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$j, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7842
7842
|
};
|
|
7843
7843
|
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
|
|
7844
7844
|
|
|
@@ -7867,13 +7867,13 @@ var Totals = {
|
|
|
7867
7867
|
Subtotal: Subtotal,
|
|
7868
7868
|
};
|
|
7869
7869
|
|
|
7870
|
-
var Container$
|
|
7870
|
+
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; });
|
|
7871
7871
|
var IconContainer$2 = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7872
7872
|
var Text$2 = newStyled.p(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7873
7873
|
var Details = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7874
7874
|
var Note = function (_a) {
|
|
7875
7875
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7876
|
-
return (jsxRuntime.jsxs(Container$
|
|
7876
|
+
return (jsxRuntime.jsxs(Container$i, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$2, __assign({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7877
7877
|
};
|
|
7878
7878
|
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
|
|
7879
7879
|
|
|
@@ -8004,21 +8004,21 @@ var DeliveryDetails = function (_a) {
|
|
|
8004
8004
|
};
|
|
8005
8005
|
var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
8006
8006
|
|
|
8007
|
-
var Container$
|
|
8007
|
+
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"])));
|
|
8008
8008
|
var H1$2 = newStyled.h1(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
8009
8009
|
var ScrollToTop = function (_a) {
|
|
8010
8010
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
8011
8011
|
var theme = useTheme();
|
|
8012
|
-
return (jsxRuntime.jsxs(Container$
|
|
8012
|
+
return (jsxRuntime.jsxs(Container$h, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
8013
8013
|
};
|
|
8014
8014
|
var templateObject_1$s, templateObject_2$g;
|
|
8015
8015
|
|
|
8016
|
-
var Container$
|
|
8016
|
+
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"])));
|
|
8017
8017
|
var H1$1 = newStyled.h1(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
8018
8018
|
var OrderBar = function (_a) {
|
|
8019
8019
|
var message = _a.message;
|
|
8020
8020
|
var theme = useTheme();
|
|
8021
|
-
return (jsxRuntime.jsxs(Container$
|
|
8021
|
+
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
8022
8022
|
};
|
|
8023
8023
|
var templateObject_1$r, templateObject_2$f;
|
|
8024
8024
|
|
|
@@ -8033,7 +8033,7 @@ var SizeTable = function (_a) {
|
|
|
8033
8033
|
};
|
|
8034
8034
|
var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
|
|
8035
8035
|
|
|
8036
|
-
var Container$
|
|
8036
|
+
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"])));
|
|
8037
8037
|
var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
8038
8038
|
var DescriptionContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), function (_a) {
|
|
8039
8039
|
var theme = _a.theme;
|
|
@@ -8074,7 +8074,7 @@ var Quantity = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
|
|
|
8074
8074
|
var SimpleOrderItem = function (_a) {
|
|
8075
8075
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
8076
8076
|
var theme = useTheme();
|
|
8077
|
-
return (jsxRuntime.jsxs(Container$
|
|
8077
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
8078
8078
|
};
|
|
8079
8079
|
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
|
|
8080
8080
|
|
|
@@ -8085,7 +8085,7 @@ function formatDate(date) {
|
|
|
8085
8085
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8086
8086
|
}
|
|
8087
8087
|
|
|
8088
|
-
var Container$
|
|
8088
|
+
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"])));
|
|
8089
8089
|
var Heading = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), function (_a) {
|
|
8090
8090
|
var theme = _a.theme;
|
|
8091
8091
|
return mediaQueries({ theme: theme })({
|
|
@@ -8123,7 +8123,7 @@ var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObje
|
|
|
8123
8123
|
var Review = function (_a) {
|
|
8124
8124
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8125
8125
|
var theme = useTheme();
|
|
8126
|
-
return (jsxRuntime.jsxs(Container$
|
|
8126
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsxs(Heading, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
8127
8127
|
};
|
|
8128
8128
|
var templateObject_1$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8129
8129
|
|
|
@@ -12499,7 +12499,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12499
12499
|
height: height,
|
|
12500
12500
|
});
|
|
12501
12501
|
});
|
|
12502
|
-
var
|
|
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"])));
|
|
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) {
|
|
12505
12506
|
case exports.ComponentSize.Medium:
|
|
@@ -12543,8 +12544,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12543
12544
|
_b)[size];
|
|
12544
12545
|
return [first, second];
|
|
12545
12546
|
}, [size]);
|
|
12546
|
-
|
|
12547
|
-
return (jsxs(Container, __assign({ href: url, css: css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n "], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n "]))), 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
|
+
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));
|
|
12548
12548
|
};
|
|
12549
12549
|
var templateObject_1$j, templateObject_2$9;
|
|
12550
12550
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Trafilea's Design System",
|
|
4
4
|
"author": "Trafilea",
|
|
5
5
|
"repository": "https://github.com/trafilea/afrodita-components",
|
|
6
|
-
"version": "4.3.1-beta.
|
|
6
|
+
"version": "4.3.1-beta.3",
|
|
7
7
|
"private": false,
|
|
8
8
|
"main": "build/index.js",
|
|
9
9
|
"style": "build/index.css",
|