hds-web 1.4.0 → 1.4.2

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

@@ -1,6 +1,8 @@
 import React from "react";
+import { useRef } from "react";
 import { Icon } from "../common-components/Icon";
 export default function CarouselCard(props) {
+    const carouselRef = useRef(null); // Create a ref using useRef
     const [currentCard, setCurrentCard] = React.useState(0);
     const [touchStart, setTouchStart] = React.useState(0);
     const [touchEnd, setTouchEnd] = React.useState(0);
@@ -28,49 +30,62 @@ export default function CarouselCard(props) {
         return acc;
     }, {});
 
-    const scrollToCard = (i) => {
-        setCurrentCard(i);
-    
-        if (refs[i] && refs[i].current) {
-          refs[i].current.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "start",
-          });
-        }
-      };
+   
 
     const totalCards = props.cards.length;
 
     const nextCard = () => {
-        
-        let scrollByAmount = '';
-        if(window.innerWidth>1140){scrollByAmount = 3}
-        else if(window.innerWidth<1140 && window.innerWidth>800) {scrollByAmount = 2}
-        else scrollByAmount = 1;
-        if (currentCard >= totalCards - scrollByAmount) {
-          scrollToCard(0);
-        } else {
-          scrollToCard(currentCard + scrollByAmount);
+        let scrollByAmount = 1;
+        if (window.innerWidth > 800) {
+          scrollByAmount = 2;
+        }
+        if (window.innerWidth > 1140) {
+          scrollByAmount = 3;
+        }
+      
+        if (currentCard < totalCards - scrollByAmount) {
+          setCurrentCard(currentCard + scrollByAmount);
+          carouselRef.current.scrollTo({
+            left: carouselRef.current.scrollLeft + carouselRef.current.children[0].offsetWidth * scrollByAmount,
+            behavior: "smooth",
+          });
         }
+        else {
+            setCurrentCard(0);
+            carouselRef.current.scrollTo({
+              left: 0,
+              behavior: "smooth",
+            });
+          }
       };
-    
+      
       const previousCard = () => {
-        let scrollByAmount = "";
+        let scrollByAmount = 1;
+        if (window.innerWidth > 800) {
+          scrollByAmount = 2;
+        }
         if (window.innerWidth > 1140) {
           scrollByAmount = 3;
-        } else if (window.innerWidth > 800) {
-          scrollByAmount = 2;
-        } else {
-          scrollByAmount = 1;
         }
-    
-        if (currentCard === 0) {
-          scrollToCard(totalCards - scrollByAmount);
+      
+        if (currentCard > 0) {
+          setCurrentCard(currentCard - scrollByAmount);
+          carouselRef.current.scrollTo({
+            left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
+            behavior: "smooth",
+          });
         } else {
-          scrollToCard(currentCard - scrollByAmount);
+          const lastCardIndex = totalCards - 1;
+          const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
+          setCurrentCard(lastCardIndex);
+          carouselRef.current.scrollTo({
+            left: scrollLeft,
+            behavior: "smooth",
+          });
         }
       };
+      
+      
  
     const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-purple-200 hover:bg-neutral-0 flex items-center justify-center';
 
@@ -99,7 +114,7 @@ export default function CarouselCard(props) {
             <div className="block tb:hidden">
                 {props.cards.map((item, i) => (
                     <div className="my-5" key={i} ref={refs[i]}>
-                        <div className="rounded-3xl ">
+                        <div className="rounded-3xl overflow-hidden">
                             {React.createElement(props.component, item)}
                         </div>
 
@@ -131,10 +146,13 @@ export default function CarouselCard(props) {
                     }}
                 >
                     <div className="">
-                        <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}>
+                        <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
+                         ref={carouselRef}
+                        >
 
                             {props.cards.map((item, i) => (
-                                <div className="max-[1140px]:snap-center tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
+                                // <div className="max-[1140px]:snap-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
+                                <div className=" db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={i} ref={refs[i]}>
                                     <div className="w-full select-none rounded-3xl object-contain">
                                         {React.createElement(props.component, item)}
                                     </div>

package/src/HDS/helpers/Grid/grid.js

@@ -3,12 +3,15 @@ import React from 'react';
 const GridComponent = ({ cards, gridSize }) => {
   const numCards = cards.length;
   const cardsLeftInLastRow = numCards % gridSize;
-  const lastRowColSpan = `col-span-${gridSize / cardsLeftInLastRow}`;
-
   const renderCards = () => {
+    let cardClass = '';
+    if(cards.length === 4 ){
+      cardClass = 'grid grid-cols-2'
+    }
+    else cardClass = 'gridAutoClass';
     return cards.map((card, index) => (
       <div
-      className='gridClass'
+      className={cardClass}
         key={index}
       >
         {/* Render card content */}

package/src/styles/tailwind.css

@@ -753,6 +753,12 @@ select {
   }
 }
 
+@media (min-width: 800px) {
+  .container {
+    max-width: 800px;
+  }
+}
+
 @media (min-width: 905px) {
   .container {
     max-width: 905px;
@@ -1404,10 +1410,6 @@ select {
   max-height: 100%;
 }
 
-.min-h-\[96px\] {
-  min-height: 96px;
-}
-
 .min-h-\[116px\] {
   min-height: 116px;
 }
@@ -1538,14 +1540,14 @@ select {
   width: 100vw;
 }
 
-.min-w-\[100px\] {
-  min-width: 100px;
-}
-
 .min-w-\[11\.5rem\] {
   min-width: 11.5rem;
 }
 
+.min-w-\[144px\] {
+  min-width: 144px;
+}
+
 .min-w-\[18rem\] {
   min-width: 18rem;
 }
@@ -1568,14 +1570,6 @@ select {
   min-width: 100%;
 }
 
-.min-w-\[144px\] {
-  min-width: 144px;
-}
-
-.min-w-\[11\.25rem\] {
-  min-width: 11.25rem;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1596,6 +1590,10 @@ select {
   max-width: 18rem;
 }
 
+.max-w-\[22\.313rem\] {
+  max-width: 22.313rem;
+}
+
 .max-w-\[22rem\] {
   max-width: 22rem;
 }
@@ -1634,10 +1632,6 @@ select {
   max-width: min-content;
 }
 
-.max-w-\[22\.313rem\] {
-  max-width: 22.313rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2066,14 +2060,6 @@ select {
   overflow: hidden;
 }
 
-.overflow-clip {
-  overflow: clip;
-}
-
-.overflow-visible {
-  overflow: visible;
-}
-
 .overflow-scroll {
   overflow: scroll;
 }
@@ -2180,16 +2166,6 @@ select {
   border-top-right-radius: 0.375rem;
 }
 
-.rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-}
-
-.rounded-l-full {
-  border-top-left-radius: 9999px;
-  border-bottom-left-radius: 9999px;
-}
-
 .rounded-tl-2xl {
   border-top-left-radius: 1rem;
 }
@@ -5157,10 +5133,6 @@ select {
   stroke-width: 1.5px;
 }
 
-.stroke-\[1\.5\] {
-  stroke-width: 1.5;
-}
-
 .object-contain {
   object-fit: contain;
 }
@@ -5494,18 +5466,10 @@ select {
   padding-top: 1rem;
 }
 
-.pt-5 {
-  padding-top: 1.25rem;
-}
-
 .pt-6 {
   padding-top: 1.5rem;
 }
 
-.pr-0 {
-  padding-right: 0px;
-}
-
 .pt-8 {
   padding-top: 2rem;
 }
@@ -7466,15 +7430,6 @@ select {
   margin-left: 0px;
 }
 
-.first\:rounded-full:first-child {
-  border-radius: 9999px;
-}
-
-.first\:rounded-r-full:first-child {
-  border-top-right-radius: 9999px;
-  border-bottom-right-radius: 9999px;
-}
-
 .first\:rounded-l-full:first-child {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -7485,29 +7440,10 @@ select {
   background-color: rgb(57 112 253 / var(--tw-bg-opacity));
 }
 
-.first\:bg-purple-500:first-child {
-  --tw-bg-opacity: 1;
-  background-color: rgb(140 73 250 / var(--tw-bg-opacity));
-}
-
-.first\:bg-neutral-200:first-child {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .last\:mr-0:last-child {
   margin-right: 0px;
 }
 
-.last\:rounded-3xl:last-child {
-  border-radius: 1.5rem;
-}
-
-.last\:rounded-r-3xl:last-child {
-  border-top-right-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
-}
-
 .last\:rounded-r-full:last-child {
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
@@ -8110,14 +8046,12 @@ select {
     flex-shrink: 0;
   }
 
-  .max-\[1140px\]\:snap-center {
-    scroll-snap-align: center;
+  .max-\[1140px\]\:snap-end {
+    scroll-snap-align: end;
   }
-}
 
-@media (min-width: 360px) {
-  .mb-s\:flex-row {
-    flex-direction: row;
+  .max-\[1140px\]\:snap-always {
+    scroll-snap-stop: always;
   }
 }
 
@@ -8276,20 +8210,12 @@ select {
     gap: 4rem;
   }
 
-  .tb\:gap-\[31\.5rem\] {
-    gap: 31.5rem;
-  }
-
   .tb\:gap-3 {
     gap: 0.75rem;
   }
 
-  .tb\:gap-1 {
-    gap: 0.25rem;
-  }
-
-  .tb\:gap-6 {
-    gap: 1.5rem;
+  .tb\:gap-\[31\.5rem\] {
+    gap: 31.5rem;
   }
 
   .tb\:gap-x-16 {
@@ -8331,6 +8257,11 @@ select {
     padding: 4rem;
   }
 
+  .tb\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .tb\:px-3 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
@@ -8346,15 +8277,6 @@ select {
     padding-right: 2rem;
   }
 
-  .tb\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  .tb\:pb-14 {
-    padding-bottom: 3.5rem;
-  }
-
   .tb\:pb-8 {
     padding-bottom: 2rem;
   }
@@ -8367,6 +8289,10 @@ select {
     padding-top: 2.5rem;
   }
 
+  .tb\:pt-14 {
+    padding-top: 3.5rem;
+  }
+
   .tb\:pt-8 {
     padding-top: 2rem;
   }
@@ -8375,14 +8301,6 @@ select {
     padding-top: 2.875rem;
   }
 
-  .tb\:pl-0 {
-    padding-left: 0px;
-  }
-
-  .tb\:pt-14 {
-    padding-top: 3.5rem;
-  }
-
   .tb\:text-left {
     text-align: left;
   }
@@ -8745,6 +8663,12 @@ select {
   }
 }
 
+@media (min-width: 800px) {
+  .tb-m\:snap-start {
+    scroll-snap-align: start;
+  }
+}
+
 @media (min-width: 905px) {
   .tb-l\:mb-0 {
     margin-bottom: 0px;
@@ -8782,8 +8706,8 @@ select {
     width: 38%;
   }
 
-  .tb-l\:w-\[520px\] {
-    width: 520px;
+  .tb-l\:w-\[380px\] {
+    width: 380px;
   }
 
   .tb-l\:w-\[62\%\] {
@@ -8798,14 +8722,6 @@ select {
     width: 100%;
   }
 
-  .tb-l\:w-\[456px\] {
-    width: 456px;
-  }
-
-  .tb-l\:w-\[380px\] {
-    width: 380px;
-  }
-
   .tb-l\:min-w-\[400px\] {
     min-width: 400px;
   }
@@ -8846,10 +8762,6 @@ select {
     gap: 9rem;
   }
 
-  .tb-l\:gap-6 {
-    gap: 1.5rem;
-  }
-
   .tb-l\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -8982,6 +8894,10 @@ select {
     width: 36%;
   }
 
+  .db\:w-\[520px\] {
+    width: 520px;
+  }
+
   .db\:w-\[72\%\] {
     width: 72%;
   }
@@ -9000,10 +8916,6 @@ select {
     width: 100%;
   }
 
-  .db\:w-\[520px\] {
-    width: 520px;
-  }
-
   .db\:min-w-\[625px\] {
     min-width: 625px;
   }
@@ -9024,6 +8936,10 @@ select {
     max-width: 625px;
   }
 
+  .db\:snap-center {
+    scroll-snap-align: center;
+  }
+
   .db\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

package/tailwind.config.js

@@ -170,6 +170,7 @@ module.exports = {
       screens: {
         'mb-s': '360px',
         'tb': '600px',
+        'tb-m': '800px',
         'tb-l': '905px',
         'db': '1240px',
         'db-l': '2560px'