Merge pull request #141 from geotrev/develop

Site updates

Author: geotrev

.circleci/config.yml

@@ -24,5 +24,6 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
 
+      - run: npm run lint
       - run: npm run js:build
       - run: npm test

.eslintrc.js

@@ -5,9 +5,9 @@ const READONLY = "readonly"
 const OFF = "off"
 const ALWAYS = "always"
 
-const sitePath = path.resolve(__dirname, "site")
-const srcPath = path.resolve(__dirname, "js/src")
-const scriptsPath = path.resolve(__dirname, "scripts")
+const appPath = path.resolve(__dirname, "app")
+const srcPath = path.resolve(__dirname, "src/js")
+const binPath = path.resolve(__dirname, "bin")
 const nodeModulesPath = path.resolve(__dirname, "node_modules")
 const webpackConfigPath = path.resolve(__dirname, "webpack.common.js")
 
@@ -54,7 +54,7 @@ module.exports = {
     "import/resolver": {
       node: {
         extensions: [".js"],
-        paths: [sitePath, srcPath, scriptsPath],
+        paths: [appPath, srcPath, binPath],
         moduleDirectory: [nodeModulesPath],
       },
       webpack: { config: webpackConfigPath },

.gitignore

@@ -4,7 +4,14 @@ npm-error.log*
 
 /lib/
 /build/
+/coverage/
 /node_modules/
 
+# don't include umd files in git - only in npm for cdn access
+/dist/*.js
+/dist/*.js.map
+/dist/*.css
+/dist/*.css.map
+
 .sass-cache
 .eslint-output

.npmignore

@@ -16,6 +16,7 @@ npm-error.log*
 /app/
 /bin/
 /build/
+/coverage/
 /dist/*.zip
 /node_modules/
 /public/

app/components/Button/Button.js

@@ -7,21 +7,19 @@ import Menu from "react-feather/dist/icons/menu"
 import ChevronRight from "react-feather/dist/icons/chevron-right"
 import { Accordions } from "undernet"
 
-import Button from "app/components/Button"
 import "./styles.scss"
 
-const pkg = require("../../../package.json")
-const MENU_COLLAPSE_BREAKPOINT = 1199
+const pkg = require("projectRoot/package.json")
+const MENU_COLLAPSE_WIDTH = 1199
 
 export default class SideNav extends React.Component {
   constructor(props) {
     super(props)
-    this.handleCurrentWidth = throttle(this.handleCurrentWidth.bind(this), 50)
+    this.handleMenuVisibility = throttle(this.handleMenuVisibility, 50)
   }
 
   state = {
-    menuIsOpen: window.innerWidth > MENU_COLLAPSE_BREAKPOINT ? true : false,
-    currentWindowWidth: window.innerWidth,
+    menuIsOpen: window.innerWidth > MENU_COLLAPSE_WIDTH,
   }
 
   static propTypes = {
@@ -40,56 +38,43 @@ export default class SideNav extends React.Component {
   }
 
   componentDidMount() {
-    window.addEventListener("resize", this.handleCurrentWidth)
     window.addEventListener("resize", this.handleMenuVisibility)
 
-    const menuIsOpen = this.state.currentWindowWidth > MENU_COLLAPSE_BREAKPOINT
+    const menuIsOpen = window.innerWidth > MENU_COLLAPSE_WIDTH
     this.setState({ menuIsOpen })
 
     Accordions.start()
   }
 
-  componentDidUpdate() {
-    Accordions.stop()
-    Accordions.start()
-  }
-
   componentWillUnmount() {
-    window.removeEventListener("resize", this.handleCurrentWidth)
     window.removeEventListener("resize", this.handleMenuVisibility)
     Accordions.stop()
   }
 
   handleCollapseClick = () => {
-    if (this.state.currentWindowWidth <= MENU_COLLAPSE_BREAKPOINT) {
+    if (window.innerWidth <= MENU_COLLAPSE_WIDTH) {
       this.setState({ menuIsOpen: false })
     }
   }
 
-  handleCurrentWidth = () => {
-    this.setState({
-      currentWindowWidth: window.innerWidth,
-    })
-  }
-
   handleMenuVisibility = () => {
-    if (this.state.currentWindowWidth > MENU_COLLAPSE_BREAKPOINT) {
+    if (window.innerWidth > MENU_COLLAPSE_WIDTH) {
       this.setState({ menuIsOpen: true })
     }
   }
 
-  handleClick = event => {
+  handleMenuToggleClick = event => {
     event.preventDefault()
     this.setState({ menuIsOpen: !this.state.menuIsOpen })
   }
 
-  getButtonClasses() {
+  get buttonClasses() {
     return classNames("is-justified-center is-aligned-center is-flex is-hidden-xlarge", {
       "rotate-180": !this.state.menuIsOpen,
     })
   }
 
-  getMenuClasses() {
+  get menuClasses() {
     return classNames("row side-nav-menu accordion has-padding-3", {
       "is-hidden": !this.state.menuIsOpen,
     })
@@ -107,7 +92,7 @@ export default class SideNav extends React.Component {
     return isActive
   }
 
-  renderAccordionChildLink(item) {
+  renderAccordionChildLink = item => {
     return (
       <li key={item.name} role="none">
         <NavLink
@@ -123,19 +108,20 @@ export default class SideNav extends React.Component {
     )
   }
 
-  renderAccordionRow(section, index, listItems) {
+  renderAccordionRow(section, index) {
+    const listItems = section.links.map(this.renderAccordionChildLink)
+
     return (
       <Fragment key={section.header}>
         <h4 className="paragraph">
-          <Button
+          <button
             id={`nav-acc-button${index}`}
-            dataParent="side-nav-accordion"
+            data-parent="side-nav-accordion"
             className="accordion-button"
-            dataTarget={`nav-acc-content${index}`}
-            role="listitem"
+            data-target={`nav-acc-content${index}`}
           >
             {section.header}
-          </Button>
+          </button>
         </h4>
         <ul className="accordion-content" id={`nav-acc-content${index}`}>
           {listItems}
@@ -146,18 +132,14 @@ export default class SideNav extends React.Component {
 
   renderNavAccordion() {
     return this.props.navItems.map((section, i) => {
-      const listItems = section.links.map((item, j) => {
-        return this.renderAccordionChildLink(item, j)
-      })
-
       return (
         <div
           data-visible={this.accordionIsActive(section.links) ? "true" : "false"}
           data-accordion-row={`nav-acc-content${i}`}
           className={classNames("accordion-row", this.props.navListClasses)}
           key={section.links[0].url}
         >
-          {this.renderAccordionRow(section, i, listItems)}
+          {this.renderAccordionRow(section, i)}
         </div>
       )
     })
@@ -168,13 +150,22 @@ export default class SideNav extends React.Component {
       <div className="xsmall-12 xlarge-2 columns has-no-padding" id="side-nav">
         <div className="fluid grid side-nav-wrapper">
           <div className="row is-flex is-hidden-xlarge side-nav-expand">
-            <Button onClick={this.handleClick} href="#" className={this.getButtonClasses()}>
+            <button
+              onClick={this.handleMenuToggleClick}
+              className={this.buttonClasses}
+              aria-controls="side-nav-wrapper"
+              aria-expanded={this.state.menuIsOpen}
+            >
               <Menu size={20} role="presentation" focusable="false" />{" "}
               <span className="has-black-text">Explore</span>
-            </Button>
+            </button>
           </div>
 
-          <nav data-accordion="side-nav-accordion" className={this.getMenuClasses()}>
+          <nav
+            data-accordion="side-nav-accordion"
+            className={this.menuClasses}
+            id="side-nav-wrapper"
+          >
             <p className="version-text has-no-padding has-gray800-text xsmall-12 columns">
               Version {pkg.version}
             </p>