hds-web 1.33.2 → 1.33.4

package/src/HDS/components/Cards/BrandCard/brandCard.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette';
+import { Typography } from '../../../foundation/Typography';
+import PropTypes from 'prop-types';
+
+
+export default function BrandCard(props) {
+    return (
+        <>
+            {false ?
+                (<div>
+                    <div className="pt-10 db:pt-20">
+                        <Typography textStyle="h6" as="h6" className="pb-6 db:pb-10 text-center text-neutral-400 uppercase">40+ of the fortune100 companies use hasura</Typography>
+                        <div className="  grid grid-cols-2 tb:grid-cols-4 db:grid-cols-4 db:gap-x-8 db:gap-y-2"
+                        >
+                            {
+                                props.imgArray.map((brand, index) => (
+                                    <div key={index}>
+                                        <img src={brand.imgSrc} alt={brand.imgAlt} />
+                                    </div>
+                                ))
+                            }
+                        </div>
+                    </div>
+                </div>
+                )
+                :
+                (
+                    <>
+                        <div className="pt-10 db:pt-20">
+                            <Typography textStyle="h6" as="h6" className="pb-6 db:pb-10 text-center text-neutral-400 uppercase">40+ of the fortune100 companies use hasura</Typography>
+                            <div className="gridAutoClass"
+                            >
+                                {props.imgArray.map((brand, index) => (
+                                    <div key={index} className='border'>
+                                        <img src={brand.imgSrc} alt={brand.imgAlt} />
+                                    </div>
+                                ))
+                                    
+                                }
+                            </div>
+                        </div>
+                    </>
+                )
+
+
+            }
+        </>
+    )
+}
+
+BrandCard.defaultProps = {
+    rotate: 'false',
+    imgArray: [
+        { imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
+        { imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/verizon_sj4rgc.png', imgAlt: '' },
+        { imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
+        { imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
+        
+    ]
+}

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

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

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { Typography } from '../../../foundation/Typography'
+
+const Twitter = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.67602 24.7482C16.8006 24.7482 21.2437 18.0172 21.2437 12.1806C21.2437 11.9893 21.2398 11.7991 21.2309 11.6096C22.0934 10.9861 22.8431 10.208 23.4345 9.32253C22.6431 9.67415 21.7914 9.91094 20.8979 10.0177C21.8098 9.47092 22.5101 8.60557 22.8404 7.5742C21.9868 8.08033 21.0417 8.44812 20.0358 8.64646C19.2294 7.78796 18.0815 7.25098 16.8114 7.25098C14.3718 7.25098 12.3935 9.22924 12.3935 11.6676C12.3935 12.0143 12.4325 12.3513 12.5079 12.6747C8.83714 12.4903 5.58191 10.7325 3.4036 8.06001C3.02381 8.71257 2.80515 9.47116 2.80515 10.2799C2.80515 11.8123 3.58504 13.1652 4.77092 13.9568C4.04637 13.9345 3.36564 13.7352 2.77038 13.4042C2.7694 13.4225 2.7694 13.4411 2.7694 13.4605C2.7694 15.5999 4.29221 17.3859 6.31308 17.7907C5.94211 17.8918 5.55179 17.9462 5.14875 17.9462C4.86421 17.9462 4.58752 17.9178 4.31841 17.8666C4.88062 19.6213 6.51142 20.8985 8.44486 20.9345C6.93283 22.1194 5.02827 22.8253 2.95892 22.8253C2.60265 22.8253 2.25102 22.805 1.90527 22.7641C3.86002 24.0168 6.18109 24.7482 8.67602 24.7482Z" fill="#00acee" />
+  </svg>
+)
+
+export default function CommunityCard(props) {
+    
+  return (
+    <a href={props.linkUrl}>
+      <div className="p-5 tb:p-8 bg-neutral-0 shadow-sm rounded-3xl mx-5">
+        <Twitter />
+        <Typography textStyle="h5" as="h5" className="text-neutral-1000 py-4">{props.name}</Typography>
+        <Typography textStyle="body1" className="text-neutral-500">{props.tweets}</Typography>
+      </div>
+    </a>
+  )
+
+}

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

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

package/src/HDS/components/Cards/ConnectorCard/connectorCard.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { Typography } from "../../../foundation/Typography";
+import { Icon } from "../../common-components";
+export default function ConnectorCard(props) {
+    return (
+        <>
+            {
+                props.linkUrl &&
+                (
+                    <a 
+                    href={props.linkUrl} 
+                    className=" flex flex-col gap-10 justify-between h-full">
+                        <div className="flex justify-between">
+                            {/* {props.imgUrl &&
+                                <div className="w-10 h-10 rounded-full border border-neutral-300 ">
+                                    <img
+                                        alt={props.title ?? 'connectorImage'}
+                                        src={props.imgUrl}
+                                        className="rounded-full w-full " />
+
+                                </div>} */}
+                            {props.imgUrl && <div className="flex">
+                                <img alt={props.title ?? 'connectorImage'} src={props.imgUrl} className=" max-h-[25px] object-contain " />
+                            </div>}
+                            {props.checkIcon && <div className="ml-2">
+                                <Icon
+                                    height={'h-6 w-6 stroke-[1.5px]'}
+                                    variant={props.checkIcon}
+                                    strokeClass='stroke-blue-600'
+                                />
+                            </div>}
+                        </div>
+                        <div>
+                            {props.title &&
+                                <Typography
+                                    textStyle='body2-bold'
+                                    className='text-neutral-1000'
+                                >
+                                    {props.title}
+                                </Typography>}
+                            {props.description &&
+                                <Typography
+                                    textStyle='body3'
+                                    className='pt-2 text-neutral-600'
+                                >
+                                    {props.description}
+                                </Typography>}
+                            <div
+                                className="flex flex-row items-center gap-2 pt-3"
+                            >
+                                {props.iconVariant && <Icon
+                                    height={'h-5 w-5 stroke-[1.5px]'}
+                                    variant={props.iconVariant}
+                                    strokeClass='stroke-neutral-600'
+                                />}
+                                {props.iconTag &&
+                                    <Typography
+                                        textStyle='body2-bold'
+                                        className='text-neutral-1000'
+                                    >
+                                        {props.iconTag}
+                                    </Typography>}
+                            </div>
+                        </div>
+                    </a>
+                )
+            }
+        </>
+    )
+}

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

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

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

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

package/src/HDS/components/Cards/Dropdown/v3Dropdown.js

@@ -0,0 +1,114 @@
+import React from "react"
+import { HDSColor } from "../../../foundation/ColorPalette"
+import { FlyoutB, FlyoutA, FlyoutC, FlyoutD } from '../Menu';
+
+export default function DropdownA(props) {
+  return (
+    <div>
+
+      <div className='tb-l:flex mb-2 tb-l:mb-0 flex w-full tb-l:bg-neutral-150 flex-col tb-l:flex-row max-w-7xl tb-l:gap-2 rounded-2xl '>
+
+        {props.primaryCard &&
+          <div className="">
+            <div className=' bg-neutral-0 rounded-2xl h-full w-full min-w-[250px]'>
+              <FlyoutB
+                {...props.primaryCard}
+              />
+            </div>
+
+          </div>
+        }
+        <div className="tb-l:flex-row tb-l:flex mt-2 flex flex-col gap-2 tb-l:mt-0">
+          {props.secondaryCardArr && props.secondaryCardArr.map((item, index) => (
+
+            <div key={index} className={'rounded-2xl ' + (item.card_bg) ? 'bg-neutral-0 rounded-2xl' : (HDSColor(item.card_bg))}>
+              <FlyoutA
+                label={item.label}
+                childArray={item.childArray}
+                split={item.split}
+              />
+            </div>
+          ))}
+        </div>
+        {/* {props.tertiaryCard && <div className="mt-2 pl-2 tb:mt-0">
+
+
+
+          <div className="flex w-full flex-col divide-y-2 divide-neutral-150 bg-neutral-0 rounded-2xl  ">
+            {props.tertiaryCard.map((item, index) => (
+              <div key={index}>
+                <FlyoutC
+                  title={item.title}
+                  description={item.description}
+                  title_colorClass={item.title_colorClass}
+                  img_url={item.img_url}
+                  cta_link={item.cta_link}
+                />
+              </div>
+            ))}
+
+          </div>
+        </div>
+        } */}
+        {props.flyoutD &&
+        <>
+          <div className=' bg-neutral-0 shadow rounded-2xl w-full tb-l:w-[170px]  tb-xl:w-[223px] px-6 py-6 mt-2  tb-l:mt-0'>
+            <div>
+
+            <FlyoutD
+              {...props.flyoutD}
+              />
+              </div>
+          </div>
+        </>
+
+        }
+
+
+      </div>
+    </div>
+  )
+}
+
+DropdownA.defaultProps = {
+
+
+  secondaryCardArr: [{
+    childArray: [
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Analytics'
+      },
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Engagement'
+      },
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Security'
+      },
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Security'
+      },
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Security'
+      },
+    ],
+    label: "Label1"
+  },
+
+
+  ]
+}

