Add Address, cleanup Footer.stories

src/components/Footer/Address/Address.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Address } from './Address'
+
+export default {
+  title: 'Address',
+  parameters: {
+    info: `
+      Used within 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:thisnotfake@emailaddress.com">
+        thisnotfake@emailaddress.com
+      </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:thisnotfake@emailaddress.com">
+    thisnotfake@emailaddress.com
+  </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)')).toBeInTheDocument()
+    expect(getByText('thisnotfake@emailaddress.com')).toBeInTheDocument()
+  })
+})

src/components/Footer/Address/Address.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+type AddressProps = {
+  /* 
+    Contact info items - e.g. anchor tags or text for email, phone, website, etc.
+  */
+  items: React.ReactNode[]
+}
+
+export const Address = ({
+  items,
+}: AddressProps & React.HTMLAttributes<HTMLElement>): React.ReactElement => (
+  <address className="usa-footer__address">
+    <div className="grid-row grid-gap">
+      {items.map((item, i) => (
+        <div
+          className="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto"
+          key={`addressItem-${i}`}>
+          <div className="usa-footer__contact-info">{item}</div>
+        </div>
+      ))}
+    </div>
+  </address>
+)

src/components/Footer/Footer.stories.tsx

@@ -2,7 +2,9 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import { Address } from './Address/Address'
 import { Footer } from './Footer'
+import { Logo } from './Logo/Logo'
 
 export default {
   title: 'Footer',
@@ -21,23 +23,6 @@ type SizeProps = {
   slim?: boolean
 }
 
-const Address = (): React.ReactElement => (
-  <address className="usa-footer__address">
-    <div className="grid-row grid-gap">
-      <div className="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
-        <div className="usa-footer__contact-info">
-          <a href="tel:1-800-555-5555"> (800) CALL-GOVT</a>
-        </div>
-      </div>
-      <div className="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
-        <div className="usa-footer__contact-info">
-          <a href="mailto:info@agency.gov"> </a>info@agency.gov
-        </div>
-      </div>
-    </div>
-  </address>
-)
-
 // Placeholder until a dynamic Nav is built out and can be used
 const MockNav = ({ medium, slim }: SizeProps): React.ReactElement => {
   const itemClasses = classnames(
@@ -68,24 +53,6 @@ const MockNav = ({ medium, slim }: SizeProps): React.ReactElement => {
   )
 }
 
-const Logo = ({ big, medium, slim }: SizeProps): React.ReactElement => {
-  const containerClasses = classnames('usa-footer__logo grid-row', {
-    'mobile-lg:grid-col-6 mobile-lg:grid-gap-2': big || medium,
-    'grid-gap-2': slim,
-  })
-
-  return (
-    <div className={containerClasses}>
-      <div className="grid-col-auto">
-        <img className="usa-footer__logo-img" src="#" alt="img alt text" />
-      </div>
-      <div className="grid-col-auto">
-        <h3 className="usa-footer__logo-heading">Name of Agency</h3>
-      </div>
-    </div>
-  )
-}
-
 export const SlimFooter = (): React.ReactElement => (
   <Footer
     slim
@@ -95,10 +62,31 @@ export const SlimFooter = (): React.ReactElement => (
           <MockNav slim />
         </div>
         <div className="tablet:grid-col-4">
-          <Address />
+          <Address
+            items={[
+              <a key="telephone" href="tel:1-800-555-5555">
+                (800) CALL-GOVT
+              </a>,
+              <a key="email" href="mailto:info@agency.gov">
+                info@agency.gov
+              </a>,
+            ]}
+          />
         </div>
       </div>
     }
-    secondary={<Logo slim />}
+    secondary={
+      <Logo
+        slim
+        image={
+          <img
+            className="usa-footer__logo-img"
+            src="/logo-img.png"
+            alt="img alt text"
+          />
+        }
+        heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+      />
+    }
   />
 )

src/components/Footer/Footer.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import classnames from 'classnames'
 
 type FooterProps = {
-  className?: string
   big?: boolean
   medium?: boolean
   slim?: boolean
@@ -20,7 +19,7 @@ type FooterProps = {
 export const Footer = (
   props: FooterProps & React.HTMLAttributes<HTMLElement>
 ): React.ReactElement => {
-  const { className, big, medium, slim, primary, secondary } = props
+  const { big, medium, slim, primary, secondary, ...footerAttributes } = props
 
   const classes = classnames(
     'usa-footer',
@@ -29,7 +28,7 @@ export const Footer = (
       'usa-footer--medium': medium,
       'usa-footer--slim': slim,
     },
-    className
+    footerAttributes.className
   )
 
   return (