hds-web 1.6.2 → 1.6.4

package/package.json

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

package/src/HDS/components/Buttons/button.js

@@ -38,12 +38,22 @@ const Buttonclasses = {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 text-blue-500',
 
-      'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-100 hover:duration-300',
+      'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
       
       'focus': 'focus:bg-blue-200 focus:text-blue-500 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
+  'secondaryWhite': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-neutral-0 ',
+
+      'hover': 'hover:text-neutral-0 hover:border-2 hover:border-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
+      
+      'focus': 'focus:text-neutrak-0 focus:border-2 border-neutral-0 focus:outline-none focus:text-neutral-0',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
   
   'ghost': {
     'default': {

package/src/HDS/components/Cards/Link/link.js

@@ -6,13 +6,11 @@ import { Typography } from '../../../foundation/Typography'
 
 
 export default function LinkCard(props) {
-    const cardBgColorClass = HDSColor(props.cardBgColor)
-    const cardHoverClasses = HDSColor(`hover:${props.cardHoverBg}`);
     return (
         <>
             <a
                 href={props.linkUrl}
-                className={`${cardHoverClasses} ${cardBgColorClass} hover:shadow-xl rounded-2xl p-6 h-full block`}
+                className={`rounded-2xl p-6 h-full block`}
             >
                 {props.brandImageUrl ?
                     (
@@ -85,7 +83,6 @@ LinkCard.defaultProps = {
     brandImageUrl: '',
     brandImageAlt:'',
     linkUrl: '#',
-    cardHoverBg: 'bg-pink-600',
     iconVariant: 'videorecorder',
     iconStrokeColor: 'blue-500',
     iconArrowVariant: 'arrownarrowupright',

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

@@ -7,8 +7,7 @@ export default function Tab(props) {
   const {
     tabs,
     onTabClick,
-    pillColor
-
+    pillColor,
   } = props;
   const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
   const pillRef = useRef(null);
@@ -16,6 +15,7 @@ export default function Tab(props) {
   if(pillColor){
      pillColorClass = HDSColor(pillColor);
   }
+ 
   
   const handleTabClick = (event, clickedTab) => {
     event.preventDefault();
@@ -36,10 +36,19 @@ export default function Tab(props) {
       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 = ' text-neutral-500 flex-nowrap rounded-full';
+    let clasnInActive = ' flex-nowrap rounded-full ' + tabTextClass;
     if (activeTab.name === name) {
       return classActive;
     }
@@ -56,7 +65,11 @@ export default function Tab(props) {
               key={tab.name}
               onClick={(event) => handleTabClick(event, tab)}
             >
-              <Typography className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} textStyle='body3c-medium'>{tab.name}</Typography>
+              <Typography 
+              className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
+              textStyle='body3c-medium'>
+                {tab.name}
+              </Typography>
             </div>
           ))}
           <span
@@ -75,5 +88,5 @@ export default function Tab(props) {
 }
 
 Tab.defaultProps = {
-  pillColor: 'bg-blue-500'
+  pillColor: 'bg-blue-500',
 }

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

@@ -57,7 +57,7 @@ export default function TextCard(props) {
                     const imgBgColor = HDSColor(list.tab_img_bg_class)
                     return (
                       <div className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={()=>setImgActive(list.title)}>
-                        <div className={'m-2 p-0 tb:p-6 rounded-lg hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-100" : "")} key={i}>
+                        <div className={'m-2 p-0 tb:p-6 rounded-lg transition-all ease-in duration-75 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-100" : "")} key={i}>
                           <div className='flex items-center pb-4'>
                             <Icon
                               height={`w-6 h-6 mr-2 stroke-[1.5px]` }

package/src/styles/tailwind.css

@@ -6961,6 +6961,10 @@ select {
   transition-duration: 500ms;
 }
 
+.duration-75 {
+  transition-duration: 75ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -8103,6 +8107,11 @@ select {
   border-color: rgb(210 214 219 / var(--tw-border-opacity));
 }
 
+.hover\:border-neutral-0:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(240 244 255 / var(--tw-bg-opacity));