hds-web 1.0.1 → 1.0.3

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

@@ -0,0 +1,198 @@
+import { useState, useEffect } from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from "../Buttons";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { Icon } from "../common-components";
+import { LinkCard } from '../Cards/Link';
+import { v4 as uuidv4 } from 'uuid';
+
+export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize }) {
+  const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
+  const videoMute = () => {
+    if (heroData.video_url) {
+      const videoEle = document.getElementById("hero_vid");
+      if (videoEle?.muted) {
+        videoEle.muted = false;
+        setValumeMuteIcon("volumemax")
+      } else {
+        videoEle.muted = true;
+        setValumeMuteIcon("volumex")
+      }
+    }
+  }
+
+  const videoComponent = (heroData) => (
+    heroData.video_url ? (
+      <div className={"relative" + ((heroData.video_gradient_bg) ? "" : " p-4")}>
+        <div className="w-12 h-12 bg-neutral-0 rounded-full absolute right-8 bottom-8 shadow-md cursor-pointer z-[2] flex items-center justify-center" onClick={() => videoMute()}>
+          <Icon height={'w-6 h-6 stroke-neutral-800 stroke-[1.5px]'} variant={valumeMuteIcon} strokeColor="#1F2A37" />
+        </div>
+        <video
+          id="hero_vid"
+          controls={false}
+          // autoPlay
+          loop
+          muted
+          poster="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
+          className={"tb:w-full w-full " + ((heroData.video_gradient_bg) ? "" : " rounded-xl shadow-md")}
+        >
+          <source
+            src={heroData.video_url}
+            type="video/mp4"
+          />
+        </video>
+        {
+          heroData.video_gradient_bg && (<div className={`tb-l:w-1/2 w-full h-1/2 tb:h-full absolute left-0 top-0 tb-l:ml-[-4px] tb-l:bg-gradient-to-r ${videoGradientBg} to-transparent bg-gradient-to-b tb:mt-[-4px] tb-l:mt-0`}></div>)
+        }
+      </div>
+    ) : (
+      <div className="w-full"
+        variants={{
+          hidden: {
+            opacity: 0,
+          },
+          visible: {
+            opacity: 1,
+            transition: {
+              delay: .2,
+              duration: 1,
+            }
+          },
+        }}
+      >
+        {heroData.img_url && (
+          <div className="text-right pt-0 flex items-end justify-end h-full">
+            <img
+              src={heroData.img_url}
+              alt="Hero"
+              className="db:inline tb:w-[90%] tb-l:w-[70%] db:w-[75%] w-full rounded-b-3xl"
+            />
+          </div>
+        )}
+      </div>
+    )
+  )
+
+  const title = () => (
+    heroData.title && (
+      <div
+
+      >
+        {
+          logo ? (
+            <div className={"pb-4 db:text-left 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>
+          )
+        }
+      </div>
+    )
+  )
+
+  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) => (
+            <HDSButton
+              leftIconVariant='none'
+              rightIconVariant='none'
+              label={btn.cta_text}
+              state='default'
+              size='lg'
+              rightAnimatedArrow='true'
+              rightAnimatedArrowColor='#ffffff'
+            />
+          ))
+        }
+      </div>
+    )
+  )
+
+  const LinkCardsFn = (heroData) => {
+    return (
+      heroData.linkCards && (
+        <div className="flex mt-16 px-20 pb-20 gap-6 justify-center">
+          {heroData.linkCards.map((card) => (
+            <div key={uuidv4()} className="w-full">
+              <LinkCard
+                linkUrl={card.linkUrl}
+                cardBgColor={card.cardBgColor}
+                cardHoverBg={card.cardHoverBg}
+                iconVariant={card.iconVariant}
+                iconStrokeColor={card.iconStrokeColor}
+                iconArrowVariant={card.iconArrowVariant}
+                iconArrowStrokeColor={card.iconArrowStrokeColor}
+                title={card.title}
+                description={card.description}
+              />
+            </div>
+          ))}
+        </div>
+      )
+    );
+  };
+
+  const imageCard = (heroData) => (
+    heroData.imageUrl && (
+      <div className="">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-[560px] h-[580px] rounded-b-3xl' />
+      </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="w-full">
+            <div className={"db:flex db:w-full tb-l:flex block" + ((heroData.video_url) ? " tb:block" : " tb:flex")}>
+              <div className={("w-full")}
+              >
+                {
+                  heroData.tag_line && (
+                    <div
+                    >
+                      <Typography textStyle="h6" as="h6" className={"pb-2 uppercase text-center db:text-left font-normal tb-l:text-left " + ((heroData.tag_line_color) ? heroData.tag_line_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}
+                      >
+                        {heroData.tag_line}
+                      </Typography>
+                    </div>
+                  )
+                }
+                {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>
+                  )
+                }
+
+                {
+                  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>
+                  )
+                }
+                {heroButton(heroData)}
+
+                
+              </div>
+              {imageCard(heroData)}
+            </div>
+
+            {LinkCardsFn(heroData)}
+
+          </div>
+        </div>
+        {
+          scrollArrow && (
+            <>
+            </>
+          )
+        }
+      </div>
+    </div>
+  );
+}

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

