hds-web 1.21.2 → 1.21.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.21.2",
+  "version": "1.21.3",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

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

@@ -0,0 +1,2 @@
+export { default as StoryCardSM } from './storysm';
+export { default as StoryCardXL } from './storyxl';

package/src/HDS/components/Cards/StoryCard/storysm.js

@@ -0,0 +1,113 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { Typography } from '../../../foundation/Typography'
+import { motion } from "framer-motion";
+import { HDSButton } from '../../Buttons'
+
+export default function StoryCard(props) {
+    return (
+        <>
+            <a
+                href={props.linkUrl}
+                className={`rounded-2xl hover:shadow-xl p-8 h-full flex flex-col justify-between group/sc border border-neutral-200 hover:border-opacity-0 min-h-[260px] group`}
+            >
+
+                <>
+                    <div className='flex items-center justify-between'>
+                        {props.brandImageUrl && props.brandImageAlt && (
+                            <div className="max-w-[190px]">
+                                <img src={props.brandImageUrl} alt={props.brandImageAlt} className='max-w-[100px]' />
+                            </div>
+                        )
+
+                        }
+                        {props.iconVariant &&
+                            (
+                                <div className="flex flex-row relative  ">
+                                    <div className="group-hover/sc:opacity-0 left-0 absolute">
+                                        {/* <Icon
+                                            height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
+                                            variant={props.iconArrowVariant}
+                                            strokeColor={props.iconArrowStrokeColor}
+                                            strokeClass={HDSColor(props.iconArrowStrokeClass)}
+                                        /> */}
+                                    </div>
+                                    {props.iconTag &&
+                                    (
+                                    <div className=" gap-2 transition-all duration-300 group-hover/sc:opacity-100 inline-flex flex-row translate-x-0 group-hover/sc:-translate-x-5">
+                                            <Icon
+                                                height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
+                                                variant={props.iconArrowVariant}
+                                                strokeColor={props.iconArrowStrokeColor}
+                                                strokeClass={HDSColor(props.iconArrowStrokeClass)}
+                                            />
+                                            <div
+                                            className=" opacity-0 group-hover/sc:opacity-100 transition-opacity duration-300 ">
+                                            <Typography textStyle='body3c' className='hidden group-hover/sc:block'>{props.iconTag}</Typography>
+                                            </div>
+                                        </div>
+                                        )
+                                    }
+                                </div>
+
+                            )
+                        }
+                    </div>
+                    {props.description &&
+                        (
+                            <div>
+                                <div className="translate-y-10 group-hover/sc:translate-y-0 duration-300 transition-all">
+                                    <Typography
+                                        textStyle="body3"
+                                        className={`${HDSColor(props.descTextColor)} mt-2`}>
+                                        {props.description}
+                                    </Typography>
+                                </div>
+                                <div className="translate-y-8 transition-all group-hover/sc:translate-y-0 opacity-0 group-hover/sc:opacity-100 duration-300 group-hover/sc:flex">
+                                    <div className="flex">
+                                        <HDSButton
+                                            label={props.readMoreBtn.cta_text}
+                                            type='secondaryLink'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='sm'
+                                            rightAnimatedArrow={true}
+                                            rightAnimatedArrowColor='#3970FD'
+                                            animatedHoverStroke='#3970FD'
+                                            btnTextColorClass='text-blue-500'
+                                            btnTextHoverClass=''
+                                            className=' mt-[14px]'
+                                        />
+                                    </div>
+
+                                </div>
+                            </div>
+
+                        )}
+                </>
+
+            </a>
+        </>
+    )
+}
+
+StoryCard.defaultProps = {
+    descTextColor: '',
+    iconTag: 'Customer Stories',
+    titleTextColor: '',
+    brandImageUrl: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687778913/image_16_a725262c4e.png',
+    brandImageAlt: 'pipe',
+    linkUrl: '#',
+    iconVariant: 'videorecorder',
+    iconStrokeColor: 'blue-500',
+    iconArrowVariant: 'arrownarrowupright',
+    iconArrowStrokeColor: 'blue-400',
+    title: 'Webinar',
+    description: 'Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for GraphQL with Hasura',
+    readMoreBtn: {
+        cta_text: 'Read More'
+    }
+};

package/src/HDS/components/Cards/StoryCard/storyxl.js

