Added onMouseEnter, onMouseLeave, onFocus and onBlur event to ButtonBase

Author: Shrey Dhyani

apps/storybook/src/stories/atoms/Buttons.stories.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ButtonBase } from '@reusejs/react';
-import {
-  CheckCircleIcon,
-} from '@heroicons/react/solid';
+import { CheckCircleIcon } from '@heroicons/react/solid';
 
 export default {
   title: 'Atoms/Buttons',

packages/react/src/atoms/buttons/base.tsx

@@ -26,6 +26,10 @@ export interface ButtonBaseProps {
     disabledClasses?: any;
   };
   onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 const ButtonBase = (props: ButtonBaseProps) => {
@@ -49,13 +53,19 @@ const ButtonBase = (props: ButtonBaseProps) => {
     theme
   );
 
+  console.log("Props>>>>>>>>", props);
+
   return (
     <button
       type={props.type}
       className={finalClassNames}
       style={props.buttonStyles}
       onClick={props.onClick}
       disabled={props.disabled || props.busy}
+      onMouseEnter={props.onMouseEnter}
+      onMouseLeave={props.onMouseLeave}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
     >
       {props.buttonPrefix && props.buttonPrefix}
       {props.busy && <>{props.busyText}</>}