hds-web 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -16,6 +16,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "5.0.1",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4",
     "yarn": "^1.22.19"
   },

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

@@ -16,20 +16,20 @@ const ANIMATED_ARR_CLASSES = {
  
 }
 
-
 const Buttonclasses = {
   'primary': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full justify-center justify-center bg-blue-500 text-neutral-0',
-      'hover': 'hover:bg-blue-700 hover:text-neutral-0',
-      'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#80A3FF] focus:text-neutral-0 focus:outline-none',
+      'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-300 hover:duration-300',
+      'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none active:bg-blue-600 active:text-neutral-0 active:outline-none',
+     
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
   'tonal': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full  justify-center bg-blue-100 text-blue-600',
-      'hover': 'hover:bg-blue-200 hover:text-blue-600',
+      'hover': 'hover:bg-blue-200 hover:text-blue-600 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-300 hover:duration-300',
       'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
@@ -38,9 +38,9 @@ const Buttonclasses = {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 bg-neutral-0 text-blue-500',
 
-      'hover': 'hover:text-neutral-800 hover:bg-blue-200 hover:border-2 hover:border-blue-500 hover:shadow hover: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',
       
-      'focus': 'focus:bg-blue-200 focus:text-neutral-800 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
+      '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',
   },
@@ -54,17 +54,17 @@ const Buttonclasses = {
   },
   'primaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center text-blue-600',
-      'hover': 'hover:text-blue-700',
-      'focus': 'focus:text-blue-700 focus:outline-none',
+      'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-500',
+      'hover': 'hover:text-blue-600',
+      'focus': 'focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-600',
     },
     'disabled': 'text-neutral-300',
   },
   'secondaryLink': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full  justify-center text-neutral-800',
-      'hover': 'hover:text-neutral-900 hover:underline',
-      'focus': 'focus:text-neutral-900 focus:underline focus:outline-none',
+      'hover': 'hover:text-neutral-900 ',
+      'focus': 'focus:text-neutral-900 focus:outline-none focus:shadow-[0px_0px_0px_4px_#E5E7EB]',
     },
     'disabled': 'text-neutral-300',
   },
