@trafilea/afrodita-components 5.0.0-beta.124 → 5.0.0-beta.126

package/build/index.d.ts

@@ -59,6 +59,7 @@ declare type SizeOption = {
     label: string;
     description: string;
     disabled?: boolean;
+    noStock?: boolean;
 };
 declare type Pattern = {
     url: string;
@@ -66,6 +67,7 @@ declare type Pattern = {
 declare type ColorPickerOption = {
     label: string;
     description: string;
+    noStock?: boolean;
     meta: {
         color?: string[];
         pattern?: Pattern;
@@ -1321,6 +1323,12 @@ declare type ThemeComponent = {
             border: string;
             color: string;
         };
+        noStock: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
         disabled: {
             border: string;
         };
@@ -1519,6 +1527,7 @@ declare type ThemeComponent = {
         options: {
             borderColor: string;
             color: string;
+            borderRadius: string;
         };
     };
     modal: {

package/build/index.esm.js

@@ -4415,7 +4415,7 @@ var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
         alignItems: 'flex-start',
         border: "0.063rem solid ".concat(theme.component.dropdown.options.borderColor),
         boxSizing: 'border-box',
-        borderRadius: theme.component.dropdown.borderRadius,
+        borderRadius: theme.component.dropdown.options.borderRadius,
         background: theme.colors.shades.white.color,
         padding: 0,
         marginTop: '0.125rem',
@@ -4722,7 +4722,7 @@ var SimpleSelector = function (_a) {
 };
 
 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;
+    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 theme = useTheme();
     var stylesByActive = active
         ? {
@@ -4737,6 +4737,14 @@ var SelectorSecondary = function (_a) {
             border: theme.component.selector.default.border,
             fontWeight: theme.component.selector.default.fontWeight,
         };
+    if (!active && showNoStockStyles) {
+        stylesByActive = {
+            background: theme.component.selector.noStock.background,
+            color: theme.component.selector.noStock.color,
+            border: theme.component.selector.noStock.border,
+            fontWeight: theme.component.selector.noStock.fontWeight,
+        };
+    }
     return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, width: width, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
                 background: theme.component.selector.hover.background,
                 color: theme.component.selector.hover.color,
@@ -4891,7 +4899,7 @@ var SizeSelector = function (_a) {
                             padding: '0.75rem 1rem 0.625rem',
                             margin: '0 0.5rem 0.625rem 0',
                             minWidth: '4rem',
-                        }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
+                        }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
                 }) }), void 0)] }), void 0));
 };
 var templateObject_1$1e;
@@ -5133,36 +5141,36 @@ var PriceLabelV2 = function (_a) {
 var templateObject_1$19;
 
 var OneColorSelector = function (_a) {
-    var color = _a.color, selected = _a.selected, testId = _a.testId;
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
     var theme = useTheme();
     var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
-    return (jsxs$1("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+    return (jsxs$1("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
 };
 
 var ThreeColorSelector = function (_a) {
-    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
+    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
     var theme = useTheme();
     var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
-    return (jsxs$1("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("mask", __assign$1({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign$1({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsx$1("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsx$1("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+    return (jsxs$1("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsx$1("mask", __assign$1({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign$1({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsx$1("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsx$1("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
 };
 
 var TwoColorSelector = function (_a) {
-    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId;
+    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
     var theme = useTheme();
     var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
-    return (jsxs$1("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("mask", __assign$1({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign$1({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsx$1("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+    return (jsxs$1("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsx$1("mask", __assign$1({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign$1({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsx$1("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
 };
 
 var ColorSelector = function (_a) {
-    var color = _a.color, selected = _a.selected, testId = _a.testId;
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
     var primaryColor = color[0], secondaryColor = color[1], tertiaryColor = color[2];
     if (tertiaryColor) {
-        return (jsx$1(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId }, void 0));
+        return (jsx$1(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
     }
     if (secondaryColor) {
-        return (jsx$1(TwoColorSelector, { secondaryColor: secondaryColor, primaryColor: primaryColor, selected: selected, testId: testId }, void 0));
+        return (jsx$1(TwoColorSelector, { secondaryColor: secondaryColor, primaryColor: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
     }
-    return jsx$1(OneColorSelector, { color: primaryColor, selected: selected, testId: testId }, void 0);
+    return (jsx$1(OneColorSelector, { color: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
 };
 
 var OutOfStock = function (_a) {
@@ -5195,16 +5203,19 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
 });
 var templateObject_1$18, templateObject_2$K, templateObject_3$y, templateObject_4$n, templateObject_5$e;
 
-var Container$L = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"])), function (_a) {
+var Container$L = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n  opacity: ", ";\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n  opacity: ", ";\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
+}, function (_a) {
+    var noStock = _a.noStock;
+    return (noStock ? '0.4' : '1');
 });
 var Image$3 = newStyled.img(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
 var PatternSelector = function (_a) {
-    var url = _a.url, selected = _a.selected, testId = _a.testId;
+    var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
     var theme = useTheme();
     var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
-    return (jsx$1(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
+    return (jsx$1(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
 };
 var templateObject_1$17, templateObject_2$J;
 
@@ -5215,10 +5226,10 @@ var renderOptions$1 = function (options) {
     return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
             var checked = _a.checked;
             if (option.meta.color) {
-                return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector") }, void 0));
+                return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock }, void 0));
             }
             if (option.meta.pattern) {
-                return jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked }, void 0);
+                return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
             }
             return null;
         } }), option.label)); });