package/src/HDS/components/Cards/EventCards/eventschedule.js

@@ -0,0 +1,120 @@
+import React from "react";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
+import { Badges } from "../../BadgesCaption";
+import { Icon } from "../../common-components";
+import ReactMarkdown from "react-markdown";
+
+
+export default function EventScheduleCard(props) {
+
+    const scheduleSection = () => (
+        <div className="flex tb:divide-x divide-y tb:divide-y-0 divide-neutral-200 pb-6 tb:flex-row flex-col">
+            {props.eventDate && <div className="flex flex-col tb:pr-6 pb-4 tb:pb-0 gap-1">
+                <div className="flex gap-2 items-center">
+                    <Icon height='h-[18px] w-[18px]' variant='calendar' strokeClass='stroke-neutral-600 stroke-2' />
+                    <Typography textStyle='h6' className='capitalize text-neutral-600' >WHEN</Typography>
+                </div>
+               <Typography textStyle='sub2' className='text-neutral-700'> 
+                    {props.eventDate}
+                </Typography>
+            </div>}
+            {props.eventTime && <div className="flex flex-col tb:px-6 py-4 tb:py-0 gap-1">
+                <div className="flex gap-2 items-center">
+                    <Icon height='h-[18px] w-[18px]' variant='clock' strokeClass='stroke-neutral-600 stroke-2' />
+                    <Typography textStyle='h6' className='capitalize text-neutral-600'  >TIME</Typography>
+                </div>
+               <Typography textStyle='sub2' className='text-neutral-700'> 
+                    {props.eventTime}
+                </Typography>
+            </div>}
+            {props.eventLocation && <div className="flex flex-col tb:px-6 py-4 tb:py-0 gap-1 ">
+                <div className="flex gap-2 items-center">
+                    <Icon height='h-[18px] w-[18px]' variant='markerpin03' strokeClass='stroke-neutral-600 stroke-2' />
+                    <Typography textStyle='h6' className='capitalize text-neutral-600'  >WHERE</Typography>
+                </div>
+               <Typography textStyle='sub2' className='text-neutral-700'> 
+                    {props.eventLocation}
+                </Typography>
+            </div>}
+            {props.social && <div className="px-6 flex flex-wrap gap-4 items-center">
+                {props.social && props.social.twitter && <a href={props.social.twitter}>
+                    <Icon variant='twitter' className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300' />
+                </a>}
+                {props.social && props.social.linkedin && <a href={props.social.linkedin}>
+                    <Icon variant='linkedin' className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300' />
+                </a>}
+                {props.social && props.social.facebook && <a href={props.social.facebook}>
+                    <Icon variant='facebookBlue' className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300' />
+                </a>}
+            </div>}
+        </div>
+    )
+    const speakerSection = (speakerName, speakerDesignation, speakerImgUrl) => (
+        <div className="">
+            <ProfileAvatar
+                name={speakerName}
+                size='md'
+                designation={speakerDesignation}
+                imageUrl={speakerImgUrl}
+                avatarVariant="circle"
+                avatarType="primary"
+            />
+        </div>
+    )
+    return (
+        <>
+            <div>
+                {props.eventBadge && <div className="pb-2">
+                    <Badges
+                        color={props.badgeColor ?? 'green'}
+                        children={props.eventBadge}
+                    />
+                </div>
+                }
+                {props.title &&
+                    <Typography
+                        textStyle='h3'
+                        as='h1'
+                        className={HDSColor(props.titleTextColor) + ' pb-6'}>
+                        {props.title}
+                    </Typography>}
+                {
+                    (props.eventDate || props.eventTime || props.eventLocation || props.social)
+                    &&
+                    scheduleSection(props)
+                }
+                {props.subtitle &&
+                    <Typography
+                        textStyle='h5'
+                        className='text-neutral-700 pb-2'>
+                        {props.subtitle}
+                    </Typography>}
+                {props.description &&
+                    <Typography
+                        textStyle='sub2'
+                        className='text-neutral-700 pb-6  [&>p]:pb-2 [&>p>img]:mt-4 [&>p>img]:max-w-[420px] [&>p>img]:w-full [&>p>img:nth-child(2)]:max-w-[140px] last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800 '>
+                      <ReactMarkdown>
+                            {props.description}
+                        </ReactMarkdown>
+                    </Typography>}
+                {props.speakers &&
+                    <div className="pt-6 border-t border-neutral-200 gap-8 flex flex-wrap">
+                        {props.speakers && props.speakers.map((value, index) => (
+                            <div key={index}>
+                                {speakerSection(
+                                    value.speakerName,
+                                    value.speakerDesignation,
+                                    value.speakerImgUrl
+                                )}
+                            </div>
+                        ))}
+
+                    </div>
+                }
+            </div>
+        </>
+    )
+}

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

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

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -0,0 +1,94 @@
+import React from "react";
+import {HDSColor} from '../../../foundation/ColorPalette'
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
+
+
+export default function FeedbackCard(props) {
+  let logoBg = '';
+  if (props.logoBg){
+    logoBg = HDSColor(props.logoBg);
+  }
+  return (
+    <a
+      href={props.caseStudyUrl}
+      className="group bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10 grid mb-6 db-s:mb-0 last:mb-0 flex-1 max-w-[920px] mx-auto flex-col transition-all duration-300 ease-in-out hover:shadow-lg hover:translate-y-0.5"
+    >
+      <div className=" self-start">
+        <ProfileAvatar
+          name={props.speakerName}
+          size="xl"
+          designation={props.speakerDesignation}
+          imageUrl={props.speakerImgUrl}
+          avatarVariant="circle"
+          avatarType="secondary"
+        />
+        <div className={props.dividerClass ? "py-8" : "py-6"}>
+          <Typography textStyle="sub2" className="text-neutral-600">
+            {props.description}
+          </Typography>
+        </div>
+      </div>
+      <div className=" self-end">
+        {props.dividerClass && (
+          <div className={`${HDSColor(props.dividerClass)} mb-2`}></div>
+        )}
+        <div
+          className={
+            "mb-s:flex items-start" + (props.dividerClass ? " pt-6" : "mt-0")
+          }
+        >
+          <div
+            className={
+              "border border-neutral-150 p-2 flex items-center justify-center rounded-2xl " +
+              logoBg +
+              (props.dividerClass
+                ? " w-[72px] h-[56px] min-w-[72px]"
+                : " w-[112px] h-[90px] min-w-[112px] ")
+            }
+          >
+            <img
+              className="max-h-[20px]"
+              src={props.brandImgUrl}
+              alt={props.brandImgAlt}
+            />
+          </div>
+          <div
+            className={
+              "pt-4 mb-s:pt-0 " +
+              (props.dividerClass ? "mb-s:pl-6" : "mb-s:pl-8")
+            }
+          >
+            <Typography
+              textStyle={props.dividerClass ? "body2" : "body1"}
+              className="text-neutral-600 pb-1"
+            >
+              {props.blurb}
+            </Typography>
+            <div className="flex">
+              <HDSButton
+                label={props.ctaText}
+                type="secondaryLink"
+                leftIconVariant="none"
+                rightIconVariant="none"
+                state="default"
+                size="md"
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor="#3970FD"
+                className="mt-0 justify-start"
+                btnTextColorClass="text-blue-500"
+                btnTextHoverClass="hover:text-blue-500"
+                animatedHoverStroke="group-hover:stroke-blue-500"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+}
+
+FeedbackCard.defaultProps = {
+  ctaText: "Read the case study",
+};

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

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

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { HDSButton } from "../../Buttons";
+import { Typography } from "../../../foundation/Typography";
+import { HDSColor } from "../../../foundation/ColorPalette";
+
+export default function ImageBox(props) {
+    const {
+        btnbutton,
+        title,
+        description,
+        subTitle,
+        className,
+        imgUrl,
+        imgAlt,
+        titleTextColor = 'text-neutral-1000',
+        imageClasses,
+        btn,
+    } = props;
+    return (
+        <div className={className}>
+            {imgUrl &&
+            <div>
+                <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.cta_text && (
+                <a href={btn.cta_link}>
+                    <HDSButton
+                        label={btn.cta_text}
+                        type={btn.cta_type}
+                        leftIconVariant='none'
+                        rightIconVariant='none'
+                        state='default'
+                        size='md'
+                        rightAnimatedArrow={true}
+                        rightAnimatedArrowColor='#3970FD'
+                    />
+                </a>
+            )
+
+            }
+        </div>
+    )
+}

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

@@ -0,0 +1 @@
+export {default as ImageBox} from './imagebox'

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

@@ -0,0 +1,54 @@
+// import React from "react";
+// import Slider from "react-slick";
+// import { HDSColor } from '../../../foundation/ColorPalette';
+
+
+
+// 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/InviteCard/index.js

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