hds-web 1.33.1 → 1.33.2

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

@@ -1,92 +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'
-
-
-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

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

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

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

@@ -1,129 +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 { 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>
-
-    );
-}

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

@@ -1,35 +0,0 @@
-import React from "react";
-import { Typography } from '../../../foundation/Typography'
-import { HDSColor } from "../../../foundation/ColorPalette";
-import PropTypes from 'prop-types';
-
-export default function FlyoutC(props) {
-    const {
-        title,
-        title_colorClass,
-        img_url,
-        cta_link
-    } = props;
-    return (
-        <a href={cta_link ?? ''}>
-        <div className="p-6 hover:shadow-lg cursor-pointer transition-all duration-300 ease-in-out group/flyoutc">
-            <div className=" flex flex-row items-center gap-6 tb:min-w-[396px]">
-                <div className="">
-                    {
-                        img_url && (
-                                <img src={props.img_url} className='rounded-xl max-w-[128px] group-hover/flyoutc:shadow-lg transition-all duration-300 ease-in-out' alt={props.title} />
-                        )
-                    }
-                </div >
-                <Typography textStyle='body3c-medium' className={HDSColor(title_colorClass) + ' '} >{title}</Typography>
-
-            </div>
-        </div>
-        </a>
-
-    );
-}
-
-FlyoutC.defaultProps = {
-    img_url: 'text-neutral-900'
-}

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

@@ -1,43 +0,0 @@
-import React from "react";
-import { Typography } from "../../../foundation/Typography";
-import { Icon } from "../../common-components";
-export default function FlyoutD(props) {
-    return (
-        <a href={props.link} className="flex flex-col gap-4 tb-l:gap-0 tb-l:flex-col w-full h-full justify-between group/icon">
-            {props.IconVariant && 
-            <div className="w-full h-full tb-l:pb-6">
-
-            <div
-                className=" p-2.5 rounded-2xl w-14 h-14 tb-l:w-full tb-xl:w-[175px] tb-l:h-[124px] bg-neutral-150 items-center justify-center transition-all duration-300 flex group-hover/icon:bg-blue-200"
-                >
-                <Icon
-                    height=' tb-l:h-12 tb-l:w-12 h-6 w-6'
-                    variant={props.IconVariant}
-                    className=' stroke-neutral-800 group-hover/icon:stroke-blue-600 cursor-pointer transition-all duration-300'
-                    />
-                    </div>
-            </div>
-            }
-            <div className="flex flex-col gap-1 w-full h-full">
-                {props.btnLabel && 
-                <div className="flex items-center">
-                    <Typography textStyle='body3c-medium' className='text-neutral-900 whitespace-nowrap group-hover/icon:text-blue-600 transition-all duration-300 '>
-                        {props.btnLabel}
-                    </Typography>
-
-                        <div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out invisible group-hover/icon:visible ">
-                        <Icon
-                            height={'h-4 w-4 stroke-2 transition-all ease-in-out   '}
-                            variant={'chevronright'}
-                            strokeClass={'stroke-blue-500'}
-                        />
-                    </div>
-                </div>
-                }
-                {props.description && <Typography textStyle='body3c' className='text-neutral-600 line-clamp-5'>
-                    {props.description}
-                </Typography>}
-            </div>
-        </a>
-    )
-}