hds-web 1.33.1 → 1.33.2

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

@@ -1,171 +0,0 @@
-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/homeCarousel.js

@@ -1,370 +0,0 @@
-import React from "react";
-import { useRef, useState, useEffect } from "react";
-import { Icon } from "../common-components/Icon";
-import { HDSButton } from "../Buttons";
-import { VideoCard } from '../Cards/VideoCard'
-const carouselItems = [
-    [
-        "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016995/optum_Card_17973d6328.png",
-        "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016994/philips_5bab1602cd.png",
-        "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016996/nutrien_e629b651d5.png",
-    ]
-
-];
-
-
-const SideCard = (item) => (
-    <div className="h-full">
-
-        <div className=' w-[300px] flex flex-col items-center justify-between rounded-3xl h-[338px] '>
-            <img src={item} alt='img' className='w-[300px]' />
-        </div>
-    </div>
-)
-
-export default function HomePageCarousePrimary(props) {
-
-   
-    //center carousel
-    let arr =
-        [
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016994/philips_5bab1602cd.png",
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016996/nutrien_e629b651d5.png",
-            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016995/optum_Card_17973d6328.png",
-
-        ]
-    // let key1, key2;
-    // for (const key in props.data) {
-    //     if (props.data.hasOwnProperty(key)) {
-    //         key1 = props.data[key].slideLeftImage.data.attributes.url
-    //         key2 = props.data[key].slideRightImage.data.attributes.url
-    //         arr.push(key1);
-
-    //     }
-    // }
-
-    function extractMappedValues(obj) {
-        return {
-            video_url: obj.video.data.attributes.url || "",
-            testimonial: {
-                card: {
-                    title_img: obj.slideLogo?.data?.attributes?.url || "",
-                    subtitle: obj.slideQuoteText || "",
-                    avatar: {
-                        img_url: obj.slideAuthorImage?.data?.attributes?.url || "",
-                        name: obj.slideAuthorName || "",
-                        designation: obj.slideAuthorTitle || ""
-                    }
-                },
-                cardHover: {
-                    cardBg: obj.slideHoverColor || "",
-                    img_url: obj.slideHoverImage?.data?.attributes?.url || "",
-                    title: obj.slideHoverText || "",
-                    button: {
-                        cta_text: obj.slideCTAText || ""
-                    },
-                    slideCTA: obj?.slideCTA || ""
-                }
-            }
-        };
-    }
-
-
-    const videoProps = [];
-    for (const key in props.data) {
-        if (props.data.hasOwnProperty(key)) {
-            const videoProp = extractMappedValues(props.data[key]);
-            videoProps.push(videoProp);
-        }
-    }
-  
-    const [isLastCard, setIsLastCard] = useState(false);
-    const [boolean, setBoolean] = React.useState(null);
-    const carouselRef = useRef(null); // Create a ref using useRef
-    const carouselRef2 = useRef(null); // Create a ref using useRef
-    const [currentCard, setCurrentCard] = React.useState(0);
-   
-    const refs = videoProps.reduce((acc, val, i) => {
-        acc[i] = React.createRef();
-        return acc;
-    }, {});
-    const refs2 = carouselItems.reduce((acc, val, i) => {
-        acc[i] = React.createRef();
-        return acc;
-    }, {});
-
-
-
-    const totalCards = arr.length;
-
-    const nextCard = () => {
-        let scrollByAmount = 1;
-        let scrollByAmount2 = 1.5;
-
-        if (currentCard < totalCards - scrollByAmount) {
-            setCurrentCard(currentCard + scrollByAmount);
-            carouselRef.current.scrollTo({
-                left: carouselRef.current.scrollLeft + carouselRef.current.children[0].offsetWidth * scrollByAmount,
-                behavior: "smooth",
-            });
-            carouselRef2.current.scrollTo({
-                left: carouselRef2.current.scrollLeft + carouselRef2.current.children[0].offsetWidth * scrollByAmount2,
-                behavior: "smooth",
-            });
-        } else {
-            setCurrentCard(0);
-            carouselRef.current.scrollTo({
-                left: 0,
-                behavior: "smooth",
-            });
-            carouselRef2.current.scrollTo({
-                left: 0,
-                behavior: "smooth",
-            });
-            setIsLastCard(true); // Set the state variable to indicate that it's the last card
-        }
-    };
-
-    const previousCard = () => {
-        let scrollByAmount = 1;
-        let scrollByAmount2 = 1.5;
-        if (currentCard > 0) {
-            setCurrentCard(currentCard - scrollByAmount);
-            carouselRef.current.scrollTo({
-                left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
-                behavior: "smooth",
-            });
-            carouselRef2.current.scrollTo({
-                left: carouselRef2.current.scrollLeft - carouselRef2.current.children[0].offsetWidth * scrollByAmount2,
-                behavior: "smooth",
-            });
-            setIsLastCard(false); // Set the state variable to indicate that it's not the last card
-        } 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 scrollLeft2 = carouselRef2.current.scrollWidth - carouselRef2.current.children[0].offsetWidth * scrollByAmount2;
-            setCurrentCard(lastCardIndex);
-            carouselRef2.current.scrollTo({
-                left: scrollLeft2,
-                behavior: "smooth",
-            });
-            setIsLastCard(false); // Set the state variable to indicate that it's not the last card
-        }
-    };
-
-    const arrowStyle = ' text-2xl z-50 bg-black h-10 w-10 rounded-full bg-neutral-0 shadow-md hover:bg-neutral-100 hover:shadow-lg bg-blue-600 z-500 flex items-center justify-center';
-
-    const toggleBoolean = () => {
-        setBoolean((prevBoolean) => !prevBoolean); // Toggle the boolean value
-
-    };
-
-
-
-    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={() => {
-                toggleBoolean();
-                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='#00288E' />
-                )}
-            </span>
-        </button>
-    );
-    const sliderRightControl = () => (
-        <button
-            type="button"
-
-            onClick={() => {
-                toggleBoolean();
-                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'} variant={'chevronright'} strokeColor='#00288E' />
-                )}
-            </span>
-        </button>
-    );
-    const [isScrollActive, setScrollActive] = useState(false);
-
-   
-    return (
-
-        <div className="min-[699px]:relative block">
-
-            <div className="mx-auto w-screen"
-
-            >
-                <div className="min-[699px]:relative flex flex-col items-center right-[75ppx] top-[112px]">
-                    <div className="absolute">
-
-                        {/* <BackCarousel /> */}
-                    </div>
-
-                </div>
-
-                <div className=" min-[699px]:relative top-5 rounded-lg">
-                    <div className=" min-[699px]:absolute">
-                        <div className=" flex flex-col-reverse tb:flex-col-reverse tb:flex items-center">
-                            <div className="hidden min-[699px]:flex z-10 min-[699px]:mt-[70px] justify-center items-center">
-
-                                <div className="flex w-screen gap-6 justify-center ">
-                                    <div className="btnDBleft">
-
-                                        {sliderLeftControl(true)}
-                                    </div>
-                                    <div className="btnDBright">
-
-                                        {sliderRightControl()}
-                                    </div>
-                                </div>
-                            </div>
-                            {/* mobile */}
-                            <div className="max-[369px]:mt-8  min-[400px]:-mt-[10rem] min-[699px]:hidden">
-
-                                <div className="flex w-screen gap-6 justify-center ">
-
-                                    {sliderLeftControl(true)}
-
-
-                                    {sliderRightControl()}
-
-                                </div>
-                            </div>
-                            <div className="justify-center  select-none items-center"
-
-                            >
-                                <div className="w-screen flex justify-center items-center ">
-                                    <div className=" z-30">
-                                        <div className={`snap-x max-[699px]:w-screen  bg-neutral-00 tb:w-[580px] items-center z-20 inline-flex select-none overflow-x-hidden scrollbar-hide`}
-                                            ref={carouselRef}
-                                        >
-
-                                            {videoProps.map((item, i) => (
-                                                <div className=" db:snap-center  snap-center  mx-6 " key={i} ref={refs[i]}>
-                                                    <div className="select-none rounded-3xl object-contain ">
-                                                        {React.createElement(VideoCard, item)}
-                                                    </div>
-
-                                                </div>
-                                            ))}
-
-                                        </div>
-                                    </div>
-
-                                    <div className={`hidden snap-x tb-l:max-w-[1240px] min-[1300px]:max-w-7xl
-                                        gap-[167px]
-                                        items-center min-[1300px]:flex  select-none overflow-x-hidden scrollbar-hide  absolute z-0`}
-                                        ref={carouselRef2}
-
-                                    >
-
-                                        {arr.map((item, i) => {
-                                          
-                                    
-                                            return (
-                                                <>
-
-                                                    <div
-                                                        className={`${isScrollActive ? '' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-3`}
-                                                        key={i + 'x'}
-                                                        ref={refs2[i]}
-                                                    >
-                                                        <div className="select-none rounded-3xl object-contain">
-                                                            <div>
-                                                                {i == 0 && (
-                                                                    SideCard(arr[i + 1])
-                                                                )
-
-                                                                }
-                                                                {i == 1 && (
-                                                                    SideCard(arr[1])
-                                                                )
-
-                                                                }
-
-
-
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                    <div
-                                                        className={`${isScrollActive ? ' ' : ''} transition-all duration-[1500ms]   z-[1] snap-center tb-m:snap-start mx-3 `}
-                                                        key={i + 'y'}
-                                                        ref={refs2[i]}
-                                                    >
-                                                        <div className="select-none rounded-3xl object-contain">
-
-                                                            {SideCard(arr[2])}
-
-
-
-                                                        </div>
-                                                    </div>
-                                                    <div
-                                                        className={`${isScrollActive ? '' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-3 `}
-                                                        key={i + 'z'}
-                                                        ref={refs2[i]}
-                                                    >
-                                                        <div className="select-none rounded-3xl object-contain">
-
-                                                            {SideCard(arr[0])}
-
-                                                        </div>
-                                                    </div>
-
-
-                                                </>
-                                            )
-                                        })}
-
-                                    </div>
-
-
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className=" hidden min-[699px]:flex tb:flex-col items-center">
-                    <div className="relative -right-[44px]">
-                        <img alt="tab" src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1687108911/hasura-design-system/Group_2608834_rxnldq.png" className="w-[709px]" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-

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

@@ -1,7 +0,0 @@
-export {default as Carousel} from './carousel';
-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 EventStories} from './eventsStories';

package/src/HDS/components/Checkbox/checkbox.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import { Icon } from "../common-components/Icon"
-export default function Checkbox(props) {
-  const {
-    disabled,
-    CHECKBOX_ARR
-  } = props;
-  return (
-    <fieldset>
-      <legend className="sr-only">Notifications</legend>
-      <div className="space-y-5">
-        {CHECKBOX_ARR.map((value) => (
-          <div className="relative flex items-start">
-            <div className="flex h-6 items-center">
-              <input
-                id="comments"
-                aria-describedby="comments-description"
-                name="comments"
-                type="checkbox"
-                disabled={disabled}
-                className="h-4 w-4 rounded-full border-neutral-200 
-                  focus:ring-blue-100
-                  focus:ring-offset-0
-                  focus:ring-0
-                  focus:border
-                  focus:bg-neutral-0
-                  focus:border-neutral-300
-                  focus:shadow-[0px_0px_0px_4px_#F0F4FF]
-                  focus:outline-none
-                  hover:bg-blue-200
-                  hover:border
-                  hover:border-blue-600
-                  bg-checkbox
-                  checked:hover:bg-blue-200
-                  checked:border-blue-600
-                  checked:bg-blue-100
-                  checked:focus:border
-                  checked:focus:border-blue-600
-                  checked:focus:bg-blue-100
-                  checked:hover:border
-                  checked:hover:border-blue-600
-                  checked:focus:shadow-[0px_0px_0px_4px_#F0F4FF]
-                  disabled:bg-neutral-100
-                  disabled:border
-                  disabled:border-neutral-300
-                
-                  "
-               
-                  
-              />
-            </div>
-            <div className="ml-3 text-sm leading-6">
-              <label htmlFor="comments" className="text-neutral-800">
-                {value.label}
-              </label>
-              <p id="comments-description" className="text-neutral-600">
-                {value.description}
-              </p>
-            </div>
-          </div>
-        ))}
-      </div>
-      <style>
-      {`
-        .bg-checkbox:checked {
-          background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27blue%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e")
-          
-        }
-        `}
-      </style>
-    </fieldset>
-  );
-}

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

@@ -1 +0,0 @@
-export {default as Checkbox} from './checkbox'

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

@@ -1 +0,0 @@
-export {default as V3Footer} from './v3Footer';