@@ -0,0 +1,140 @@
+import React from "react";
+import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from '../../Buttons';
+import { Icon } from "../../common-components";
+
+export default function StoryCardXL(props) {
+    return (
+        <>
+            <div className="flex flex-col-reverse px-6 py-10 db-s:px-0 db-s:py-0 db-s:flex-row db:gap-[132px]">
+
+                <div className="flex flex-col db-s:pl-20 db-s:pt-20 db-s:pb-[74px]">
+                    {
+                        props.tagline && (
+                            <Typography textStyle='h6' className='text-blue-400 db-s:block uppercase mb-2 hidden '>{props.tagline}</Typography>
+                        )
+                    }
+                    {props.brandImageURL &&
+                        props.brandImageAlt && (
+                            <>
+                                <img src={props.brandImageURL} alt={props.brandImageAlt} className="max-w-[140px] db-s:block hidden " />
+                            </>
+                        )
+
+                    }
+                    {props.title &&
+                        (
+                            <div className="flex pt-6 flex-col gap-6">
+                                <Typography textStyle='h3' className='text-neutral-1000 db-s:block hidden'>{props.title}</Typography>
+                                {props.heroList &&
+                                    (
+                                        <div>
+                                            <div className="flex flex-col gap-4">
+                                        {props.heroList.map((value, index)=>(
+                                            <div key={index} className='flex gap-5'>
+                                                <Icon
+                                                    height='h-8 w-8 stroke-2' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
+                                                <Typography
+                                                    textStyle='sub2' className='text-neutral-700' >
+                                                    {value.heroListTitle}
+                                                </Typography>
+                                            </div>
+
+                                        ))
+                                                   
+
+                                                }
+
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                            </div>
+                        )}
+                    {props.CTA &&
+                        <div className="mt-16 tb:mt-10 tb:flex">
+                            <a href={props.CTA['url']}>
+                                <HDSButton
+                                    label={props.CTA['text']}
+                                    type={props.CTA['type'] || 'secondary'}
+                                    size='md'
+                                    rightAnimatedArrowColor="#3970FD"
+                                />
+                            </a>
+                        </div>}
+                </div>
+                {(props.heroImageURL &&
+                    props.heroImageAlt) ?
+                    (
+                        <div className="flex mt-4 tb:mt-0 justify-start db-s:justify-end db-s:pt-20 tb:max-w-[600px]">
+                            <img src={props.heroImageURL} alt={props.heroImageAlt} className="rounded-xl db-s:rounded-none db-s:rounded-br-3xl db-s:rounded-tl-3xl max-w-[280px] tb:max-w-[400px] db-s:max-w-[522px]  " />
+                        </div>
+                    )
+                    :
+                    (
+                        <>
+                            {props.video_url && (
+                                <div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] db-s:min-w-[550px]">
+                                    <video
+                                        autoPlay
+                                        loop
+                                        playsInline
+                                        muted
+                                        src={props.video_url}
+                                        className=" rounded-xl db-s:rounded-none db-s:rounded-br-3xl db-s:rounded-tl-3xl"
+                                    />
+                                </div>)}
+                        </>
+                    )}
+
+                <div className="db-s:hidden pb-6">
+                    {props.brandImageURL &&
+                        props.brandImageAlt && (
+                            <>
+                                <img src={props.brandImageURL} alt={props.brandImageAlt} className="max-w-[140px] pb-6 " />
+                            </>
+                        )
+
+                    }
+                    <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
+                </div>
+                {
+                    props.tagline && (
+                        <Typography textStyle='h6' className='text-blue-400 db-s:hidden uppercase'>{props.tagline}</Typography>
+                    )
+                }
+            </div>
+
+        </>
+    )
+}
+
+StoryCardXL.defaultProps = {
+    heroImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690373781/website%20v3/optum_geyxv3.png',
+    heroImageAlt: 'optum',
+    heroIconVariant: 'calendar',
+    heroIconStrokeClass: 'stroke-neutral-1000',
+    heroListTitle: '100 days from concept to production',
+    brandImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302131/main-web/roadshow/optum_koz0nf.svg',
+    brandImageAlt: 'optum',
+    title: 'Healthcare giant Optum goes from concept to production in 100 days with Hasura',
+    description: 'description1',
+    CTA: {
+        text: 'Button Label',
+    },
+    heroList:[
+        {
+            heroIconVariant:'calendar',
+            heroListTitle:'100 days from concept to production'
+        },
+        {
+            heroIconVariant:'database03',
+            heroListTitle:'Vastly improved access to relevant data'
+        },
+        {
+            heroIconVariant:'settings01',
+            heroListTitle:'Simpler data and API management'
+        }
+    ]
+    // video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
+} 

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

@@ -8,4 +8,5 @@ export * from './TalkDetailCard';
 export * from './CommunityCard';
 export * from './Announcement';
 export * from './VideoCard';
-export * from './Testimonials';
+export * from './Testimonials';
+export * from './StoryCard';

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

@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Icon } from '../common-components';
+
+const 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, 5000); 
+        return () => clearInterval(intervalId); 
+    }, [CenterId, isAutoSliding]);
+
+    
+
+    const nextBtn = () => {
+        if (LeftId === components.length - 1) {
+            setLeftId(0);
+        } else {
+            setLeftId(LeftId + 1);
+        }
+        if (CenterId === components.length - 1) {
+            setCenterId(0);
+        } else {
+            setCenterId(CenterId + 1);
+        }
+
+        if (RightId === components.length - 1) {
+            setRightId(0);
+        } else {
+            setRightId(RightId + 1);
+        }
+        setFlowDirection(true);
+        setActiveSlide((prevIndex) => (prevIndex === components.length - 1 ? 0 : prevIndex + 1));
+
+        setFlowDirection(true);
+    };
+
+    const prevBtn = () => {
+        setFlowDirection(false);
+        if (LeftId === 0) {
+            setLeftId(components.length - 1);
+        } else {
+            setLeftId(LeftId - 1);
+        }
+        if (CenterId === 0) {
+            setCenterId(components.length - 1);
+        } else {
+            setCenterId(CenterId - 1);
+        }
+        if (RightId === 0) {
+            setRightId(components.length - 1);
+        } else {
+            setRightId(RightId - 1);
+        }
+        setActiveSlide((prevIndex) => (prevIndex === 0 ? components.length - 1 : prevIndex - 1));
+
+        setFlowDirection(false);
+    };
+
+    const handleMouseEnter = () => {
+        setIsAutoSliding(false);
+    };
+
+    const handleMouseLeave = () => {
+        setIsAutoSliding(true);
+    };
+
+    return (
+        <div 
+        className='h-full'
+        onMouseEnter={handleMouseEnter} 
+        onMouseLeave={handleMouseLeave}
+        >
+            <div 
+            className="hidden db-s:grid relative h-full"
+            >
+                <motion.div className="  ">
+                    <AnimatePresence initial={false}>
+                        <motion.div
+                            key={LeftId}
+                            variants={variants}
+                            initial={FlowDirection ? 'center' : 'leftHidden'}
+                            animate="left"
+                            exit={'leftHidden'}
+                            className="carousel-item"
+                        >
+                            {components[LeftId]}
+                        </motion.div>
+                        <motion.div
+                            variants={variants}
+                            key={CenterId}
+                            initial={FlowDirection ? 'right' : 'left'}
+                            animate="center"
+                            className="carousel-item"
+                        >
+                            {components[CenterId]}
+                        </motion.div>
+                        <motion.div
+                            key={RightId}
+                            variants={variants}
+                            initial={FlowDirection ? 'rightHidden' : 'center'}
+                            animate="right"
+                            exit={'rightHidden'}
+                            className="carousel-item"
+                        >
+                            {components[RightId]}
+                        </motion.div>
+                    </AnimatePresence>
+                </motion.div>
+                {/* slider bar */}
+                {/* <div className="flex justify-center mt-4">
+                    {components.map((_, index) => (
+                        <div
+                            key={index}
+                            className={`w-4 h-4 rounded-full mx-1 ${activeSlide === index ? 'bg-blue-500' : 'bg-gray-300'
+                                }`}
+                        ></div>
+                    ))}
+                </div> */}
+            </div>
+            <div className="mt-12 ">
+                <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='db-s:hidden flex flex-row overflow-scroll scrollbar-hide gap-2 mb-m:gap-4 tb-m:gap-10'>
+                {components.map((component, index) => (
+                    <React.Fragment key={index}>
+                        <div className='tb-xl:min-w-[800px] tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px]'>
+                        {component}
+                        </div>
+                    </React.Fragment>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+
+export default Carousels;

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

@@ -2,4 +2,5 @@ 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 CustomCarousel} from './customCarousel';
+export {default as CustomerStories} from './customerStories';

package/src/index.css

@@ -821,3 +821,36 @@ position: absolute;
     opacity: 0;
   }
 }
+
+
+
+.carousel-wrapper {
+  display: grid;
+  place-content: center;
+  border-radius: 2rem;
+
+}
+
+.carousel-content {
+  position: relative;
+ 
+}
+
+.carousel-item {
+  position: absolute;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  
+}
+
+.carousel-btns {
+  
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  z-index: 6;
+
+
+}
+