From 8fa7f6374b427751442b1c3adfa282e10267e461 Mon Sep 17 00:00:00 2001
From: ishaan <ishaanbhalla1998@gmail.com>
Date: Wed, 18 Sep 2024 15:34:17 -0700
Subject: [PATCH 1/3] feat!: add button atomic component

- Added Button.tsx and Button.types.d.ts.
  - Wrapped MuiButton in new Button component.
- Added test suite for button, Button.test.tsx.
---
 src/components/atoms/Button.tsx        | 21 +++++++
 src/types/Button.types.d.ts            | 12 ++++
 tests/components/atoms/Button.test.tsx | 85 ++++++++++++++++++++++++++
 3 files changed, 118 insertions(+)
 create mode 100644 src/components/atoms/Button.tsx
 create mode 100644 src/types/Button.types.d.ts
 create mode 100644 tests/components/atoms/Button.test.tsx

diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
new file mode 100644
index 0000000..400e80f
--- /dev/null
+++ b/src/components/atoms/Button.tsx
@@ -0,0 +1,21 @@
+'use client';
+import React from 'react';
+import { Button as MuiButton } from '@mui/material';
+import { ButtonProps } from '@components/atoms/Button';
+
+const Button: React.FC<ButtonProps> = ({
+  label,
+  variant = 'contained',
+  color = 'primary',
+  size = 'medium',
+  onClick,
+  ...props
+}: ButtonProps) => {
+  return (
+    <MuiButton variant={variant} color={color} size={size} onClick={onClick} {...props}>
+      {label}
+    </MuiButton>
+  );
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/types/Button.types.d.ts b/src/types/Button.types.d.ts
new file mode 100644
index 0000000..493f3cb
--- /dev/null
+++ b/src/types/Button.types.d.ts
@@ -0,0 +1,12 @@
+declare module '@components/atoms/Button' {
+    import { FC } from 'react';
+    import { ButtonProps as MuiButtonProps } from '@mui/material/Button';
+  
+    export interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
+      label: string;
+      color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    }
+  
+    const Button: FC<ButtonProps>;
+    export default Button;
+}
\ No newline at end of file
diff --git a/tests/components/atoms/Button.test.tsx b/tests/components/atoms/Button.test.tsx
new file mode 100644
index 0000000..ba688e5
--- /dev/null
+++ b/tests/components/atoms/Button.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from '../../../src/components/atoms/Button';
+import { Button as MuiButton } from '@mui/material';
+import '@testing-library/jest-dom';
+
+jest.mock('@mui/material', () => ({
+  Button: jest.fn().mockImplementation(({ children, ...props }) => (
+    <button {...props}>{children}</button>
+  )),
+}));
+
+describe('Button component', () => {
+  const defaultProps = {
+    label: 'Test Button',
+    variant: 'contained' as const,
+    color: 'primary' as const,
+    size: 'medium' as const,
+    onClick: jest.fn(),
+  };
+
+  beforeEach(() => {
+    (MuiButton as jest.Mock).mockClear();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the button with correct label', () => {
+    render(<Button {...defaultProps} />);
+    expect(screen.getByText('Test Button')).toBeInTheDocument();
+  });
+
+  it('should pass the correct variant prop to MuiButton', () => {
+    render(<Button {...defaultProps} variant="outlined" />);
+    expect(MuiButton).toHaveBeenCalledWith(
+      expect.objectContaining({ variant: 'outlined' }),
+      expect.anything()
+    );
+  });
+
+  it('should pass the correct color prop to MuiButton', () => {
+    render(<Button {...defaultProps} color="secondary" />);
+    expect(MuiButton).toHaveBeenCalledWith(
+      expect.objectContaining({ color: 'secondary' }),
+      expect.anything()
+    );
+  });
+
+  it('should pass the correct size prop to MuiButton', () => {
+    render(<Button {...defaultProps} size="small" />);
+    expect(MuiButton).toHaveBeenCalledWith(
+      expect.objectContaining({ size: 'small' }),
+      expect.anything()
+    );
+  });
+
+  it('should call onClick when the button is clicked', () => {
+    render(<Button {...defaultProps} />);
+    fireEvent.click(screen.getByText('Test Button'));
+    expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should use default values when no props are provided', () => {
+    render(<Button label="Default Button" />);
+    expect(MuiButton).toHaveBeenCalledWith(
+      expect.objectContaining({
+        variant: 'contained',
+        color: 'primary',
+        size: 'medium',
+      }),
+      expect.anything()
+    );
+    expect(screen.getByText('Default Button')).toBeInTheDocument();
+  });
+
+  it('should pass additional props to MuiButton', () => {
+    render(<Button {...defaultProps} disabled />);
+    expect(MuiButton).toHaveBeenCalledWith(
+      expect.objectContaining({ disabled: true }),
+      expect.anything()
+    );
+  });
+});
\ No newline at end of file

From df0fdf8621993d27ab2a11a3e210ed19dec7e530 Mon Sep 17 00:00:00 2001
From: ishaan <ishaanbhalla1998@gmail.com>
Date: Thu, 19 Sep 2024 17:36:46 -0700
Subject: [PATCH 2/3] feat: add accessibility props

