hds-web 1.10.1 → 1.10.3

package/package.json

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

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

@@ -10,14 +10,14 @@ export default function AnnouncementSM(props) {
   const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
 
   return (
-    <div className={`${bgClass} rounded-full shadow-md py-2 px-3 inline-flex items-center`}>
-      <div className={`${tagBgClass} hidden tb:block py-1 px-3 rounded-full mr-4`}>
+    <div className={`${bgClass} rounded-full shadow py-2 px-3 inline-flex items-center`}>
+      <div className={`${tagBgClass} hidden mb-m:block py-1 px-3 rounded-full mr-4`}>
         <Typography textStyle="body2-medium" className={`${tagTextClass}`}>{props.tagText}</Typography>
       </div>
       <a href={props.linkUrl}>
       <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center`}>
         {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={'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>

package/src/HDS/components/Cards/Dropdown/v3Dropdown.js

@@ -5,7 +5,7 @@ import { FlyoutB, FlyoutA } from '../Menu'
 
 export default function DropdownA(props) {
     return (
-        <div className='flex mx-auto w-screen flex-col tb:flex-row gap-2'>
+        <div className='flex w-fit flex-col tb:flex-row gap-2'>
             <div className='  bg-neutral-0 rounded-2xl tb:min-w-[28.063rem]'>
                 <FlyoutB
                    {...props.primaryCard}
@@ -54,6 +54,18 @@ DropdownA.defaultProps = {
               icon: 'cube01',
               name: 'Security'
             },
+            {
+              description: '',
+              href: '#',
+              icon: 'cube01',
+              name: 'Security'
+            },
+            {
+              description: '',
+              href: '#',
+              icon: 'cube01',
+              name: 'Security'
+            },
           ],
           label:"Label1"
 },

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

@@ -15,31 +15,31 @@ export default function FlyoutA(props) {
       <div
         className="w-full rounded-2xl  "
       >
-        <div className="p-6 min-w-[348px]">
+        <div className={` ${(childArray.length > 3) ? 'min-w-[348px]' : 'min-w-[169px]'} p-6 `}>
           {label && <Typography
             textStyle='h6'
             className=' uppercase text-neutral-500 mb-4'>
             {label}
           </Typography>}
-          <div className='tb:grid tb:grid-cols-2'>
+          <div className={` ${(childArray.length > 3) ? 'tb:grid tb:grid-cols-2 tb:gap-x-4' : 'tb:grid tb:grid-cols-1 gap-x-4'} `}>
             {childArray && childArray.map((item) => (
               <div
                 key={item.name}
-                className="group relative py-1 flex rounded-lg items-center">
+                className="group relative pb-2 flex rounded-lg items-center">
                 <div
-                  className="mt-1 flex rounded-lg items-center group-hover:bg-white">
+                  className="flex rounded-lg items-center group-hover:bg-white">
                   {item.icon && (
                     <Icon
-                      height={'h-6'}
+                      height={'h-5 w-5'}
                       variant={item.icon}
-                      strokeColor={'#6C737F'}
+                      strokeClass={item.strokeClass}
                     />
                   )}
                 </div>
                 <div>
                   <a href={item.href}>
                     <Typography
-                      textStyle='h-6'
+                      textStyle='body3c-medium'
                       className='text-neutral-700 px-2 py-2.5'>
                       {item.name}
                     </Typography>

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

@@ -35,7 +35,9 @@ export default function FlyoutB(props) {
                         size='sm'
                         rightAnimatedArrow={true}
                         rightAnimatedArrowColor='#6C737F'
+                        animatedHoverStroke='group-hover:stroke-neutral-1000'
                         className='mt-4'
+                        btnTextHoverClass='hover:text-neutral-1000'
                     />
                 </div>
                 <Typography className='mt-2 text-neutral-800' textStyle='body3'>{mainDescription}</Typography>
@@ -43,7 +45,7 @@ export default function FlyoutB(props) {
 
             <div className="grid grid-cols-2 justify-around border-t divide-x divide-neutral-150 border-neutral-150">
                 {secondaryBtn.map((btn, index) => (
-                    <a key={index} href='#' className="py-6 flex  ">
+                    <a key={index} href={btn.cta_link} className="py-6 flex  ">
                         <HDSButton
                             leftIconVariant={btn.cta_leftVariantIcon}
                             leftIconColor={btn.cta_leftVariantIconColor}
@@ -54,7 +56,9 @@ export default function FlyoutB(props) {
                             size='lg'
                             rightAnimatedArrow={true}
                             rightAnimatedArrowColor='#6C737F'
+                            animatedHoverStroke='group-hover:stroke-neutral-1000'
                             className='pl-6'
+                            btnTextHoverClass='hover:text-neutral-1000'
                         />
                     </a>
                 ))}

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

@@ -39,7 +39,7 @@ export default function IconCard(props) {
     const iconBG = HDSColor(props.iconBg);
     return (
         <div
-            className={`bg-neutral-0 grid h-full rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
+            className={`bg-neutral-0 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' : '')}
         >
             <div className=" self-start">
                 <div

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

@@ -2,27 +2,27 @@ import React from "react"
 import { HDSColor } from "../../../foundation/ColorPalette"
 import { Typography } from "../../../foundation/Typography"
 import {Badges} from "../../BadgesCaption"
-export default function ImageBadgeCard (card){
+export default function ImageBadgeCard(card) {
 
-return(
-    <>
-        <div className={`${HDSColor(card.cardBg)}bg-neutral-0 min-w-[312px] tb:max-w-[700px] min-h-[245px] rounded-3xl tb:p-8 p-4`}>
-            <div className='flex flex-col tb:flex-row  justify-between gap-4'>
-                <div className='tb:max-w-[400px]'>
-                    <Badges
-                        color={card.badge.color}
-                        children={card.badge.label}
-                        text_color='text-neutral-0'
-                    />
-                    <Typography textStyle='h4' className='mt-2 text-neutral-1000'>{card.title}</Typography>
-                    <Typography textStyle='sub2' className='mt-2 text-neutral-600'>{card.subTitle}</Typography>
-                </div>
-                <div className="flex justify-center">
-                    <img src={card.imageUrl} alt={card.title} className='tb:max-w-[290px] tb:max-h-[181px]' />
+    return (
+        <>
+            <div className={`${HDSColor(card.cardBg)}bg-neutral-0  min-h-[443px]  min-w-[312px] tb:max-w-[763px] tb:min-h-[245px] rounded-3xl tb:p-8 p-4`}>
+                <div className='flex flex-col-reverse tb:flex-row  justify-between gap-4 items-center'>
+                    <div className='tb:max-w-[393px] mt-8 tb:mt-0'>
+                        <Badges
+                            color={card.badge.color}
+                            children={card.badge.label}
+                            text_color='text-neutral-0'
+                        />
+                        <Typography textStyle='h4' className='mt-2 text-neutral-1000 max-w-[326px]'>{card.title}</Typography>
+                        <Typography textStyle='sub2' className='mt-2 text-neutral-600'>{card.subTitle}</Typography>
+                    </div>
+                    <div className="flex justify-center h-full items-center">
+                        <img src={card.imageUrl} alt={card.title} className='tb:max-w-[290px] rounded-lg flex items-center justify-center tb:max-h-[181px]' />
 
+                    </div>
                 </div>
             </div>
-        </div>
-    </>
-)
+        </>
+    )
 }

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

@@ -105,14 +105,14 @@ export default function CustomCarousel(props) {
                 {showAllCards
                     ? props.cards.map((item, i) => (
                         <div className="my-5" key={i} ref={refs[i]}>
-                            <div className="rounded-3xl min-w-[312px] overflow-hidden">
+                            <div className="rounded-3xl shadow min-w-[312px] overflow-hidden">
                                 {React.createElement(props.component, item)}
                             </div>
                         </div>
                     ))
                     : props.cards.slice(0, maxVisibleCards).map((item, i) => (
                         <div className="my-5" key={i} ref={refs[i]}>
-                            <div className="rounded-3xl overflow-hidden">
+                            <div className="rounded-3xl shadow overflow-hidden">
                                 {React.createElement(props.component, item)}
                             </div>
                         </div>
@@ -175,8 +175,8 @@ export default function CustomCarousel(props) {
 
                             {props.cards.map((item, i) => (
                                 // <div className="max-[1140px]:snap-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
-                                <div className=" snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
-                                    <div className="w-full select-none rounded-3xl object-contain">
+                                <div className=" snap-center mx-5 shrink-0 py-1" key={i} ref={refs[i]}>
+                                    <div className="w-full select-none rounded-3xl object-contain shadow">
                                         {React.createElement(props.component, item)}
                                     </div>
 

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

@@ -78,7 +78,7 @@ export default function V3Footer(props) {
             <img src={props.brandUrl} alt={props.brandAlt} />
           </a>
         </div>
-        <div className='flex justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
+        <div className='flex justify-between tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
           {
             props.footerLinks.map((footerLink, index) =>(
               <div key={index} className='min-w-[140px] db-s:min-w-fit'>
@@ -106,7 +106,7 @@ export default function V3Footer(props) {
           }
         </div>
         {isItems && !isError && (
-          <div className=' bg-neutral-0 rounded-full shadow-md px-4 py-2 inline-flex justify-center items-center'>
+          <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>
@@ -167,7 +167,7 @@ V3Footer.defaultProps = {
         },
         {
           linkText: 'Federation',
-          linkUrl: 'https://hasura.io/product/federation/',
+          linkUrl: 'https://hasura.io/docs/latest/data-federation/overview/',
         },
         {
           linkText: 'Observability',