@trafilea/afrodita-components 5.0.0-beta.71 → 5.0.0-beta.72
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 -12
- package/build/index.js +12 -12
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -11080,7 +11080,7 @@ var TooltipText = newStyled.div(templateObject_4$j || (templateObject_4$j = __ma
|
|
|
11080
11080
|
return color;
|
|
11081
11081
|
});
|
|
11082
11082
|
var TopSection = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
11083
|
-
var Title$
|
|
11083
|
+
var Title$6 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __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) {
|
|
11084
11084
|
var color = _a.color;
|
|
11085
11085
|
return color;
|
|
11086
11086
|
});
|
|
@@ -11102,7 +11102,7 @@ var Tooltip = function (_a) {
|
|
|
11102
11102
|
var ref = tooltipRef.current;
|
|
11103
11103
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
11104
11104
|
}, [tooltipRef]);
|
|
11105
|
-
return (jsxs$1(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$
|
|
11105
|
+
return (jsxs$1(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
11106
11106
|
};
|
|
11107
11107
|
|
|
11108
11108
|
/* base styles & variants */
|
|
@@ -11280,13 +11280,13 @@ var Minimalistic = function (_a) {
|
|
|
11280
11280
|
var templateObject_1$P, templateObject_2$x;
|
|
11281
11281
|
|
|
11282
11282
|
var Container$t = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11283
|
-
var Title$
|
|
11283
|
+
var Title$5 = newStyled.h1(templateObject_2$w || (templateObject_2$w = __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; });
|
|
11284
11284
|
var Details$1 = newStyled.span(templateObject_3$o || (templateObject_3$o = __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; });
|
|
11285
11285
|
var PriceContainer$1 = newStyled.span(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
11286
11286
|
var Simple = function (_a) {
|
|
11287
11287
|
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;
|
|
11288
11288
|
var theme = useTheme();
|
|
11289
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$t, { children: [jsx$1(Title$
|
|
11289
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$t, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "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));
|
|
11290
11290
|
};
|
|
11291
11291
|
var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$i;
|
|
11292
11292
|
|
|
@@ -11870,7 +11870,7 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
11870
11870
|
literal: true,
|
|
11871
11871
|
});
|
|
11872
11872
|
|
|
11873
|
-
var Title$
|
|
11873
|
+
var Title$4 = newStyled.h1(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
11874
11874
|
var Line = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
11875
11875
|
var Row$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
11876
11876
|
flexDirection: ['column', 'row'],
|
|
@@ -11897,7 +11897,7 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$1 || (templateObject_8$1 = __m
|
|
|
11897
11897
|
var DeliveryDetails = function (_a) {
|
|
11898
11898
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
11899
11899
|
var theme = useTheme();
|
|
11900
|
-
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$
|
|
11900
|
+
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
11901
11901
|
};
|
|
11902
11902
|
var templateObject_1$A, templateObject_2$m, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
|
|
11903
11903
|
|
|
@@ -11911,11 +11911,11 @@ var ScrollToTop = function (_a) {
|
|
|
11911
11911
|
var templateObject_1$z, templateObject_2$l;
|
|
11912
11912
|
|
|
11913
11913
|
var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
11914
|
-
var H1
|
|
11914
|
+
var H1 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __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; });
|
|
11915
11915
|
var OrderBar = function (_a) {
|
|
11916
11916
|
var message = _a.message;
|
|
11917
11917
|
var theme = useTheme();
|
|
11918
|
-
return (jsxs$1(Container$k, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1
|
|
11918
|
+
return (jsxs$1(Container$k, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
11919
11919
|
};
|
|
11920
11920
|
var templateObject_1$y, templateObject_2$k;
|
|
11921
11921
|
|
|
@@ -11942,7 +11942,7 @@ var ImageContainer$1 = newStyled.div(templateObject_2$i || (templateObject_2$i =
|
|
|
11942
11942
|
var DescriptionContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])), mediaQueries({
|
|
11943
11943
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
11944
11944
|
}));
|
|
11945
|
-
var Title$
|
|
11945
|
+
var Title$3 = newStyled.h2(function (_a) {
|
|
11946
11946
|
var color = _a.color;
|
|
11947
11947
|
return ({
|
|
11948
11948
|
fontWeight: 600,
|
|
@@ -11975,7 +11975,7 @@ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeT
|
|
|
11975
11975
|
var SimpleOrderItem = function (_a) {
|
|
11976
11976
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
11977
11977
|
var theme = useTheme();
|
|
11978
|
-
return (jsxs$1(Container$j, { 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$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$
|
|
11978
|
+
return (jsxs$1(Container$j, { 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$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 }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { 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 }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
11979
11979
|
};
|
|
11980
11980
|
var templateObject_1$v, templateObject_2$i, templateObject_3$g, templateObject_4$b, templateObject_5$7;
|
|
11981
11981
|
|
|
@@ -12079,7 +12079,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12079
12079
|
});
|
|
12080
12080
|
});
|
|
12081
12081
|
var Container$h = newStyled.a(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
12082
|
-
var
|
|
12082
|
+
var Title$2 = newStyled.p(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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; });
|
|
12083
12083
|
var getStylesBySize = function (size) {
|
|
12084
12084
|
switch (size) {
|
|
12085
12085
|
case ComponentSize.Medium:
|
|
@@ -12119,7 +12119,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12119
12119
|
_a[ComponentSize.Small] = 2,
|
|
12120
12120
|
_a)[size];
|
|
12121
12121
|
}, [size]);
|
|
12122
|
-
return (jsxs(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign$1({ 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(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, 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: space }, void 0), jsx(
|
|
12122
|
+
return (jsxs(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign$1({ 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(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, 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: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12123
12123
|
};
|
|
12124
12124
|
var templateObject_1$q, templateObject_2$e, templateObject_3$c, templateObject_4$7;
|
|
12125
12125
|
|
package/build/index.js
CHANGED
|
@@ -11106,7 +11106,7 @@ var TooltipText = newStyled.div(templateObject_4$j || (templateObject_4$j = __ma
|
|
|
11106
11106
|
return color;
|
|
11107
11107
|
});
|
|
11108
11108
|
var TopSection = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
11109
|
-
var Title$
|
|
11109
|
+
var Title$6 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __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) {
|
|
11110
11110
|
var color = _a.color;
|
|
11111
11111
|
return color;
|
|
11112
11112
|
});
|
|
@@ -11128,7 +11128,7 @@ var Tooltip = function (_a) {
|
|
|
11128
11128
|
var ref = tooltipRef.current;
|
|
11129
11129
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
11130
11130
|
}, [tooltipRef]);
|
|
11131
|
-
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$
|
|
11131
|
+
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsxRuntime.jsx(TooltipText, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
11132
11132
|
};
|
|
11133
11133
|
|
|
11134
11134
|
/* base styles & variants */
|
|
@@ -11306,13 +11306,13 @@ var Minimalistic = function (_a) {
|
|
|
11306
11306
|
var templateObject_1$P, templateObject_2$x;
|
|
11307
11307
|
|
|
11308
11308
|
var Container$t = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11309
|
-
var Title$
|
|
11309
|
+
var Title$5 = newStyled.h1(templateObject_2$w || (templateObject_2$w = __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; });
|
|
11310
11310
|
var Details$1 = newStyled.span(templateObject_3$o || (templateObject_3$o = __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; });
|
|
11311
11311
|
var PriceContainer$1 = newStyled.span(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
11312
11312
|
var Simple = function (_a) {
|
|
11313
11313
|
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;
|
|
11314
11314
|
var theme = useTheme();
|
|
11315
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$t, { children: [jsxRuntime.jsx(Title$
|
|
11315
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$t, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "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));
|
|
11316
11316
|
};
|
|
11317
11317
|
var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$i;
|
|
11318
11318
|
|
|
@@ -11896,7 +11896,7 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
11896
11896
|
literal: true,
|
|
11897
11897
|
});
|
|
11898
11898
|
|
|
11899
|
-
var Title$
|
|
11899
|
+
var Title$4 = newStyled.h1(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
11900
11900
|
var Line = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
11901
11901
|
var Row$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
11902
11902
|
flexDirection: ['column', 'row'],
|
|
@@ -11923,7 +11923,7 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$1 || (templateObject_8$1 = __m
|
|
|
11923
11923
|
var DeliveryDetails = function (_a) {
|
|
11924
11924
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
11925
11925
|
var theme = useTheme();
|
|
11926
|
-
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$
|
|
11926
|
+
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
11927
11927
|
};
|
|
11928
11928
|
var templateObject_1$A, templateObject_2$m, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
|
|
11929
11929
|
|
|
@@ -11937,11 +11937,11 @@ var ScrollToTop = function (_a) {
|
|
|
11937
11937
|
var templateObject_1$z, templateObject_2$l;
|
|
11938
11938
|
|
|
11939
11939
|
var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
11940
|
-
var H1
|
|
11940
|
+
var H1 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __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; });
|
|
11941
11941
|
var OrderBar = function (_a) {
|
|
11942
11942
|
var message = _a.message;
|
|
11943
11943
|
var theme = useTheme();
|
|
11944
|
-
return (jsxRuntime.jsxs(Container$k, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1
|
|
11944
|
+
return (jsxRuntime.jsxs(Container$k, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
11945
11945
|
};
|
|
11946
11946
|
var templateObject_1$y, templateObject_2$k;
|
|
11947
11947
|
|
|
@@ -11968,7 +11968,7 @@ var ImageContainer$1 = newStyled.div(templateObject_2$i || (templateObject_2$i =
|
|
|
11968
11968
|
var DescriptionContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])), mediaQueries({
|
|
11969
11969
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
11970
11970
|
}));
|
|
11971
|
-
var Title$
|
|
11971
|
+
var Title$3 = newStyled.h2(function (_a) {
|
|
11972
11972
|
var color = _a.color;
|
|
11973
11973
|
return ({
|
|
11974
11974
|
fontWeight: 600,
|
|
@@ -12001,7 +12001,7 @@ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeT
|
|
|
12001
12001
|
var SimpleOrderItem = function (_a) {
|
|
12002
12002
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
12003
12003
|
var theme = useTheme();
|
|
12004
|
-
return (jsxRuntime.jsxs(Container$j, { 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$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$
|
|
12004
|
+
return (jsxRuntime.jsxs(Container$j, { 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$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 }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { 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: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12005
12005
|
};
|
|
12006
12006
|
var templateObject_1$v, templateObject_2$i, templateObject_3$g, templateObject_4$b, templateObject_5$7;
|
|
12007
12007
|
|
|
@@ -12105,7 +12105,7 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12105
12105
|
});
|
|
12106
12106
|
});
|
|
12107
12107
|
var Container$h = newStyled.a(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
12108
|
-
var
|
|
12108
|
+
var Title$2 = newStyled.p(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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; });
|
|
12109
12109
|
var getStylesBySize = function (size) {
|
|
12110
12110
|
switch (size) {
|
|
12111
12111
|
case exports.ComponentSize.Medium:
|
|
@@ -12145,7 +12145,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12145
12145
|
_a[exports.ComponentSize.Small] = 2,
|
|
12146
12146
|
_a)[size];
|
|
12147
12147
|
}, [size]);
|
|
12148
|
-
return (jsxs(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign$1({ 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(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, 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: space }, void 0), jsx(
|
|
12148
|
+
return (jsxs(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign$1({ 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(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, 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: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12149
12149
|
};
|
|
12150
12150
|
var templateObject_1$q, templateObject_2$e, templateObject_3$c, templateObject_4$7;
|
|
12151
12151
|
|
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": "5.0.0-beta.
|
|
6
|
+
"version": "5.0.0-beta.72",
|
|
7
7
|
"private": false,
|
|
8
8
|
"main": "build/index.js",
|
|
9
9
|
"style": "build/index.css",
|