@trafilea/afrodita-components 6.57.1 → 6.57.2

package/build/index.d.ts

@@ -175,6 +175,7 @@ declare const HorizontalDivider: _emotion_styled.StyledComponent<{
 declare type StyledIconProps = {
     backgroundColor?: string;
     opacity?: number | string;
+    showTooltipTitle?: boolean;
 };
 
 declare type Actions$1 = 'actions/add' | 'actions/check_box_empty' | 'actions/check_box_light' | 'actions/check_box_solid' | 'actions/check' | 'actions/circle_check' | 'actions/circle_clear' | 'actions/circle_info' | 'actions/circle_minus' | 'actions/circle_plus' | 'actions/circle_question' | 'actions/circle_solid_check' | 'actions/circle_solid_clear' | 'actions/circle_solid_info' | 'actions/circle_solid_minus' | 'actions/circle_solid_plus' | 'actions/circle_solid_question' | 'actions/circle_solid_styled_check' | 'actions/circle_solid_warning' | 'actions/circle_solid_reload' | 'actions/circle_warning' | 'actions/clear_light' | 'actions/close' | 'actions/copy_outlined' | 'actions/copy' | 'actions/edit' | 'actions/light_check' | 'actions/light_exclamation' | 'actions/like_solid' | 'actions/like' | 'actions/like_bold' | 'actions/minus' | 'actions/not_allowed' | 'actions/question' | 'actions/radio_empty' | 'actions/radio_filled' | 'actions/settings_solid' | 'actions/settings' | 'actions/share' | 'actions/signout' | 'actions/signout_light' | 'actions/trash' | 'actions/warning' | 'actions/navigate' | 'actions/camera';
@@ -200,6 +201,7 @@ declare type IconProps$1 = {
     name: IconName;
     svgProps?: Omit<SVGProps<SVGElement>, 'ref'>;
     className?: string;
+    showTooltipTitle?: boolean;
 } & StyledIconProps;
 
 declare const Icon$1: react__default.NamedExoticComponent<IconProps$1>;

package/build/index.esm.js

@@ -3572,7 +3572,7 @@ var getArrowStyles = function (position, borderColor, backgroundColor) {
         case ComponentPosition.BottomLeft:
             return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 171px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case ComponentPosition.BottomRight:
-            return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 38px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
+            return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 28px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case ComponentPosition.Left:
             return "\n      &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      margin-top: -10px;\n      border: 10px solid transparent;\n      border-right: 0;s\n      border-left: 10px solid transparent;\n      margin-left: -1px;\n      }\n      \n      &::before {\n        border-left: 10px solid ".concat(borderColor, ";\n       \n      }\n      &::after {\n        border-left: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case ComponentPosition.Right:
@@ -3594,6 +3594,24 @@ var getTooltipAlignItems = function (position, align) {
         case ComponentPosition.Right:
             return 'center';
     }
+};
+var getCloseIconRight = function (position, defaultRight) {
+    switch (position) {
+        case ComponentPosition.BottomLeft:
+        case ComponentPosition.BottomRight:
+            return '.55rem';
+        default:
+            return defaultRight;
+    }
+};
+var getTooltipTextMaxWidth = function (position) {
+    switch (position) {
+        case ComponentPosition.BottomLeft:
+        case ComponentPosition.BottomRight:
+            return '203px';
+        default:
+            return undefined;
+    }
 };
 
 var Wrapper$8 = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: ", ";\n      opacity: ", ";\n      cursor: text;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: ", ";\n      opacity: ", ";\n      cursor: text;\n    }\n  }\n"])), function (_a) {
@@ -3637,10 +3655,10 @@ var getTooltipMargin = function (actual, expected, margin) {
         return "calc(".concat(margin, " - 37px)");
     }
     if (actual === ComponentPosition.BottomRight && expected === ComponentPosition.Right) {
-        return '-40px';
+        return '-30px';
     }
     if (actual === ComponentPosition.BottomLeft && expected === ComponentPosition.Left) {
-        return '-80px';
+        return '-40px';
     }
     return actual === expected ? margin : '0';
 };
@@ -3655,8 +3673,8 @@ var TooltipText = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __
     var theme = _a.theme;
     return theme.component.autoship.tooltip.text.alignment;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.component.autoship.tooltip.text.maxWidth;
