change(header): Add search popup customizations from eea-website-theme

src/ui/Header/Header.jsx

@@ -131,6 +131,7 @@ const Main = ({
   menuItems,
   renderMenuItem,
   renderGlobalMenuItem,
+  headerSearchBox,
   pathname,
   transparency,
   inverted,
@@ -321,6 +322,7 @@ const Main = ({
           onClose={searchOnClick}
           searchInputRef={searchInputRef}
           triggerRefs={[searchButtonRef]}
+          headerSearchBox={headerSearchBox}
         />
       )}
       <HeaderMenuPopUp

src/ui/Header/Header.stories.js

@@ -1245,6 +1245,30 @@ const menuItems = [
   },
 ];
 
+const headerSearchBox = [
+  {
+    isDefault: true,
+    path: '/en/advanced-search',
+    placeholder: 'Search or ask your question...',
+    description: 'For more search options',
+    buttonTitle: 'Go to advanced search',
+    searchSuggestions: {
+      maxToShow: 6,
+      suggestionsTitle: 'Try our suggestions',
+      suggestions: [
+        'What is PFAS?',
+        'Which transport mode has the lowest pollution?',
+        'Which countries use most renewable energy?',
+        'How many premature deaths are attributed to PM2.5?',
+        'How many premature deaths are attributed to air pollution?',
+        'How much have new cars co2 emissions decreased?',
+        'What countries had the highest land take in the EEA-39?',
+        'How many people are exposed to air pollution?',
+      ],
+    },
+  },
+];
+
 const debounce = (func) => {
   let timer;
   return (event) => {
@@ -1394,6 +1418,7 @@ const Template = (args) => {
           pathname={pathname}
           logo={<Logo {...logoProps} inverted={args.inverted} />}
           menuItems={menuItems}
+          headerSearchBox={headerSearchBox}
           renderMenuItem={(item, options = {}, props) => {
             const { onClick } = options;
             return (

src/ui/Header/HeaderSearchPopUp.js

@@ -1,43 +1,132 @@
-import React from 'react';
-import { Container, Input } from 'semantic-ui-react';
-
+import React, { useEffect } from 'react';
+import { Container, Input, List } from 'semantic-ui-react';
+import { withRouter, Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
-function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
+const getRandomItems = (arr, max) => {
+  return (
+    arr?.slice(0, max).map(function () {
+      return this.splice(Math.floor(Math.random() * this.length), 1)[0];
+    }, arr.slice()) || []
+  );
+};
+
+function HeaderSearchPopUp({
+  history,
+  location,
+  onClose,
+  searchInputRef,
+  headerSearchBox,
+  triggerRefs = [],
+}) {
   const nodeRef = React.useRef();
+  const headerSearchViews = headerSearchBox || [];
+  const defaultView = headerSearchViews.filter((v) => v.isDefault);
+  const localView = headerSearchViews.filter((v) =>
+    location.pathname.includes(v.path),
+  );
+  const activeView = localView.length > 0 ? localView[0] : defaultView[0];
+
+  const {
+    path = '',
+    buttonTitle,
+    description,
+    placeholder = 'Search',
+    searchSuggestions,
+  } = activeView || {};
+  const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};
+
+  const [text, setText] = React.useState('');
+  const [visibleSuggestions, setVisibileSuggestions] = React.useState(
+    getRandomItems(suggestions, maxToShow),
+  );
+
+  useEffect(() => {
+    setVisibileSuggestions(getRandomItems(suggestions, maxToShow));
+  }, [maxToShow, suggestions]);
 
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 
+  const onChangeText = (event, { value }) => {
+    setText(value);
+    event.preventDefault();
+  };
+
+  const onSubmit = (event) => {
+    history.push(`${path}?q=${text}`);
+
+    if (window?.searchContext?.resetSearch) {
+      window.searchContext.resetSearch({ searchTerm: text });
+    }
+
+    onClose();
+    event.preventDefault();
+  };
+
+  const onClickHandler = (suggestion) => {
+    if (window?.searchContext?.resetSearch) {
+      window.searchContext.resetSearch({ searchTerm: suggestion });
+    }
+
+    onClose();
+  };
+
   return (
     <div id="search-box" ref={nodeRef}>
       <div className="wrapper">
         <Container>
-          <form>
+          <form method="get" onSubmit={onSubmit}>
             <Input
               ref={searchInputRef}
               className="search"
-              icon={{ className: 'ri-search-line', link: true }}
-              placeholder="Search..."
+              onChange={onChangeText}
+              icon={{
+                className: 'ri-search-line',
+                link: true,
+                onClick: onSubmit,
+              }}
+              placeholder={placeholder}
               fluid
             />
           </form>
-        </Container>
+          {searchSuggestions && suggestions.length > 0 && (
+            <div className="search-suggestions">
+              {suggestionsTitle && <h4>{suggestionsTitle}</h4>}
 
-        <div className="advanced-search">
-          <Container>
-            <div>For more search options</div>
-            <a
-              href="/"
-              className="ui button white inverted"
-              title="Advanced search"
-            >
-              Go to advanced search
-            </a>
-          </Container>
-        </div>
+              <List>
+                {visibleSuggestions.map((item, i) => {
+                  return (
+                    <List.Item key={i}>
+                      <Link
+                        to={`${path}?q=${item}`}
+                        onClick={() => onClickHandler(item)}
+                      >
+                        {item}
+                      </Link>
+                    </List.Item>
+                  );
+                })}
+              </List>
+            </div>
+          )}
+        </Container>
+        {buttonTitle && (
+          <div className="advanced-search">
+            <Container>
+              <div>{description}</div>
+              <a
+                href={defaultView[0].path}
+                className="ui button white inverted"
+                title="Advanced search"
+              >
+                {buttonTitle}
+              </a>
+            </Container>
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
-export default HeaderSearchPopUp;
+export default withRouter(HeaderSearchPopUp);