hds-web 1.29.0 → 1.29.2

package/package.json

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

package/src/HDS/components/BadgesCaption/eyebrow.js

@@ -6,10 +6,14 @@ import { Typography } from '../../foundation/Typography'
 import { HDSColor } from '../../foundation/ColorPalette';
 
 export default function EyeBrowText(props) {
+    const {
+        children,
+        eyebrow
+    } = props;
     const ColorClass = HDSColor(props.eyebrowColorClass);
     return (
         <div>
-            <Typography textStyle="h6" className={`${ColorClass} uppercase `}>{props.eyebrow}</Typography>
+            <Typography textStyle="h6" className={`${ColorClass} uppercase ${props.className} `}>{eyebrow || children}</Typography>
         </div>
     );
 }

package/src/HDS/components/Cards/Announcement/announcementSm.js

@@ -16,23 +16,23 @@ export default function AnnouncementSM(props) {
   const bgClass = props.bgColorClass ? HDSColor(props.bgColorClass) : 'bg-neutral-0';
   const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
   return (
-    <div className={`${bgClass} rounded-2xl tb:rounded-full shadow p-3 tb:py-2 tb:px-2 inline-flex items-center`}>
+    <div className={`${bgClass} rounded-2xl tb:rounded-full shadow p-3 tb:py-2 tb:px-4 inline-flex items-center`}>
       <div className="block items-center tb:flex">
-        <Typography 
-        textStyle="body2-medium" 
-        className={`inline-flex pl-0 tb:py-1 tb:px-3 rounded-full mr-4 min-w-fit ${tagColorVariants[props.tagColor]}`}>
+        {props.tagText && <Typography
+          textStyle="body2-medium"
+          className={`inline-flex pl-0 tb:py-1 tb:px-3 rounded-full mr-4 min-w-fit ${tagColorVariants[props.tagColor]}`}>
           {props.tagText}
-          </Typography>
-        <a href={props.linkUrl} 
-        className="pl-0 px-3 block tb:px-0 tb:pb-0">
-          <Typography 
-          textStyle="body2-medium" 
-          className={`${linkTextClass} group flex items-center`}>
+        </Typography>}
+        <a href={props.linkUrl}
+          className="pl-0 px-3 block tb:px-0 tb:pb-0">
+          <Typography
+            textStyle="body2-medium"
+            className={`${linkTextClass} group flex items-center`}>
             {props.linkText}
-            <Icon 
-            height={'block w-6 h-6 stroke-2 ml-2 mr-1 transition ease-in-out group-hover:translate-x-[5px]'} 
-            variant='arrownarrowright' 
-            strokeClass='stroke-blue-500' />
+            <Icon
+              height={'block w-6 h-6 stroke-2 ml-2 mr-1 transition ease-in-out group-hover:translate-x-[5px]'}
+              variant='arrownarrowright'
+              strokeClass='stroke-blue-500' />
           </Typography>
         </a>
       </div>

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

@@ -0,0 +1,171 @@
+import React, { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Icon } from '../common-components/Icon';
+
+export default function Carousels({ components, variants }) {
+    const [FlowDirection, setFlowDirection] = useState(true);
+    const [CenterId, setCenterId] = useState(0);
+    const [LeftId, setLeftId] = useState(components.length - 1);
+    const [RightId, setRightId] = useState(1);
+    const [activeSlide, setActiveSlide] = useState(0);
+    const [isAutoSliding, setIsAutoSliding] = useState(true);
+    const handleAutoSlide = () => {
+        if (isAutoSliding) {
+            nextBtn();
+        }
+    };
+
+    useEffect(() => {
+        const intervalId = setInterval(handleAutoSlide, 3000);
+        return () => clearInterval(intervalId);
+    }, [CenterId, isAutoSliding]);
+
+    const nextBtn = () => {
+        setFlowDirection(true)
+        if (LeftId === components.length - 1) {
+            setLeftId(0);
+        } else {
+            setLeftId(LeftId + 1);
+        }
+        if (CenterId === components.length - 1) {
+            setCenterId(0);
+        } else {
+            setCenterId(CenterId + 1);
+        }
+
+        if (RightId === components.length - 1) {
+            setRightId(0);
+        } else {
+            setRightId(RightId + 1);
+        }
+        setActiveSlide((prevIndex) => (prevIndex === components.length - 1 ? 0 : prevIndex + 1));
+    };
+    const prevBtn = () => {
+        setFlowDirection(false);
+        if (LeftId === 0) {
+            setLeftId(components.length - 1);
+        } else {
+            setLeftId(LeftId - 1);
+        }
+        if (CenterId === 0) {
+            setCenterId(components.length - 1);
+        } else {
+            setCenterId(CenterId - 1);
+        }
+        if (RightId === 0) {
+            setRightId(components.length - 1);
+        } else {
+            setRightId(RightId - 1);
+        }
+        setActiveSlide((prevIndex) => (prevIndex === 0 ? components.length - 1 : prevIndex - 1));
+
+    };
+
+    const handleMouseEnter = () => {
+        setIsAutoSliding(false);
+    };
+
+    const handleMouseLeave = () => {
+        setIsAutoSliding(false);
+    };
+    if (components) {
+        return (
+            <div
+                className='h-full'
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <div
+                    className="hidden tb-l:grid relative h-full"
+                >
+                    <motion.div className="flex justify-center ">
+                        <AnimatePresence initial={false}>
+                            <motion.div
+                                key={LeftId}
+                                variants={variants}
+                                // initial={FlowDirection ? 'center' : 'leftHidden'}
+                                animate={FlowDirection ? 'rightHidden' : 'left'}
+                                exit={'leftHidden'}
+                                className="carousel-item"
+                            >
+                                {components[LeftId]}
+                            </motion.div>
+                            <motion.div
+                                variants={variants}
+                                key={CenterId}
+                                // initial={FlowDirection ? 'right' : 'left'}
+                                animate={FlowDirection ? 'center' : 'center'}
+                                className="carousel-item"
+                            >
+                                {components[CenterId]}
+                            </motion.div>
+                            <motion.div
+                                key={RightId}
+                                variants={variants}
+                                // initial={FlowDirection ? 'rightHidden' : 'center'}
+                                animate={FlowDirection ? 'leftHidden' : 'right'}
+                                exit={'rightHidden'}
+                                className="carousel-item"
+                            >
+                                {components[RightId]}
+                            </motion.div>
+                        </AnimatePresence>
+                    </motion.div>
+                    {/* slider bar */}
+                    {/* <div className="flex justify-center mt-4">
+                    {components.map((_, index) => (
+                        <div
+                            key={index}
+                            className={`w-4 h-4 rounded-full mx-1 ${activeSlide === index ? 'bg-blue-500' : 'bg-gray-300'
+                                }`}
+                        ></div>
+                    ))}
+                </div> */}
+                </div>
+                <div className="hidden tb-l:flex mt-10 ">
+                    <div className="gap-4 w-full h-full flex justify-center">
+                        <motion.button
+                            initial={{ opacity: 0, scale: 0 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            transition={{
+                                type: 'spring',
+                                duration: 0.5,
+                            }}
+                            whileHover={{ scale: 1.1 }}
+                            whileTap={{ scale: 0.8 }}
+
+                            className=" w-12 h-12 bg-neutral-0 shadow hover:bg-neutral-100 rounded-full flex justify-center items-center active:bg-neutral-200 "
+                            onClick={prevBtn}
+                        >
+                            <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeClass='stroke-neutral-800' />
+                        </motion.button>
+                        <motion.button
+                            initial={{ opacity: 0, scale: 0 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            transition={{
+                                type: 'spring',
+                                duration: 0.5,
+                            }}
+                            whileHover={{ scale: 1.1 }}
+                            whileTap={{ scale: 0.8 }}
+                            className="w-12 h-12 bg-neutral-0 shadow hover:bg-neutral-100 rounded-full flex justify-center items-center active:bg-neutral-200"
+                            onClick={nextBtn}
+                        >
+                            <Icon height={'h-6 w-6'} variant={'chevronright'} strokeClass='stroke-neutral-800' />
+                        </motion.button>
+                    </div>
+                </div>
+                <div className='tb-l:hidden flex overflow-x-scroll pb-10 pt-4 tb:pb-16 tb:pt-10 px-4 gap-2 mb-m:gap-4 tb-m:gap-4'>
+                    {components.map((component, index) => (
+                        <React.Fragment key={index}>
+                            <div className='tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px] min-w-[300px]'>
+                                {component}
+                            </div>
+                        </React.Fragment>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+    else return <></>;
+};

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

@@ -3,4 +3,5 @@ export {default as CarouselCard} from './carouselCard';
 export {default as CarouselB} from './carouselB';
 export {default as HomepageCarouselPrimary} from './homeCarousel';
 export {default as CustomCarousel} from './customCarousel';
-export {default as CustomerStories} from './customerStories';
+export {default as CustomerStories} from './customerStories';
+export {default as EventStories} from './eventsStories';

package/src/HDS/components/Tabs/v3tab.js

@@ -32,7 +32,7 @@ export default function V3Tab(props) {
                             onClick={() => {
                                 handleTabClick(tab);
                             }}
-                            className={`${activeTab === tab.name ? ' text-neutral-0 transition-all duration-300' : ' hover:bg-neutral-500/30 text-neutral-400'} relative  px-3 py-1 whitespace-nowrap rounded-full hover:text-neutral-0`}
+                            className={`${activeTab === tab.name ? ' text-neutral-0 transition-all duration-300' : ' hover:bg-neutral-500/30 text-neutral-400'} relative  px-3 py-1 whitespace-nowrap rounded-full hover:text-neutral-0 transition-all duration-300`}
                         >
                             {activeTab === tab.name && (
                                 <motion.div

package/src/HDS/modules/Cards/aboutSection.js

@@ -85,7 +85,8 @@ export default function AboutSection(props) {
                             <Typography textStyle='body1-medium' className='text-neutral-500'>{props.deployed ?? 'Deployed'}</Typography>
                             <Typography textStyle='body1-medium' className='text-neutral-800'>{props.deployedValue}</Typography>
                         </div>}
-                        {props.githubRepoLink && <a href={props.githubRepoLink} className="flex gap-2 items-center">
+                        {props.githubRepoLink && 
+                        <a href={props.githubRepoLink} className="flex gap-2 items-center">
                             <Icon
                                 height={'h-6 w-6 stroke-[1.5px]'}
                                 variant='octoface'