+    var theme = _a.theme, maxWidth = _a.maxWidth;
+    return maxWidth !== null && maxWidth !== void 0 ? maxWidth : theme.component.autoship.tooltip.text.maxWidth;
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -3691,12 +3709,12 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxs$1(Wrapper$8, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { 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 ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow, "data-position": position }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper$1, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? 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$6, { children: React__default.createElement(header.Icon, {
+    return (jsxs$1(Wrapper$8, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { 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 ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow, "data-position": position }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: getCloseIconRight(position, header === null || header === void 0 ? void 0 : header.iconRight), onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper$1, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? 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$6, { children: React__default.createElement(header.Icon, {
                                             testId: 'HeaderIcon',
                                             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$b, __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, { 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", dangerouslySetInnerHTML: { __html: content.text } }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
+                                        }) }, void 0)), jsx$1(Title$b, __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, { 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", dangerouslySetInnerHTML: { __html: content.text }, maxWidth: getTooltipTextMaxWidth(position) }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
 };
 
 var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
@@ -3758,7 +3776,7 @@ var PriceLabelV2$1 = function (_a) {
                         text: tooltipText,
                     }, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : (isDiscount && isMobile
                         ? ComponentPosition.BottomLeft
-                        : ComponentPosition.BottomRight), "data-testid": "tooltip" }, { children: jsx$1(Icon$1, { name: tooltipIcon !== null && tooltipIcon !== void 0 ? tooltipIcon : 'actions/circle_info', fill: theme.colors.shades[500].color, testId: "tooltip-icon" }, void 0) }), void 0) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
+                        : ComponentPosition.BottomRight), closeBtnSize: 0.7, "data-testid": "tooltip" }, { children: jsx$1(Icon$1, { name: tooltipIcon !== null && tooltipIcon !== void 0 ? tooltipIcon : 'actions/circle_info', fill: theme.colors.shades[500].color, testId: "tooltip-icon", showTooltipTitle: false }, void 0) }), void 0) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
                         borderRadius: '8px',
                         width: '107px',
                         height: '28px',
@@ -3985,7 +4003,7 @@ var SkeletonBox = function (_a) {
 };
 var templateObject_1$2v;
 
-var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"])), function (_a) {
+var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -4000,8 +4018,12 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u
 }, function (_a) {
     var opacity = _a.opacity;
     return opacity && "opacity: ".concat(opacity, ";");
+}, function (_a) {
+    var showTooltipTitle = _a.showTooltipTitle;
+    return !showTooltipTitle &&
+        "\n    use {\n      pointer-events: none;\n    }\n  ";
 });
-var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$1P = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"])), function (_a) {
+var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$1P = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -4013,6 +4035,10 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$
 }, function (_a) {
     var opacity = _a.opacity;
     return opacity && "opacity: ".concat(opacity, ";");
+}, function (_a) {
+    var showTooltipTitle = _a.showTooltipTitle;
+    return !showTooltipTitle &&
+        "\n    use {\n      pointer-events: none;\n    }\n  ";
 });
 var templateObject_1$2u, templateObject_2$1P;
 
@@ -4093,9 +4119,9 @@ var getIconDimension = function (dimension) {
 };
 
 var UnmemoIconFromExtSource = function (_a) {
-    var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
-    var _b = useState(false), error = _b[0], setError = _b[1];
-    var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
+    var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, _b = _a.showTooltipTitle, showTooltipTitle = _b === void 0 ? true : _b, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId", "showTooltipTitle"]);
+    var _c = useState(false), error = _c[0], setError = _c[1];
+    var _d = useState(), localSource = _d[0], setLocalSource = _d[1];
     useEffect(function () {
         var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
             var localSource;
@@ -4129,13 +4155,13 @@ var UnmemoIconFromExtSource = function (_a) {
     if (!fill && !svgProps) {
         return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
     }
-    return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
+    return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { showTooltipTitle: showTooltipTitle }, { children: [showTooltipTitle && jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
 };
 var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
 
 /* eslint-disable react/forbid-component-props */
 var UnmemoIcon = function (_a) {
-    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
+    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, _c = _a.showTooltipTitle, showTooltipTitle = _c === void 0 ? true : _c, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "showTooltipTitle"]);
     var assets = useTheme().assets;
     var newWidth = width && getIconDimension(width);
     var newHeight = height ? getIconDimension(height) : getIconDimension(width);
@@ -4143,9 +4169,9 @@ var UnmemoIcon = function (_a) {
     var svgSplit = name.split('/');
     var svgId = svgSplit[svgSplit.length - 1];
     if (assets.isSameOriginIcons) {
-        return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
+        return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { showTooltipTitle: showTooltipTitle }, { children: [showTooltipTitle && jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
     }
-    return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
+    return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title, showTooltipTitle: showTooltipTitle }, rest), void 0));
 };
 var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });