feat(Address): convert to enum size prop, deprecate boolean

src/components/Footer/Address/Address.stories.tsx

@@ -6,7 +6,7 @@ export default {
   parameters: {
     info: `
       Display address items (most likely links or simple text) in a row, wrapped in address tag.  Used in USWDS 2.0 Footer component.
-      
+
       Source: https://designsystem.digital.gov/components/form-controls/#footer
       `,
   },

src/components/Footer/Address/Address.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 
+jest.mock('../../../deprecation')
+import { deprecationWarning } from '../../../deprecation'
 import { Address } from './Address'
 
 const addressItems = [
@@ -23,4 +25,31 @@ describe('Address component', () => {
     expect(getByText('(123) 456 - 7890')).toBeInTheDocument()
     expect(getByText('[email protected]')).toBeInTheDocument()
   })
+
+  describe('renders with size prop', () => {
+    beforeEach(() => {
+      jest.clearAllMocks()
+    })
+
+    it.each([
+      ['big', 'slim', '.grid-col-auto', '.mobile-lg\\:grid-col-12'],
+      ['medium', 'slim', '.grid-col-auto', '.mobile-lg\\:grid-col-12'],
+      ['slim', 'big', '.mobile-lg\\:grid-col-12', undefined],
+    ])(
+      'prefers size to deprecated %s',
+      (sizeString, deprecatedKey, expectedClass, missingClass) => {
+        const size = sizeString as 'big' | 'medium' | 'slim'
+        const deprecatedProps: { [key: string]: boolean } = {}
+        deprecatedProps[`${deprecatedKey}`] = true
+        const { container } = render(
+          <Address items={addressItems} size={size} {...deprecatedProps} />
+        )
+        expect(container.querySelector(expectedClass)).toBeInTheDocument()
+        if (missingClass !== undefined) {
+          expect(container.querySelector(missingClass)).not.toBeInTheDocument()
+        }
+        expect(deprecationWarning).toHaveBeenCalledTimes(1)
+      }
+    )
+  })
 })

src/components/Footer/Address/Address.tsx

@@ -1,28 +1,54 @@
 import React from 'react'
 import classnames from 'classnames'
+import { deprecationWarning } from '../../../deprecation'
+
 type AddressProps = {
+  size?: 'big' | 'medium' | 'slim'
+  /**
+   * @deprecated since 1.6.0, use size
+   */
   big?: boolean
+  /**
+   * @deprecated since 1.6.0, use size
+   */
   medium?: boolean
+  /**
+   * @deprecated since 1.6.0, use size
+   */
   slim?: boolean
-  /* 
-    Contact info items - e.g. anchor tags or text for email, phone, website, etc.
-  */
+  /*
+     Contact info items - e.g. anchor tags or text for email, phone, website, etc.
+   */
   items: React.ReactNode[]
 }
 
 export const Address = ({
+  size,
   big,
   medium,
   slim,
   items,
 }: AddressProps & React.HTMLAttributes<HTMLElement>): React.ReactElement => {
+  if (big) {
+    deprecationWarning('FooterNav property big is deprecated.  Use size')
+  }
+  if (medium) {
+    deprecationWarning('FooterNav property medium is deprecated.  Use size')
+  }
+  if (slim) {
+    deprecationWarning('FooterNav property slim is deprecated.  Use size')
+  }
+  const isBig = size ? size === 'big' : big
+  const isMedium = size ? size === 'medium' : medium
+  const isSlim = size ? size === 'slim' : slim
+
   const itemClasses = classnames({
-    'grid-col-auto': big || medium,
-    'grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto': slim,
+    'grid-col-auto': isBig || isMedium,
+    'grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto': isSlim,
   })
   return (
     <address className="usa-footer__address">
-      {slim ? (
+      {isSlim ? (
         <div className="grid-row grid-gap">
           {items.map((item, i) => (
             <div className={itemClasses} key={`addressItem-${i}`}>