hds-web 1.5.2 → 1.5.4

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

@@ -7,27 +7,28 @@ import { Tab } from '../../components/Tabs';
 import PropTypes from 'prop-types';
 import { LinkCard } from '../Cards/Link';
 
-const tabCard = (tabContent) => (
+
+const tabCard = (Content) => (
     <>
         <div className='tb:px-3'>
-            {tabContent.title &&
+            {Content.title &&
                 <Typography
                     textStyle='h2'
-                    className={HDSColor(tabContent.title_color)}>
-                    {tabContent.title}
+                    className={HDSColor(Content.titleTextColor)}>
+                    {Content.title}
                 </Typography>}
 
-            {tabContent.sub_title &&
+            {Content.subTitle &&
                 <Typography
                     textStyle='sub2'
-                    className={`mt-2 ${HDSColor(tabContent.sub_title_color)}`}>
-                    {tabContent.sub_title}
+                    className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
+                    {Content.subTitle}
                 </Typography>}
         </div>
-        {tabContent.btnLabel &&
+        {Content.btnLabel &&
             <div className='flex pl-3 pt-6'>
                 <HDSButton
-                    label={tabContent.btnLabel}
+                    label={Content.btnLabel}
                     type='secondary'
                     leftIconVariant='none'
                     rightIconVariant='none'
@@ -46,15 +47,16 @@ const tabCard = (tabContent) => (
 )
 
 export default function HeroCapability(props) {
+    console.log(props.heroData);
 
     const LinkCardsFn = (heroData) => {
         return (
           heroData.linkCards && (
-            <div className="flex px-8 tb:px-0 tb:justify-center overflow-scroll flex-row mt-16 gap-6 tb:flex-row ">
+            <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
               {heroData.linkCards.map((card, index) => (
                 <div key={index} className="w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]">
                   <LinkCard
-                  titleTextColor= {card.titleTextColor}
+                    titleTextColor= {card.titleTextColor}
                     descTextColor={card.descTextColor}
                     linkUrl={card.linkUrl}
                     cardBgColor={card.cardBgColor}
@@ -90,38 +92,45 @@ export default function HeroCapability(props) {
         else return;
         // Perform any other actions based on the clicked tab
     }
-    let bgClass = '';
+    let heroBgColorClass = '';
     let bgTabClass = '';
-    let video_url = '';
-    let video_poster = '';
+    let videoUrl = '';
+    let videoPoster = '';
     let img_url = '';
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color']){
-        bgClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color'])
+    let pillColorClass= '';
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['heroBgColor']){
+        heroBgColorClass = HDSColor(props.heroData.tabContent[activeTab]['heroBgColor'])
     }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color_tab']){
-        bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color_tab'])
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bgColorTab']){
+        bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bgColorTab'])
     }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_url']){
-        video_url = props.heroData.tabContent[activeTab]['video_url']
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoUrl']){
+        videoUrl = props.heroData.tabContent[activeTab]['videoUrl']
     }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_poster']){
-        video_poster = props.heroData.tabContent[activeTab]['video_poster']
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoPoster']){
+        videoPoster = props.heroData.tabContent[activeTab]['videoPoster']
     }
     if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['img_url']){
         img_url = props.heroData.tabContent[activeTab]['img_url']
     }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['pillColor']){
+        pillColorClass = props.heroData.tabContent[activeTab]['pillColor']
+    }
 
     return (
-        <div className={`${bgClass} max-w-7xl rounded-3xl`} >
+        <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl`} >
+    {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
             {props.heroData.navTabs &&
 
                 <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
 
                     <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
-                        <div className={`${bgTabClass}  rounded-[32px]`}>
+                        <div className={`${bgTabClass} p-1 rounded-[32px]`}>
                             <Tab
                                 onTabClick={handleTabClick}
                                 tabs={props.heroData.navTabs}
+                                bgColorTab={props.heroData.bgColorTab}
+                                pillColor={pillColorClass}
                             />
                         </div>
                     </div>
@@ -133,15 +142,16 @@ export default function HeroCapability(props) {
                         </div>
                         <div className=' db:max-w-[540px] tb:w-1/2 '>
                             <MediaBox
-                                video_url = {video_url}
-                                video_poster = {video_poster}
-                                img_url = {img_url}
+                                video_url = {videoUrl}
+                                video_poster = {videoPoster}
+                               
                             />
                         </div>
                     </div>
 
                     <div>
-                        {LinkCardsFn(props.heroData)}
+                        {props.heroData.tabContent[activeTab] &&
+                            LinkCardsFn(props.heroData.tabContent[activeTab])}
                      </div>   
                 </div>
 

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

@@ -7,9 +7,9 @@ import { Tab } from '../Tabs'
 import ReactMarkdown from "react-markdown";
 
 const tabs = [
-    { name: 'Level 1', href: '', current: true },
-    { name: 'Level 2', href: '', current: false },
-    { name: 'Level 3', href: '', current: false },
+    { name: 'Tier 1', href: '', current: true },
+    { name: 'Tier 2', href: '', current: false },
+    { name: 'Tier 3', href: '', current: false },
 ]
 
 
@@ -66,9 +66,9 @@ export default function TableB(props) {
     const [activeTab, setActiveTab] = useState(1);
 
     function handleTabClick(tab) {
-        if (tab.name === 'Level 1') setActiveTab(1);
-        if (tab.name === 'Level 2') setActiveTab(2);
-        if (tab.name === 'Level 3') setActiveTab(3);
+        if (tab.name === 'Tier 1') setActiveTab(1);
+        if (tab.name === 'Tier 2') setActiveTab(2);
+        if (tab.name === 'Tier 3') setActiveTab(3);
         // Perform any other actions based on the clicked tab
     }
 
@@ -179,7 +179,7 @@ export default function TableB(props) {
                                     >
                                         <div className=''>
                                             <div className='flex flex-col justify-center items-center text-center'>
-                                                <div className={'flex items-center gap-2'}>
+                                                <div className={'flex items-center gap-2 w-full justify-center'}>
                                                     {TABLE_HEADER[key]['icon'] &&
                                                         (
                                                             <Icon
@@ -192,7 +192,7 @@ export default function TableB(props) {
                                                         TABLE_HEADER[key]['title'] && key == 0 && (
                                                             <Typography
                                                                 textStyle='h5'
-                                                                className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
+                                                                className={`w-full text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
                                                                 {TABLE_HEADER[key]['title']}
                                                             </Typography>)
                                                     }

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

@@ -54,7 +54,7 @@ const levelCalc = (arr, index) => {
 
 }
 
-export default function TableB(props) {
+export default function TablePlatform(props) {
     const {
         title,
         title_color,
@@ -375,7 +375,7 @@ export default function TableB(props) {
     )
 }
 
-TableB.defaultProps = {
+TablePlatform.defaultProps = {
     title_color: 'text-blue-800',
     desc_color: 'text-blue-600'
 }

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

@@ -1,11 +1,22 @@
 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 } = props;
+  const {
+    tabs,
+    onTabClick,
+    pillColor
+
+  } = 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);
@@ -19,35 +30,41 @@ 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`;
     }
   };
 
+  function tabClass(name) {
+    let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
+    let clasnInActive = ' text-neutral-500 flex-nowrap rounded-full';
+
+    console.log(classActive, clasnInActive, 'heeelo');
+
+    if (activeTab.name === name) {
+      return classActive;
+    }
+    else {
+      return clasnInActive;
+    }
+  }
   return (
     <div className=''>
       <div className="block">
         <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
           {tabs.map(tab => (
-            <a
+            <div
               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'
-                  : 'text-neutral-500 transition-all flex-nowrap '
-              }`}
-              aria-current={activeTab === tab ? 'page' : undefined}
               onClick={(event) => handleTabClick(event, tab)}
             >
-              <Typography className='z-[2] relative whitespace-nowrap' textStyle='body3c-medium'>{tab.name}</Typography>
-            </a>
+              <Typography className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} textStyle='body3c-medium'>{tab.name}</Typography>
+            </div>
           ))}
           <span
             ref={pillRef}
-            className="absolute left-0 z-[1] bg-blue-500 rounded-full transition-all ease-in-out duration-300"
+            className={`absolute left-0 z-[1] ${pillColorClass} rounded-full transition-all ease-in duration-150`}
             style={{
               left: `${activeTab.index * 100}%`,
               width: `${activeTab.width}px`, // Use the width of the clicked tab
@@ -59,3 +76,7 @@ export default function Tab(props) {
     </div>
   );
 }
+
+Tab.defaultProps = {
+  pillColor: 'bg-blue-500'
+}

package/src/styles/tailwind.css

@@ -1868,10 +1868,6 @@ select {
   gap: 3rem;
 }
 
-.gap-16 {
-  gap: 4rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
@@ -2003,6 +1999,12 @@ select {
   margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-x > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-x-reverse: 0;
   border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -2816,6 +2818,10 @@ select {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
 .from-amber-100 {
   --tw-gradient-from: #FFF3D4 var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
@@ -5460,14 +5466,6 @@ select {
   padding-top: 1.5rem;
 }
 
-.pt-8 {
-  padding-top: 2rem;
-}
-
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -6469,6 +6467,10 @@ select {
   transition-duration: 500ms;
 }
 
+.duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -7425,11 +7427,6 @@ select {
   border-bottom-left-radius: 9999px;
 }
 
-.first\:bg-blue-500:first-child {
-  --tw-bg-opacity: 1;
-  background-color: rgb(57 112 253 / var(--tw-bg-opacity));
-}
-
 .last\:mr-0:last-child {
   margin-right: 0px;
 }
@@ -8289,10 +8286,6 @@ select {
     border-right-width: 1px;
   }
 
-  .tb\:border-t {
-    border-top-width: 1px;
-  }
-
   .tb\:border-r-neutral-150 {
     --tw-border-opacity: 1;
     border-right-color: rgb(236 237 240 / var(--tw-border-opacity));
@@ -8330,6 +8323,10 @@ select {
     padding-right: 2rem;
   }
 
+  .tb\:pb-0 {
+    padding-bottom: 0px;
+  }
+
   .tb\:pb-8 {
     padding-bottom: 2rem;
   }
@@ -8338,6 +8335,10 @@ select {
     padding-right: 0px;
   }
 
+  .tb\:pt-0 {
+    padding-top: 0px;
+  }
+
   .tb\:pt-10 {
     padding-top: 2.5rem;
   }
@@ -8354,22 +8355,6 @@ select {
     padding-top: 2.875rem;
   }
 
-  .tb\:pt-6 {
-    padding-top: 1.5rem;
-  }
-
-  .tb\:pb-6 {
-    padding-bottom: 1.5rem;
-  }
-
-  .tb\:pb-0 {
-    padding-bottom: 0px;
-  }
-
-  .tb\:pt-0 {
-    padding-top: 0px;
-  }
-
   .tb\:text-left {
     text-align: left;
   }
@@ -9085,6 +9070,10 @@ select {
     padding-bottom: 5rem;
   }
 
+  .db\:pb-0 {
+    padding-bottom: 0px;
+  }
+
   .db\:pb-10 {
     padding-bottom: 2.5rem;
   }
@@ -9113,10 +9102,6 @@ select {
     padding-top: 8rem;
   }
 
-  .db\:pb-0 {
-    padding-bottom: 0px;
-  }
-
   .db\:text-left {
     text-align: left;
   }