hds-web 1.33.2 → 1.33.4

package/src/HDS/components/Cards/Testimonials/testimonial.js

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import PropTypes from 'prop-types';
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
+
+
+export default function Testimonial(props) {
+
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+
+
+    const Card1 = (card) => {
+        card = card.card;
+        return (
+            <>
+                <div className={` backdrop-blur-lg bg-neutral-1000 bg-opacity-20  rounded-[6px] w-[220px] h-[428px] flex flex-col justify-between `}>
+                    <div className="h-[428px]">
+                        <div className=" pt-8 pl-6">
+                            <img src={card.title_img} alt="Card" className=" inline-block w-16 " />
+                        </div>
+                        {card.subtitle && <div className="mt-6 px-6 font-petrona text-base font-normal text-neutral-0 ">{card.subtitle}</div>}
+                    </div>
+                    <div className="pl-6 pb-8">
+                        {card.avatar.img_url && <img
+                            className={` w-14 h-14 shadow rounded-full ${(card.avatarBgColor ?? 'bg-neutral-0')} rounded inline-block`}
+                            alt='avatar'
+                            src={card.avatar.img_url}
+                        />}
+                        <div className=" pt-3">
+                            {card.avatar && card.avatar.name && <Typography textStyle='body2c-bold' className={` text-neutral-0`}>{card.avatar.name}</Typography>}
+                            {card.avatar && card.avatar.designation && <Typography textStyle='body3c' className={` text-neutral-0 mt-1`}>{card.avatar.designation}</Typography>}
+                        </div>
+                    </div>
+
+                </div>
+            </>
+        );
+    };
+
+    const Card2 = (cardHover) => {
+        cardHover = cardHover.cardHover;
+        return (
+            <div className="h-[428px]">
+                <div className={`${HDSColor(cardHover.cardBg)} rounded-[6px] w-[220px] justify-between h-[428px] flex flex-col`}>
+                    <div className=" ">
+                        <div className="pt-8 pl-6 ">
+                            <img src={cardHover.img_url} alt="Card" className=" inline-block max-w-[148px]" />
+                        </div>
+                        <div className="mt-6 px-6 text-xl leading-[27px] font-semibold text-neutral-0">{cardHover.title}</div>
+
+                    </div>
+                    <div className="flex pb-8 pl-6 pt-5">
+                        <a href={cardHover?.slideCTA || ""}>
+
+                        <HDSButton
+                            className='flex'
+                            label={cardHover.button['cta_text']}
+                            type="secondaryLink"
+                            btnTextHoverClass="hover:text-neutral-0"
+                            btnTextColorClass='text-neutral-0'
+                            />
+                            </a>
+                    </div>
+                </div>
+
+
+            </div>
+        );
+    };
+
+
+    return (
+        <div
+            className={` ${isHovered ? '' : ''} w-[220px] h-[428px] rounded-2xl`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+
+            <div className={`transition-all max-w-[220px] absolute left-0 top-0 ease-in-out rounded-[6px]  duration-300 ${isHovered ? 'opacity-0 ' : 'opacity-100'}`}>
+                <Card1 card={props.card} />
+            </div>
+            <div className={`transition-al absolute left-0 top-0 ease-in-out rounded-[6px] duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
+                <Card2 cardHover={props.cardHover} />
+            </div>
+        </div>
+    );
+}
+
+Testimonial.defaultProps = {
+    card: {
+        cardBg: '',
+        img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
+        title_img: "Optum",
+        img_alt: 'optum',
+        subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
+        avatar: {
+            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
+            name: 'Nagaraja Nayak',
+            designation: 'Optum',
+            avatarBgColor: 'bg-yellow-400'
+        }
+    },
+    cardHover: {
+        cardBg: 'bg-green-500',
+        img_url: '',
+        img_alt: '',
+        title: 'Optum goes from concept to production in 100 days with Hasura',
+        button: {
+            cta_text: 'Read the case Study'
+        }
+
+
+    }
+};

package/src/HDS/components/Cards/VideoCard/homeVC.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Testimonial } from '../Testimonials';
+import {FeedbackCard} from '../Feedback'
+
+export default function HomeVC(props) {
+    return (
+        <>
+            <div className='relative overflow-hidden'>
+                <div className='absolute z-50 right-[4px] rounded-[6px] hidden min-[699px]:block  w-[220px] h-[428px] top-[4px] bg-neutral-0/40'>
+
+                    <Testimonial
+                        card={props.testimonial.card}
+                        cardHover={props.testimonial.cardHover}
+                    />
+                </div>
+                <div className=' relative hidden w-[580px] h-[436px] rounded-2xl min-[699px]:flex justify-center items-center'>
+                    <div className='w-[580px] h-[436px] rounded-lg flex flex-col items-center justify-center overflow-hidden'>
+                        <div className=''>
+                            <div className=''>
+                                <video
+                                    autoPlay
+                                    loop
+                                    muted
+                                    className=" object-fill  max-w-full max-h-full scale-150"
+                                    src={props.video_url}
+                                />
+                                <div className='w-full relative z-50 flex-col flex items-center'>
+                                    <div className='relative top-[55px] left-[0px] w-[147px] h-[3px] bg-neutral-0/20' />
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div className='overflow-x-hidden w-screen  min-[699px]:hidden'>
+                    <div className='max-[375]:h-[684px] h-[600px] rounded flex flex-col items-center justify-cente overflow-hidden'>
+
+                        <div className=''>
+                            <div className=''>
+                                <div className='h-[348px]'>
+                                    <video
+                                        autoPlay
+                                        loop
+                                        muted
+                                        className=" object-fill  max-w-full max-h-full min-[699px]:scale-[1.7]"
+                                        src={props.video_url}
+                                    />
+
+                                </div>
+                                <div className='absolute max-[365px]:h-[657px] h-[600px] z-50 top-[72px] px-4'>
+                                    <div className=''>
+                                        < FeedbackCard
+                                            brandImgUrl={props.testimonial.card.title_img}
+                                            brandImgAlt={props.testimonial.card.avatar.name}
+                                            description={props.testimonial.card.subtitle}
+                                            speakerName={props.testimonial.card.avatar.name}
+                                            speakerDesignation={props.testimonial.card.avatar.designation}
+                                            speakerImgUrl={props.testimonial.card.avatar.img_url}
+                                            blurb={props.testimonial.cardHover.title}
+                                            dividerClass='border-b border-neutral-150'
+                                            caseStudyUrl={props.testimonial.cardHover.button.cta_text}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+        </>)
+}

package/src/HDS/components/Cards/VideoCard/index.js

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

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

@@ -0,0 +1,15 @@
+export * from './Menu';
+export * from './Misc';
+export * from './BrandCard';
+export * from './Dropdown';
+export * from './Feedback';
+export * from './Link';
+export * from './TalkDetailCard';
+export * from './CommunityCard';
+export * from './Announcement';
+export * from './VideoCard';
+export * from './Testimonials';
+export * from './StoryCard';
+export * from './EventCards'
+export * from './InviteCard'
+export * from './ConnectorCard'

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

@@ -0,0 +1,164 @@
+import React from "react";
+import { Icon } from "../common-components/Icon";
+
+// props.images must be an array of urls , if using Next JS this could something like
+// const props.images = ['/img/img1.png', '/img/img2.png', '/img/img3.png']
+
+export default function Carouseltest(props) {
+  // We will start by storing the index of the current image in the state.
+  const [currentImage, setCurrentImage] = React.useState(0);
+  const [touchStart, setTouchStart] = React.useState(0);
+  const [touchEnd, setTouchEnd] = React.useState(0);
+
+  const handleTouchStart = e => {
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+  
+  const handleTouchMove = e => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+  
+  const handleTouchEnd = () => {
+    if (touchStart - touchEnd > 150) {
+      nextImage();
+    }
+  
+    if (touchStart - touchEnd < -150) {
+      previousImage();
+    }
+  };
+
+  // We are using react ref to 'tag' each of the props.images. Below will create an array of
+  // objects with numbered keys. We will use those numbers (i) later to access a ref of a
+  // specific image in this array.
+  const refs = props.images.reduce((acc, val, i) => {
+    acc[i] = React.createRef();
+    return acc;
+  }, {});
+
+  const scrollToImage = i => {
+    setCurrentImage(i);
+    // 'tagged' each one of the props.images with a ref,
+    // use built-in scrollIntoView API to do eaxactly what it says on the box - scroll it into
+    // your current view! To do so we pass an index of the image, which is then use to identify our current
+    // image's ref in 'refs' array above.
+    refs[i].current.scrollIntoView({
+      //     Defines the transition animation.
+      behavior: 'smooth',
+      //      Defines vertical alignment.
+      block: 'nearest',
+      //      Defines horizontal alignment.
+      inline: 'start',
+    });
+  };
+
+  const totalImages = props.images.length;
+
+
+  // Below functions will assure that after last image we'll scroll back to the start,
+  const nextImage = () => {
+    if (currentImage >= totalImages - 1) {
+      scrollToImage(0);
+    } else {
+      scrollToImage(currentImage + 1);
+    }
+  };
+
+  const previousImage = () => {
+    if (currentImage === 0) {
+      scrollToImage(totalImages - 1);
+    } else {
+      scrollToImage(currentImage - 1);
+    }
+  };
+
+  const arrowStyle = 'absolute text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
+
+  // Let's create dynamic buttons.
+  const sliderControl = isLeft => (
+    <button
+      type="button"
+      onClick={isLeft ? previousImage : nextImage}
+      className={`${arrowStyle} ${isLeft ? 'left-2 db:-left-5' : 'right-2 db:-right-5'}`}
+      style={{ top: '40%' }}
+    >
+      <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
+        {isLeft ?
+
+          <Icon className={`${currentImage == 0 ? "invisible" : ""}`} height={'h-6'} variant={'chevronleft'} strokeColor='#1F2A37' />
+
+          :
+
+          <Icon height={'h-6'} variant={'chevronright'} strokeColor='#1F2A37' />
+          
+        }
+      </span>
+    </button>
+  );
+
+  const preview = () => {
+    return (
+      <div className="flex flex-row gap-4 mt-10 ml-4">
+        {props.images.map((img, i) => (
+          <div className="" key={i} >
+            <img src={img} className={`max-w-[6rem] ${currentImage == i ? "border-blue-400 border-4" : ""} rounded-lg object-contain`} />
+          </div>
+        ))}
+      </div>
+    )
+  };
+
+  return (
+    // Images are placed using inline flex. We then wrap an image in a div
+    // with flex-shrink-0 to stop it from 'shrinking' to fit the outer div.
+    // Finally the image itself will be 100% of a parent div. Outer div is
+    // set with position relative, so we can place our cotrol buttons using
+    // absolute positioning on each side of the image.
+    <div>
+      <div className="flex justify-center select-none  items-center gap-10 ">
+        <div className="relative w-full">
+          <div className="snap-x inline-flex select-none overflow-x-scroll scrollbar-hide"
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          onMouseDown={e => setTouchStart(e.clientX)}
+          onMouseUp={e => {
+            if (touchStart - e.clientX > 50) {
+              nextImage();
+            }
+        
+            if (touchStart - e.clientX < -50) {
+              previousImage();
+            }
+          }}
+          >
+            {sliderControl(true)}
+            {props.images.map((img, i) => (
+              <div className="w-3/4 snap-center shrink-0  mx-4" key={i} ref={refs[i]}>
+                <img src={img} className={`w-full select-none rounded-3xl object-contain ${currentImage == i ? "" : " opacity-60 transition-opacity delay-300 ease-in"}`} draggable="false"  />
+              </div>
+            ))}
+            {sliderControl()}
+            {/* <div className=' bg-purple-500'>
+
+            <div
+              className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0">
+              <ol className='flex gap-4 bg-neutral-0 p-3 rounded-full'>
+                {props.images.map((page) => (
+                  <li key={page} className=' w-2.5 h-2.5 rounded-full bg-neutral-200' />
+                ))}
+              </ol>
+            </div>
+
+          </div> */}
+
+          </div>
+        </div>
+      </div>
+      <div>
+        {preview()}
+      </div>
+    </div>
+  );
+};
+

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

@@ -0,0 +1,197 @@
+import React from "react";
+import { useRef, useState } from "react";
+import { Icon } from "../common-components/Icon";
+import { HDSButton } from "../Buttons";
+export default function HomePageCarousel(props) {
+    const carouselRef = useRef(null); // Create a ref using useRef
+    const [currentCard, setCurrentCard] = React.useState(0);
+    const [showAllCards, setShowAllCards] = useState(false);
+
+    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-12 w-12 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 stroke-[1.5]'} variant={'arrowleft'} strokeColor='#1F2A37' />
+                )}
+            </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={'arrowright'} strokeColor='#1F2A37' />
+                )}
+            </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-reverse">
+                <div className="flex pt-10 justify-center items-center">
+                    {/* {slider()} */}
+                    <div className="flex">
+                        {sliderLeftControl()}
+                        {sliderRightControl()}
+                    </div>
+                </div>
+                <div className="justify-center select-none  items-center"
+
+                >
+                    <div className="">
+                        <div className={`snap-center w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
+                            ref={carouselRef}
+                        >
+
+                            {props.cards.map((item, i) => (
+                                <div className="snap-center first:ml-0 mx-5 shrink-0" key={i} ref={refs[i]}>
+                                    <div className="w-full snap-center  select-none rounded-3xl object-contain">
+                                        {React.createElement(props.component, item)}
+                                    </div>
+
+                                </div>
+                            ))}
+                            {/* <div className="snap-center mx-5 shrink-0" key={totalCards}>
+                                <div className="w-full select-none rounded-3xl object-contain">
+                                    {React.createElement(props.component, props.cards[0])}
+                                </div>
+                            </div> */}
+
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    );
+};