hds-web 1.24.0 → 1.24.1

package/package.json

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

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

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
 import { HDSColor } from '../../foundation/ColorPalette';
 import { Typography } from '../../foundation/Typography'
 import PropTypes from 'prop-types';
+import { motion } from 'framer-motion';
 
 export default function Tab(props) {
   const {
@@ -9,77 +10,46 @@ export default function Tab(props) {
     onTabClick,
     pillColor,
   } = props;
-  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
-  const pillRef = useRef(null);
+  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current).name || tabs[0].name);
   let pillColorClass = '';
   if(pillColor){
      pillColorClass = HDSColor(pillColor);
   }
  
-  
-  const handleTabClick = (event, clickedTab) => {
-    event.preventDefault();
-    setActiveTab(clickedTab);
+  const handleTabClick = (clickedTab) => {
+    setActiveTab(clickedTab.name);
     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`;
-    }
+    
   };
   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 className="block">
-        <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
-          {tabs.map(tab => (
-            <div
+    <div className="">
+      <div className="block ">
+        <nav className="relative inline-flex gap-2 rounded-[32px] " aria-label="Tabs">
+          {tabs.map((tab) => (
+            <button
               key={tab.name}
-              onClick={(event) => handleTabClick(event, tab)}
+              onClick={() => {
+                handleTabClick(tab);
+              }}
+              className={`${activeTab === tab.name ? ' text-neutral-0' : 'hover:text-neutral-0 hover:bg-neutral-0/20 text-neutral-300'} relative  px-3 py-1 whitespace-nowrap rounded-full`}
             >
-              <Typography 
-                className={`${tabClass(tab.name)} ${tab.name === activeTab.name ? '' : 'hover:bg-neutral-150'} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
-              textStyle='body3c-medium'>
+              {activeTab === tab.name && (
+                <motion.div
+                  layoutId="active-pill"
+                  className={`absolute inset-0 ${pillColorClass}`}
+                  style={{ borderRadius: 32 }}
+
+                />
+              )}
+              <Typography textStyle="body3c-medium" className="relative z-10 text-neutral-0 ">
                 {tab.name}
               </Typography>
-            </div>
+            </button>
           ))}
-          <span
-            ref={pillRef}
-            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
-              height: '28px' // Add desired height to make the pill visible
-            }}
-          />
         </nav>
       </div>
     </div>

package/src/styles/tailwind.css

@@ -9829,6 +9829,10 @@ select{
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-neutral-0\/20:hover{
+  background-color: rgb(255 255 255 / 0.2);
+}
+
 .hover\:pl-\[9px\]:hover{
   padding-left: 9px;
 }