hds-web 1.21.4 → 1.21.6

package/package.json

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

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

@@ -45,7 +45,7 @@ export default function AnnouncementMd(props) {
             <a href={props.linkUrl} className="block pb-1 tb:pb-0">
               <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
                 {props.linkText}
-                <Icon height={' hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
+                <Icon height={' hds-hidden tb: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>

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

@@ -15,39 +15,30 @@ export default function StoryCard(props) {
             >
 
                 <>
-                    <div className='flex items-center justify-between'>
+                    <div className='flex items-center justify-between pb-5'>
                         {props.brandImageUrl && props.brandImageAlt && (
-                            <div className="max-w-[190px]">
-                                <img src={props.brandImageUrl} alt={props.brandImageAlt} className='max-w-[100px]' />
+                            <div className="max-h-[64px]">
+                                <img src={props.brandImageUrl} alt={props.brandImageAlt} className='max-h-[64px]' />
                             </div>
                         )
 
                         }
                         {props.iconVariant &&
                             (
-                                <div className="flex flex-row relative  ">
-                                    <div className="group-hover/sc:opacity-0 left-0 absolute">
-                                        {/* <Icon
-                                            height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
-                                            variant={props.iconArrowVariant}
-                                            strokeColor={props.iconArrowStrokeColor}
-                                            strokeClass={HDSColor(props.iconArrowStrokeClass)}
-                                        /> */}
-                                    </div>
-                                    {props.iconTag &&
-                                    (
-                                    <div className=" gap-2 transition-all duration-300 group-hover/sc:opacity-100 inline-flex flex-row translate-x-0 group-hover/sc:-translate-x-5">
-                                            <Icon
-                                                height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
-                                                variant={props.iconArrowVariant}
-                                                strokeColor={props.iconArrowStrokeColor}
-                                                strokeClass={HDSColor(props.iconArrowStrokeClass)}
-                                            />
-                                            <div
-                                            className=" opacity-0 group-hover/sc:opacity-100 transition-opacity duration-300 ">
-                                            <Typography textStyle='body3c' className='hidden group-hover/sc:block'>{props.iconTag}</Typography>
+                                <div className="hidden tb:flex flex-row relative  ">
+                                    {props.iconTag
+                                        && (
+                                            <div className="gap-2 items-center transition-all duration-[350ms] group-hover/sc:opacity-100 inline-flex flex-row  translate-x-0 group-hover/sc:-translate-x-5">
+                                                <Icon
+                                                    height={'w-6 h-6 stroke-[1.5px]'}
+                                                    variant={props.iconArrowVariant ?? ''}
+                                                    strokeClass='stroke-neutral-400'
+                                                />
+                                                <div
+                                                    className=" opacity-0 group-hover/sc:opacity-100 transition-opacity duration-[350ms] ">
+                                                    <Typography textStyle='body3-medium' className='hidden text-neutral-400 group-hover/sc:block'>{props.iconTag}</Typography>
+                                                </div>
                                             </div>
-                                        </div>
                                         )
                                     }
                                 </div>
@@ -60,7 +51,7 @@ export default function StoryCard(props) {
                             <div>
                                 <div className="translate-y-10 group-hover/sc:translate-y-0 duration-300 transition-all">
                                     <Typography
-                                        textStyle="body3"
+                                        textStyle="body1c"
                                         className={`${HDSColor(props.descTextColor)} mt-2`}>
                                         {props.description}
                                     </Typography>
@@ -95,7 +86,7 @@ export default function StoryCard(props) {
 }
 
 StoryCard.defaultProps = {
-    descTextColor: '',
+    descTextColor: 'text-neutral-700',
     iconTag: 'Customer Stories',
     titleTextColor: '',
     brandImageUrl: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687778913/image_16_a725262c4e.png',
@@ -103,10 +94,10 @@ StoryCard.defaultProps = {
     linkUrl: '#',
     iconVariant: 'videorecorder',
     iconStrokeColor: 'blue-500',
-    iconArrowVariant: 'arrownarrowupright',
+    iconArrowVariant: 'home03',
     iconArrowStrokeColor: 'blue-400',
     title: 'Webinar',
-    description: 'Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for GraphQL with Hasura',
+    description: 'Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for ',
     readMoreBtn: {
         cta_text: 'Read More'
     }

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

@@ -6,26 +6,26 @@ import { Icon } from "../../common-components";
 export default function StoryCardXL(props) {
     return (
         <>
-            <div className="flex flex-col-reverse px-6 py-10 db-s:px-0 db-s:py-0 db-s:flex-row db:gap-2 max-w-7xl">
+            <div className="flex flex-col-reverse px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:flex-row tb-l:gap-10 db:gap-32 max-w-7xl">
 
-                <div className="flex flex-col db-s:pl-20 db-s:pt-20 db-s:pb-[74px]">
+                <div className="flex flex-col tb-l:pl-20 tb-l:pt-20 tb-l:pb-14">
                     {
                         props.tagline && (
-                            <Typography textStyle='h6' className='text-blue-400 db-s:block uppercase mb-2 hidden '>{props.tagline}</Typography>
+                            <Typography textStyle='h6' className='text-blue-400 tb-l:block uppercase mb-2 hidden '>{props.tagline}</Typography>
                         )
                     }
                     {props.brandImageURL &&
                         props.brandImageAlt && (
-                            <>
-                                <img src={props.brandImageURL} alt={props.brandImageAlt} className="max-w-[140px] db-s:block hidden " />
-                            </>
+                        <div className="flex justify-start max-h-[40px]">
+                                <img src={props.brandImageURL} alt={props.brandImageAlt} className=" tb-l:flex hidden " />
+                            </div>
                         )
 
                     }
                     {props.title &&
                         (
-                            <div className="flex pt-6 flex-col gap-6">
-                                <Typography textStyle='h3' className='text-neutral-1000 db-s:block hidden'>{props.title}</Typography>
+                            <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'>{props.title}</Typography>
                                 {props.heroList &&
                                     (
                                         <div>
@@ -33,18 +33,14 @@ export default function StoryCardXL(props) {
                                                 {props.heroList.map((value, index) => (
                                                     <div key={index} className='flex gap-5'>
                                                         <Icon
-                                                            height='h-8 w-8 stroke-2' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
+                                                            height='tb:h-8 tb:w-8 h-6 w-6' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
                                                         <Typography
                                                             textStyle='sub2' className='text-neutral-700' >
                                                             {value.heroListTitle}
                                                         </Typography>
                                                     </div>
-
                                                 ))
-
-
                                                 }
-
                                             </div>
                                         </div>
                                     )
@@ -66,41 +62,46 @@ export default function StoryCardXL(props) {
                 {(props.heroImageURL &&
                     props.heroImageAlt) ?
                     (
-                        <div className="flex mt-4 tb:mt-0 justify-start db-s:justify-end db-s:pt-20 tb:max-w-[600px]">
-                            <img src={props.heroImageURL} alt={props.heroImageAlt} className="rounded-xl db-s:rounded-none db-s:rounded-br-3xl db-s:rounded-tl-3xl max-w-[280px] tb:max-w-[400px] db-s:max-w-[522px]  " />
-                        </div>
+                        <>
+                            <div className="flex mt-4 tb:mt-0 justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
+                                <img
+                                    src={props.heroImageURL}
+                                    alt={props.heroImageAlt}
+                                    className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[717px] tb-l:max-w-[600px] max-w-[240px]"
+                                />
+                            </div>
+                        </>
                     )
                     :
                     (
                         <>
                             {props.video_url && (
-                                <div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] db-s:min-w-[550px]">
+                                <div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] tb-l:min-w-[550px]">
                                     <video
                                         autoPlay
                                         loop
                                         playsInline
                                         muted
                                         src={props.video_url}
-                                        className=" rounded-xl db-s:rounded-none db-s:rounded-br-3xl db-s:rounded-tl-3xl"
+                                        className=" rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl"
                                     />
                                 </div>)}
                         </>
                     )}
 
-                <div className="db-s:hidden pb-6">
+                <div className="tb-l:hidden pb-6">
                     {props.brandImageURL &&
                         props.brandImageAlt && (
-                            <>
-                                <img src={props.brandImageURL} alt={props.brandImageAlt} className="max-w-[140px] pb-6 " />
-                            </>
+                            <div>
+                                <img src={props.brandImageURL} alt={props.brandImageAlt} className="pb-6 " />
+                            </div>
                         )
-
                     }
                     <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
                 </div>
                 {
                     props.tagline && (
-                        <Typography textStyle='h6' className='text-blue-400 db-s:hidden uppercase'>{props.tagline}</Typography>
+                        <Typography textStyle='h6' className='text-blue-400 tb-l:hidden uppercase'>{props.tagline}</Typography>
                     )
                 }
             </div>
@@ -110,7 +111,7 @@ export default function StoryCardXL(props) {
 }
 
 StoryCardXL.defaultProps = {
-    heroImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690373781/website%20v3/optum_geyxv3.png',
+    heroImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690802853/website%20v3/optum_hiqty8.png',
     heroImageAlt: 'optum',
     heroIconVariant: 'calendar',
     heroIconStrokeClass: 'stroke-neutral-1000',

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

@@ -81,7 +81,7 @@ export default function Carousels ({ components, variants }) {
             onMouseLeave={handleMouseLeave}
         >
             <div
-                className="hidden db-s:grid relative h-full"
+                className="hidden tb-l:grid relative h-full"
             >
                 <motion.div className="  ">
                     <AnimatePresence initial={false}>
@@ -127,7 +127,7 @@ export default function Carousels ({ components, variants }) {
                     ))}
                 </div> */}
             </div>
-            <div className="hidden db-s:flex mt-10 ">
+            <div className="hidden tb-l:flex mt-10 ">
                 <div className="gap-4 w-full h-full flex justify-center">
                     <motion.button
                         initial={{ opacity: 0, scale: 0 }}
@@ -160,7 +160,7 @@ export default function Carousels ({ components, variants }) {
                     </motion.button>
                 </div>
             </div>
-            <div className='db-s:hidden flex flex-row overflow-scroll pb-10 px-4 scrollbar-hide gap-2 mb-m:gap-4 tb-m:gap-10'>
+            <div className='db-s:hidden flex flex-row overflow-scroll pb-10 pt-4 tb:pb-16 tb:pt-10 px-4 scrollbar-hide gap-2 mb-m:gap-4 tb-m:gap-4'>
                 {components.map((component, index) => (
                     <React.Fragment key={index}>
                         <div className='tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px]'>

package/src/styles/tailwind.css

@@ -1692,6 +1692,10 @@ select{
   height: 100vh;
 }
 
+.h-auto{
+  height: auto;
+}
+
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1720,6 +1724,18 @@ select{
   max-height: 100vh;
 }
 
+.max-h-\[64px\]{
+  max-height: 64px;
+}
+
+.max-h-\[28px\]{
+  max-height: 28px;
+}
+
+.max-h-\[40px\]{
+  max-height: 40px;
+}
+
 .min-h-\[12px\]{
   min-height: 12px;
 }
@@ -2130,6 +2146,14 @@ select{
   max-width: min-content;
 }
 
+.max-w-\[547px\]{
+  max-width: 547px;
+}
+
+.max-w-\[240px\]{
+  max-width: 240px;
+}
+
 .flex-1{
   flex: 1 1 0%;
 }
@@ -2302,6 +2326,10 @@ select{
           user-select: none;
 }
 
+.resize{
+  resize: both;
+}
+
 .snap-x{
   scroll-snap-type: x var(--tw-scroll-snap-strictness);
 }
@@ -6599,6 +6627,10 @@ select{
   padding-top: 81px;
 }
 
+.pb-5{
+  padding-bottom: 1.25rem;
+}
+
 .text-left{
   text-align: left;
 }
@@ -7633,6 +7665,10 @@ select{
   transition-duration: 1500ms;
 }
 
+.duration-\[350ms\]{
+  transition-duration: 350ms;
+}
+
 .ease-in{
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -10612,6 +10648,10 @@ select{
     height: 100%;
   }
 
+  .tb\:h-8{
+    height: 2rem;
+  }
+
   .tb\:max-h-\[181px\]{
     max-height: 181px;
   }
@@ -10646,6 +10686,10 @@ select{
     width: 100%;
   }
 
+  .tb\:w-8{
+    width: 2rem;
+  }
+
   .tb\:min-w-\[150px\]{
     min-width: 150px;
   }
@@ -10926,6 +10970,10 @@ select{
     padding-bottom: 2.5rem;
   }
 
+  .tb\:pb-16{
+    padding-bottom: 4rem;
+  }
+
   .tb\:pb-8{
     padding-bottom: 2rem;
   }
@@ -11437,6 +11485,10 @@ select{
     gap: 4rem;
   }
 
+  .tb-m\:gap-4{
+    gap: 1rem;
+  }
+
   .tb-m\:self-start{
     align-self: flex-start;
   }
@@ -11502,6 +11554,10 @@ select{
     display: flex;
   }
 
+  .tb-l\:grid{
+    display: grid;
+  }
+
   .tb-l\:hidden{
     display: none;
   }
@@ -11548,6 +11604,10 @@ select{
     min-width: 700px;
   }
 
+  .tb-l\:min-w-\[550px\]{
+    min-width: 550px;
+  }
+
   .tb-l\:max-w-\[1240px\]{
     max-width: 1240px;
   }
@@ -11560,6 +11620,18 @@ select{
     max-width: 658px;
   }
 
+  .tb-l\:max-w-\[522px\]{
+    max-width: 522px;
+  }
+
+  .tb-l\:max-w-\[547px\]{
+    max-width: 547px;
+  }
+
+  .tb-l\:max-w-\[600px\]{
+    max-width: 600px;
+  }
+
   .tb-l\:grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -11580,6 +11652,10 @@ select{
     justify-content: flex-start;
   }
 
+  .tb-l\:justify-end{
+    justify-content: flex-end;
+  }
+
   .tb-l\:justify-center{
     justify-content: center;
   }
@@ -11604,6 +11680,14 @@ select{
     gap: 9rem;
   }
 
+  .tb-l\:gap-32{
+    gap: 8rem;
+  }
+
+  .tb-l\:gap-10{
+    gap: 2.5rem;
+  }
+
   .tb-l\:space-x-6 > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 0;
     margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -11620,6 +11704,10 @@ select{
     align-self: center;
   }
 
+  .tb-l\:rounded-none{
+    border-radius: 0px;
+  }
+
   .tb-l\:rounded-b-3xl{
     border-bottom-right-radius: 1.5rem;
     border-bottom-left-radius: 1.5rem;
@@ -11635,6 +11723,14 @@ select{
     border-end-start-radius: 0px;
   }
 
+  .tb-l\:rounded-br-3xl{
+    border-bottom-right-radius: 1.5rem;
+  }
+
+  .tb-l\:rounded-tl-3xl{
+    border-top-left-radius: 1.5rem;
+  }
+
   .tb-l\:border-0{
     border-width: 0px;
   }
@@ -11675,6 +11771,16 @@ select{
     padding-bottom: 3rem;
   }
 
+  .tb-l\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .tb-l\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .tb-l\:pb-0{
     padding-bottom: 0px;
   }
@@ -11695,6 +11801,18 @@ select{
     padding-top: 0px;
   }
 
+  .tb-l\:pb-14{
+    padding-bottom: 3.5rem;
+  }
+
+  .tb-l\:pl-20{
+    padding-left: 5rem;
+  }
+
+  .tb-l\:pt-20{
+    padding-top: 5rem;
+  }
+
   .tb-l\:text-left{
     text-align: left;
   }
@@ -11704,12 +11822,6 @@ select{
   }
 }
 
-@media (min-width: 970px){
-  .tb-xl\:min-w-\[800px\]{
-    min-width: 800px;
-  }
-}
-
 @media (min-width: 1024px){
   .lg\:flex{
     display: flex;
@@ -11804,6 +11916,14 @@ select{
     max-width: 540px;
   }
 
+  .db-s\:max-w-\[547px\]{
+    max-width: 547px;
+  }
+
+  .db-s\:max-w-\[717px\]{
+    max-width: 717px;
+  }
+
   .db-s\:flex-row{
     flex-direction: row;
   }
@@ -11879,6 +11999,10 @@ select{
     padding-top: 5rem;
   }
 
+  .db-s\:pb-14{
+    padding-bottom: 3.5rem;
+  }
+
   .db-s\: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);
@@ -11997,6 +12121,10 @@ select{
     gap: 0px;
   }
 
+  .db\:gap-2{
+    gap: 0.5rem;
+  }
+
   .db\:gap-24{
     gap: 6rem;
   }
@@ -12017,8 +12145,8 @@ select{
     gap: 132px;
   }
 
-  .db\:gap-2{
-    gap: 0.5rem;
+  .db\:gap-32{
+    gap: 8rem;
   }
 
   .db\:gap-x-10{