[Version 7] Release

.jest/jest.setup.js

@@ -1,10 +1,9 @@
-import Enzyme, { shallow, render, mount } from "enzyme"
+import Enzyme, { shallow, mount } from "enzyme"
 import Adapter from "enzyme-adapter-react-16"
 
 Enzyme.configure({ adapter: new Adapter() })
 
 global.shallow = shallow
-global.render = render
 global.mount = mount
 
 // Create a simple component instance with jest.mock()
@@ -13,37 +12,3 @@ global.simpleMock = mockName => {
   // eslint-disable-next-line
   return eval(`const ${mockName} = props => props.children || null; ${mockName}`)
 }
-
-/**
- * Create and fire a keyboard event.
- * @param {Number} which - The key code to simulate.
- * @param {Boolean} shiftKey - Whether shift key should be used.
- * @param {Element} node - The element to fire the event on.
- */
-global.simulateKeyPress = (which, shiftKey = false, node = null) => {
-  const event = new KeyboardEvent("keydown", {
-    which,
-    shiftKey,
-    keyCode: which,
-    bubbles: true,
-  })
-
-  return node ? node.dispatchEvent(event) : document.dispatchEvent(event)
-}
-
-/**
- * Create and fire a keyboard event.
- * @param {String} name - Event name.
- * @param {Object} node - The node to dispatch the event against.
- * @param {Boolean} bubbles - Flag for allowing bubbling of the event.
- * @param {Boolean} cancelale - Flag for allowing cancelling of the event.
- */
-global.simulateMouseEvent = (name, node = null, bubbles = false, cancelable = false) => {
-  const event = new MouseEvent(name, {
-    bubbles: bubbles || true,
-    cancelable: cancelable || true,
-    relatedTarget: window,
-  })
-
-  return node ? node.dispatchEvent(event) : document.dispatchEvent(event)
-}

.prettierignore

@@ -1,2 +1,5 @@
-**/*.html
-**/*.md
+/node_modules/
+/build/
+/dist/
+/lib/
+/app/docs/

.stylelintignore

