hds-web 1.4.6 → 1.4.7

package/package.json

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

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

@@ -84,7 +84,7 @@ export default function TalkCard2(props) {
                                             size='md'
                                             designation={value.designation}
                                             imageUrl={value.imageUrl}
-                                            avatarBgColor={value.avatarBgColor}
+                                            avatarBgColor={props.avatarBgColor}
                                         />
                                     </div>
 

package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js

@@ -60,7 +60,7 @@ export default function TalkDetailCard(props) {
                       designation={speaker.designation}
                       imageUrl={speaker.imageUrl}
                       avatarVariant="circle"
-                      avatarBgColor={speaker.avatarBgColor}
+                      avatarBgColor={props.avatarBgColor}
                     />
                   </div>
                 ))

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

@@ -1,11 +1,13 @@
 import React from "react";
-import { useRef } from "react";
+import { useRef,useState } from "react";
 import { Icon } from "../common-components/Icon";
+import { HDSButton } from "../Buttons";
 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);
+    const [showAllCards, setShowAllCards] = useState(false);
 
     const handleTouchStart = e => {
         setTouchStart(e.targetTouches[0].clientX);
@@ -30,63 +32,63 @@ export default function CarouselCard(props) {
         return acc;
     }, {});
 
-   
+
 
     const totalCards = props.cards.length;
 
     const nextCard = () => {
         let scrollByAmount = 1;
         if (window.innerWidth > 800) {
-          scrollByAmount = 2;
+            scrollByAmount = 2;
         }
         if (window.innerWidth > 1140) {
-          scrollByAmount = 3;
+            scrollByAmount = 3;
         }
-      
+
         if (currentCard < totalCards - scrollByAmount) {
-          setCurrentCard(currentCard + scrollByAmount);
-          carouselRef.current.scrollTo({
-            left: carouselRef.current.scrollLeft + carouselRef.current.children[0].offsetWidth * scrollByAmount,
-            behavior: "smooth",
-          });
+            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",
+                left: 0,
+                behavior: "smooth",
             });
-          }
-      };
-      
-      const previousCard = () => {
+        }
+    };
+
+    const previousCard = () => {
         let scrollByAmount = 1;
         if (window.innerWidth > 800) {
-          scrollByAmount = 2;
+            scrollByAmount = 2;
         }
         if (window.innerWidth > 1140) {
-          scrollByAmount = 3;
+            scrollByAmount = 3;
         }
-      
+
         if (currentCard > 0) {
-          setCurrentCard(currentCard - scrollByAmount);
-          carouselRef.current.scrollTo({
-            left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
-            behavior: "smooth",
-          });
+            setCurrentCard(currentCard - scrollByAmount);
+            carouselRef.current.scrollTo({
+                left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
+                behavior: "smooth",
+            });
         } else {
-          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 lastCardIndex = totalCards - 1;
+            const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
+            setCurrentCard(lastCardIndex);
+            carouselRef.current.scrollTo({
+                left: scrollLeft,
+                behavior: "smooth",
+            });
         }
-      };
-      
-      
- 
+    };
+
+    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 sliderControl = isLeft => (
@@ -112,16 +114,49 @@ export default function CarouselCard(props) {
     return (
         <div className="">
             <div className="block tb:hidden">
-                {props.cards.map((item, i) => (
-                    <div className="my-5" key={i} ref={refs[i]}>
-                        <div className="rounded-3xl overflow-hidden">
-                            {React.createElement(props.component, item)}
+                {showAllCards
+                    ? props.cards.map((item, i) => (
+                        <div className="my-5" key={i} ref={refs[i]}>
+                            <div className="rounded-3xl overflow-hidden">
+                                {React.createElement(props.component, item)}
+                            </div>
                         </div>
-
+                    ))
+                    : props.cards.slice(0, maxVisibleCards).map((item, i) => (
+                        <div className="my-5" key={i} ref={refs[i]}>
+                            <div className="rounded-3xl overflow-hidden">
+                                {React.createElement(props.component, item)}
+                            </div>
+                        </div>
+                    ))}
+                {props.cards.length > maxVisibleCards && (
+                    <div className="flex">
+                     <HDSButton
+                    label={showAllCards ? "View less" : "View more"}
+                    type='secondary'
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    state='default'
+                    size='sm'
+                    rightAnimatedArrow={true}
+                    rightAnimatedArrowColor='#1E56E3'
+                    animatedHoverStroke='group-hover:stroke-neutral-0'
+                    className='flex'
+                    btnTextColorClass='text-blue-600'
+                    btnBgColorClass=''
+                    onClick={() => setShowAllCards(!showAllCards)}
+                />  
+                    {/* <button
+                        className="text-blue-500 mt-1 cursor-pointer"
+                        onClick={() => setShowAllCards(!showAllCards)}
+                    >
+                        {showAllCards ? "View less" : "View more"}
+                    </button> */}
                     </div>
-                ))}
+                )}
             </div>
 
+
             <div className="hidden tb:flex tb:flex-col">
                 <div className="flex pb-12 items-center justify-end ">
                     {/* {slider()} */}
@@ -147,7 +182,7 @@ export default function CarouselCard(props) {
                 >
                     <div className="">
                         <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
-                         ref={carouselRef}
+                            ref={carouselRef}
                         >
 
                             {props.cards.map((item, i) => (

package/src/styles/tailwind.css

@@ -8037,17 +8037,6 @@ select {
   }
 }
 
-@media (max-width: 419px) {
-  .max-\[419px\]\:rounded-full {
-    border-radius: 9999px;
-  }
-
-  .max-\[419px\]\:bg-blue-300 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(198 214 255 / var(--tw-bg-opacity));
-  }
-}
-
 @media (max-width: 399px) {
   .max-\[399px\]\:rounded-full {
     border-radius: 9999px;