update props to live in component

Author: george

app/components/SideNav/SideNav.js

@@ -1,26 +1,29 @@
 import React, { useState, useEffect } from "react"
-import PropTypes from "prop-types"
 import classNames from "classnames"
 import throttle from "lodash/throttle"
 import { NavLink } from "react-router-dom"
 import Menu from "react-feather/dist/icons/menu"
 import ChevronRight from "react-feather/dist/icons/chevron-right"
 
+import { NAV_DATA } from "app/components/SideNav/navData"
 import { Accordions } from "undernet"
 import "./styles.scss"
 
 const pkg = require("projectRoot/package.json")
 const MENU_COLLAPSE_WIDTH = 1199
 
-export default function SideNav(props) {
+export default function SideNav() {
+  // set up effects and state
+
   const getWindowInnerWidth = () => {
     return window.innerWidth
   }
 
-  const [menuIsOpen, setMenuIsOpen] = useState(getWindowInnerWidth() > MENU_COLLAPSE_WIDTH)
+  const isLargerThanCollapseWidth = getWindowInnerWidth() > MENU_COLLAPSE_WIDTH
+  const [menuIsOpen, setMenuIsOpen] = useState(isLargerThanCollapseWidth)
 
   let handleMenuVisibility = () => {
-    if (getWindowInnerWidth() > MENU_COLLAPSE_WIDTH) {
+    if (isLargerThanCollapseWidth) {
       setMenuIsOpen(true)
     }
   }
@@ -30,7 +33,7 @@ export default function SideNav(props) {
   useEffect(() => {
     Accordions.start()
     window.addEventListener("resize", handleMenuVisibility)
-    setMenuIsOpen(getWindowInnerWidth() > MENU_COLLAPSE_WIDTH)
+    setMenuIsOpen(isLargerThanCollapseWidth)
 
     return () => {
       window.removeEventListener("resize", handleMenuVisibility)
@@ -43,7 +46,7 @@ export default function SideNav(props) {
     Accordions.start()
   }, [menuIsOpen])
 
-  // handlers
+  // set up handlers
 
   const handleCollapseClick = () => {
     if (getWindowInnerWidth() <= MENU_COLLAPSE_WIDTH) {
@@ -80,6 +83,8 @@ export default function SideNav(props) {
     return isActive
   }
 
+  // render content
+
   const renderAccordionChildLink = item => {
     return (
       <li key={item.name} role="none">
@@ -119,12 +124,12 @@ export default function SideNav(props) {
   }
 
   const renderNavAccordion = () => {
-    return props.navItems.map((section, i) => {
+    return NAV_DATA.map((section, i) => {
       return (
         <div
           data-visible={accordionIsActive(section.links) ? "true" : "false"}
           data-accordion-row={`nav-acc-content${i}`}
-          className={classNames("accordion-row", props.navListClasses)}
+          className="accordion-row xsmall-12 columns has-no-padding"
           key={section.links[0].url}
         >
           {renderAccordionRow(section, i)}
@@ -158,18 +163,3 @@ export default function SideNav(props) {
     </div>
   )
 }
-
-SideNav.propTypes = {
-  navItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      header: PropTypes.string,
-      links: PropTypes.arrayOf(
-        PropTypes.shape({
-          name: PropTypes.string,
-          url: PropTypes.string,
-        })
-      ),
-    })
-  ).isRequired,
-  navListClasses: PropTypes.string,
-}

app/components/SideNav/__tests__/SideNav.spec.js

@@ -6,24 +6,26 @@ import { Accordions } from "undernet"
 jest.mock("react-feather/dist/icons/chevron-right", () => global.simpleMock("ChevronRight"))
 jest.mock("react-feather/dist/icons/menu", () => global.simpleMock("Menu"))
 jest.mock("projectRoot/package.json", () => ({ version: "9.9.9" }))
+jest.mock("app/components/SideNav/navData", () => ({
+  NAV_DATA: [
+    {
+      header: "Test Header",
+      links: [{ name: "Test 1", url: "#" }],
+    },
+  ],
+}))
 
 Accordions.start = jest.fn()
 Accordions.stop = jest.fn()
 
 const MENU_COLLAPSE_WIDTH = 1199
 const MENU_EXPAND_WIDTH = MENU_COLLAPSE_WIDTH + 1
 const DEFAULT_WIDTH = 1024
-const navItems = [
-  {
-    header: "Test Header",
-    links: [{ name: "Test 1", url: "#" }],
-  },
-]
 
 function mountComponent() {
   return mount(
     <Router>
-      <SideNav navItems={navItems} />
+      <SideNav />
     </Router>
   )
 }

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

@@ -38,7 +38,7 @@ exports[`<SideNav /> #handleMenuToggleClick toggles menu when button is clicked
       9.9.9
     </p>
     <div
-      className="accordion-row"
+      className="accordion-row xsmall-12 columns has-no-padding"
       data-accordion-row="nav-acc-content0"
       data-visible="false"
       key="#"
@@ -139,7 +139,7 @@ exports[`<SideNav /> #handleMenuVisibility hides menu at or below 1199 1`] = `
       9.9.9
     </p>
     <div
-      className="accordion-row"
+      className="accordion-row xsmall-12 columns has-no-padding"
       data-accordion-row="nav-acc-content0"
       data-visible="false"
       key="#"
@@ -240,7 +240,7 @@ exports[`<SideNav /> #handleMenuVisibility shows menu above 1199 1`] = `
       9.9.9
     </p>
     <div
-      className="accordion-row"
+      className="accordion-row xsmall-12 columns has-no-padding"
       data-accordion-row="nav-acc-content0"
       data-visible="false"
       key="#"
@@ -304,21 +304,7 @@ exports[`<SideNav /> #handleMenuVisibility shows menu above 1199 1`] = `
 `;
 
 exports[`<SideNav /> #render renders 1`] = `
-<SideNav
-  navItems={
-    Array [
-      Object {
-        "header": "Test Header",
-        "links": Array [
-          Object {
-            "name": "Test 1",
-            "url": "#",
-          },
-        ],
-      },
-    ]
-  }
->
+<SideNav>
   <div
     className="xsmall-12 xlarge-2 columns has-no-padding"
     id="side-nav"
@@ -360,7 +346,7 @@ exports[`<SideNav /> #render renders 1`] = `
           9.9.9
         </p>
         <div
-          className="accordion-row"
+          className="accordion-row xsmall-12 columns has-no-padding"
           data-accordion-row="nav-acc-content0"
           data-visible="false"
           key="#"

app/pages/Docs/navData.js app/components/SideNav/navData.jsapp/pages/Docs/navData.js renamed to app/components/SideNav/navData.js

@@ -2,14 +2,13 @@ import React from "react"
 
 import SideNav from "app/components/SideNav"
 import DocsRoutes from "app/components/DocsRoutes"
-import { NAV_DATA } from "app/pages/Docs/navData"
 import "./styles.scss"
 
 export default function Docs() {
   return (
     <div id="docs" className="fluid grid has-no-padding">
       <div className="row">
-        <SideNav navListClasses="xsmall-12 columns has-no-padding" navItems={NAV_DATA} />
+        <SideNav />
         <div className="xsmall-12 xlarge-10 columns has-padding-3">
           <DocsRoutes />
         </div>

app/pages/Docs/Docs.js

@@ -32,110 +32,7 @@ exports[`<Docs /> renders 1`] = `
         <div
           className="row"
         >
-          <SideNav
-            navItems={
-              Array [
-                Object {
-                  "header": "Overview",
-                  "links": Array [
-                    Object {
-                      "name": "Introduction",
-                      "url": "/docs/overview/introduction",
-                    },
-                    Object {
-                      "name": "Download",
-                      "url": "/docs/overview/download",
-                    },
-                    Object {
-                      "name": "Branding",
-                      "url": "/docs/overview/branding",
-                    },
-                    Object {
-                      "name": "JavaScript",
-                      "url": "/docs/overview/javascript",
-                    },
-                  ],
-                },
-                Object {
-                  "header": "Layout",
-                  "links": Array [
-                    Object {
-                      "name": "Flex Grid",
-                      "url": "/docs/layout/grid",
-                    },
-                    Object {
-                      "name": "Alignment",
-                      "url": "/docs/layout/alignment",
-                    },
-                    Object {
-                      "name": "Offset / Order",
-                      "url": "/docs/layout/offset-order",
-                    },
-                    Object {
-                      "name": "Spacing",
-                      "url": "/docs/layout/spacing",
-                    },
-                  ],
-                },
-                Object {
-                  "header": "Elements",
-                  "links": Array [
-                    Object {
-                      "name": "Buttons",
-                      "url": "/docs/elements/buttons",
-                    },
-                    Object {
-                      "name": "Forms",
-                      "url": "/docs/elements/forms",
-                    },
-                    Object {
-                      "name": "Typography",
-                      "url": "/docs/elements/typography",
-                    },
-                  ],
-                },
-                Object {
-                  "header": "Components",
-                  "links": Array [
-                    Object {
-                      "name": "Accordions",
-                      "url": "/docs/components/accordions",
-                    },
-                    Object {
-                      "name": "Dropdowns",
-                      "url": "/docs/components/dropdowns",
-                    },
-                    Object {
-                      "name": "Modals",
-                      "url": "/docs/components/modals",
-                    },
-                    Object {
-                      "name": "Tooltips",
-                      "url": "/docs/components/tooltips",
-                    },
-                  ],
-                },
-                Object {
-                  "header": "Utilities",
-                  "links": Array [
-                    Object {
-                      "name": "Color",
-                      "url": "/docs/utilities/color",
-                    },
-                    Object {
-                      "name": "Display",
-                      "url": "/docs/utilities/display",
-                    },
-                    Object {
-                      "name": "Text",
-                      "url": "/docs/utilities/text",
-                    },
-                  ],
-                },
-              ]
-            }
-            navListClasses="xsmall-12 columns has-no-padding"
-          />
+          <SideNav />
           <div
             className="xsmall-12 xlarge-10 columns has-padding-3"
           >