hds-web 1.7.7 → 1.7.9

package/package.json

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

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

@@ -113,6 +113,7 @@ export default function IconCard(props) {
                                 btnBgColorClass={btn.btnBg}
                                 btnTextHoverClass={btn.btnTextColorClass}
                                 animatedHoverStroke={btn.animatedHoverStroke}
+                                btnTextColorClass={btn.btnTextColorClass}
                             />
                         </a>))
                         }

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

@@ -167,8 +167,8 @@ export default function V3Header(props) {
     }
 
     return (
-        <Popover className="relative max-w-[1328px] mx-auto">
-            <div className={`flex items-center ${HDSColor(props.headerBg)} pl-4 tb:pl-0 justify-between py-4 tb:px-8 db:px-[100px] db:py-6 tb-l:justify-between tb-l:space-x-6`}>
+        <Popover className="relative max-w-7xl mx-auto">
+            <div className={`flex items-center ${HDSColor(props.headerBg)} justify-between py-4 db:py-6 tb-l:justify-between`}>
                 <div className='flex items-center'>
                     <a href={props.headerUrl} className="flex items-center">
                         <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />

package/src/HDS/components/Hero/heroIntegration.js

@@ -87,15 +87,13 @@ export default function HeroIntegration({ heroData}) {
     const LinkCardsFn = (heroData) => {
         return (
             heroData.linkCards && (
-                <div className="flex px-8 tb:px-10 tb:justify-center db-s:px-0 overflow-auto scrollbar-hide flex-row gap-6 db-s:mt-[68px] tb:flex-row  ">
+                <div className="flex px-8 tb:px-10 tb:justify-center db-s:px-0 overflow-auto scrollbar-hide flex-row gap-6 db-s:mt-[68px] tb:flex-row ">
                     {heroData.linkCards.map((card, index) => (
-                        <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
+                        <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
                             <LinkCard
                                 titleTextColor={card.titleTextColor}
                                 descTextColor={card.descTextColor}
                                 linkUrl={card.linkUrl}
-                                cardBgColor={card.cardBgColor}
-                                cardHoverBg={card.cardHoverBg}
                                 iconVariant={card.iconVariant}
                                 iconStrokeClass={card.iconStrokeColor}
                                 iconArrowVariant={card.iconArrowVariant}

package/src/HDS/modules/TextCard/textCard.js

@@ -131,19 +131,28 @@ export default function TextCard(props) {
               </div>
             )
           }
-          {
-            props.button && (
-              <HDSButton
-                label={props.button.cta_text}
-                type='secondary'
-                leftIconVariant='none'
-                rightIconVariant='none'
-                state='default'
-                size='md'
-                rightAnimatedArrow={true}
-                rightAnimatedArrowColor='#3970FD'
-              />
-            )
+
+          {props.button &&
+            <div className="flex gap-6 items-center">
+              {props.button.map((btn, index) => (
+                <a href={btn.cta_link} key={index} className="flex ">
+                  <HDSButton
+                    label={btn.cta_text}
+                    type={btn.cta_type || 'secondary'}
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    state='default'
+                    size='md'
+                    rightAnimatedArrow={true}
+                    rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
+                    btnBgColorClass={btn.btnBg}
+                    btnTextHoverClass={btn.btnTextColorClass}
+                    animatedHoverStroke={btn.animatedHoverStroke}
+                    btnTextColorClass={btn.btnTextColorClass}
+                  />
+                </a>))
+              }
+            </div>
           }
         </div>
         {

package/src/styles/tailwind.css

@@ -8334,6 +8334,10 @@ select{
   border-color: rgb(210 214 219 / var(--tw-border-opacity));
 }
 
+.hover\:border-opacity-0:hover{
+  --tw-border-opacity: 0;
+}
+
 .hover\:bg-amber-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(255 243 212 / var(--tw-bg-opacity));
@@ -8847,6 +8851,12 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-2xl:hover{
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:transition:hover{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -10365,6 +10375,10 @@ select{
     row-gap: 0.5rem;
   }
 
+  .db\:overflow-visible{
+    overflow: visible;
+  }
+
   .db\:rounded-3xl{
     border-radius: 1.5rem;
   }