hds-web 1.36.6 → 1.36.8

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

@@ -1,28 +1,19 @@
 import algoliasearch from "algoliasearch/lite";
 import React, { useRef, useState, useEffect } from "react";
-import {
-  InstantSearch,
-  connectStateResults,
-  Index,
-} from "react-instantsearch-dom";
+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 AllResults = ({
-  allSearchResults,
-  children,
-  indices,
-  searchState,
-  searching,
-}) => {
+import { Typography } from '../../foundation/Typography'
+
+
+
+const AllResults = ({ allSearchResults, children, indices, searchState, searching }) => {
   if (!searchState?.query) return null;
 
   const hasResults =
-    allSearchResults &&
-    Object.values(allSearchResults).some((results) => results.nbHits > 0);
+    allSearchResults && Object.values(allSearchResults).some(results => results.nbHits > 0);
   return !hasResults ? (
     <div>
       <div>
@@ -36,7 +27,7 @@ const AllResults = ({
           </span>
         )}
       </div>
-      {indices.map((index) => (
+      {indices.map(index => (
         <Index indexName={index.name} key={index.name} />
       ))}
       <SearchFooter />
@@ -54,74 +45,57 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
   const handleOnClick = (indexType) => {
     if (indexType === INDEX_TYPES.All) {
       showAll = true;
-      const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
-        (acc, key) => {
-          acc[key] = true;
-          return acc;
-        },
-        {}
-      );
+      const allFiltersSelected = Object.keys(activeIndexTypes).reduce((acc, key) => {
+        acc[key] = true;
+        return acc;
+      }, {});
       setActiveIndexTypes(allFiltersSelected);
     } else {
-      showAll = false;
-      const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
-        (acc, key) => {
-          acc[key] = false;
-          return acc;
-        },
-        {}
-      );
+      showAll = false
+      const allFiltersSelected = Object.keys(activeIndexTypes).reduce((acc, key) => {
+        acc[key] = false;
+        return acc;
+      }, {});
       setActiveIndexTypes(allFiltersSelected);
       setActiveIndexTypes((prevState) => ({
         ...prevState,
         [indexType]: !prevState[indexType],
       }));
     }
-    setShowDropdown(false);
+    setShowDropdown(false)
   };
 
   return (
     <div className="relative">
-      <div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
-        <ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
-          {Object.values(INDEX_TYPES).map((index) => (
-            <li
-              key={index}
-              className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0"
+    <div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
+      <ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
+        {Object.values(INDEX_TYPES).map((index) => (
+          <li key={index} className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0">
+            <button
+              onClick={() => handleOnClick(index)}
+              className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${(activeIndexTypes[index] && index === 'All') ? "bg-blue-500 " : ""
+                } ${(activeIndexTypes[index] && !showAll) ? 'bg-blue-500': ''} `}
             >
-              <button
-                onClick={() => handleOnClick(index)}
-                className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${
-                  activeIndexTypes[index] && index === "All"
-                    ? "bg-blue-500 "
-                    : ""
-                } ${activeIndexTypes[index] && !showAll ? "bg-blue-500" : ""} `}
+              <Typography
+                textStyle="body3c-medium"
+                className={`${(activeIndexTypes[index] && index === 'All') ? "text-neutral-0 " : ""} ${(activeIndexTypes[index] && !showAll) ? 'text-neutral-0' : ''} `
+              }
               >
-                <Typography
-                  textStyle="body3c-medium"
-                  className={`${
-                    activeIndexTypes[index] && index === "All"
-                      ? "text-neutral-0 "
-                      : ""
-                  } ${
-                    activeIndexTypes[index] && !showAll ? "text-neutral-0" : ""
-                  } `}
-                >
-                  {index}
-                </Typography>
-              </button>
-            </li>
-          ))}
-        </ul>
-      </div>
+                {index}
+              </Typography>
+            </button>
+          </li>
+        ))}
+      </ul>
+
+    </div>
       <div className="relative hds-hidden-tbm">
         <button
           onClick={() => setShowDropdown(!showDropdown)}
           className="capitalize cursor-pointer py-1 px-3 w-full border border-neutral-800 text-left rounded-full text-neutral-800 bg-transparent"
         >
-          {Object.values(INDEX_TYPES).find(
-            (index) => activeIndexTypes[index]
-          ) || "All"}
+          {Object.values(INDEX_TYPES).find((index) => activeIndexTypes[index]) || "All"}
+
         </button>
         {showDropdown && (
           <ul className="absolute top-full left-0 w-full bg-neutral-0 shadow-md z-[20] p-2 rounded-3xl mt-1">
@@ -129,11 +103,8 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
               <li
                 key={index}
                 onClick={() => handleOnClick(index)}
-                className={`capitalize cursor-pointer py-2 px-4 ${
-                  activeIndexTypes[index]
-                    ? "text-neutral-1000  "
-                    : "text-neutral-500"
-                }`}
+                className={`capitalize cursor-pointer py-2 px-4 ${activeIndexTypes[index] ? "text-neutral-1000  " : "text-neutral-500"
+                  }`}
               >
                 {index}
               </li>
@@ -141,21 +112,21 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
           </ul>
         )}
       </div>
+
     </div>
   );
 };
 
-let ALGOLIA_APP_ID = `WCBB1VVLRC`;
-let ALGOLIA_SEARCH_KEY = `baf43aa3921858bc144d0fe5ce85b526`;
-
 export default function SearchWrapper({ indices, ...props }) {
-  // let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY;
-  // if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY) {
-  //   ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
-  //   ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
-  // }
-
-  const algoliaClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY);
+  let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY ;
+  if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY){
+    ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
+    ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
+  }
+  const algoliaClient = algoliasearch(
+    ALGOLIA_APP_ID,
+    ALGOLIA_SEARCH_KEY
+  );
 
   const searchClient = {
     ...algoliaClient,
@@ -175,17 +146,13 @@ export default function SearchWrapper({ indices, ...props }) {
     },
   };
 
-  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce(
-    (acc, index) => {
-      acc[index] = true;
-      return acc;
-    },
-    {}
-  );
+
+  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((acc, index) => {
+    acc[index] = true;
+    return acc;
+  }, {});
   const wrapperRef = useRef(null);
-  const [activeIndexTypes, setActiveIndexTypes] = useState(
-    defaultIndexTypesState
-  );
+  const [activeIndexTypes, setActiveIndexTypes] = useState(defaultIndexTypesState);
   useEffect(() => {
     setActiveIndexTypes(defaultIndexTypesState);
   }, []);
@@ -201,8 +168,8 @@ export default function SearchWrapper({ indices, ...props }) {
         <div className="tb-m:flex gap-10">
           <div className="hds-hidden tb-m:flex">
             <IndexTypeFilter
-              activeIndexTypes={activeIndexTypes}
-              setActiveIndexTypes={setActiveIndexTypes}
+                activeIndexTypes={activeIndexTypes}
+                setActiveIndexTypes={setActiveIndexTypes}
             />
           </div>
           <SearchResults
@@ -210,14 +177,13 @@ export default function SearchWrapper({ indices, ...props }) {
             indices={indices}
             wrapperRef={wrapperRef}
             activeIndexTypes={activeIndexTypes}
-            className="search-results"
-          >
-            <div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-100 pb-3">
-              <IndexTypeFilter
-                activeIndexTypes={activeIndexTypes}
-                setActiveIndexTypes={setActiveIndexTypes}
-              />
-            </div>
+            className="search-results">
+              <div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-100 pb-3">
+                <IndexTypeFilter
+                  activeIndexTypes={activeIndexTypes}
+                  setActiveIndexTypes={setActiveIndexTypes}
+                />
+              </div>
           </SearchResults>
         </div>
       </CustomAllResults>

package/src/styles/tailwind.css

@@ -10964,6 +10964,14 @@ select{
     top: 160px;
   }
 
+  .tb\:left-4{
+    left: 1rem;
+  }
+
+  .tb\:left-3{
+    left: 0.75rem;
+  }
+
   .tb\:mb-0{
     margin-bottom: 0px;
   }

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

@@ -1,117 +0,0 @@
-import React from "react";
-import { Highlight, Snippet } from "react-instantsearch-dom";
-import { INDEX_TYPES } from "./constants";
-import { Typography } from "../../foundation/Typography";
-
-const baseDomain = "hasura.io";
-
-export const SearchHit = ({ hit, indexType }) => {
-  if (indexType === "events") {
-    return (
-      <a href={hit.metaTags?.canonical_url} className="grid h-full">
-        <div className="self-start">
-          <div className="flex items-start">
-            <div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
-              <div className="w-3 h-3 rounded-full bg-blue-500"></div>
-            </div>
-            <div>
-              <Typography
-                textStyle="body1c-bold"
-                className="font-bold text-neutral-800 pb-3"
-              >
-                <Highlight
-                  attribute="metaTags.meta_title"
-                  hit={hit}
-                  tagName="mark"
-                />
-              </Typography>
-              <Typography
-                textStyle="body2"
-                className="text-neutral-800 word-break"
-              >
-                <Snippet
-                  attribute="metaTags.meta_description"
-                  hit={hit}
-                  tagName="mark"
-                />
-              </Typography>
-            </div>
-          </div>
-        </div>
-        <Typography
-          textStyle="body3"
-          className="self-end pl-8 pt-3 text-neutral-500"
-        >
-          <span className="hit-slug word-break">
-            {hit.metaTags?.canonical_url.replace(`https://${baseDomain}/`, "/")}
-          </span>
-        </Typography>
-      </a>
-    );
-  }
-
-  return (
-    <a href={hit.url} className="grid h-full">
-      <div className="self-start">
-        {/* <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography> */}
-        {indexType === INDEX_TYPES.docs ? (
-          <div className="flex items-start">
-            <div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
-              <div className="w-3 h-3 rounded-full bg-blue-500"></div>
-            </div>
-            <div>
-              {!!hit.hierarchy && (
-                <Typography
-                  textStyle="body1c-bold"
-                  className="font-bold flex items-start pb-3"
-                >
-                  {`${
-                    Object.values(hit.hierarchy)
-                      .filter((h) => !!h)
-                      .reverse()[0]
-                  }`}
-                </Typography>
-              )}
-              <Typography
-                textStyle="body2"
-                className="text-neutral-800 word-break"
-              >
-                <Snippet attribute="content" hit={hit} tagName="mark" />
-              </Typography>
-            </div>
-          </div>
-        ) : (
-          <div className="flex items-start">
-            <div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
-              <div className="w-3 h-3 rounded-full bg-blue-500"></div>
-            </div>
-            <div>
-              <Typography
-                textStyle="body1c-bold"
-                className="font-bold text-neutral-800 pb-3"
-              >
-                <Highlight attribute="title" hit={hit} tagName="mark" />
-              </Typography>
-              <Typography
-                textStyle="body2"
-                className="text-neutral-800 word-break"
-              >
-                <Snippet attribute="excerpt" hit={hit} tagName="mark" />
-              </Typography>
-            </div>
-          </div>
-        )}
-      </div>
-      {hit.url ? (
-        <Typography
-          textStyle="body3"
-          className="self-end pl-8 pt-3 text-neutral-500"
-        >
-          <span className="hit-slug word-break">
-            {hit.url.replace(`https://${baseDomain}/`, "/")}
-          </span>
-        </Typography>
-      ) : null}
-    </a>
-  );
-};