hds-web 1.16.1 → 1.16.3

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;

package/src/styles/tailwind.css

@@ -836,6 +836,10 @@ select{
   visibility: hidden;
 }
 
+.static{
+  position: static;
+}
+
 .fixed{
   position: fixed;
 }
@@ -895,6 +899,10 @@ select{
   right: -44px;
 }
 
+.-top-20{
+  top: -5rem;
+}
+
 .bottom-0{
   bottom: 0px;
 }
@@ -979,6 +987,10 @@ select{
   right: 0.5rem;
 }
 
+.right-4{
+  right: 1rem;
+}
+
 .right-8{
   right: 2rem;
 }
@@ -1003,6 +1015,10 @@ select{
   top: 0.5rem;
 }
 
+.top-4{
+  top: 1rem;
+}
+
 .top-5{
   top: 1.25rem;
 }
@@ -1011,10 +1027,6 @@ select{
   top: 2rem;
 }
 
-.top-9{
-  top: 2.25rem;
-}
-
 .top-\[112px\]{
   top: 112px;
 }
@@ -1031,6 +1043,10 @@ select{
   top: 72px;
 }
 
+.top-\[96px\]{
+  top: 96px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1059,6 +1075,10 @@ select{
   z-index: 50;
 }
 
+.z-\[10000\]{
+  z-index: 10000;
+}
+
 .z-\[100\]{
   z-index: 100;
 }
@@ -1067,6 +1087,10 @@ select{
   z-index: 10;
 }
 
+.z-\[11\]{
+  z-index: 11;
+}
+
 .z-\[1\]{
   z-index: 1;
 }
@@ -1091,6 +1115,10 @@ select{
   grid-column: span 4 / span 4;
 }
 
+.clear-both{
+  clear: both;
+}
+
 .-m-1{
   margin: -0.25rem;
 }
@@ -1111,6 +1139,10 @@ select{
   margin: -0.75rem;
 }
 
+.m-1{
+  margin: 0.25rem;
+}
+
 .m-2{
   margin: 0.5rem;
 }
@@ -1258,6 +1290,10 @@ select{
   margin-left: -1px;
 }
 
+.-mt-1{
+  margin-top: -0.25rem;
+}
+
 .-mt-4{
   margin-top: -1rem;
 }
@@ -2284,6 +2320,14 @@ select{
   justify-content: space-around;
 }
 
+.gap-0{
+  gap: 0px;
+}
+
+.gap-0\.5{
+  gap: 0.125rem;
+}
+
 .gap-1{
   gap: 0.25rem;
 }
@@ -2663,6 +2707,10 @@ select{
   border-width: 1.5px;
 }
 
+.border-\[3px\]{
+  border-width: 3px;
+}
+
 .border-x{
   border-left-width: 1px;
   border-right-width: 1px;
@@ -3210,11 +3258,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));
@@ -5926,10 +5984,6 @@ select{
   padding-top: 2.5rem;
 }
 
-.pt-11{
-  padding-top: 2.75rem;
-}
-
 .pt-12{
   padding-top: 3rem;
 }
@@ -5966,6 +6020,10 @@ select{
   padding-top: 2rem;
 }
 
+.pt-9{
+  padding-top: 2.25rem;
+}
+
 .pt-\[72px\]{
   padding-top: 72px;
 }
@@ -5986,6 +6044,10 @@ select{
   text-align: right;
 }
 
+.indent-5{
+  text-indent: 1.25rem;
+}
+
 .font-petrona{
   font-family: Petrona, serif;
 }
@@ -7020,6 +7082,56 @@ select{
 
 /* 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;
@@ -8991,6 +9103,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));
@@ -10373,6 +10490,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;
   }
@@ -10381,6 +10515,10 @@ select{
     width: 50%;
   }
 
+  .tb-m\:min-w-\[150px\]{
+    min-width: 150px;
+  }
+
   .tb-m\:snap-start{
     scroll-snap-align: start;
   }
@@ -10397,6 +10535,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;
   }
@@ -10404,6 +10547,10 @@ select{
   .tb-m\:pt-0{
     padding-top: 0px;
   }
+
+  .tb-m\:pt-16{
+    padding-top: 4rem;
+  }
 }
 
 @media (min-width: 905px){