hds-web 1.24.1 → 1.24.2

package/package.json

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

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

@@ -10,20 +10,20 @@ export default function Tab(props) {
     onTabClick,
     pillColor,
   } = props;
-  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current).name || tabs[0].name);
+  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0].name);
   let pillColorClass = '';
-  if(pillColor){
-     pillColorClass = HDSColor(pillColor);
+  if (pillColor) {
+    pillColorClass = HDSColor(pillColor);
   }
- 
+
   const handleTabClick = (clickedTab) => {
     setActiveTab(clickedTab.name);
     if (onTabClick) {
       onTabClick(clickedTab);
     }
-    
+
   };
-  let tabTextClass = ''; 
+  let tabTextClass = '';
 
   return (
     <div className="">
@@ -35,17 +35,18 @@ export default function Tab(props) {
               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`}
+              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`}
             >
               {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 text-neutral-0 ">
+              <Typography textStyle="body3c-medium" className={`relative z-10 `}>
                 {tab.name}
               </Typography>
             </button>
@@ -56,6 +57,7 @@ export default function Tab(props) {
   );
 }
 
+
 Tab.defaultProps = {
   pillColor: 'bg-blue-500',
 }

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

@@ -6,18 +6,19 @@ 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
@@ -74,7 +75,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' />
                                     )
                                 }
                                 {
@@ -126,13 +127,21 @@ export default function NavCard(props) {
                             bgColorTab={props.bgColorTab}
                         />
                     </div>
-                    <div className=''>
+                    <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=''>
                         {props.tabContent &&
                             props.tabContent[activeTab] &&
                             TabCard(props.tabContent[activeTab])}
-                    </div>
+                    </motion.div>
 
                 </div>}
         </div>
     )
 }
+

package/src/styles/tailwind.css

@@ -9833,6 +9833,10 @@ select{
   background-color: rgb(255 255 255 / 0.2);
 }
 
+.hover\:bg-neutral-500\/30:hover{
+  background-color: rgb(108 115 127 / 0.3);
+}
+
 .hover\:pl-\[9px\]:hover{
   padding-left: 9px;
 }