hds-web 1.18.9 → 1.19.1

package/package.json

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

package/src/HDS/assets/icons/zap.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.9999 2L4.09332 12.6879C3.74451 13.1064 3.57011 13.3157 3.56744 13.4925C3.56512 13.6461 3.63359 13.7923 3.75312 13.8889C3.89061 14 4.16304 14 4.7079 14H11.9999L10.9999 22L19.9064 11.3121C20.2552 10.8936 20.4296 10.6843 20.4323 10.5075C20.4346 10.3539 20.3661 10.2077 20.2466 10.1111C20.1091 10 19.8367 10 19.2918 10H11.9999L12.9999 2Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.9999 2L4.09332 12.6879C3.74451 13.1064 3.57011 13.3157 3.56744 13.4925C3.56512 13.6461 3.63359 13.7923 3.75312 13.8889C3.89061 14 4.16304 14 4.7079 14H11.9999L10.9999 22L19.9064 11.3121C20.2552 10.8936 20.4296 10.6843 20.4323 10.5075C20.4346 10.3539 20.3661 10.2077 20.2466 10.1111C20.1091 10 19.8367 10 19.2918 10H11.9999L12.9999 2Z" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/components/Cards/Announcement/announcementMd.js

@@ -19,29 +19,31 @@ export default function AnnouncementMd(props) {
   const tagClass = props.tagColor ? props.tagColor : 'purple';
   if (isBannerActive) {
     return (
-      <div className={`${bgClass} flex my-6 justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center items-center`}>
-        <div className="block items-center tb:flex tb:justify-center">
-          {
-            props.brandImg && (
-              <div className="pl-3 tb:pl-14">
-                <img className="max-h-[34px]" src={props.brandImg} alt={props.brandImgAlt} />
-              </div>
-            )
-          }
-          {
-            props.tagText && (
-              <Typography textStyle="body2-medium" className={`inline-flex py-1 px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}>{props.tagText}</Typography>
-            )
-          }
-          <a href={props.linkUrl} className="px-3 block tb:px-0 pb-1 tb:pb-0">
-            <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
-              {props.linkText}
-              <Icon height={'block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
-            </Typography>
-          </a>
-        </div>
-        <div className=" static mx-3 tb:mx-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-8 min-w-[32px] h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>toggleBanner(false)}>
-          <Icon height={'block w-6 h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
+      <div className="py-6">
+        <div className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center items-center`}>
+          <div className="block items-center tb:flex tb:justify-center">
+            {
+              props.brandImg && (
+                <div className="pl-3 tb:pl-14">
+                  <img className="max-h-[34px]" src={props.brandImg} alt={props.brandImgAlt} />
+                </div>
+              )
+            }
+            {
+              props.tagText && (
+                <Typography textStyle="body2-medium" className={`inline-flex py-1 px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}>{props.tagText}</Typography>
+              )
+            }
+            <a href={props.linkUrl} className="px-3 block tb:px-0 pb-1 tb:pb-0">
+              <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
+                {props.linkText}
+                <Icon height={'block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
+              </Typography>
+            </a>
+          </div>
+          <div className=" static mx-3 tb:mx-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-8 min-w-[32px] h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>toggleBanner(false)}>
+            <Icon height={'block w-6 h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
+          </div>
         </div>
       </div>
     )

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

@@ -31,11 +31,11 @@ export default function FeedbackCard(props) {
             <div className={`${HDSColor(props.dividerClass)} mb-2`}></div>
           )
         }
-        <div className={"mb-s:flex items-start" + ((props.dividerClass) ? " pt-6" : "mt-0")}>
+        <div className={"tb:flex pt-1 tb:pt-0 items-start" + ((props.dividerClass) ? " pt-6" : "mt-0")}>
           <div className={"border border-neutral-150 p-2 flex items-center justify-center rounded-2xl " +  logoBg + ((props.dividerClass) ? " w-[72px] h-[56px] min-w-[72px]" : " w-[112px] h-[90px] min-w-[112px] ")}>
             <img className="max-h-[20px]" src={props.brandImgUrl} alt={props.brandImgAlt}/>
           </div>
-          <div className={"pt-4 mb-s:pt-0 " + ((props.dividerClass) ? "mb-s:pl-6" : "mb-s:pl-8")}>
+          <div className={"pt-4 tb:pt-0 " + ((props.dividerClass) ? "tb:pl-6" : "tb:pl-8")}>
             <Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
             <div className="flex">
               <HDSButton

package/src/HDS/components/Cards/Menu/flyoutB.js

@@ -18,7 +18,8 @@ export default function FlyoutB(props) {
             { cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Button 1' },
 
 
-        ]
+        ],
+        tertiaryBtn
     } = props;
 
     return (
@@ -51,41 +52,75 @@ export default function FlyoutB(props) {
                     <Typography className='mt-2 text-neutral-600 relative z-[2]' textStyle='body3'>{mainDescription}</Typography>
                 </div>
             </a>
+            <div className="flex flex-col gap-2">
+                {secondaryBtn.map((btn, index) => (
+                    <a key={index} href={btn.cta_link} className="group/btn justify-around  cursor-pointer px-2 ">
 
-            {secondaryBtn.map((btn, index) => (
-                <a key={index} href={btn.cta_link} className="group/btn justify-around  cursor-pointer border-t border-neutral-150  p-2 ">
-                
-                    <div className=" flex items-center p-4 hover:bg-neutral-150 rounded-xl ">
-                        <div className="flex w-full justify-between items-center z-[2]">
-                            <div
-                                className="flex rounded-lg gap-2 items-center ">
-                                {btn.cta_leftVariantIcon && (
+                        <div className=" flex items-center p-4 hover:bg-neutral-150 rounded-xl ">
+                            <div className="flex w-full justify-between items-center z-[2]">
+                                <div
+                                    className="flex rounded-lg gap-2 items-center ">
+                                    {btn.cta_leftVariantIcon && (
+                                        <Icon
+                                            height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2   '}
+                                            variant={btn.cta_leftVariantIcon}
+                                            strokeClass='stroke-neutral-500'
+                                        />
+                                    )}
+
+                                    <Typography
+                                        textStyle='body3c-medium'
+                                        className='text-neutral-900  group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
+                                        {btn.cta_text}
+                                    </Typography>
+                                </div>
+                                <div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
                                     <Icon
-                                        height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2   '}
-                                        variant={btn.cta_leftVariantIcon}
-                                        strokeClass='stroke-neutral-500'
+                                        height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out   '}
+                                        variant={'chevronright'}
+                                        strokeClass={'stroke-blue-500'}
                                     />
-                                )}
-                          
-                            <Typography
-                                textStyle='body3c-medium'
-                                className='text-neutral-900  group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
-                                {btn.cta_text}
-                            </Typography>
-                            </div>            
-                            <div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
-                                <Icon
-                                    height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out   '}
-                                    variant={'chevronright'}
-                                    strokeClass={'stroke-blue-500'}
-                                />
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </a>))}
+
+                {tertiaryBtn && tertiaryBtn.map((t, index) => (
+                    <a key={index} href={t.cta_link} className="group/btn justify-around  cursor-pointer px-2 pb-2 ">
+
+                        <div className=" flex items-center p-4 hover:bg-neutral-150 rounded-xl ">
+                            <div className="flex w-full justify-between items-center z-[2]">
+                                <div
+                                    className="flex rounded-lg gap-2 items-center ">
+                                    {t.cta_leftVariantIcon && (
+                                        <Icon
+                                            height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2   '}
+                                            variant={t.cta_leftVariantIcon}
+                                            strokeClass='stroke-neutral-500'
+                                        />
+                                    )}
+
+                                    <Typography
+                                        textStyle='body3c-medium'
+                                        className='text-neutral-900  group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
+                                        {t.cta_text}
+                                    </Typography>
+                                </div>
+                                <div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
+                                    <Icon
+                                        height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out   '}
+                                        variant={'chevronright'}
+                                        strokeClass={'stroke-blue-500'}
+                                    />
+                                </div>
                             </div>
                         </div>
-                    </div>
 
-               
-                </a>))}
 
+                    </a>))}
+            </div>
         </div>
 
     );

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

@@ -8,33 +8,10 @@ import { motion } from "framer-motion"
 import { AnimatePresence } from 'framer-motion';
 // import { AlgoliaSearch } from '../../helpers/AlgoliaSearch';
 
-const solutions = [
-    {
-        name: 'Analytics',
-        description: 'Get a better understanding of where your traffic is coming from.',
-        href: '#',
-        icon: 'home03',
-    },
-    {
-        name: 'Engagement',
-        description: 'Speak directly to your customers in a more meaningful way.',
-        href: '#',
-        icon: 'home03',
-    },
-    {
-        name: 'Security',
-        description: 'Your customers’ data will be safe and secure.',
-        href: '#',
-        icon: 'home03'
-    },
-]
-
 function classNames(...classes) {
     return classes.filter(Boolean).join(' ')
 }
 
-
-
 export default function V3Header(props) {
     const listSize = props.HEADER_LIST.length;
     const [mobileNavOpen, setmobileNavOpen] = useState(false);
@@ -277,7 +254,7 @@ export default function V3Header(props) {
 
     return (
         <div className="relative mx-auto">
-            <div className={`flex items-center ${HDSColor(props.headerBg)} justify-between py-4 db:py-6 tb-l:justify-start`}>
+            <div className={`flex items-center ${HDSColor(props.headerBg)} justify-between py-4 db:py-3 tb-l:justify-start`}>
                 <div className='flex flex-row justify-between items-center w-full tb-l:w-fit'>
                     <div>
 
@@ -505,8 +482,11 @@ V3Header.defaultProps = {
                 primaryBtnLabel: 'Hasura Platform',
                 primaryBtnCTA:'/products',
                 strokeClass: 'stroke-neutral-800',
+                tertiaryBtn: [
+                    { cta_leftVariantIcon: 'checksquarebroken', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare Plans', cta_link:'/pricing' }
+                ],
                 secondaryBtn: [
-                    { cta_leftVariantIcon: 'checksquarebroken', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans', cta_link:'/pricing' }
+                    { cta_leftVariantIcon: 'zap', cta_leftVariantIconColor: '#6C737F', cta_text: 'Deployment Options', cta_link: '/products/deployment' }
                 ],
             },
             secondaryCardArr:

package/src/HDS/foundation/Typography/Typography.js

@@ -43,7 +43,7 @@ export default function Typography(props) {
         'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
         'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
         'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
-        'quote': 'font-petrona font-normal italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
+      'quote': 'font-petrona italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
         'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
         'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
       }

package/src/HDS/modules/navCard/navCard.js

@@ -15,9 +15,9 @@ export default function NavCard(props) {
         return (
             <>
                 <div className=''>
-                    {tabContent.title && <Typography textStyle='body1' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
+                    {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
 
-                    {tabContent.subTitle && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
+                    {tabContent.subTitle && <Typography textStyle='body1' className={ 'mt-2 ' + HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
                     {tabContent.readMore_cta && <div className="flex">
                         <a href={tabContent.readMore_cta_link ?? ''} >
                             <HDSButton

package/src/styles/tailwind.css

@@ -1323,6 +1323,10 @@ select{
   margin-bottom: 1px;
 }
 
+.ml-0{
+  margin-left: 0px;
+}
+
 .ml-1{
   margin-left: 0.25rem;
 }
@@ -1666,6 +1670,10 @@ select{
   max-height: 26.25;
 }
 
+.max-h-\[34px\]{
+  max-height: 34px;
+}
+
 .max-h-\[530px\]{
   max-height: 530px;
 }
@@ -1912,6 +1920,10 @@ select{
   min-width: 312px;
 }
 
+.min-w-\[32px\]{
+  min-width: 32px;
+}
+
 .min-w-\[48px\]{
   min-width: 48px;
 }
@@ -6452,6 +6464,10 @@ select{
   padding-top: 0px;
 }
 
+.pt-1{
+  padding-top: 0.25rem;
+}
+
 .pt-10{
   padding-top: 2.5rem;
 }
@@ -6777,8 +6793,8 @@ select{
 
 .text-hds-m-quote{
   font-size: 1.125rem;
-  line-height: 1.75rem;
-  letter-spacing: -0.01em;
+  line-height: 1.5;
+  letter-spacing: -0.016em;
   font-weight: 400;
 }
 
@@ -9083,6 +9099,10 @@ select{
           animation: spin 1s linear infinite;
 }
 
+.hover\:cursor-default:hover{
+  cursor: default;
+}
+
 .hover\:rounded-3xl:hover{
   border-radius: 1.5rem;
 }
@@ -10204,18 +10224,6 @@ select{
   .mb-s\:rounded-tr-none{
     border-top-right-radius: 0px;
   }
-
-  .mb-s\:pl-6{
-    padding-left: 1.5rem;
-  }
-
-  .mb-s\:pl-8{
-    padding-left: 2rem;
-  }
-
-  .mb-s\:pt-0{
-    padding-top: 0px;
-  }
 }
 
 @media (min-width: 400px){
@@ -10275,6 +10283,14 @@ select{
 }
 
 @media (min-width: 600px){
+  .tb\:absolute{
+    position: absolute;
+  }
+
+  .tb\:left-6{
+    left: 1.5rem;
+  }
+
   .tb\:left-auto{
     left: auto;
   }
@@ -10283,6 +10299,11 @@ select{
     right: 0px;
   }
 
+  .tb\:mx-0{
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .tb\:mb-16{
     margin-bottom: 4rem;
   }
@@ -10291,6 +10312,10 @@ select{
     margin-left: 0px;
   }
 
+  .tb\:ml-14{
+    margin-left: 3.5rem;
+  }
+
   .tb\:mr-4{
     margin-right: 1rem;
   }
@@ -10443,6 +10468,12 @@ select{
     max-width: 763px;
   }
 
+  .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));
+            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));
+  }
+
   .tb\:snap-always{
     scroll-snap-stop: always;
   }
@@ -10535,6 +10566,10 @@ select{
     border-radius: 1.5rem;
   }
 
+  .tb\:rounded-full{
+    border-radius: 9999px;
+  }
+
   .tb\:border{
     border-width: 1px;
   }
@@ -10649,6 +10684,18 @@ select{
     padding-bottom: 2rem;
   }
 
+  .tb\:pl-14{
+    padding-left: 3.5rem;
+  }
+
+  .tb\:pl-6{
+    padding-left: 1.5rem;
+  }
+
+  .tb\:pl-8{
+    padding-left: 2rem;
+  }
+
   .tb\:pr-0{
     padding-right: 0px;
   }
@@ -10926,8 +10973,8 @@ select{
 
   .tb\:text-hds-t-quote{
     font-size: 1.125rem;
-    line-height: 1.75rem;
-    letter-spacing: -0.01em;
+    line-height: 1.5;
+    letter-spacing: -0.016em;
     font-weight: 400;
   }
 
@@ -11087,6 +11134,10 @@ select{
     top: 9rem;
   }
 
+  .tb-m\:ml-6{
+    margin-left: 1.5rem;
+  }
+
   .tb-m\:mr-0{
     margin-right: 0px;
   }
@@ -11697,9 +11748,9 @@ select{
     padding-bottom: 5rem;
   }
 
-  .db\:py-6{
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+  .db\:py-3{
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
   }
 
   .db\:pb-0{
@@ -11983,8 +12034,8 @@ select{
 
   .db\:text-hds-d-quote{
     font-size: 1.5rem;
-    line-height: 2.25rem;
-    letter-spacing: -0.01em;
+    line-height: 1.5;
+    letter-spacing: -0.016em;
     font-weight: 400;
   }
 
@@ -12011,6 +12062,10 @@ select{
   margin-bottom: 0px;
 }
 
+.\[\&\>div\]\:inline-block>div{
+  display: inline-block;
+}
+
 .\[\&\>p\>a\]\:text-blue-600>p>a{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));

package/tailwind.config.js

@@ -155,6 +155,7 @@ module.exports = {
     },
     letterSpacing: {
       tightest: '-.02em',
+      tighter2: '-0.016em',
       tighter: '-.015em',
       tight: '-.01em',
       normal: '0',
@@ -794,20 +795,20 @@ module.exports = {
 
         // quote-style
         'hds-m-quote': ['1.125rem', {
-          lineHeight: '1.75rem',
-          letterSpacing: '-0.01em',
+          lineHeight: '1.5',
+          letterSpacing: '-0.016em',
           fontWeight: '400',
           fontStyle: 'italic',
         }],
         'hds-t-quote': ['1.125rem', {
-          lineHeight: '1.75rem',
-          letterSpacing: '-0.01em',
+          lineHeight: '1.5',
+          letterSpacing: '-0.016em',
           fontWeight: '400',
           fontStyle: 'italic',
         }],
         'hds-d-quote': ['1.5rem', {
-          lineHeight: '2.25rem',
-          letterSpacing: '-0.01em',
+          lineHeight: '1.5',
+          letterSpacing: '-0.016em',
           fontWeight: '400',
           fontStyle: 'italic',
         }],