hds-web 1.12.1 → 1.12.3

package/package.json

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

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -11,7 +11,7 @@ export default function FeedbackCard(props) {
     logoBg = HDSColor(props.logoBg);
   }
   return (
-    <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10 grid mb-6 db-s:mb-0 last:mb-0 flex-1 max-w-[920px] mx-auto flex-col'>
+    <a href={props.caseStudyUrl} className='group bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10 grid mb-6 db-s:mb-0 last:mb-0 flex-1 max-w-[920px] mx-auto flex-col transition-all duration-300 ease-in-out hover:shadow-lg hover:translate-y-0.5'>
       <div className=" self-start">
         <ProfileAvatar
           name={props.speakerName}
@@ -37,7 +37,7 @@ export default function FeedbackCard(props) {
           </div>
           <div className={"pt-4 mb-s:pt-0 " + ((props.dividerClass) ? "mb-s:pl-6" : "mb-s:pl-8")}>
             <Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
-            <a href={props.caseStudyUrl} className="flex">
+            <div className="flex">
               <HDSButton
                 label='Read case study'
                 type='secondaryLink'
@@ -52,10 +52,10 @@ export default function FeedbackCard(props) {
                 btnTextHoverClass= 'hover:text-blue-500'
                 animatedHoverStroke= 'group-hover:stroke-blue-500'
               />
-            </a>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </a>
   )
 }

package/src/HDS/components/Cards/Misc/iconCard.js

@@ -136,7 +136,7 @@ export default function IconCard(props) {
 
                     (
                         <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
-                            className={`bg-neutral-0 group grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg hover:translate-y-0.5' : '')}
+                            className={`bg-neutral-0 group grid h-full duration-300 transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg hover:translate-y-0.5 ' : '')}
                         >
                             <div className=" self-start">
                                 <div

package/src/HDS/components/Carousels/customCarousel.js

@@ -77,7 +77,7 @@ export default function CustomCarousel(props) {
 
     const maxVisibleCards = 6;
 
-    const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0 shadow hover:bg-neutral-0 flex items-center justify-center shadow-md';
+    const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 ml-6 w-10 rounded-full bg-neutral-0 hover:bg-neutral-0 flex items-center justify-center shadow';
 
     const disableButton = (current, dir) => {
         if (dir === 'isLeft') {
@@ -106,7 +106,7 @@ export default function CustomCarousel(props) {
         >
             <span role="img" aria-label={`Arrow left `}>
                 {(
-                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
+                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#6C737F' />
                 )}
             </span>
         </button>
@@ -124,7 +124,7 @@ export default function CustomCarousel(props) {
         >
             <span role="img" aria-label={`Arrow right `}>
                 {(
-                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
+                    <Icon height={'h-6 w-6 stroke-[1.5]'} variant={'chevronright'} strokeColor='#6C737F' />
                 )}
             </span>
         </button>

package/src/HDS/components/Footers/v3Footer.js

@@ -80,7 +80,7 @@ export default function V3Footer(props) {
         </div>
         <div className='flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
           {
-            props.footerLinks.map((footerLink, index) =>(
+            props.footerLinks.map((footerLink, index) => (
               <div key={index} className='min-w-[130px] db-s:min-w-fit'>
                 <Typography textStyle='body3c-semi-bold' className='text-neutral-600'>{footerLink.title}</Typography>
                 {
@@ -98,7 +98,7 @@ export default function V3Footer(props) {
       <div className='flex flex-col tb-m:flex-row items-center justify-between tb:pt-24'>
         <div className='flex items-center justify-center pt-10 tb-m:pt-0 pb-4 tb-m:pb-0 tb-m:justify-start'>
           {
-            socialShare.map((icon, index)=>(
+            socialShare.map((icon, index) => (
               <a href={icon.linkUrl} className='mx-2 tb-l:mx-4 first:ml-0 last:mr-0 [&>svg>path]:fill-neutral-400 [&>svg>path]:hover:fill-neutral-600'>
                 {icon.icon}
               </a>
@@ -106,10 +106,14 @@ export default function V3Footer(props) {
           }
         </div>
         {isItems && !isError && (
-          <div className=' bg-neutral-0 rounded-full shadow px-4 py-2 inline-flex justify-center items-center'>
-            <div className='w-4 h-4 bg-green-400 rounded-full mr-2'></div>
-            <Typography textStyle='body3' className='text-neutral-1000'>{isItems?.status.description}</Typography>
-          </div>
+          <>
+            <a href='https://status.hasura.io/' className=''>
+              <div className=' bg-neutral-0 rounded-full shadow hover:shadow-lg transition-all duration-300 px-4 py-2 inline-flex justify-center items-center'>
+                <div className='w-4 h-4 bg-green-400 rounded-full mr-2'></div>
+                <Typography textStyle='body3' className='text-neutral-1000'>{isItems?.status.description}</Typography>
+              </div>
+            </a>
+          </>
         )}
         <div>
           <Typography textStyle='body3c' className='text-neutral-600 pt-4 tb-m:pt-0'>© {new Date().getFullYear()} Hasura Inc. All rights reserved</Typography>
@@ -301,4 +305,4 @@ V3Footer.defaultProps = {
       ]
     },
   ],
-}
+}

package/src/HDS/modules/Cards/dataSourceCard.js

@@ -35,6 +35,7 @@ export default function DataSourcesCard(props) {
                     <video
                         autoPlay
                         loop
+                        playsInline
                         muted
                         src={props.video_url}
                         className=" rounded-xl db:rounded-none db:rounded-br-3xl db:rounded-tl-3xl"

package/src/styles/tailwind.css

@@ -1591,6 +1591,10 @@ select{
   max-height: 100%;
 }
 
+.min-h-\[12px\]{
+  min-height: 12px;
+}
+
 .min-h-\[20px\]{
   min-height: 20px;
 }
@@ -1773,12 +1777,16 @@ select{
   min-width: 11.5rem;
 }
 
+.min-w-\[110px\]{
+  min-width: 110px;
+}
+
 .min-w-\[112px\]{
   min-width: 112px;
 }
 
-.min-w-\[130px\]{
-  min-width: 130px;
+.min-w-\[12px\]{
+  min-width: 12px;
 }
 
 .min-w-\[169px\]{
@@ -1827,6 +1835,10 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[130px\]{
+  min-width: 130px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -5911,6 +5923,10 @@ select{
   stroke-width: 2;
 }
 
+.stroke-\[1\.5\]{
+  stroke-width: 1.5;
+}
+
 .stroke-\[1\.5px\]{
   stroke-width: 1.5px;
 }
@@ -7481,6 +7497,51 @@ select{
   }
 }
 
+@-webkit-keyframes up-right {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.25;
+  }
+
+  50% {
+    -webkit-transform: scale (1, 5);
+            transform: scale (1, 5);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.25;
+  }
+}
+
+@keyframes up-right {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.25;
+  }
+
+  50% {
+    -webkit-transform: scale (1, 5);
+            transform: scale (1, 5);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.25;
+  }
+}
+
+.blinking {
+  -webkit-animation: up-right 1s infinite;
+  animation: up-right 1s infinite;
+}
+
 .card-animation-wrapper {
   position: relative;
 }
@@ -8589,6 +8650,10 @@ select{
   margin-right: 0px;
 }
 
+.last\:justify-start:last-child{
+  justify-content: flex-start;
+}
+
 .last\:rounded-r-full:last-child{
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
@@ -9731,6 +9796,12 @@ select{
   }
 }
 
+@media not all and (min-width: 400px){
+  .max-mb-m\:last\:justify-start:last-child{
+    justify-content: flex-start;
+  }
+}
+
 @media (max-width: 369px){
   .max-\[369px\]\:mt-8{
     margin-top: 2rem;
@@ -9832,6 +9903,10 @@ select{
   .mb-m\:pt-0{
     padding-top: 0px;
   }
+
+  .mb-m\:last\:justify-start:last-child{
+    justify-content: flex-start;
+  }
 }
 
 @media (min-width: 600px){
@@ -11456,4 +11531,4 @@ select{
 .\[\&\>ul\]\:ps-4>ul{
   -webkit-padding-start: 1rem;
           padding-inline-start: 1rem;
-}
+}

package/tailwind.config.js

@@ -169,6 +169,7 @@ module.exports = {
     extend: {
       boxShadow: {
         'sh1': '0px -1px 3px rgba(28, 38, 63, 0.1), 0px -1px 2px rgba(28, 38, 63, 0.06)',
+        'home-drop': '0px 10px 30px 0px rgba(0, 0, 0, 0.16)'
       },
       screens: {
         'mb-s': '360px',