@trafilea/afrodita-components 6.57.0 → 6.57.1
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 +17 -15
- package/build/index.esm.js.map +1 -1
- package/build/index.js +17 -15
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3538,9 +3538,9 @@ var getWrapperFlexDirection = function (position) {
|
|
|
3538
3538
|
case ComponentPosition.Bottom:
|
|
3539
3539
|
return 'column-reverse';
|
|
3540
3540
|
case ComponentPosition.BottomLeft:
|
|
3541
|
-
return '
|
|
3541
|
+
return 'row-reverse';
|
|
3542
3542
|
case ComponentPosition.BottomRight:
|
|
3543
|
-
return '
|
|
3543
|
+
return 'row';
|
|
3544
3544
|
case ComponentPosition.Left:
|
|
3545
3545
|
return 'row-reverse';
|
|
3546
3546
|
case ComponentPosition.Right:
|
|
@@ -3554,9 +3554,9 @@ var getContainerFlexDirection = function (position) {
|
|
|
3554
3554
|
case ComponentPosition.Bottom:
|
|
3555
3555
|
return 'column-reverse';
|
|
3556
3556
|
case ComponentPosition.BottomLeft:
|
|
3557
|
-
return '
|
|
3557
|
+
return 'row';
|
|
3558
3558
|
case ComponentPosition.BottomRight:
|
|
3559
|
-
return '
|
|
3559
|
+
return 'row-reverse';
|
|
3560
3560
|
case ComponentPosition.Left:
|
|
3561
3561
|
return 'row';
|
|
3562
3562
|
case ComponentPosition.Right:
|
|
@@ -3570,9 +3570,9 @@ var getArrowStyles = function (position, borderColor, backgroundColor) {
|
|
|
3570
3570
|
case ComponentPosition.Bottom:
|
|
3571
3571
|
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 0%;\n left: 50%;\n margin-left: -10px;\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 }");
|
|
3572
3572
|
case ComponentPosition.BottomLeft:
|
|
3573
|
-
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 0%;\n left:
|
|
3573
|
+
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 }");
|
|
3574
3574
|
case ComponentPosition.BottomRight:
|
|
3575
|
-
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 0%;\n left:
|
|
3575
|
+
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 }");
|
|
3576
3576
|
case ComponentPosition.Left:
|
|
3577
3577
|
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 }");
|
|
3578
3578
|
case ComponentPosition.Right:
|
|
@@ -3586,9 +3586,9 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
3586
3586
|
case ComponentPosition.Bottom:
|
|
3587
3587
|
return align;
|
|
3588
3588
|
case ComponentPosition.BottomLeft:
|
|
3589
|
-
return
|
|
3589
|
+
return 'center';
|
|
3590
3590
|
case ComponentPosition.BottomRight:
|
|
3591
|
-
return
|
|
3591
|
+
return 'center';
|
|
3592
3592
|
case ComponentPosition.Left:
|
|
3593
3593
|
return 'center';
|
|
3594
3594
|
case ComponentPosition.Right:
|
|
@@ -3634,13 +3634,13 @@ var TooltipContainer = newStyled.div(templateObject_2$1T || (templateObject_2$1T
|
|
|
3634
3634
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
3635
3635
|
if ((actual === ComponentPosition.BottomLeft || actual === ComponentPosition.BottomRight) &&
|
|
3636
3636
|
expected === ComponentPosition.Bottom) {
|
|
3637
|
-
return "calc(".concat(margin, " -
|
|
3637
|
+
return "calc(".concat(margin, " - 37px)");
|
|
3638
3638
|
}
|
|
3639
|
-
if (actual === ComponentPosition.
|
|
3640
|
-
return '-
|
|
3639
|
+
if (actual === ComponentPosition.BottomRight && expected === ComponentPosition.Right) {
|
|
3640
|
+
return '-40px';
|
|
3641
3641
|
}
|
|
3642
|
-
if (actual === ComponentPosition.
|
|
3643
|
-
return '-
|
|
3642
|
+
if (actual === ComponentPosition.BottomLeft && expected === ComponentPosition.Left) {
|
|
3643
|
+
return '-80px';
|
|
3644
3644
|
}
|
|
3645
3645
|
return actual === expected ? margin : '0';
|
|
3646
3646
|
};
|
|
@@ -3691,7 +3691,7 @@ var Tooltip = function (_a) {
|
|
|
3691
3691
|
var ref = tooltipRef.current;
|
|
3692
3692
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
3693
3693
|
}, [tooltipRef]);
|
|
3694
|
-
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 }, { 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, {
|
|
3694
|
+
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, {
|
|
3695
3695
|
testId: 'HeaderIcon',
|
|
3696
3696
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
3697
3697
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -3756,7 +3756,9 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3756
3756
|
letterSpacing: '-0.05rem',
|
|
3757
3757
|
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), tooltipText && (jsx$1(TooltipContainer$1, __assign$1({ "data-testid": "tooltip-container" }, { children: jsx$1(Tooltip, __assign$1({ showCloseIcon: true, withArrow: true, content: {
|
|
3758
3758
|
text: tooltipText,
|
|
3759
|
-
}, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : (
|
|
3759
|
+
}, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : (isDiscount && isMobile
|
|
3760
|
+
? ComponentPosition.BottomLeft
|
|
3761
|
+
: 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: {
|
|
3760
3762
|
borderRadius: '8px',
|
|
3761
3763
|
width: '107px',
|
|
3762
3764
|
height: '28px',
|