hds-web 1.8.0 → 1.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -18,6 +18,8 @@
     "react-dom": "^17.0.1",
     "react-markdown": "^8.0.7",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4",
     "yarn": "^1.22.19"

package/src/HDS/components/Buttons/button.js

@@ -145,8 +145,8 @@ export default function Button(props) {
   }
 
   let sizeType = 'default';
-  if(type=='iconOnly'){sizeType='iconOnly'}
-  if(type=='secondaryLink' || type=='primaryLink' ){sizeType='links'}
+  if(type==='iconOnly'){sizeType='iconOnly'}
+  if(type==='secondaryLink' || type==='primaryLink' ){sizeType='links'}
 
 
   const buttonClasses = [
@@ -217,12 +217,12 @@ Button.defaultProps = {
   size: 'md',
   type: 'primary',
   leftIconVariant: 'none',
-  rightIconVariant: 'home3',
+  rightIconVariant: 'none',
   rightIconColor: '#FFFFFF',
   leftIconColor: '#FFFFFF',
   state: 'default',
   label: 'Button',
-  rightAnimatedArrow: 'True' ,
+  rightAnimatedArrow: 'true' ,
   rightAnimatedArrowColor: '#FFFFFF',
   animatedHoverStroke: 'group-hover:stroke-neutral-0',
   btnTextHoverClass: 'hover:text-neutral-0'

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Typography } from "../../../foundation/Typography";
+import { HDSColor } from "../../../foundation/ColorPalette";
+import { Icon } from '../../../components/common-components/Icon';
+
+export default function AnnouncementSM(props) {
+  const bgClass = props.bgColorClass ? HDSColor(props.bgColorClass) : 'bg-neutral-0';
+  const tagBgClass = props.tagBgColorClass ? HDSColor(props.tagBgColorClass) : 'bg-purple-500';
+  const tagTextClass = props.tagTextColorClass ? HDSColor(props.tagTextColorClass) : 'text-neutral-0';
+  const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
+
+  return (
+    <div className={`${bgClass} rounded-full shadow-md py-2 px-3 inline-flex items-center`}>
+      <div className={`${tagBgClass} hidden tb:block py-1 px-3 rounded-full mr-4`}>
+        <Typography textStyle="body2-medium" className={`${tagTextClass}`}>{props.tagText}</Typography>
+      </div>
+      <a href={props.linkUrl}>
+      <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center`}>
+        {props.linkText}
+        <Icon height={'hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
+      </Typography>
+      
+      </a>
+    </div>
+  )
+}

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

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

package/src/HDS/components/Cards/CommunityCard/communityCard.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Typography } from '../../../foundation/Typography'
+
+export default function CommunityCard(props) {
+    
+    return (
+      <div className="p-5 tb:p-8 bg-neutral-0 shadow-sm rounded-3xl">
+        <Typography textStyle="h5" as="h5" className="text-neutral-1000">{props.name}</Typography>
+        <Typography textStyle="body1-medium" className="text-neutral-500 pb-4">{props.designation}</Typography>
+        <Typography textStyle="body1" className="text-neutral-500">{props.tweets}</Typography>
+      </div>
+    )
+
+}

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

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

package/src/HDS/components/Cards/ImageBox/imagebox.js

@@ -8,6 +8,7 @@ export default function ImageBox(props) {
         btnbutton,
         title,
         description,
+        subTitle,
         className,
         imgUrl,
         imgAlt,
@@ -19,18 +20,21 @@ export default function ImageBox(props) {
         <div className={className}>
             {imgUrl &&
             <div>
-                <img src={imgUrl} alt={imgAlt} className={imageClasses} />
+                <img src={imgUrl} alt={imgAlt} className={`${imageClasses} mb-4`} />
                 </div>}
             {title && (
                 <Typography textStyle='h3' className={HDSColor(titleTextColor)}>{title}</Typography>
             )
             }
+            {subTitle && (
+                <Typography textStyle='sub2' className='text-neutral-600 pt-2 pb-6'>{subTitle}</Typography>
+            )}
             {description && (
                 <Typography textStyle='body1'>{description}</Typography>
             )
 
             }
-            {btn.btnLabel && (
+            {btn.cta_text && (
                 <a href={btn.cta_link}>
                     <HDSButton
                         label={btn.cta_text}

package/src/HDS/components/Cards/ImageSlider/imageSlider.js

@@ -0,0 +1,55 @@
+import React from "react";
+import Slider from "react-slick";
+import { HDSColor } from '../../../foundation/ColorPalette';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+
+export default function ImageSlider(props) {
+  // console.log(props.brands);
+  const slideSettings = {
+    infinite: true,
+    slidesToShow: props.slidesToShow,
+    slidesToScroll: 1,
+    autoplay: true,
+    speed: props.speed,
+    autoplaySpeed: props.autoplaySpeed,
+    cssEase: "linear",
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 4,
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 767,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 500,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+  const gradientBgClass = HDSColor(props.gradientBgColor);
+  return (
+    <div>
+      <Slider {...slideSettings} className={`before:content-[''] before:w-[90px] before:h-full before:inline-block before:absolute before:top-0 before:left-0 before:z-[1] before:bg-gradient-to-r before:${gradientBgClass} before:to-transparent
+        after:content-[''] after:w-[90px] after:h-full after:inline-block after:absolute after:top-0 after:left-[unset] after:right-0 after:z-[1] after:bg-gradient-to-r after:${gradientBgClass} after:to-transparent after:rotate-180`}>
+        {props.brands.map((brand, index) => (
+          <div key={index} className="m-4">
+            <img src={brand.imgUrl} alt={brand.imgAlt} />
+          </div>
+        ))}
+      </Slider>
+    </div>
+  )
+}

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

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

package/src/HDS/components/Cards/Misc/imageCard.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Typography } from '../../../foundation/Typography'
+
+export default function ImageCard(props) {
+    
+    return (
+      <a href={props.linkUrl} className=" bg-neutral-0 rounded-3xl mb-s:flex items-center shadow-sm">
+        <div className="h-full w-full mb-s:max-w-[142px]">
+          <img className=" w-full rounded-t-3xl mb-s:rounded-tr-none mb-s:rounded-s-3xl h-full" src={props.imgUrl} alt={props.imgAlt} />
+        </div>
+        <div className="p-4 mb-m:p-6">
+          <Typography textStyle="h5" as="h5" className="text-neutral-1000 pb-2">{props.title}</Typography>
+          <Typography textStyle="body3" className=" text-neutral-600">{props.description}</Typography>
+        </div>
+      </a>
+    )
+
+}

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

@@ -1,3 +1,4 @@
 export {default as TalkCard} from './talkCard';
 export {default as TalkCard2} from './talkcard2';
-export {default as IconCard} from './iconCard';
+export {default as IconCard} from './iconCard';
+export {default as ImageCard} from './imageCard';

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

@@ -0,0 +1 @@
+export { default as Testimonial } from './testimonial'

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

@@ -0,0 +1,120 @@
+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 {
+        card,
+        cardHover
+    } = props;
+
+
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+    const Card1 = () => {
+        return (
+            <>
+                <div className={`${HDSColor(card.cardBg)} max-w-[220px] flex flex-col `}>
+                    <div className="mt-8">
+                        <div className="max-w-[64px] pt-8 pl-6">
+                            <img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png" alt="Card" className=" inline-block w-16 h-[18.52px]" />
+                        </div>
+                        <Typography textStyle='quote' className="mt-6 px-6">{card.subtitle}</Typography>
+                    </div>
+                    <div className="pl-6 pb-8">
+                        <img
+                            className={` w-14 h-14 shadow rounded-full ${HDSColor(card.avatar.avatarBgColor)} rounded inline-block`}
+                            alt='avatar'
+                            src={card.img_url}
+                        />
+                        <div className=" pt-3">
+                            <Typography textStyle='body2c-bold' className={` text-neutral-0`}>{card.avatar.name}</Typography>
+                            <Typography textStyle='body3c' className={` text-neutral-0 mt-1`}>{card.avatar.designation}</Typography>
+                        </div>
+                    </div>
+
+                </div>
+            </>
+        );
+    };
+
+    const Card2 = () => {
+        return (
+            <div className="">
+                <div className={`${HDSColor(cardHover.cardBg)} max-w-[221px] justify-between h-[442px] flex flex-col`}>
+                    <div className=" ">
+                        <div className="max-w-[148px] pt-8 pl-6 ">
+                            <img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png" alt="Card" className=" inline-block max-w-[150px] h-[18.52px] pl-6 pr-12 pt-8" />
+                        </div>
+                        <Typography textStyle='quote' className="mt-6 px-6">{cardHover.title}</Typography>
+
+                    </div>
+                    <div className="flex pb-8 pl-6 pt-5">
+                        <HDSButton
+                            className='flex'
+                            label={cardHover.button['cta_text']}
+                            type="secondaryLink"
+                            btnTextHoverClass="hover:text-neutral-0"
+                            btnTextColorClass='text-neutral-0'
+                        />
+                    </div>
+                </div>
+
+
+            </div>
+        );
+    };
+
+
+    return (
+        <div
+            className={` ${isHovered ? '' : ''} max-w-[221px]`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            <div className={`transition-all max-w-[220px] fixed ease-in-out duration-300 ${isHovered ? 'opacity-0 ' : 'opacity-100'}`}>
+                <Card1 />
+            </div>
+            <div className={`transition-al fixed ease-in-out duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
+                <Card2 />
+            </div>
+        </div>
+    );
+}
+
+Testimonial.defaultProps = {
+    card: {
+        cardBg: 'bg-green-400',
+        title_img: "Optum",
+        img_alt: 'optum',
+        subtitle: '“It took just 100 days to get our new clinical platform running… We don’t think we could have achieved this unbelievable speed without Hasura.”',
+        avatar: {
+            img_url: '',
+            name: 'Nagaraja Nayak',
+            designation: 'Optum',
+            avatarBgColor: 'bg-yellow-400'
+        }
+    },
+    cardHover: {
+        cardBg: 'bg-yellow-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/index.js

@@ -4,4 +4,7 @@ export * from './BrandCard';
 export * from './Dropdown';
 export * from './Feedback';
 export * from './Link';
-export * from './TalkDetailCard';
+export * from './TalkDetailCard';
+export * from './ImageSlider';
+export * from './CommunityCard';
+export * from './Announcement';

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

@@ -0,0 +1,205 @@
+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 [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/index.js

@@ -1,2 +1,3 @@
 export {default as Carousel} from './carousel';
-export {default as CarouselCard} from './carouselCard';
+export {default as CarouselCard} from './carouselCard';
+export {default as HomepageCarousel} from './homepageCarousel';

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

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