@trafilea/afrodita-components 5.0.0-beta.215 → 5.0.0-beta.217
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 +12 -11
- package/build/index.esm.js.map +1 -1
- package/build/index.js +12 -11
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -5077,11 +5077,11 @@ var TextButton = function (_a) {
|
|
|
5077
5077
|
var templateObject_1$1o;
|
|
5078
5078
|
|
|
5079
5079
|
var Container$Y = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
5080
|
-
var P$
|
|
5080
|
+
var P$3 = newStyled.p(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5081
5081
|
var PercentageSpan = newStyled.span(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
5082
5082
|
var SizeFitGuide = function (_a) {
|
|
5083
5083
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5084
|
-
return (jsxs$1(Container$Y, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$
|
|
5084
|
+
return (jsxs$1(Container$Y, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5085
5085
|
};
|
|
5086
5086
|
var templateObject_1$1n, templateObject_2$V, templateObject_3$I;
|
|
5087
5087
|
|
|
@@ -5302,7 +5302,7 @@ var H3$2 = newStyled.h3(templateObject_2$S || (templateObject_2$S = __makeTempla
|
|
|
5302
5302
|
var ClubOfferTag = function (_a) {
|
|
5303
5303
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _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, style = _a.style;
|
|
5304
5304
|
var theme = useTheme();
|
|
5305
|
-
return (jsx$1(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style:
|
|
5305
|
+
return (jsx$1(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5306
5306
|
};
|
|
5307
5307
|
var templateObject_1$1k, templateObject_2$S;
|
|
5308
5308
|
|
|
@@ -5335,11 +5335,12 @@ var PriceLabelV2 = function (_a) {
|
|
|
5335
5335
|
weight: 700,
|
|
5336
5336
|
};
|
|
5337
5337
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5338
|
-
return (jsxs$1(Container$W, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.
|
|
5339
|
-
fontSize: '14px',
|
|
5340
|
-
letterSpacing: '0.05rem',
|
|
5341
|
-
padding: '20px 8px',
|
|
5338
|
+
return (jsxs$1(Container$W, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
5342
5339
|
borderRadius: '6px',
|
|
5340
|
+
width: '110px',
|
|
5341
|
+
height: '32px',
|
|
5342
|
+
alignItems: 'center',
|
|
5343
|
+
padding: '6px 12px 4px',
|
|
5343
5344
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5344
5345
|
};
|
|
5345
5346
|
var templateObject_1$1j;
|
|
@@ -11740,7 +11741,7 @@ var Rating = function (_a) {
|
|
|
11740
11741
|
};
|
|
11741
11742
|
|
|
11742
11743
|
var Container$O = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
11743
|
-
var P$
|
|
11744
|
+
var P$2 = newStyled.p(templateObject_2$N || (templateObject_2$N = __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; });
|
|
11744
11745
|
var textButtonStyles = function (theme) { return ({
|
|
11745
11746
|
border: 'none',
|
|
11746
11747
|
background: 'transparent',
|
|
@@ -11753,11 +11754,11 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11753
11754
|
var FitPredictor = function (_a) {
|
|
11754
11755
|
var onClick = _a.onClick;
|
|
11755
11756
|
var theme = useTheme();
|
|
11756
|
-
return (jsxs(Container$O, __assign$1({ theme: theme }, { children: [jsx(Container$O, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$
|
|
11757
|
+
return (jsxs(Container$O, __assign$1({ theme: theme }, { children: [jsx(Container$O, { 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$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11757
11758
|
};
|
|
11758
11759
|
var templateObject_1$19, templateObject_2$N;
|
|
11759
11760
|
|
|
11760
|
-
var
|
|
11761
|
+
var P$1 = newStyled.p(function (_a) {
|
|
11761
11762
|
var color = _a.color;
|
|
11762
11763
|
return ({
|
|
11763
11764
|
textAlign: 'center',
|
|
@@ -11812,7 +11813,7 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11812
11813
|
var ProgressBar = function (_a) {
|
|
11813
11814
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
11814
11815
|
var theme = useTheme();
|
|
11815
|
-
return (jsxs$1(Container$N, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && jsx$1(
|
|
11816
|
+
return (jsxs$1(Container$N, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
11816
11817
|
};
|
|
11817
11818
|
var templateObject_1$18;
|
|
11818
11819
|
|