hds-web 1.16.1 → 1.16.3

package/package.json

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

package/src/HDS/assets/icons/search-sm.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21L15.0001 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 21L15.0001 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/components/Cards/Menu/flyoutA.js

@@ -26,7 +26,7 @@ export default function FlyoutA(props) {
             {label}
           </Typography>) : (
             <div className="mb-9">
-              </div>
+            </div>
           )}
           <div className={` tb:tb:grid tb:tb:grid-cols-1 tb:gap-x-4 tb:min-w-[182px] `}>
             {childArray && childArray.map((item) => (
@@ -110,28 +110,28 @@ export default function FlyoutA(props) {
 
         (
           <>
-          
-        <div className="hidden tb-l:flex h-full">
-          <div className="border-r border-neutral-150 shadow rounded-l-2xl">
 
-          {cardLayout(props.label, props.childArray.slice(0, Math.ceil(props.childArray.length / 2)))}
-          </div>
-          <div className="shadow rounded-r-2xl">
+            <div className="hds-hidden tb-l:flex h-full">
+              <div className="border-r border-neutral-150 shadow rounded-l-2xl">
 
-          {cardLayout( null , props.childArray.slice(Math.ceil(props.childArray.length / 2)))}
-          </div>
-        </div>
-            <div className="tb-l:hidden shadow h-full rounded-2xl">
-           {cardLayout(props.label, props.childArray)}
-        </div>
+                {cardLayout(props.label, props.childArray.slice(0, Math.ceil(props.childArray.length / 2)))}
+              </div>
+              <div className="shadow rounded-r-2xl">
+
+                {cardLayout(null, props.childArray.slice(Math.ceil(props.childArray.length / 2)))}
+              </div>
+            </div>
+            <div className="hds-hidden-tbl shadow h-full rounded-2xl">
+              {cardLayout(props.label, props.childArray)}
+            </div>
           </>
-)
+        )
 
         : (
           <div className=" shadow h-full rounded-2xl">
-          {cardLayout(props.label, props.childArray)}
+            {cardLayout(props.label, props.childArray)}
           </div>
-        
+
         )}
     </>
 

package/src/HDS/components/Headers/v3Header.js

@@ -1,6 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { Fragment } from 'react';
-import { GithubWidget } from "./githubButton";
 import { Icon } from '../common-components/Icon';
 import { Typography } from '../../foundation/Typography';
 import { HDSButton } from '../Buttons';
@@ -8,6 +6,7 @@ import { V3Dropdown } from '../Cards/Dropdown'
 import { HDSColor } from '../../foundation/ColorPalette';
 import { motion } from "framer-motion"
 import { AnimatePresence } from 'framer-motion';
+import { AlgoliaSearch } from '../../helpers/AlgoliaSearch';
 
 const solutions = [
     {
@@ -45,7 +44,7 @@ export default function V3Header(props) {
     const dropdownA = (solutions) => (
         <div>
             <div>
-                <div className='w-full h-5 ' />
+                <hr className='w-full h-9 border-0  ' />
             </div>
 
             <div className=" p-2 bg-neutral-150 rounded-3xl ">
@@ -134,7 +133,9 @@ export default function V3Header(props) {
     )
     const dropdownB = (solutions) => (
         <div>
-            <div className='w-full h-5 ' />
+            <div>
+                <hr className='w-full h-9 border-0  ' />
+            </div>
 
 
             <div className=" p-2 bg-neutral-150 rounded-3xl  ">
@@ -301,7 +302,7 @@ export default function V3Header(props) {
     const dropdownC = (solutions) => (
         <div>
             <div>
-                <div className='w-full h-5 ' />
+                <hr className='w-full h-9 border-0 ' />
             </div>
             <div className=" p-2 bg-neutral-150 rounded-3xl ">
                 <V3Dropdown
@@ -425,7 +426,7 @@ export default function V3Header(props) {
                                         initial={{ opacity: 0 }}
                                         animate={{ opacity: 1 }}
                                         transition={{ ease: "easeInOut", duration: 0.1 }}
-                                        className='absolute top-9 -left-[137px] z-[2] transform'>
+                                        className='absolute  -left-[137px] z-[2] transform'>
                                         {dropdownA(HEADER_LIST[0]['titleDropdown'])}
                                     </motion.div>
                                 </div>
@@ -465,7 +466,7 @@ export default function V3Header(props) {
                                     initial={{ opacity: 0 }}
                                     animate={{ opacity: 1 }}
                                     transition={{ ease: "easeInOut", duration: 0.1 }}
-                                    className='absolute top-9 -left-[218px] z-[2]'>
+                                    className='absolute  -left-[218px] z-[2]'>
                                     {dropdownB(HEADER_LIST[1]['titleDropdown'])}
                                 </motion.div>
                             </div>
@@ -503,7 +504,7 @@ export default function V3Header(props) {
                                     initial={{ opacity: 0 }}
                                     animate={{ opacity: 1 }}
                                     transition={{ ease: "easeInOut", duration: 0.1 }}
-                                    className='absolute top-9 -left-[50px] z-[2] transform'>
+                                    className='absolute  -left-[50px] z-[2] transform'>
                                     {dropdownC(HEADER_LIST[3]['titleDropdown'])}
                                 </motion.div>
                             </div>
@@ -931,14 +932,19 @@ export default function V3Header(props) {
                             <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
                         </a>
                     </div>
-                    <div className={"tb-l:hidden block z-[10] mr-[30px] h-5 mt-5 " + ((mobileNavOpen) ? "" : "")} onClick={() => handleMbDropdownClose()}>
-                        <div aria-hidden="true" className={`${class1} block  absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
-                        <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform  transition duration-500 ease-in-out`}></div>
+                    <div className='hds-hidden-tbl flex z-[10] mr-[30px] items-center gap-6'>
+                        <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
+                            <AlgoliaSearch {...props} />
+                        </div>
+                        <div className=' h-5 mt-3 cursor-pointer' onClick={() => handleMbDropdownClose()}>
+                            <div aria-hidden="true" className={`${class1} block  absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
+                            <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform  transition duration-500 ease-in-out`}></div>
+                        </div>
                     </div>
                 </div>
-                <div className='hidden tb-l:flex flex-row w-full  justify-between items-center'>
+                <div className='hds-hidden tb-l:flex flex-row w-full  justify-between items-center'>
 
-                    <nav className="hidden items-center relative tb-l:pl-8 tb-l:flex tb-l:space-x-6"
+                    <nav className="hds-hidden items-center relative tb-l:pl-8 tb-l:flex tb-l:space-x-6"
                         onMouseEnter={() => setIsArrowActive(true)}
                         onMouseLeave={() => setIsArrowActive(false)}
 
@@ -963,61 +969,59 @@ export default function V3Header(props) {
 
                     </nav>
 
-                    <div className='hidden tb-l:flex flex-row items-center gap-x-4 '>
-
-                    
-                    <a href='' className='hidden tb:flex'>
-                        <Typography textStyle='body3c-medium' className='text-neutral-800'>
-                            Contact Sales
-                        </Typography>
-                    </a>
-                    <HDSButton
-                        label="Log In"
-                        type='tonal'
-                        leftIconVariant='none'
-                        rightIconVariant='none'
-                        state='default'
-                        size='sm'
-                        rightAnimatedArrow='true'
-                        rightAnimatedArrowColor='#3970FD'
-                        animatedHoverStroke='group-hover:stroke-neutral-0'
-                        className='hidden tb-l:flex'
-                    />
-                    <HDSButton
-                        label="Get Started"
-                        type='primary'
-                        leftIconVariant='none'
-                        rightIconVariant='none'
-                        state='default'
-                        size='sm'
-                        rightAnimatedArrow='true'
-                        rightAnimatedArrowColor='#ffffff'
-                        animatedHoverStroke='group-hover:stroke-neutral-0'
-                        className='hidden tb:flex'
-                    />
+                    <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
+
+                        <AlgoliaSearch {...props} />
+
+                        <a href='' className='hds-hidden db:flex'>
+                            <Typography textStyle='body3c-medium' className='text-neutral-800'>
+                                Contact Sales
+                            </Typography>
+                        </a>
+                        <HDSButton
+                            label="Log In"
+                            type='tonal'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#3970FD'
+                            animatedHoverStroke='group-hover:stroke-neutral-0'
+                            className='hds-hidden tb-l:flex'
+                        />
+                        <HDSButton
+                            label="Get Started"
+                            type='primary'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#ffffff'
+                            animatedHoverStroke='group-hover:stroke-neutral-0'
+                            className='hds-hidden tb:flex'
+                        />
                     </div>
 
                 </div>
-                <div className="tb-l:hidden overflow-auto flex ">
+
+                <div className="hds-hidden-tbl overflow-auto flex ">
                     {/* <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                             <span className="sr-only">Open menu</span> */}
 
-                    <div className='bg-neutral-100 tb:hidden flex flex-row '>
 
-
-
-                    </div>
-                    <div className={"bg-neutral-100 tb-l:hidden block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-4 mx-auto left-4 top-0 transform transition duration-500 ease-in-out h-[calc(100%-1px)] max-h-screen overflow-y-auto" + ((mobileNavOpen) ? " translate-x-0" : " translate-x-[1240px]")}>
+                    <div className={"bg-neutral-100 hds-hidden-tbl block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-4 mx-auto left-4 top-0 transform transition duration-500 ease-in-out h-[calc(100%-1px)] max-h-screen overflow-y-auto" + ((mobileNavOpen) ? " translate-x-0" : " translate-x-[1240px]")}>
 
                         <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-scroll ">
 
-                            <div className='pt-11 pb-4 mr-[17px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
+                            <div className='pt-9 pb-4 mr-[17px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
                                 {(isCompany || isDeveloper || isProduct) && <div
                                     className=' flex flex-row justify-start z-10'
                                     onClick={() => handleBackClick()}
 
                                 >
-                                    <Icon height='w-5 h-5 ml-4' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
+                                    <Icon height='w-5 h-5 ml-4 cursor-pointer' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
                                 </div>}
                                 <motion.div
                                     initial={{ opacity: 0 }}
@@ -1129,8 +1133,8 @@ export default function V3Header(props) {
                 <div>
 
 
-                    <div className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right hidden transform transition">
-                        <div className=" rounded-lg bg-neutral-0 h-[calc(100%-112px)]  shadow-lg">
+                    <div className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right hds-hidden transform transition">
+                        <div className=" rounded-lg bg-neutral-0 h-[calc(100%-112px)] shadow-lg">
                             <div className="bg-neutral-0">
                                 {/* <div className="flex items-center justify-end">
                                 <div className="">
@@ -1139,7 +1143,7 @@ export default function V3Header(props) {
                                     </div>
                                 </div>
                             </div> */}
-                                <div className="mt-6 abcdefhgk flex flex-col gap-6">
+                                <div className="mt-6 flex flex-col gap-6">
                                     <div className='flex flex-col items-center'>
                                         <img
                                             className="inline-block w-full px-4 "
@@ -1148,7 +1152,7 @@ export default function V3Header(props) {
                                         />
                                     </div>
 
-                                    <nav className="grid divide-y divide-neutral-200 border border-neutral-200 rounded-3xl tb-l:hidden  ">
+                                    <nav className="grid divide-y divide-neutral-200 border border-neutral-200 rounded-3xl hds-hidden-tbl  ">
                                         {props.HEADER_LIST.map((item) => (
                                             <div
                                                 key={item['title']}

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

@@ -0,0 +1,48 @@
+export const INDEX_TYPES = Object.freeze({
+  blog: "blog",
+  docs: "docs",
+  learn: "learn",
+});
+
+export const SEARCH_INDICES = [
+  { name: `blog-production`, title: `Hasura Blog`, type: INDEX_TYPES.blog },
+  { name: `graphql-docs-prod`, title: `Hasura GraphQL Engine Docs`, type: INDEX_TYPES.docs },
+  { name: `learn-intro-graphql`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-intro-graphql-zh`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-elm-graphql`, title: `Learn ELM GraphQl`, type: INDEX_TYPES.learn },
+  { name: `learn-flutter-graphql`, title: `Learn Flutter GraphQL`, type: INDEX_TYPES.learn },
+  { name: `learn-database-mysql`, title: `Learn Database MySQL`, type: INDEX_TYPES.learn },
+  {
+    name: `learn-database-postgresql`,
+    title: `Learn Database PostgreSQL`,
+    type: INDEX_TYPES.learn,
+  },
+  { name: `learn-hasura-backend`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-ja`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-zh`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-backend-advanced`, title: `Learn Hasura Backend Advanced`, type: INDEX_TYPES.learn },
+  { name: `learn-hasura-auth-slack`, title: `Learn Hasura Auth Slack`, type: INDEX_TYPES.learn },
+  { name: `learn-react-apollo-hooks`, title: `Learn React Apollo Hooks`, type: INDEX_TYPES.learn },
+  { name: `learn-react-apollo`, title: `Learn React Apollo`, type: INDEX_TYPES.learn },
+  {
+    name: `learn-typescript-react-apollo`,
+    title: `Learn TypeScript React Apollo`,
+    type: INDEX_TYPES.learn,
+  },
+  { name: `learn-angular-apollo`, title: `Learn Angular Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-vue-apollo`, title: `Learn Vue Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-ios-apollo`, title: `Learn IOS Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-svelte-apollo`, title: `Learn Svelte Apollo`, type: INDEX_TYPES.learn },
+  { name: `learn-android-apollo`, title: `Learn Android Apollo`, type: INDEX_TYPES.learn },
+  {
+    name: `learn-react-native-apollo`,
+    title: `Learn React Native Apollo`,
+    type: INDEX_TYPES.learn,
+  },
+  {
+    name: `learn-reason-react-apollo`,
+    title: `Learn Reason React Apollo`,
+    type: INDEX_TYPES.learn,
+  },
+  { name: `learn-database-mssql`, title: `Learn MicrosoftSQL`, type: INDEX_TYPES.learn },
+];

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

@@ -0,0 +1 @@
+export {default as AlgoliaSearch } from './search';

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import SearchOverlay from "./searchoverlay";
+import { Icon } from "../../components/common-components";
+export default function Search(props) {
+  const [showSearch, setShowSearch] = useState(false);
+
+  const handleSearchWithKeyboard = e => {
+    if (e.key === "/" || e.key === "Escape") {
+      e.preventDefault();
+      if (e.key === "/") return setShowSearch(true);
+      if (e.key === "Escape") return onCloseSearch();
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleSearchWithKeyboard);
+
+    return () => {
+      document.removeEventListener("keydown", handleSearchWithKeyboard);
+    };
+  }, []);
+
+  const onCloseSearch = () => setShowSearch(false);
+  return (
+    <>
+      <div className="">
+        <div className="max-w-7xl mx-auto">
+          <div className="w-full cursor-pointer gap-0.5 flex items-center" onClick={() => {setShowSearch(preShowSearch => !preShowSearch);}}>
+            <p className="-mt-1">/ </p>
+            <Icon height={'h-4 w-4 stroke-2'} variant={`searchsm`}  strokeClass='stroke-neutral-1000' />
+          </div>
+        </div>
+      </div>
+      <SearchOverlay showSearch={showSearch} onCloseSearch={onCloseSearch} />
+    </>
+  );
+}

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

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useState } from "react";
+import { connectSearchBox } from "react-instantsearch-dom";
+import { Icon } from '../../components/common-components/Icon'
+import { Typography } from '../../foundation/Typography'
+const searchSuggestions = [
+  "GraphQL",
+  "Actions",
+  "Authentication",
+  "React",
+  "Remote Joins",
+  "Postgres",
+];
+
+const DebouncedSearchBox = ({
+  refine,
+  currentRefinement,
+  className,
+  delay = 500,
+  isSearchStalled,
+}) => {
+  const [value, setValue] = useState(currentRefinement);
+  const timerId = useRef();
+  const searchInputRef = useRef();
+  useEffect(() => {
+    searchInputRef.current?.focus();
+  }, []);
+
+  const trySuggestion = inputValue => {
+    refine(inputValue);
+    setValue(inputValue);
+  };
+
+  const resetInput = () => {
+    refine("");
+    setValue("");
+  };
+
+  const onChangeDebounced = event => {
+    const value = event.target.value;
+
+    clearTimeout(timerId.current);
+    timerId.current = setTimeout(() => refine(value), delay);
+
+    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="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" />
+          )}
+        </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"
+            type="text"
+            placeholder="Search for tutorials, articles or docs"
+            aria-label="Search"
+            onChange={onChangeDebounced}
+            value={value}
+          />
+        </form>
+        <div onClick={resetInput} className="absolute right-2 cursor-pointer bg-neutral-200 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>
+        {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"}`}
+            onClick={() => trySuggestion(suggestion)}
+          >
+            {suggestion}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default connectSearchBox(DebouncedSearchBox);

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

@@ -0,0 +1,30 @@
+import React, { Fragment } from "react";
+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">
+      <div className="community-links-wrapper">
+        <p>Unable to find what you're looking for?</p>
+        <p>
+          Reach out to our{" "}
+          <a className="text-blue-500 hover:text-blue-700" href="https://discord.com/invite/hasura" target="_blank" rel="noopener noreferrer">
+            Discord Community
+          </a>{" "}
+          or start a{" "}
+          <a className="text-blue-500 hover:text-blue-700"
+            href="https://github.com/hasura/graphql-engine/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Discussion on GitHub
+          </a>
+        </p>
+      </div>
+      <PoweredBy />
+    </div>
+  </Fragment>
+);
+
+export default SearchFooter;

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

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { Icon } from '../../components/common-components/Icon'
+import SearchWrapper from "./searchwrapper";
+import { SEARCH_INDICES } from "./constants";
+
+export default function SearchOverlay({showSearch, onCloseSearch}) {
+  
+  useEffect(() => {
+    if (showSearch) {
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [showSearch]);
+
+  if (!showSearch) return null;
+
+  return (
+    <div className="fixed left-0 top-0 w-full h-full z-[10000] bg-neutral-50">
+      <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>
+      <div className="py-20 overflow-y-auto h-full w-full">
+        <div className="px-4">
+          <div className="max-w-7xl mx-auto">
+            <div className="w-full">
+              <SearchWrapper indices={SEARCH_INDICES} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+import React, { Fragment } from "react";
+import { connectStateResults, Highlight, Hits, Index, Snippet } from "react-instantsearch-dom";
+import { INDEX_TYPES } from "./constants";
+import SearchFooter from "./searchfooter";
+import { Typography } from '../../foundation/Typography'
+
+// import SearchFooter from "./SearchFooter";
+
+const baseDomain = 'hasura.io';
+
+
+const HitsHeader = ({ searchResults, indexTitle, showSeparator }) => {
+  const hitCount = searchResults && searchResults.nbHits;
+  return hitCount > 0 ? (
+    <Fragment>
+      {showSeparator && <hr className="my-5 border-t-neutral-200" />}
+      {/* <div className="HitCount">
+        {hitCount} result{hitCount !== 1 ? `s` : ``}
+      </div> */}
+      <Typography textStyle="body2c-medium" className="pb-4">{indexTitle}</Typography>
+    </Fragment>
+  ) : null;
+};
+
+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>
+      {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>
+      ) : (
+        <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>
+    {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>
+    ) : null}
+  </a>
+);
+
+const HitsByIndexType = ({ indexType }) => {
+  if (INDEX_TYPES[indexType] === undefined) return null;
+
+  return (
+    <Hits
+      className="Hits"
+      hitComponent={hitProps => <PageHit {...hitProps} indexType={indexType} />}
+    />
+  );
+};
+
+const HitsInIndex = ({ index, show }) => (
+  <Index indexName={index.name}>
+    {show && (
+      <Fragment>
+        <CustomHitsHeader
+          indexTitle={index.title}
+          showSeparator={index.type !== INDEX_TYPES.blog}
+        />
+        <HitsByIndexType indexType={index.type} />
+      </Fragment>
+    )}
+  </Index>
+);
+
+const SearchResult = ({ indices, className, id, wrapperRef, activeIndexTypes }) => (
+  <div id={id} className={`${className} search-results z-[2] clear-both`} ref={wrapperRef}>
+    {indices.map(index => (
+      <HitsInIndex index={index} key={index.name} show={activeIndexTypes[index.type]} />
+    ))}
+    <SearchFooter />
+  </div>
+);
+
+export default SearchResult;