hds-web 1.9.1 → 1.9.3

package/package.json

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

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

@@ -7,11 +7,8 @@ export default function ImageBadgeCard (card){
 return(
     <>
         <div className={`${HDSColor(card.cardBg)}bg-neutral-0 max-w-[700px] min-h-[245px] rounded-3xl p-8`}>
-            <div className='flex flex-row justify-between gap-4'>
-
-
-                <div className='max-w-[400px]'>
-
+            <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}
@@ -20,8 +17,8 @@ return(
                     <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>
-                    <img src={card.imageUrl} alt={card.title} className='max-w-[290px] max-h-[181px]' />
+                <div className="flex justify-center">
+                    <img src={card.imageUrl} alt={card.title} className='tb:max-w-[290px] tb:max-h-[181px]' />
 
                 </div>
             </div>

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Typography } from '../../foundation/Typography'
+import { HDSButton} from '../../components/Buttons';
+
+export default function DataSourcesCard(props) {
+    return (
+        <>
+            <div className="flex flex-col-reverse px-6 py-10 tb:px-0 tb:py-0 tb:flex-row tb:gap-[132px]">
+
+                <div className="flex flex-col tb:pl-20 tb:py-[104px]">
+                    {props.title && props.description
+                        && (<div className="flex flex-col gap-4">
+                            <Typography textStyle='h3' className='text-neutral-1000 tb:block hidden'>{props.title}</Typography>
+                            <Typography textStyle='sub2' className='text-neutral-600 tb:mt-0 mt-4 '>{props.description}</Typography>
+                        </div>)}
+                    {props.CTA &&
+                        <div className="mt-4 tb:mt-6 flex">
+                            <a href={props.CTA['link']}>
+                                <HDSButton
+                                    label={props.CTA['text']}
+                                    type={props.CTA['type'] || 'secondary'}
+                                    size='md'
+                                    rightAnimatedArrowColor="#3970FD"
+                                />
+                            </a>
+                        </div>}
+                </div>
+                {props.video_url && <div className="flex mt-4 tb:mt-0 tb:items-end">
+                    <video
+                        autoPlay
+                        loop
+                        muted
+                        src={props.video_url}
+                        className=" rounded-xl tb:rounded-none tb:rounded-tl-3xl"
+                    />
+                </div>}
+                <div className="tb:hidden pt-10">
+                    <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
+                </div>
+            </div>
+        </>
+    )
+}
+
+DataSourcesCard.defaultProps = {
+    title:'100+ Data Sources',
+    description: 'description1',
+    CTA: {
+        text:'Button Label',
+    },
+    video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
+} 

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

@@ -0,0 +1 @@
+export { default as DataSourcesCard } from './dataSourceCard';

package/src/HDS/modules/index.js

@@ -1,2 +1,3 @@
 export * from './TextCard';
-export * from './navCard';
+export * from './navCard';
+export * from './Cards';

package/src/styles/tailwind.css

@@ -9892,6 +9892,10 @@ select{
     margin-top: -4px;
   }
 
+  .tb\:mt-6{
+    margin-top: 1.5rem;
+  }
+
   .tb\:block{
     display: block;
   }
@@ -9920,6 +9924,10 @@ select{
     max-height: 25.25rem;
   }
 
+  .tb\:max-h-\[181px\]{
+    max-height: 181px;
+  }
+
   .tb\:w-1\/2{
     width: 50%;
   }
@@ -9978,6 +9986,10 @@ select{
     max-width: 530px;
   }
 
+  .tb\:max-w-\[400px\]{
+    max-width: 400px;
+  }
+
   .tb\:snap-always{
     scroll-snap-stop: always;
   }
@@ -10002,6 +10014,10 @@ select{
     flex-direction: column-reverse;
   }
 
+  .tb\:items-end{
+    align-items: flex-end;
+  }
+
   .tb\:items-center{
     align-items: center;
   }
@@ -10042,6 +10058,10 @@ select{
     gap: 31.5rem;
   }
 
+  .tb\:gap-\[132px\]{
+    gap: 132px;
+  }
+
   .tb\:gap-x-16{
     -webkit-column-gap: 4rem;
             column-gap: 4rem;
@@ -10055,6 +10075,14 @@ select{
     border-radius: 1.5rem;
   }
 
+  .tb\:rounded-none{
+    border-radius: 0px;
+  }
+
+  .tb\:rounded-tl-3xl{
+    border-top-left-radius: 1.5rem;
+  }
+
   .tb\:border{
     border-width: 1px;
   }
@@ -10122,6 +10150,16 @@ select{
     padding-bottom: 3.5rem;
   }
 
+  .tb\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .tb\:py-\[104px\]{
+    padding-top: 104px;
+    padding-bottom: 104px;
+  }
+
   .tb\:pb-0{
     padding-bottom: 0px;
   }
@@ -10166,6 +10204,10 @@ select{
     padding-top: 2.875rem;
   }
 
+  .tb\:pl-20{
+    padding-left: 5rem;
+  }
+
   .tb\:text-left{
     text-align: left;
   }