From d8f45d10b08e0912e5398d5239c108da4373e5f6 Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Thu, 15 Feb 2024 09:43:20 +0800
Subject: [PATCH] chore: expose all props to button

---
 lib/components/Button/index.tsx | 21 +++++----------------
 src/stories/Button.stories.ts   |  2 +-
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
index 903effdb..f737c509 100644
--- a/lib/components/Button/index.tsx
+++ b/lib/components/Button/index.tsx
@@ -8,37 +8,28 @@ import './Button.scss';
 type TVariant = 'contained' | 'ghost' | 'outlined';
 type TColor = 'black' | 'primary-light' | 'primary' | 'white';
 
-interface ButtonProps {
-    ariaLabel?: ComponentProps<'button'>['aria-label'];
+interface ButtonProps extends ComponentProps<'button'> {
     color?: TColor;
-    disabled?: ComponentProps<'button'>['disabled'];
     icon?: ReactElement;
     isFullWidth?: boolean;
     isLoading?: boolean;
-    onClick?: ComponentProps<'button'>['onClick'];
     rounded?: Extract<TGenericSizes, 'md' | 'sm'>;
     size?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
     textSize?: ComponentProps<typeof Text>['size'];
-    type?: ComponentProps<'button'>['type'];
     variant?: TVariant;
-    className?: string;
 }
 
 export const Button = ({
-    ariaLabel,
     children,
     color = 'primary',
-    disabled = false,
     icon,
     isFullWidth = false,
     isLoading = false,
-    onClick,
     rounded = 'sm',
     size = 'md',
     textSize,
-    type,
     variant = 'contained',
-    className
+    ...props
 }: PropsWithChildren<ButtonProps>) => {
     const isContained = variant === 'contained';
 
@@ -49,7 +40,7 @@ export const Button = ({
         `derivs-button__rounded--${rounded}`,
         isContained && `derivs-button__color--${color}`,
         isFullWidth && 'derivs-button__full-width',
-        className
+        props.className
     );
 
     type TButtonFontColor = {
@@ -94,11 +85,9 @@ export const Button = ({
 
     return (
         <button
-            aria-label={ariaLabel}
             className={buttonClassNames}
-            disabled={disabled || isLoading}
-            onClick={onClick}
-            type={type}
+            disabled={props.disabled || isLoading}
+            {...props}
         >
             {isLoading && (
                 <div className='derivs-button__loader'>
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
index 45d7fca0..3529d6ff 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.ts
@@ -31,7 +31,7 @@ const meta = {
       options: ['contained', 'outlined', 'ghost'],
       control: { type: 'radio' },
     },
-    ariaLabel: {
+    'aria-label': {
       table: {
         disable: true,
       }