hds-web 1.15.8 → 1.15.9

package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js

@@ -0,0 +1,126 @@
+import algoliasearch from "algoliasearch/lite";
+import React, { useRef, useState } from "react";
+import { InstantSearch, connectStateResults, Index } from "react-instantsearch-dom";
+import SearchBox from "./searchbox";
+import SearchResults from "./searchresults";
+import { INDEX_TYPES } from "./constants";
+import SearchFooter from "./searchfooter";
+import { Typography } from '../../foundation/Typography'
+
+
+const algoliaClient = algoliasearch(
+  process.env.ALGOLIA_APP_ID,
+  process.env.ALGOLIA_SEARCH_KEY
+);
+
+const searchClient = {
+  ...algoliaClient,
+  search(requests) {
+    if (requests.every(({ params }) => !params.query)) {
+      return Promise.resolve({
+        results: requests.map(() => ({
+          hits: [],
+          nbHits: 0,
+          nbPages: 0,
+          processingTimeMS: 0,
+        })),
+      });
+    }
+
+    return algoliaClient.search(requests);
+  },
+};
+
+const AllResults = ({ allSearchResults, children, indices, searchState, searching }) => {
+  if (!searchState?.query) return null;
+
+  const hasResults =
+    allSearchResults && Object.values(allSearchResults).some(results => results.nbHits > 0);
+  return !hasResults ? (
+    <div>
+      <div>
+        {searching ? (
+          <span>
+            Searching for "<em>{searchState?.query}</em>"
+          </span>
+        ) : (
+          <span>
+            No results for "<em>{searchState?.query}</em>"
+          </span>
+        )}
+      </div>
+      {indices.map(index => (
+        <Index indexName={index.name} key={index.name} />
+      ))}
+      <SearchFooter />
+    </div>
+  ) : (
+    children
+  );
+};
+
+const CustomAllResults = connectStateResults(AllResults);
+
+const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
+  const handleOnChange = indexType => ({ target }) => {
+    setActiveIndexTypes(prevState => ({
+      ...prevState,
+      [indexType]: target.checked,
+    }));
+  };
+
+  return (
+    <div className="tb-m:min-w-[150px] static tb-m:sticky top-[96px] self-start">
+      <Typography textStyle="h6" as="h6" className="text-neutral-700 uppercase">Filter</Typography>
+      <ul className="flex tb-m:block">
+        {Object.values(INDEX_TYPES).map(index => (
+          <li key={index} className="flex items-center py-3 mr-4 tb-m:mr-0">
+            <input
+              type="checkbox"
+              id={"algolia_index_type_" + index}
+              name={"algolia_index_type_" + index}
+              value={index}
+              checked={activeIndexTypes[index]}
+              onChange={handleOnChange(index)}
+              className="mr-2 focus:outline-none"
+            />
+            <label htmlFor={"algolia_index_type_" + index}>{index}</label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default function SearchWrapper({ indices }) {
+  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((a, c) => {
+    a[c] = true;
+    return a;
+  }, {});
+  const wrapperRef = useRef(null);
+  const [activeIndexTypes, setActiveIndexTypes] = useState(defaultIndexTypesState);
+  return (
+    <InstantSearch
+      searchClient={searchClient}
+      indexName={indices[0].name}
+      onSearchStateChange={() => setActiveIndexTypes(defaultIndexTypesState)}
+    >
+      <SearchBox />
+      <CustomAllResults indices={indices}>
+        <div className="tb-m:flex">
+          <IndexTypeFilter
+              activeIndexTypes={activeIndexTypes}
+              setActiveIndexTypes={setActiveIndexTypes}
+            />
+          <SearchResults
+            id="search-results"
+            indices={indices}
+            wrapperRef={wrapperRef}
+            activeIndexTypes={activeIndexTypes}
+            className="search-results"
+          />
+        </div>
+      </CustomAllResults>
+    </InstantSearch>
+  );
+}

package/src/HDS/helpers/index.js

@@ -1,3 +1,4 @@
 export * from './Translations';
 export * from './Media';
 export * from './Effects';
+export * from './AlgoliaSearch';

package/src/styles/tailwind.css

@@ -827,6 +827,10 @@ select{
   visibility: hidden;
 }
 
+.static{
+  position: static;
+}
+
 .fixed{
   position: fixed;
 }
@@ -886,6 +890,10 @@ select{
   right: -44px;
 }
 
+.-top-20{
+  top: -5rem;
+}
+
 .bottom-0{
   bottom: 0px;
 }
@@ -970,6 +978,10 @@ select{
   right: 0.5rem;
 }
 
+.right-4{
+  right: 1rem;
+}
+
 .right-8{
   right: 2rem;
 }
@@ -994,6 +1006,10 @@ select{
   top: 0.5rem;
 }
 
+.top-4{
+  top: 1rem;
+}
+
 .top-5{
   top: 1.25rem;
 }
@@ -1022,6 +1038,10 @@ select{
   top: 72px;
 }
 
+.top-\[96px\]{
+  top: 96px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1050,6 +1070,10 @@ select{
   z-index: 50;
 }
 
+.z-\[10000\]{
+  z-index: 10000;
+}
+
 .z-\[100\]{
   z-index: 100;
 }
@@ -1058,6 +1082,10 @@ select{
   z-index: 10;
 }
 
+.z-\[11\]{
+  z-index: 11;
+}
+
 .z-\[1\]{
   z-index: 1;
 }
@@ -1082,6 +1110,10 @@ select{
   grid-column: span 4 / span 4;
 }
 
+.clear-both{
+  clear: both;
+}
+
 .-m-1{
   margin: -0.25rem;
 }
@@ -1102,6 +1134,10 @@ select{
   margin: -0.75rem;
 }
 
+.m-1{
+  margin: 0.25rem;
+}
+
 .m-2{
   margin: 0.5rem;
 }
@@ -2654,6 +2690,10 @@ select{
   border-width: 1.5px;
 }
 
+.border-\[3px\]{
+  border-width: 3px;
+}
+
 .border-x{
   border-left-width: 1px;
   border-right-width: 1px;
@@ -3201,11 +3241,21 @@ select{
   border-bottom-color: rgb(157 164 174 / var(--tw-border-opacity));
 }
 
+.border-t-blue-500{
+  --tw-border-opacity: 1;
+  border-top-color: rgb(57 112 253 / var(--tw-border-opacity));
+}
+
 .border-t-neutral-150{
   --tw-border-opacity: 1;
   border-top-color: rgb(236 237 240 / var(--tw-border-opacity));
 }
 
+.border-t-neutral-200{
+  --tw-border-opacity: 1;
+  border-top-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .bg-amber-100{
   --tw-bg-opacity: 1;
   background-color: rgb(255 243 212 / var(--tw-bg-opacity));
@@ -6457,6 +6507,10 @@ select{
   text-align: right;
 }
 
+.indent-5{
+  text-indent: 1.25rem;
+}
+
 .font-petrona{
   font-family: Petrona, serif;
 }
@@ -9462,6 +9516,11 @@ select{
   color: rgb(30 86 227 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-700:hover{
+  --tw-text-opacity: 1;
+  color: rgb(13 65 198 / var(--tw-text-opacity));
+}
+
 .hover\:text-neutral-0:hover{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -10846,6 +10905,23 @@ select{
 }
 
 @media (min-width: 800px){
+  .tb-m\:sticky{
+    position: -webkit-sticky;
+    position: sticky;
+  }
+
+  .tb-m\:-top-20{
+    top: -5rem;
+  }
+
+  .tb-m\:mr-0{
+    margin-right: 0px;
+  }
+
+  .tb-m\:block{
+    display: block;
+  }
+
   .tb-m\:flex{
     display: flex;
   }
@@ -10854,6 +10930,10 @@ select{
     width: 50%;
   }
 
+  .tb-m\:min-w-\[150px\]{
+    min-width: 150px;
+  }
+
   .tb-m\:snap-start{
     scroll-snap-align: start;
   }
@@ -10870,6 +10950,11 @@ select{
     border-top-width: 0px;
   }
 
+  .tb-m\:py-9{
+    padding-top: 2.25rem;
+    padding-bottom: 2.25rem;
+  }
+
   .tb-m\:pb-0{
     padding-bottom: 0px;
   }
@@ -10877,6 +10962,10 @@ select{
   .tb-m\:pt-0{
     padding-top: 0px;
   }
+
+  .tb-m\:pt-16{
+    padding-top: 4rem;
+  }
 }
 
 @media (min-width: 905px){