hds-web 1.16.3 → 1.16.5

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

@@ -3,6 +3,7 @@ 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 => {
@@ -34,7 +35,7 @@ export default function Search(props) {
           </div>
         </div>
       </div>
-      <SearchOverlay showSearch={showSearch} onCloseSearch={onCloseSearch} />
+      <SearchOverlay showSearch={showSearch} onCloseSearch={onCloseSearch} {...props}/>
     </>
   );
 }

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

@@ -3,7 +3,7 @@ import { Icon } from '../../components/common-components/Icon'
 import SearchWrapper from "./searchwrapper";
 import { SEARCH_INDICES } from "./constants";
 
-export default function SearchOverlay({showSearch, onCloseSearch}) {
+export default function SearchOverlay({showSearch, onCloseSearch, ...props}) {
   
   useEffect(() => {
     if (showSearch) {
@@ -26,7 +26,7 @@ export default function SearchOverlay({showSearch, onCloseSearch}) {
         <div className="px-4">
           <div className="max-w-7xl mx-auto">
             <div className="w-full">
-              <SearchWrapper indices={SEARCH_INDICES} />
+              <SearchWrapper indices={SEARCH_INDICES} {...props} />
             </div>
           </div>
         </div>

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

@@ -8,28 +8,6 @@ import SearchFooter from "./searchfooter";
 import { Typography } from '../../foundation/Typography'
 
 
-const algoliaClient = algoliasearch(
-  process.env.ALGOLIA_APP_ID,
-  process.env.ALGOLIA_SEARCH_KEY
-);
-
-const searchClient = {
-  ...algoliaClient,
-  search(requests) {
-    if (requests.every(({ params }) => !params.query)) {
-      return Promise.resolve({
-        results: requests.map(() => ({
-          hits: [],
-          nbHits: 0,
-          nbPages: 0,
-          processingTimeMS: 0,
-        })),
-      });
-    }
-
-    return algoliaClient.search(requests);
-  },
-};
 
 const AllResults = ({ allSearchResults, children, indices, searchState, searching }) => {
   if (!searchState?.query) return null;
@@ -92,7 +70,36 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
   );
 };
 
-export default function SearchWrapper({ indices }) {
+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 
+  );
+
+  const searchClient = {
+    ...algoliaClient,
+    search(requests) {
+      if (requests.every(({ params }) => !params.query)) {
+        return Promise.resolve({
+          results: requests.map(() => ({
+            hits: [],
+            nbHits: 0,
+            nbPages: 0,
+            processingTimeMS: 0,
+          })),
+        });
+      }
+
+      return algoliaClient.search(requests);
+    },
+  };
+
+  console.log(props);
   const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((a, c) => {
     a[c] = true;
     return a;

package/src/styles/tailwind.css

@@ -782,6 +782,12 @@ select{
   }
 }
 
+@media (min-width: 970px){
+  .container{
+    max-width: 970px;
+  }
+}
+
 @media (min-width: 1024px){
   .container{
     max-width: 1024px;
@@ -883,14 +889,6 @@ select{
   left: -137px;
 }
 
-.-left-\[218px\]{
-  left: -218px;
-}
-
-.-left-\[50px\]{
-  left: -50px;
-}
-
 .-left-\[60\%\]{
   left: -60%;
 }
@@ -943,18 +941,10 @@ select{
   left: 1rem;
 }
 
-.left-6{
-  left: 1.5rem;
-}
-
 .left-\[0px\]{
   left: 0px;
 }
 
-.left-\[108px\]{
-  left: 108px;
-}
-
 .left-\[160\%\]{
   left: 160%;
 }
@@ -963,10 +953,6 @@ select{
   left: 17.6%;
 }
 
-.left-\[200px\]{
-  left: 200px;
-}
-
 .left-\[45\%\]{
   left: 45%;
 }
@@ -1023,10 +1009,6 @@ select{
   top: 1.25rem;
 }
 
-.top-8{
-  top: 2rem;
-}
-
 .top-\[112px\]{
   top: 112px;
 }
@@ -1099,6 +1081,14 @@ select{
   z-index: 2;
 }
 
+.z-\[5\]{
+  z-index: 5;
+}
+
+.z-\[6\]{
+  z-index: 6;
+}
+
 .col-span-1{
   grid-column: span 1 / span 1;
 }
@@ -1246,10 +1236,6 @@ select{
   margin-bottom: 1.5rem;
 }
 
-.-mb-2{
-  margin-bottom: -0.5rem;
-}
-
 .-mb-\[112\%\]{
   margin-bottom: -112%;
 }
@@ -1418,6 +1404,10 @@ select{
   margin-right: 30px;
 }
 
+.mr-\[50px\]{
+  margin-right: 50px;
+}
+
 .mt-0{
   margin-top: 0px;
 }
@@ -1446,10 +1436,6 @@ select{
   margin-top: 0.5rem;
 }
 
-.mt-20{
-  margin-top: 5rem;
-}
-
 .mt-3{
   margin-top: 0.75rem;
 }
@@ -1482,6 +1468,10 @@ select{
   margin-top: 70px;
 }
 
+.mr-\[16px\]{
+  margin-right: 16px;
+}
+
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -1661,10 +1651,6 @@ select{
   height: 90px;
 }
 
-.h-\[calc\(100\%-112px\)\]{
-  height: calc(100% - 112px);
-}
-
 .h-\[calc\(100\%-1px\)\]{
   height: calc(100% - 1px);
 }
@@ -1891,6 +1877,10 @@ select{
   width: 100vw;
 }
 
+.\!w-full{
+  width: 100% !important;
+}
+
 .min-w-\[11\.5rem\]{
   min-width: 11.5rem;
 }
@@ -1993,6 +1983,10 @@ select{
   max-width: 22rem;
 }
 
+.max-w-\[242px\]{
+  max-width: 242px;
+}
+
 .max-w-\[29\.18rem\]{
   max-width: 29.18rem;
 }
@@ -2095,11 +2089,6 @@ select{
   table-layout: fixed;
 }
 
-.origin-top-right{
-  -webkit-transform-origin: top right;
-          transform-origin: top right;
-}
-
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2570,6 +2559,10 @@ select{
   overflow-x: scroll;
 }
 
+.overflow-y-scroll{
+  overflow-y: scroll;
+}
+
 .whitespace-nowrap{
   white-space: nowrap;
 }
@@ -5217,10 +5210,6 @@ select{
   --tw-gradient-to: #854D18 var(--tw-gradient-to-position);
 }
 
-.fill-neutral-150{
-  fill: #ECEDF0;
-}
-
 .stroke-amber-100{
   stroke: #FFF3D4;
 }
@@ -5956,10 +5945,6 @@ select{
   padding-right: 12rem;
 }
 
-.pr-6{
-  padding-right: 1.5rem;
-}
-
 .pr-7{
   padding-right: 1.75rem;
 }
@@ -5972,10 +5957,6 @@ select{
   padding-right: 10px;
 }
 
-.pr-\[34px\]{
-  padding-right: 34px;
-}
-
 .pt-0{
   padding-top: 0px;
 }
@@ -6883,12 +6864,6 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-home-drop{
-  --tw-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
-  --tw-shadow-colored: 0px 10px 30px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-inner{
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
@@ -9547,6 +9522,11 @@ select{
   color: rgb(30 86 227 / var(--tw-text-opacity));
 }
 
+.group\/split:hover .group-hover\/split\:text-neutral-1000{
+  --tw-text-opacity: 1;
+  color: rgb(0 6 21 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:text-neutral-1000{
   --tw-text-opacity: 1;
   color: rgb(0 6 21 / var(--tw-text-opacity));
@@ -9718,6 +9698,10 @@ select{
     margin-left: 0px;
   }
 
+  .tb\:mr-4{
+    margin-right: 1rem;
+  }
+
   .tb\:mt-0{
     margin-top: 0px;
   }
@@ -9754,20 +9738,12 @@ select{
     display: inline-flex;
   }
 
-  .tb\:grid{
-    display: grid;
-  }
-
   @media (min-width: 600px){
     .tb\:tb\:grid{
       display: grid;
     }
   }
 
-  .tb\:inline-grid{
-    display: inline-grid;
-  }
-
   .tb\:hidden{
     display: none;
   }
@@ -10003,11 +9979,6 @@ select{
     background-color: rgb(14 165 120 / var(--tw-bg-opacity));
   }
 
-  .tb\:bg-neutral-150{
-    --tw-bg-opacity: 1;
-    background-color: rgb(236 237 240 / var(--tw-bg-opacity));
-  }
-
   .tb\:bg-pink-500{
     --tw-bg-opacity: 1;
     background-color: rgb(225 58 124 / var(--tw-bg-opacity));
@@ -10084,6 +10055,10 @@ select{
     padding-right: 0px;
   }
 
+  .tb\:pr-4{
+    padding-right: 1rem;
+  }
+
   .tb\:pt-0{
     padding-top: 0px;
   }
@@ -10621,10 +10596,6 @@ select{
     min-width: 15rem;
   }
 
-  .tb-l\:min-w-\[169px\]{
-    min-width: 169px;
-  }
-
   .tb-l\:min-w-\[400px\]{
     min-width: 400px;
   }
@@ -10633,6 +10604,10 @@ select{
     max-width: 1240px;
   }
 
+  .tb-l\:max-w-\[210px\]{
+    max-width: 210px;
+  }
+
   .tb-l\:max-w-\[658px\]{
     max-width: 658px;
   }
@@ -10721,6 +10696,11 @@ select{
     border-right-color: rgb(229 231 235 / var(--tw-border-opacity));
   }
 
+  .tb-l\:bg-neutral-150{
+    --tw-bg-opacity: 1;
+    background-color: rgb(236 237 240 / var(--tw-bg-opacity));
+  }
+
   .tb-l\:bg-gradient-to-r{
     background-image: linear-gradient(to right, var(--tw-gradient-stops));
   }
@@ -10768,6 +10748,12 @@ select{
   }
 }
 
+@media (min-width: 970px){
+  .tb-xl\:max-w-\[250px\]{
+    max-width: 250px;
+  }
+}
+
 @media (min-width: 1024px){
   .lg\:flex{
     display: flex;
@@ -10947,6 +10933,10 @@ select{
     width: 100%;
   }
 
+  .db\:min-w-\[169px\]{
+    min-width: 169px;
+  }
+
   .db\:min-w-\[28\.063rem\]{
     min-width: 28.063rem;
   }

package/tailwind.config.js

@@ -177,6 +177,7 @@ module.exports = {
         'tb': '600px',
         'tb-m': '800px',
         'tb-l': '905px',
+        'tb-xl':'970px',
         'db-s':'1024px',
         'db': '1240px',
         'db-l': '2560px'