Merge pull request #248 from MetroStar/big-button-updates

Big Button Updates

Author: jbouder

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@metrostar/comet-uswds",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "React with TypeScript Component Library based on USWDS 3.0.",
   "license": "Apache-2.0",
   "main": "./dist/cjs/index.js",

packages/comet-uswds/package.json

@@ -10,6 +10,7 @@ const meta: Meta<typeof Button> = {
     id: { required: true },
     type: { control: 'select', required: true },
     variant: { control: 'select' },
+    size: { control: 'select' },
     disabled: { control: 'boolean' },
   },
 };
@@ -22,6 +23,7 @@ Default.args = {
   id: 'button-1',
   type: 'button',
   variant: 'default',
+  size: 'default',
   className: '',
   disabled: false,
 };

packages/comet-uswds/src/components/button/button.stories.tsx

@@ -43,16 +43,16 @@ describe('Button', () => {
     expect(screen.getByTestId('button')).toHaveClass('usa-button--inverse');
   });
 
-  test('should render a big button', () => {
-    render(<Button id="button" variant="big"></Button>);
-    expect(screen.getByTestId('button')).toHaveClass('usa-button--big');
-  });
-
   test('should render a unstyled button', () => {
     render(<Button id="button" variant="unstyled"></Button>);
     expect(screen.getByTestId('button')).toHaveClass('usa-button--unstyled');
   });
 
+  test('should render a big button', () => {
+    render(<Button id="button" size="big"></Button>);
+    expect(screen.getByTestId('button')).toHaveClass('usa-button--big');
+  });
+
   test('should render a button with custom className', () => {
     render(<Button id="button" className="usa-custom"></Button>);
     expect(screen.getByTestId('button')).toHaveClass('usa-custom');

packages/comet-uswds/src/components/button/button.test.tsx

@@ -21,8 +21,11 @@ export interface ButtonProps {
     | 'base'
     | 'outline'
     | 'outline-inverse'
-    | 'big'
     | 'unstyled';
+  /**
+   * The size of the button
+   */
+  size?: 'default' | 'big';
   /**
    * A custom class to apply to the component
    */
@@ -44,6 +47,7 @@ export const Button = ({
   id,
   type = 'button',
   variant = 'default',
+  size = 'default',
   className,
   children,
   ...props
@@ -57,8 +61,8 @@ export const Button = ({
       'usa-button--base': variant === 'base',
       'usa-button--outline': variant === 'outline',
       'usa-button--outline usa-button--inverse': variant === 'outline-inverse',
-      'usa-button--big': variant === 'big',
       'usa-button--unstyled': variant === 'unstyled',
+      'usa-button--big': size === 'big',
     },
     className,
   );