Linting

storybookjs · Nov 13, 2017 · 9cf2947 · 9cf2947
1 parent c3cfd7b
commit 9cf2947
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 25 deletions.
diff --git a/addons/a11y/register.js b/addons/a11y/register.js
@@ -1,3 +1 @@
-// NOTE: loading addons using this file is deprecated!
-// please use manager.js and preview.js files instead
 require('./manager');
diff --git a/addons/a11y/src/components/Report/Elements.js b/addons/a11y/src/components/Report/Elements.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Rules from './Rules';
 
@@ -27,13 +28,32 @@ function Element({ element, passes }) {
     </li>
   );
 }
+Element.propTypes = {
+  element: PropTypes.shape({
+    any: PropTypes.array.isRequired,
+    all: PropTypes.array.isRequired,
+    none: PropTypes.array.isRequired,
+  }).isRequired,
+  passes: PropTypes.bool.isRequired,
+};
 
+/* eslint-disable react/no-array-index-key */
 function Elements({ elements, passes }) {
   return (
     <ol style={styles.element}>
       {elements.map((element, index) => <Element passes={passes} element={element} key={index} />)}
     </ol>
   );
 }
+Elements.propTypes = {
+  elements: PropTypes.listOf(
+    PropTypes.shape({
+      any: PropTypes.array.isRequired,
+      all: PropTypes.array.isRequired,
+      none: PropTypes.array.isRequired,
+    })
+  ).isRequired,
+  passes: PropTypes.bool.isRequired,
+};
 
 export default Elements;
diff --git a/addons/a11y/src/components/Report/Info.js b/addons/a11y/src/components/Report/Info.js
@@ -30,7 +30,10 @@ function Info({ item }) {
 }
 
 Info.propTypes = {
-  item: PropTypes.object,
+  item: PropTypes.shape({
+    help: PropTypes.node,
+    helpUrl: PropTypes.string,
+  }).isRequired,
 };
 
 export default Info;
diff --git a/addons/a11y/src/components/Report/Item.js b/addons/a11y/src/components/Report/Item.js
@@ -20,8 +20,12 @@ const styles = {
 
 class Item extends Component {
   static propTypes = {
-    item: PropTypes.object,
-    passes: PropTypes.bool,
+    item: PropTypes.shape({
+      description: PropTypes.string,
+      nodes: PropTypes.array,
+      tags: PropTypes.array,
+    }).isRequired,
+    passes: PropTypes.bool.isRequired,
   };
 
   constructor() {
@@ -43,9 +47,9 @@ class Item extends Component {
 
     return (
       <div style={styles.item}>
-        <div style={styles.headerBar} onClick={() => this.onToggle()}>
+        <button style={styles.hebuttonderBar} onClick={() => this.onToggle()}>
           {item.description}
-        </div>
+        </button>
         {open && <Info item={item} />}
         {open && <Elements elements={item.nodes} passes={passes} />}
         {open && <Tags tags={item.tags} />}

diff --git a/addons/a11y/src/components/Report/Rules.js b/addons/a11y/src/components/Report/Rules.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const impactColors = {
   minor: '#f1c40f',
@@ -55,12 +56,28 @@ function Rule({ rule, passes }) {
   );
 }
 
+Rule.propTypes = {
+  rule: PropTypes.shape({
+    message: PropTypes.node,
+  }).isRequired,
+  passes: PropTypes.bool.isRequired,
+};
+
+/* eslint-disable react/no-array-index-key */
 function Rules({ rules, passes }) {
   return (
     <div style={styles.rules}>
       {rules.map((rule, index) => <Rule passes={passes} rule={rule} key={index} />)}
     </div>
   );
 }
+Rules.propTypes = {
+  rules: PropTypes.listOf(
+    PropTypes.shape({
+      message: PropTypes.node,
+    })
+  ).isRequired,
+  passes: PropTypes.bool.isRequired,
+};
 
 export default Rules;
diff --git a/addons/a11y/src/components/Report/Tags.js b/addons/a11y/src/components/Report/Tags.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const styles = {
   tags: {
@@ -27,5 +28,8 @@ function Tags({ tags }) {
     </div>
   );
 }
+Tags.propTypes = {
+  tags: PropTypes.listOf(PropTypes.node).isRequired,
+};
 
 export default Tags;
diff --git a/addons/a11y/src/components/Report/index.js b/addons/a11y/src/components/Report/index.js
@@ -5,13 +5,9 @@ import Item from './Item';
 
 const styles = {
   container: {
-    fontFamily:
-      '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif',
     fontSize: '12px',
   },
   empty: {
-    fontFamily:
-      '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif',
     fontSize: '11px',
     padding: '20px 12px',
     width: '100%',
@@ -34,8 +30,15 @@ function Report({ items, empty, passes }) {
 }
 
 Report.propTypes = {
-  items: PropTypes.array,
-  empty: PropTypes.string,
+  items: PropTypes.listOf(
+    PropTypes.shape({
+      description: PropTypes.string,
+      nodes: PropTypes.array,
+      tags: PropTypes.array,
+    })
+  ).isRequired,
+  empty: PropTypes.string.isRequired,
+  passes: PropTypes.bool.isRequired,
 };
 
 export default Report;
diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js
@@ -11,8 +11,6 @@ const styles = {
     display: 'flex',
   },
   tab: {
-    fontFamily:
-      '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif',
     color: 'rgb(68, 68, 68)',
     fontSize: '11px',
     textDecoration: 'none',
@@ -29,6 +27,11 @@ const styles = {
   },
 };
 
+const tabStyle = active => ({
+  ...styles.tab,
+  ...(active ? styles.tabActive : undefined),
+});
+
 class Tabs extends Component {
   constructor(props) {
     super(props);
@@ -59,19 +62,17 @@ class Tabs extends Component {
     const { tabs } = this.props;
     const { active } = this.state;
 
+    /* eslint-disable react/no-array-index-key */
     return (
       <div style={styles.tabs}>
         {tabs.map((tab, index) => (
-          <div
+          <button
             key={index}
-            style={{
-              ...styles.tab,
-              ...(index === active ? styles.tabActive : undefined),
-            }}
+            style={tabStyle(active === index)}
             onClick={() => this.onToggle(index)}
           >
             {tab.label}
-          </div>
+          </button>
         ))}
       </div>
     );
@@ -93,7 +94,7 @@ Tabs.propTypes = {
       label: PropTypes.node,
       panel: PropTypes.node,
     })
-  ),
+  ).isRequired,
 };
 
 export default Tabs;
diff --git a/addons/a11y/src/components/WrapStory.js b/addons/a11y/src/components/WrapStory.js
@@ -1,15 +1,21 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import axe from 'axe-core';
 
 class WrapStory extends Component {
   static propTypes = {
-    context: PropTypes.object,
+    context: PropTypes.shape({}),
     storyFn: PropTypes.func,
-    channel: PropTypes.object,
+    channel: PropTypes.shape({}),
+  };
+  static defaultProps = {
+    context: {},
+    storyFn: () => {},
+    channel: {},
   };
 
+  /* eslint-disable react/no-find-dom-node */
   componentDidMount() {
     const { channel } = this.props;
     const wrapper = findDOMNode(this);