@trafilea/afrodita-components 5.0.0-beta.176 → 5.0.0-beta.178

package/build/index.d.ts

@@ -1120,14 +1120,21 @@ interface TooltipProps {
     children: React.ReactNode;
     position: ComponentPosition;
     align?: 'start' | 'center' | 'end';
-    text: string;
+    content?: {
+        text: string;
+        color?: string;
+    };
+    backgroundColor?: string;
+    maxWidth?: string;
     header?: {
         title: string;
-        Icon: IconType;
+        titleColor?: string;
+        Icon?: IconType;
+        iconFill?: string;
     };
     onClick?: () => void;
 }
-declare const Tooltip: ({ children, position, text, align, onClick, header, }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ children, position, content, backgroundColor, align, maxWidth, onClick, header, }: TooltipProps) => JSX.Element;
 
 interface AccordionProps {
     defaultOpen?: boolean;
@@ -2138,6 +2145,11 @@ interface ProductItemSmallMobileProps extends ProductItemProps {
     priceDisplayType?: 'default' | 'styled';
     priceAtBottom?: boolean;
     priceLoading?: boolean;
+    colorPicker?: {
+        display: boolean;
+        position: string;
+        component: JSX.Element | JSX.Element[] | undefined;
+    };
 }
 
 declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
@@ -2146,7 +2158,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
 };
 
 declare const Collection: {
-    ProductItemMobile: ({ title, image, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, priceAtBottom, priceLoading, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    ProductItemMobile: ({ title, image, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, priceAtBottom, priceLoading, colorPicker, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
     withProductGrid: typeof withProductGrid;
 };
 

package/build/index.esm.js

@@ -11616,7 +11616,7 @@ var Wrapper$5 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __ma
     return getWrapperFlexDirection(position);
 });
 var TooltipContainer = newStyled.div(function (_a) {
-    var position = _a.position, childrenWidth = _a.childrenWidth, tooltipHeight = _a.tooltipHeight, align = _a.align;
+    var position = _a.position, childrenWidth = _a.childrenWidth, tooltipHeight = _a.tooltipHeight, align = _a.align, maxWidth = _a.maxWidth;
     return ({
         position: 'absolute',
         display: 'flex',
@@ -11626,6 +11626,7 @@ var TooltipContainer = newStyled.div(function (_a) {
         marginRight: getTooltipMargin(position, ComponentPosition.Left, "".concat(childrenWidth, "px")),
         marginTop: getTooltipMargin(position, ComponentPosition.Top, "-".concat(tooltipHeight, "px")),
         marginBottom: getTooltipMargin(position, ComponentPosition.Bottom, "-".concat(tooltipHeight, "px")),
+        maxWidth: maxWidth ? "".concat(maxWidth) : 'none',
         transition: 'opacity 0.2s ease',
         userSelect: 'none',
         opacity: 0,
@@ -11635,9 +11636,12 @@ var TooltipContainer = newStyled.div(function (_a) {
 var getTooltipMargin = function (actual, expected, margin) {
     return actual === expected ? margin : '0';
 };
-var ContentWrapper = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"])), function (_a) {
+var ContentWrapper = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  z-index: 999;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  z-index: 999;\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
 });
 var TooltipArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"], ["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"])), function (_a) {
     var position = _a.position;
@@ -11662,7 +11666,7 @@ var IconContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7$7 =
 var templateObject_1$11, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$f, templateObject_6$c, templateObject_7$7;
 
 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;
+    var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
     var theme = useTheme();
     var _c = useState(0), childrenWidth = _c[0], setChildrenWidth = _c[1];
     var childrenRef = createRef();
@@ -11676,7 +11680,11 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    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));
+    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, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
+                                            fill: (header === null || header === void 0 ? void 0 : header.iconFill)
+                                                ? header === null || header === void 0 ? void 0 : header.iconFill
+                                                : theme.colors.pallete.secondary.color,
+                                        }) }, void 0)), jsx$1(Title$6, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, __assign$1({ color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: content.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: theme.colors.shades.white.color, stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
 };
 
 /* base styles & variants */
@@ -12772,7 +12780,11 @@ var TopTagContainer$2 = newStyled.div(templateObject_4$c || (templateObject_4$c
 var BottomTagContainer$2 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 15%;\n  left: 0;\n  width: inherit;\n  z-index: 1;\n"], ["\n  position: absolute;\n  bottom: 15%;\n  left: 0;\n  width: inherit;\n  z-index: 1;\n"])));
 var MarginTopContainer = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  margin-top: 8px;\n"], ["\n  margin-top: 8px;\n"])));
 var ProductItemMobile = function (_a) {
-    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading;
+    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.colorPicker, colorPicker = _d === void 0 ? {
+        display: false,
+        position: 'top',
+        component: undefined,
+    } : _d;
     var theme = useTheme();
     var styles = getStylesBySize$1(size);
     var space = useMemo(function () {
@@ -12787,7 +12799,7 @@ var ProductItemMobile = function (_a) {
         return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
     };
     var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
-    return (jsxs(Container$s, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __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$2, { children: topTag }, void 0), jsx(BottomTagContainer$2, { 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)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, 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), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0));
+    return (jsxs(Container$s, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __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$2, { children: topTag }, void 0), jsx(BottomTagContainer$2, { 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)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null, colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position && colorPicker.component] }, 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), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position && colorPicker.component] }, void 0))] }), void 0));
 };
 var templateObject_1$A, templateObject_2$n, templateObject_3$l, templateObject_4$c, templateObject_5$7, templateObject_6$6;