From 49071813d625d7496414eddc09144986974890ac Mon Sep 17 00:00:00 2001
From: HANA <hana@truss.works>
Date: Tue, 5 May 2020 09:23:22 -0500
Subject: [PATCH] Add footer, slim footer story example (#107)

* Add footer, slim footer story example
* Add Logo, static file loading
* Add Address
---
 package.json                                  |   2 +-
 .../Footer/Address/Address.stories.tsx        |  26 +++++
 .../Footer/Address/Address.test.tsx           |  26 +++++
 src/components/Footer/Address/Address.tsx     |  24 +++++
 src/components/Footer/Footer.stories.tsx      | 102 ++++++++++++++++++
 src/components/Footer/Footer.test.tsx         |  48 +++++++++
 src/components/Footer/Footer.tsx              |  56 ++++++++++
 src/components/Footer/Logo/Logo.stories.tsx   |  44 ++++++++
 src/components/Footer/Logo/Logo.test.tsx      |  30 ++++++
 src/components/Footer/Logo/Logo.tsx           |  37 +++++++
 static/logo-img.png                           | Bin 0 -> 1022 bytes
 11 files changed, 394 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Footer/Address/Address.stories.tsx
 create mode 100644 src/components/Footer/Address/Address.test.tsx
 create mode 100644 src/components/Footer/Address/Address.tsx
 create mode 100644 src/components/Footer/Footer.stories.tsx
 create mode 100644 src/components/Footer/Footer.test.tsx
 create mode 100644 src/components/Footer/Footer.tsx
 create mode 100644 src/components/Footer/Logo/Logo.stories.tsx
 create mode 100644 src/components/Footer/Logo/Logo.test.tsx
 create mode 100644 src/components/Footer/Logo/Logo.tsx
 create mode 100644 static/logo-img.png

diff --git a/package.json b/package.json
index 79379c397b..0fceb8d7f0 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "storybook": "start-storybook",
+    "storybook": "start-storybook -s ./static -p 9001",
     "storybook:deploy": "storybook-to-ghpages",
     "build": "webpack",
     "build:watch": "webpack --watch",
diff --git a/src/components/Footer/Address/Address.stories.tsx b/src/components/Footer/Address/Address.stories.tsx
new file mode 100644
index 0000000000..19ad7d385a
--- /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: '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>,
+    ]}
+  />
+)
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 = [
+  <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) 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..599f202f88
--- /dev/null
+++ b/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>
+)
diff --git a/src/components/Footer/Footer.stories.tsx b/src/components/Footer/Footer.stories.tsx
new file mode 100644
index 0000000000..abd9d67afe
--- /dev/null
+++ b/src/components/Footer/Footer.stories.tsx
@@ -0,0 +1,102 @@
+/*  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 { Logo } from './Logo/Logo'
+
+export default {
+  title: 'Footer',
+  parameters: {
+    info: `
+  USWDS 2.0 Footer component
+  
+  Source: https://designsystem.digital.gov/components/form-controls/#footer
+  `,
+  },
+}
+
+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>
+      Return to top
+    </Button>
+  </div>
+)
+
+export const SlimFooter = (): React.ReactElement => (
+  <Footer
+    slim
+    returnToTop={returnToTop}
+    primary={
+      <div className="usa-footer__primary-container grid-row">
+        <div className="mobile-lg:grid-col-8">
+          <MockNav slim />
+        </div>
+        <div className="tablet:grid-col-4">
+          <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
+        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>}
+      />
+    }
+  />
+)
diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx
new file mode 100644
index 0000000000..da5d204042
--- /dev/null
+++ b/src/components/Footer/Footer.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { Footer } from './Footer'
+
+const nav = (
+  <nav>
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+    </ul>
+  </nav>
+)
+
+const address = (
+  <address>
+    A mythical address. More address information. You can def find us online.
+  </address>
+)
+
+const returnToTop = (
+  <div className="grid-container usa-footer__return-to-top">Return To Top</div>
+)
+
+describe('Footer component', () => {
+  it('renders without errors', () => {
+    const { container } = render(<Footer primary={nav} secondary={address} />)
+    expect(container.querySelector('footer')).toBeInTheDocument()
+  })
+
+  it('renders primary content', () => {
+    const { getByRole } = render(<Footer primary={nav} secondary={address} />)
+    expect(getByRole('navigation')).toBeInTheDocument()
+  })
+
+  it('renders secondary content', () => {
+    const { container } = render(<Footer primary={nav} secondary={address} />)
+    expect(container.querySelector('address')).toBeInTheDocument()
+  })
+
+  it('renders return to top component', () => {
+    const { getByText } = render(
+      <Footer primary={nav} secondary={address} returnToTop={returnToTop} />
+    )
+    expect(getByText('Return To Top')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000000..2ade39aeae
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type FooterProps = {
+  big?: boolean
+  medium?: boolean
+  slim?: boolean
+  /**
+   * Component for "return to top" button/handling
+   */
+  returnToTop?: React.ReactNode
+  /**
+   * Content in upper footer section, e.g. navigation, searchbar, signup form
+   */
+  primary: React.ReactNode
+  /**
+   * Content in lower footer section, e.g. contact information
+   */
+  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
+
+  const classes = classnames(
+    'usa-footer',
+    {
+      'usa-footer--big': big,
+      'usa-footer--medium': medium,
+      'usa-footer--slim': slim,
+    },
+    footerAttributes.className
+  )
+
+  return (
+    <footer {...footerAttributes} className={classes}>
+      {returnToTop && returnToTop}
+      <div className="usa-footer__primary-section">{primary}</div>
+
+      <div className="usa-footer__secondary-section">
+        <div className="grid-container">{secondary}</div>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/components/Footer/Logo/Logo.stories.tsx b/src/components/Footer/Logo/Logo.stories.tsx
new file mode 100644
index 0000000000..d07d818c45
--- /dev/null
+++ b/src/components/Footer/Logo/Logo.stories.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { Logo } from './Logo'
+
+export default {
+  title: 'Logo',
+  parameters: {
+    info: `
+    Used within USWDS 2.0 Footer component
+    
+    Source: https://designsystem.digital.gov/components/form-controls/#footer
+    `,
+  },
+}
+
+export const Slim = (): React.ReactElement => (
+  <div className="usa-footer__secondary-section">
+    <Logo
+      slim
+      image={
+        <img
+          className="usa-footer__logo-img"
+          src="/logo-img.png"
+          alt="Mock logo"
+        />
+      }
+      heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+    />
+  </div>
+)
+
+export const NoHeading = (): React.ReactElement => (
+  <div className="usa-footer__secondary-section">
+    <Logo
+      image={
+        <img
+          className="usa-footer__logo-img"
+          src="/logo-img.png"
+          alt="Mock logo"
+        />
+      }
+    />
+  </div>
+)
diff --git a/src/components/Footer/Logo/Logo.test.tsx b/src/components/Footer/Logo/Logo.test.tsx
new file mode 100644
index 0000000000..2522834649
--- /dev/null
+++ b/src/components/Footer/Logo/Logo.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { Logo } from './Logo'
+
+const heading = <h3 className="usa-footer__logo-heading">Swoosh Branding</h3>
+const logoImage = (
+  <img
+    className="usa-footer__logo-img"
+    src="src/components/Footer/Logo/logo-img.png"
+    alt="Nike logo"
+  />
+)
+
+describe('Logo component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(<Logo image={logoImage} />)
+    expect(queryByTestId('footerLogo')).toBeInTheDocument()
+  })
+
+  it('renders logo image', () => {
+    const { container } = render(<Logo image={logoImage} />)
+    expect(container.querySelector('img')).toBeInTheDocument()
+  })
+
+  it('renders heading when present', () => {
+    const { getByText } = render(<Logo image={logoImage} heading={heading} />)
+    expect(getByText('Swoosh Branding')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Footer/Logo/Logo.tsx b/src/components/Footer/Logo/Logo.tsx
new file mode 100644
index 0000000000..d473fd74af
--- /dev/null
+++ b/src/components/Footer/Logo/Logo.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type LogoProps = {
+  big?: boolean
+  medium?: boolean
+  slim?: boolean
+  heading?: React.ReactNode
+  image: React.ReactNode
+}
+
+export const Logo = ({
+  big,
+  medium,
+  slim,
+  heading,
+  image,
+  ...elementAttributes
+}: LogoProps & React.HtmlHTMLAttributes<HTMLElement>): 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,
+    },
+    elementAttributes.className
+  )
+
+  return (
+    <div className={containerClasses} data-testid="footerLogo">
+      <>
+        <div className="grid-col-auto">{image}</div>
+        {heading && <div className="grid-col-auto">{heading}</div>}
+      </>
+    </div>
+  )
+}
diff --git a/static/logo-img.png b/static/logo-img.png
new file mode 100644
index 0000000000000000000000000000000000000000..82ab23ec786f3aae5b5867906114ef6b72900aee
GIT binary patch
literal 1022
zcmeAS@N?(olHy`uVBq!ia0vp^Js`}%3?ygDZR7z`2LgOTT>lSo&~<+0dZ1q%N`m}?
z8Mt))ayl07IDO~Um*4-HO_KX}J=RQ`dET&a!#kOjmDcT-yym>|S@hj;w#Jjx;}&z%
zFQ`uZ>%Q$OTlELgUin!|K3E)PVqjoe>*?YcQo(rU3iF~j4h*apfA{RMPMfna_g#JH
z{eR6Xc0Yf!kZa-HyY@DAw)^+&+nX)_=fb`Faq;u!%gMicuMn;@(<^<GjqYsE<&!v1
zOgt^#wP#txiRTJYE7wSWIey`^YDaR^wu1^hw~Z8A9#`?4E0#U7E@-XcoT#l$5m%*s
z+pgza5u6<sooo`dyEUTZj^5(eyJTIaz4$8GU#H)g!RCA{-NHd+vEgGAImIm}OO92X
zT_)UO9B)w9ZF$H;SM!ij>w&P>yhm@W3Fk=Lz1U*6Zqp5UjZ2C0DvQ~UX8q{TDq50p
zob%63bB(xUe*10grwVTT%B*s?EVJW^51wYa&NElzv|8)wXWpka&x!A=a-1n9&OAS8
zo#r{|vl`cPT8i0{PnpR**m7jTCthKTmF}Wd7E3QL=laX%SFp0J`~TKmA&YMxs=pPo
zw734M>8eFnKlZa-&3uqQRqbkK*oWy_p{pMG`}JyFm8tKa_+RSs;;4C@@j9#09*WOi
zb@Ru{lmOGkE%K*A*7wMltXlqf_Z-KsJu>@FeinQ3(YJB?f`;`%uJ@WAJx_br)X*r=
z(ez?UVfB;y*|~cP3udI)|5-K7Fk;m;!-&<}3~#LZW_V-uWka^(E6*)1Sa(_@=9LxK
z^<BM(*1lU@u>QD)%_~c;^HsfvR^MCvVcmI+npf6b_odihoeOx+^VKx)zvL@^pS8YM
zR{6e7Uols18~ZXp_A5I(tpcsmbF;V{&!(?9Io0Iy;$?HM$VAMV5PXYq=_-#Z;iX3c
zrIs$a7qn~Jk{`iw94A$sex|FW3qIXB=}yKJfBzzbpnHBNziRz#R9$ZJRB`&9uR-q|
zyix)pMKzBqKb^hg$@D3mlP@&|^#ys&aJm_-IaTNB)`cp&r+l1#i+@2J#|lH{S3-?Z
uVGI6AuAF)Nz0RlGbN<ZJUckunfWJ1-y!*<$wO@gmfWgz%&t;ucLK6TslTtqb

literal 0
HcmV?d00001