hds-web 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

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

@@ -1,21 +1,20 @@
 import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import { useState } from 'react';
 import { Typography } from '../../foundation/Typography'
 import { Icon } from '../common-components/Icon'
+import { Tab } from '../Tabs'
 
-const test = (TABLE_HEADER) => (
-    console.log(TABLE_HEADER[0]['title']),
-    Object.keys(TABLE_HEADER[0]).map((key, value) => (
+const tabs = [
+    { name: 'My Account', href: '', current: false },
+    { name: 'Company', href: '', current: false },
+    { name: 'Team Members', href: '', current: true },
+    { name: 'Billing', href: '', current: false },
+]
 
-        <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>
-    ))
-)
+function handleTabClick(tab) {
+    console.log(`Tab "${tab.name}" updatedTabs`);
+    // Perform any other actions based on the clicked tab
+}
 
 export default function TableB(props) {
     const {
@@ -24,31 +23,130 @@ export default function TableB(props) {
         TABLE_VALUE,
         TABLE_HEADER,
         children
-
     } = props;
-    test(TABLE_HEADER);
+    const [activeTab, setActiveTab] = useState(2);
     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 && (
+        <div className=" max-w-7xl">
+            <div className="sm:flex sm:items-center flex justify-around ">
+
+                <div className="w-full items-center flex justify-around md:flex md:flex-col md:items-center">
+                    <div>
+
+
+                        {title && (
+                            <Typography
+                                textStyle='h3'>
+                                {title}
+                            </Typography>
+                        )
+                        }
+                        {/* {description && (
                         <Typography
                             textStyle='body1c'>
                             {description}
                         </Typography>
                     )
-                    }
+                    } */}
+                    </div>
+                    <div className=''>
+                        <Tab onTabClick={handleTabClick} tabs={tabs} />
+                    </div>
+                </div>
+            </div>
+
+            <div className=''>
+            <div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
+                    <table className="min-w-full  shadow rounded-3xl ">
+                        <thead>
+                            <tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
+                                    <th
+                                        key={activeTab}
+                                        scope="col"
+                                        className="px-8 py-6 sm:table-cell"
+                                    >
+                                        <div className=''>
+                                            <div className='flex flex-col justify-center items-center text-center'>
+                                                <div className={'flex items-center gap-2'}>
+                                                    {TABLE_HEADER[activeTab]['icon'] &&
+                                                        (
+                                                            <Icon
+                                                                height='h-6 w-6'
+                                                                variant={TABLE_HEADER[activeTab]['icon']}
+                                                                strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
+                                                        )
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={TABLE_HEADER[activeTab]['title_text_color']}>
+                                                                {TABLE_HEADER[activeTab]['title']}
+                                                            </Typography>)
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={TABLE_HEADER[activeTab]['title_text_color']}>
+                                                                {TABLE_HEADER[activeTab]['title']}
+                                                            </Typography>)
+                                                    }
+
+
+                                                </div>
+                                                <div className=' max-w-[10rem]'>
+                                                    {TABLE_HEADER[activeTab]['descr'] && (
+                                                        <Typography
+                                                            textStyle='body1'
+                                                            className={TABLE_HEADER[activeTab]['descr_text_color']}>
+                                                            {TABLE_HEADER[activeTab]['descr']}
+                                                        </Typography>)}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-neutral-200 rounded-b-3xl">
+                            {TABLE_VALUE.map((value, index) => (
+                                <tr className='divide-x divide-neutral-200' key={index}>
+                                    {Object.keys(value).map((key, index) => (
+                                        <React.Fragment key={index}>
+                                            {key === 'rowTitle' && (<td
+                                                key={key}
+                                                className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
+                                            >
+                                                <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
+
+                                            </td>)}
+
+                                            {key !== 'rowTitle' && (
+                                                <td
+                                                    key={key}
+                                                    className="px-8 py-7 text-center"
+                                                >
+                                                    {value[key]['text'] && (
+                                                        <Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
+
+                                                    )}
+                                                    {!value[key]['text'] && (
+                                                        <div className='flex justify-center'>
+                                                            <Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={value[key]['iconStrokeClass']} />
+                                                        </div>
+                                                    )}
+
+
+                                                </td>)}
+                                        </React.Fragment>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
                 </div>
             </div>
 
-            <div>
+            <div className='hidden md:block' >
                 <div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
                     <table className="min-w-full  shadow rounded-3xl ">
                         <thead>
@@ -71,7 +169,7 @@ export default function TableB(props) {
                                                         )
                                                     }
                                                     {
-                                                        TABLE_HEADER[key]['title'] && key==0 && (
+                                                        TABLE_HEADER[key]['title'] && key == 0 && (
                                                             <Typography
                                                                 textStyle='h5'
                                                                 className={TABLE_HEADER[key]['title_text_color']}>
@@ -79,15 +177,15 @@ export default function TableB(props) {
                                                             </Typography>)
                                                     }
                                                     {
-                                                        TABLE_HEADER[key]['title'] && key!=0 && (
+                                                        TABLE_HEADER[key]['title'] && key != 0 && (
                                                             <Typography
                                                                 textStyle='h5'
                                                                 className={TABLE_HEADER[key]['title_text_color']}>
                                                                 {TABLE_HEADER[key]['title']}
                                                             </Typography>)
                                                     }
-                                                    
-                                                    
+
+
                                                 </div>
                                                 <div className=' max-w-[10rem]'>
                                                     {TABLE_HEADER[key]['descr'] && (
@@ -104,12 +202,12 @@ export default function TableB(props) {
                             </tr>
                         </thead>
                         <tbody className="divide-y divide-neutral-200 rounded-b-3xl">
-                            {TABLE_VALUE.map((value) => (
-                                <tr className='divide-x divide-neutral-200' key={uuidv4()}>
+                            {TABLE_VALUE.map((value, index) => (
+                                <tr className='divide-x divide-neutral-200' key={index}>
                                     {Object.keys(value).map((key) => (
-                                         <React.Fragment key={uuidv4()}>
+                                        <React.Fragment key={key}>
                                             {key === 'rowTitle' && (<td
-                                                key={uuidv4()}
+                                                key={key}
                                                 className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
                                             >
                                                 <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
@@ -118,7 +216,7 @@ export default function TableB(props) {
 
                                             {key !== 'rowTitle' && (
                                                 <td
-                                                    key={uuidv4()}
+                                                    key={key}
                                                     className="px-8 py-7 text-center"
                                                 >
                                                     {value[key]['text'] && (
@@ -133,7 +231,7 @@ export default function TableB(props) {
 
 
                                                 </td>)}
-                                                </React.Fragment>
+                                        </React.Fragment>
                                     ))}
                                 </tr>
                             ))}

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

@@ -0,0 +1,61 @@
+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>
+  );
+}

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

@@ -1,47 +1,61 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
+import { Typography } from '../../foundation/Typography'
 
-function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
-  }
-  
-export default function Tab(props){
-    const tabs = Array.isArray(props.tabs) ? props.tabs : [];
-    return (
-      <div>
-        <div className="md:hidden">
-          <label htmlFor="tabs" className="sr-only">
-            Select a tab
-          </label >
-          {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
-          <select
-            id="tabs"
-            name="tabs"
-            className="block w-full rounded-md border-pink-300 focus:border-pink-500 focus:ring-pink-500"
-            defaultValue={tabs.length && tabs.find((tab) => tab.current).name}
-          >
-            {tabs.length && tabs.map((tab) => (
-              <option key={tab.name}>{tab.name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="hidden md:block">
-          <nav className="inline-flex gap-2 bg-neutral-0 p-2 rounded-full" aria-label="Tabs">
-          {tabs.length && tabs.map((tab) => (
-              <a
-                key={tab.name}
-                href={tab.href}
-                className={classNames(
-                  tab.current ? 'bg-blue-600 text-neutral-0' : 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 hover:transition-all hover: delay-100 flex-nowrap ',
-                  'px-3 py-1 font-medium text-sm rounded-full'
-                )}
-                aria-current={tab.current ? 'page' : undefined}
-              >
-                {tab.name}
-              </a>
-            ))}
-          </nav>
-        </div>
+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 handleTabClick = (event, clickedTab) => {
+    event.preventDefault();
+    setActiveTab(clickedTab);
+    if (onTabClick) {
+      onTabClick(clickedTab);
+    }
+
+    // Move the pill indicator to the clicked tab
+    const pill = pillRef.current;
+    if (pill) {
+      const pillWidth = event.currentTarget.offsetWidth;
+      const clickedTabOffset = event.currentTarget.offsetLeft;
+      const pillOffset = pill.parentElement.offsetLeft;
+      const translateX = clickedTabOffset ;
+
+      pill.style.transform = `translateX(${translateX}px)`;
+      pill.style.width = `${pillWidth}px`;
+    }
+  };
+
+  return (
+    <div>
+      <div className="block">
+        <nav className="relative inline-flex gap-2  p-2 rounded-full" aria-label="Tabs">
+          {tabs.map(tab => (
+            <a
+              key={tab.name}
+              href="#"
+              className={`px-3 py-1 font-medium text-sm rounded-full ${
+                activeTab === tab
+                  ? 'bg-blue-600 text-neutral-0'
+                  : '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)}
+            >
+              <Typography className='z-10 whitespace-nowrap' textStyle='body3c-medium'>{tab.name}</Typography>
+            </a>
+          ))}
+          <span
+            ref={pillRef}
+            className="absolute left-0 -z-10 bg-blue-600 rounded-full transition-all ease-in-out duration-500"
+            style={{
+              left: `${activeTab.index * 100}%`,
+              width: `${activeTab.width}px`, // Use the width of the clicked tab
+              height: '28px' // Add desired height to make the pill visible
+            }}
+          />
+        </nav>
       </div>
-    )
-  }
-  
+    </div>
+  );
+}

package/src/HDS/components/index.js

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

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

@@ -6,7 +6,6 @@ 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,6 +3,38 @@
 @tailwind utilities;
 /* Typography classes */
 
+
+@keyframes pill-move-left {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+  50% {
+    left: 0;
+    width: 100%;
+  }
+  100% {
+    left: 0;
+    width: 0%;
+  }
+}
+
+@keyframes pill-move-right {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+  50% {
+    left: 100%;
+    width: 0%;
+  }
+  100% {
+    left: 0;
+    width: 0%;
+  }
+}
+
+
 .card-animation-wrapper {
     position: relative;
   }