@trafilea/afrodita-components 5.0.0-beta.140 → 5.0.0-beta.142
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +55 -0
- package/build/index.esm.js +48 -14
- package/build/index.esm.js.map +1 -1
- package/build/index.js +48 -14
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +55 -0
- package/build/theme/revel.theme.js +80 -0
- package/build/theme/shapermint.theme.d.ts +55 -0
- package/build/theme/shapermint.theme.js +80 -0
- package/build/theme/truekind.theme.d.ts +55 -0
- package/build/theme/truekind.theme.js +80 -0
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4791,7 +4791,7 @@ var TAGS = {
|
|
|
4791
4791
|
hero3: newStyled.h3(templateObject_3$D || (templateObject_3$D = __makeTemplateObject([""], [""]))),
|
|
4792
4792
|
display1: newStyled.h1(templateObject_4$q || (templateObject_4$q = __makeTemplateObject([""], [""]))),
|
|
4793
4793
|
display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
|
|
4794
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4794
|
+
heading1: newStyled.h1(templateObject_6$b || (templateObject_6$b = __makeTemplateObject([""], [""]))),
|
|
4795
4795
|
heading2: newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([""], [""]))),
|
|
4796
4796
|
heading3: newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject([""], [""]))),
|
|
4797
4797
|
heading4: newStyled.h4(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject([""], [""]))),
|
|
@@ -4912,7 +4912,7 @@ var DEFAULTS = {
|
|
|
4912
4912
|
size: 'regular',
|
|
4913
4913
|
},
|
|
4914
4914
|
};
|
|
4915
|
-
var templateObject_1$1g, templateObject_2$P, templateObject_3$D, templateObject_4$q, templateObject_5$f, templateObject_6$
|
|
4915
|
+
var templateObject_1$1g, templateObject_2$P, templateObject_3$D, templateObject_4$q, templateObject_5$f, templateObject_6$b, templateObject_7$6, templateObject_8$4, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4916
4916
|
|
|
4917
4917
|
var ButtonsContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4918
4918
|
var inline = _a.inline;
|
|
@@ -4944,17 +4944,17 @@ var getStylesBySize$8 = function (size) {
|
|
|
4944
4944
|
};
|
|
4945
4945
|
case exports.ComponentSize.Small:
|
|
4946
4946
|
return {
|
|
4947
|
-
fontSize: '
|
|
4947
|
+
fontSize: '14px',
|
|
4948
4948
|
};
|
|
4949
4949
|
default:
|
|
4950
4950
|
return {
|
|
4951
|
-
fontSize: '
|
|
4951
|
+
fontSize: '14px',
|
|
4952
4952
|
};
|
|
4953
4953
|
}
|
|
4954
4954
|
};
|
|
4955
4955
|
var textButtonStyles$1 = function (theme, size) {
|
|
4956
4956
|
var stylesBySize = getStylesBySize$8(size);
|
|
4957
|
-
return __assign$1(__assign$1({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontWeight:
|
|
4957
|
+
return __assign$1(__assign$1({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontWeight: theme.component.textButton.fontWeight, textDecorationLine: 'underline' }, stylesBySize), { '&:disabled': {
|
|
4958
4958
|
color: theme.colors.shades['250'].color,
|
|
4959
4959
|
textDecorationLine: 'none',
|
|
4960
4960
|
} });
|
|
@@ -5134,7 +5134,7 @@ var PriceLabel = function (_a) {
|
|
|
5134
5134
|
color: color || theme.colors.pallete.secondary.color,
|
|
5135
5135
|
weight: 700,
|
|
5136
5136
|
};
|
|
5137
|
-
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.
|
|
5137
|
+
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5138
5138
|
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5139
5139
|
};
|
|
5140
5140
|
var templateObject_1$1b, templateObject_2$M, templateObject_3$B;
|
|
@@ -11660,12 +11660,12 @@ var TooltipText = newStyled.div(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
11660
11660
|
return color;
|
|
11661
11661
|
});
|
|
11662
11662
|
var TopSection = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
11663
|
-
var Title$6 = newStyled.h1(templateObject_6$
|
|
11663
|
+
var Title$6 = newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11664
11664
|
var color = _a.color;
|
|
11665
11665
|
return color;
|
|
11666
11666
|
});
|
|
11667
11667
|
var IconContainer$5 = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
11668
|
-
var templateObject_1$Z, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$d, templateObject_6$
|
|
11668
|
+
var templateObject_1$Z, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$d, templateObject_6$a, templateObject_7$5;
|
|
11669
11669
|
|
|
11670
11670
|
var Tooltip = function (_a) {
|
|
11671
11671
|
var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
|
|
@@ -12297,22 +12297,56 @@ var templateObject_1$M;
|
|
|
12297
12297
|
|
|
12298
12298
|
var Wrapper$2 = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
12299
12299
|
var GrandTotal = newStyled.h1(templateObject_2$w || (templateObject_2$w = __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; });
|
|
12300
|
-
var Currency = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size:
|
|
12300
|
+
var Currency = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
12301
|
+
var theme = _a.theme;
|
|
12302
|
+
return theme.component.total.basicTotal.currency.color;
|
|
12303
|
+
}, function (_a) {
|
|
12304
|
+
var theme = _a.theme;
|
|
12305
|
+
return theme.component.total.basicTotal.currency.fontSize;
|
|
12306
|
+
}, function (_a) {
|
|
12307
|
+
var theme = _a.theme;
|
|
12308
|
+
return theme.component.total.basicTotal.currency.lineHeight;
|
|
12309
|
+
}, function (_a) {
|
|
12310
|
+
var theme = _a.theme;
|
|
12311
|
+
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12312
|
+
});
|
|
12301
12313
|
var Container$v = newStyled.div(templateObject_4$k || (templateObject_4$k = __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; });
|
|
12302
|
-
var
|
|
12314
|
+
var DiscountText = newStyled.h3(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"])), function (_a) {
|
|
12315
|
+
var theme = _a.theme;
|
|
12316
|
+
return theme.component.total.basicTotal.savings.textFontSize;
|
|
12317
|
+
}, function (_a) {
|
|
12318
|
+
var theme = _a.theme;
|
|
12319
|
+
return theme.component.total.basicTotal.savings.textLineHeight;
|
|
12320
|
+
});
|
|
12321
|
+
var DiscountAmount = newStyled.h3(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12322
|
+
var theme = _a.theme;
|
|
12323
|
+
return theme.component.total.basicTotal.savings.amountFontSize;
|
|
12324
|
+
}, function (_a) {
|
|
12325
|
+
var theme = _a.theme;
|
|
12326
|
+
return theme.component.total.basicTotal.savings.amountLineHeight;
|
|
12327
|
+
}, function (_a) {
|
|
12328
|
+
var theme = _a.theme;
|
|
12329
|
+
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
12330
|
+
});
|
|
12303
12331
|
var Total = function (_a) {
|
|
12304
12332
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12305
12333
|
var theme = useTheme();
|
|
12306
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.
|
|
12334
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12307
12335
|
};
|
|
12308
|
-
var templateObject_1$L, templateObject_2$w, templateObject_3$s, templateObject_4$k, templateObject_5$b;
|
|
12336
|
+
var templateObject_1$L, templateObject_2$w, templateObject_3$s, templateObject_4$k, templateObject_5$b, templateObject_6$9;
|
|
12309
12337
|
|
|
12310
12338
|
var Wrapper$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12311
12339
|
var color = _a.color;
|
|
12312
12340
|
return color;
|
|
12313
12341
|
});
|
|
12314
12342
|
var ItemContainer = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
12315
|
-
var Item$2 = newStyled.h4(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height:
|
|
12343
|
+
var Item$2 = newStyled.h4(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12344
|
+
var theme = _a.theme;
|
|
12345
|
+
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12346
|
+
}, function (_a) {
|
|
12347
|
+
var theme = _a.theme;
|
|
12348
|
+
return theme.component.subTotal.basicSubTotal.weight;
|
|
12349
|
+
});
|
|
12316
12350
|
var CouponItem = newStyled(Item$2)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12317
12351
|
var color = _a.color;
|
|
12318
12352
|
return color;
|
|
@@ -12573,7 +12607,7 @@ var Quantity = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeT
|
|
|
12573
12607
|
var SimpleOrderItem = function (_a) {
|
|
12574
12608
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12575
12609
|
var theme = useTheme();
|
|
12576
|
-
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsxs(ImageContainer$3, { 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$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "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:
|
|
12610
|
+
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsxs(ImageContainer$3, { 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$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "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: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12577
12611
|
};
|
|
12578
12612
|
var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$e, templateObject_5$9;
|
|
12579
12613
|
|