@@ -0,0 +1,4 @@
+dist/
+app/docs/*
+src/scss/utilities/_reset.scss
+src/__tests__/

stylelint.config.js → .stylelintrc.js

@@ -55,8 +55,6 @@ module.exports = {
 
     "length-zero-no-unit": true,
 
-    linebreaks: "unix",
-
     "max-nesting-depth": [3, { ignore: ["pseudo-classes", "blockless-at-rules"] }],
 
     "media-feature-colon-space-after": ALWAYS,
@@ -71,16 +69,11 @@ module.exports = {
     "no-duplicate-at-import-rules": true,
     "no-duplicate-selectors": true,
     "no-empty-source": true,
-    "no-empty-first-line": true,
     "no-invalid-double-slash-comments": true,
     "no-unknown-animations": true,
 
     "property-no-unknown": true,
 
-    // This will be flagged by the script `scss:lint:check`
-    // Please ignore the error :)
-    "rule-empty-line-before": [ALWAYS, { except: ["first-nested"], ignore: ["after-comment"] }],
-
     "selector-attribute-brackets-space-inside": NEVER,
     "selector-attribute-operator-blacklist": [],
     "selector-attribute-operator-space-after": NEVER,
@@ -119,7 +112,6 @@ module.exports = {
     "scss/at-mixin-argumentless-call-parentheses": NEVER,
     "scss/at-mixin-parentheses-space-before": NEVER,
     "scss/at-each-key-value-single-line": true,
-    "scss/at-rule-conditional-no-parentheses": true,
     "scss/at-rule-no-unknown": true,
 
     "scss/declaration-nested-properties": NEVER,
@@ -137,8 +129,6 @@ module.exports = {
 
     "scss/map-keys-quotes": ALWAYS,
 
-    "scss/operator-no-newline-after": true,
-    "scss/operator-no-newline-before": true,
     "scss/operator-no-unspaced": true,
 
     "scss/selector-no-redundant-nesting-selector": true,

CONTRIBUTING.md

@@ -2,11 +2,11 @@
 
 All input is good input! Contributing to this project should be as easy and transparent as possible, whether it's:
 
-* Reporting a bug
-* Discussing the current state of the code
-* Submitting a fix
-* Proposing new features
-* Becoming a maintainer
+- Reporting a bug
+- Discussing the current state of the code
+- Submitting a fix
+- Proposing new features
+- Becoming a maintainer
 
 ## We Develop with Github
 
@@ -18,11 +18,11 @@ All code changes happen through pull requests
 
 Pull requests are the best way to propose changes to the codebase. Any kind of idea or change is welcome.
 
-1.  Fork the repo and create your branch from `develop`.
-2.  If you've added code that should be tested, add tests.
-3.  If you've changed APIs, update the documentation.
-4.  If you've added dependencies, note what they are and why they are needed.
-5.  Make sure your code and tests run without errors. It's also helpful if you've done a regression check against other areas of the framework, but not strictly required.
+1. Fork the repo and create your branch from `develop`.
+2. If you've added code that should be tested, add tests.
+3. If you've changed APIs, update the documentation.
+4. If you've added dependencies, note what they are and why they are needed.
+5. Make sure your code and tests run without errors. It's also helpful if you've done a regression check against other areas of the framework, but not strictly required.
 
 ## Any contributions you make will be under the MIT Software License
 
@@ -40,11 +40,9 @@ The more detail, the less confusion!
 
 ## Use a Consistent Coding Style
 
-Reference `.prettierrc` for code styling. Run `npm run lint` to apply styling to both css and javascript, or manually apply updates to files using `prettier`:
+If you're using a code editor, make sure it has plugins for prettier, eslint, and stylelint.
 
-```sh
-$ prettier --write path/to/folder/**/*
-```
+If you don't have plugins for your editor, run `npm run prettify && npm run lint` to apply styling to both css and javascript before you commit changes.
 
 ## References
 

README.md

@@ -1,6 +1,6 @@
 ![Undernet](app/assets/images/github-logo.png?raw=true)
 
-[![CircleCI](https://circleci.com/gh/geotrev/undernet/tree/master.svg?style=svg)](https://circleci.com/gh/geotrev/undernet/tree/master) [![devDependencies Status](https://david-dm.org/geotrev/undernet/dev-status.svg)](https://david-dm.org/geotrev/undernet?type=dev) [![dependencies Status](https://david-dm.org/geotrev/undernet.svg)](https://david-dm.org/geotrev/undernet) [![npm version](https://badge.fury.io/js/undernet.svg)](https://badge.fury.io/js/undernet) ![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
+[![CircleCI](https://circleci.com/gh/geotrev/undernet/tree/master.svg?style=svg)](https://circleci.com/gh/geotrev/undernet/tree/master) [![devDependencies Status](https://david-dm.org/geotrev/undernet/dev-status.svg)](https://david-dm.org/geotrev/undernet?type=dev) [![dependencies Status](https://david-dm.org/geotrev/undernet.svg)](https://david-dm.org/geotrev/undernet) [![npm version](https://badge.fury.io/js/undernet.svg)](https://badge.fury.io/js/undernet) ![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg) [![Netlify Status](https://api.netlify.com/api/v1/badges/b895bcd0-9455-4818-a94b-8d33e5907517/deploy-status)](https://app.netlify.com/sites/undernet-prod/deploys)
 
 # Undernet
 
@@ -27,7 +27,7 @@ $ yarn add -D undernet
 
 ### Styles
 
-See [branding documentation](https://www.undernet.io/docs/overview/branding) to setup a custom pipeline with Undernet's SCSS.
+See [CSS documentation](https://www.undernet.io/docs/overview/css) to setup a custom pipeline with Undernet's SCSS.
 
 ### Components / JS
 

app/components/Article/Article.js

@@ -1,33 +1,30 @@
-import React, { useState, useEffect } from "react"
+import React, { useState } from "react"
 import Markdown from "react-markdown"
 import Prism from "prismjs"
 import classNames from "classnames"
 import PropTypes from "prop-types"
+import Undernet from "undernet"
 
-import { COMPONENTS } from "./constants"
 import ScrollUpOnMount from "app/components/ScrollUpOnMount"
+import { useDidMount, useWillUnmount } from "app/helpers"
+
+const SCOPE = "#article"
 
 export default function Article(props) {
   const [domIsLoaded, setDomIsLoaded] = useState(false)
 
-  const componentUnmountFunction = () => {
-    COMPONENTS.forEach(Component => Component.stop())
-  }
+  useWillUnmount(() => Undernet.stop(SCOPE))
 
-  const observedStateOnMount = []
-  useEffect(() => {
+  useDidMount(() => {
     Prism.highlightAll()
-    COMPONENTS.forEach(Component => Component.start())
+    Undernet.start(SCOPE)
     setDomIsLoaded(true)
-
-    return componentUnmountFunction
-  }, observedStateOnMount)
+  })
 
   return (
     <article
-      className={classNames("article-wrapper has-no-padding column", {
-        fadeIn: domIsLoaded,
-      })}
+      id="article"
+      className={classNames("article-wrapper has-no-p column", { fadeIn: domIsLoaded })}
     >
       <ScrollUpOnMount />
       <Markdown source={props.children} escapeHtml={false} />

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

@@ -1,16 +1,14 @@
 import React from "react"
-import Article from "../Article"
 import Prism from "prismjs"
-import { COMPONENTS } from "../constants"
+import Undernet from "undernet"
+import Article from "../Article"
 
 jest.mock("app/components/ScrollUpOnMount", () => global.simpleMock("ScrollUpOnMount"))
 
 global.scrollTo = jest.fn()
 
-COMPONENTS.forEach(Component => {
-  Component.start = jest.fn()
-  Component.stop = jest.fn()
-})
+Undernet.start = jest.fn()
+Undernet.stop = jest.fn()
 
 jest.mock("prismjs", () => ({
   highlightAll: jest.fn(),
@@ -47,29 +45,25 @@ describe("<Article />", () => {
       // Given
       mountComponent()
       // Then
-      expect(Prism.highlightAll).toHaveBeenCalled()
+      expect(Prism.highlightAll).toBeCalled()
     })
 
-    COMPONENTS.forEach(Component => {
-      it(`calls ${Component}.start`, () => {
-        // Given
-        mountComponent()
-        // Then
-        expect(Component.start).toHaveBeenCalled()
-      })
+    it("calls Undernet.start", () => {
+      // Given
+      mountComponent()
+      // Then
+      expect(Undernet.start).toBeCalled()
     })
   })
 
   describe("#componentWillUnmount", () => {
-    COMPONENTS.forEach(Component => {
-      it(`calls ${Component}.stop`, () => {
-        // Given
-        const wrapper = mountComponent()
-        // When
-        wrapper.unmount()
-        // Then
-        expect(Component.stop).toHaveBeenCalled()
-      })
+    it("calls Undernet.stop", () => {
+      // Given
+      const wrapper = mountComponent()
+      // When
+      wrapper.unmount()
+      // Then
+      expect(Undernet.stop).toBeCalled()
     })
   })
 })

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

@@ -3,7 +3,8 @@
 exports[`<Article /> #render renders 1`] = `
 <Article>
   <article
