@trafilea/afrodita-components 6.14.2 → 6.15.0

package/build/index.d.ts

@@ -5,7 +5,7 @@ import { ComponentSize as ComponentSize$1 } from 'src/types/enums';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import { TextProps as TextProps$1 } from 'src/components/text/Text';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { ContentType as ContentType$1, IconProps as IconProps$2 } from 'src/types/types';
+import { ContentType as ContentType$1, RadioGroupOption as RadioGroupOption$1, IconProps as IconProps$2 } from 'src/types/types';
 import * as _emotion_styled from '@emotion/styled';
 import { StyledComponent } from '@emotion/styled';
 export { default as styled } from '@emotion/styled';
@@ -2932,10 +2932,10 @@ interface RadioProps {
     value: string;
     id: string;
     label: string | ReactFragment;
-    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    size?: ComponentSize$1.Small | ComponentSize$1.Medium | ComponentSize$1.Large;
     checked?: boolean;
     disabled?: boolean;
-    onChange: (option: RadioGroupOption) => void;
+    onChange: (option: RadioGroupOption$1) => void;
     style?: React__default.CSSProperties;
     useV2Style?: boolean;
 }

package/build/index.esm.js

@@ -5302,7 +5302,7 @@ var Tooltip = function (_a) {
                                             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$7, __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)] }), void 0)] }), void 0));
+                                        }) }, void 0)), jsx$1(Title$7, __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, style: { textAlign: 'left', maxWidth: '243px' }, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0))] }), void 0)] }), void 0)] }), void 0));
 };
 
 var colorsMapper = function (colors) { return ({
@@ -5800,13 +5800,19 @@ var Autoship = function (_a) {
                                         : benefitsColor.base }, void 0), jsx$1(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$1, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$1, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
 };
 
-var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var DiscountTag = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n  position: absolute;\n  top: -25px;\n  right: 5px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 14px;\n  border-radius: ", ";\n  font-weight: 600;\n"], ["\n  position: absolute;\n  top: -25px;\n  right: 5px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 14px;\n  border-radius: ", ";\n  font-weight: 600;\n"])), function (_a) {
+var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n  display: flex;\n\n  ", "\n"], ["\n  display: flex;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.component.autoship.discountTag.backgroundColor;
+    return theme.name === 'TheSpaDr' &&
+        "\n    [data-testid='subscription-frequency'] {\n      border: 0;\n      padding-left: 0 !important;\n      padding-right: 32px !important;\n    }\n\n    [role='listbox']{\n      margin-left: -20px;\n    }\n  ";
+});
+var DiscountTag = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n  position: absolute;\n  top: -24px;\n  right: 18px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  font-weight: bold;\n  line-height: 14px;\n  border-radius: ", ";\n"], ["\n  position: absolute;\n  top: -24px;\n  right: 18px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  font-weight: bold;\n  line-height: 14px;\n  border-radius: ", ";\n"])), function (_a) {
+    var theme = _a.theme, isSelected = _a.isSelected;
+    return isSelected
+        ? theme.component.autoship.discountTag.backgroundColor
+        : theme.colors.shades[350].color;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.component.autoship.discountTag.borderRadius;
+    return "".concat(theme.component.autoship.discountTag.borderRadius, " \n      ").concat(theme.component.autoship.discountTag.borderRadius, " 0 0");
 });
 var getSelectedBorder = function (_a) {
     var name = _a.name, colors = _a.colors;
@@ -5903,17 +5909,9 @@ var AutoshipV2 = function (_a) {
         onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
     };
     var benefitsColor = benefitsColorMapper(theme);
-    function DeliveryFrequencySelector() {
-        if (dropdownOptions.length > 1) {
-            return (jsxs$1(Fragment$2, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0));
-        }
-        else {
-            return (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
-        }
-    }
     return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
                                         ? benefitsColor.selected
-                                        : benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsx$1(Fragment$2, { children: jsx$1(FlexContainer, { children: jsx$1(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
+                                        : benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsx$1(FlexContainer, { children: dropdownOptions.length > 1 ? (jsxs$1(Fragment$2, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
 };
 
 var _a$2;
@@ -19825,7 +19823,7 @@ var NavButtonContainer = newStyled.div(templateObject_5 || (templateObject_5 = _
     return theme.colors.shades.white.color;
 });
 var Button = newStyled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 3px 8px;\n  z-index: 5;\n  height: 36px !important;\n  cursor: pointer;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 3px 8px;\n  z-index: 5;\n  height: 36px !important;\n  cursor: pointer;\n"])));
-var SliderThumbnail = newStyled(Slider)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-top: 16px;\n  padding-left: 16px;\n  & .slick-slide {\n    img {\n      border-radius: 8px;\n      overflow: hidden;\n    }\n  }\n  & .slick-current {\n    img {\n      border: 2px solid ", ";\n    }\n  }\n"], ["\n  margin-top: 16px;\n  padding-left: 16px;\n  & .slick-slide {\n    img {\n      border-radius: 8px;\n      overflow: hidden;\n    }\n  }\n  & .slick-current {\n    img {\n      border: 2px solid ", ";\n    }\n  }\n"])), function (_a) {
+var SliderThumbnail = newStyled(Slider)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-top: 16px;\n  padding-left: 16px;\n  & .slick-slide {\n    img {\n      overflow: hidden;\n    }\n  }\n  & .slick-current {\n    img {\n      border: 2px solid ", ";\n    }\n  }\n"], ["\n  margin-top: 16px;\n  padding-left: 16px;\n  & .slick-slide {\n    img {\n      overflow: hidden;\n    }\n  }\n  & .slick-current {\n    img {\n      border: 2px solid ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.pallete.primary.color;
 });
@@ -19849,25 +19847,11 @@ var SETTINGS = {
     dots: false,
 };
 var THUMBNAIL_SETTINGS = {
-    slidesToShow: 3.5,
+    variableWidth: true,
     swipeToSlide: true,
     focusOnSelect: true,
     infinite: false,
     centerPadding: '16px',
-    responsive: [
-        {
-            breakpoint: 1024,
-            settings: {
-                slidesToShow: 5,
-            },
-        },
-        {
-            breakpoint: 640,
-            settings: {
-                slidesToShow: 4.5,
-            },
-        },
-    ],
 };
 var ProductGalleryMobileV4 = function (_a) {
     var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId;