hds-web 1.6.6 → 1.6.8

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

@@ -1,22 +1,11 @@
 import React, { useState, useRef } from 'react';
-import { HDSColor } from '../../foundation/ColorPalette';
 import { Typography } from '../../foundation/Typography'
-import PropTypes from 'prop-types';
 
 export default function Tab(props) {
-  const {
-    tabs,
-    onTabClick,
-    pillColor,
-  } = props;
+  const { tabs, onTabClick } = props;
   const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
   const pillRef = useRef(null);
-  let pillColorClass = '';
-  if(pillColor){
-     pillColorClass = HDSColor(pillColor);
-  }
- 
-  
+
   const handleTabClick = (event, clickedTab) => {
     event.preventDefault();
     setActiveTab(clickedTab);
@@ -30,51 +19,35 @@ export default function Tab(props) {
       const pillWidth = event.currentTarget.offsetWidth;
       const clickedTabOffset = event.currentTarget.offsetLeft;
       const pillOffset = pill.parentElement.offsetLeft;
-      const translateX = clickedTabOffset;
+      const translateX = clickedTabOffset ;
 
       pill.style.transform = `translateX(${translateX}px)`;
       pill.style.width = `${pillWidth}px`;
     }
   };
-  let tabTextClass = ''; 
-
-  function tabClass(name) {
-    
-    // console.log(currentTab['tabTextColorClass']);
-    
-    if(activeTab['tabTextColorClass']){
-      tabTextClass = HDSColor(activeTab['tabTextColorClass']);
-    }
-    else tabTextClass = 'text-neutral-500'
 
-    let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
-    let clasnInActive = ' flex-nowrap rounded-full ' + tabTextClass;
-    if (activeTab.name === name) {
-      return classActive;
-    }
-    else {
-      return clasnInActive;
-    }
-  }
   return (
-    <div className=''>
+    <div>
       <div className="block">
-        <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
+        <nav className="relative inline-flex gap-2  p-2 rounded-full" aria-label="Tabs">
           {tabs.map(tab => (
-            <div
+            <a
               key={tab.name}
+              href="#"
+              className={`px-3 py-1 font-medium text-sm rounded-full ${
+                activeTab === tab
+                  ? ' first:bg-blue-500  text-neutral-0 transition-all  delay-100 duration-100 '
+                  : 'text-neutral-500 transition-all delay-200  flex-nowrap '
+              }`}
+              aria-current={activeTab === tab ? 'page' : undefined}
               onClick={(event) => handleTabClick(event, tab)}
             >
-              <Typography 
-              className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
-              textStyle='body3c-medium'>
-                {tab.name}
-              </Typography>
-            </div>
+              <Typography className='z-[2] relative whitespace-nowrap' textStyle='body3c-medium'>{tab.name}</Typography>
+            </a>
           ))}
           <span
             ref={pillRef}
-            className={`absolute left-0 z-[1] ${pillColorClass} rounded-full transition-all ease-in duration-150`}
+            className="absolute left-0 z-[1] bg-blue-500 rounded-full transition-all ease-in-out duration-700"
             style={{
               left: `${activeTab.index * 100}%`,
               width: `${activeTab.width}px`, // Use the width of the clicked tab
@@ -86,7 +59,3 @@ export default function Tab(props) {
     </div>
   );
 }
-
-Tab.defaultProps = {
-  pillColor: 'bg-blue-500',
-}

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

@@ -1,9 +1,6 @@
 import React from 'react';
 import {HDSColor} from '../../../foundation/ColorPalette';
 import PropTypes from 'prop-types';
-import {ReactComponent as Hasura1Icon } from "../../../assets/icons/hasura-1.svg"
-import {ReactComponent as Hasura2Icon } from "../../../assets/icons/hasura-2.svg"
-import {ReactComponent as Hasura3Icon } from "../../../assets/icons/hasura-3.svg"
 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"
@@ -1180,9 +1177,6 @@ import {ReactComponent as Minus01Icon } from "../../../assets/icons/minus-01.svg
 import {ReactComponent as HasuraIcon } from "../../../assets/icons/hasura.svg"
 
 const iconReferenceMap = {
-    hasura1: Hasura1Icon,
-    hasura2: Hasura2Icon,
-    hasura3: Hasura3Icon,
     hasuraPrimary: HasuraPrimaryIcon,
     hasura: HasuraIcon,
     minus01: Minus01Icon,

package/src/HDS/components/index.js

@@ -12,5 +12,4 @@ export * from './Snippet';
 export * from './Tabs';
 export * from './Tooltip';
 export * from './Hero';
-export * from './Tables';
-export * from './Carousels';
+export * from './Tables';

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

@@ -574,199 +574,7 @@ const HDSColors = {
     "stroke-red-500": "stroke-red-500",
     "stroke-red-600": "stroke-red-600",
     "stroke-red-700": "stroke-red-700",
-    "stroke-red-800": "stroke-red-800",
-    "hover:bg-storybook-default-heading": "hover:bg-storybook-default-heading",
-    "hover:bg-base-0": "hover:bg-base-0",
-    "hover:bg-base-1000": "hover:bg-base-1000",
-    "hover:bg-neutral-0": "hover:bg-neutral-0",
-    "hover:bg-neutral-50": "hover:bg-neutral-50",
-    "hover:bg-neutral-100": "hover:bg-neutral-100",
-    "hover:bg-neutral-150": "hover:bg-neutral-150",
-    "hover:bg-neutral-200": "hover:bg-neutral-200",
-    "hover:bg-neutral-300": "hover:bg-neutral-300",
-    "hover:bg-neutral-400": "hover:bg-neutral-400",
-    "hover:bg-neutral-500": "hover:bg-neutral-500",
-    "hover:bg-neutral-600": "hover:bg-neutral-600",
-    "hover:bg-neutral-700": "hover:bg-neutral-700",
-    "hover:bg-neutral-800": "hover:bg-neutral-800",
-    "hover:bg-neutral-850": "hover:bg-neutral-850",
-    "hover:bg-neutral-900": "hover:bg-neutral-900",
-    "hover:bg-neutral-950": "hover:bg-neutral-950",
-    "hover:bg-neutral-1000": "hover:bg-neutral-1000",
-    "hover:bg-blue-100": "hover:bg-blue-100",
-    "hover:bg-blue-200": "hover:bg-blue-200",
-    "hover:bg-blue-300": "hover:bg-blue-300",
-    "hover:bg-blue-400": "hover:bg-blue-400",
-    "hover:bg-blue-500": "hover:bg-blue-500",
-    "hover:bg-blue-600": "hover:bg-blue-600",
-    "hover:bg-blue-700": "hover:bg-blue-700",
-    "hover:bg-blue-800": "hover:bg-blue-800",
-    "hover:bg-blue-900": "hover:bg-blue-900",
-    "hover:bg-purple-100": "hover:bg-purple-100",
-    "hover:bg-purple-200": "hover:bg-purple-200",
-    "hover:bg-purple-300": "hover:bg-purple-300",
-    "hover:bg-purple-400": "hover:bg-purple-400",
-    "hover:bg-purple-500": "hover:bg-purple-500",
-    "hover:bg-purple-600": "hover:bg-purple-600",
-    "hover:bg-purple-700": "hover:bg-purple-700",
-    "hover:bg-purple-800": "hover:bg-purple-800",
-    "hover:bg-purple-900": "hover:bg-purple-900",
-    "hover:bg-cyan-100": "hover:bg-cyan-100",
-    "hover:bg-cyan-200": "hover:bg-cyan-200",
-    "hover:bg-cyan-300": "hover:bg-cyan-300",
-    "hover:bg-cyan-400": "hover:bg-cyan-400",
-    "hover:bg-cyan-500": "hover:bg-cyan-500",
-    "hover:bg-cyan-600": "hover:bg-cyan-600",
-    "hover:bg-cyan-700": "hover:bg-cyan-700",
-    "hover:bg-cyan-800": "hover:bg-cyan-800",
-    "hover:bg-cyan-900": "hover:bg-cyan-900",
-    "hover:bg-green-100": "hover:bg-green-100",
-    "hover:bg-green-200": "hover:bg-green-200",
-    "hover:bg-green-300": "hover:bg-green-300",
-    "hover:bg-green-400": "hover:bg-green-400",
-    "hover:bg-green-500": "hover:bg-green-500",
-    "hover:bg-green-600": "hover:bg-green-600",
-    "hover:bg-green-700": "hover:bg-green-700",
-    "hover:bg-green-800": "hover:bg-green-800",
-    "hover:bg-green-900": "hover:bg-green-900",
-    "hover:bg-pink-100": "hover:bg-pink-100",
-    "hover:bg-pink-200": "hover:bg-pink-200",
-    "hover:bg-pink-300": "hover:bg-pink-300",
-    "hover:bg-pink-400": "hover:bg-pink-400",
-    "hover:bg-pink-500": "hover:bg-pink-500",
-    "hover:bg-pink-600": "hover:bg-pink-600",
-    "hover:bg-pink-700": "hover:bg-pink-700",
-    "hover:bg-pink-800": "hover:bg-pink-800",
-    "hover:bg-pink-900": "hover:bg-pink-900",
-    "hover:bg-amber-100": "hover:bg-amber-100",
-    "hover:bg-amber-200": "hover:bg-amber-200",
-    "hover:bg-amber-300": "hover:bg-amber-300",
-    "hover:bg-amber-400": "hover:bg-amber-400",
-    "hover:bg-amber-500": "hover:bg-amber-500",
-    "hover:bg-amber-600": "hover:bg-amber-600",
-    "hover:bg-amber-700": "hover:bg-amber-700",
-    "hover:bg-amber-800": "hover:bg-amber-800",
-    "hover:bg-amber-900": "hover:bg-amber-900",
-    "hover:bg-yellow-100": "hover:bg-yellow-100",
-    "hover:bg-yellow-200": "hover:bg-yellow-200",
-    "hover:bg-yellow-300": "hover:bg-yellow-300",
-    "hover:bg-yellow-400": "hover:bg-yellow-400",
-    "hover:bg-yellow-500": "hover:bg-yellow-500",
-    "hover:bg-yellow-600": "hover:bg-yellow-600",
-    "hover:bg-yellow-700": "hover:bg-yellow-700",
-    "hover:bg-yellow-800": "hover:bg-yellow-800",
-    "hover:bg-orange-100": "hover:bg-orange-100",
-    "hover:bg-orange-200": "hover:bg-orange-200",
-    "hover:bg-orange-300": "hover:bg-orange-300",
-    "hover:bg-orange-400": "hover:bg-orange-400",
-    "hover:bg-orange-500": "hover:bg-orange-500",
-    "hover:bg-orange-600": "hover:bg-orange-600",
-    "hover:bg-orange-700": "hover:bg-orange-700",
-    "hover:bg-orange-800": "hover:bg-orange-800",
-    "hover:bg-red-100": "hover:bg-red-100",
-    "hover:bg-red-200": "hover:bg-red-200",
-    "hover:bg-red-300": "hover:bg-red-300",
-    "hover:bg-red-400": "hover:bg-red-400",
-    "hover:bg-red-500": "hover:bg-red-500",
-    "hover:bg-red-600": "hover:bg-red-600",
-    "hover:bg-red-700": "hover:bg-red-700",
-    "hover:bg-red-800": "hover:bg-red-800",
-    "border-storybook-default-heading": "border-storybook-default-heading",
-"border-base-0": "border-base-0",
-"border-base-1000": "border-base-1000",
-"border-neutral-0": "border-neutral-0",
-"border-neutral-50": "border-neutral-50",
-"border-neutral-100": "border-neutral-100",
-"border-neutral-150": "border-neutral-150",
-"border-neutral-200": "border-neutral-200",
-"border-neutral-300": "border-neutral-300",
-"border-neutral-400": "border-neutral-400",
-"border-neutral-500": "border-neutral-500",
-"border-neutral-600": "border-neutral-600",
-"border-neutral-700": "border-neutral-700",
-"border-neutral-800": "border-neutral-800",
-"border-neutral-850": "border-neutral-850",
-"border-neutral-900": "border-neutral-900",
-"border-neutral-950": "border-neutral-950",
-"border-neutral-1000": "border-neutral-1000",
-"border-blue-100": "border-blue-100",
-"border-blue-200": "border-blue-200",
-"border-blue-300": "border-blue-300",
-"border-blue-400": "border-blue-400",
-"border-blue-500": "border-blue-500",
-"border-blue-600": "border-blue-600",
-"border-blue-700": "border-blue-700",
-"border-blue-800": "border-blue-800",
-"border-blue-900": "border-blue-900",
-"border-purple-100": "border-purple-100",
-"border-purple-200": "border-purple-200",
-"border-purple-300": "border-purple-300",
-"border-purple-400": "border-purple-400",
-"border-purple-500": "border-purple-500",
-"border-purple-600": "border-purple-600",
-"border-purple-700": "border-purple-700",
-"border-purple-800": "border-purple-800",
-"border-purple-900": "border-purple-900",
-"border-cyan-100": "border-cyan-100",
-"border-cyan-200": "border-cyan-200",
-"border-cyan-300": "border-cyan-300",
-"border-cyan-400": "border-cyan-400",
-"border-cyan-500": "border-cyan-500",
-"border-cyan-600": "border-cyan-600",
-"border-cyan-700": "border-cyan-700",
-"border-cyan-800": "border-cyan-800",
-"border-cyan-900": "border-cyan-900",
-"border-green-100": "border-green-100",
-"border-green-200": "border-green-200",
-"border-green-300": "border-green-300",
-"border-green-400": "border-green-400",
-"border-green-500": "border-green-500",
-"border-green-600": "border-green-600",
-"border-green-700": "border-green-700",
-"border-green-800": "border-green-800",
-"border-green-900": "border-green-900",
-"border-pink-100": "border-pink-100",
-"border-pink-200": "border-pink-200",
-"border-pink-300": "border-pink-300",
-"border-pink-400": "border-pink-400",
-"border-pink-500": "border-pink-500",
-"border-pink-600": "border-pink-600",
-"border-pink-700": "border-pink-700",
-"border-pink-800": "border-pink-800",
-"border-pink-900": "border-pink-900",
-"border-amber-100": "border-amber-100",
-"border-amber-200": "border-amber-200",
-"border-amber-300": "border-amber-300",
-"border-amber-400": "border-amber-400",
-"border-amber-500": "border-amber-500",
-"border-amber-600": "border-amber-600",
-"border-amber-700": "border-amber-700",
-"border-amber-800": "border-amber-800",
-"border-amber-900": "border-amber-900",
-"border-yellow-100": "border-yellow-100",
-"border-yellow-200": "border-yellow-200",
-"border-yellow-300": "border-yellow-300",
-"border-yellow-400": "border-yellow-400",
-"border-yellow-500": "border-yellow-500",
-"border-yellow-600": "border-yellow-600",
-"border-yellow-700": "border-yellow-700",
-"border-yellow-800": "border-yellow-800",
-"border-orange-100": "border-orange-100",
-"border-orange-200": "border-orange-200",
-"border-orange-300": "border-orange-300",
-"border-orange-400": "border-orange-400",
-"border-orange-500": "border-orange-500",
-"border-orange-600": "border-orange-600",
-"border-orange-700": "border-orange-700",
-"border-orange-800": "border-orange-800",
-"border-red-100": "border-red-100",
-"border-red-200": "border-red-200",
-"border-red-300": "border-red-300",
-"border-red-400": "border-red-400",
-"border-red-500": "border-red-500",
-"border-red-600": "border-red-600",
-"border-red-700": "border-red-700",
-"border-red-800": "border-red-800",
+    "stroke-red-800": "stroke-red-800"
 };
 
 export default function HDSColor(color = '') {

package/src/HDS/foundation/Typography/Typography.js

@@ -16,7 +16,6 @@ export default function Typography(props) {
         'h4': 'text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
         'h5': 'text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
         'h6': 'text-hds-m-h6 tb:text-hds-t-h6 db:text-hds-d-h6',
-        'h7': 'text-hds-m-h7 tb:text-hds-t-h7 db:text-hds-d-h7',
         'sub1': 'text-hds-m-sub1 tb:text-hds-t-sub1 db:text-hds-d-sub1',
         'sub2': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
         'body1': 'text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1',
@@ -43,7 +42,7 @@ export default function Typography(props) {
         'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
         'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
         'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
-        'quote': 'font-petrona italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
+        'quote': 'text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
         'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
         'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
       }

package/src/HDS/helpers/index.js

@@ -1,2 +1 @@
-export * from './Translations';
-export * from './Media';
+export * from './Translations';

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

@@ -20,7 +20,7 @@ export default function TextCard(props) {
           }
           {
             props.descriptions && props.descriptions.map((desc, i) => (
-              <Typography key={i} textStyle="body1" className="pb-6">{desc.description}</Typography>
+              <Typography key={i} textStyle="body1" className="pb-6 pr-8">{desc.description}</Typography>
             ))
           }
           {
@@ -57,7 +57,7 @@ export default function TextCard(props) {
                     const imgBgColor = HDSColor(list.tab_img_bg_class)
                     return (
                       <div className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={()=>setImgActive(list.title)}>
-                        <div className={'m-2 p-0 tb:p-6 rounded-lg transition-all ease-in duration-75 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-100" : "")} key={i}>
+                        <div className={'m-2 p-0 tb:p-6 rounded-lg transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
                           <div className='flex items-center pb-4'>
                             <Icon
                               height={`w-6 h-6 mr-2 stroke-[1.5px]` }
@@ -106,7 +106,7 @@ export default function TextCard(props) {
                           {
                             list.tab_img_url && (
                               <div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
-                                <img src={list.tab_img_url} alt={list.title} />
+                                <img src={list.tab_img_url} alt={list.title} loading="lazy"/>
                               </div>
                             )
                           }
@@ -143,7 +143,31 @@ export default function TextCard(props) {
                   return (
                     <Fragment key={i}>
                       {
-                        imgActive === img.title && img.tab_img_url && (<div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center  rounded-2xl tb-l:rounded-s-none`}><img src={img.tab_img_url} alt={img.title} /></div>)
+                        imgActive === img.title && (
+                          <div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center rounded-2xl tb-l:rounded-s-none`}>
+                            {
+                              img.tab_video_url ? (
+                                <video
+                                  loading="lazy"
+                                  controls={false}
+                                  autoPlay
+                                  loop
+                                  muted
+                                  poster={img.tab_video_poster}
+                                  className=""
+                                >
+                                  <source
+                                    src={img.tab_video_url}
+                                    type="video/mp4"
+                                  />
+                                </video>
+                              ) : (
+                                <img src={img.tab_img_url} alt={img.title} loading="lazy"/>
+                              )
+                            }
+
+                          </div>
+                        )
                       }
                     </Fragment>
                   )
@@ -152,9 +176,48 @@ export default function TextCard(props) {
             </>
           ) : (
               <div>
-              {props.img_url && (
-                <img src={props.img_url} alt={props.title} />
-              )}
+                {
+                  props.iframe_url || props.video_url ? (
+                    <>
+                      {
+                        props.iframe_url ? (
+                          <div className="relative pb-[56.2%]">
+                            <iframe
+                              loading="lazy"
+                              title={props.title}
+                              src={props.iframe_url}
+                              frameBorder="0"
+                              allowFullScreen
+                              className="absolute w-full h-full"
+                            ></iframe>
+                          </div>
+                        ) : (
+                          <video
+                            loading="lazy"
+                            controls={false}
+                            autoPlay
+                            loop
+                            muted
+                            poster={props.video_poster}
+                            className=""
+                          >
+                            <source
+                              src={props.video_url}
+                              type="video/mp4"
+                            />
+                          </video>
+                        )
+                      }
+                    </>
+                  ) : (
+                    <>
+                      {props.img_url && (
+                        <img src={props.img_url} alt={props.title} loading="lazy" />
+                      )}
+                    </>
+                  )
+                }
+
               </div>
           )
         }
@@ -162,4 +225,4 @@ export default function TextCard(props) {
 
     </>
   )
-}
+}

package/src/HDS/modules/index.js

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

package/src/index.css

@@ -3,15 +3,6 @@
 @tailwind utilities;
 /* Typography classes */
 
-.gridAutoClass {
-  flex: 1 0 30%;
-  margin-top: 40px;
-  margin-right: 32px;
-  background: blue;
-  justify-content: center;
-  display: flex;
-}
-
 @keyframes pill-move-left {
   0% {
     left: 0;
@@ -405,33 +396,4 @@
 
 .token.operator {
     background: none !important;
-}
-
-
-.border-80 {
-  position: relative;
-}
-
-.border-80::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 8%;
-  width: 80%;
-  border-bottom: 1px solid #E5E7EB;
-}
-
-.border-90 {
-  position: relative;
-}
-
-.border-90::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  border-bottom: 1px solid rgb(255, 255, 255);
-}
-
-
+}