hds-web 1.33.2 → 1.33.4

package/src/HDS/components/Cards/InviteCard/invitecard.js

@@ -0,0 +1,157 @@
+import React from "react";
+import { Typography } from "../../../foundation/Typography";
+import { InviteIF } from "../../InputFields";
+import { Icon } from "../../common-components";
+import { HDSButtonVariants } from "../../Buttons";
+export default function InviteCard(props) {
+
+    const inviteFunction = () => {
+        const numberOfInvites = props.invites || 0;
+        const inviteComponents = Array.from({ length: numberOfInvites }, (_, index) => (
+            <div className="" key={index} >
+                <InviteIF
+                    label={props.IFbuttonLabel}
+                    placeholder={props.IFbuttonPlaceholder}
+                />
+            </div>
+        ));
+        return <div className="flex flex-col gap-4">{inviteComponents}</div>;
+    };
+
+    return (
+        <div className="">
+            <div className={" flex " + ((props.cardType === 'primary') ? ' flex flex-col-reverse ' : 'pb-6 flex flex-col' )}>
+                {props.imgURL &&
+                    <div className={(props.cardType === 'primary') ? 'py-11' : 'pb-4'}>
+                        <img src={props.imgURL}
+                            loading="lazy"
+                            alt={props.title}
+                            className={" object-contain " + (props.cardType === 'primary') ? 'max-h-[200px]' : 'max-h-[144px]' }
+                        />
+                    </div>}
+                <div>
+                    {props.titleTag &&
+                        <div
+                            className=' text-hds-m-h6 text-neutral-500 uppercase'>
+                            {props.titleTag}
+                        </div>
+                    }
+                    {props.title &&
+                        <Typography
+                            textStyle='h4'
+                            className='text-neutral-1000'>
+                            {props.title}
+                        </Typography>
+                    }
+                    {props.schedule &&
+                        <div className="flex gap-4 pt-4 flex-wrap">
+                            {props.schedule.date &&
+                                <div
+                                    className="border border-neutral-200 rounded-2xl p-4 min-w-[152px] "
+                                >
+                                    {props.schedule.day &&
+                                        <Typography
+                                            textStyle='h6'
+                                            className='text-neutral-600'>
+                                            {props.schedule.day}
+                                        </Typography>}
+                                    {props.schedule.date
+                                        && <Typography
+                                            textStyle='h4'
+                                            className='text-neutral-1000'>
+                                            {props.schedule.date}
+                                        </Typography>}
+                                </div>}
+                            {props.schedule.time &&
+                                <div
+                                    className="border border-neutral-200 rounded-2xl p-4 min-w-[152px]"
+                                >
+                                    {props.schedule.timezone &&
+                                        <Typography
+                                            textStyle='h6'
+                                            className='text-neutral-600'>
+                                            {props.schedule.timezone}
+                                        </Typography>}
+                                    {props.schedule.time &&
+                                        <Typography
+                                            textStyle='h4'
+                                            className='text-neutral-1000'>
+                                            {props.schedule.time}
+                                        </Typography>}
+                                </div>}
+                        </div>
+                    }
+                </div>
+            </div>
+            <div className="pb-6 border-neutral-200">
+                {props.inviteTitle &&
+                    <Typography
+                        textStyle='h5'
+                        className='text-neutral-800 border-t border-neutral-200 pt-6'>
+                        {props.inviteTitle}
+                    </Typography>
+                }
+                {props.inviteTitle2 &&
+                    <Typography
+                        textStyle='h4'
+                        className='text-neutral-1000'>
+                        {props.inviteTitle2}
+                    </Typography>
+                }
+                {props.inviteSubtitle &&
+                    <Typography
+                        textStyle='body1'
+                        className='text-neutral-800'>
+                        {props.inviteSubtitle}
+                    </Typography>}
+
+            </div>
+            <div className="pb-6">
+                {inviteFunction()}
+            </div>
+            {(props.social || props.calendarLink) &&
+                <div className="border-t border-neutral-200 pt-6 flex gap-6 flex-wrap justify-center">
+                    {props.social &&
+                        <div className="flex flex-wrap items-center">
+                            {props.social &&
+                                props.social.twitter &&
+                                <a href={props.social.twitter}
+                                    className='w-[45px] flex justify-center'>
+                                    <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}
+                                    className='w-[45px] flex justify-center'>
+                                    <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}
+                                    className='w-[45px] flex justify-center'>
+                                    <Icon
+                                        variant='facebookBlue'
+                                        className='brightness-0 hover:brightness-100 cursor-pointer transition-all duration-300' />
+                                </a>
+                            }
+                        </div>}
+                    <div>
+                        <HDSButtonVariants
+                            variant='calendarButton'
+                            label='Add to Calendar'
+                            labelColor='text-blue-500'
+                            iconStrokeClass='stroke-blue-500'
+                            iconVariant='calendarplus02'></HDSButtonVariants>
+                    </div>
+                </div>}
+        </div>
+    )
+}

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

