hds-web 1.20.7 → 1.20.8

package/package.json

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

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

@@ -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);
 }

package/src/styles/tailwind.css

@@ -7656,6 +7656,12 @@ select{
   }
 }
 
+@media (min-width: 800px) {
+  .hds-hidden-tbm {
+    display: none;
+  }
+}
+
 .search-results {
   width: calc(100% - 150px);
 }
@@ -11273,10 +11279,6 @@ select{
     display: flex;
   }
 
-  .tb-m\:hidden{
-    display: none;
-  }
-
   .tb-m\:w-1\/2{
     width: 50%;
   }