@trafilea/afrodita-components 5.0.0-beta.140 → 5.0.0-beta.142

package/build/index.d.ts

@@ -7,6 +7,7 @@ import { StyledComponent } from '@emotion/styled';
 export { default as styled } from '@emotion/styled';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as _emotion_react from '@emotion/react';
+import { ComponentSize as ComponentSize$1 } from 'src/types/enums';
 
 declare enum CardSectionType {
     Header = 0,
@@ -1626,6 +1627,60 @@ declare type ThemeComponent = {
             };
         };
     };
+    total: {
+        basicTotal: {
+            amount: {
+                color: string;
+                fontSize: string;
+            };
+            currency: {
+                color: string;
+                fontSize: string;
+                lineHeight: string;
+                alignSelf?: string;
+            };
+            savings: {
+                textFontSize: string;
+                textLineHeight: string;
+                amountFontSize: string;
+                amountFontWeight: number;
+                amountLineHeight: string;
+                color?: string;
+            };
+        };
+    };
+    subTotal: {
+        basicSubTotal: {
+            family: string;
+            size: string;
+            weight: number;
+            lineHeight: string;
+            color: string;
+        };
+    };
+    pricing: {
+        priceLabel: {
+            price: {
+                size: ComponentSize$1.Small | ComponentSize$1.Medium | ComponentSize$1.Large;
+                originalPriceColor: string;
+            };
+        };
+    };
+    orderSummary: {
+        backgroundColor: string;
+    };
+    expressCheckout: {
+        fontFamily: string;
+    };
+    copyrightText: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        color: string;
+    };
+    textButton: {
+        fontWeight: number;
+    };
 };
 declare type ThemeTypography = {
     config: {

package/build/index.esm.js

@@ -4765,7 +4765,7 @@ var TAGS = {
     hero3: newStyled.h3(templateObject_3$D || (templateObject_3$D = __makeTemplateObject([""], [""]))),
     display1: newStyled.h1(templateObject_4$q || (templateObject_4$q = __makeTemplateObject([""], [""]))),
     display2: newStyled.h2(templateObject_5$f || (templateObject_5$f = __makeTemplateObject([""], [""]))),
-    heading1: newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject([""], [""]))),
+    heading1: newStyled.h1(templateObject_6$b || (templateObject_6$b = __makeTemplateObject([""], [""]))),
     heading2: newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([""], [""]))),
     heading3: newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject([""], [""]))),
     heading4: newStyled.h4(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject([""], [""]))),
@@ -4886,7 +4886,7 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1g, templateObject_2$P, templateObject_3$D, templateObject_4$q, templateObject_5$f, templateObject_6$a, 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;
+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;
 
 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) {
     var inline = _a.inline;
@@ -4918,17 +4918,17 @@ var getStylesBySize$8 = function (size) {
             };
         case ComponentSize.Small:
             return {
-                fontSize: '0.88rem',
+                fontSize: '14px',
             };
         default:
             return {
-                fontSize: '0.88rem',
+                fontSize: '14px',
             };
     }
 };
 var textButtonStyles$1 = function (theme, size) {
     var stylesBySize = getStylesBySize$8(size);
-    return __assign$1(__assign$1({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontWeight: 500, textDecorationLine: 'underline' }, stylesBySize), { '&:disabled': {
+    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': {
             color: theme.colors.shades['250'].color,
             textDecorationLine: 'none',
         } });
@@ -5108,7 +5108,7 @@ var PriceLabel = function (_a) {
         color: color || theme.colors.pallete.secondary.color,
         weight: 700,
     };
-    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)); };
+    var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
     return (jsxs$1(Container$N, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
 };
 var templateObject_1$1b, templateObject_2$M, templateObject_3$B;
@@ -11634,12 +11634,12 @@ var TooltipText = newStyled.div(templateObject_4$n || (templateObject_4$n = __ma
     return color;
 });
 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"])));
-var Title$6 = newStyled.h1(templateObject_6$9 || (templateObject_6$9 = __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) {
+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) {
     var color = _a.color;
     return color;
 });
 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"])));
-var templateObject_1$Z, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$d, templateObject_6$9, templateObject_7$5;
+var templateObject_1$Z, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$d, templateObject_6$a, templateObject_7$5;
 
 var Tooltip = function (_a) {
     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;
@@ -12271,22 +12271,56 @@ var templateObject_1$M;
 
 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"])));
 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; });
-var Currency = newStyled.span(templateObject_3$s || (templateObject_3$s = __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"])));
+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) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.currency.color;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.currency.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.currency.lineHeight;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.currency.alignSelf;
+});
 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; });
-var Discount = newStyled.h3(templateObject_5$b || (templateObject_5$b = __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"])));
+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) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.savings.textFontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.savings.textLineHeight;
+});
+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) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.savings.amountFontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.savings.amountLineHeight;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.total.basicTotal.savings.amountFontWeight;
+});
 var Total = function (_a) {
     var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
     var theme = useTheme();
-    return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$v, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(Discount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
+    return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$v, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
 };
-var templateObject_1$L, templateObject_2$w, templateObject_3$s, templateObject_4$k, templateObject_5$b;
+var templateObject_1$L, templateObject_2$w, templateObject_3$s, templateObject_4$k, templateObject_5$b, templateObject_6$9;
 
 var Wrapper$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
 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"])));
-var Item$2 = newStyled.h4(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
+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) {
+    var theme = _a.theme;
+    return theme.component.subTotal.basicSubTotal.lineHeight;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.subTotal.basicSubTotal.weight;
+});
 var CouponItem = newStyled(Item$2)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
@@ -12547,7 +12581,7 @@ var Quantity = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeT
 var SimpleOrderItem = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
     var theme = useTheme();
-    return (jsxs$1(Container$r, { children: [jsxs$1(ImageContainer$3, { 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$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "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, finalPriceStyle: finalPriceStyle }, void 0)] }), void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$r, { children: [jsxs$1(ImageContainer$3, { 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$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "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: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }, void 0));
 };
 var templateObject_1$C, templateObject_2$o, templateObject_3$m, templateObject_4$e, templateObject_5$9;