feat(button): size enum on Button component

Provide a size enum to eventually replace the small and big boolean props on Button

re #187

src/components/Button/Button.test.tsx

@@ -40,6 +40,26 @@ describe('Button component', () => {
         expect(queryByTestId('button')).toHaveClass(data[1])
       })
     })
+
+    it('renders uswds class for size small', () => {
+      const { queryByTestId } = render(
+        <Button type="button" size="small">
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--small')
+      expect(queryByTestId('button')).not.toHaveClass('usa-button--big')
+    })
+
+    it('renders uswds class for size big', () => {
+      const { queryByTestId } = render(
+        <Button type="button" size="big">
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--big')
+      expect(queryByTestId('button')).not.toHaveClass('usa-button--small')
+    })
   })
 
   it('implements an onClick handler', () => {

src/components/Button/Button.tsx

@@ -10,7 +10,14 @@ interface ButtonProps {
   accent?: boolean
   outline?: boolean
   inverse?: boolean
+  size?: 'big' | 'small'
+  /**
+   * @deprecated since 1.5.0, use size
+   */
   big?: boolean
+  /**
+   * @deprecated since 1.5.0, use size
+   */
   small?: boolean
   icon?: boolean
   unstyled?: boolean
@@ -28,6 +35,7 @@ export const Button = (
     accent,
     outline,
     inverse,
+    size,
     big,
     small,
     icon,
@@ -36,6 +44,14 @@ export const Button = (
     className,
   } = props
 
+  let isBig = big || false
+  let isSmall = small || false
+  if (size === 'big') {
+    isBig = true
+  }
+  if (size === 'small') {
+    isSmall = true
+  }
   const classes = classnames(
     'usa-button',
     {
@@ -44,8 +60,8 @@ export const Button = (
       'usa-button--accent-cool': accent,
       'usa-button--outline': outline,
       'usa-button--inverse': inverse,
-      'usa-button--big': big,
-      'usa-button--small': small,
+      'usa-button--big': isBig,
+      'usa-button--small': isSmall,
       'usa-button--icon': icon,
       'usa-button--unstyled': unstyled,
     },