hds-web 1.6.7 → 1.6.8

package/package.json

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

package/src/HDS/assets/icons/calendar-plus-01.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 8H3M16 2V5M8 2V5M12 18V12M9 15H15M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z"  stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 8H3M16 2V5M8 2V5M12 18V12M9 15H15M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/assets/icons/calendar-plus-02.svg

@@ -1,3 +1,3 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 11.5V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22H12.5M21 10H3M16 2V6M8 2V6M18 21V15M15 18H21"  stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 11.5V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22H12.5M21 10H3M16 2V6M8 2V6M18 21V15M15 18H21"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/HDS/components/Avatars/hasConAv.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Typography} from '../../foundation/Typography'
+import { Typography } from '../../foundation/Typography'
+import { Icon } from '../common-components/Icon';
 
 export default function HasConAvatar({ name, designation, size, imageUrl }) {
     const hasImageUrl = imageUrl && imageUrl.length > 0;
     return (
-        <div className={`shadow group rounded-2xl tb:rounded-3xl flex flex-col-reverse mb-m:flex-row mb-m:flex mb-m:items-center mb-m:justify-between bg-neutral-0 tb:inline-flex tb:flex-col tb:max-w-[289px]  tb:min-w-[18rem]`}>
+        <div className={`${size} group flex-shrink-0 rounded-2xl flex items-center justify-between bg-neutral-0 tb:inline-flex tb:flex-col shadow hover:shadow-xl tb:min-w-[18rem]`}>
 
-            <div className="px-6 pb-6 pt-3 mb-m:px-5 mb-m:py-[30px] tb:p-0 text-left tb:flex-col mb-m:min-h-[120px] tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 tb:text-center">
-                <div  className=' text-hds-m-body1c-bold tb:text-hds-t-h5 db:text-hds-d-h5 text-blue-400'>{name}</div>
-                <div  className=' text-hds-m-body3c-medium tb:text-hds-t-h7 db:text-hds-d-h7 text-blue-800 capitalize tb:uppercase'>{designation}</div>
+            <div className="mx-5 tb:flex-col tb:flex tb:items-center tb:p-8 tb:ml-0 bg-neutral-0">
+                <Typography textStyle='body1c-bold' className='text-blue-400'>{name}</Typography>
+                <Typography textStyle='body3c-medium' className='text-blue-800'>{designation}</Typography>
             </div>
-            <div className='relative pt-6 mb-m:pt-0 pl-6 mb-m:pl-0 mb-m:self-center'>
+            <div className='relative '>
                 <img
-                    className={`inline-block max-[399px]:bg-blue-300  rounded-r-xl max-[399px]:rounded-full  w-[60px] mb-m:min-w-[144px] mb-m:w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
+                    className={`inline-block w-[9rem] tb:min-w-[18rem] tb:rounded-2xl border-neutral-0 rounded-r-2xl `}
                     src={imageUrl}
                 />
-                 {/* <div className="absolute tb-l:rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div> */}
+                 <div className="absolute rounded-b-2xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
             </div>
 
 
@@ -32,5 +33,5 @@ HasConAvatar.propTypes = {
 HasConAvatar.defaultProps = {
     name: 'Names',
     designation: 'Product Marketing, Hasura',
-    imageUrl: ``
+    imageUrl: `https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80`
 };

package/src/HDS/components/Avatars/profileAvatar.js

@@ -1,32 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
-import { Typography } from '../../foundation/Typography';
-import { HDSColor } from '../../foundation/ColorPalette';
 const imgSizes = {
     'xs': 'h-8 w-8',
     'sm': 'h-10 w-10',
-    'md': 'h-12 w-12 min-w-[48px]',
+    'md': 'h-12 w-12',
     'lg': 'h-[60px] w-[60px]',
 }
 const AvatarVariant = {
-    'circular': 'shadow rounded-full ',
+    'circular': 'shadow rounded-full border-[1.5px] border-neutral-0',
     'square': 'rounded-lg',
 }
 
-export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant }) {
+
+const nameTextStyle = {
+    'xs': 'text-d-body1c-bold',
+    'sm': 'text-d-body1c-bold',
+    'md': 'text-d-body1c-bold',
+    'lg': 'text-d-body1c-bold'
+}
+
+const desgnTextStyle = {
+    'xs': 'text-hds-d-body3c ',
+    'sm': 'text-hds-d-body3c ',
+    'md': 'text-hds-d-body3c ',
+    'lg': 'text-hds-d-body3c '
+}
+
+export default function ProfileAvatar({ name, designation, size, imageUrl, avatarVariant }) {
     const imgSizeClass = imgSizes[size] || imgSizes.md;
     const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
     const defaultAvatarIcon = "user03";
     const hasImageUrl = imageUrl && imageUrl.length > 0;
-
     return (
         <div className="group block flex-shrink-0">
             <div className="flex items-center">
                 <div>
                     {hasImageUrl ? (
                         <img
-                            className={`${imgSizeClass} ${avatarVariantClass} ${HDSColor(avatarBgColor)} rounded inline-block`}
+                            className={`${imgSizeClass} ${avatarVariantClass} rounded inline-block`}
                             src={imageUrl}
                         />
                     ) : (
@@ -38,8 +50,15 @@ export default function ProfileAvatar({avatarBgColor, name, designation, size, i
                     )}
                 </div>
                 <div className="ml-3">
-                        <Typography textStyle='body2c-bold' className={` text-neutral-800`}>{name}</Typography>
-                        <Typography textStyle='body3c' className={` text-neutral-500`}>{designation}</Typography>
+                    <p
+                        className={`${nameTextStyle[`${size}`]}text-neutral-900 group-hover:text-gray-900`}
+                    >
+                        {name}
+                    </p>
+                    <p
+                        className={`${desgnTextStyle[`${size}`]}  text-neutral-500 group-hover:text-gray-700`}>
+                        {designation}
+                    </p>
                 </div>
             </div>
         </div>
@@ -54,5 +73,5 @@ ProfileAvatar.propTypes = {
 ProfileAvatar.defaultProps = {
     name: 'Names',
     designation: 'Product Marketing, Hasura',
-    imageUrl: ``
+    imageUrl: `https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80`
 };

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

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
 import {Typography} from '../../foundation/Typography'
-import { HDSColor } from '../../foundation/ColorPalette';
 const sizeClasses = {
   sm: 'py-0.5 px-2 hds-d-body3c',
   default: 'py-1 px-3',
@@ -28,10 +27,8 @@ const colorVariants = {
 export default function Badge({
   leftIconVariant,
   leftIconColor,
-  leftIconColorClass,
   rightIconVariant,
   rightIconColor,
-  rightIconColorClass,
   size,
   children,
   color,
@@ -47,7 +44,7 @@ export default function Badge({
 
   return (
     <button
-      className={` cursor-default ${sizeClasses[size]} ${
+      className={`${sizeClasses[size]} ${
         colorVariants[color]
       } inline-flex items-center rounded-full`}
       onClick={handleClick}
@@ -55,14 +52,14 @@ export default function Badge({
     >
        {leftIconVariant && leftIconVariant !== 'none' && (
           <div className='mr-1'>
-            <Icon height={'h-4 w-4 stroke-[1.5px]'} variant={leftIconVariant} strokeColor={leftIconColor} strokeClass={HDSColor(leftIconColorClass)} />
+            <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
-        <Typography textStyle='body3c'>{children}</Typography>
+        <Typography textStyle='h6'>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>
-            <Icon height={'h-4 w-4 stroke-[1.5px]'} variant={rightIconVariant} strokeColor={rightIconColor} rightIconColorClass={HDSColor(rightIconColorClass)} />
+            <Icon height={'h-4'} variant={rightIconVariant} strokeColor={rightIconColor} />
           </div>
         )}
     </button>

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

@@ -13,7 +13,7 @@ const ANIMATED_ARR_CLASSES = {
     'md': 'h-5 w-5 -mt-5',
     'lg': 'h-6 w-6 -mt-6'
   },
- 
+
 }
 
 const Buttonclasses = {
@@ -22,13 +22,13 @@ const Buttonclasses = {
       'base': 'db:w-fit tb:w-fit w-full justify-center justify-center bg-blue-500 text-neutral-0',
       '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-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none active:bg-blue-600 active:text-neutral-0 active:outline-none',
-     
+
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
   'tonal': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 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,25 +36,14 @@ const Buttonclasses = {
   },
   'secondary': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 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:duration-300',
-      
-      'focus': 'focus:bg-blue-200 focus:text-blue-500 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
-    },
-    'disabled': 'bg-neutral-200 text-neutral-400',
-  },
-  'secondaryWhite': {
-    'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-neutral-0 ',
+      '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',
 
-      'hover': 'hover:text-neutral-0 hover:border-2 hover:border-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
-      
-      'focus': 'focus:text-neutrak-0 focus:border-2 border-neutral-0 focus:outline-none focus:text-neutral-0',
+      'focus': 'focus:bg-blue-200 focus:text-blue-500 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
-  
   'ghost': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full  justify-center text-blue-600',
@@ -65,7 +54,7 @@ const Buttonclasses = {
   },
   'primaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center ',
+      'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-500',
       'hover': 'hover:text-neutral-0',
       'focus': 'focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-600',
     },
@@ -73,8 +62,8 @@ const Buttonclasses = {
   },
   'secondaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center ',
-      'hover': '',
+      'base': 'db:w-fit tb:w-fit w-full  justify-center text-neutral-800',
+      'hover': 'hover:text-neutral-900 ',
       'focus': 'focus:text-neutral-900 focus:outline-none focus:shadow-[0px_0px_0px_4px_#E5E7EB]',
     },
     'disabled': 'text-neutral-300',
@@ -171,10 +160,10 @@ export default function Button(props) {
             <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
-        
+
          {leftIconVariant && leftIconVariant !== 'none' && type=='iconOnly' && (
-          <div className={``}>
-            <Icon variant={leftIconVariant} height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} group-active:stroke-neutral-0 stroke-[1.5px] group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0`} strokeColor={leftIconColor} />
+          <div className={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
+            <Icon variant={leftIconVariant} height='group-active:stroke-neutral-0 group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0' strokeColor={leftIconColor} />
           </div>
         )}
         {label}
@@ -206,7 +195,7 @@ Button.propTypes = {
   leftIconVariant: PropTypes.string,
   rightIconVariant: PropTypes.string,
   animatedHoverStroke: PropTypes.string
-  
+
 
 };
 
@@ -223,5 +212,5 @@ Button.defaultProps = {
   rightAnimatedArrow: 'True' ,
   rightAnimatedArrowColor: '#FFFFFF',
   animatedHoverStroke: 'group-hover:stroke-neutral-0',
-  
+
 };

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

@@ -5,7 +5,7 @@ import { FlyoutB, FlyoutA } from '../Menu'
 
 export default function DropdownA(props) {
     return (
-        <div className='flex mx-auto w-screen flex-col tb:flex-row gap-2'>
+        <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}

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

@@ -8,7 +8,7 @@ export default function FeedbackCard(props) {
   return (
     <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10'>
       <div className='pb-8'>
-        <img src={props.brandImgUrl} alt={props.brandImgAlt} className=' h-8 '/>
+        <img src={props.brandImgUrl} alt={props.brandImgAlt} />
       </div>
       <div className="pb-10">
         <Typography textStyle="quote" className='text-neutral-1000'>{props.description}</Typography>

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

@@ -6,22 +6,24 @@ import { Typography } from '../../../foundation/Typography'
 
 
 export default function LinkCard(props) {
+    const iconStrokeColor = HDSColor(props.iconStrokeColor);
+    const cardBgColorClass = HDSColor(props.cardBgColor)
+    const cardHoverClasses = `hover:${HDSColor(props.cardHoverBg)}` + ' hover:shadow-xl';
     return (
         <>
             <a
                 href={props.linkUrl}
-                className={`rounded-2xl p-6 h-full block`}
+                className={`${cardHoverClasses} ${cardBgColorClass} min-w-[15rem] rounded-2xl border border-neutral-150 p-6 block`}
             >
                 {props.brandImageUrl ?
                     (
                         <div className="flex flex-col">
-                            <div className="flex justify-end items-end">
+                            <div className="flex justify-end items-end pr-6">
                                 {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>
@@ -33,18 +35,17 @@ export default function LinkCard(props) {
                     (
                         <>
                             <div className='flex items-center'>
-                                <div className='flex items-center flex-1 pb-2'>
+                                <div className='flex items-center flex-1'>
                                     {props.iconVariant &&
                                         (<Icon
                                             height={'w-6 h-6 mr-2 stroke-[1.5px] '}
                                             variant={props.iconVariant}
-                                            strokeColor={props.iconStrokeColor}
-                                            strokeClass={HDSColor(props.iconStrokeClass)}
+                                            strokeColor={iconStrokeColor}
                                         />)}
                                     <Typography
                                         as="h5"
                                         textStyle="body1c-bold"
-                                        className={HDSColor(props.titleTextColor)}>
+                                        className="text-neutral-1000">
                                         {props.title}
                                     </Typography>
                                 </div>
@@ -53,22 +54,15 @@ export default function LinkCard(props) {
                                         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
+                                (<Typography
                                     textStyle="body3"
-                                    className={`${HDSColor(props.descTextColor)} mt-2`}>
+                                    className="text-neutral-1000 mt-2">
                                     {props.description}
-                                </Typography>
-                                        </div>
-                                
-                                )}
+                                </Typography>)}
                         </>
                     )
                 }
@@ -78,11 +72,11 @@ export default function LinkCard(props) {
 }
 
 LinkCard.defaultProps = {
-    descTextColor:'',
-    titleTextColor:'',
     brandImageUrl: '',
     brandImageAlt:'',
     linkUrl: '#',
+    cardBgColor: 'bg-neutral-0',
+    cardHoverBg: 'bg-neutral-0',
     iconVariant: 'videorecorder',
     iconStrokeColor: 'blue-500',
     iconArrowVariant: 'arrownarrowupright',

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

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

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

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Fragment } from 'react'
 import { Popover, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'

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

@@ -3,34 +3,17 @@ import { Icon } from "../../common-components/Icon";
 import { HDSColor } from '../../../foundation/ColorPalette'
 import { Typography } from '../../../foundation/Typography'
 import { HDSButton } from "../../Buttons";
-import ReactMarkdown from "react-markdown";
+
 const cardVariant = {
     "withButton": {
         'cardStyle': 'p-10 ',
         'iconWidthStyle': 'h-20 w-20',
         'iconStyle': 'h-10 w-10',
-        'titleTextStyle': 'h4',
-        'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
-        'descTextStyle': 'body1c',
-        'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
     },
     "withoutButton": {
         'cardStyle': 'p-6',
         'iconWidthStyle': 'h-12 w-12',
         'iconStyle': 'h-6 w-6',
-        'titleTextStyle': 'h5',
-        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
-        'descTextStyle': 'body1',
-        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
-    },
-    "sm": {
-        'cardStyle': 'p-6',
-        'iconWidthStyle': 'h-12 w-12',
-        'iconStyle': 'h-6 w-6',
-        'titleTextStyle': 'body3c',
-        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
-        'descTextStyle': 'body3',
-        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
     }
 }
 
@@ -38,62 +21,68 @@ export default function IconCard(props) {
     const iconBG = HDSColor(props.iconBg);
     return (
         <div
-            className={`bg-neutral-0 grid h-full rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
+            className={`bg-neutral-0 rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
         >
-            <div className=" self-start">
-                <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">
-
-                    {props.cardType &&
-                        (
-                            <>
-                                <Typography
-                                    textStyle={cardVariant[props.cardType]['titleTextStyle']}
-                                    as={cardVariant[props.cardType]['titleTextStyle']}
-                                    className={cardVariant[props.cardType]['titleClasses']}
-                                >
-                                    {props.title}
-                                </Typography>
-
-                                <Typography
-                                    textStyle={cardVariant[props.cardType]['descTextStyle']}
-                                    className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
-                                >
-                                    <ReactMarkdown>
-                                        {props.description}
-                                    </ReactMarkdown>
-                                </Typography>
-                            </>
-                        )
-                    }
-                </div>
+            <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>
-            {props.cardType === 'withButton' && (
-                <div className="flex self-end 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
+                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>
     )

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

@@ -1,3 +1,2 @@
 export {default as TalkCard} from './talkCard';
-export {default as TalkCard2} from './talkcard2';
 export {default as IconCard} from './iconCard';