@trafilea/afrodita-components 5.0.0-beta.177 → 5.0.0-beta.179

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;
@@ -1209,6 +1216,7 @@ declare type ThemeColors = {
         50: ThemeBasicPallete;
         100: ThemeBasicPallete;
         150: ThemeBasicPallete;
+        175: ThemeBasicPallete;
         200: ThemeBasicPallete;
         250: ThemeBasicPallete;
         300: ThemeBasicPallete;

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 */
@@ -13544,7 +13552,7 @@ var CartProductItem = {
 var Container$g = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  padding: 0.625rem 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  max-width: 3.75rem;\n\n  * {\n    color: ", ";\n  }\n"], ["\n  padding: 0.625rem 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  max-width: 3.75rem;\n\n  * {\n    color: ", ";\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
 var Item = newStyled.span(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  padding: 0;\n"])));
 var Number$1 = newStyled(Item)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  width: 1.25rem;\n  text-align: center;\n  font-weight: 600;\n"], ["\n  width: 1.25rem;\n  text-align: center;\n  font-weight: 600;\n"])));
-var IncreaseDecrease = newStyled(Item)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n"], ["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n"])));
+var IncreaseDecrease = newStyled(Item)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n  color: ", ";\n"], ["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n  color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
 var QuantityPicker = function (_a) {
     var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
     var theme = useTheme();
@@ -13567,7 +13575,7 @@ var QuantityPicker = function (_a) {
             return clamp(value);
         });
     }, [value, clamp]);
-    return (jsxs$1(Container$g, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
+    return (jsxs$1(Container$g, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
 };
 var templateObject_1$k, templateObject_2$f, templateObject_3$f, templateObject_4$9;