@trafilea/afrodita-components 6.57.6 → 6.58.1

package/build/index.d.ts

@@ -2476,6 +2476,7 @@ interface CheckboxProps {
     blockUncheck?: boolean;
     id: string;
     backgroundColor?: string;
+    backgroundImage?: string;
     variant: 'primary' | 'secondary' | 'color';
 }
 declare const Checkbox: react__default.FC<CheckboxProps>;
@@ -2672,6 +2673,7 @@ declare type Filter = {
         link?: string;
         blockUncheck?: boolean;
         value?: string;
+        backgroundImage?: string;
     }>;
     showInMobile: boolean;
     showInTablet: boolean;
@@ -3279,6 +3281,7 @@ declare type ModalProps = {
     width?: string;
     initialTop?: string;
     countryRedirModalWithCoupon?: boolean;
+    className?: string;
 };
 interface ContainerProps {
     maxFullScreen: boolean;

package/build/index.esm.js

@@ -6031,8 +6031,10 @@ var Container$1q = newStyled.div(templateObject_1$2g || (templateObject_1$2g = _
 var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
     CustomCheckboxStyles[props.size](props.theme),
     CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
-    "\n  ".concat(props.backgroundColor ? "background-color: ".concat(props.backgroundColor, ";") : '', "\n  ").concat(props.text === 'White' ||
-        props.text === 'Nude' ||
+    "\n  ".concat(props.backgroundImage
+        ? "\n  background-image: url(".concat(props.backgroundImage, ");\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  ")
+        : '', "\n  ").concat(props.backgroundColor ? "background-color: ".concat(props.backgroundColor, ";") : '', "\n  ").concat(props.text === 'White' ||
+        props.text === 'Beige' ||
         props.text === 'Latte' ||
         props.text === 'Sand'
         ? "\n      svg {\n        path {\n          fill: var(--colors-shades-black-color);\n        }\n      }"
@@ -6043,7 +6045,7 @@ var Input$5 = newStyled.input(templateObject_2$1G || (templateObject_2$1G = __ma
     return (disabled ? 'not-allowed' : 'pointer');
 });
 var Checkbox = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.sizeLabel, sizeLabel = _d === void 0 ? ComponentSize.Medium : _d, colorLabel = _a.colorLabel, text = _a.text, _e = _a.checked, checked = _e === void 0 ? false : _e, id = _a.id, variant = _a.variant, blockUncheck = _a.blockUncheck, backgroundColor = _a.backgroundColor;
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.sizeLabel, sizeLabel = _d === void 0 ? ComponentSize.Medium : _d, colorLabel = _a.colorLabel, text = _a.text, _e = _a.checked, checked = _e === void 0 ? false : _e, id = _a.id, variant = _a.variant, blockUncheck = _a.blockUncheck, backgroundColor = _a.backgroundColor, backgroundImage = _a.backgroundImage;
     var theme = useTheme();
     var handleChange = function (e) {
         if (disabled || (e.target.checked === false && blockUncheck)) {
@@ -6052,7 +6054,7 @@ var Checkbox = function (_a) {
         }
         onChange(e.target.checked);
     };
-    return (jsxs$1(Container$1q, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && (jsx$1(Icon.Actions.Check, { fill: text === 'White'
+    return (jsxs$1(Container$1q, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, backgroundImage: backgroundImage, text: text }, { children: checked && (jsx$1(Icon.Actions.Check, { fill: text === 'White'
                         ? theme.colors.shades['black'].color
                         : theme.colors.shades['white'].color }, void 0)) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
 };
@@ -8627,7 +8629,10 @@ var Filters = function (_a) {
                                             });
                                         }, width: "50px", id: "filter[".concat(calculatedSectionIndex, ",").concat(itemIndex, "]") }, item.label));
                                 }), filter.type === 'color' &&
-                                filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckboxColor, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck, color: item.value || '' }, "".concat(item.checked, "-").concat(item.label))); }), !filter.type &&
+                                filter.items.map(function (item, itemIndex) {
+                                    var _a;
+                                    return (jsx$1(FilterCheckboxColor, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck, color: (_a = item.value) !== null && _a !== void 0 ? _a : '', backgroundImage: item.backgroundImage }, "".concat(item.checked, "-").concat(item.label)));
+                                }), !filter.type &&
                                 filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label === '$75 And Above' ? '+$75' : item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck }, "".concat(item.checked, "-").concat(item.label))); })] }), void 0) }), filters.findIndex(function (filt) { return filt.title === filter.title; })));
             }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
 };
@@ -8639,11 +8644,11 @@ var FilterCheckbox = function (_a) {
     return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary", blockUncheck: blockUncheck }, itemIndex));
 };
 var FilterCheckboxColor = function (_a) {
-    var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck, color = _a.color;
+    var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck, color = _a.color, backgroundImage = _a.backgroundImage;
     var onChange = useCallback(function (checked) {
         onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
     }, [onChangeProp, sectionIndex, itemIndex]);
-    return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
+    return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color, backgroundImage: backgroundImage }, itemIndex));
 };
 
 var Wrapper$4 = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n  padding: 12px 58px;\n  display: flex;\n  gap: 1.5em;\n  @media (max-width: 768px) {\n    padding: 0.625rem 1.5rem;\n  }\n"], ["\n  padding: 12px 58px;\n  display: flex;\n  gap: 1.5em;\n  @media (max-width: 768px) {\n    padding: 0.625rem 1.5rem;\n  }\n"])));
@@ -15127,7 +15132,7 @@ var Container$T = newStyled.div(templateObject_6$s || (templateObject_6$s = __ma
 }, visibleStyle, transformStyle);
 var Overlay = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n  ", "\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n  ", "\n"])), visibleStyle);
 var Modal = function (_a) {
-    var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d, _e = _a.countryRedirModalWithCoupon, countryRedirModalWithCoupon = _e === void 0 ? false : _e;
+    var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d, _e = _a.countryRedirModalWithCoupon, countryRedirModalWithCoupon = _e === void 0 ? false : _e, className = _a.className;
     var _f = useModal(id), opened = _f.opened, close = _f.close;
     var onDismiss = function () {
         if (!dismissable) {
@@ -15135,7 +15140,7 @@ var Modal = function (_a) {
         }
         close();
     };
-    return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$T, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop, countryRedirModalWithCoupon: countryRedirModalWithCoupon }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
+    return (jsxs(Portal, __assign$1({ id: id, className: className }, { children: [jsx(Container$T, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop, countryRedirModalWithCoupon: countryRedirModalWithCoupon }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
                     onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
                     onDismiss();
                 } }, void 0)] }), void 0));