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 => (
}
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 =
Swoosh Branding
@@ -27,4 +29,28 @@ describe('Logo component', () => {
const { getByText } = render()
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(
+
+ )
+ 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): 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 (