- Added aria-label and tabIndex to Button.tsx and Button.types.d.ts.
- Added accessibility tests in button test suite.
---
 src/components/atoms/Button.tsx        | 12 +++++++++++-
 src/types/Button.types.d.ts            | 23 +++++++++++++----------
 tests/components/atoms/Button.test.tsx | 12 ++++++++++++
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index 400e80f..151ae98 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -9,10 +9,20 @@ const Button: React.FC<ButtonProps> = ({
   color = 'primary',
   size = 'medium',
   onClick,
+  ariaLabel = '', 
+  tabIndex = 0,
   ...props
 }: ButtonProps) => {
   return (
-    <MuiButton variant={variant} color={color} size={size} onClick={onClick} {...props}>
+    <MuiButton
+      variant={variant}
+      color={color}
+      size={size}
+      onClick={onClick}
+      aria-label={ariaLabel || label}
+      tabIndex={tabIndex}
+      {...props}
+    >
       {label}
     </MuiButton>
   );
diff --git a/src/types/Button.types.d.ts b/src/types/Button.types.d.ts
index 493f3cb..51417d7 100644
--- a/src/types/Button.types.d.ts
+++ b/src/types/Button.types.d.ts
@@ -1,12 +1,15 @@
 declare module '@components/atoms/Button' {
-    import { FC } from 'react';
-    import { ButtonProps as MuiButtonProps } from '@mui/material/Button';
-  
-    export interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
-      label: string;
-      color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
-    }
-  
-    const Button: FC<ButtonProps>;
-    export default Button;
+  import { FC } from 'react';
+  import { ButtonProps as MuiButtonProps } from '@mui/material/Button';
+
+  export interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
+    label: string;
+    color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    ariaLabel?: string;
+    tabIndex?: number;
+    role?: string;
+  }
+
+  const Button: FC<ButtonProps>;
+  export default Button;
 }
\ No newline at end of file
diff --git a/tests/components/atoms/Button.test.tsx b/tests/components/atoms/Button.test.tsx
index ba688e5..21eff1d 100644
--- a/tests/components/atoms/Button.test.tsx
+++ b/tests/components/atoms/Button.test.tsx
@@ -82,4 +82,16 @@ describe('Button component', () => {
       expect.anything()
     );
   });
+
+  it('should pass the correct aria-label to the button', () => {
+    const ariaLabel = 'Click me';
+    render(<Button {...defaultProps} ariaLabel={ariaLabel} />);
+    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+  });
+
+  it('should set the correct tabIndex on the button', () => {
+    const tabIndex = 1;
+    render(<Button {...defaultProps} tabIndex={tabIndex} />);
+    expect(screen.getByText('Test Button')).toHaveAttribute('tabindex', '1');
+  });
 });
\ No newline at end of file

From fccc02a48d4d158989df942d166fa617dbb7d763 Mon Sep 17 00:00:00 2001
From: ishaan <ishaanbhalla1998@gmail.com>
Date: Thu, 19 Sep 2024 17:42:43 -0700
Subject: [PATCH 3/3] feat: add sx prop to Button

- Adds sx prop to make Button customizable.
- Added test in Button to ensure sx prop is contained in Button.
---
 src/components/atoms/Button.tsx        |  2 ++
 src/types/Button.types.d.ts            |  2 ++
 tests/components/atoms/Button.test.tsx | 14 ++++++++++++++
 3 files changed, 18 insertions(+)

diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index 151ae98..0176924 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -9,6 +9,7 @@ const Button: React.FC<ButtonProps> = ({
   color = 'primary',
   size = 'medium',
   onClick,
+  sx = {},
   ariaLabel = '', 
   tabIndex = 0,
   ...props
@@ -19,6 +20,7 @@ const Button: React.FC<ButtonProps> = ({
       color={color}
       size={size}
       onClick={onClick}
+      sx = {sx}
       aria-label={ariaLabel || label}
       tabIndex={tabIndex}
       {...props}
diff --git a/src/types/Button.types.d.ts b/src/types/Button.types.d.ts
index 51417d7..465a4c8 100644
--- a/src/types/Button.types.d.ts
+++ b/src/types/Button.types.d.ts
@@ -1,6 +1,7 @@
 declare module '@components/atoms/Button' {
   import { FC } from 'react';
   import { ButtonProps as MuiButtonProps } from '@mui/material/Button';
+  import { SxProps, Theme } from '@mui/system';
 
   export interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
     label: string;
@@ -8,6 +9,7 @@ declare module '@components/atoms/Button' {
     ariaLabel?: string;
     tabIndex?: number;
     role?: string;
+    sx?: SxProps<Theme>; 
   }
 
   const Button: FC<ButtonProps>;
diff --git a/tests/components/atoms/Button.test.tsx b/tests/components/atoms/Button.test.tsx
index 21eff1d..ab7f0ad 100644
--- a/tests/components/atoms/Button.test.tsx
+++ b/tests/components/atoms/Button.test.tsx
@@ -94,4 +94,18 @@ describe('Button component', () => {
     render(<Button {...defaultProps} tabIndex={tabIndex} />);
     expect(screen.getByText('Test Button')).toHaveAttribute('tabindex', '1');
   });
+
+  it('should apply sx prop to the button', () => {
+    const sx = { margin: 2 };
+    render(<Button {...defaultProps} sx={sx} />);
+    
+    expect(MuiButton).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sx: expect.objectContaining({
+          margin: 2,
+        }),
+      }),
+      expect.anything()
+    );
+  });
 });
\ No newline at end of file