hds-web 1.0.1 → 1.0.2

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 }){
+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,9 @@ export default function Icon ({ variant, height, strokeColor, className }){
 Icon.propTypes = {
     fillColor: PropTypes.string,
     strokeColor: PropTypes.string,
+};
+
+Icon.defaultProps = {
+    strokeClass: 'stroke-neutral-0',
+    height: 'h-6 w-6'
 };

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

@@ -479,7 +479,102 @@ 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') {

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';

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

@@ -0,0 +1,132 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { HDSButton } from '../../components/Buttons';
+import { Icon } from '../../components/common-components/Icon';
+
+export default function TextCard(props) {
+  const titleColor = HDSColor(props.title_color);
+  console.log(props.descriptions);
+  return (
+    <>
+      {
+        props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-8 tb-l:w-1/2`}>{props.title}</Typography>)
+      }
+      <div className={'grid grid-cols-1 tb:grid-cols-2 gap-10' + ((props.feature_cards_links) ? ' tb:gap-0 tb-l:gap-0' : ' tb:gap-16 tb-l:gap-36')}>
+        <div>
+          {
+            !props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-6`}>{props.title}</Typography>)
+          }
+          {
+            props.descriptions && props.descriptions.map((desc, i) => (
+              <Typography key={i} textStyle="body1" className="pb-6">{desc.description}</Typography>
+            ))
+          }
+          {
+            props.descriptions_list && (
+              <div className="pb-6">
+              {
+                props.descriptions_list && props.descriptions_list.map((descList, j) => {
+                  const iconBgColor = HDSColor(descList.icon_bg_color);
+                  const iconColor = HDSColor(descList.icon_color);
+                  return (
+                    <div className='flex items-start pb-4 last:pb-0' key={j}>
+                      <div className={`${iconBgColor} w-6 h-6 rounded-full mr-2 flex items-center justify-center`}>
+                        <Icon
+                          height={`h-3 w-3 stroke-[1.5px]` }
+                          variant={descList.icon_name}
+                          strokeColor={iconColor}
+                        />
+                      </div>
+                      <Typography textStyle='body1' className='text-neutral-1000'>{descList.description}</Typography>
+                    </div>
+                  )
+                })
+              }
+              </div>
+            )
+          }
+          {
+            props.feature_cards_links && (
+              <div className='border border-neutral-150 rounded-2xl tb:rounded-e-none'>
+                {
+                  props.feature_cards_links.map((list, i) => {
+                    const currentStrokeColor = HDSColor(list.icon_color)
+                    return (
+                      <div className='border-b border-b-neutral-150 last:border-b-0'>
+                        <div className='m-2 p-6 rounded-lg hover:bg-neutral-100' key={i}>
+                          <div className='flex items-center pb-4'>
+                            <Icon
+                              height={`w-6 h-6 mr-2 stroke-[1.5px]` }
+                              variant={list.icon_name}
+                              strokeColor={currentStrokeColor}
+                            />
+                            <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
+                          </div>
+                          {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-1000'>{list.description}</Typography>}
+                          {
+                            list.descriptions_list && list.descriptions_list.map((descList, j) => {
+                              const iconBgColor = HDSColor(descList.icon_bg_color);
+                              const iconColor = HDSColor(descList.icon_color);
+                              return (
+                                <div className='flex items-start pb-4 last:pb-0' key={j}>
+                                  <div className={`${iconBgColor} w-5 h-5 rounded-full mr-2 flex items-center justify-center`}>
+                                    <Icon
+                                      height={`h-3 w-3 stroke-[1.5px]` }
+                                      variant={descList.icon_name}
+                                      strokeColor={iconColor}
+                                    />
+                                  </div>
+                                  <Typography textStyle='body3' className='text-neutral-1000'>{descList.description}</Typography>
+                                </div>
+                              )
+                            })
+                          }
+                          {
+                            props.button && (
+                              <HDSButton
+                                label={props.button.cta_text}
+                                type='primaryLink'
+                                leftIconVariant='none'
+                                rightIconVariant='none'
+                                state='default'
+                                size='md'
+                                rightAnimatedArrow={true}
+                                rightAnimatedArrowColor='#3970FD'
+                              />
+                            )
+                          }
+                        </div>
+                      </div>
+                    )
+                  })
+                }
+              </div>
+            )
+          }
+          {
+            props.button && (
+              <HDSButton
+                label={props.button.cta_text}
+                type='secondary'
+                leftIconVariant='none'
+                rightIconVariant='none'
+                state='default'
+                size='md'
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor='#3970FD'
+            />
+            )
+          }
+        </div>
+        <div>
+          {
+            props.img_url && (
+              <img src={props.img_url} alt={props.title} />
+            )
+          }
+        </div>
+      </div>
+    </>
+  )
+}

package/src/HDS/modules/index.js

@@ -0,0 +1 @@
+export * from './TextCard';