Merge pull request #151 from geotrev/develop

Site updates

Author: geotrev

.eslintrc.js

@@ -205,6 +205,10 @@ module.exports = {
     // react
     "react/display-name": ERROR,
 
+    // jsx-a11y
+    "jsx-a11y/no-noninteractive-element-interactions": OFF,
+    "jsx-a11y/no-interactive-element-to-noninteractive-role": OFF,
+
     // used for undernet only
     "no-console": OFF,
   },

app/components/Article/Article.js

@@ -10,26 +10,30 @@ import ScrollUpOnMount from "app/components/ScrollUpOnMount"
 export default class Article extends React.Component {
   constructor() {
     super()
+
     this.state = {
       domIsLoaded: false,
     }
   }
 
+  COMPONENTS = ["Tooltips", "Accordions", "Modals", "Dropdowns"]
+
   static propTypes = {
     children: PropTypes.any,
   }
 
   componentDidMount() {
-    Undernet.start()
     Prism.highlightAll()
 
-    this.setState({
-      domIsLoaded: true,
-    })
+    // initialize all Undernet components
+    // DO NOT init focus outline - it is set up in layouts/Main
+    this.COMPONENTS.forEach(component => Undernet[component].start())
+
+    this.setState({ domIsLoaded: true })
   }
 
   componentWillUnmount() {
-    Undernet.stop()
+    this.COMPONENTS.forEach(component => Undernet[component].stop())
   }
 
   render() {

app/components/Article/__tests__/Article.spec.js

@@ -3,51 +3,75 @@ import Article from "../Article"
 import Undernet from "undernet"
 import Prism from "prismjs"
 
+jest.mock("app/components/ScrollUpOnMount", () => global.simpleMock("ScrollUpOnMount"))
+
 global.scrollTo = jest.fn()
 
-jest.mock("undernet", () => ({
-  start: jest.fn(),
-  stop: jest.fn(),
-}))
+const components = ["Tooltips", "Accordions", "Modals", "Dropdowns"]
+
+components.forEach(component => {
+  Undernet[component].start = jest.fn()
+  Undernet[component].stop = jest.fn()
+})
 
 jest.mock("prismjs", () => ({
   highlightAll: jest.fn(),
 }))
 
-describe("<Article />", () => {
-  let wrapper
-  beforeEach(() => {
-    const md = "# Test header \n So neat"
-    wrapper = mount(<Article>{md}</Article>)
-  })
-
-  it("renders", () => {
-    expect(wrapper).toMatchSnapshot()
-  })
+const mountComponent = () => {
+  const md = "# Test header \n So neat"
+  return mount(<Article>{md}</Article>)
+}
 
-  it("calls window.scrollTo on mount", () => {
-    expect(window.scrollTo).toHaveBeenCalledWith(0, 0)
-  })
+describe("<Article />", () => {
+  describe("#render", () => {
+    it("renders", () => {
+      // Given
+      const wrapper = mountComponent()
+      // Then
+      expect(wrapper).toMatchSnapshot()
+    })
 
-  it("calls Prism.highlightAll on mount", () => {
-    expect(Prism.highlightAll).toHaveBeenCalled()
+    it("sets fadeIn class on wrapper on mount", () => {
+      // Given
+      const wrapper = mountComponent()
+      // Then
+      const fadeInClassIsPresent = wrapper
+        .find("article")
+        .prop("className")
+        .includes("fadeIn")
+      expect(fadeInClassIsPresent).toBe(true)
+    })
   })
 
-  it("starts Undernet on mount", () => {
-    expect(Undernet.start).toHaveBeenCalled()
-  })
+  describe("#componentDidMount", () => {
+    it("calls Prism.highlightAll on mount", () => {
+      // Given
+      mountComponent()
+      // Then
+      expect(Prism.highlightAll).toHaveBeenCalled()
+    })
 
-  it("stops Undernet on unmount", () => {
-    wrapper.unmount()
-    expect(Undernet.stop).toHaveBeenCalled()
+    components.forEach(component => {
+      it(`calls Undernet.${component}.start`, () => {
+        // Given
+        mountComponent()
+        // Then
+        expect(Undernet[component].start).toHaveBeenCalled()
+      })
+    })
   })
 
-  it("sets fadeIn class on wrapper on mount", () => {
-    expect(
-      wrapper
-        .find("article")
-        .prop("className")
-        .includes("fadeIn")
-    ).toBe(true)
+  describe("#componentWillUnmount", () => {
+    components.forEach(component => {
+      it(`calls Undernet.${component}.stop`, () => {
+        // Given
+        const wrapper = mountComponent()
+        // When
+        wrapper.unmount()
+        // Then
+        expect(Undernet[component].stop).toHaveBeenCalled()
+      })
+    })
   })
 })

app/components/Article/__tests__/__snapshots__/Article.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Article /> renders 1`] = `
+exports[`<Article /> #render renders 1`] = `
 <Article>
   <article
     className="article-wrapper has-no-padding column fadeIn"

app/components/DocsRoutes/__tests__/DocsRoutes.spec.js

@@ -2,6 +2,8 @@ import React from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import DocsRoutes from "../DocsRoutes"
 
+jest.mock("app/components/PageNotFound", () => global.simpleMock("PageNotFound"))
+
 function mountRoutes() {
   return mount(
     <Router>

app/components/DocsRoutes/__tests__/__snapshots__/DocsRoutes.spec.js.snap

@@ -82,20 +82,7 @@ exports[`<DocsRoutes /> renders 1`] = `
                 "url": "/",
               }
             }
-          >
-            <div
-              className="has-padding-4 has-center-text"
-            >
-              <h1>
-                Sorry, that page doesn't exist. :(
-              </h1>
-              <p
-                className="has-no-margin-bottom"
-              >
-                Did you enter the URL correctly?
-              </p>
-            </div>
-          </PageNotFound>
+          />
         </Route>
       </Switch>
     </DocsRoutes>

app/components/Footer/Footer.js

@@ -1,38 +1,68 @@
 import React from "react"
 import Github from "react-feather/dist/icons/github"
 import Twitter from "react-feather/dist/icons/twitter"
+import PropTypes from "prop-types"
 
 import "./styles.scss"
 
-export default function Footer() {
+export default function Footer(props) {
   return (
     <div className="footer-wrapper small-section fluid grid">
       <div className="row">
         <div className="has-no-padding column">
           <p className="has-center-text has-gray900-text">
-            Undernet is front-end framework created and maintained by{" "}
+            Undernet is a front-end framework created and maintained by{" "}
             <a className="has-white-text" href="http://www.geotrev.com">
               George Treviranus
             </a>
             .
           </p>
           <p className="has-center-text has-gray900-text">
-            <a className="has-white-text has-feather" href="https://www.twitter.com/gwtrev">
-              <Twitter role="presentation" focusable="false" />
-              <span className="is-visually-hidden">Open link to www.twitter.com/gwtrev</span>
-            </a>
-            <a
-              className="has-white-text has-feather"
-              href="https://www.github.com/geotrev/undernet"
-            >
-              <Github role="presentation" focusable="false" />
-              <span className="is-visually-hidden">
-                Open link to www.github.com/geotrev/undernet
-              </span>
+            Animations provided by{" "}
+            <a className="has-white-text" href="https://folgert.com/">
+              Gavin Folgert
             </a>
+            . ❤️
           </p>
+          <ul className="has-center-text has-gray900-text is-unstyled-list is-flex-row is-flex is-justified-center">
+            <li role="none">
+              <a
+                role="listitem"
+                className="has-white-text has-feather"
+                href="https://www.twitter.com/gwtrev"
+              >
+                <Twitter role="presentation" focusable="false" />
+                <span className="is-visually-hidden">Open link to www.twitter.com/gwtrev</span>
+              </a>
+            </li>
+            <li role="none">
+              <a
+                role="listitem"
+                className="has-white-text has-feather"
+                href="https://www.github.com/geotrev/undernet"
+              >
+                <Github role="presentation" focusable="false" />
+                <span className="is-visually-hidden">
+                  Open link to www.github.com/geotrev/undernet
+                </span>
+              </a>
+            </li>
+            <li role="none">
+              <button
+                className="is-visually-hidden-focusable"
+                onClick={props.handleHeaderFocusClick}
+                role="listitem"
+              >
+                Return to top of page
+              </button>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
   )
 }
+
+Footer.propTypes = {
+  handleHeaderFocusClick: PropTypes.func.isRequired,
+}

app/components/Footer/__tests__/Footer.spec.js

@@ -1,9 +1,12 @@
 import React from "react"
 import Footer from "../Footer"
 
+jest.mock("react-feather/dist/icons/twitter", () => global.simpleMock("Twitter"))
+jest.mock("react-feather/dist/icons/github", () => global.simpleMock("Github"))
+
 describe("<Footer />", () => {
   it("renders", () => {
-    const wrapper = mount(<Footer />)
+    const wrapper = mount(<Footer handleHeaderFocusClick={jest.fn()} />)
     expect(wrapper).toMatchSnapshot()
   })
 })