Add medium footer (#126)

* Add FooterNav, SocialLinks components * Add medium Footer story * Add medium styles to Logo, Address components
trussworks · May 5, 2020 · 9da3ae4 · 9da3ae4
1 parent 379788f
commit 9da3ae4
Show file tree

Hide file tree

Showing 10 changed files with 309 additions and 67 deletions.
diff --git a/src/components/Footer/Address/Address.tsx b/src/components/Footer/Address/Address.tsx
@@ -1,24 +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 => (
-  <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>
+}: 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>
-      ))}
-    </div>
-  </address>
-)
+      )}
+    </address>
+  )
+}
diff --git a/src/components/Footer/Footer.stories.tsx b/src/components/Footer/Footer.stories.tsx
@@ -1,11 +1,12 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
-import classnames from 'classnames'
 
 import { Address } from './Address/Address'
 import { Button } from '../Button/Button'
 import { Footer } from './Footer'
+import { FooterNav } from './FooterNav/FooterNav'
 import { Logo } from './Logo/Logo'
+import { SocialLinks } from './SocialLinks/SocialLinks'
 
 export default {
   title: 'Footer',
@@ -18,42 +19,6 @@ export default {
   },
 }
 
-type SizeProps = {
-  big?: boolean
-  medium?: boolean
-  slim?: boolean
-}
-
-// Placeholder until a dynamic Nav is built out and can be used
-const MockNav = ({ medium, slim }: SizeProps): React.ReactElement => {
-  const itemClasses = classnames(
-    'desktop:grid-col-auto usa-footer__primary-content',
-    {
-      'mobile-lg:grid-col-4': medium,
-      'mobile-lg:grid-col-6': slim,
-    }
-  )
-
-  const items = Array(4).fill({
-    href: 'javascript:void(0);',
-    heading: 'Primary Link',
-  })
-
-  return (
-    <nav className="usa-footer__nav" aria-label="Footer navigation">
-      <ul className="grid-row grid-gap">
-        {items.map((item, i) => (
-          <li key={`navItem-${i}`} className={itemClasses}>
-            <a className="usa-footer__primary-link" href={item.href}>
-              {item.heading}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  )
-}
-
 const returnToTop = (
   <div className="grid-container usa-footer__return-to-top">
     <Button type="button" unstyled>
@@ -69,10 +34,18 @@ export const SlimFooter = (): React.ReactElement => (
     primary={
       <div className="usa-footer__primary-container grid-row">
         <div className="mobile-lg:grid-col-8">
-          <MockNav slim />
+          <FooterNav
+            slim
+            links={Array(4).fill(
+              <a className="usa-footer__primary-link" href="#">
+                Primary Link
+              </a>
+            )}
+          />
         </div>
         <div className="tablet:grid-col-4">
           <Address
+            slim
             items={[
               <a key="telephone" href="tel:1-800-555-5555">
                 (800) CALL-GOVT
@@ -100,3 +73,77 @@ export const SlimFooter = (): React.ReactElement => (
     }
   />
 )
+
+export const MediumFooter = (): React.ReactElement => (
+  <Footer
+    medium
+    returnToTop={returnToTop}
+    primary={
+      <FooterNav
+        medium
+        links={Array(4).fill(
+          <a className="usa-footer__primary-link" href="#">
+            Primary Link
+          </a>
+        )}
+      />
+    }
+    secondary={
+      <div className="grid-row grid-gap">
+        <Logo
+          medium
+          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>}
+        />
+        <div className="usa-footer__contact-links mobile-lg:grid-col-6">
+          <SocialLinks
+            links={[
+              <a
+                key="facebook"
+                className="usa-social-link usa-social-link--facebook"
+                href="#">
+                <span>Facebook</span>
+              </a>,
+              <a
+                key="twitter"
+                className="usa-social-link usa-social-link--twitter"
+                href="#">
+                <span>Twitter</span>
+              </a>,
+              <a
+                key="youtube"
+                className="usa-social-link usa-social-link--youtube"
+                href="#">
+                <span>YouTube</span>
+              </a>,
+              <a
+                key="rss"
+                className="usa-social-link usa-social-link--rss"
+                href="#">
+                <span>RSS</span>
+              </a>,
+            ]}
+          />
+          <h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
+          <Address
+            medium
+            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>
+    }
+  />
+)
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -19,20 +19,15 @@ type FooterProps = {
   secondary: React.ReactNode
 }
 
-// TODO: Add in "Return to Top" handling
-export const Footer = (
-  props: FooterProps & React.HTMLAttributes<HTMLElement>
-): React.ReactElement => {
-  const {
-    big,
-    medium,
-    slim,
-    returnToTop,
-    primary,
-    secondary,
-    ...footerAttributes
-  } = props
-
+export const Footer = ({
+  big,
+  medium,
+  slim,
+  returnToTop,
+  primary,
+  secondary,
+  ...footerAttributes
+}: FooterProps & React.HTMLAttributes<HTMLElement>): React.ReactElement => {
   const classes = classnames(
     'usa-footer',
     {

diff --git a/src/components/Footer/FooterNav/FooterNav.stories.tsx b/src/components/Footer/FooterNav/FooterNav.stories.tsx
@@ -0,0 +1,37 @@
+/*  eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+
+import { FooterNav } from './FooterNav'
+
+export default {
+  title: 'FooterNav',
+  parameters: {
+    info: `
+    Used in USWDS 2.0 Footer component
+    
+    Source: https://designsystem.digital.gov/components/form-controls/#footer
+    `,
+  },
+}
+
+export const SlimFooterNav = (): React.ReactElement => (
+  <FooterNav
+    slim
+    links={Array(4).fill(
+      <a className="usa-footer__primary-link" href="#">
+        PrimaryLink
+      </a>
+    )}
+  />
+)
+
+export const MediumFooterNav = (): React.ReactElement => (
+  <FooterNav
+    medium
+    links={Array(4).fill(
+      <a className="usa-footer__primary-link" href="#">
+        PrimaryLink
+      </a>
+    )}
+  />
+)
diff --git a/src/components/Footer/FooterNav/FooterNav.test.tsx b/src/components/Footer/FooterNav/FooterNav.test.tsx
@@ -0,0 +1,23 @@
+/*  eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { FooterNav } from './FooterNav'
+
+const links = Array(4).fill(
+  <a className="usa-footer__primary-link" href="#">
+    Primary Link
+  </a>
+)
+describe('FooterNav component', () => {
+  it('renders without errors', () => {
+    const { getByRole } = render(<FooterNav links={links} />)
+    expect(getByRole('navigation')).toBeInTheDocument()
+  })
+
+  it('renders links', () => {
+    const { container, getAllByText } = render(<FooterNav links={links} />)
+    expect(container.querySelectorAll('a').length).toBe(4)
+    expect(getAllByText('Primary Link').length).toBe(4)
+  })
+})
diff --git a/src/components/Footer/FooterNav/FooterNav.tsx b/src/components/Footer/FooterNav/FooterNav.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type FooterNavProps = {
+  big?: boolean
+  medium?: boolean
+  slim?: boolean
+  links: React.ReactNode[]
+}
+
+export const FooterNav = (
+  props: FooterNavProps & React.HTMLAttributes<HTMLElement>
+): React.ReactElement => {
+  const { medium, slim, links, ...elementAttributes } = props
+
+  const navClasses = classnames(`usa-footer__nav`, elementAttributes.className)
+  const listItemClasses = classnames(
+    'desktop:grid-col-auto usa-footer__primary-content',
+    {
+      'mobile-lg:grid-col-4': medium,
+      'mobile-lg:grid-col-6': slim,
+    }
+  )
+
+  return (
+    <nav className={navClasses} aria-label="Footer navigation">
+      <ul className="grid-row grid-gap">
+        {links.map((link, i) => (
+          <li key={`navLink-${i}`} className={listItemClasses}>
+            {link}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
diff --git a/src/components/Footer/Logo/Logo.tsx b/src/components/Footer/Logo/Logo.tsx
@@ -26,11 +26,16 @@ export const Logo = ({
     elementAttributes.className
   )
 
+  const columnClasses = classnames({
+    'mobile-lg:grid-col-auto': big || medium,
+    'grid-col-auto': slim,
+  })
+
   return (
     <div className={containerClasses} data-testid="footerLogo">
       <>
-        <div className="grid-col-auto">{image}</div>
-        {heading && <div className="grid-col-auto">{heading}</div>}
+        <div className={columnClasses}>{image}</div>
+        {heading && <div className={columnClasses}>{heading}</div>}
       </>
     </div>
   )

diff --git a/src/components/Footer/SocialLinks/SocialLinks.stories.tsx b/src/components/Footer/SocialLinks/SocialLinks.stories.tsx
@@ -0,0 +1,28 @@
+/*  eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import { SocialLinks } from './SocialLinks'
+
+const links = [
+  <a
+    key="facebook"
+    className="usa-social-link usa-social-link--facebook"
+    href="#">
+    <span>Facebook</span>
+  </a>,
+  <a
+    key="twitter"
+    className="usa-social-link usa-social-link--twitter"
+    href="#">
+    <span>Twitter</span>
+  </a>,
+  <a
+    key="youtube"
+    className="usa-social-link usa-social-link--youtube"
+    href="#">
+    <span>YouTube</span>
+  </a>,
+  <a key="rss" className="usa-social-link usa-social-link--rss" href="#">
+    <span>RSS</span>
+  </a>,
+]
+export const Example = (): React.ReactElement => <SocialLinks links={links} />