hds-web 1.20.6 → 1.20.8

package/package.json

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

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

@@ -57,7 +57,7 @@ const DebouncedSearchBox = ({
           <input
             id="search-input"
             ref={searchInputRef}
-            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"
+            className="shodow-none w-full font-bold indent-8 tb-m:indent-11 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"

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

@@ -35,7 +35,7 @@ const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
       {/* <div className="HitCount">
         {hitCount} result{hitCount !== 1 ? `s` : ``}
       </div> */}
-      <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">
+      <Typography textStyle="sub1" className="pb-4 pl-2 flex items-center text-neutral-800 font-normal sticky tb-m:z-0 top-[170px] tb:top-[160px] tb-m:top-[120px] bg-neutral-0">
         {
           titleIcon()
         }
@@ -122,7 +122,7 @@ const HitsInIndex = ({ index, show }) => (
 );
 
 const SearchResult = ({ children, indices, className, id, wrapperRef, activeIndexTypes }) => (
-  <div id={id} className={`${className} search-results z-[-1] clear-both`} ref={wrapperRef}>
+  <div id={id} className={`${className} search-results 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

@@ -66,9 +66,9 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
   };
 
   return (
-    <div className="relative">    
+    <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">
+      <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">
             <button
@@ -81,21 +81,21 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
                 className={`${(activeIndexTypes[index] && index === 'All') ? "text-neutral-0 " : ""} ${(activeIndexTypes[index] && !showAll) ? 'text-neutral-0' : ''} `
               }
               >
-                {index} 
+                {index}
               </Typography>
             </button>
           </li>
         ))}
       </ul>
-    
+
     </div>
-      <div className="relative tb-m:hidden">
+      <div className="relative hds-hidden-tbm">
         <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">
@@ -112,7 +112,7 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
           </ul>
         )}
       </div>
-      
+
     </div>
   );
 };
@@ -125,7 +125,7 @@ export default function SearchWrapper({ indices, ...props }) {
   }
   const algoliaClient = algoliasearch(
     ALGOLIA_APP_ID,
-    ALGOLIA_SEARCH_KEY 
+    ALGOLIA_SEARCH_KEY
   );
 
   const searchClient = {
@@ -146,7 +146,7 @@ export default function SearchWrapper({ indices, ...props }) {
     },
   };
 
- 
+
   const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((acc, index) => {
     acc[index] = true;
     return acc;
@@ -156,7 +156,7 @@ export default function SearchWrapper({ indices, ...props }) {
   useEffect(() => {
     setActiveIndexTypes(defaultIndexTypesState);
   }, []);
- 
+
   return (
     <InstantSearch
       searchClient={searchClient}
@@ -166,7 +166,7 @@ export default function SearchWrapper({ indices, ...props }) {
       <SearchBox />
       <CustomAllResults indices={indices}>
         <div className="tb-m:flex gap-10">
-          <div className="hidden tb-m:flex">
+          <div className="hds-hidden tb-m:flex">
             <IndexTypeFilter
                 activeIndexTypes={activeIndexTypes}
                 setActiveIndexTypes={setActiveIndexTypes}
@@ -178,7 +178,7 @@ export default function SearchWrapper({ indices, ...props }) {
             wrapperRef={wrapperRef}
             activeIndexTypes={activeIndexTypes}
             className="search-results">
-              <div className="tb-m:hidden sticky top-[124px] tb:top-[114px] z-10 bg-neutral-0 pb-3">
+              <div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-0 pb-3">
                 <IndexTypeFilter
                   activeIndexTypes={activeIndexTypes}
                   setActiveIndexTypes={setActiveIndexTypes}
@@ -189,4 +189,4 @@ export default function SearchWrapper({ indices, ...props }) {
       </CustomAllResults>
     </InstantSearch>
   );
-}
+}

package/src/index.css

@@ -8,7 +8,7 @@
   width: 100%;
 }
 .shodow-none:focus {
-  box-shadow: none;
+  box-shadow: none !important;
 }
 .marketoFormWrapper .mktoFormRow {
   width: 100%;
@@ -50,17 +50,17 @@
 }
 
 .marketoFormWrapper .mktoButtonRow .mktoButtonWrap .mktoButton {
- 
+
   height: 48px;
   color: #35C4F0;
- 
- 
+
+
 }
 
 
 .hds-hidden{
   display: none;
-  
+
 }
  @media (min-width: 905px) {
    .hds-hidden-tbl {
@@ -68,6 +68,12 @@
    }
  }
 
+ @media (min-width: 800px) {
+   .hds-hidden-tbm {
+     display: none;
+   }
+ }
+
 .search-results {
   width: calc(100% - 150px);
 }
@@ -80,6 +86,7 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 40px;
+  padding-top: 26px;
 }
 
 .search-results .ais-Hits .ais-Hits-list .ais-Hits-item,

package/src/styles/tailwind.css

@@ -1068,10 +1068,6 @@ select{
   z-index: 50;
 }
 
-.z-\[-1\]{
-  z-index: -1;
-}
-
 .z-\[10000\]{
   z-index: 10000;
 }
@@ -7603,7 +7599,7 @@ select{
 }
 
 .shodow-none:focus {
-  box-shadow: none;
+  box-shadow: none !important;
 }
 
 .marketoFormWrapper .mktoFormRow {
@@ -7660,6 +7656,12 @@ select{
   }
 }
 
+@media (min-width: 800px) {
+  .hds-hidden-tbm {
+    display: none;
+  }
+}
+
 .search-results {
   width: calc(100% - 150px);
 }
@@ -7673,6 +7675,7 @@ select{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 40px;
+  padding-top: 26px;
 }
 
 .search-results .ais-Hits .ais-Hits-list .ais-Hits-item,
@@ -11276,10 +11279,6 @@ select{
     display: flex;
   }
 
-  .tb-m\:hidden{
-    display: none;
-  }
-
   .tb-m\:w-1\/2{
     width: 50%;
   }
@@ -11333,6 +11332,10 @@ select{
     padding-top: 4rem;
   }
 
+  .tb-m\:indent-11{
+    text-indent: 2.75rem;
+  }
+
   .tb-m\:text-4xl{
     font-size: 2.25rem;
     line-height: 2.5rem;