hds-web 1.10.0 → 1.10.2

package/package.json

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

package/src/HDS/components/BadgesCaption/badges.js

@@ -23,7 +23,10 @@ const colorVariants = {
   cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300   ',
   cyan200: 'bg-cyan-200 text-cyan-600 border border-cyan-400 border border-cyan-400 ',
   green: 'bg-green-200 text-green-800 group-hover:bg-green-300  ',
-  purple500: 'bg-purple-500 shadow-sm'
+  purple500: 'bg-purple-500 shadow-sm',
+  blue500:'bg-blue-500 shadow-sm',
+  green500:'bg-green-500 shadow-sm'
+
 }
 
 export default function Badge({

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

@@ -101,7 +101,7 @@ export default function CustomCarousel(props) {
     );
     return (
         <div className="">
-            <div className="flex flex-row overflow-scroll scrollbar-hide tb:hidden">
+            <div className="flex flex-row overflow-scroll scrollbar-hide gap-4 tb:hidden">
                 {showAllCards
                     ? props.cards.map((item, i) => (
                         <div className="my-5" key={i} ref={refs[i]}>

package/src/HDS/modules/Cards/dataSourceCard.js

@@ -7,7 +7,12 @@ export default function DataSourcesCard(props) {
         <>
             <div className="flex flex-col-reverse px-6 py-10 db:px-0 db:py-0 db:flex-row db:gap-[132px]">
 
-                <div className="flex flex-col db:pl-20 db:pt-[104px] db:pb-[74px]">
+                <div className="flex flex-col db:pl-20 db:pt-20 db:pb-[74px]">
+                    {
+                        props.tagline && (
+                            <Typography textStyle='h6' className='text-blue-400 db:block uppercase mb-2 hidden '>{props.tagline}</Typography>
+                        )
+                    }
                     {props.title && props.description
                         && (<div className="flex flex-col gap-4">
                             <Typography textStyle='h3' className='text-neutral-1000 db:block hidden'>{props.title}</Typography>
@@ -25,7 +30,7 @@ export default function DataSourcesCard(props) {
                             </a>
                         </div>}
                 </div>
-                {props.video_url && <div className="flex mt-4 tb:mt-0 tb:items-end db:min-w-[550px]">
+                {props.video_url && <div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] db:min-w-[550px]">
                     <video
                         autoPlay
                         loop
@@ -34,9 +39,15 @@ export default function DataSourcesCard(props) {
                         className=" rounded-xl db:rounded-none db:rounded-tl-3xl"
                     />
                 </div>}
-                <div className="db:hidden pb-2 pt-10">
+               
+                <div className="db:hidden pb-2">
                     <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
                 </div>
+                {
+                    props.tagline && (
+                        <Typography textStyle='h6' className='text-blue-400 db:hidden uppercase'>{props.tagline}</Typography>
+                    )
+                }
             </div>
         </>
     )

package/src/styles/tailwind.css

@@ -1534,8 +1534,8 @@ select{
   height: 614px;
 }
 
-.h-\[800px\]{
-  height: 800px;
+.h-\[675px\]{
+  height: 675px;
 }
 
 .h-\[90px\]{
@@ -1558,10 +1558,6 @@ select{
   height: 100vh;
 }
 
-.h-\[675px\]{
-  height: 675px;
-}
-
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1678,10 +1674,6 @@ select{
   width: 147px;
 }
 
-.w-\[194px\]{
-  width: 194px;
-}
-
 .w-\[22\.5rem\]{
   width: 22.5rem;
 }
@@ -1776,6 +1768,10 @@ select{
   min-width: 24px;
 }
 
+.min-w-\[312px\]{
+  min-width: 312px;
+}
+
 .min-w-\[348px\]{
   min-width: 348px;
 }
@@ -1798,10 +1794,6 @@ select{
   min-width: 100%;
 }
 
-.min-w-\[312px\]{
-  min-width: 312px;
-}
-
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -9861,14 +9853,14 @@ select{
     display: none;
   }
 
-  .tb\:h-full{
-    height: 100%;
-  }
-
   .tb\:h-\[513px\]{
     height: 513px;
   }
 
+  .tb\:h-full{
+    height: 100%;
+  }
+
   .tb\:max-h-\[181px\]{
     max-height: 181px;
   }
@@ -9881,6 +9873,10 @@ select{
     width: 50%;
   }
 
+  .tb\:w-\[643px\]{
+    width: 643px;
+  }
+
   .tb\:w-\[90\%\]{
     width: 90%;
   }
@@ -9895,10 +9891,6 @@ select{
     width: 100%;
   }
 
-  .tb\:w-\[643px\]{
-    width: 643px;
-  }
-
   .tb\:min-w-\[18rem\]{
     min-width: 18rem;
   }
@@ -9911,6 +9903,14 @@ select{
     min-width: 310px;
   }
 
+  .tb\:min-w-\[500px\]{
+    min-width: 500px;
+  }
+
+  .tb\:min-w-\[300px\]{
+    min-width: 300px;
+  }
+
   .tb\:max-w-\[17rem\]{
     max-width: 17rem;
   }
@@ -9947,6 +9947,14 @@ select{
     max-width: 700px;
   }
 
+  .tb\:max-w-\[300px\]{
+    max-width: 300px;
+  }
+
+  .tb\:max-w-\[600px\]{
+    max-width: 600px;
+  }
+
   .tb\:snap-always{
     scroll-snap-stop: always;
   }
@@ -11064,10 +11072,6 @@ select{
     padding-bottom: 2.5rem;
   }
 
-  .db\:pb-12{
-    padding-bottom: 3rem;
-  }
-
   .db\:pb-28{
     padding-bottom: 7rem;
   }
@@ -11088,6 +11092,10 @@ select{
     padding-right: 0px;
   }
 
+  .db\:pt-12{
+    padding-top: 3rem;
+  }
+
   .db\:pt-20{
     padding-top: 5rem;
   }