diff --git a/src/components/Footer/Address/Address.stories.tsx b/src/components/Footer/Address/Address.stories.tsx index d9cde1ae50..d00d0f001c 100644 --- a/src/components/Footer/Address/Address.stories.tsx +++ b/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 `, }, diff --git a/src/components/Footer/Address/Address.test.tsx b/src/components/Footer/Address/Address.test.tsx index b1cf52e925..6768c93aaf 100644 --- a/src/components/Footer/Address/Address.test.tsx +++ b/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('thisnotfake@emailaddress.com')).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( +
+ ) + expect(container.querySelector(expectedClass)).toBeInTheDocument() + if (missingClass !== undefined) { + expect(container.querySelector(missingClass)).not.toBeInTheDocument() + } + expect(deprecationWarning).toHaveBeenCalledTimes(1) + } + ) + }) }) diff --git a/src/components/Footer/Address/Address.tsx b/src/components/Footer/Address/Address.tsx index 29a8e2850e..3c43ed9c60 100644 --- a/src/components/Footer/Address/Address.tsx +++ b/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): 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 (
- {slim ? ( + {isSlim ? (
{items.map((item, i) => (