feat: Footer Component #142

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 => (
+  <Address
+    items={[
+      <a key="phone" href="tel:123-456-7890">
+        (123) 456 - 7890
+      </a>,
+      <a key="email" href="mailto:[email protected]">
+        [email protected]
+      </a>,
+    ]}
+  />
+)

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 = [
+  <a key="phone" href="tel:123-456-7890">
+    (123) 456 - 7890
+  </a>,
+  <a key="email" href="mailto:[email protected]">
+    [email protected]
+  </a>,
+]
+
+describe('Address component', () => {
+  it('renders without errors', () => {
+    const { container } = render(<Address items={addressItems} />)
+    expect(container.querySelector('address')).toBeInTheDocument()
+  })
+
+  it('renders address items', () => {
+    const { getByText } = render(<Address items={addressItems} />)
+    expect(getByText('(123) 456 - 7890')).toBeInTheDocument()
+    expect(getByText('[email protected]')).toBeInTheDocument()
+  })
+})

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<HTMLElement>): React.ReactElement => {
+  const itemClasses = classnames({
+    'grid-col-auto': big || medium,
+    'grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto': slim,
+  })
+  return (
+    <address className="usa-footer__address">
+      {slim ? (
+        <div className="grid-row grid-gap">
+          {items.map((item, i) => (
+            <div className={itemClasses} key={`addressItem-${i}`}>
+              <div className="usa-footer__contact-info">{item}</div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="usa-footer__contact-info grid-row grid-gap">
+          {items.map((item, i) => (
+            <div className={itemClasses} key={`addressItem-${i}`}>
+              {item}
+            </div>
+          ))}
+        </div>
+      )}
+    </address>
+  )
+}