@@ -1 +1,2 @@
-export {default as Hero1} from './h1'
+export {default as Hero1} from './h1'
+export {default as HeroSecondary} from './h2'

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

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

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

@@ -0,0 +1,146 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Typography } from '../../foundation/Typography'
+import { Icon } from '../common-components/Icon'
+
+const test = (TABLE_HEADER) => (
+    console.log(TABLE_HEADER[0]['title']),
+    Object.keys(TABLE_HEADER[0]).map((key, value) => (
+
+        <th
+            key={key}
+            scope="col"
+            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        >
+            {key}
+        </th>
+    ))
+)
+
+export default function TableB(props) {
+    const {
+        title,
+        description,
+        TABLE_VALUE,
+        TABLE_HEADER,
+        children
+
+    } = props;
+    test(TABLE_HEADER);
+    return (
+        <div className="px-4 sm:px-6 lg:px-8 ">
+            <div className="sm:flex sm:items-center ">
+                <div className="sm:flex-auto flex flex-col items-center">
+                    {title && (
+                        <Typography
+                            textStyle='h2'>
+                            {title}
+                        </Typography>
+                    )
+                    }
+                    {description && (
+                        <Typography
+                            textStyle='body1c'>
+                            {description}
+                        </Typography>
+                    )
+                    }
+                </div>
+            </div>
+
+            <div>
+                <div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
+                    <table className="min-w-full  shadow rounded-3xl ">
+                        <thead>
+                            <tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
+                                {Object.keys(TABLE_HEADER).map((key, value) => (
+                                    <th
+                                        key={key}
+                                        scope="col"
+                                        className="px-8 py-6 sm:table-cell"
+                                    >
+                                        <div className=''>
+                                            <div className='flex flex-col justify-center items-center text-center'>
+                                                <div className={'flex items-center gap-2'}>
+                                                    {TABLE_HEADER[key]['icon'] &&
+                                                        (
+                                                            <Icon
+                                                                height='h-6 w-6'
+                                                                variant={TABLE_HEADER[key]['icon']}
+                                                                strokeClass={TABLE_HEADER[key]['iconStrokeClass']} />
+                                                        )
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[key]['title'] && key==0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={TABLE_HEADER[key]['title_text_color']}>
+                                                                {TABLE_HEADER[key]['title']}
+                                                            </Typography>)
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[key]['title'] && key!=0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={TABLE_HEADER[key]['title_text_color']}>
+                                                                {TABLE_HEADER[key]['title']}
+                                                            </Typography>)
+                                                    }
+                                                    
+                                                    
+                                                </div>
+                                                <div className=' max-w-[10rem]'>
+                                                    {TABLE_HEADER[key]['descr'] && (
+                                                        <Typography
+                                                            textStyle='body1'
+                                                            className={TABLE_HEADER[key]['descr_text_color']}>
+                                                            {TABLE_HEADER[key]['descr']}
+                                                        </Typography>)}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-neutral-200 rounded-b-3xl">
+                            {TABLE_VALUE.map((value) => (
+                                <tr className='divide-x divide-neutral-200' key={uuidv4()}>
+                                    {Object.keys(value).map((key) => (
+                                         <React.Fragment key={uuidv4()}>
+                                            {key === 'rowTitle' && (<td
+                                                key={uuidv4()}
+                                                className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
+                                            >
+                                                <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
+
+                                            </td>)}
+
+                                            {key !== 'rowTitle' && (
+                                                <td
+                                                    key={uuidv4()}
+                                                    className="px-8 py-7 text-center"
+                                                >
+                                                    {value[key]['text'] && (
+                                                        <Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
+
+                                                    )}
+                                                    {!value[key]['text'] && (
+                                                        <div className='flex justify-center'>
+                                                            <Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={value[key]['iconStrokeClass']} />
+                                                        </div>
+                                                    )}
+
+
+                                                </td>)}
+                                                </React.Fragment>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/HDS/components/Tabs/tab.js

@@ -8,7 +8,7 @@ export default function Tab(props){
     const tabs = Array.isArray(props.tabs) ? props.tabs : [];
     return (
       <div>
-        <div className="tab:hidden">
+        <div className="md:hidden">
           <label htmlFor="tabs" className="sr-only">
             Select a tab
           </label >
@@ -24,7 +24,7 @@ export default function Tab(props){
             ))}
           </select>
         </div>
-        <div className="hidden tab:block">
+        <div className="hidden md:block">
           <nav className="inline-flex gap-2 bg-neutral-0 p-2 rounded-full" aria-label="Tabs">
           {tabs.length && tabs.map((tab) => (
               <a

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {HDSColor} from '../../../foundation/ColorPalette';
 import PropTypes from 'prop-types';
 import {ReactComponent as HasuraPrimaryIcon } from "../../../assets/icons/HasuraPrimary.svg"
 import {ReactComponent as ClockrewindIcon } from "../../../assets/icons/clock-rewind.svg"
@@ -2351,12 +2352,13 @@ const iconReferenceMap = {
     home03: Home03Icon,
     HasuraBlueLogo: HasuraBlueLogoIcon,
 };
-export default function Icon ({ variant, height, strokeColor, className }){
-    const CurrentActiveIcon = iconReferenceMap[variant];
+export default function Icon ({ variant, height, strokeColor, strokeClass, className }){
+    const CurrentActiveIcon = iconReferenceMap[variant] ;
+    const IconStrokeCLass = HDSColor(strokeClass);
     return (
         <div style={{ stroke: `${strokeColor}` }}>
             <CurrentActiveIcon
-                className={[`${height}`, `stroke-${strokeColor}`, `${className}` ].join(' ')}
+                className={[`${height}`, `${IconStrokeCLass}`, `${className}` ].join(' ')}
             />
         </div>
     );
@@ -2364,4 +2366,4 @@ export default function Icon ({ variant, height, strokeColor, className }){
 Icon.propTypes = {
     fillColor: PropTypes.string,
     strokeColor: PropTypes.string,
-};
+};

package/src/HDS/foundation/ColorPalette/color.js

@@ -479,10 +479,105 @@ const HDSColors = {
     "to-red-500": "to-red-500",
     "to-red-600": "to-red-600",
     "to-red-700": "to-red-700",
-    "to-red-800": "to-red-800"
+    "to-red-800": "to-red-800",
+    "stroke-base-0": "stroke-base-0",
+    "stroke-base-1000": "stroke-base-1000",
+    "stroke-neutral-0": "stroke-neutral-0",
+    "stroke-neutral-50": "stroke-neutral-50",
+    "stroke-neutral-100": "stroke-neutral-100",
+    "stroke-neutral-150": "stroke-neutral-150",
+    "stroke-neutral-200": "stroke-neutral-200",
+    "stroke-neutral-300": "stroke-neutral-300",
+    "stroke-neutral-400": "stroke-neutral-400",
+    "stroke-neutral-500": "stroke-neutral-500",
+    "stroke-neutral-600": "stroke-neutral-600",
+    "stroke-neutral-700": "stroke-neutral-700",
+    "stroke-neutral-800": "stroke-neutral-800",
+    "stroke-neutral-850": "stroke-neutral-850",
+    "stroke-neutral-900": "stroke-neutral-900",
+    "stroke-neutral-950": "stroke-neutral-950",
+    "stroke-neutral-1000": "stroke-neutral-1000",
+    "stroke-blue-100": "stroke-blue-100",
+    "stroke-blue-200": "stroke-blue-200",
+    "stroke-blue-300": "stroke-blue-300",
+    "stroke-blue-400": "stroke-blue-400",
+    "stroke-blue-500": "stroke-blue-500",
+    "stroke-blue-600": "stroke-blue-600",
+    "stroke-blue-700": "stroke-blue-700",
+    "stroke-blue-800": "stroke-blue-800",
+    "stroke-blue-900": "stroke-blue-900",
+    "stroke-purple-100": "stroke-purple-100",
+    "stroke-purple-200": "stroke-purple-200",
+    "stroke-purple-300": "stroke-purple-300",
+    "stroke-purple-400": "stroke-purple-400",
+    "stroke-purple-500": "stroke-purple-500",
+    "stroke-purple-600": "stroke-purple-600",
+    "stroke-purple-700": "stroke-purple-700",
+    "stroke-purple-800": "stroke-purple-800",
+    "stroke-purple-900": "stroke-purple-900",
+    "stroke-cyan-100": "stroke-cyan-100",
+    "stroke-cyan-200": "stroke-cyan-200",
+    "stroke-cyan-300": "stroke-cyan-300",
+    "stroke-cyan-400": "stroke-cyan-400",
+    "stroke-cyan-500": "stroke-cyan-500",
+    "stroke-cyan-600": "stroke-cyan-600",
+    "stroke-cyan-700": "stroke-cyan-700",
+    "stroke-cyan-800": "stroke-cyan-800",
+    "stroke-cyan-900": "stroke-cyan-900",
+    "stroke-green-100": "stroke-green-100",
+    "stroke-green-200": "stroke-green-200",
+    "stroke-green-300": "stroke-green-300",
+    "stroke-green-400": "stroke-green-400",
+    "stroke-green-500": "stroke-green-500",
+    "stroke-green-600": "stroke-green-600",
+    "stroke-green-700": "stroke-green-700",
+    "stroke-green-800": "stroke-green-800",
+    "stroke-green-900": "stroke-green-900",
+    "stroke-pink-100": "stroke-pink-100",
+    "stroke-pink-200": "stroke-pink-200",
+    "stroke-pink-300": "stroke-pink-300",
+    "stroke-pink-400": "stroke-pink-400",
+    "stroke-pink-500": "stroke-pink-500",
+    "stroke-pink-600": "stroke-pink-600",
+    "stroke-pink-700": "stroke-pink-700",
+    "stroke-pink-800": "stroke-pink-800",
+    "stroke-pink-900": "stroke-pink-900",
+    "stroke-amber-100": "stroke-amber-100",
+    "stroke-amber-200": "stroke-amber-200",
+    "stroke-amber-300": "stroke-amber-300",
+    "stroke-amber-400": "stroke-amber-400",
+    "stroke-amber-500": "stroke-amber-500",
+    "stroke-amber-600": "stroke-amber-600",
+    "stroke-amber-700": "stroke-amber-700",
+    "stroke-amber-800": "stroke-amber-800",
+    "stroke-amber-900": "stroke-amber-900",
+    "stroke-yellow-100": "stroke-yellow-100",
+    "stroke-yellow-200": "stroke-yellow-200",
+    "stroke-yellow-300": "stroke-yellow-300",
+    "stroke-yellow-400": "stroke-yellow-400",
+    "stroke-yellow-500": "stroke-yellow-500",
+    "stroke-yellow-600": "stroke-yellow-600",
+    "stroke-yellow-700": "stroke-yellow-700",
+    "stroke-yellow-800": "stroke-yellow-800",
+    "stroke-orange-100": "stroke-orange-100",
+    "stroke-orange-200": "stroke-orange-200",
+    "stroke-orange-300": "stroke-orange-300",
+    "stroke-orange-400": "stroke-orange-400",
+    "stroke-orange-500": "stroke-orange-500",
+    "stroke-orange-600": "stroke-orange-600",
+    "stroke-orange-700": "stroke-orange-700",
+    "stroke-orange-800": "stroke-orange-800",
+    "stroke-red-100": "stroke-red-100",
+    "stroke-red-200": "stroke-red-200",
+    "stroke-red-300": "stroke-red-300",
+    "stroke-red-400": "stroke-red-400",
+    "stroke-red-500": "stroke-red-500",
+    "stroke-red-600": "stroke-red-600",
+    "stroke-red-700": "stroke-red-700",
+    "stroke-red-800": "stroke-red-800"
 };
 
-export default function HDSColor(color = 'bg-blue-600') {
+export default function HDSColor(color = '') {
     if (!HDSColors[color]) {
         HDSColors[color] = color;
         console.log(color);

package/src/HDS/helpers/Time/time.js

@@ -1,73 +1,95 @@
 import React, { useState, useEffect } from 'react';
-import { Typography } from '../../foundation/Typography';
 
-const TimeComponent = ({ dateTimeString, className }) => {
+const TimeComponent = ({ format, countdownTime }) => {
   const [currentTime, setCurrentTime] = useState(new Date());
-  const [userTimeZone, setUserTimeZone] = useState('');
 
   useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(new Date());
     }, 1000);
-
-    getUserTimeZone();
-
     return () => clearInterval(interval);
   }, []);
 
-  const formatTime = (time, timeZone) => {
-    return time.toLocaleString('en-US', {
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-      hour12: true,
-      timeZone,
-    });
+  const formatTime = () => {
+    switch (format) {
+      case 'MM/dd/yyyy hh:mm:ss tt':
+        return currentTime.toLocaleString('en-US', {
+          month: '2-digit',
+          day: '2-digit',
+          year: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+          second: 'numeric',
+          hour12: true,
+        });
+      case 'yyyy-mm-dd hh:mm:ss':
+        return currentTime.toLocaleString('en-US', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: 'numeric',
+          minute: 'numeric',
+          second: 'numeric',
+        }).replace(/,/g, '');
+      case 'yyyy-mm-dd HH:MM:SS tt':
+        return currentTime.toLocaleString('en-US', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: 'numeric',
+          minute: 'numeric',
+          second: 'numeric',
+          hour12: false,
+        });
+      case 'm/d/yyyy':
+        return currentTime.toLocaleString('en-US', {
+          month: 'numeric',
+          day: 'numeric',
+          year: 'numeric',
+        });
+      case 'yyyy-mm-dd':
+        return currentTime.toLocaleString('en-US', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        });
+      default:
+        return currentTime.toLocaleString();
+    }
   };
 
-  const getUserTimeZone = () => {
-    const getTimeZone = () => {
-      const offset = new Date().getTimezoneOffset();
-      const offsetHours = Math.abs(Math.floor(offset / 60));
-      const offsetMinutes = Math.abs(offset % 60);
-      const sign = offset < 0 ? '+' : '-';
-      return `GMT${sign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes
-        .toString()
-        .padStart(2, '0')}`;
-    };
+  const countdown = () => {
+    if (!countdownTime) {
+      return null;
+    }
 
-    setUserTimeZone(getTimeZone());
-  };
+    const remainingTime = countdownTime - currentTime;
 
-  const getUserDateTime = () => {
-    if (!dateTimeString) {
-      return null;
+    if (remainingTime <= 0) {
+      return <div>Time's up!</div>;
     }
 
-    const parseDateTime = (dateTimeString) => {
-      const parts = dateTimeString.split('|');
-      const dateString = parts[0].trim();
-      const timeString = parts[1].trim();
-      const [month, day, year] = dateString.split(' ');
-      const [time, timezone] = timeString.split(' ');
-      const [hours, minutes] = time.split(':');
-      const dateTime = new Date(`${month} ${day}, ${year} ${hours}:${minutes}`);
-      return dateTime.toLocaleString('en-US', { timeZone: timezone });
-    };
+    const seconds = Math.floor(remainingTime / 1000) % 60;
+    const minutes = Math.floor(remainingTime / 1000 / 60) % 60;
+    const hours = Math.floor(remainingTime / 1000 / 60 / 60) % 24;
+    const days = Math.floor(remainingTime / 1000 / 60 / 60 / 24);
 
-    const userDateTime = parseDateTime(dateTimeString);
-    return userDateTime;
+    return (
+      <div>
+        <div>{days} days</div>
+        <div>
+          {hours.toString().padStart(2, '0')}:
+          {minutes.toString().padStart(2, '0')}:
+          {seconds.toString().padStart(2, '0')}
+        </div>
+      </div>
+    );
   };
 
   return (
     <div>
-      <div className={className}>
-        <Typography textStyle='h6'>
-          {getUserDateTime() || formatTime(currentTime, userTimeZone)}
-        </Typography>
-      </div>
+      <div>{formatTime()}</div>
+      {countdown()}
     </div>
   );
 };

package/src/HDS/index.js

@@ -1,3 +1,4 @@
 export * from './foundation';
 export * from './helpers';
-export * from './components';
+export * from './components';
+export * from './modules';

package/src/HDS/modules/TextCard/index.js

@@ -0,0 +1 @@
+export {default as TextCard} from './textCard';