remove duplicate focus outline instance in Article component + disableFocusOutline on componentWillUnmount

Author: george

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/docs/buttons.md

@@ -91,7 +91,7 @@ Also in the same map as `$button-types`, you can find status buttons. By default
 
 ## Links
 
-Add styles for your regular anchor links. Use the helper class `link` to style text as a link.
+Control the look and feel of your links as well. They don't require any modifier classes.
 
 <a href="#0">Just a link!</a>
 

app/layouts/Main/Main.js

@@ -14,8 +14,8 @@ import "./styles.scss"
 import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
 
 export default class Main extends React.Component {
-  constructor(props) {
-    super(props)
+  constructor() {
+    super()
 
     this.state = {
       headerTabIndex: UNFOCUSABLE_TABINDEX,
@@ -30,6 +30,10 @@ export default class Main extends React.Component {
     ContextUtil.enableFocusOutline()
   }
 
+  componentWillUnmount() {
+    ContextUtil.disableFocusOutline()
+  }
+
   handleHeaderFocusClick = event => {
     event.preventDefault()