From 10520cfc72465cf9d7c9f9050dc2b58f2ac1b2f9 Mon Sep 17 00:00:00 2001
From: Andrew Hobson <21983+ahobson@users.noreply.github.com>
Date: Wed, 24 Jun 2020 10:53:28 -0400
Subject: [PATCH] feat(Logo): use size prop, deprecate boolean types (#268)

* fixes #264
---
 src/components/Footer/Logo/Logo.stories.tsx |  4 +--
 src/components/Footer/Logo/Logo.test.tsx    | 26 ++++++++++++++++
 src/components/Footer/Logo/Logo.tsx         | 33 ++++++++++++++++++---
 3 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer/Logo/Logo.stories.tsx b/src/components/Footer/Logo/Logo.stories.tsx
index 90137b0bf2..d715af04a8 100644
--- a/src/components/Footer/Logo/Logo.stories.tsx
+++ b/src/components/Footer/Logo/Logo.stories.tsx
@@ -10,7 +10,7 @@ export default {
   parameters: {
     info: `
     Display logo image with optional heading.  Used in USWDS 2.0 Footer component.
-    
+
     Source: https://designsystem.digital.gov/components/form-controls/#footer
     `,
   },
@@ -19,7 +19,7 @@ export default {
 export const Slim = (): React.ReactElement => (
   <div className="usa-footer__secondary-section">
     <Logo
-      slim
+      size="slim"
       image={
         <img className="usa-footer__logo-img" src={logoImg} alt="Mock logo" />
       }
diff --git a/src/components/Footer/Logo/Logo.test.tsx b/src/components/Footer/Logo/Logo.test.tsx
index 2522834649..87720fad79 100644
--- a/src/components/Footer/Logo/Logo.test.tsx
+++ b/src/components/Footer/Logo/Logo.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 
+jest.mock('../../../deprecation')
+import { deprecationWarning } from '../../../deprecation'
 import { Logo } from './Logo'
 
 const heading = <h3 className="usa-footer__logo-heading">Swoosh Branding</h3>
@@ -27,4 +29,28 @@ describe('Logo component', () => {
     const { getByText } = render(<Logo image={logoImage} heading={heading} />)
     expect(getByText('Swoosh Branding')).toBeInTheDocument()
   })
+
+  describe('renders with size prop', () => {
+    beforeEach(() => {
+      jest.clearAllMocks()
+    })
+
+    it.each([
+      ['big', 'slim', '.mobile-lg\\:grid-col-6'],
+      ['medium', 'slim', '.mobile-lg\\:grid-col-6'],
+      ['slim', 'big', '.grid-gap-2'],
+    ])(
+      'prefers size to deprecated %s',
+      (sizeString, deprecatedKey, expectedClass) => {
+        const size = sizeString as 'big' | 'medium' | 'slim'
+        const deprecatedProps: { [key: string]: boolean } = {}
+        deprecatedProps[`${deprecatedKey}`] = true
+        const { container } = render(
+          <Logo image={logoImage} size={size} {...deprecatedProps} />
+        )
+        expect(container.querySelector(expectedClass)).toBeInTheDocument()
+        expect(deprecationWarning).toHaveBeenCalledTimes(1)
+      }
+    )
+  })
 })
diff --git a/src/components/Footer/Logo/Logo.tsx b/src/components/Footer/Logo/Logo.tsx
index 6110a01d07..a1220c01b1 100644
--- a/src/components/Footer/Logo/Logo.tsx
+++ b/src/components/Footer/Logo/Logo.tsx
@@ -1,15 +1,27 @@
 import React from 'react'
 import classnames from 'classnames'
+import { deprecationWarning } from '../../../deprecation'
 
 type LogoProps = {
+  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
   heading?: React.ReactNode
   image: React.ReactNode
 }
 
 export const Logo = ({
+  size,
   big,
   medium,
   slim,
@@ -17,18 +29,31 @@ export const Logo = ({
   image,
   ...elementAttributes
 }: LogoProps & React.HtmlHTMLAttributes<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 containerClasses = classnames(
     'usa-footer__logo grid-row',
     {
-      'mobile-lg:grid-col-6 mobile-lg:grid-gap-2': big || medium,
-      'grid-gap-2': slim,
+      'mobile-lg:grid-col-6 mobile-lg:grid-gap-2': isBig || isMedium,
+      'grid-gap-2': isSlim,
     },
     elementAttributes.className
   )
 
   const columnClasses = classnames({
-    'mobile-lg:grid-col-auto': big || medium,
-    'grid-col-auto': slim,
+    'mobile-lg:grid-col-auto': isBig || isMedium,
+    'grid-col-auto': isSlim,
   })
 
   return (