hds-web 1.33.2 → 1.33.3

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

@@ -0,0 +1,6 @@
+export {default as TalkCard} from './talkCard';
+export {default as TalkCard2} from './talkcard2';
+export {default as IconCard} from './iconCard';
+export {default as ImageCard} from './imageCard';
+export {default as ImageBadgeCard} from './imageBadgeCard';
+export {default as IconCardButton} from './iconCardButton';

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

@@ -0,0 +1,77 @@
+import React from "react";
+import { Badges } from '../../BadgesCaption';
+import { Typography } from '../../../foundation/Typography'
+import { ProfileAvatar } from '../../Avatars'
+import { Time } from "../../../helpers/Time";
+import { HDSButton } from '../../Buttons'
+import ReactMarkdown from "react-markdown";
+
+export default function TalkCard(props) {
+    let CardClass = ''
+    if (props.speakerSet === undefined) {
+        CardClass = 'flex';
+    }
+    else CardClass = 'flex tb-l:flex-row flex-col';
+    return (
+
+        <div className="grid w-full">
+            <div className={`${CardClass} w-full max-w-[882px]`}>
+                <div className={"px-8 py-6" + ((props.speakerSet) ? " border-b tb-l:w-[62%] border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" : "")}>
+                    <Badges
+                        size={props.badges.size}
+                        color={props.badges.color}
+                        leftIconVariant={props.badges.leftIconVariant}
+                        leftIconColor={props.badges.leftIconColor}
+                        children={props.badges.label}
+                    />
+
+                    <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
+
+                    {props.para &&
+                        <Typography
+                            className='line-clamp-3 text-neutral-700'
+                            textStyle='body1c'>
+                                {props.para}
+                        </Typography>}
+
+                </div>
+
+                {props.speakerSet && (
+                    <div className="flex flex-col tb-l:w-[38%] pt-0 tb:pt-[2.875rem] justify-between">
+                        {
+                            props.speakerSet && (
+                                <div className="pl-6 flex gap-6 mt-9 tb:mt-0 mb-9 flex-col ">
+                                    {props.speakerSet.map((value, i) => (
+                                        <div key={i} className="">
+
+                                            <ProfileAvatar
+                                                name={value.name}
+                                                size='md'
+                                                designation={value.designation}
+                                                imageUrl={value.imageUrl}
+                                            />
+                                        </div>
+
+                                    ))}
+                                </div>
+                            )
+                        }
+                        <div className=" w-full border-t border-t-neutral-150 p-6 flex flex-row justify-between items-center">
+                            <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
+                            <HDSButton
+                                leftIconVariant='calendarplus02'
+                                leftIconColor="#1E56E3"
+                                rightIconVariant='none'
+                                state='default'
+                                size='sm'
+                                type="iconOnly"
+                                label=''
+                            />
+                        </div>
+                    </div>)}
+            </div>
+        </div>
+
+    )
+
+}

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

