diff --git a/src/components/Footer/Address/Address.stories.tsx b/src/components/Footer/Address/Address.stories.tsx new file mode 100644 index 0000000000..d9cde1ae50 --- /dev/null +++ b/src/components/Footer/Address/Address.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { Address } from './Address' + +export default { + title: 'Footer/Address', + 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 + `, + }, +} + +export const WithLinks = (): React.ReactElement => ( +
+ (123) 456 - 7890 + , + + thisnotfake@emailaddress.com + , + ]} + /> +) diff --git a/src/components/Footer/Address/Address.test.tsx b/src/components/Footer/Address/Address.test.tsx new file mode 100644 index 0000000000..b1cf52e925 --- /dev/null +++ b/src/components/Footer/Address/Address.test.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { render } from '@testing-library/react' + +import { Address } from './Address' + +const addressItems = [ + + (123) 456 - 7890 + , + + thisnotfake@emailaddress.com + , +] + +describe('Address component', () => { + it('renders without errors', () => { + const { container } = render(
) + expect(container.querySelector('address')).toBeInTheDocument() + }) + + it('renders address items', () => { + const { getByText } = render(
) + expect(getByText('(123) 456 - 7890')).toBeInTheDocument() + expect(getByText('thisnotfake@emailaddress.com')).toBeInTheDocument() + }) +}) diff --git a/src/components/Footer/Address/Address.tsx b/src/components/Footer/Address/Address.tsx new file mode 100644 index 0000000000..29a8e2850e --- /dev/null +++ b/src/components/Footer/Address/Address.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import classnames from 'classnames' +type AddressProps = { + big?: boolean + medium?: boolean + slim?: boolean + /* + Contact info items - e.g. anchor tags or text for email, phone, website, etc. + */ + items: React.ReactNode[] +} + +export const Address = ({ + big, + medium, + slim, + items, +}: AddressProps & React.HTMLAttributes): React.ReactElement => { + const itemClasses = classnames({ + 'grid-col-auto': big || medium, + 'grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto': slim, + }) + return ( +
+ {slim ? ( +
+ {items.map((item, i) => ( +
+
{item}
+
+ ))} +
+ ) : ( +
+ {items.map((item, i) => ( +
+ {item} +
+ ))} +
+ )} +
+ ) +} diff --git a/src/components/Footer/Footer/Footer.stories.tsx b/src/components/Footer/Footer/Footer.stories.tsx new file mode 100644 index 0000000000..8d9532de39 --- /dev/null +++ b/src/components/Footer/Footer/Footer.stories.tsx @@ -0,0 +1,399 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import React from 'react' + +import { Address } from '../Address/Address' +import { Button } from '../../Button/Button' +import { Footer } from './Footer' +import { FooterNav } from '../FooterNav/FooterNav' +import { Form } from '../../forms/Form/Form' +import { Label } from '../../forms/Label/Label' +import { Logo } from '../Logo/Logo' +import { SocialLinks } from '../SocialLinks/SocialLinks' +import { TextInput } from '../../forms/TextInput/TextInput' + +// assets +import logoImg from 'uswds/src/img/logo-img.png' + +export default { + title: 'Footer/Footer', + parameters: { + info: ` + USWDS 2.0 Footer component + + Source: https://designsystem.digital.gov/components/form-controls/#footer + `, + }, +} + +const mockSubmit = (): void => { + /* mock submit fn */ +} + +const returnToTop = ( +
+ +
+) + +const SignUpForm = (): React.ReactElement => { + return ( +
+

Sign up

+
+ + + + +
+ ) +} + +export const SlimFooter = (): React.ReactElement => ( +