hds-web 1.16.0 → 1.16.2

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/index.css

@@ -4,6 +4,58 @@
 @tailwind utilities;
 /* Typography classes */
 
+.hds-hidden{
+  display: none;
+  
+}
+ @media (min-width: 905px) {
+   .hds-hidden-tbl {
+     display: none;
+   }
+ }
+
+.search-results {
+  width: calc(100% - 150px);
+}
+
+.search-results .ais-Hits .ais-Hits-list,
+.search-results .Hits .ais-Hits-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 40px;
+}
+
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item,
+.search-results .Hits .ais-Hits-list .ais-Hits-item {
+  border-bottom: 1px solid transparent;
+}
+
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item:hover,
+.search-results .Hits .ais-Hits-list .ais-Hits-item:hover {
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item .hit-slug,
+.search-results .Hits .ais-Hits-list .ais-Hits-item .hit-slug {
+  word-break: break-word;
+}
+
+@media (max-width: 799px) {
+
+  .search-results .ais-Hits .ais-Hits-list,
+  .search-results .Hits .ais-Hits-list {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 800px) and (max-width: 905px) {
+
+  .search-results .ais-Hits .ais-Hits-list,
+  .search-results .Hits .ais-Hits-list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 .card {
   max-width: 920px;
   background-size: cover;