@@ -0,0 +1,2 @@
+export {default as LinkCard} from './link';
+export {default as ResourcesCard} from './resources';

package/src/HDS/components/Cards/Link/link.js

@@ -0,0 +1,92 @@
+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'
+
+
+export default function LinkCard(props) {
+    return (
+        <>
+            <a
+                href={props.linkUrl}
+                className={`rounded-2xl p-6 h-full flex flex-col justify-between`}
+            >
+                {props.brandImageUrl ?
+                    (
+                        <div className="flex flex-col">
+                            {props.iconArrowVariant &&
+                                <div className="flex justify-end items-end">
+                                    <Icon
+                                        height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
+                                        variant={props.iconArrowVariant}
+                                        strokeColor={props.iconArrowStrokeColor}
+                                        strokeClass={HDSColor(props.iconArrowStrokeClass)}
+                                    />
+                                </div>
+                            }
+                            <img src={props.brandImageUrl} alt={props.brandImageAlt} />
+
+                        </div>
+                    )
+                    :
+                    (
+                        <>
+                            <div className='flex items-center'>
+                                <div className='flex items-center flex-1 pb-2'>
+                                    {props.iconVariant &&
+                                        (<Icon
+                                            height={'w-6 h-6 mr-2 stroke-[1.5px] '}
+                                            variant={props.iconVariant}
+                                            strokeColor={props.iconStrokeColor}
+                                            strokeClass={HDSColor(props.iconStrokeClass)}
+                                        />)}
+                                    <Typography
+                                        as="h5"
+                                        textStyle="body1c-bold"
+                                        className={HDSColor(props.titleTextColor)}>
+                                        {props.title}
+                                    </Typography>
+                                </div>
+                                {props.iconArrowVariant &&
+                                    (<Icon
+                                        height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
+                                        variant={props.iconArrowVariant}
+                                        strokeColor={props.iconArrowStrokeColor}
+                                        strokeClass={HDSColor(props.iconArrowStrokeClass)}
+                                    />)
+                                }
+                            </div>
+                            {props.description &&
+                                (
+                                    <div>
+
+                                        <Typography
+                                            textStyle="body3"
+                                            className={`${HDSColor(props.descTextColor)} mt-2`}>
+                                            {props.description}
+                                        </Typography>
+                                    </div>
+
+                                )}
+                        </>
+                    )
+                }
+            </a>
+        </>
+    )
+}
+
+LinkCard.defaultProps = {
+    descTextColor: '',
+    titleTextColor: '',
+    brandImageUrl: '',
+    brandImageAlt: '',
+    linkUrl: '#',
+    iconVariant: 'videorecorder',
+    iconStrokeColor: 'blue-500',
+    iconArrowVariant: 'arrownarrowupright',
+    iconArrowStrokeColor: 'blue-400',
+    title: 'Webinar',
+    description: 'Model Level Authorization System for GraphQL with Hasura',
+};

