hds-web 1.29.9 → 1.30.1

package/package.json

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

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

@@ -58,25 +58,55 @@ export default function HomePageCarousel(props) {
 
     const maxVisibleCards = 6;
 
-    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';
+    const arrowStyle = ' text-2xl z-10 bg-black h-12 w-12 ml-6 w-10 rounded-full bg-neutral-0 hover:bg-neutral-0 flex items-center justify-center shadow';
 
-    const sliderControl = isLeft => (
+    const disableButton = (current, dir) => {
+        if (dir === 'isLeft') {
+            if (current === 0) return true;
+            else return false
+        }
+
+        if (dir === 'isRight') {
+            if (current === 2) return true;
+            else return false
+        }
+
+
+    }
+
+    const sliderLeftControl = () => (
         <button
             type="button"
-            onClick={isLeft ? previousCard : nextCard}
-            className={`flex  ${arrowStyle} ${isLeft ? '' : ''}`}
-
-        >
-            <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
-                {isLeft ?
 
-                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
+            onClick={() => {
 
-                    :
+                previousCard();
+            }}
+            className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
+            disabled={disableButton(currentCard, 'isLeft')} // Disable the button if it's the last card
+        >
+            <span role="img" aria-label={`Arrow left `}>
+                {(
+                    <Icon height={'h-6 w-6 stroke-[1.5]'} variant={'arrowleft'} strokeColor='#1F2A37' />
+                )}
+            </span>
+        </button>
+    );
+    const sliderRightControl = () => (
+        <button
+            type="button"
 
-                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
+            onClick={() => {
 
-                }
+                nextCard();
+            }}
+            className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
+            disabled={disableButton(currentCard, 'isRight')} // Disable the button if it's the last card
+        >
+            <span role="img" aria-label={`Arrow right `}>
+                {(
+                    <Icon height={'h-6 w-6 stroke-[1.5]'} variant={'arrowright'} strokeColor='#1F2A37' />
+                )}
             </span>
         </button>
     );
@@ -130,8 +160,8 @@ export default function HomePageCarousel(props) {
                 <div className="flex pt-10 justify-center items-center">
                     {/* {slider()} */}
                     <div className="flex">
-                        {sliderControl(true)}
-                        {sliderControl()}
+                        {sliderLeftControl()}
+                        {sliderRightControl()}
                     </div>
                 </div>
                 <div className="justify-center select-none  items-center"
@@ -143,18 +173,18 @@ export default function HomePageCarousel(props) {
                         >
 
                             {props.cards.map((item, i) => (
-                                <div className=" db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={i} ref={refs[i]}>
+                                <div className="snap-center 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>
 
                                 </div>
                             ))}
-                            <div className="db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={totalCards}>
+                            {/* <div className="db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={totalCards}>
                                 <div className="w-full select-none rounded-3xl object-contain">
                                     {React.createElement(props.component, props.cards[0])}
                                 </div>
-                            </div>
+                            </div> */}
                         
 
                         </div>

package/src/styles/tailwind.css

@@ -11298,6 +11298,11 @@ select{
     padding-right: 2.5rem;
   }
 
+  .tb\:px-2{
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
   .tb\:px-3{
     padding-left: 0.75rem;
     padding-right: 0.75rem;
@@ -11343,11 +11348,6 @@ select{
     padding-bottom: 0.5rem;
   }
 
-  .tb\:px-2{
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
   .tb\:pb-0{
     padding-bottom: 0px;
   }