@@ -72,14 +72,29 @@ const Buttonclasses = {
     'default': {
       'base': 'w-fit justify-center justify-center bg-blue-200 rounded-full p-1.5',
 
-      'hover': 'hover:bg-blue-600 hover:shadow',
+      'hover': 'hover:bg-blue-600 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-300 hover:duration-300',
 
       'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none',
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
+    'icon':{
+      'sm':'h-5 w-5 p-0',
+      'md': 'h-5 w-5 p-2.5',
+      'lg': 'h-6 w-6 p-3'
+    },
   },
-
-
+  'buttonSizes' : {
+    'default': {
+      'sm': 'text-hds-d-body3c-medium py-1.5 pr-2.5 pl-4 rounded-full',
+      'md': 'text-hds-d-body3c-medium rounded-full py-2.5 pl-5 pr-3',
+      'lg': 'text-hds-d-body1c-medium rounded-full py-3 pl-6 pr-4'
+    },
+    'iconOnly': {
+      'sm': 'rounded-full',
+      'md': 'rounded-full p-2.5',
+      'lg': 'trounded-full p-3'
+    }
+  }
 }
 export default function Button(props) {
   const {
@@ -93,6 +108,7 @@ export default function Button(props) {
     label,
     rightAnimatedArrow,
     rightAnimatedArrowColor,
+    animatedHoverStroke,
     className,
     ...rest // destructuring rest of the props
   } = props
@@ -108,11 +124,14 @@ export default function Button(props) {
     defaultClasses = Buttonclasses[type][state];
   }
 
+  let sizeType = 'default';
+  if(type=='iconOnly'){sizeType='iconOnly'}
+
+
   const buttonClasses = [
     'inline-flex items-center',
-    'hover:shadow',
     'rounded-full',
-    `button-${size}`,
+    Buttonclasses['buttonSizes'][`${sizeType}`][`${size}`],
     'group',
     defaultClasses,
     className
@@ -126,23 +145,29 @@ export default function Button(props) {
         className={buttonClasses}
         {...rest}
       >
-        {leftIconVariant && leftIconVariant !== 'none' && (
-          <div className='-ml-0.5 mr-2 h-4 w-4 '>
+        {leftIconVariant && leftIconVariant !== 'none' && type!='iconOnly' && (
+          <div className={`-ml-0.5 mr-2  ${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
             <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
+        
+         {leftIconVariant && leftIconVariant !== 'none' && type=='iconOnly' && (
+          <div className={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
+            <Icon variant={leftIconVariant} height='group-active:stroke-neutral-0 group-hover:transition-all group-hover:ease-out group-hover:delay-300 group-hover:duration-300 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0' strokeColor={leftIconColor} />
+          </div>
+        )}
         {label}
 
-        {rightAnimatedArrow && rightAnimatedArrow !== 'none' && (
-          <div className=' hover:transition-all '>
-            <Icon className='z-10 stroke-[1.5px] group-hover:translate-x-[0.15rem] group-hover:transition-all' height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]}`} variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
+        {rightAnimatedArrow && rightAnimatedArrow !== 'none'  && type!='iconOnly' && (
+          <div className={ `group-hover:transition-all ${animatedHoverStroke}`}>
+            <Icon className='z-10 stroke-2 group-hover:translate-x-[0.15rem] group-hover:transition-all group-hover:duration-300' height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} ${animatedHoverStroke}`} variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
 
-            <Icon className='invisible stroke-[1.5px] group-hover:transition-all group-hover:delay-100 group-hover:visible' height={`${ANIMATED_ARR_CLASSES['icon2'][`${size}`]}`} variant='minus01' strokeColor={rightAnimatedArrowColor} />
+            <Icon className='invisible stroke-2 group-hover:transition-all group-hover:delay-300 group-hover:visible ' height={`${ANIMATED_ARR_CLASSES['icon2'][`${size}`]} ${animatedHoverStroke}`} variant='minus01' strokeColor={rightAnimatedArrowColor} />
 
           </div>
         )}
 
-        {rightIconVariant && rightIconVariant !== 'none' && (
+        {rightIconVariant && rightIconVariant !== 'none'  && type!='iconOnly' && (
            <div className='ml-1.5 h-4 w-4 '>
            <Icon variant={rightIconVariant} strokeColor={rightIconColor} />
          </div>
@@ -150,7 +175,6 @@ export default function Button(props) {
       </button>
     </div>
   );
-
 };
 
 Button.propTypes = {
@@ -159,7 +183,9 @@ Button.propTypes = {
   type: PropTypes.string.isRequired,
   state: PropTypes.oneOf(['default', 'disabled']),
   leftIconVariant: PropTypes.string,
-  rightIconVariant: PropTypes.string
+  rightIconVariant: PropTypes.string,
+  animatedHoverStroke: PropTypes.string
+  
 
 };
 
@@ -169,6 +195,7 @@ Button.defaultProps = {
   leftIconVariant: 'home03',
   rightIconVariant: 'home3',
   rightIconColor: '#80ff00',
-  leftIconColor: '#80ff00'
+  leftIconColor: '#80ff00',
+  animatedHoverStroke:''
 
 };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
 export default function TableA(props) {
     const {
         head,
@@ -42,10 +43,10 @@ export default function TableA(props) {
                         </thead>
                         <tbody className="divide-y divide-gray-200 bg-white">
                             {tableValue.map((person) => (
-                                <tr key={person.email}>
+                                <tr key={uuidv4()}>
                                     {Object.keys(person).map((key) => (
                                         <td
-                                            key={key}
+                                             key={uuidv4()}
                                             className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
                                         >
                                             {``}{person[key]}