hds-web 1.33.1 → 1.33.2

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

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

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

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

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

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

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

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

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

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

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