hds-web 1.0.0 → 1.0.2

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

@@ -0,0 +1,189 @@
+import { useState, useEffect } from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from "../Buttons";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { Icon } from "../common-components";
+
+export default function Hero({ 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 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={"db:px-28 db:py-20 db:pr-0 tb-l:self-center tb-l:min-w-[400px] mx-auto db:ml-0 db:max-w-[625px] db:min-w-[625px] p-5 pt-10 z-[1] tb:p-16 tb-l:py-12" + ((heroData.video_url) ? " tb:max-w-[530px]" : " tb:ml-0 tb:max-w-[290px] tb:min-w-[310px] tb:pr-0")}
+              >
+                {
+                  heroData.tag_line && (
+                    <div
+
+                    >
+                      <Typography textStyle="h6" as="h6" className={"pb-6 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>
+                  )
+                }
+                {
+                  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>
+                  )
+                }
+                {
+                  heroData.sub_title && (
+                    <div
+
+                    >
+                      <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>
+                    </div>
+                  )
+                }
+                {
+                  heroData.description && (
+                    <div
+
+                    >
+                      <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>
+                    </div>
+                  )
+                }
+                {
+                  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>
+                  )
+                }
+              </div>
+              {
+                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/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg"
+                      width="500"
+                      height="500"
+                      className={"tb:w-full w-full db:max-w-[500px]" + ((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>
+                )
+              }
+            </div>
+          </div>
+        </div>
+        {
+          scrollArrow && (
+            <div className=" hidden tb-l:block translate-y-[-20px]">
+              <div className="px-6 flex justify-center pb-16 animate-bounce h-6 grid-cols-3">
+                <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g filter="url(#filter0_dd_1052_3729)">
+                    <circle cx="30" cy="26" r="24" fill="white" />
+                    <path d="M25 27L30 32L35 27M25 20L30 25L35 20" stroke="#1F2A37" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                  </g>
+                  <defs>
+                    <filter id="filter0_dd_1052_3729" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                      <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                      <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1052_3729" />
+                      <feOffset dy="2" />
+                      <feGaussianBlur stdDeviation="2" />
+                      <feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.14902 0 0 0 0 0.247059 0 0 0 0.06 0" />
+                      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1052_3729" />
+                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                      <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1052_3729" />
+                      <feOffset dy="4" />
+                      <feGaussianBlur stdDeviation="4" />
+                      <feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.14902 0 0 0 0 0.247059 0 0 0 0.1 0" />
+                      <feBlend mode="normal" in2="effect1_dropShadow_1052_3729" result="effect2_dropShadow_1052_3729" />
+                      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1052_3729" result="shape" />
+                    </filter>
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  );
+}

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="px-20 py-20">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} />
+      </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={"db:px-20 db:py-20 db:pr-0 tb-l:self-center tb-l:min-w-[400px] mx-auto db:ml-0 db:max-w-[625px] db:min-w-[625px] p-5 pt-10 z-[1] tb:p-16 tb-l:py-12" + ((heroData.video_url) ? " tb:max-w-[530px]" : " tb:ml-0 tb:max-w-[290px] tb:min-w-[310px] tb:pr-0")}
+              >
+                {
+                  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

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

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

@@ -1,70 +1,70 @@
-// import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import 'prismjs/components/prism-javascript';
 
-// import Prism from 'prismjs';
-// import 'prismjs/themes/prism.css';
-// import 'prismjs/components/prism-javascript';
+function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
 
-// function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
-
-//   if(!snippet){
-//     snippet='as'
-//   }
+  if(!snippet){
+    snippet='as'
+  }
  
-//   const [isCopied, setIsCopied] = useState(false);
-//   const preRef = useRef(null);
+  const [isCopied, setIsCopied] = useState(false);
+  const preRef = useRef(null);
 
-//   async function copyToClipboard() {
-//     try {
-//       await navigator.clipboard.writeText(snippet);
-//       setIsCopied(true);
-//       setTimeout(() => setIsCopied(false), 1500);
-//     } catch (error) {
-//       console.error('Failed to copy to clipboard', error);
-//     }
-//   }
+  async function copyToClipboard() {
+    try {
+      await navigator.clipboard.writeText(snippet);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 1500);
+    } catch (error) {
+      console.error('Failed to copy to clipboard', error);
+    }
+  }
 
   
-//   useEffect(() => {
-//     console.log(snippet)
-//     if (preRef.current ) {
-//       Prism.highlightAll();
-//     }
-//   }, [snippet, preRef.current]);
+  useEffect(() => {
+    console.log(snippet)
+    if (preRef.current ) {
+      Prism.highlightAll();
+    }
+  }, [snippet, preRef.current]);
 
 
-//   const lines = snippet.split('\n');
-//   const lineCount = lines.length;
-//   if(snippet){}
-//   return (
-//     <div className={`${backgroundColor}  border border-neutral-100 rounded relative`}>
-//       {filename ? (
-//         <span className='bg-neutral-100 flex p-2 text-sm-medium text-neutral-900'>{filename}</span>
-//       ) : null}
+  const lines = snippet.split('\n');
+  const lineCount = lines.length;
+  if(snippet){}
+  return (
+    <div className={`${backgroundColor}  border border-neutral-100 rounded relative`}>
+      {filename ? (
+        <span className='bg-neutral-100 flex p-2 text-sm-medium text-neutral-900'>{filename}</span>
+      ) : null}
 
-//       <div className='my-6 mx-10'>
-//         <pre style={{ whiteSpace: 'pre-wrap' }} ref={preRef} className='line-numbers'>
-//           {lines.map((line, index) => (
-//             <code className='language-javascript' key={index}>
-//               <span className='text-sm text-neutral-500 mr-4'>{index + 1}  </span>
-//               {line}
-//               {index < lineCount - 1 ? '\n' : null}
-//             </code>
-//           ))}
-//         </pre>
+      <div className='my-6 mx-10'>
+        <pre style={{ whiteSpace: 'pre-wrap' }} ref={preRef} className='line-numbers'>
+          {lines.map((line, index) => (
+            <code className='language-javascript' key={index}>
+              <span className='text-sm text-neutral-500 mr-4'>{index + 1}  </span>
+              {line}
+              {index < lineCount - 1 ? '\n' : null}
+            </code>
+          ))}
+        </pre>
 
-//         <button
-//           className='border border-neutral-400 button-sm absolute bottom-0 right-0 mb-4 mr-4'
-//           onClick={copyToClipboard}
-//         >
-//           {isCopied ? 'Copied!' : 'Copy to Clipboard'}
-//         </button>
-//       </div>
-//     </div>
-//   );
-// }
+        <button
+          className='border border-neutral-400 button-sm absolute bottom-0 right-0 mb-4 mr-4'
+          onClick={copyToClipboard}
+        >
+          {isCopied ? 'Copied!' : 'Copy to Clipboard'}
+        </button>
+      </div>
+    </div>
+  );
+}
 
-// // CodeSnippetWithCopy.propTypes = {
-// //   snippet: PropTypes.string.isRequired,
-// // };
+// CodeSnippetWithCopy.propTypes = {
+//   snippet: PropTypes.string.isRequired,
+// };
 
-// export default CodeSnippetWithCopy;
+export default CodeSnippetWithCopy;

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

@@ -1 +1 @@
-// export {default as CodeSnippet} from './CodeSnippet';
+export {default as CodeSnippet} from './CodeSnippet';

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,86 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Typography } from '../../foundation/Typography'
+
+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">
+                    <table className="min-w-full divide-y divide-gray-300 border">
+                        <thead>
+                            <tr>
+                                {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"
+                                    >
+                                        {}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-200 bg-white">
+                            {TABLE_VALUE.map((value) => (
+                                <tr key={uuidv4()}>
+                                    {Object.keys(value).map((key) => (
+                                        <td
+                                            key={uuidv4()}
+                                            className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
+                                        >
+                                            {``}{value[key]}
+
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}

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

@@ -1,5 +1,7 @@
 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"
 import {ReactComponent as PassportIcon } from "../../../assets/icons/passport.svg"
 import {ReactComponent as Compass02Icon } from "../../../assets/icons/compass-02.svg"
@@ -1175,6 +1177,7 @@ import {ReactComponent as Minus01Icon } from "../../../assets/icons/minus-01.svg
 import {ReactComponent as HasuraIcon } from "../../../assets/icons/hasura.svg"
 
 const iconReferenceMap = {
+    hasuraPrimary: HasuraPrimaryIcon,
     hasura: HasuraIcon,
     minus01: Minus01Icon,
     clockrewind: ClockrewindIcon,
@@ -2349,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>
     );
@@ -2362,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/components/index.js

@@ -10,4 +10,5 @@ export * from './common-components';
 export * from './InputFields';
 export * from './Snippet';
 export * from './Tabs';
-export * from './Tooltip';
+export * from './Tooltip';
+export * from './Hero';