@trafilea/afrodita-components 5.0.0-beta.8 → 5.0.0-beta.9

package/build/index.d.ts

@@ -416,6 +416,15 @@ declare namespace SlideDots {
   };
 }
 
+declare const Thinking: ({ height, width }: IconProps$1) => JSX.Element;
+
+declare const Emoji_Thinking: typeof Thinking;
+declare namespace Emoji {
+  export {
+    Emoji_Thinking as Thinking,
+  };
+}
+
 declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
 declare const Icon: {
     Custom: typeof Custom;
@@ -429,6 +438,7 @@ declare const Icon: {
     Download: typeof Download;
     Payment: typeof Payment;
     SlideDots: typeof SlideDots;
+    Emoji: typeof Emoji;
 };
 
 interface CardBodyProps {
@@ -1566,8 +1576,9 @@ interface SearchBarProps {
     onChange: (text: string) => void;
     onSearch: (term: string) => void;
     resultsPanelDataTestId?: string;
+    allResults?: number;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, allResults, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];

package/build/index.esm.js

@@ -447,6 +447,16 @@ var SlideDots$1 = /*#__PURE__*/Object.freeze({
     SlideDot: SlideDot
 });
 
+var Thinking = function (_a) {
+    var height = _a.height, width = _a.width;
+    return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 36, viewBoxY: 36, fill: "none" }, { children: [jsx$1("path", { d: "M18.1177 34.1177C26.9542 34.1177 34.1177 26.9542 34.1177 18.1177C34.1177 9.28112 26.9542 2.11768 18.1177 2.11768C9.28112 2.11768 2.11768 9.28112 2.11767 18.1177C2.11767 26.9542 9.28112 34.1177 18.1177 34.1177Z", fill: "#D1D1D1" }, void 0), jsx$1("path", { d: "M33.8824 18.0157C33.8858 15.627 33.3399 13.2685 32.2858 11.1177C31.749 16.3687 30.9035 21.0215 25.9749 25.7664C21.085 30.4741 13.7607 30.4384 4.76477 26.5069C7.6498 30.7724 12.1983 33.8824 17.7887 33.8824C22.057 33.8824 26.1505 32.2107 29.1687 29.2351C32.1868 26.2596 33.8824 22.2238 33.8824 18.0157Z", fill: "#BBBBBB" }, void 0), jsx$1("path", { d: "M18 34C26.8366 34 34 26.8366 34 18C34 9.16345 26.8366 2 18 2C9.16344 2 2 9.16344 2 18C2 26.8366 9.16344 34 18 34Z", stroke: "#292929", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M4.82728 27.412L4.82637 27.4132L4.40553 27.9299C4.40553 27.9299 4.40552 27.9299 4.40552 27.9299C3.81861 28.6494 3.5 29.5474 3.5 30.4704V32.3339C3.5 34.0936 4.9458 35.5 6.70703 35.5H11.2297C11.9963 35.5 12.632 34.8847 12.632 34.1113C12.632 33.8823 12.5763 33.6672 12.478 33.4779C12.8437 33.2285 13.0859 32.8113 13.0859 32.3339C13.0859 32.105 13.0302 31.8899 12.9319 31.7005C13.2976 31.4511 13.5398 31.034 13.5398 30.5566C13.5398 30.4213 13.5204 30.291 13.4843 30.1679H17.0977C17.8642 30.1679 18.5 29.5526 18.5 28.7792C18.5 28.0057 17.8642 27.3905 17.0977 27.3905H8.97109C8.4908 27.3905 8.11484 27.0093 8.11484 26.5548V23.8887C8.11484 23.1153 7.47908 22.5 6.7125 22.5C5.94592 22.5 5.31016 23.1153 5.31016 23.8887V26.0592C5.31016 26.553 5.14192 27.028 4.82728 27.412Z", fill: "#E5E5E5", stroke: "#292929" }, void 0), jsx$1("path", { d: "M20.3556 25C20.2562 25 20.163 24.9768 20.0698 24.9362C20.0325 24.9188 16.5164 23.2887 12.6275 23.2016C12.2734 23.1958 11.9939 22.9174 12.0001 22.5867C12.0063 22.256 12.3045 21.9834 12.6586 22.0008C16.8456 22.0878 20.4922 23.7876 20.6475 23.863C20.9644 24.0138 21.0886 24.3735 20.9333 24.6693C20.8153 24.884 20.5916 25 20.3556 25Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M12.4403 10C12.3219 10 12.1981 9.96334 12.0958 9.88478C12.0097 9.82193 10.0989 8.39216 7.80058 9.51293C7.52607 9.6491 7.19236 9.53912 7.0578 9.27202C6.92324 9.00492 7.03089 8.68021 7.30539 8.54404C10.255 7.10902 12.6879 8.95778 12.7902 9.03634C13.0324 9.22488 13.0701 9.56531 12.8763 9.79575C12.7686 9.93192 12.6072 10 12.4403 10Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M21.4989 13C21.2664 13 21.058 12.8167 21.0096 12.5525C20.9563 12.2506 21.1307 11.9595 21.402 11.9002L25.4042 11.0107C25.6755 10.9514 25.9371 11.1454 25.9904 11.4473C26.0437 11.7492 25.8693 12.0404 25.598 12.0997L21.5958 12.9892C21.5668 12.9946 21.5329 13 21.4989 13Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M11.8037 16.0101C11.8037 16.6111 11.3164 17.0983 10.7154 17.0983C10.1144 17.0983 9.6272 16.6111 9.6272 16.0101C9.6272 15.4091 10.1144 14.9219 10.7154 14.9219C11.3164 14.9219 11.8037 15.4091 11.8037 16.0101Z", fill: "#292929", stroke: "#292929" }, void 0), jsx$1("path", { d: "M24.5096 16.0101C24.5096 16.6111 24.0224 17.0983 23.4214 17.0983C22.8203 17.0983 22.3331 16.6111 22.3331 16.0101C22.3331 15.4091 22.8203 14.9219 23.4214 14.9219C24.0224 14.9219 24.5096 15.4091 24.5096 16.0101Z", fill: "#292929", stroke: "#292929" }, void 0)] }), void 0));
+};
+
+var Emoji = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Thinking: Thinking
+});
+
 var Icon = {
     Custom: Custom$1,
     Arrows: Arrows,
@@ -459,6 +469,7 @@ var Icon = {
     Download: Download,
     Payment: Payment,
     SlideDots: SlideDots$1,
+    Emoji: Emoji,
 };
 
 function _extends$1() {
@@ -3602,6 +3613,7 @@ var ButtonPrimary = function (_a) {
             backgroundColor: theme.component.button.primary.active.backgroundColor,
             color: theme.component.button.primary.active.color,
             border: theme.component.button.border,
+            fontFamily: 'inherit',
             '&:hover': {
                 backgroundColor: theme.component.button.primary.hover.backgroundColor,
                 color: theme.component.button.primary.hover.color,
@@ -4241,7 +4253,7 @@ var TextButton = function (_a) {
 };
 var templateObject_1$11;
 
-var Container$E = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
+var Container$E = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
 var P$3 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
 var SizeFitGuide = function (_a) {
@@ -10459,7 +10471,7 @@ var Description$1 = newStyled.div({
 var ProductItem = function (_a) {
     var src = _a.src, title = _a.title, price = _a.price;
     var theme = useTheme();
-    return (jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
+    return (jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
 };
 var templateObject_1$g;
 
@@ -10490,10 +10502,11 @@ var Button$2 = newStyled.button({
     cursor: 'pointer',
     padding: 0,
 });
-var Container$8 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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  border-radius: 0.5rem;\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  border-radius: 0.5rem;\n  ", ",\n"])), function (props) {
+var Container$8 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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"])), function (props) {
     return mediaQueries(props)({
         border: ['none', "0.063rem solid ".concat(props.theme.colors.pallete.secondary.color)],
         marginTop: ['1.25rem', '0.125rem'],
+        borderRadius: ['0', '0.5rem'],
     });
 });
 var Header$1 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  ", ",\n"], ["\n  ", ",\n"])), function (props) {
@@ -10540,6 +10553,7 @@ var Input = newStyled.input(function (props) { return ({
 var Button$1 = newStyled.button(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"], ["\n  position: absolute;\n  right: 1rem;\n  background: white;\n  border: none;\n  align-self: center;\n  padding: 0;\n  ", ",\n"])), function (props) {
     return mediaQueries(props)({
         right: ['1rem', '-3.75rem'],
+        top: ['0.75rem', '0'],
     });
 });
 var ClearButton = function (_a) {
@@ -10626,7 +10640,7 @@ var reducer = function (state, action) {
             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, open: false });
+            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 });
@@ -10641,10 +10655,13 @@ var Container$7 = newStyled.div({
     display: 'flex',
 });
 var SearchBar = function (_a) {
-    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId;
+    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults;
     var theme = useTheme();
     var _b = useReducer(reducer, initialState$1), state = _b[0], dispatch = _b[1];
     var ref = useRef(null);
+    var shouldDisplaySuggestion = function () {
+        return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
+    };
     useOnClickOutside(ref, function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: false } }); });
     useEffect(function () {
         // Debouncing user input
@@ -10653,8 +10670,12 @@ var SearchBar = function (_a) {
         }, 500);
         return function () { return clearTimeout(id); };
     }, [onChange, state.term]);
-    var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
-    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$7, __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 && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (".concat(resultOptions.length, ")") : undefined, onClick: function (value) {
+    var options = resultOptions && resultOptions.length > 0
+        ? resultOptions
+        : 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$7, __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));