@trafilea/afrodita-components 6.5.4 → 6.5.6

package/build/index.d.ts

@@ -2295,8 +2295,9 @@ interface ColorPickerProps {
     label: string;
     onChange: (color: ColorPickerOption) => void;
     inline?: boolean;
+    showCross?: boolean;
 }
-declare const SingleColorPicker: ({ options, selectedValue, label, onChange, inline, }: ColorPickerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SingleColorPicker: ({ options, selectedValue, label, onChange, inline, showCross, }: ColorPickerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface CrossSellCheckboxProps extends rightToLeftProps {
     imageURL: string;

package/build/index.esm.js

@@ -6335,10 +6335,10 @@ var Collection = {
 };
 
 var OneColorSelector = function (_a) {
-    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
     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, 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));
+    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 ? (showCross ? 1 : 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), showCross && noStock && (jsxs$1(Fragment$2, { children: [jsx$1("line", { x1: "10", y1: "10", x2: "22", y2: "22", stroke: "#9E9E9E", strokeWidth: "1" }, void 0), jsx$1("line", { x1: "10", y1: "22", x2: "22", y2: "10", stroke: "#9E9E9E", strokeWidth: "1" }, void 0)] }, void 0))] }), void 0));
 };
 
 var ThreeColorSelector = function (_a) {
@@ -6356,7 +6356,7 @@ var TwoColorSelector = function (_a) {
 };
 
 var ColorSelector = function (_a) {
-    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
     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, noStock: noStock }, void 0));
@@ -6364,7 +6364,7 @@ var ColorSelector = function (_a) {
     if (secondaryColor) {
         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, noStock: noStock }, void 0));
+    return (jsx$1(OneColorSelector, { color: primaryColor, selected: selected, testId: testId, noStock: noStock, showCross: showCross }, void 0));
 };
 
 var OutOfStock = function (_a) {
@@ -6449,14 +6449,15 @@ var MultiColorPicker = function (_a) {
     return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions$1(selectedColor, options) }, void 0)] }), void 0));
 };
 
-var renderOptions = function (options) {
+var renderOptions = function (options, showCross) {
+    if (showCross === void 0) { showCross = false; }
     if (options.length === 0) {
         return jsx(OutOfStock, { title: "out of stock color" }, void 0);
     }
     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"), noStock: option.noStock }, void 0));
+                return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
             }
             if (option.meta.pattern) {
                 return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
@@ -6465,8 +6466,8 @@ var renderOptions = function (options) {
         } }), option.label)); });
 };
 var SingleColorPicker = function (_a) {
-    var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
-    return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options) }), void 0)] }), void 0));
+    var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
+    return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
 };
 
 var Wrapper$5 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });