hds-web 1.33.2 → 1.33.4

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/homeCarousel.js

@@ -0,0 +1,370 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,73 @@
+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

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

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

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