hds-web 1.5.9 → 1.6.0

package/package.json

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

package/src/HDS/components/Cards/Link/link.js

@@ -12,7 +12,7 @@ export default function LinkCard(props) {
         <>
             <a
                 href={props.linkUrl}
-                className={`${cardHoverClasses} ${cardBgColorClass} rounded-2xl border border-neutral-150 p-6 block`}
+                className={`${cardHoverClasses} ${cardBgColorClass} rounded-2xl border border-neutral-150 p-6 h-full  block`}
             >
                 {props.brandImageUrl ?
                     (
@@ -35,7 +35,7 @@ export default function LinkCard(props) {
                     (
                         <>
                             <div className='flex items-center'>
-                                <div className='flex items-center flex-1'>
+                                <div className='flex items-center flex-1 pb-2'>
                                     {props.iconVariant &&
                                         (<Icon
                                             height={'w-6 h-6 mr-2 stroke-[1.5px] '}
@@ -60,11 +60,17 @@ export default function LinkCard(props) {
                                 }
                             </div>
                             {props.description &&
-                                (<Typography
+                                (
+                                    <div>
+                                        
+                                <Typography
                                     textStyle="body3"
                                     className={`${HDSColor(props.descTextColor)} mt-2`}>
                                     {props.description}
-                                </Typography>)}
+                                </Typography>
+                                        </div>
+                                
+                                )}
                         </>
                     )
                 }
@@ -74,6 +80,8 @@ export default function LinkCard(props) {
 }
 
 LinkCard.defaultProps = {
+    descTextColor:'',
+    titleTextColor:'',
     brandImageUrl: '',
     brandImageAlt:'',
     linkUrl: '#',

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

@@ -10,27 +10,27 @@ const cardVariant = {
         'iconWidthStyle': 'h-20 w-20',
         'iconStyle': 'h-10 w-10',
         'titleTextStyle': 'h4',
-        'titleClasses': 'mb-1 text-blue-800',
+        'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
         'descTextStyle': 'body1c',
-        'descClasses': 'text-neutral-1000'
+        'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
     },
     "withoutButton": {
         'cardStyle': 'p-6',
         'iconWidthStyle': 'h-12 w-12',
         'iconStyle': 'h-6 w-6',
         'titleTextStyle': 'h5',
-        'titleClasses': 'mb-1 text-blue-600',
+        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
         'descTextStyle': 'body1',
-        'descClasses': 'text-neutral-1000'
+        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
     },
     "sm": {
         'cardStyle': 'p-6',
         'iconWidthStyle': 'h-12 w-12',
         'iconStyle': 'h-6 w-6',
-        'titleTextStyle': 'body3c-bold',
-        'titleClasses': 'mb-1 text-neutral-800',
+        'titleTextStyle': 'body3c',
+        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
         'descTextStyle': 'body3',
-        'descClasses': 'text-neutral-800'
+        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
     }
 }
 
@@ -38,7 +38,7 @@ export default function IconCard(props) {
     const iconBG = HDSColor(props.iconBg);
     return (
         <div
-            className={`bg-neutral-0 grid rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
+            className={`bg-neutral-0 grid h-full rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
         >
             <div className=" self-start">
                 <div

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

@@ -51,9 +51,9 @@ export default function HeroCapability(props) {
     const LinkCardsFn = (heroData) => {
         return (
           heroData.linkCards && (
-            <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
+            <div className="tb:grid tb:grid-cols-3 h-full px-8 pt-12 flex flex-row tb:px-0 db:pt-[116px] tb:justify-center overflow-scroll scrollbar-hide">
               {heroData.linkCards.map((card, index) => (
-                <div key={index} className="w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]">
+                <div key={index} className=" pb-2 px-3 h-full min-w-[184px]  max-w-[357px] ">
                   <LinkCard
                     titleTextColor= {card.titleTextColor}
                     descTextColor={card.descTextColor}
@@ -211,7 +211,7 @@ HeroCapability.defaultProps={
                 iconArrowVariant: 'arrownarrowupright',
                 iconArrowStrokeColor: 'blue-400',
                 title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
+                description: 'GraphQL response caching',
         
         
               },

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

@@ -34,7 +34,7 @@ export default function TextCard(props) {
                         <Icon
                           height={`h-3 w-3 stroke-[1.5px]` }
                           variant={descList.icon_name}
-                          strokeColor={iconColor}
+                          strokeClass={iconColor}
                         />
                       </div>
                       <Typography textStyle='body1' className='text-neutral-1000'>{descList.description}</Typography>
@@ -58,7 +58,7 @@ export default function TextCard(props) {
                             <Icon
                               height={`w-6 h-6 mr-2 stroke-[1.5px]` }
                               variant={list.icon_name}
-                              strokeColor={currentStrokeColor}
+                              strokeClass={currentStrokeColor}
                             />
                             <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
                           </div>
@@ -73,7 +73,7 @@ export default function TextCard(props) {
                                     <Icon
                                       height={`h-3 w-3 stroke-[1.5px]` }
                                       variant={descList.icon_name}
-                                      strokeColor={iconColor}
+                                      strokeClass={iconColor}
                                     />
                                   </div>
                                   <Typography textStyle='body3' className='text-neutral-1000'>{descList.description}</Typography>

package/src/styles/tailwind.css

@@ -1432,6 +1432,14 @@ select {
   max-height: 100%;
 }
 
+.max-h-\[152px\] {
+  max-height: 152px;
+}
+
+.min-h-\[152px\] {
+  min-height: 152px;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1580,6 +1588,10 @@ select {
   min-width: 100%;
 }
 
+.min-w-\[184px\] {
+  min-width: 184px;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1642,6 +1654,14 @@ select {
   max-width: min-content;
 }
 
+.max-w-\[357px\] {
+  max-width: 357px;
+}
+
+.max-w-\[184px\] {
+  max-width: 184px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1812,6 +1832,10 @@ select {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.grid-rows-1 {
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -8279,6 +8303,10 @@ select {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .tb\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .tb\:flex-row {
     flex-direction: row;
   }
@@ -9063,6 +9091,10 @@ select {
     max-width: 625px;
   }
 
+  .db\:max-w-\[357px\] {
+    max-width: 357px;
+  }
+
   .db\:snap-center {
     scroll-snap-align: center;
   }
@@ -9157,6 +9189,10 @@ select {
     padding-top: 8rem;
   }
 
+  .db\:pt-\[116px\] {
+    padding-top: 116px;
+  }
+
   .db\:text-left {
     text-align: left;
   }