hds-web 1.20.5 → 1.20.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.20.5",
+  "version": "1.20.6",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

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

@@ -1,7 +1,13 @@
 export const INDEX_TYPES = Object.freeze({
+  All: "All",
+  //Website: "website",
   blog: "blog",
   docs: "docs",
   learn: "learn",
+  // tutorials: "Tutorials",
+  // case_studies: "Case studies",
+  // events: "Events",
+  // resources: "Resources"
 });
 
 export const SEARCH_INDICES = [
@@ -44,5 +50,5 @@ export const SEARCH_INDICES = [
     title: `Learn Reason React Apollo`,
     type: INDEX_TYPES.learn,
   },
-  { name: `learn-database-mssql`, title: `Learn MicrosoftSQL`, type: INDEX_TYPES.learn },
+  { name: `learn-database-mssql`, title: `Learn MicrosoftSQL`, type: INDEX_TYPES.learn },  
 ];

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

@@ -44,20 +44,20 @@ const DebouncedSearchBox = ({
     setValue(value);
   };
   return (
-    <div className=" sticky -top-20 tb-m:-top-20 z-10 py-8 pt-16 tb-m:pt-16 tb-m:py-9 bg-neutral-50">
+    <div className=" sticky -top-20 tb-m:-top-20 z-10 py-8 pt-16 tb-m:pt-16 tb-m:py-9 bg-neutral-0">
       <div className="flex relative items-center w-full">
         <div className="absolute left-2">
           {isSearchStalled ? (
             <div className="loader-spin border-[3px] border-neutral-400 border-t-blue-500 w-5 h-5 rounded-full" />
           ) : (
-            <Icon height={'w-5 h-5 stroke-[1.5px]'} variant="searchsm" strokeClass="stroke-neutral-800" />
+            <Icon height={'w-8 h-8 stroke-[1.5px]'} variant="searchsm" strokeClass="stroke-neutral-800" />
           )}
         </div>
         <form className={`${className} w-full`} onSubmit={e => e.preventDefault()}>
           <input
             id="search-input"
             ref={searchInputRef}
-            className="w-full indent-5 rounded-xl border-neutral-400 h-12"
+            className="shodow-none w-full font-bold indent-8 text-2xl tb-m:text-4xl text-neutral-800 placeholder:text-neutral-800 rounded-xl border-0 h-12 focus:border-0 focus:shadow-[none] focus:border-neutral-0 tb:text-2xl"
             type="text"
             placeholder="Search for tutorials, articles or docs"
             aria-label="Search"
@@ -65,19 +65,21 @@ const DebouncedSearchBox = ({
             value={value}
           />
         </form>
-        <div onClick={resetInput} className="absolute right-2 cursor-pointer bg-neutral-200 rounded-md">
+        <div onClick={resetInput} className="absolute right-2 cursor-pointer rounded-md">
           <Icon height={'w-6 h-6 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
         </div>
       </div>
-      <div className="hidden tb:flex flex-wrap items-center mt-4">
-        <Typography textStyle="body2c-bold" className="uppercase text-neutral-500 mr-4">POPULAR</Typography>
+      <div className="tb:flex flex-wrap items-center mt-4">
+        {/* <Typography textStyle="body2c-bold" className="uppercase text-neutral-500 mr-4">POPULAR</Typography> */}
         {searchSuggestions.map(suggestion => (
           <button
             key={suggestion}
-            className={`px-3 py-1 border rounded-md m-1 ${currentRefinement === suggestion ? "border-neutral-300 hover:bg-neutral-300 bg-neutral-300" : "bg-neutral-150 hover:bg-neutral-200 border-neutral-150"}`}
+            className={`px-2 py-[2px] text-blue-800 border rounded-[100px] m-1 ${currentRefinement === suggestion ? "border-blue-300 hover:bg-blue-300 bg-blue-300" : "bg-blue-200 hover:bg-blue-300 border-blue-200"}`}
             onClick={() => trySuggestion(suggestion)}
           >
+            <Typography textStyle="body2c-medium">
             {suggestion}
+            </Typography>
           </button>
         ))}
       </div>

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

@@ -3,8 +3,8 @@ import { PoweredBy } from "react-instantsearch-dom";
 
 const SearchFooter = () => (
   <Fragment>
-    <hr className="my-5 border-t-neutral-200" />
-    <div className="mt-12 flex flex-wrap justify-between">
+    <hr className="my-8 border-t-neutral-200" />
+    <div className="mt-10 flex flex-wrap justify-between">
       <div className="community-links-wrapper">
         <p>Unable to find what you're looking for?</p>
         <p>

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

@@ -19,7 +19,7 @@ export default function SearchOverlay({showSearch, onCloseSearch, ...props}) {
   if (!showSearch) return null;
 
   return (
-    <div className="fixed left-0 top-0 w-full h-full z-[10000] bg-neutral-50">
+    <div className="fixed left-0 top-0 w-full h-full z-[10000] bg-neutral-0">
       <div className="absolute top-4 right-4 cursor-pointer z-[11]" onClick={onCloseSearch}>
         <Icon height={'w-8 h-8 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
       </div>

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

@@ -3,21 +3,45 @@ import { connectStateResults, Highlight, Hits, Index, Snippet } from "react-inst
 import { INDEX_TYPES } from "./constants";
 import SearchFooter from "./searchfooter";
 import { Typography } from '../../foundation/Typography'
+import { Icon } from '../../components/common-components/Icon';
 
 // import SearchFooter from "./SearchFooter";
 
 const baseDomain = 'hasura.io';
 
 
-const HitsHeader = ({ searchResults, indexTitle, showSeparator }) => {
+const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
   const hitCount = searchResults && searchResults.nbHits;
+  console.log(allIndex)
+  const titleIcon = () => {
+    if(indexTitle === "Hasura Blog") {
+      return (
+        <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="pentool02" strokeClass='stroke-blue-500' />
+      )
+    }
+    if(indexTitle === "Hasura GraphQL Engine Docs") {
+      return (
+        <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="file02" strokeClass='stroke-blue-500' />
+      )
+    }
+    return (
+      <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="graduationhat01" strokeClass='stroke-blue-500' />
+    )
+  }
+  
   return hitCount > 0 ? (
     <Fragment>
-      {showSeparator && <hr className="my-5 border-t-neutral-200" />}
+      {showSeparator && <hr className="my-8 border-t-neutral-200" />}
       {/* <div className="HitCount">
         {hitCount} result{hitCount !== 1 ? `s` : ``}
       </div> */}
-      <Typography textStyle="body2c-medium" className="pb-4">{indexTitle}</Typography>
+      <Typography textStyle="sub1" className="pb-4 pl-2 flex items-center font-normal sticky tb-m:z-0 top-[170px] tb:top-[160px] tb-m:top-[120px] bg-neutral-0">
+        {
+          titleIcon()
+        }
+      
+        {indexTitle}
+      </Typography>
     </Fragment>
   ) : null;
 };
@@ -27,35 +51,45 @@ const CustomHitsHeader = connectStateResults(HitsHeader);
 const PageHit = ({ hit, indexType }) => (
   <a href={hit.url} className="grid h-full">
     <div className="self-start">
-      <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography>
+      {/* <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography> */}
       {indexType === INDEX_TYPES.docs ? (
-        <Fragment>
-          {!!hit.hierarchy && (
-            <Typography textStyle="body1c-bold" className="font-semibold py-3">{`${
-              Object.values(hit.hierarchy)
-                .filter(h => !!h)
-                .reverse()[0]
-            }`}</Typography>
-          )}
-          <Typography textStyle="body2" className="text-neutral-600 break-words">
-            <Snippet attribute="content" hit={hit} tagName="mark" />
-          </Typography>
-          
-        </Fragment>
+        <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>
       ) : (
-        <Fragment>
-          <Typography textStyle="body1c-bold" className="font-semibold py-3">
-            <Highlight attribute="title" hit={hit} tagName="mark" />
-          </Typography>
-          <Typography textStyle="body2" className="text-neutral-600 break-words">
-            <Snippet attribute="excerpt" hit={hit} tagName="mark" />
-          </Typography>
-        </Fragment>
+        <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 my-2 pt-3 text-neutral-600">
-        <span className='hit-slug break-words'>{hit.url.replace(`https://${baseDomain}/`, "/")}</span>
+      <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>
@@ -79,6 +113,7 @@ const HitsInIndex = ({ index, show }) => (
         <CustomHitsHeader
           indexTitle={index.title}
           showSeparator={index.type !== INDEX_TYPES.blog}
+          allIndex = {index.type}
         />
         <HitsByIndexType indexType={index.type} />
       </Fragment>
@@ -86,8 +121,9 @@ const HitsInIndex = ({ index, show }) => (
   </Index>
 );
 
-const SearchResult = ({ indices, className, id, wrapperRef, activeIndexTypes }) => (
-  <div id={id} className={`${className} search-results z-[2] clear-both`} ref={wrapperRef}>
+const SearchResult = ({ children, indices, className, id, wrapperRef, activeIndexTypes }) => (
+  <div id={id} className={`${className} search-results z-[-1] clear-both`} ref={wrapperRef}>
+    {children && children}
     {indices.map(index => (
       <HitsInIndex index={index} key={index.name} show={activeIndexTypes[index.type]} />
     ))}

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

@@ -1,5 +1,5 @@
 import algoliasearch from "algoliasearch/lite";
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { InstantSearch, connectStateResults, Index } from "react-instantsearch-dom";
 import SearchBox from "./searchbox";
 import SearchResults from "./searchresults";
@@ -38,34 +38,81 @@ const AllResults = ({ allSearchResults, children, indices, searchState, searchin
 };
 
 const CustomAllResults = connectStateResults(AllResults);
+let showAll = true;
 
 const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
-  const handleOnChange = indexType => ({ target }) => {
-    setActiveIndexTypes(prevState => ({
-      ...prevState,
-      [indexType]: target.checked,
-    }));
+  const [showDropdown, setShowDropdown] = useState(false);
+  const handleOnClick = (indexType) => {
+    if (indexType === INDEX_TYPES.All) {
+      showAll = true;
+      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;
+      }, {});
+      setActiveIndexTypes(allFiltersSelected);
+      setActiveIndexTypes((prevState) => ({
+        ...prevState,
+        [indexType]: !prevState[indexType],
+      }));
+    }
+    setShowDropdown(false)
   };
 
   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>
+    <div className="relative">    
+    <div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
+      <ul className="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">
+            <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' : ''} `
+              }
+              >
+                {index} 
+              </Typography>
+            </button>
           </li>
         ))}
       </ul>
+    
+    </div>
+      <div className="relative tb-m:hidden">
+        <button
+          onClick={() => setShowDropdown(!showDropdown)}
+          className="capitalize cursor-pointer py-1 px-3 w-full border border-neutral-300 text-left rounded-full text-neutral-500 bg-transparent"
+        >
+          {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">
+            {Object.values(INDEX_TYPES).map((index) => (
+              <li
+                key={index}
+                onClick={() => handleOnClick(index)}
+                className={`capitalize cursor-pointer py-2 px-4 ${activeIndexTypes[index] ? "text-neutral-1000  " : "text-neutral-500"
+                  }`}
+              >
+                {index}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      
     </div>
   );
 };
@@ -100,12 +147,16 @@ export default function SearchWrapper({ indices, ...props }) {
   };
 
  
-  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((a, c) => {
-    a[c] = true;
-    return a;
+  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((acc, index) => {
+    acc[index] = true;
+    return acc;
   }, {});
   const wrapperRef = useRef(null);
   const [activeIndexTypes, setActiveIndexTypes] = useState(defaultIndexTypesState);
+  useEffect(() => {
+    setActiveIndexTypes(defaultIndexTypesState);
+  }, []);
+ 
   return (
     <InstantSearch
       searchClient={searchClient}
@@ -114,18 +165,26 @@ export default function SearchWrapper({ indices, ...props }) {
     >
       <SearchBox />
       <CustomAllResults indices={indices}>
-        <div className="tb-m:flex">
-          <IndexTypeFilter
-              activeIndexTypes={activeIndexTypes}
-              setActiveIndexTypes={setActiveIndexTypes}
+        <div className="tb-m:flex gap-10">
+          <div className="hidden tb-m:flex">
+            <IndexTypeFilter
+                activeIndexTypes={activeIndexTypes}
+                setActiveIndexTypes={setActiveIndexTypes}
             />
+          </div>
           <SearchResults
             id="search-results"
             indices={indices}
             wrapperRef={wrapperRef}
             activeIndexTypes={activeIndexTypes}
-            className="search-results"
-          />
+            className="search-results">
+              <div className="tb-m:hidden sticky top-[124px] tb:top-[114px] z-10 bg-neutral-0 pb-3">
+                <IndexTypeFilter
+                  activeIndexTypes={activeIndexTypes}
+                  setActiveIndexTypes={setActiveIndexTypes}
+                />
+              </div>
+          </SearchResults>
         </div>
       </CustomAllResults>
     </InstantSearch>

package/src/index.css

@@ -7,7 +7,9 @@
 .marketoFormWrapper {
   width: 100%;
 }
-
+.shodow-none:focus {
+  box-shadow: none;
+}
 .marketoFormWrapper .mktoFormRow {
   width: 100%;
 }
@@ -70,34 +72,58 @@
   width: calc(100% - 150px);
 }
 
+.word-break {
+  word-break: break-word;
+}
 .search-results .ais-Hits .ais-Hits-list,
 .search-results .Hits .ais-Hits-list {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 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;
+  padding: 12px;
+  border-radius: 16px;
+  transition: all .3s ease-in-out;
 }
-
 .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;
+  background-color: #F0F4FF;
 }
 
+/* .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;
 }
 
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item .ais-Snippet-highlighted,
+.search-results .Hits .ais-Hits-list .ais-Hits-item .ais-Snippet-highlighted {
+  color: #1E56E3;
+  background-color: transparent;
+}
+
+.search-results .ais-Hits .ais-Hits-list .ais-Hits-item .ais-Highlight-highlighted,
+.search-results .Hits .ais-Hits-list .ais-Hits-item .ais-Highlight-highlighted {
+  color: #1E56E3;
+  background-color: transparent;
+}
 @media (max-width: 799px) {
 
   .search-results .ais-Hits .ais-Hits-list,
   .search-results .Hits .ais-Hits-list {
     grid-template-columns: 1fr;
   }
+  .search-results {
+    width: 100%;
+  }
 }
 
 @media (min-width: 800px) and (max-width: 905px) {