hds-web 1.21.8 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.21.8",
+  "version": "1.22.0",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -14,8 +14,8 @@
     "framer-motion": "^10.12.16",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-github-btn": "^1.4.0",
     "react-instantsearch-dom": "^6.40.1",
     "react-markdown": "^8.0.7",

package/src/HDS/components/Cards/StoryCard/storysm.js

@@ -42,7 +42,6 @@ export default function StoryCard(props) {
                                         )
                                     }
                                 </div>
-
                             )
                         }
                     </div>
@@ -76,7 +75,6 @@ export default function StoryCard(props) {
 
                                 </div>
                             </div>
-
                         )}
                 </>
 

package/src/HDS/components/Cards/StoryCard/storyxl.js

@@ -25,7 +25,7 @@ export default function StoryCardXL(props) {
                     {props.title &&
                         (
                             <div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px] ">
-                            <Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden max-h-[144px] overflow-clip'>{props.title}</Typography>
+                            <Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden min-h-[144px] overflow-clip'>{props.title}</Typography>
                                 {props.heroList &&
                                     (
                                         <div>

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

@@ -279,7 +279,10 @@ export default function V3Header(props) {
                     </div>
                     <div className='hds-hidden-tbl flex z-[10] items-center gap-6'>
                         <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
-                            <AlgoliaSearch {...props} />
+                            {
+                            !props.hideSearch &&
+                                (<AlgoliaSearch {...props} />)
+                            }
                         </div>
                         {!(isCompany || isDeveloper || isProduct) &&
                             (
@@ -308,9 +311,10 @@ export default function V3Header(props) {
                     </nav>
 
                     <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
-
-                        <AlgoliaSearch {...props} />
-
+                        {
+                            !props.hideSearch &&
+                        (<AlgoliaSearch {...props} />)
+                        }
                         <a href='/contact-us?type=hasuraenterprise' className='hds-hidden db:flex'>
                             <Typography textStyle='body3c-medium' className='text-neutral-800 hover:text-blue-600'>
                                 Contact Sales
@@ -488,6 +492,7 @@ export default function V3Header(props) {
 }
 
 V3Header.defaultProps = {
+    hideSearch:false,
     HEADER_LIST: [
         {
             title: 'Product',

package/src/styles/tailwind.css

@@ -1485,14 +1485,14 @@ select{
   margin-top: 14px;
 }
 
-.mt-\[70px\]{
-  margin-top: 70px;
-}
-
 .mt-\[2px\]{
   margin-top: 2px;
 }
 
+.mt-\[70px\]{
+  margin-top: 70px;
+}
+
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -1664,6 +1664,10 @@ select{
   height: 60px;
 }
 
+.h-\[700px\]{
+  height: 700px;
+}
+
 .h-\[718px\]{
   height: 718px;
 }
@@ -1700,10 +1704,6 @@ select{
   height: 100vh;
 }
 
-.max-h-\[144px\]{
-  max-height: 144px;
-}
-
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1720,10 +1720,6 @@ select{
   max-height: 28px;
 }
 
-.max-h-\[32px\]{
-  max-height: 32px;
-}
-
 .max-h-\[40px\]{
   max-height: 40px;
 }
@@ -1748,6 +1744,10 @@ select{
   min-height: 12px;
 }
 
+.min-h-\[144px\]{
+  min-height: 144px;
+}
+
 .min-h-\[20px\]{
   min-height: 20px;
 }
@@ -1986,10 +1986,6 @@ select{
   min-width: 312px;
 }
 
-.min-w-\[32px\]{
-  min-width: 32px;
-}
-
 .min-w-\[48px\]{
   min-width: 48px;
 }
@@ -2044,6 +2040,10 @@ select{
   max-width: 18rem;
 }
 
+.max-w-\[20px\]{
+  max-width: 20px;
+}
+
 .max-w-\[210px\]{
   max-width: 210px;
 }
@@ -2060,14 +2060,14 @@ select{
   max-width: 22rem;
 }
 
-.max-w-\[240px\]{
-  max-width: 240px;
-}
-
 .max-w-\[242px\]{
   max-width: 242px;
 }
 
+.max-w-\[280px\]{
+  max-width: 280px;
+}
+
 .max-w-\[29\.18rem\]{
   max-width: 29.18rem;
 }
@@ -2146,12 +2146,8 @@ select{
   max-width: min-content;
 }
 
-.max-w-\[280px\]{
-  max-width: 280px;
-}
-
-.max-w-\[20px\]{
-  max-width: 20px;
+.max-w-\[518px\]{
+  max-width: 518px;
 }
 
 .flex-1{
@@ -6435,6 +6431,10 @@ select{
   padding-bottom: 2px;
 }
 
+.pb-0{
+  padding-bottom: 0px;
+}
+
 .pb-1{
   padding-bottom: 0.25rem;
 }
@@ -6487,6 +6487,10 @@ select{
   padding-bottom: 56.2%;
 }
 
+.pl-0{
+  padding-left: 0px;
+}
+
 .pl-1{
   padding-left: 0.25rem;
 }
@@ -6627,14 +6631,6 @@ select{
   padding-top: 81px;
 }
 
-.pb-0{
-  padding-bottom: 0px;
-}
-
-.pl-0{
-  padding-left: 0px;
-}
-
 .text-left{
   text-align: left;
 }
@@ -10392,6 +10388,14 @@ select{
   opacity: 0.3;
 }
 
+.group\/img:hover .group-hover\/img\:opacity-0{
+  opacity: 0;
+}
+
+.group\/img:hover .group-hover\/img\:opacity-100{
+  opacity: 1;
+}
+
 .group\/flyoutc:hover .group-hover\/flyoutc\:shadow-lg{
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -10586,10 +10590,6 @@ select{
     margin-left: 3.5rem;
   }
 
-  .tb\:mr-2{
-    margin-right: 0.5rem;
-  }
-
   .tb\:mr-4{
     margin-right: 1rem;
   }
@@ -10644,14 +10644,6 @@ select{
     display: none;
   }
 
-  .tb\:h-8{
-    height: 2rem;
-  }
-
-  .tb\:h-full{
-    height: 100%;
-  }
-
   .tb\:h-5{
     height: 1.25rem;
   }
@@ -10660,6 +10652,14 @@ select{
     height: 1.5rem;
   }
 
+  .tb\:h-8{
+    height: 2rem;
+  }
+
+  .tb\:h-full{
+    height: 100%;
+  }
+
   .tb\:max-h-\[181px\]{
     max-height: 181px;
   }
@@ -10684,6 +10684,14 @@ select{
     width: 50%;
   }
 
+  .tb\:w-5{
+    width: 1.25rem;
+  }
+
+  .tb\:w-6{
+    width: 1.5rem;
+  }
+
   .tb\:w-8{
     width: 2rem;
   }
@@ -10706,14 +10714,6 @@ select{
     width: 100%;
   }
 
-  .tb\:w-5{
-    width: 1.25rem;
-  }
-
-  .tb\:w-6{
-    width: 1.5rem;
-  }
-
   .tb\:min-w-\[150px\]{
     min-width: 150px;
   }
@@ -10730,6 +10730,10 @@ select{
     min-width: 310px;
   }
 
+  .tb\:min-w-\[32px\]{
+    min-width: 32px;
+  }
+
   .tb\:min-w-\[396px\]{
     min-width: 396px;
   }
@@ -10738,10 +10742,6 @@ select{
     min-width: 500px;
   }
 
-  .tb\:min-w-\[32px\]{
-    min-width: 32px;
-  }
-
   .tb\:max-w-\[17rem\]{
     max-width: 17rem;
   }
@@ -10762,6 +10762,10 @@ select{
     max-width: 290px;
   }
 
+  .tb\:max-w-\[32px\]{
+    max-width: 32px;
+  }
+
   .tb\:max-w-\[393px\]{
     max-width: 393px;
   }
@@ -10782,10 +10786,6 @@ select{
     max-width: 763px;
   }
 
-  .tb\:max-w-\[32px\]{
-    max-width: 32px;
-  }
-
   .tb\:-translate-y-1\/2{
     --tw-translate-y: -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));
@@ -10965,6 +10965,11 @@ select{
     padding-right: 2.5rem;
   }
 
+  .tb\:px-2{
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
   .tb\:px-3{
     padding-left: 0.75rem;
     padding-right: 0.75rem;
@@ -10990,11 +10995,6 @@ select{
     padding-bottom: 3.5rem;
   }
 
-  .tb\:px-2{
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
   .tb\:py-2{
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -11024,10 +11024,6 @@ select{
     padding-right: 0px;
   }
 
-  .tb\:pr-2{
-    padding-right: 0.5rem;
-  }
-
   .tb\:pr-4{
     padding-right: 1rem;
   }