hds-web 1.1.1 → 1.1.3

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: false },
+    { name: 'Level 1', href: '', current: true },
     { name: 'Level 2', href: '', current: false },
-    { name: 'Level 3', href: '', current: true },
+    { name: 'Level 3', href: '', current: false },
 ]
 
 
@@ -17,12 +17,11 @@ const tabs = [
 const levelCalc = (arr, index) => {
    
     const keyIndex = 'key' + `${index}`;
-    console.log(keyIndex);
     if (arr[keyIndex] && arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null) {
         return (
             <>
-            
-                {arr[keyIndex]['text']}
+            <Typography as='div' textStyle='bodyc' className='text-neutral-700 flex items-start gap-4'> {`${arr[keyIndex]['text']}`}</Typography>
+               
                
             </>
         )
@@ -35,9 +34,6 @@ const levelCalc = (arr, index) => {
             </>
         )
     }
-    else return(
-        <></>
-    ) ;
 }
 
 export default function TableB(props) {
@@ -49,20 +45,18 @@ export default function TableB(props) {
         TABLE_VALUE,
         TABLE_HEADER,
     } = props;
-    const [activeTab, setActiveTab] = useState(3);
+    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);
-        
-        console.log(`Tab "${tab.name}" updatedTabs`);
         // Perform any other actions based on the clicked tab
     }
 
     return (
         <div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
-            <div className="sm:flex sm:items-center flex justify-around ">
+            <div className=" flex justify-around ">
                 <div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
                     <div>
                         {title && (
@@ -93,7 +87,7 @@ export default function TableB(props) {
             
                 <div className='tb-l:hidden'>
                     <div className="mt-8 bg-neutral-0 rounded-3xl ">
-                        <div className=" shadow rounded-3xl ">
+                        <div className=" shadow rounded-3xl transition-opacity duration-200 ">
                             
                                             <div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
                                                 <div className={'flex items-center gap-2'}>
@@ -110,7 +104,7 @@ export default function TableB(props) {
                                                             <Typography
                                                                 textStyle='h5'
                                                                 className={TABLE_HEADER[activeTab]['title_text_color']}>
-                                                                {TABLE_HEADER[activeTab]['title']}
+                                                                {`${TABLE_HEADER[activeTab]['title']}`}
                                                             </Typography>)
                                                     }
                                                     {
@@ -118,7 +112,7 @@ export default function TableB(props) {
                                                             <Typography
                                                                 textStyle='h5'
                                                                 className={TABLE_HEADER[activeTab]['title_text_color']}>
-                                                                {TABLE_HEADER[activeTab]['title']}
+                                                                {`${TABLE_HEADER[activeTab]['title']}`}
                                                             </Typography>)
                                                     }
 
@@ -129,20 +123,19 @@ export default function TableB(props) {
                                                         <Typography
                                                             textStyle='body1'
                                                             className={TABLE_HEADER[activeTab]['descr_text_color']}>
-                                                            {TABLE_HEADER[activeTab]['descr']}
+                                                            {`${TABLE_HEADER[activeTab]['descr']}`}
                                                         </Typography>)}
                                                 </div>
                                             </div>
-                               
-                            
+                                                         
                             <div className="divide-y divide-neutral-200 rounded-b-3xl">
                                 <div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl  items-center'>
                                     {TABLE_VALUE.map((key, index) => (
                                         <React.Fragment key={index}>
-                                            <div className='flex w-full p-4 gap-4 items-center'>
-                                                <Typography as='div' textStyle='bodyc' className='text-neutral-700 flex items-start gap-4'>
-                                                {levelCalc(key, activeTab)} {key['rowTitle']}
-                                                </Typography>
+                                            <div className='flex w-full p-4 gap-2 items-start'>
+                                              
+                                                {levelCalc(key, activeTab)}{key['rowTitle']}
+                                              
                                             </div>
                                         </React.Fragment>
                                     ))}
@@ -156,13 +149,13 @@ export default function TableB(props) {
             {/* code for mobile */}
 
             <div className='hidden tb-l:block' >
-                <div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
-                    <table className="min-w-full  shadow rounded-3xl ">
+                <div className="mt-12 bg-neutral-0 rounded-3xl ">
+                    <table className="min-w-full shadow tableclss rounded-3xl ">
                         <thead>
                             <tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
-                                {Object.keys(TABLE_HEADER).map((key, value) => (
+                                {Object.keys(TABLE_HEADER).map((key, index) => (
                                     <th
-                                        key={key}
+                                        key={index}
                                         scope="col"
                                         className="px-8 py-6 sm:table-cell"
                                     >
@@ -208,27 +201,27 @@ export default function TableB(props) {
                                 ))}
                             </tr>
                         </thead>
-                        <tbody className="divide-y divide-neutral-200 rounded-b-3xl">
+                        <tbody className="divide-y divide-neutral-200">
                             {TABLE_VALUE.map((value, index) => (
                                 <tr className='divide-x divide-neutral-200' key={index}>
                                     {Object.keys(value).map((keyIndex) => (
 
-                                        <React.Fragment key={index}>
+                                        <React.Fragment key={index+keyIndex}>
                                             {keyIndex !== null && keyIndex === 'rowTitle' && (<td
-                                                key={index}
+                                                
                                                 className="px-8 py-7 w-[22.5rem]"
                                             >
                                                 <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
 
                                             </td>)}
-
+                                            
                                             {keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
                                                 <td
-                                                    key={keyIndex}
-                                                    className="px-8 py-7 text-center"
+                                                    
+                                                    className="px-8 py-7 border-table text-center "
                                                 >
                                                     {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
-                                                        <div></div>
+                                                        <></>
 
                                                     )}
                                                     {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
@@ -240,11 +233,13 @@ export default function TableB(props) {
                                                             <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
                                                         </div>
                                                     )}
-                                                </td>)}
+                                                </td>)    
+                                            }
+                                            
                                             {keyIndex === null && (
                                                 <td
                                                     key={index}
-                                                    className="px-8 py-7 text-center"
+                                                    className="px-8 py-7 border-table text-center"
                                                 >
                                                 </td>
                                             )}

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

@@ -36,18 +36,18 @@ export default function Tab(props) {
               href="#"
               className={`px-3 py-1 font-medium text-sm rounded-full ${
                 activeTab === tab
-                  ? 'bg-blue-500 text-neutral-0'
-                  : 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 flex-nowrap transition-all duration-500'
+                  ? ' 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='z-10 whitespace-nowrap' textStyle='body3c-medium'>{tab.name}</Typography>
+              <Typography className='z-[2] relative whitespace-nowrap' textStyle='body3c-medium'>{tab.name}</Typography>
             </a>
           ))}
           <span
             ref={pillRef}
-            className="absolute left-0 -z-10 bg-blue-500 rounded-full transition-all ease-in-out duration-500"
+            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

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

@@ -6,6 +6,7 @@ import { Icon } from '../../components/common-components/Icon';
 
 export default function TextCard(props) {
   const titleColor = HDSColor(props.title_color);
+  console.log(props.descriptions);
   return (
     <>
       {

package/src/index.css

@@ -3,7 +3,6 @@
 @tailwind utilities;
 /* Typography classes */
 
-
 @keyframes pill-move-left {
   0% {
     left: 0;

package/src/styles/tailwind.css

@@ -923,10 +923,6 @@ select {
   z-index: -10;
 }
 
-.z-0 {
-  z-index: 0;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -1113,10 +1109,6 @@ select {
   margin-top: -1.5rem;
 }
 
-.-mt-px {
-  margin-top: -1px;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1201,6 +1193,14 @@ select {
   margin-top: 2.5rem;
 }
 
+.mt-11 {
+  margin-top: 2.75rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
 .mt-16 {
   margin-top: 4rem;
 }
@@ -1237,10 +1237,6 @@ select {
   margin-top: 2.25rem;
 }
 
-.mt-11 {
-  margin-top: 2.75rem;
-}
-
 .block {
   display: block;
 }
@@ -1680,42 +1676,6 @@ select {
           animation: bounce 1s infinite;
 }
 
-@-webkit-keyframes pulse {
-  50% {
-    opacity: .5;
-  }
-}
-
-@keyframes pulse {
-  50% {
-    opacity: .5;
-  }
-}
-
-.animate-pulse {
-  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@-webkit-keyframes spin {
-  to {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  to {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
-}
-
-.animate-spin {
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1982,18 +1942,6 @@ select {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
-.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-x-reverse: 0;
-  border-right-width: calc(2px * var(--tw-divide-x-reverse));
-  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
-}
-
-.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
-}
-
 .divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
   border-color: rgb(30 86 227 / 0.1);
 }
@@ -5281,16 +5229,6 @@ select {
   padding-bottom: 1.75rem;
 }
 
-.py-\[26px\] {
-  padding-top: 26px;
-  padding-bottom: 26px;
-}
-
-.py-\[1\.625\] {
-  padding-top: 1.625;
-  padding-bottom: 1.625;
-}
-
 .py-\[1\.625rem\] {
   padding-top: 1.625rem;
   padding-bottom: 1.625rem;
@@ -5428,10 +5366,6 @@ select {
   padding-top: 1.5rem;
 }
 
-.pt-11 {
-  padding-top: 2.75rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -6405,6 +6339,14 @@ select {
   transition-duration: 150ms;
 }
 
+.delay-100 {
+  transition-delay: 100ms;
+}
+
+.delay-200 {
+  transition-delay: 200ms;
+}
+
 .delay-300 {
   transition-delay: 300ms;
 }
@@ -6429,6 +6371,10 @@ select {
   transition-duration: 500ms;
 }
 
+.duration-700 {
+  transition-duration: 700ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -6441,10 +6387,6 @@ select {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
-.ease-linear {
-  transition-timing-function: linear;
-}
-
 /* Typography classes */
 
 @-webkit-keyframes pill-move-left {
@@ -7375,6 +7317,11 @@ select {
   margin-left: 0px;
 }
 
+.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;
 }
@@ -7471,6 +7418,12 @@ select {
           animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 
+@-webkit-keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -7482,6 +7435,13 @@ select {
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@-webkit-keyframes spin {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
 @keyframes spin {
   to {
     -webkit-transform: rotate(360deg);
@@ -8534,10 +8494,6 @@ select {
     margin-left: 3rem;
   }
 
-  .md\:block {
-    display: block;
-  }
-
   .md\:flex {
     display: flex;
   }

package/src/HDS/components/Tabs/import React, { useState, useRef } from .js

@@ -1,61 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-
-export default function Tab(props) {
-  const { tabs, onTabClick } = props;
-  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
-  const pillRef = useRef(null);
-  const activeTabRef = useRef(null);
-
-  const handleTabClick = (event, clickedTab) => {
-    event.preventDefault();
-    setActiveTab(clickedTab);
-    if (onTabClick) {
-      onTabClick(clickedTab);
-    }
-  };
-
-  useEffect(() => {
-    // Update the pill position and height when activeTab changes
-    const pill = pillRef.current;
-    const activeTabElement = activeTabRef.current;
-
-    if (pill && activeTabElement) {
-      const pillWidth = activeTabElement.offsetWidth;
-      const pillHeight = activeTabElement.offsetHeight;
-      const pillOffset = activeTabElement.offsetLeft;
-
-      pill.style.transform = `translateX(${pillOffset}px)`;
-      pill.style.width = `${pillWidth}px`;
-      pill.style.height = `${pillHeight}px`;
-    }
-  }, [activeTab]);
-
-  return (
-    <div>
-      <div className="hidden md:block">
-        <nav className="relative inline-flex bg-neutral-0 p-2 rounded-full" aria-label="Tabs">
-          {tabs.map((tab, index) => (
-            <a
-              key={tab.name}
-              href="#"
-              className={`relative px-3 py-1 font-medium text-sm rounded-full ${
-                activeTab === tab
-                  ? 'bg-blue-600 text-neutral-0 z-10' // Increase z-index for active tab
-                  : 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 flex-nowrap transition-all duration-500'
-              }`}
-              aria-current={activeTab === tab ? 'page' : undefined}
-              onClick={(event) => handleTabClick(event, tab)}
-              ref={activeTab === tab ? activeTabRef : null}
-            >
-              {tab.name}
-            </a>
-          ))}
-          <span
-            ref={pillRef}
-            className="absolute bg-blue-600 rounded-full transition-all duration-500 z-0 -mt-px" // Add negative margin to counteract the gap
-          />
-        </nav>
-      </div>
-    </div>
-  );
-}