@trafilea/afrodita-components 5.0.0-beta.100 → 5.0.0-beta.102

package/build/index.d.ts

@@ -241,6 +241,8 @@ declare const CircleSolidQuestion: ({ height, width, fill }: IconProps) => JSX.E
 
 declare const CircleSolidWarning: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const CircleSolidStyledCheck: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const Actions_Check: typeof Check;
 declare const Actions_ClearLight: typeof ClearLight;
 declare const Actions_LightExclamation: typeof LightExclamation;
@@ -279,6 +281,7 @@ declare const Actions_CircleSolidMinus: typeof CircleSolidMinus;
 declare const Actions_CircleSolidPlus: typeof CircleSolidPlus;
 declare const Actions_CircleSolidQuestion: typeof CircleSolidQuestion;
 declare const Actions_CircleSolidWarning: typeof CircleSolidWarning;
+declare const Actions_CircleSolidStyledCheck: typeof CircleSolidStyledCheck;
 declare namespace Actions {
   export {
     Actions_Check as Check,
@@ -320,6 +323,7 @@ declare namespace Actions {
     Actions_CircleSolidPlus as CircleSolidPlus,
     Actions_CircleSolidQuestion as CircleSolidQuestion,
     Actions_CircleSolidWarning as CircleSolidWarning,
+    Actions_CircleSolidStyledCheck as CircleSolidStyledCheck,
   };
 }
 
@@ -1047,8 +1051,9 @@ interface ProductGalleryProps {
     previewListDataTestId?: string;
     thumbnailPosition?: 'vertical' | 'horizontal';
     borderRadiusVariant?: boolean;
+    previewImgBorderColor?: string;
 }
-declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, }: ProductGalleryProps) => JSX.Element;
+declare const ProductGallery: ({ images, selectedValue, topTag, bottomTag, productImageDataTestId, previewListDataTestId, thumbnailPosition, borderRadiusVariant, previewImgBorderColor, }: ProductGalleryProps) => JSX.Element;
 
 interface RatingProps {
     rating: number;
@@ -2095,8 +2100,12 @@ interface SearchBarProps {
     initialTerm?: string;
     shouldClear?: boolean;
     isBlogSearchBar?: boolean;
+    ariaLabel?: string;
+    placeholder?: string;
+    id?: string;
+    autoComplete?: string;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, isBlogSearchBar, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, isBlogSearchBar, ariaLabel, placeholder, id, autoComplete, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];

package/build/index.esm.js

@@ -286,6 +286,11 @@ var CircleSolidWarning = function (_a) {
     return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, title: "circle solid warning" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 1C9.50659 1 1 9.50659 1 20C1 30.4934 9.50659 39 20 39C30.4934 39 39 30.4934 39 20C39 9.50659 30.4934 1 20 1ZM21.7209 10.625C21.7293 10.295 21.4986 10 21.1827 10H18.8239C18.508 10 18.2773 10.295 18.2858 10.625L18.2858 10.627L18.7841 22.6135C18.7931 22.9268 19.0249 23.1997 19.3223 23.1997H20.6844C20.9802 23.1997 21.2136 22.9361 21.2225 22.6134L21.7209 10.625ZM22 27.8818C22 26.6127 21.1026 25.7635 20 25.7635C18.8974 25.7635 18 26.6127 18 27.8818C18 29.1509 18.8974 30 20 30C21.1026 30 22 29.1509 22 27.8818Z", fill: fill }, void 0) }), void 0));
 };
 
+var CircleSolidStyledCheck = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsxs$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 22, viewBoxY: 22, title: "circle solid styled check" }, { children: [jsx$1("circle", { cx: "11", cy: "11.0005", r: "11", fill: fill }, void 0), jsx$1("path", { d: "M5.86719 12.8697C5.86719 12.8697 7.89031 15.1872 8.29423 16.1339H10.0329C10.7617 13.8699 13.5926 8.46654 16.02 6.5725C16.5223 5.91494 15.2596 5.64334 14.2401 6.07897C12.7035 6.73474 9.80578 11.7468 9.26487 12.9519C8.49742 13.1573 7.68712 11.635 7.68712 11.635L5.86719 12.8697Z", fill: "white" }, void 0)] }), void 0));
+};
+
 var Actions = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Check: Check$1,
