hds-web 1.9.3 → 1.9.4

package/package.json

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

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/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;
 }