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

package/build/index.d.ts

@@ -105,12 +105,14 @@ declare type Filter = {
     link?: string;
     color?: string;
     isMultiselect: boolean;
+    type?: string;
     items: Array<{
         label: string;
         checked?: boolean;
         isLinkItem?: boolean;
         link?: string;
         blockUncheck?: boolean;
+        value?: string;
     }>;
     showInMobile: boolean;
 };
@@ -1011,6 +1013,7 @@ interface BaseButtonProps {
     inline?: boolean;
     uppercase?: boolean;
     testId?: string;
+    id?: string;
 }
 
 declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
@@ -1776,9 +1779,9 @@ interface CheckboxProps {
     blockUncheck?: boolean;
     id: string;
     backgroundColor?: string;
-    variant: 'primary' | 'secondary';
+    variant: 'primary' | 'secondary' | 'color';
 }
-declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, blockUncheck, }: CheckboxProps) => JSX.Element;
+declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, blockUncheck, backgroundColor, }: CheckboxProps) => JSX.Element;
 
 interface RadioGroupInputProps {
     name: string;

package/build/index.esm.js

@@ -4232,7 +4232,7 @@ function jsxs(type, props, key) {
 }
 
 var BaseButton = function (_a) {
-    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, _d = _a.testId, testId = _d === void 0 ? 'base-button' : _d;
+    var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, _d = _a.testId, testId = _d === void 0 ? 'base-button' : _d, id = _a.id;
     return (jsxs("button", __assign$1({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
             display: inline ? 'inline-flex' : 'flex',
             justifyContent: 'center',
@@ -4242,7 +4242,7 @@ var BaseButton = function (_a) {
             textTransform: uppercase ? 'uppercase' : 'unset',
             boxSizing: 'border-box',
             cursor: 'pointer',
-        } }, { children: [renderLeading, children, renderTrailing] }), void 0));
+        }, id: id }, { children: [renderLeading, children, renderTrailing] }), void 0));
 };
 
 var getStylesBySize$a = function (size, theme) {
@@ -4582,19 +4582,31 @@ var CustomCheckboxStyles = {
                     : theme.component.checkbox.borderColor,
         });
     },
+    color: function () {
+        return css({
+            borderRadius: '50%',
+            border: 'none',
+        });
+    },
 };
 
 var Container$U = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
 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' ||
+        props.text === 'Latte' ||
+        props.text === 'Sand'
+        ? "\n      svg {\n        path {\n          fill: var(--colors-shades-black-color);\n        }\n      }"
+        : '', "\n  ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
 ]; });
 var Input$3 = newStyled.input(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"], ["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     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, text = _a.text, _d = _a.checked, checked = _d === void 0 ? false : _d, id = _a.id, variant = _a.variant, blockUncheck = _a.blockUncheck;
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, text = _a.text, _d = _a.checked, checked = _d === void 0 ? false : _d, id = _a.id, variant = _a.variant, blockUncheck = _a.blockUncheck, backgroundColor = _a.backgroundColor;
     var theme = useTheme();
     var _e = useState(checked), isChecked = _e[0], setIsChecked = _e[1];
     var mounted = useRef(false);
@@ -4618,7 +4630,7 @@ var Checkbox = function (_a) {
     useEffect(function () {
         mounted.current = true;
     }, []);
-    return (jsxs$1(Container$U, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
+    return (jsxs$1(Container$U, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
 };
 var templateObject_1$1m, templateObject_2$U;
 
@@ -4727,7 +4739,7 @@ var getStylesBySize$9 = function (size, theme) {
     }
 };
 var SimpleSelector = function (_a) {
-    var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
+    var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick, id = _a.id;
     var theme = useTheme();
     var stylesBySize = getStylesBySize$9(size, theme);
     var activeStyles = active
@@ -4738,11 +4750,11 @@ var SimpleSelector = function (_a) {
             }, '&:disabled': {
                 color: theme.colors.shades['250'].color,
                 cursor: 'not-allowed',
-            } }) }, { children: text }), void 0));
+            } }), id: id }, { children: text }), void 0));
 };
 
 var SelectorSecondary = function (_a) {
-    var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick, showNoStockStyles = _a.showNoStockStyles;
+    var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick, showNoStockStyles = _a.showNoStockStyles, id = _a.id;
     var theme = useTheme();
     var stylesByActive = active
         ? {
@@ -4772,7 +4784,7 @@ var SelectorSecondary = function (_a) {
                 border: theme.component.selector.disabled.border,
                 background: theme.colors.background.disabled,
                 color: theme.colors.text.disabled,
-            } }) }, void 0));
+            } }), id: id }, void 0));
 };
 
 // This defines which HTML tag to render for each `variant`, it also defines
@@ -17408,7 +17420,7 @@ var Accordion = function (_a) {
 };
 var templateObject_1$i, templateObject_2$d, templateObject_3$d, templateObject_4$7;
 
-var SectionContent = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 1.125rem;\n  margin: 1.25rem 0;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 1.125rem;\n  margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
+var SectionContent = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 10px;\n  margin: 1.25rem 0;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-gap: 10px;\n  margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
 var Header = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1.063rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1.063rem;\n"])));
 var MobileHeader = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 2.25rem;\n  margin-top: 1.063rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 2.25rem;\n  margin-top: 1.063rem;\n"])));
 var MobileIconsContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  width: 1.5rem;\n  height: 1.5rem;\n  cursor: pointer;\n"], ["\n  width: 1.5rem;\n  height: 1.5rem;\n  cursor: pointer;\n"])));
@@ -17506,7 +17518,19 @@ var Filters = function (_a) {
                 .filter(function (filter) { return filter.isLinkOption; })
                 .map(function (option, index) { return (jsx$1(OptionContainer, __assign$1({ showInMobile: option.showInMobile, "data-testid": "linkOption" }, { children: jsx$1(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }), index)); }), filters
                 .filter(function (filter) { return !filter.isLinkOption; })
-                .map(function (filter) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault, showInMobile: filter.showInMobile }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: 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));
+                .map(function (filter) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault, showInMobile: filter.showInMobile }, { children: jsxs$1(SectionContent, __assign$1({ cols: filter.columns }, { children: [filter.type === 'size' &&
+                            filter.items.map(function (item, itemIndex) {
+                                var calculatedSectionIndex = filters.findIndex(function (filt) { return filt.title === filter.title; });
+                                return (jsx$1(SelectorSecondary, { size: ComponentSize.Medium, text: item.label, active: item.checked, disabled: item.blockUncheck, onClick: function () {
+                                        return handleCheckboxClick({
+                                            sectionIndex: calculatedSectionIndex,
+                                            itemIndex: itemIndex,
+                                            checked: !item.checked,
+                                        });
+                                    }, 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) { 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));
 };
 var FilterCheckbox = function (_a) {
     var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck;
@@ -17514,6 +17538,13 @@ var FilterCheckbox = function (_a) {
         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.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 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));
 };
 
 var Container$d = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"])));