-    className="article-wrapper has-no-padding column fadeIn"
+    className="article-wrapper has-no-p column fadeIn"
+    id="article"
   >
     <ScrollUpOnMount />
     <ReactMarkdown
@@ -20,28 +21,28 @@ exports[`<Article /> #render renders 1`] = `
       transformLinkUri={[Function]}
     >
       <Root
-        key="root-1-1"
+        key="root-1-1-0"
       >
         <Heading
-          key="heading-1-1"
+          key="heading-1-1-0"
           level={1}
         >
           <h1>
             <TextRenderer
-              key="text-1-3"
-              nodeKey="text-1-3"
+              key="text-1-3-0"
+              nodeKey="text-1-3-0"
               value="Test header"
             >
               Test header
             </TextRenderer>
           </h1>
         </Heading>
         <p
-          key="paragraph-2-1"
+          key="paragraph-2-1-1"
         >
           <TextRenderer
-            key="text-2-1"
-            nodeKey="text-2-1"
+            key="text-2-1-0"
+            nodeKey="text-2-1-0"
             value=" So neat"
           >
              So neat

app/components/DocsRoutes/DocsRoutes.js

@@ -2,7 +2,7 @@ import React from "react"
 import { Switch, Route } from "react-router-dom"
 import Loadable from "react-loadable"
 
-import * as routes from "app/routes"
+import { docPages } from "app/routes"
 import PageNotFound from "app/components/PageNotFound"
 import LoadingSpinner from "app/components/LoadingSpinner"
 
@@ -18,24 +18,11 @@ const getComponent = component =>
 export default function DocsRoutes() {
   return (
     <Switch>
-      <Route exact path={routes.introductionPath} component={getComponent("Introduction")} />
-      <Route exact path={routes.downloadPath} component={getComponent("Download")} />
-      <Route exact path={routes.brandingPath} component={getComponent("Branding")} />
-      <Route exact path={routes.javascriptPath} component={getComponent("Javascript")} />
-      <Route exact path={routes.gridPath} component={getComponent("Grid")} />
-      <Route exact path={routes.typographyPath} component={getComponent("Typography")} />
-      <Route exact path={routes.buttonsPath} component={getComponent("Buttons")} />
-      <Route exact path={routes.formsPath} component={getComponent("Forms")} />
-      <Route exact path={routes.modalsPath} component={getComponent("Modals")} />
-      <Route exact path={routes.accordionsPath} component={getComponent("Accordions")} />
-      <Route exact path={routes.dropdownsPath} component={getComponent("Dropdowns")} />
-      <Route exact path={routes.tooltipsPath} component={getComponent("Tooltips")} />
-      <Route exact path={routes.alignmentPath} component={getComponent("Alignment")} />
-      <Route exact path={routes.offsetOrderPath} component={getComponent("OffsetOrder")} />
-      <Route exact path={routes.textPath} component={getComponent("Text")} />
-      <Route exact path={routes.displayPath} component={getComponent("Display")} />
-      <Route exact path={routes.colorPath} component={getComponent("Color")} />
-      <Route exact path={routes.spacingPath} component={getComponent("Spacing")} />
+      {Object.entries(docPages).map(([name, path]) => {
+        const componentName = name[0].toUpperCase() + name.slice(1)
+
+        return <Route key={name} exact path={path} component={getComponent(componentName)} />
+      })}
       <Route component={PageNotFound} />
     </Switch>
   )

app/components/DocsRoutes/articles/Accordions.js

@@ -6,14 +6,14 @@ import AccordionsMd from "app/docs/accordions.md"
 
 const Accordions = () => {
   return (
-    <React.Fragment>
+    <>
       <SetMeta
         title="Accordions"
-        description="A component for hiding and showing content in an accordion-style user interface."
+        description="A component that composes a series of collapsible containers."
       />
       <PageHeader>Accordions</PageHeader>
       <Article>{AccordionsMd}</Article>
-    </React.Fragment>
+    </>
   )
 }