Eslint (#126)

* adding eslint to webpack and fixing errors

* updating screenshot and tests to reflect dom changes

src/components/__snapshots__/widget.test.js.snap

@@ -31,12 +31,14 @@ exports[`<Widget /> open/close 1`] = `
           >
             Header
           </div>
-          <a
+          <button
             className="widget-header-icon"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            type="button"
           >
             X
-          </a>
+          </button>
         </div>
         <div
           className="widget-body"
@@ -50,12 +52,14 @@ exports[`<Widget /> open/close 1`] = `
         </div>
       </div>
     </Transition>
-    <a
+    <button
       className="dock"
       onClick={[Function]}
+      onKeyPress={[Function]}
+      type="button"
     >
       ^ OPEN ^
-    </a>
+    </button>
   </div>
 </Widget>
 `;
@@ -91,12 +95,14 @@ exports[`<Widget /> open/close 2`] = `
           >
             Header
           </div>
-          <a
+          <button
             className="widget-header-icon"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            type="button"
           >
             X
-          </a>
+          </button>
         </div>
         <div
           className="widget-body"
@@ -145,12 +151,14 @@ exports[`<Widget /> open/close 3`] = `
           >
             Header
           </div>
-          <a
+          <button
             className="widget-header-icon"
             onClick={[Function]}
+            onKeyPress={[Function]}
+            type="button"
           >
             X
-          </a>
+          </button>
         </div>
         <div
           className="widget-body"
@@ -164,12 +172,14 @@ exports[`<Widget /> open/close 3`] = `
         </div>
       </div>
     </Transition>
-    <a
+    <button
       className="dock"
       onClick={[Function]}
+      onKeyPress={[Function]}
+      type="button"
     >
       ^ OPEN ^
-    </a>
+    </button>
   </div>
 </Widget>
 `;

src/components/widget.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import './widget.scss';
 
@@ -29,31 +28,43 @@ class Widget extends Component {
   }
 
   renderBody = () => {
-    if (this.state.showDock) {
-      return (
-        <a className="dock" onClick={this.handleToggleOpen}>
-          ^ OPEN ^
-        </a>
-      );
-    }
-    return '';
+    const { showDock } = this.state;
+
+    if (!showDock) return '';
+
+    return (
+      <button
+        type="button"
+        className="dock"
+        onClick={this.handleToggleOpen}
+        onKeyPress={this.handleToggleOpen}
+      >
+        ^ OPEN ^
+      </button>
+    );
   }
 
   render() {
+    const { opened } = this.state;
     const body = this.renderBody();
 
     return (
       <div className="docked-widget">
-        <Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
+        <Transition in={opened} timeout={250} onExited={this.handleWidgetExit}>
           {status => (
             <div className={`widget widget-${status}`}>
               <div className="widget-header">
                 <div className="widget-header-title">
                   Header
                 </div>
-                <a className="widget-header-icon" onClick={this.handleToggleOpen}>
+                <button
+                  type="button"
+                  className="widget-header-icon"
+                  onClick={this.handleToggleOpen}
+                  onKeyPress={this.handleToggleOpen}
+                >
                   X
-                </a>
+                </button>
               </div>
               <div className="widget-body">
                 Body
@@ -70,6 +81,4 @@ class Widget extends Component {
   }
 }
 
-Widget.propTypes = {};
-
 export default Widget;

src/components/widget.test.js

@@ -9,7 +9,7 @@ describe('<Widget />', () => {
     expect(widgetDom).toMatchSnapshot();
 
     {
-      const dockAnchorEl = widgetDom.find('a.dock');
+      const dockAnchorEl = widgetDom.find('button.dock');
       expect(dockAnchorEl).toHaveLength(1);
       // open widget
       dockAnchorEl.simulate('click');
@@ -20,14 +20,14 @@ describe('<Widget />', () => {
     // dock does not exist anymore
     expect(widgetDom.find('a.dock')).toHaveLength(0);
 
-    const closeAnchorEl = await waitForSelection(widgetDom, 'a.widget-header-icon');
+    const closeAnchorEl = await waitForSelection(widgetDom, 'button.widget-header-icon');
 
     expect(closeAnchorEl).toHaveLength(1);
     // close widget
     closeAnchorEl.simulate('click');
 
     {
-      const dockAnchorEl = await waitForSelection(widgetDom, 'a.dock');
+      const dockAnchorEl = await waitForSelection(widgetDom, 'button.dock');
      expect(dockAnchorEl).toHaveLength(1);
     }