@@ -0,0 +1,119 @@
+import React from "react";
+import { Badges } from '../../BadgesCaption';
+import { Typography } from '../../../foundation/Typography'
+import { ProfileAvatar } from '../../Avatars'
+import { Time } from "../../../helpers/Time";
+import { HDSButton } from '../../Buttons'
+import ReactMarkdown from "react-markdown";
+import { HDSColor } from "../../../foundation/ColorPalette";
+
+export default function TalkCard2(props) {
+    let CardClass = ''
+    if (props.speakerSet) {
+        CardClass = 'tb-l:justify-between';
+    }
+    else CardClass = 'tb-l:justify-center';
+
+
+    return (
+
+        <a href={props.readUrl ?? '#'} className="grid group">
+            <div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
+                <div className={"px-6 pt-6 tb-l:px-8 tb-l:pb-6  tb-l:border-r tb-l:border-r-neutral-200"}>
+                    <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
+                        {props.badges &&
+                            props.badges.map((value, index) => (
+                                <div key={index} className='flex  whitespace-nowrap'>
+                                    <Badges
+                                        size={value.size}
+                                        color={value.color}
+                                        leftIconVariant={value.leftIconVariant}
+                                        leftIconColor={value.leftIconColor}
+                                        leftIconColorClass={HDSColor(value.leftIconColorClass)}
+                                        children={value.label}
+
+                                    />
+                                </div>
+                            ))
+                        }
+
+                    </div>
+                    <div className="tb-l:w-[380px] db:w-[520px] flex flex-col tb:justify-between">
+                        <div>
+                            <Typography className='mt-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
+                            {props.para &&
+                                <Typography
+                                    className='line-clamp-3 mt-2 text-neutral-700'
+                                    textStyle='body1c'>
+                                    {props.para}
+                                </Typography>
+                            }
+                        </div>
+                        <div className="flex pb-6 tb-l:pb-0">
+                            {props.readUrl &&
+                                props.para && (
+                                    <div>
+                                        <HDSButton
+                                        label={props.videoUrl ? 'Watch Recording': 'Read more'}
+                                            type='secondaryLink'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='md'
+                                            rightAnimatedArrow={true}
+                                            rightAnimatedArrowColor='#3970FD'
+                                            className='mt-2'
+                                            btnTextColorClass='text-blue-500'
+                                            animatedHoverStroke='stroke-blue-500'
+                                            btnTextHoverClass='hover:text-blue-500'
+                                        />
+                                    </div>
+                                )}
+                        </div>
+                    </div>
+                </div>
+
+                <div className={`${CardClass} tb-l:divide-y-2 divide-neutral-200 flex tb-l:w-full flex-col pt-0`} >
+                    {
+                        props.speakerSet && (
+                            <div className="px-6 py-6 border-t border-neutral-200 flex flex-col gap-6 tb:mt-0 tb-l:border-0 tb-l:h-full tb-l:justify-center  ">
+                                {props.speakerSet.map((value, i) => (
+                                    <div key={i} className="block">
+
+                                        <ProfileAvatar
+                                            name={value.name}
+                                            size='md'
+                                            designation={value.designation}
+                                            imageUrl={value.imageUrl}
+                                            avatarBgColor={props.avatarBgColor}
+                                        />
+                                    </div>
+
+                                ))}
+                            </div>
+                        )
+                    }
+                    {props.eventTime &&
+                        <div className="border-t border-neutral-200 tb-l:border-0 w-full pl-6 p-6 flex flex-row justify-between items-center">
+                            <Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
+                            {props.addCalendarUrl &&
+                                <a href={props.addCalendarUrl}>
+                                    <HDSButton
+                                        leftIconVariant='calendarplus02'
+                                        leftIconColor="#1E56E3"
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='sm'
+                                        type="iconOnly"
+                                        label=''
+                                    />
+                                </a>
+                            }
+                        </div>}
+                </div>
+            </div>
+        </a>
+
+    )
+
+}

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,105 @@
+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}
+                target={props.isExternalLink ? '_blank' : ""}
+                rel={props.isExternalLink ? 'noopener noreferrer' : ""}
+                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 pb-5'>
+                        {props.brandImageUrl && props.brandImageAlt && (
+                            <div className="max-h-[64px]">
+                                <img src={props.brandImageUrl} 
+                                alt={props.brandImageAlt} 
+                                    className="max-h-[44px] brightness-0  transition ease-in-out duration-300 group-hover:brightness-100"
+                                />
+                            </div>
+                        )}
+                        {props.iconVariant &&
+                            (
+                                <div className="hidden tb:flex flex-row relative  ">
+                                    {props.iconTag
+                                        && (
+                                            <div className="gap-2 items-center transition-all duration-[350ms] 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]'}
+                                                    variant={props.iconArrowVariant ?? ''}
+                                                    strokeClass='stroke-neutral-400'
+                                                />
+                                                <div
+                                                    className=" opacity-0 group-hover/sc:opacity-100 transition-opacity duration-[350ms] ">
+                                                    <Typography textStyle='body3-medium' className='hidden text-neutral-400 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="body1c"
+                                        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 ?? 'Read More'}
+                                            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: 'text-neutral-700',
+    isExternalLink:'false',
+    iconTag: 'Customer Stories',
+    titleTextColor: '',
+    brandImageUrl: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690909443/hasura-design-system/swiggy_m2hjxy.png',
+    brandImageAlt: 'pipe',
+    linkUrl: '?path=/story/hasura-design-system--hasura-design-system&globals=backgrounds.value:!hex(3b5998)',
+    iconVariant: 'videorecorder',
+    iconStrokeColor: 'blue-500',
+    iconArrowVariant: 'home03',
+    iconArrowStrokeColor: 'blue-400',
+    title: 'Webinar',
+    description: 'Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for ',
+    readMoreBtn: {
+        cta_text: 'Read More'
+    }
+};

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

@@ -0,0 +1,143 @@
+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 tb-l:px-0 tb-l:py-0 tb-l:flex-row tb-l:gap-10 db:gap-32 tb-l:max-w-7xl min-h-[742px] tb-l:min-h-[518px]">
+
+                <div className="flex flex-col tb-l:pl-20 tb-l:pt-14 tb-l:pb-14">
+                    {
+                        props.tagline && (
+                            <Typography textStyle='h6' className='text-blue-400 tb-l:block uppercase mb-2 hidden '>{props.tagline}</Typography>
+                        )
+                    }
+                    {props.brandImageURL &&
+                        props.brandImageAlt && (
+                            <div className="tb-l:flex hidden -ml-2 pb-1 justify-start">
+                                <img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[64px]" />
+                            </div>
+                        )
+
+                    }
+                    {props.title &&
+                        (
+                            <div className="flex flex-col gap-6 tb-l:max-w-[547px] ">
+                                <Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden min-h-[144px] overflow-clip'>{props.title}</Typography>
+                                {props.heroList &&
+                                    (
+                                        <div>
+                                            <div className="flex flex-col pt-6 tb-l:pt-0 gap-4">
+                                                {props.heroList.map((value, index) => (
+                                                    <div key={index} className='flex gap-5'>
+                                                        <Icon
+                                                            height='tb:h-8 tb:w-8 h-6 w-6'
+                                                            variant={value.iconVariant}
+                                                            strokeClass={value.strokeClass ?? 'stroke-neutral-800'}
+                                                        />
+                                                        <Typography
+                                                            textStyle='sub2' className='text-neutral-700' >
+                                                            {value.title}
+                                                        </Typography>
+                                                    </div>
+                                                ))
+                                                }
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                            </div>
+                        )}
+                    {props.CTA &&
+                        <div className="mt-10 tb:flex">
+                            <a href={props.CTA['url']}>
+                                <HDSButton
+                                    label={props.CTA['text']}
+                                    type={'secondary'}
+                                    size='md'
+                                    rightAnimatedArrowColor="#3970FD"
+                                />
+                            </a>
+                        </div>}
+                </div>
+                {(props.heroImageURL &&
+                    props.heroImageAlt) ?
+                    (
+                        <>
+                            <div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-14 tb:max-w-[600px]">
+                                <img
+                                    src={props.heroImageURL}
+                                    alt={props.heroImageAlt}
+                                    className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[650px] tb-l:max-w-[600px] tb:max-w-[420px] "
+                                />
+                            </div>
+                        </>
+                    )
+                    :
+                    (
+                        <>
+                            {props.video_url && (
+                                <div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] tb-l:min-w-[550px]">
+                                    <video
+                                        autoPlay
+                                        loop
+                                        playsInline
+                                        muted
+                                        src={props.video_url}
+                                        className=" rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl"
+                                    />
+                                </div>)}
+                        </>
+                    )}
+
+                <div className="tb-l:hidden pb-6">
+                    {props.brandImageURL &&
+                        props.brandImageAlt && (
+                            <div className="pb-1 -ml-1 ">
+                                <img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[40px]" />
+                            </div>
+                        )
+                    }
+                    <div className='text-neutral-1000 text-hds-m-h4 tb:text-hds-t-h3 db:text-hds-d-h3'>{props.title}</div>
+                </div>
+                {
+                    props.tagline && (
+                        <Typography textStyle='h6' className='text-blue-400 tb-l:hidden uppercase'>{props.tagline}</Typography>
+                    )
+                }
+            </div>
+
+        </>
+    )
+}
+
+StoryCardXL.defaultProps = {
+    heroImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690802853/website%20v3/optum_hiqty8.png',
+    heroImageAlt: 'optum',
+    heroIconVariant: 'calendar',
+    heroIconStrokeClass: 'stroke-neutral-1000',
+    heroListTitle: '100 days from concept to production',
+    brandImageURL: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1690982762/pulley_pcj45e_8fd10af212.png',
+    brandImageAlt: 'optum',
+    title: 'Healthcare giant Optum goes from concept to production in 100 days with Hasura',
+    description: 'description1',
+    CTA: {
+        text: 'Button Label',
+    },
+    heroList: [
+        {
+            iconVariant: 'calendar',
+            title: '100 days from concept to production'
+        },
+        {
+            iconVariant: 'database03',
+            title: 'Vastly improved access to relevant data'
+        },
+        {
+            iconVariant: 'settings01',
+            title: 'Simpler data and API management'}
+    ]
+    // video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
+} 

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

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

package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js

@@ -0,0 +1,159 @@
+import React, { useState, useEffect} from "react";
+import PropTypes from 'prop-types';
+import { HDSColor } from '../../../foundation/ColorPalette';
+import { Icon } from "../../common-components/Icon"
+import { Badges } from '../../BadgesCaption';
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from "../../../foundation/Typography";
+import ReactMarkdown from "react-markdown";
+
+
+import { HDSPaperForm } from "../../../helpers/Paperform"
+
+
+export default function TalkDetailCard(props) {
+  const isBrowser = typeof window !== "undefined";
+  const badgeLeftIconColor = HDSColor(props.badgeLeftIconColor);
+  const [isConsentForm, setIsConsentForm] = useState(false);
+  const onSubmitCB = () => {
+    if (isBrowser) {
+      window.localStorage.setItem("hasCon2023TalkVideoConsent", "true");
+    }
+  };
+  useEffect(() => {
+    if (isBrowser) {
+      if (
+        "localStorage" in window &&
+        window.localStorage &&
+        "getItem" in window.localStorage
+      ) {
+        const hasCon2023TalkVideoConsent1 = window.localStorage.getItem(
+          "hasCon2023TalkVideoConsent"
+        );
+        if (hasCon2023TalkVideoConsent1) {
+          setIsConsentForm(true);
+        }
+      }
+    }
+  }, []);
+  return (
+    <div className="grid grid-cols-1 tb-m:grid-cols-2 gap-6 db:gap-28 tb-m:gap-16">
+      <div className="tb-m:sticky tb-m:self-start tb-m:top-36">
+        <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
+          {props.badges &&
+            props.badges.map((value, index) => (
+              <div key={index} className='flex  whitespace-nowrap'>
+                <Badges
+                  size={value.size}
+                  color={value.color}
+                  leftIconVariant={value.leftIconVariant}
+                  leftIconColor={value.leftIconColor}
+                  leftIconColorClass={HDSColor(value.leftIconColorClass)}
+                  children={value.label}
+
+                />
+
+              </div>
+            ))
+          }
+        </div>
+        {
+          props.tag_line && (<Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>)
+        }
+        {
+          props.title && (<Typography textStyle='h3' as='h3' className='text-blue-900 pb-6 db:pb-0'>{props.title}</Typography>)
+        }
+        {
+          props.social_share && (
+            <div className='flex pb-6 tb:pt-0 tb:pb-0 items-center '>
+              {
+                props.social_share.map((socialShare, i) => (
+                  <a key={i} href={socialShare.share_url} className='mx-2 first:ml-0 last:mr-0'>
+                    <img src={socialShare.img_url} alt={socialShare.img_alt} />
+                  </a>
+                ))
+              }
+            </div>
+          )
+        }
+        {
+          props.speaker_card && (
+            <div className="border-t border-neutral-200 border-b pb-6 tb:border-0 tb:pb-0">
+              <Typography textStyle='h6' as='h6' className='uppercase   text-neutral-500 pb-6 pt-6 tb:pt-14'>speakers</Typography>
+
+                {
+                  props.speaker_card.map((speaker, i) => (
+                    <div key={i} className='pb-4 last:pb-0'>
+                      <ProfileAvatar
+                        name={speaker.name}
+                        size='md'
+                        designation={speaker.designation}
+                        imageUrl={speaker.imageUrl}
+                        avatarVariant="circle"
+                        avatarBgColor={props.avatarBgColor}
+                      />
+                    </div>
+                  ))
+                }
+
+            </div>
+          )
+        }
+      </div>
+      <div>
+        {
+          props.videoUrl && (
+            <div className="pb-6">
+              {
+                isConsentForm ? (
+                  <>
+                    <div className="relative pb-[56.2%]">
+                      <iframe
+                        loading="lazy"
+                        title={props.title}
+                        src={props.videoUrl}
+                        frameBorder="0"
+                        allowFullScreen
+                        className="absolute w-full h-full"
+                      />
+                    </div>
+                  </>
+                ) : (
+                  <div className="p-5 md:pt-10 md:px-6 lg:px-9 rounded-3xl border border-neutral-200">
+                    <Typography textStyle="h6" as="h6" className="text-neutral-800 uppercase flex items-center">
+                      <Icon height="w-6 h-6 mr-3 stroke-neutral-800 stroke-[1.5px]" variant="ticket01" strokeColor="#1F2A37" />
+                      {props.formTitle}
+                    </Typography>
+                      <HDSPaperForm
+                      onSubmitCB={onSubmitCB}
+                      formId={props.paperformId}
+                      styleClass="paper-form-wrapper"
+                    />
+                  </div>
+                )
+              }
+            </div>
+          )
+        }
+        <Typography textStyle="h4" as="h4" className="text-neutral-800 pb-4">About the Talk</Typography>
+        {
+          props.description && (
+            <Typography className='text-neutral-800 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0' textStyle='body1'>
+              <ReactMarkdown>{props.description}</ReactMarkdown>
+            </Typography>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+TalkDetailCard.defaultProps = {
+  // badgeColor: 'green',
+  // badgeLeftIconColor: 'stroke-neutral-0',
+  // talk_type: 'Talk',
+  // tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
+  // title: 'Deploying Hasura apps the fast way with the new Vercel integration',
+  // social_share: '',
+  // speaker_card: '',
+};

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

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