hds-web 1.24.2 → 1.24.3

package/package.json

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

package/src/HDS/components/Cards/Misc/talkcard2.js

@@ -14,6 +14,7 @@ export default function TalkCard2(props) {
     }
     else CardClass = 'tb-l:justify-center';
 
+
     return (
 
         <a href={props.readUrl ?? '#'} className="grid group">

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

@@ -2,7 +2,6 @@ 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 {
@@ -10,54 +9,83 @@ export default function Tab(props) {
     onTabClick,
     pillColor,
   } = props;
-  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0].name);
+  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
+  const pillRef = useRef(null);
   let pillColorClass = '';
-  if (pillColor) {
-    pillColorClass = HDSColor(pillColor);
+  if(pillColor){
+     pillColorClass = HDSColor(pillColor);
   }
-
-  const handleTabClick = (clickedTab) => {
-    setActiveTab(clickedTab.name);
+ 
+  
+  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`;
+    }
   };
-  let tabTextClass = '';
+  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-[32px] " aria-label="Tabs">
-          {tabs.map((tab) => (
-            <button
+    <div className=''>
+      <div className="block">
+        <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
+          {tabs.map(tab => (
+            <div
               key={tab.name}
-              onClick={() => {
-                handleTabClick(tab);
-              }}
-              className={`${activeTab === tab.name ? ' text-neutral-0 transition-all duration-300' : ' hover:bg-neutral-500/30 text-neutral-400'} relative  px-3 py-1 whitespace-nowrap rounded-full hover:text-neutral-0`}
+              onClick={(event) => handleTabClick(event, tab)}
             >
-              {activeTab === tab.name && (
-                <motion.div
-                  layoutId="active-pill"
-                  className={`absolute inset-0 ${pillColorClass}`}
-                  style={{ borderRadius: 32 }}
-                //  transition={{ duration:1 }}
-
-                />
-              )}
-              <Typography textStyle="body3c-medium" className={`relative z-10 `}>
+              <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'>
                 {tab.name}
               </Typography>
-            </button>
+            </div>
           ))}
+          <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>
   );
 }
 
-
 Tab.defaultProps = {
   pillColor: 'bg-blue-500',
 }

package/src/HDS/modules/navCard/navCard.js

@@ -6,19 +6,18 @@ import { HDSColor } from '../../foundation/ColorPalette';
 import { Tab } from '../../components/Tabs';
 import { Icon } from '../../components/common-components/Icon'
 import PropTypes from 'prop-types';
-import { motion } from 'framer-motion';
 
 
 export default function NavCard(props) {
     const [showVideo, setShowVideo] = useState(false);
     const TabCard = (tabContent) => {
-
+     
         return (
             <>
                 <div className=''>
                     {tabContent.title && <Typography textStyle='body1c-semi-bold' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
 
-                    {tabContent.subTitle && <Typography textStyle='body3' className={'mt-2 ' + HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
+                    {tabContent.subTitle && <Typography textStyle='body3' className={ 'mt-2 ' + HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
                     {tabContent.readMore_cta && <div className="flex">
                         <a href={tabContent.readMore_cta_link ?? ''} >
                             <HDSButton
@@ -75,7 +74,7 @@ export default function NavCard(props) {
                             <div className="relative">
                                 {
                                     tabContent.img_url && (
-                                        <img src={tabContent.img_url} alt="Illustration" className=' rounded-2xl' />
+                                        <img src={tabContent.img_url} alt="Illustration" className=' rounded-2xl'/>
                                     )
                                 }
                                 {
@@ -127,21 +126,13 @@ export default function NavCard(props) {
                             bgColorTab={props.bgColorTab}
                         />
                     </div>
-                    <motion.div
-                        key={activeTab}
-                        initial={{ opacity: 0.8 }} // Initial opacity when the component is rendered
-                        animate={{ opacity: 1 }} // Opacity when the tab switches
-                        exit={{ opacity: 0.8 }} // Opacity when exiting the component
-                        transition={{ duration: 1, ease: 'easeIn' }} // Tr
-
-                        className=''>
+                    <div className=''>
                         {props.tabContent &&
                             props.tabContent[activeTab] &&
                             TabCard(props.tabContent[activeTab])}
-                    </motion.div>
+                    </div>
 
                 </div>}
         </div>
     )
 }
-