@@ -324,7 +329,8 @@ var Actions = /*#__PURE__*/Object.freeze({
     CircleSolidMinus: CircleSolidMinus,
     CircleSolidPlus: CircleSolidPlus,
     CircleSolidQuestion: CircleSolidQuestion,
-    CircleSolidWarning: CircleSolidWarning
+    CircleSolidWarning: CircleSolidWarning,
+    CircleSolidStyledCheck: CircleSolidStyledCheck
 });
 
 var FitPredictor$1 = function (_a) {
@@ -5249,13 +5255,15 @@ var Image$2 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __make
     return borderRadiusVariant &&
         "\nborder-radius: 20px;\n";
 }, function (_a) {
-    var selected = _a.selected, theme = _a.theme;
-    return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
+    var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
+    return selected
+        ? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
+        : 'inherit';
 });
 var ImageSmallPreview = function (_a) {
-    var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant;
+    var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
     var theme = useTheme();
-    return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant }, void 0));
+    return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
 };
 var templateObject_1$14;
 
@@ -9574,12 +9582,12 @@ var Container$I = newStyled.div(templateObject_3$w || (templateObject_3$w = __ma
 });
 var Button$3 = newStyled.button(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"])));
 var ImagePreviewList = function (_a) {
-    var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant;
+    var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
     return (jsx$1(Container$I, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
                     arrowWidth: 0.75,
                     arrowHeight: 1.25,
                     arrowPadding: 1.625,
-                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant }, void 0) }), item.key)); })) }), void 0));
+                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
 };
 var templateObject_1$12, templateObject_2$H, templateObject_3$w, templateObject_4$l;
 
@@ -11185,7 +11193,7 @@ var templateObject_1$11, templateObject_2$G, templateObject_3$v;
 
 var Container$G = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"])));
 var ProductGallery = function (_a) {
-    var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
+    var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor;
     var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
     var _c = useState(initialValue), selectedImage = _c[0], setSelectedImage = _c[1];
     useEffect(function () {
@@ -11193,7 +11201,7 @@ var ProductGallery = function (_a) {
     }, [initialValue]);
     return (jsxs$1(Container$G, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
                     setSelectedImage(value);
-                }, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
+                }, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant }, void 0)] }, void 0));
 };
 var templateObject_1$10;
 
@@ -12975,12 +12983,12 @@ var Container$f = newStyled.div({
     display: 'flex',
 });
 var SearchBar = function (_a) {
-    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, onClose = _a.onClose, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm, _b = _a.shouldClear, shouldClear = _b === void 0 ? false : _b, _c = _a.isBlogSearchBar, isBlogSearchBar = _c === void 0 ? false : _c;
+    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, onClose = _a.onClose, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm, _b = _a.shouldClear, shouldClear = _b === void 0 ? false : _b, _c = _a.isBlogSearchBar, isBlogSearchBar = _c === void 0 ? false : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? 'Search for products' : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Search for products' : _e, _f = _a.id, id = _f === void 0 ? 'search' : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g;
     var theme = useTheme();
     if (initialTerm) {
         initialState$1.term = initialTerm;
     }
-    var _d = useReducer(reducer, initialState$1), state = _d[0], dispatch = _d[1];
+    var _h = useReducer(reducer, initialState$1), state = _h[0], dispatch = _h[1];
     var ref = useRef(null);
     var shouldDisplaySuggestion = function () {
         return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
@@ -13006,7 +13014,7 @@ var SearchBar = function (_a) {
             onClose();
         }
     };
-    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$f, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products", onKeyDown: function (e) {
+    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$f, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
                             if (e.key === 'Enter') {
                                 e.preventDefault();
                                 e.stopPropagation();