hds-web 1.33.1 → 1.33.2

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

@@ -1,205 +0,0 @@
-import React 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);
-    };
-
-    const handleTouchMove = e => {
-        setTouchEnd(e.targetTouches[0].clientX);
-    };
-
-    const handleTouchEnd = () => {
-        if (touchStart - touchEnd > 150) {
-            nextCard();
-        }
-
-        if (touchStart - touchEnd < -150) {
-            previousCard();
-        }
-    };
-
-    const refs = props.cards.reduce((acc, val, i) => {
-        acc[i] = React.createRef();
-        return acc;
-    }, {});
-
-
-
-    const totalCards = props.cards.length;
-
-    const nextCard = () => {
-        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 = 1;
-        if (window.innerWidth > 800) {
-            scrollByAmount = 2;
-        }
-        if (window.innerWidth > 1140) {
-            scrollByAmount = 3;
-        }
-
-        if (currentCard > 0) {
-            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 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 => (
-        <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' />
-
-                    :
-
-                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
-
-                }
-            </span>
-        </button>
-    );
-    return (
-        <div className="">
-            <div className="block tb:hidden">
-                {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()} */}
-                    <div className="flex">
-                        {sliderControl(true)}
-                        {sliderControl()}
-                    </div>
-                </div>
-                <div className="justify-center select-none  items-center"
-                    onTouchStart={handleTouchStart}
-                    onTouchMove={handleTouchMove}
-                    onTouchEnd={handleTouchEnd}
-                    onMouseDown={e => setTouchStart(e.clientX)}
-                    onMouseUp={e => {
-                        if (touchStart - e.clientX > 50) {
-                            nextCard();
-                        }
-
-                        if (touchStart - e.clientX < -50) {
-                            previousCard();
-                        }
-                    }}
-                >
-                    <div className="">
-                        <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-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>
-
-                                </div>
-                            ))}
-
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    );
-};

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

@@ -1,223 +0,0 @@
-import React from "react";
-import { useRef, useState } from "react";
-import { Icon } from "../common-components/Icon";
-import { HDSButton } from "../Buttons";
-export default function CustomCarousel(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);
-    };
-
-    const handleTouchMove = e => {
-        setTouchEnd(e.targetTouches[0].clientX);
-    };
-
-    const handleTouchEnd = () => {
-        if (touchStart - touchEnd > 150) {
-            nextCard();
-        }
-
-        if (touchStart - touchEnd < -150) {
-            previousCard();
-        }
-    };
-
-    const refs = props.cards.reduce((acc, val, i) => {
-        acc[i] = React.createRef();
-        return acc;
-    }, {});
-
-
-
-    const totalCards = props.cards.length;
-
-    const nextCard = () => {
-        let scrollByAmount = 1;
-
-        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 = 1;
-       
-        if (currentCard > 0) {
-            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 maxVisibleCards = 6;
-
-    const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 ml-6 w-10 rounded-full bg-neutral-0 hover:bg-neutral-0 flex items-center justify-center shadow';
-
-    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={() => {
-            
-                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'} variant={'chevronleft'} strokeColor='#6C737F' />
-                )}
-            </span>
-        </button>
-    );
-    const sliderRightControl = () => (
-        <button
-            type="button"
-
-            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={'chevronright'} strokeColor='#6C737F' />
-                )}
-            </span>
-        </button>
-    );
-    return (
-        <div className="">
-            <div className="flex flex-row overflow-scroll scrollbar-hide gap-4 tb:hidden">
-                {showAllCards
-                    ? props.cards.map((item, i) => (
-                        <div className="my-5" key={i} ref={refs[i]}>
-                            <div className="rounded-3xl shadow min-w-[312px] 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 shadow 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-reverse">
-                <div className="flex items-center justify-center mt-10">
-                    {/* {slider()} */}
-                    <div className="flex">
-                        {sliderLeftControl()}
-                        {sliderRightControl()}
-                    </div>
-                </div>
-                <div className="justify-center select-none  items-center"
-                    onTouchStart={handleTouchStart}
-                    onTouchMove={handleTouchMove}
-                    onTouchEnd={handleTouchEnd}
-                    onMouseDown={e => setTouchStart(e.clientX)}
-                    onMouseUp={e => {
-                        if (touchStart - e.clientX > 50) {
-                            nextCard();
-                        }
-
-                        if (touchStart - e.clientX < -50) {
-                            previousCard();
-                        }
-                    }}
-                >
-                    <div className="">
-                        <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-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
-                                <div className=" snap-center mx-5 shrink-0 py-1" key={i} ref={refs[i]}>
-                                    <div className="w-full select-none rounded-3xl object-contain">
-                                        {React.createElement(props.component, item)}
-                                    </div>
-
-                                </div>
-                            ))}
-
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    );
-};

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

@@ -1,176 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Icon } from '../common-components';
-
-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 = () => {
-        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);
-        }
-        setFlowDirection(true);
-        setActiveSlide((prevIndex) => (prevIndex === components.length - 1 ? 0 : prevIndex + 1));
-
-        setFlowDirection(true);
-    };
-    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));
-
-        setFlowDirection(false);
-    };
-
-    const handleMouseEnter = () => {
-        setIsAutoSliding(false);
-    };
-
-    const handleMouseLeave = () => {
-        setIsAutoSliding(true);
-    };
-    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="left"
-                            exit={'leftHidden'}
-                            className="carousel-item"
-                        >
-                            {components[LeftId]}
-                        </motion.div>
-                        <motion.div
-                            variants={variants}
-                            key={CenterId}
-                            initial={FlowDirection ? 'right' : 'left'}
-                            animate="center"
-                            className="carousel-item"
-                        >
-                            {components[CenterId]}
-                        </motion.div>
-                        <motion.div
-                            key={RightId}
-                            variants={variants}
-                            initial={FlowDirection ? 'rightHidden' : 'center'}
-                            animate="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 <></>;
-};