@trafilea/afrodita-components 5.0.0-beta.21 → 5.0.0-beta.24

package/build/index.d.ts

@@ -115,6 +115,7 @@ interface SearchBarOptionItem {
     src: string;
     price: string;
     title: string;
+    optionUrl: string;
 }
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
@@ -1586,11 +1587,12 @@ interface SearchBarProps {
     resultOptions: SearchBarOptionItem[];
     onChange: (text: string) => void;
     onSearch: (term: string) => void;
+    onClose: () => void;
     resultsPanelDataTestId?: string;
     allResults?: number;
     initialTerm?: string;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, allResults, initialTerm, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];

package/build/index.esm.js

@@ -3607,9 +3607,9 @@ var BaseCTA = function (_a) {
 };
 
 var ButtonPrimary = function (_a) {
-    _a.testId; var props = __rest(_a, ["testId"]);
+    var _b = _a.testId, testId = _b === void 0 ? 'button-primary' : _b, props = __rest(_a, ["testId"]);
     var theme = useTheme();
-    return (jsx(BaseCTA, __assign$1({}, props, { css: {
+    return (jsx(BaseCTA, __assign$1({}, props, { testId: testId, css: {
             backgroundColor: theme.component.button.primary.active.backgroundColor,
             color: theme.component.button.primary.active.color,
             border: theme.component.button.border,
@@ -4537,11 +4537,11 @@ var ImageSmallPreview = function (_a) {
 var templateObject_1$Y;
 
 var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  grid-row-gap: 20px;\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  overflow: auto;\n  align-items: flex-start;\n"], ["\n  grid-row-gap: 20px;\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  overflow: auto;\n  align-items: flex-start;\n"])));
-var Button$5 = newStyled.button(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
+var Button$4 = newStyled.button(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
 var ImagePreviewList = function (_a) {
     var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
     return (jsx$1(Container$B, __assign$1({ "data-testid": testId }, { children: images.map(function (item) {
-            return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
+            return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
         }) }), void 0));
 };
 var templateObject_1$X, templateObject_2$B;
@@ -5461,7 +5461,7 @@ var BaseInput = function (_a) {
                 : '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size }, { children: [jsx$1(StyledInput, __assign$1({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: internalValue }, rest, styling), void 0), children] }), void 0), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
 };
 
-var Button$4 = function (_a) {
+var Button$3 = function (_a) {
     var variant = _a.variant, props = __rest(_a, ["variant"]);
     if (variant === 'primary') {
         return jsx$1(ButtonPrimary, __assign$1({}, props), void 0);
@@ -5492,7 +5492,7 @@ var Custom = function (_a) {
         text: text,
         disabled: rest.disabled,
     }); }, [variant, onClick, text, rest.disabled]);
-    return (jsx$1(Container$o, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
+    return (jsx$1(Container$o, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
 };
 var templateObject_1$G, templateObject_2$r;
 
@@ -5849,7 +5849,7 @@ var Review = function (_a) {
 };
 var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$2;
 
-var Button$3 = newStyled.button(function () { return ({
+var Button$2 = newStyled.button(function () { return ({
     background: 'transparent',
     border: 'none',
     cursor: 'pointer',
@@ -5861,7 +5861,7 @@ var Direction;
 })(Direction || (Direction = {}));
 var ArrowButton$1 = function (_a) {
     var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
-    return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsx$1(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsx$1(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
+    return (jsx$1(Button$2, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsx$1(Icon.Arrows.ChevronLeft, { width: width, height: height, opacity: 0.5 }, void 0)) : (jsx$1(Icon.Arrows.ChevronRight, { width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
 };
 
 function _defineProperty(obj, key, value) {
@@ -10462,12 +10462,13 @@ var Li = newStyled.li(templateObject_1$g || (templateObject_1$g = __makeTemplate
     padding: [0, '0rem 1rem'],
     borderRadius: [0, '0.5rem'],
 }));
-var Button$2 = newStyled.button({
+var Anchor = newStyled.a({
     width: '100%',
     border: 'none',
     background: 'transparent',
     cursor: 'pointer',
     padding: 0,
+    textDecoration: 'none',
 });
 var Container$9 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0rem;\n  padding: 0rem;\n  position: absolute;\n  width: 100%;\n  background-color: white;\n  box-sizing: border-box;\n  z-index: 2;\n  ", ",\n"])), mediaQueries({
     border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
@@ -10478,9 +10479,9 @@ var Header$1 = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeT
     margin: ['0rem 0rem 1rem 0rem', '1rem'],
 }));
 var ResultsPanel = function (_a) {
-    var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
+    var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
     var theme = useTheme();
-    return (jsxs$1(Container$9, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$5, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
+    return (jsxs$1(Container$9, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$5, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
 };
 var templateObject_1$g, templateObject_2$8, templateObject_3$8;
 
@@ -10576,11 +10577,11 @@ var SearchIconContainer = newStyled.div({
     alignSelf: 'center',
 });
 var SearchControl = function (_a) {
-    var open = _a.open, onSearch = _a.onSearch, onClear = _a.onClear;
+    var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose;
     var theme = useTheme();
     var isMobile = useWindowDimensions(theme.mediaQueries).isMobile;
     if (isMobile) {
-        return open ? (jsx(ClearButton, { onClick: onClear }, void 0)) : (jsx(SearchIconContainer, { children: jsx(Icon.Navigation.Search, { height: 1.25, width: 1.25 }, void 0) }, void 0));
+        return open ? (jsx(ClearButton, { onClick: onClose }, void 0)) : (jsx(SearchIconContainer, { children: jsx(Icon.Navigation.Search, { height: 1.25, width: 1.25 }, void 0) }, void 0));
     }
     else {
         return (jsxs(Fragment, { children: [jsx(ButtonSecondary, { css: {
@@ -10590,7 +10591,7 @@ var SearchControl = function (_a) {
                         borderTopLeftRadius: 0,
                         borderBottomLeftRadius: 0,
                         padding: '0.875rem 1.5rem',
-                    }, text: "SEARCH", onClick: onSearch }, void 0), jsx(ClearButton, { onClick: onClear }, void 0)] }, void 0));
+                    }, text: "SEARCH", onClick: onSearch }, void 0), jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
     }
 };
 
@@ -10600,15 +10601,9 @@ var reducer = function (state, action) {
         case 'UPDATE_TERM': {
             return __assign$1(__assign$1({}, state), { term: action.payload.term });
         }
-        case 'UPDATE_OPTION': {
-            return __assign$1(__assign$1({}, state), { selectedOption: action.payload.selectedOption, term: action.payload.selectedOption.title.replaceAll(/(<([^>]+)>)/gi, ''), open: false });
-        }
         case 'TOGGLE_PANEL': {
             return __assign$1(__assign$1({}, state), { open: action.payload.open });
         }
-        case 'CLEAR': {
-            return __assign$1(__assign$1({}, state), { term: '', open: false });
-        }
     }
 };
 var Container$8 = newStyled.div({
@@ -10616,7 +10611,7 @@ var Container$8 = newStyled.div({
     display: 'flex',
 });
 var SearchBar = function (_a) {
-    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm;
+    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;
     var theme = useTheme();
     if (initialTerm) {
         initialState$1.term = initialTerm;
@@ -10639,10 +10634,7 @@ var SearchBar = function (_a) {
         : shouldDisplaySuggestion()
             ? suggestions
             : [];
-    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$8, __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" }, void 0), jsx$1(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onClick: function (value) {
-                    onSearch(value.title);
-                    dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
-                }, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
+    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$8, __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" }, void 0), jsx$1(SearchControl, { open: state.open, onClose: onClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
 };
 
 function _extends() {