hds-web 1.9.2 → 1.9.4

package/package.json

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

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

@@ -8,10 +8,7 @@ return(
     <>
         <div className={`${HDSColor(card.cardBg)}bg-neutral-0 max-w-[700px] min-h-[245px] rounded-3xl p-8`}>
             <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}

package/src/HDS/components/Cards/Testimonials/testimonial.js

@@ -25,7 +25,7 @@ export default function Testimonial(props) {
     const Card1 = () => {
         return (
             <>
-                <div className={`${HDSColor(card.cardBg)} bg-neutral-1000/40 rounded-2xl max-w-[220px] min-h-[441px] flex flex-col justify-between `}>
+                <div className={`${HDSColor(card.cardBg)} rounded-2xl max-w-[220px] h-[428px] flex flex-col justify-between `}>
                     <div className="">
                         <div className=" pt-8 pl-6">
                             <img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png" alt="Card" className=" inline-block w-16 " />
@@ -53,7 +53,7 @@ export default function Testimonial(props) {
 
     const Card2 = () => {
         return (
-            <div className="max-h-[441px]">
+            <div className="h-[428px]">
                 <div className={`${HDSColor(cardHover.cardBg)} bg-blue-500 rounded-2xl max-w-[221px] justify-between h-[442px] flex flex-col`}>
                     <div className=" ">
                         <div className="pt-8 pl-6 pr-12 ">

package/src/HDS/components/Cards/VideoCard/homeVC.js

@@ -1,31 +1,33 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Testimonial } from '../Testimonials';
 
 export default function HomeVC(props) {
     return (
         <>
             <div className='carouselShadow'>
-                <div className='w-[643.51px] h-[472.64px] bg-base-1000 rounded-2xl flex flex-col items-center justify-center border-2 border-neutral-300'>
-                    <div className='absolute'>
-                        <div>
-                            <video
-                                autoPlay
-                                loop
-                                className="object-contain max-w-full max-h-full px-1"
-                                src={props.video_url} 
+                <div className='w-[620px] h-[476px] bg-base-1000 rounded-2xl border-2 border-neutral-300 flex justify-center items-center'>
+                    <div className='w-[580px] h-[436px] bg-base-1000 rounded flex flex-col items-center justify-center overflow-hidden'>
+                        <div className=''>
+                            <div className=''>
+                                <video
+                                    autoPlay
+                                    loop
+                                    muted
+                                    className=" object-fill  max-w-full max-h-full scale-150"
+                                    src={props.video_url}
                                 />
-                        </div>
-                        <div className='fixed top-[15px] left-[415px]  filter-[16px]'>
+                                <div className='w-full fixed flex-col flex items-center'>
+                                    <div className='fixed mx-auto top-[451px] w-[147px] h-[3px] bg-neutral-0/20' />
+                                </div>
+                            </div>
+                            <div className='fixed top-[8px] left-[365px]  filter-[16px]'>
 
-                            <Testimonial {...props.testimonial}/>
+                                <Testimonial {...props.testimonial} />
+                            </div>
                         </div>
                     </div>
                 </div>
-                {/* <div className='relative mx-auto top-[442.72px] w-[151.7px] h-[3.1px] bg-neutral-0/20' /> */}
+
             </div>
         </>)
 }
-
-HomeVC.defaultProps= {
-    
-}

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

@@ -131,8 +131,8 @@ const carouselItems2 = [
 const video_props =
     [
         {
-            // video_url: 'https://nutrien-prod-asset.s3.us-east-2.amazonaws.com/s3fs-public/video-thumbnails/2019-05/Nutrien-Banner-Loop-V4.mp4',
-            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
+            video_url: 'https://nutrien-prod-asset.s3.us-east-2.amazonaws.com/s3fs-public/video-thumbnails/2019-05/Nutrien-Banner-Loop-V4.mp4',
+            //video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
 
             testimonial: {
                 card: {
@@ -364,11 +364,11 @@ export default function HomePageCarousePrimary(props) {
                 >
                     <div className="w-screen flex justify-center">
                         <div className="absolute z-30">
-                            <div className={`snap-x w-[643px] h-[800px] items-center bg-neutral-0 z-10 inline-flex select-none overflow-x-hidden scrollbar-hide`}
+                            <div className={`snap-x w-[643px] h-[800px] items-center z-10 inline-flex select-none overflow-x-hidden scrollbar-hide`}
                                 ref={carouselRef}
                             >
                                 {video_props.map((item, i) => (
-                                    <div className=" db:snap-center  snap-center tb-m:snap-start mx-5 " key={i } ref={refs[i]}>
+                                    <div className=" db:snap-center  snap-center tb-m:snap-start mx-5 " key={i} ref={refs[i]}>
                                         <div className=" select-none rounded-3xl object-contain ">
                                             {React.createElement(VideoCard, item)}
                                         </div>
@@ -384,7 +384,7 @@ export default function HomePageCarousePrimary(props) {
                         >
 
                             {cards.map((item, i) => {
-                             
+
                                 // toggleBoolean();
                                 return (
                                     <>
@@ -434,3 +434,4 @@ export default function HomePageCarousePrimary(props) {
     );
 };
 
+

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

@@ -1013,6 +1013,18 @@ select{
   left: 415px;
 }
 
+.left-\[365px\]{
+  left: 365px;
+}
+
+.top-\[451px\]{
+  top: 451px;
+}
+
+.top-\[8px\]{
+  top: 8px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1598,6 +1610,22 @@ select{
   height: 4rem;
 }
 
+.h-\[3px\]{
+  height: 3px;
+}
+
+.h-\[436px\]{
+  height: 436px;
+}
+
+.h-\[476px\]{
+  height: 476px;
+}
+
+.h-\[428px\]{
+  height: 428px;
+}
+
 .max-h-\[26\.25\]{
   max-height: 26.25;
 }
@@ -1816,6 +1844,18 @@ select{
   width: 763px;
 }
 
+.w-\[147px\]{
+  width: 147px;
+}
+
+.w-\[580px\]{
+  width: 580px;
+}
+
+.w-\[620px\]{
+  width: 620px;
+}
+
 .min-w-\[11\.5rem\]{
   min-width: 11.5rem;
 }
@@ -2127,6 +2167,13 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-150{
+  --tw-scale-x: 1.5;
+  --tw-scale-y: 1.5;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3701,6 +3748,18 @@ select{
   background-color: rgb(14 165 120 / 0.4);
 }
 
+.bg-neutral-1000\/50{
+  background-color: rgb(0 6 21 / 0.5);
+}
+
+.bg-neutral-1000\/30{
+  background-color: rgb(0 6 21 / 0.3);
+}
+
+.bg-neutral-1000\/60{
+  background-color: rgb(0 6 21 / 0.6);
+}
+
 .bg-opacity-30{
   --tw-bg-opacity: 0.3;
 }
@@ -6033,6 +6092,10 @@ select{
   object-fit: cover;
 }
 
+.object-fill{
+  object-fit: fill;
+}
+
 .p-0{
   padding: 0px;
 }
@@ -9892,6 +9955,10 @@ select{
     margin-top: -4px;
   }
 
+  .tb\:mt-6{
+    margin-top: 1.5rem;
+  }
+
   .tb\:block{
     display: block;
   }
@@ -10010,6 +10077,10 @@ select{
     flex-direction: column-reverse;
   }
 
+  .tb\:items-end{
+    align-items: flex-end;
+  }
+
   .tb\:items-center{
     align-items: center;
   }
@@ -10050,6 +10121,10 @@ select{
     gap: 31.5rem;
   }
 
+  .tb\:gap-\[132px\]{
+    gap: 132px;
+  }
+
   .tb\:gap-x-16{
     -webkit-column-gap: 4rem;
             column-gap: 4rem;
@@ -10063,6 +10138,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;
   }
@@ -10130,6 +10213,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;
   }
@@ -10174,6 +10267,10 @@ select{
     padding-top: 2.875rem;
   }
 
+  .tb\:pl-20{
+    padding-left: 5rem;
+  }
+
   .tb\:text-left{
     text-align: left;
   }