hds-web 1.1.7 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.1.7",
+  "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

@@ -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

@@ -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/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 rounded-3xl 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>
 
     )
 
-}
+}

package/src/HDS/components/Headers/v3Header.js

@@ -1,9 +1,10 @@
 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 { HDSButton } from '../Buttons'
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../common-components/Icon';
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../Buttons';
+import { V3Dropdown } from '../Cards/Dropdown'
 
 const solutions = [
     {
@@ -43,39 +44,69 @@ export default function V3Header(props) {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
         >
-            <Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform lg:max-w-3xl">
-                <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                    <div className="relative grid gap-6 bg-neutral-0 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
-                        {solutions.map((item) => (
-                            <a
-                                key={item.name}
-                                href={item.href}
-                                className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
-                            >
-                                <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
-
-                                    {/* <item.icon className="h-6 w-6" aria-hidden="true" /> */}
-                                </div>
-                                <div className="ml-4">
-                                    <p className="text-base font-medium text-gray-900">{item.name}</p>
-                                    <p className="mt-1 text-sm text-gray-500">{item.description}</p>
-                                </div>
-                            </a>
-                        ))}
-                    </div>
-                    <div className="bg-gray-50 p-5 sm:p-8">
-                        <a href="#" className="-m-3 flow-root rounded-md p-3 hover:bg-gray-100">
-                            <div className="flex items-center">
-                                <div className="text-base font-medium text-gray-900">Enterprise</div>
-                                <span className="ml-3 inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-xs font-medium leading-5 text-indigo-800">
-                                    New
-                                </span>
-                            </div>
-                            <p className="mt-1 text-sm text-gray-500">
-                                Empower your entire team with even more advanced tools.
-                            </p>
-                        </a>
-                    </div>
+            <Popover.Panel className="fixed left-0 ml z-10 mt-3 transform ">
+            <div className='ml-[9.55rem]'>
+            <Icon variant='triangle' height='h-6 w-6 fill-neutral-100' strokeClass='stroke-neutral-100'/>
+            </div>
+                <div className=" p-2 bg-neutral-100 rounded-lg">
+                    
+                    <V3Dropdown
+                        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'
+                            },
+                            {
+                                childArray: [
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Analytics'
+                                    },
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Engagement'
+                                    },
+                                    {
+                                        description: '',
+                                        href: '#',
+                                        icon: 'cube01',
+                                        name: 'Security'
+                                    }
+                                ],
+                                label: 'Label1'
+                            }
+                        ]}
+                    />
+                   
                 </div>
             </Popover.Panel>
         </Transition>
@@ -97,7 +128,7 @@ export default function V3Header(props) {
                                 <Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
                                 {/* <Icon height='h-5' variant={'home03'} strokeColor={'#1EA7FD'} /> */}
                             </Popover.Button>
-                            <div className='block'>
+                            <div className=''>
                                 {dropdown(item['titleDropdown'])}
                             </div>
 

package/src/HDS/components/Hero/h2.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { useState, useEffect } from "react";
 import { Typography } from "../../foundation/Typography";
 import { HDSButton } from "../Buttons";
@@ -80,11 +81,11 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
       >
         {
           logo ? (
-            <div className={"pb-4 db:text-left text-center tb-l:text-left" + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>
+            <div className={"pb-4 db:text-left tb:text-center tb-l:text-left" + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>
               <img className="w-[290px] inline-block" src={logo} alt="Brand" />
             </div>
           ) : (
-            <Typography textStyle={fontSize ? fontSize : "h1"} as="h1" className={"pb-2 text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
+            <Typography textStyle='h2' as="h2" className={"pb-2 tb:text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
           )
         }
       </div>
@@ -93,20 +94,35 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const heroButton = () => (
     heroData.buttons && (
-      <div className={" gap-2 flex items-center justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
-        {
-          heroData.buttons.map((btn, index) => (
+      <div className={" gap-6 flex items-center tb:justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
+        
+        
+            {heroData.buttons[0] &&
             <HDSButton
+            type="secondary"
+            btnTextColorClass={HDSColor('text-neutral-0')}
               leftIconVariant='none'
               rightIconVariant='none'
-              label={btn.cta_text}
+              label={heroData.buttons[0].cta_text}
               state='default'
               size='lg'
               rightAnimatedArrow='true'
               rightAnimatedArrowColor='#ffffff'
             />
-          ))
-        }
+      }
+            {heroData.buttons[1] && <HDSButton
+            type="primaryLink"
+            btnTextColorClass={HDSColor('text-neutral-0')}
+              leftIconVariant='none'
+              rightIconVariant='none'
+              label={heroData.buttons[1].cta_text}
+              state='default'
+              size='lg'
+              rightAnimatedArrow='true'
+              rightAnimatedArrowColor='#ffffff'
+            />}
+      
+        
       </div>
     )
   )
@@ -137,20 +153,20 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const imageCard = (heroData) => (
     heroData.imageUrl && (
-      <div className="">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-[560px] h-[580px] rounded-b-3xl' />
+      <div className="w-1/2 tb-l:w-full tb:flex tb:flex-col tb:justify-center">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-full ' />
       </div>
     )
   )
   
   const videoGradientBg = HDSColor(heroData.video_gradient_bg);
   return (
-    <div className="db:pt-32 mb-10 db:mb-5 tb:mb-16 tb-l:mb-0">
-      <div className="tb:px-4">
-        <div className={"max-w-7xl mx-auto rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
+    <div className="">
+      <div className="">
+        <div className={"max-w-7xl mx-auto px-20 py-20 rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
           <div className="w-full">
-            <div className={"db:flex db:w-full tb-l:flex block" + ((heroData.video_url) ? " tb:block" : " tb:flex")}>
-              <div className={("w-full")}
+            <div className={"tb-l:flex tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
+              <div className='w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
               >
                 {
                   heroData.tag_line && (
@@ -166,13 +182,13 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
                 {title(heroData)}
                 {
                   heroData.sub_title && (
-                    <Typography textStyle="sub1" className={"text-center db:text-left tb-l:text-left " + ((heroData.sub_title_color) ? heroData.sub_title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.sub_title}</Typography>
+                    <Typography textStyle="sub1" className={"tb-l:text-center db:text-left flex" + ((heroData.sub_title_color) ? heroData.sub_title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.sub_title}</Typography>
                   )
                 }
 
                 {
                   heroData.description && (
-                    <Typography textStyle="sub2" className="text-center tb:text-left db:text-left tb-l:text-left text-blue-700 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                    <Typography textStyle="sub1" className="tb-l:text-center db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
                   )
                 }
                 {heroButton(heroData)}

package/src/HDS/components/Snippet/CodeSnippet.js

@@ -25,6 +25,7 @@ function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
 
   
   useEffect(() => {
+    console.log(snippet)
     if (preRef.current ) {
       Prism.highlightAll();
     }

package/src/HDS/components/Tables/index.js

@@ -1,2 +1,3 @@
 export {default as TableA} from './tableA';
-export {default as TableB} from './tableB';
+export {default as TableB} from './tableB';
+export {default as TableC} from './tableC';