feat(Button): Add deprecation warnings, size preferred

* Log deprecation warnings * Prefer size over big/small; test that interaction
trussworks · Jun 4, 2020 · 5d91226 · 5d91226
1 parent 589ec5e
commit 5d91226
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -47,13 +47,13 @@ export const inverse = (): React.ReactElement => (
 )
 
 export const big = (): React.ReactElement => (
-  <Button type="button" big>
+  <Button type="button" size="big">
     Click Me
   </Button>
 )
 
 export const small = (): React.ReactElement => (
-  <Button type="button" small>
+  <Button type="button" size="small">
     Click Me
   </Button>
 )

diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -1,9 +1,15 @@
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
+jest.mock('../../deprecation')
+import { deprecationWarning } from '../../deprecation'
 import { Button } from './Button'
 
 describe('Button component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('renders without errors', () => {
     const { queryByTestId } = render(<Button type="button">Click Me</Button>)
     expect(queryByTestId('button')).toBeInTheDocument()
@@ -15,19 +21,17 @@ describe('Button component', () => {
       expect(queryByTestId('button')).toHaveClass('usa-button')
     })
 
-    const optionalClasses = [
+    const optionalBooleanClasses = [
       ['secondary', 'usa-button--secondary'],
       ['base', 'usa-button--base'],
       ['accent', 'usa-button--accent-cool'],
       ['outline', 'usa-button--outline'],
       ['inverse', 'usa-button--inverse'],
-      ['big', 'usa-button--big'],
-      ['small', 'usa-button--small'],
       ['icon', 'usa-button--icon'],
       ['unstyled', 'usa-button--unstyled'],
     ]
 
-    optionalClasses.map((data) => {
+    optionalBooleanClasses.map((data) => {
       it(`${data[1]}`, () => {
         const additionalProps: { [key: string]: boolean } = {}
         additionalProps[data[0]] = true
@@ -49,6 +53,7 @@ describe('Button component', () => {
       )
       expect(queryByTestId('button')).toHaveClass('usa-button--small')
       expect(queryByTestId('button')).not.toHaveClass('usa-button--big')
+      expect(deprecationWarning).toHaveBeenCalledTimes(0)
     })
 
     it('renders uswds class for size big', () => {
@@ -59,6 +64,30 @@ describe('Button component', () => {
       )
       expect(queryByTestId('button')).toHaveClass('usa-button--big')
       expect(queryByTestId('button')).not.toHaveClass('usa-button--small')
+      expect(deprecationWarning).toHaveBeenCalledTimes(0)
+    })
+
+    it('prefers size to deprecated big', () => {
+      Button.bind
+      const { queryByTestId } = render(
+        <Button type="button" size="small" big>
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--small')
+      expect(queryByTestId('button')).not.toHaveClass('usa-button--big')
+      expect(deprecationWarning).toHaveBeenCalledTimes(1)
+    })
+
+    it('prefers size to deprecated small', () => {
+      const { queryByTestId } = render(
+        <Button type="button" size="big" small>
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--big')
+      expect(queryByTestId('button')).not.toHaveClass('usa-button--small')
+      expect(deprecationWarning).toHaveBeenCalledTimes(1)
     })
   })
 

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
+import { deprecationWarning } from '../../deprecation'
 
 interface ButtonProps {
   type: 'button' | 'submit' | 'reset'
@@ -44,14 +45,16 @@ export const Button = (
     className,
   } = props
 
-  let isBig = big || false
-  let isSmall = small || false
-  if (size === 'big') {
-    isBig = true
+  if (big) {
+    deprecationWarning('Button property big is deprecated.  Use size')
   }
-  if (size === 'small') {
-    isSmall = true
+  if (small) {
+    deprecationWarning('Button property small is deprecated.  Use size')
   }
+
+  const isBig = size ? size === 'big' : big
+  const isSmall = size ? size === 'small' : small
+
   const classes = classnames(
     'usa-button',
     {

diff --git a/src/deprecation.ts b/src/deprecation.ts
@@ -0,0 +1,2 @@
+export const deprecationWarning =
+  process.env.NODE_ENV !== 'production' ? console.warn : () => {}