hds-web 1.1.5 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.1.5",
+  "version": "1.1.8",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/assets/icons/check-circle.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"  stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/components/BadgesCaption/badges.js

@@ -14,14 +14,14 @@ const iconClasses = {
 };
 
 const colorVariants = {
-  blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300 border border-blue-400 ',
-  grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300 border border-neutral-400  ',
-  purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300 border border-purple-400 ',
-  pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300 border border-pink-400 ',
-  amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300 border border-amber-400 ',
-  cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300 border border-cyan-400 ',
+  blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300  ',
+  grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300  ',
+  purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300 ',
+  pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300 ',
+  amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300  ',
+  cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300   ',
   cyan200: 'bg-cyan-200 text-cyan-600 border border-cyan-400 border border-cyan-400 ',
-  green: 'bg-green-200 text-green-800 group-hover:bg-green-300 border border-green-400 ',
+  green: 'bg-green-200 text-green-800 group-hover:bg-green-300  ',
 }
 
 export default function Badge({
@@ -55,7 +55,7 @@ export default function Badge({
             <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
-        <Typography textStyle='h6'>{children}</Typography>
+        <Typography textStyle='body3c-medium'>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>

package/src/HDS/components/Buttons/button.js

@@ -28,7 +28,7 @@ const Buttonclasses = {
   },
   'tonal': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center bg-blue-100 text-blue-600',
+      'base': 'db:w-fit tb:w-fit w-full  justify-center bg-blue-200 text-blue-600',
       'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
       'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
     },
@@ -36,7 +36,7 @@ const Buttonclasses = {
   },
   'secondary': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 bg-neutral-0 text-blue-500',
+      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-blue-500',
 
       'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-100 hover:duration-300',
       
@@ -55,7 +55,7 @@ const Buttonclasses = {
   'primaryLink': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-500',
-      'hover': 'hover:text-blue-600',
+      'hover': 'hover:text-neutral-0',
       'focus': 'focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-600',
     },
     'disabled': 'text-neutral-300',
@@ -103,6 +103,8 @@ const Buttonclasses = {
 }
 export default function Button(props) {
   const {
+    btnTextColorClass,
+    btnBgColorClass,
     rightIconVariant,
     rightIconColor,
     leftIconVariant,
@@ -137,6 +139,8 @@ export default function Button(props) {
   const buttonClasses = [
     'inline-flex items-center whitespace-pre',
     'rounded-full',
+    btnBgColorClass,
+    btnTextColorClass,
     Buttonclasses['buttonSizes'][`${sizeType}`][`${size}`],
     'group',
     defaultClasses,

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,63 @@
+import React from "react"
+import PropTypes from 'prop-types';
+import { HDSColor } from "../../../foundation/ColorPalette"
+import { FlyoutB, FlyoutA } from '../Menu'
+
+export default function DropdownA(props) {
+    return (
+        <div className='flex flex-col tb:flex-row gap-2'>
+            <div className='  bg-neutral-0 rounded-2xl tb:min-w-[28.063rem]'>
+                <FlyoutB
+                   {...props.primaryCard}
+                />
+            </div>
+
+            {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}
+                    />
+                </div>
+            ))}
+        </div>
+
+    )
+}
+
+DropdownA.defaultProps = {
+    primaryCard:{
+        iconVariant: 'home03',
+        mainDescription: 'description1',
+        primaryBtnLabel: 'label 1',
+        strokeClass: 'stroke-neutral-800'
+    },
+
+    secondaryCardArr:[{
+        childArray:[
+            {
+              description: '',
+              href: '#',
+              icon: 'cube01',
+              name: 'Analytics'
+            },
+            {
+              description: '',
+              href: '#',
+              icon: 'cube01',
+              name: 'Engagement'
+            },
+            {
+              description: '',
+              href: '#',
+              icon: 'cube01',
+              name: 'Security'
+            },
+          ],
+          label:"Label1"
+},
+
+
+]
+}

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

@@ -0,0 +1,88 @@
+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 {
+    label,
+    childArray,
+    buttonArray,
+  } = props
+  return (
+
+    <div className="shadow-sm">
+      <div
+        className="w-full rounded-2xl  "
+      >
+        <div className="p-6 min-w-[348px]">
+          {label && <Typography
+            textStyle='h6'
+            className=' uppercase text-neutral-500 mb-4'>
+            {label}
+          </Typography>}
+          <div className='tb:grid tb:grid-cols-2'>
+            {childArray && childArray.map((item) => (
+              <div
+                key={item.name}
+                className="group relative py-1 flex rounded-lg items-center">
+                <div
+                  className="mt-1 flex rounded-lg items-center group-hover:bg-white">
+                  {item.icon && (
+                    <Icon
+                      height={'h-6'}
+                      variant={item.icon}
+                      strokeColor={'#6C737F'}
+                    />
+                  )}
+                </div>
+                <div>
+                  <a href={item.href}>
+                    <Typography
+                      textStyle='h-6'
+                      className='text-neutral-700 px-2 py-2.5'>
+                      {item.name}
+                    </Typography>
+                  </a>
+                  {item.description &&
+                    item.description.length > 0 && (
+                      <Typography
+                        textStyle='body3c-medium'
+                        className='text-neutral-700'>
+                        {item.description}
+                      </Typography>
+                    )}
+                </div>
+              </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>
+
+  )
+
+}

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

@@ -10,21 +10,22 @@ export default function FlyoutB(props) {
     const {
         iconVariant = 'home03',
         strokeColor = '#C6D6FF',
+        strokeClass = 'stroke-neutral-800',
         primaryBtnLabel = 'label1',
         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' },
-            { cta_leftVariantIcon: 'home04', cta_leftVariantIconColor: '#6C737F', cta_text: 'Button 2' }
+
+
         ]
     } = props;
 
     return (
-        <div>
-            <div className="">
-                <div className="bg-neutral-0 shadow-sm rounded-2xl">
-                    <div className="p-6">
-                    <Icon height='h-10 w-10' variant={iconVariant} strokeColor={strokeColor} />
-                    <div>
+
+        <div className="flex flex-col justify-between w-full h-full shadow-sm  rounded-2xl">
+            <div className="p-6">
+                <Icon height='h-10 w-10' variant={iconVariant} strokeColor={strokeColor} strokeClass={strokeClass} />
+                <div className="flex">
                     <HDSButton
                         label={primaryBtnLabel}
                         type='secondaryLink'
@@ -36,29 +37,30 @@ export default function FlyoutB(props) {
                         rightAnimatedArrowColor='#6C737F'
                         className='mt-4'
                     />
-                    </div>
-                    <Typography className='mt-2 text-neutral-800' textStyle='body3'>{mainDescription}</Typography>
-                    </div>
-                    
-                    <div className="grid grid-cols-2 justify-around border-t divide-x divide-neutral-150 border-neutral-150">
-                        {secondaryBtn.map((btn, index) => (
-                            <a key={index} href='#' className=" p-6 flex justify-center ">
-                                <HDSButton
-                                    leftIconVariant={btn.cta_leftVariantIcon}
-                                    leftIconColor={btn.cta_leftVariantIconColor}
-                                    rightIconVariant='none'
-                                    type='secondaryLink'
-                                    label={btn.cta_text}
-                                    state='default'
-                                    size='lg'
-                                    rightAnimatedArrow={true}
-                                    rightAnimatedArrowColor='#6C737F'
-                                />
-                            </a>
-                        ))}
-                    </div>
                 </div>
+                <Typography className='mt-2 text-neutral-800' textStyle='body3'>{mainDescription}</Typography>
             </div>
+
+            <div className="grid grid-cols-2 justify-around border-t divide-x divide-neutral-150 border-neutral-150">
+                {secondaryBtn.map((btn, index) => (
+                    <a key={index} href='#' className="py-6 flex  ">
+                        <HDSButton
+                            leftIconVariant={btn.cta_leftVariantIcon}
+                            leftIconColor={btn.cta_leftVariantIconColor}
+                            rightIconVariant='none'
+                            type='secondaryLink'
+                            label={btn.cta_text}
+                            state='default'
+                            size='lg'
+                            rightAnimatedArrow={true}
+                            rightAnimatedArrowColor='#6C737F'
+                            className='pl-6'
+                        />
+                    </a>
+                ))}
+            </div>
+
         </div>
+
     );
 }

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

@@ -0,0 +1,31 @@
+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
+    } = props;
+    return (
+
+        <div className=" flex flex-row items-center p-6 gap-6">
+            <div className="">
+                {
+                    img_url && (
+                        <img src={props.img_url} className='rounded-xl  ' alt={props.title} />
+                    )
+                }
+            </div >
+            <Typography textStyle='body3c-medium' className={HDSColor(title_colorClass) + ' '} >This is a title of a blog/news piece we want to promote for the developers This is a title of a blog/news piece we want to promote for the developers</Typography>
+
+        </div>
+
+    );
+}
+
+FlyoutC.defaultProps = {
+    img_url: 'text-neutral-900'
+}

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

@@ -1,2 +1,3 @@
-export {default as Flyout} from './flyout';
-export {default as FlyoutB} from './flyoutB';
+export {default as FlyoutA} from './flyoutA';
+export {default as FlyoutB} from './flyoutB';
+export {default as FlyoutC} from './flyoutC';

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

@@ -1,22 +1,94 @@
 import React from "react";
 import { Icon } from "../../common-components/Icon";
-import {HDSColor} from '../../../foundation/ColorPalette'
+import { HDSColor } from '../../../foundation/ColorPalette'
 import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
 
+const cardVariant = {
+    "withButton": {
+        'cardStyle': 'p-10 ',
+        'iconWidthStyle': 'h-20 w-20',
+        'iconStyle': 'h-10 w-10',
+    },
+    "withoutButton": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+    }
+}
 
-export default function TalkCard(props) {
+export default function IconCard(props) {
     const iconBG = HDSColor(props.iconBg);
     return (
-        <div className='bg-neutral-0 rounded-3xl shadow p-6'>
-            <div className={`${iconBG} w-12 h-12 flex items-center justify-center rounded-full mb-6`}>
-                <Icon height={'w-6 h-6 stroke-neutral-800 stroke-[1.5px]'} variant={props.iconVariant} strokeColor={props.iconStroke} />
+        <div
+            className={`bg-neutral-0 rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
+        >
+            <div
+                className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
+            >
+                <Icon
+                    height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
+                    variant={props.iconVariant}
+                    strokeColor={props.iconStroke}
+                    strokeClass={HDSColor(props.iconStrokeClass)} />
             </div>
-            <div className="flex-1">
-                <Typography textStyle="h5" as="h5" className="mb-1 text-blue-600">{props.title}</Typography>
-                <Typography textStyle="body1" className="text-neutral-1000">{props.description}</Typography>
+            <div
+                className="flex-1">
+                {props.cardType === 'withoutButton' ? (
+                    <>
+                        <Typography
+                            textStyle="h5"
+                            as="h5"
+                            className="mb-1 text-blue-600">
+                            {props.title}
+                        </Typography>
+                        <Typography
+                            textStyle="body1"
+                            className="text-neutral-1000">
+                            {props.description}
+                        </Typography>
+                    </>
+                )
+                    :
+                    (
+                        <>
+                            <Typography
+                                textStyle="h4"
+                                as="h4"
+                                className="mb-1 text-blue-800">
+                                {props.title}
+                            </Typography>
+                            <Typography
+                                textStyle="body1c"
+                                className="text-neutral-1000">
+                                {props.description}
+                            </Typography>
+                        </>
+                    )
+                }
+                {props.cardType === 'withButton' && (
+                    <div className="flex mt-7">
+                        <HDSButton
+                            label='Start free'
+                            type='secondary'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow={true}
+                            rightAnimatedArrowColor='#3970FD'
+                            className=' mt-7'
+                        />
+                    </div>
+                )}
+
             </div>
-        </div>
 
+        </div>
     )
+}
 
+IconCard.defaultProps = {
+    cardType: 'withoutButton',
+    iconStrokeClass: 'stroke-neutral-1000'
 }

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

@@ -4,18 +4,19 @@ 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 && props.eventTime === undefined){
+    if (props.speakerSet === undefined ){
         CardClass = 'flex';
     }
-    else CardClass = 'grid shadow';
+    else CardClass = 'flex tb-l:flex-row flex-col';
     return (
 
-        <div className=" ">
-            <div className={`${CardClass} rounded-3xl  bg-neutral-0 grid-cols-1 tb:grid-cols-2  border border-neutral-200 w-full max-w-[882px]`}>
-                <div className="px-8 py-6 border-b border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
+        <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}
@@ -25,13 +26,14 @@ export default function TalkCard(props) {
                     />
 
                     <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
-                    <Typography className='my-2 text-neutral-700' textStyle='body1'>{props.para}</Typography>
+                    {props.para && <Typography className='my-2 text-neutral-700 [&>p]:pb-2 [&>p]:last:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1'>
+                      <ReactMarkdown>{props.para}</ReactMarkdown>
+                    </Typography>}
+
                 </div>
 
-                {props.speakerSet &&
-                     props.eventTime &&
-                
-                <div className="flex flex-col pt-0 tb:pt-[2.875rem] justify-between">
+                {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 ">
@@ -62,10 +64,10 @@ export default function TalkCard(props) {
                             label=''
                         />
                     </div>
-                </div>}
+                </div>)}
             </div>
         </div>
 
     )
 
-}
+}