package/src/HDS/components/Cards/Link/resources.js

@@ -0,0 +1,52 @@
+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 ResourcesCard(props) {
+    const iconBG = HDSColor(props.iconBg);
+    return (
+        <>
+            <div className={`p-8 ${props.cardBg} min-w-[18rem] rounded-3xl`}>
+
+                {props.title && (
+                    <Typography
+                        textStyle='h6'
+                        className={`uppercase ${props.title_text_color}`}>
+                        {props.title}
+                    </Typography>
+                )}
+                <div className="mt-6">
+                    {props.resourcesArr.map((value, index) => (
+                        <a key={index} href={value.cta_linkUrl} className="flex gap-2 mt-4">
+                            <Icon
+                                height={'w-6 h-6 mr-2 stroke-[1.5px] stroke-blue-600'}
+                                variant={value.cta_icon}
+                                strokeClass={value.cta_stroke}
+                            />
+                            <Typography
+                                textStyle='body2c'
+                                className={value.cta_text_color}>
+                                {value.cta_text}
+                            </Typography>
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </>
+    )
+}
+ResourcesCard.defaultProps = {
+    cardBg: 'bg-neutral-0',
+    title: 'Resources Card', 
+    title_text_color: 'text-blue-600',
+    resourcesArr: [
+        { cta_text: 'This is one really long link that may spill onto the next line', cta_icon: 'linkexternal01', cta_text_color: 'text-neutral-700 hover:text-blue-600 ', cta_stroke: 'stroke-blue-600', cta_linkUrl: '#' },
+        { cta_text: 'This is a regular link that fits in one line', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+        { cta_text: 'text3', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+        { cta_text: 'text4', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+
+    ]
+}

package/src/HDS/components/Cards/Menu/flyout.js

@@ -0,0 +1,72 @@
+import React from "react";;
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../../common-components/Icon';
+import { Typography } from '../../../foundation/Typography';
+export default function flyout(props) {
+  const {
+    label,
+    childArray,
+    buttonArray,
+  } = props
+  return (
+    <Popover className="relative">
+      <Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+        <span>{label}</span>
+        {/* <ChevronDownIcon className="h-5 w-5" aria-hidden="true" /> */}
+      </Popover.Button>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4">
+          <div className="max-w-md flex-auto overflow-hidden rounded-3xl bg-neutral-0 text-sm leading-6 shadow-sm w-fit ">
+            <div className="p-6">
+              <Typography textStyle='h-6' className='text-neutral-500 mb-4'>{label}</Typography>
+              {childArray.map((item) => (
+                <div key={item.name} className="group relative flex gap-x-3.5 rounded-lg p-[0px_8px_0px_0px;]  hover:bg-gray-50 items-center">
+                  <div className="mt-1 flex h-11 w-11 flex-none justify-center rounded-lg bg-gray-50 items-center group-hover:bg-white">
+                    {/* <item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600" aria-hidden="true" /> */}
+                    {item.icon && (
+                      <Icon height={'h-6'} variant={item.icon} strokeColor={'#6C737F'} />
+                    )}
+                  </div>
+                  <div>
+                    <a href={item.href} className="">
+                      <Typography textStyle='h-6' className='text-neutral-500'>{item.name}</Typography>
+                      <span className="absolute inset-0" />
+                    </a>
+                    {item.description && item.description.length > 0 && (
+                      <p className="mt-1 text-gray-600">{item.description}</p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
+              {buttonArray.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
+                >
+
+                  {item.icon && (
+                    <Icon height={'h-6'} variant={item.icon} strokeColor={'#6C737F'} />
+                  )}
+                  <Typography textStyle='h-6' className='text-neutral-500'>{item.name}</Typography>
+                </a>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}

package/src/HDS/components/Cards/Menu/flyoutA.js

@@ -0,0 +1,133 @@
+import React from "react";
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../../common-components/Icon';
+import { Typography } from '../../../foundation/Typography';
+export default function FlyoutA(props) {
+  const {
+    split
+  } = props
+  const cardLayout = (label, childArray) => (
+    <div className=" group h-full  ">
+      <div className={`w-full  h-full ` + (split ? ' ' : ' rounded-2xl')}>
+        <div className={`w-full tb-l:max-w-[250px] p-6 `}>
+          {label ? (
+          <Typography
+            textStyle='h6'
+            className=' uppercase group-hover/split:text-neutral-1000 group-hover:text-neutral-1000 group-hover-transition text-neutral-500 mb-4'>
+            {label}
+          </Typography>
+          ) : (
+            <div className="mb-9">
+            </div>
+          )}
+          <div className={` tb:tb:grid tb:tb:grid-cols-1 tb:gap-x-4 tb:min-w-[186px] `}>
+            {childArray && childArray.map((item) => (
+              <div
+                key={item.name}
+                className="relative pb-2 flex rounded-lg items-center">
+                <a href={item.href} className='w-full'>
+                  <div className="flex group/icon pl-2 py-2 pr-3 hover:pl-[9px] hover:bg-neutral-100  rounded-lg flex-row w-full justify-between tb:min-w-[150px] items-center">
+                    <div className="flex gap-2 flex-row items-center">
+                      <div
+                        className="flex rounded-lg items-center group-hover:bg-white">
+                        {item.icon && (
+                          <Icon
+                            height={'h-5 w-5 stroke-2 ' + ((item.icon === 'discord' || item.icon === 'octoface' || item.icon === 'meetup' ) ? '' : 'group-hover/icon:stroke-blue-500 ') }
+                            variant={item.icon}
+                            strokeClass={item.strokeClass}
+                          />
+                        )}
+                      </div>
+                      <Typography
+                        textStyle='body3c-medium'
+                        className='text-neutral-1000  group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
+                        {item.name}
+                      </Typography>
+                    </div>
+                    <div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out ">
+                      <Icon
+                        height={'h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out   '}
+                        variant={'chevronright'}
+                        strokeClass={'stroke-blue-500'}
+                      />
+                    </div>
+
+
+                    {/* {item.description &&
+                    item.description.length > 0 && (
+                      <Typography
+                        textStyle='body3c-medium'
+                        className='text-neutral-700'>
+                        {item.description}
+                      </Typography>
+                    )} */}
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div
+          className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50"
+        >
+          {/* {buttonArray && buttonArray.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              className="flex justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
+            >
+
+              {item.icon && (
+                <Icon
+                  height={'h-6'}
+                  variant={item.icon}
+                  strokeColor={'#6C737F'} />
+              )}
+              <Typography
+                textStyle='h-6'
+                className='text-neutral-500'>
+                {item.name}
+              </Typography>
+            </a>
+          ))} */}
+        </div>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+
+      {split ?
+
+        (
+          <>
+
+            <div className="hds-hidden tb-l:flex h-full">
+              <div className="border-r  border-neutral-150 shadow rounded-l-2xl">
+
+                {cardLayout(props.label, props.childArray.slice(0, Math.ceil(props.childArray.length / 2)))}
+              </div>
+              <div className="shadow group/split rounded-r-2xl">
+
+                {cardLayout(null, props.childArray.slice(Math.ceil(props.childArray.length / 2)))}
+              </div>
+            </div>
+            <div className="hds-hidden-tbl  shadow h-full rounded-2xl">
+              {cardLayout(props.label, props.childArray)}
+            </div>
+          </>
+        )
+
+        : (
+          <div className=" shadow h-full rounded-2xl">
+            {cardLayout(props.label, props.childArray)}
+          </div>
+
+        )}
+    </>
+
+  )
+
+}

package/src/HDS/components/Cards/Menu/flyoutB.js

@@ -0,0 +1,129 @@
+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 { Icon } from "../../common-components";
+
+export default function FlyoutB(props) {
+    const {
+        iconVariant = 'home03',
+        strokeColor = '#C6D6FF',
+        strokeClass = 'stroke-neutral-800',
+        primaryBtnLabel = 'label1',
+        primaryBtnCTA,
+        mainDescription = 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
+        secondaryBtn = [
+            { cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Button 1' },
+
+
+        ],
+        tertiaryBtn
+    } = props;
+
+    return (
+
+        <div className="flex flex-col justify-between w-full h-full shadow rounded-2xl">
+            <a href={primaryBtnCTA} className="group/card cursor-pointer w-full h-full relative transition-all duration-300 ease-out ">
+                <div className="group-hover/card:bg-neutral-100   ml-2 z-[1] mt-2 w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-xl absolute ">
+                </div>
+                <div className="px-6 pt-6 pb-4 w-full h-full ">
+
+
+                    <div className=" flex items-center relative justify-center p-2.5 h-14 w-14 z-[2] group-hover/card:bg-blue-200 bg-neutral-150 rounded-2xl">
+                        <Icon height='h-6 w-6 stroke-2 group-hover/card:stroke-blue-500' variant={iconVariant} strokeColor={strokeColor} strokeClass={strokeClass} />
+                    </div>
+                    <div className="flex relative group/card  cursor-pointer pt-4 items-center z-[2]">
+                        <Typography
+                            textStyle='body3c-medium'
+                            className='text-neutral-1000  group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
+                            {props.primaryBtnLabel}
+                        </Typography>
+
+                        <div className="flex group-hover/card:translate-x-1 transform transition-all duration-200 ease-in-out ">
+                            <Icon
+                                height={'h-4 w-4 stroke-2 invisible group-hover/card:visible transition-all ease-in-out   '}
+                                variant={'chevronright'}
+                                strokeClass={'stroke-blue-500'}
+                            />
+                        </div>
+                    </div>
+                    <Typography className='mt-2 text-neutral-600 relative z-[2]' textStyle='body3'>{mainDescription}</Typography>
+                </div>
+            </a>
+            <div className="flex flex-col pb-3 gap-2">
+                {secondaryBtn.map((btn, index) => (
+                    <a key={index} href={btn.cta_link} className="group/btn px-2 justify-around  cursor-pointer ">
+
+                        <div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
+                            <div 
+                            className="flex w-full justify-between items-center z-[2] py-2.5"
+                            >
+                                <div
+                                    className="flex rounded-lg gap-2 items-center ">
+                                    {btn.cta_leftVariantIcon && (
+                                        <Icon
+                                            height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2   '}
+                                            variant={btn.cta_leftVariantIcon}
+                                            strokeClass='stroke-neutral-500'
+                                        />
+                                    )}
+
+                                    <Typography
+                                        textStyle='body3c-medium'
+                                        className='text-neutral-1000  group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
+                                        {btn.cta_text}
+                                    </Typography>
+                                </div>
+                                <div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
+                                    <Icon
+                                        height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out   '}
+                                        variant={'chevronright'}
+                                        strokeClass={'stroke-blue-500'}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </a>))}
+
+                {tertiaryBtn && tertiaryBtn.map((t, index) => (
+                    <a key={index} href={t.cta_link} className="group/btn justify-around  cursor-pointer px-2 ">
+
+                        <div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
+                            <div className="flex w-full justify-between items-center z-[2] py-2.5">
+                                <div
+                                    className="flex rounded-lg gap-2 items-center ">
+                                    {t.cta_leftVariantIcon && (
+                                        <Icon
+                                            height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2   '}
+                                            variant={t.cta_leftVariantIcon}
+                                            strokeClass='stroke-neutral-500'
+                                        />
+                                    )}
+
+                                    <Typography
+                                        textStyle='body3c-medium'
+                                        className='text-neutral-1000  group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
+                                        {t.cta_text}
+                                    </Typography>
+                                </div>
+                                <div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
+                                    <Icon
+                                        height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out   '}
+                                        variant={'chevronright'}
+                                        strokeClass={'stroke-blue-500'}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </a>))}
+            </div>
+        </div>
+
+    );
+}