From fc7e09b810678c8db2235c397a49df35dc667ef2 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 5 Apr 2017 21:12:22 +0200
Subject: [PATCH] FIX linting

---
 packages/addon-info/example/Button.js         |   4 +-
 packages/addon-info/example/story.js          | 210 +++++++++---------
 packages/addon-info/src/components/Node.js    |  43 ++--
 .../addon-info/src/components/PropTable.js    |  10 +-
 packages/addon-info/src/components/PropVal.js |  22 +-
 packages/addon-info/src/components/Props.js   |  41 ++--
 packages/addon-info/src/components/Story.js   | 105 ++++-----
 .../src/components/markdown/code.js           |  17 +-
 .../src/components/markdown/htags.js          |  12 +-
 .../src/components/markdown/text.js           |   8 +-
 packages/addon-info/src/components/theme.js   |   2 +-
 packages/addon-info/src/index.js              |  13 +-
 12 files changed, 230 insertions(+), 257 deletions(-)

diff --git a/packages/addon-info/example/Button.js b/packages/addon-info/example/Button.js
index 68ea5323ade..2f4114414dc 100644
--- a/packages/addon-info/example/Button.js
+++ b/packages/addon-info/example/Button.js
@@ -12,8 +12,8 @@ Object.assign(Button, {
     label: React.PropTypes.string.isRequired,
     style: React.PropTypes.object,
     disabled: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-  },
+    onClick: React.PropTypes.func
+  }
 });
 
 export default Button;
diff --git a/packages/addon-info/example/story.js b/packages/addon-info/example/story.js
index 0f0b466e092..4021b96fdb7 100644
--- a/packages/addon-info/example/story.js
+++ b/packages/addon-info/example/story.js
@@ -3,67 +3,61 @@ import Button from './Button';
 import { storiesOf, action } from '@kadira/storybook';
 import backgrounds from 'react-storybook-addon-backgrounds';
 
-storiesOf('Button')
-  .addWithInfo(
-    'simple usage',
-    `
+storiesOf('Button').addWithInfo(
+  'simple usage',
+  `
       This is the basic usage with the button with providing a label to show the text.
     `,
-    () => (
-      <div>
-        <Button label="The Button" onClick={action('onClick')}/>
-        <br />
-        <p>
-          Click the "?" mark at top-right to view the info.
-        </p>
-      </div>
-    ),
-  );
+  () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+      <p>
+        Click the "?" mark at top-right to view the info.
+      </p>
+    </div>
+  )
+);
 
-storiesOf('Button')
-  .addWithInfo(
-    'simple usage (inline info)',
-    `
+storiesOf('Button').addWithInfo(
+  'simple usage (inline info)',
+  `
       This is the basic usage with the button with providing a label to show the text.
     `,
-    () => (<Button label="The Button" onClick={action('onClick')}/>),
-    { inline: true },
-  );
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { inline: true }
+);
 
-storiesOf('Button')
-  .addWithInfo(
-    'simple usage (disable source)',
-    `
+storiesOf('Button').addWithInfo(
+  'simple usage (disable source)',
+  `
       This is the basic usage with the button with providing a label to show the text.
     `,
-    () => (<Button label="The Button" onClick={action('onClick')}/>),
-    { source: false, inline: true },
-  );
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { source: false, inline: true }
+);
 
-storiesOf('Button')
-  .addWithInfo(
-    'simple usage (no header)',
-    `
+storiesOf('Button').addWithInfo(
+  'simple usage (no header)',
+  `
       This is the basic usage with the button with providing a label to show the text.
     `,
-    () => (<Button label="The Button" onClick={action('onClick')}/>),
-    { header: false, inline: true },
-  );
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { header: false, inline: true }
+);
 
-storiesOf('Button')
-  .addWithInfo(
-    'simple usage (no prop tables)',
-    `
+storiesOf('Button').addWithInfo(
+  'simple usage (no prop tables)',
+  `
       This is the basic usage with the button with providing a label to show the text.
     `,
-    () => (<Button label="The Button" onClick={action('onClick')}/>),
-    { propTables: false, inline: true },
-  );
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { propTables: false, inline: true }
+);
 
-storiesOf('Button')
-  .addWithInfo(
-    'simple usage (custom propTables)',
-    `
+storiesOf('Button').addWithInfo(
+  'simple usage (custom propTables)',
+  `
       This is the basic usage with the button with providing a label to show the text.
 
       Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
@@ -79,70 +73,70 @@ storiesOf('Button')
         );
       ~~~
     `,
-    () => (
-      <div>
-        <Button label="The Button" onClick={action('onClick')}/>
-        <br />
-      </div>
-    ),
-    { inline: true, propTables: [Button]}
-  );
+  () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+    </div>
+  ),
+  { inline: true, propTables: [Button] }
+);
 
-storiesOf('Button')
-    .addWithInfo(
-      'simple usage (JSX description)',
-      (<div>
-          <h2>This is a JSX info section</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
-              Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
-              nulla.</p>
-          <p>
-              <a
-                  href='https://github.com/storybooks/react-storybook-addon-info'>
-              This is a link</a>
-          </p>
-          <p>
-              <img src="http://placehold.it/350x150" />
-          </p>
-      </div>),
-      () => (
-        <div>
-          <Button label="The Button" onClick={action('onClick')}/>
-          <br />
-          <p>
-            Click the "?" mark at top-right to view the info.
-          </p>
-        </div>
-      ),
-    );
+storiesOf('Button').addWithInfo(
+  'simple usage (JSX description)',
+  <div>
+    <h2>This is a JSX info section</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
+      Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
+      nulla.
+    </p>
+    <p>
+      <a href="https://github.com/storybooks/react-storybook-addon-info">
+        This is a link
+      </a>
+    </p>
+    <p>
+      <img src="http://placehold.it/350x150" />
+    </p>
+  </div>,
+  () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+      <p>
+        Click the "?" mark at top-right to view the info.
+      </p>
+    </div>
+  )
+);
 
-storiesOf('Button')
-    .addWithInfo(
-      'simple usage (inline JSX description)',
-      (<div>
-          <h2>This is a JSX info section</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
-              Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
-              nulla.</p>
-          <p>
-              <a
-                  href='https://github.com/storybooks/react-storybook-addon-info'>
-              This is a link</a>
-          </p>
-          <p>
-              <img src="http://placehold.it/350x150" />
-          </p>
-      </div>),
-      () => (<Button label="The Button" onClick={action('onClick')}/>),
-      { inline: true }
-    );
+storiesOf('Button').addWithInfo(
+  'simple usage (inline JSX description)',
+  <div>
+    <h2>This is a JSX info section</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
+      Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
+      nulla.
+    </p>
+    <p>
+      <a href="https://github.com/storybooks/react-storybook-addon-info">
+        This is a link
+      </a>
+    </p>
+    <p>
+      <img src="http://placehold.it/350x150" />
+    </p>
+  </div>,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { inline: true }
+);
 
 storiesOf('Button')
-  .addDecorator(backgrounds([
-    { name: 'dark', value: '#333', default: true },
-  ]))
+  .addDecorator(backgrounds([{ name: 'dark', value: '#333', default: true }]))
   .addWithInfo(
     'with custom styles',
     `
@@ -150,10 +144,10 @@ storiesOf('Button')
 
       For the full styles available, see \`./src/components/Story.js\`
     `,
-    () => (<Button label="The Button" onClick={action('onClick')}/>),
+    () => <Button label="The Button" onClick={action('onClick')} />,
     {
       inline: true,
-      styles: (stylesheet) => {
+      styles: stylesheet => {
         stylesheet.infoPage = {
           backgroundColor: '#ccc'
         };
diff --git a/packages/addon-info/src/components/Node.js b/packages/addon-info/src/components/Node.js
index a13a5a82918..1f222c01e8c 100644
--- a/packages/addon-info/src/components/Node.js
+++ b/packages/addon-info/src/components/Node.js
@@ -1,46 +1,45 @@
 import React from 'react';
-import Props from './Props'
-
+import Props from './Props';
 
 const stylesheet = {
   containerStyle: {},
   tagStyle: {
-    color: '#777',
+    color: '#777'
   }
-}
+};
 
 export default class Node extends React.Component {
-  constructor(props){
-    super(props);
-  }
-
-  render(){
-    const {node, depth} = this.props;
-    let {tagStyle, containerStyle} = stylesheet;
+  render() {
+    const { node, depth } = this.props;
+    const { tagStyle, containerStyle } = stylesheet;
 
-    var leftPad = {
+    const leftPad = {
       paddingLeft: 3 + (depth + 1) * 15,
-      paddingRight: 3,
+      paddingRight: 3
     };
 
     Object.assign(containerStyle, leftPad);
 
-    const {name, text, children} = getData(node);
+    const { name, text, children } = getData(node);
 
     // Just text
     if (!name) {
-      return <div style={containerStyle}>
-        <span style={tagStyle}>{text}</span>
-      </div>;
+      return (
+        <div style={containerStyle}>
+          <span style={tagStyle}>{text}</span>
+        </div>
+      );
     }
 
     // Single-line tag
     if (!children) {
-      return <div style={containerStyle}>
-        <span style={tagStyle}>&lt;{name}</span>
+      return (
+        <div style={containerStyle}>
+          <span style={tagStyle}>&lt;{name}</span>
           <Props node={node} singleLine />
-        <span style={tagStyle}>/&gt;</span>
-      </div>;
+          <span style={tagStyle}>/&gt;</span>
+        </div>
+      );
     }
 
     // Keep a copy so that further mutations to containerStyle don't impact us:
@@ -51,7 +50,7 @@ export default class Node extends React.Component {
       <div>
         <div style={containerStyleCopy}>
           <span style={tagStyle}>&lt;{name}</span>
-            <Props node={node} />
+          <Props node={node} />
           <span style={tagStyle}>&gt;</span>
         </div>
         {React.Children.map(children, childElement => (
diff --git a/packages/addon-info/src/components/PropTable.js b/packages/addon-info/src/components/PropTable.js
index e65c05ce0ef..eda5f3831ab 100644
--- a/packages/addon-info/src/components/PropTable.js
+++ b/packages/addon-info/src/components/PropTable.js
@@ -15,8 +15,8 @@ const stylesheet = {
   propTable: {
     marginLeft: -10,
     borderSpacing: '10px 5px',
-    borderCollapse: 'separate',
-  },
+    borderCollapse: 'separate'
+  }
 };
 
 export default class PropTable extends React.Component {
@@ -61,9 +61,7 @@ export default class PropTable extends React.Component {
     if (!array.length) {
       return <small>No propTypes defined!</small>;
     }
-    array.sort(function (a, b) {
-      return a.property > b.property;
-    });
+    array.sort((a, b) => a.property > b.property);
 
     return (
       <table style={stylesheet.propTable}>
@@ -92,5 +90,5 @@ export default class PropTable extends React.Component {
 
 PropTable.displayName = 'PropTable';
 PropTable.propTypes = {
-  type: React.PropTypes.func,
+  type: React.PropTypes.func
 };
diff --git a/packages/addon-info/src/components/PropVal.js b/packages/addon-info/src/components/PropVal.js
index b627a321610..d2988998ff1 100644
--- a/packages/addon-info/src/components/PropVal.js
+++ b/packages/addon-info/src/components/PropVal.js
@@ -3,37 +3,37 @@ import createFragment from 'react-addons-create-fragment';
 
 const valueStyles = {
   func: {
-    color: '#170',
+    color: '#170'
   },
 
   attr: {
-    color: '#666',
+    color: '#666'
   },
 
   object: {
-    color: '#666',
+    color: '#666'
   },
 
   array: {
-    color: '#666',
+    color: '#666'
   },
 
   number: {
-    color: '#a11',
+    color: '#a11'
   },
 
   string: {
     color: '#22a',
-    wordBreak: 'break-word',
+    wordBreak: 'break-word'
   },
 
   bool: {
-    color: '#a11',
+    color: '#a11'
   },
 
   empty: {
-    color: '#777',
-  },
+    color: '#777'
+  }
 };
 
 function previewArray(val) {
@@ -82,7 +82,7 @@ function previewProp(val) {
     content = <span style={valueStyles.number}>{val}</span>;
   } else if (typeof val === 'string') {
     if (val.length > 50) {
-      val = val.slice(0, 50) + '…';
+      val = `${val.slice(0, 50)}…`;
     }
     content = <span style={valueStyles.string}>"{val}"</span>;
     braceWrap = false;
@@ -107,7 +107,7 @@ function previewProp(val) {
   }
 
   if (!braceWrap) return content;
-  return <span>&#123;{content}&#125;</span>;
+  return <span>{{ content }}</span>;
 }
 
 export default class PropVal extends React.Component {
diff --git a/packages/addon-info/src/components/Props.js b/packages/addon-info/src/components/Props.js
index 61e8a2f3770..49050cd4324 100644
--- a/packages/addon-info/src/components/Props.js
+++ b/packages/addon-info/src/components/Props.js
@@ -2,13 +2,10 @@ import React from 'react';
 import PropVal from './PropVal';
 
 const stylesheet = {
-  propStyle: {
-  },
-  propNameStyle: {
-  },
-  propValueStyle: {
-  }
-}
+  propStyle: {},
+  propNameStyle: {},
+  propValueStyle: {}
+};
 
 export default class Props extends React.Component {
   render() {
@@ -18,11 +15,14 @@ export default class Props extends React.Component {
       return <span />;
     }
 
-    const {propStyle, propValueStyle, propNameStyle} = stylesheet;
+    const { propStyle, propValueStyle, propNameStyle } = stylesheet;
 
-    const names = Object.keys(props).filter(name => {
-      return name[0] !== '_' && name !== 'children' && (!defaultProps || props[name] != defaultProps[name]);
-    });
+    const names = Object.keys(props).filter(
+      name =>
+        name[0] !== '_' &&
+        name !== 'children' &&
+        (!defaultProps || props[name] != defaultProps[name])
+    );
 
     const breakIntoNewLines = names.length > 3;
     const endingSpace = this.props.singleLine ? ' ' : '';
@@ -31,23 +31,20 @@ export default class Props extends React.Component {
     names.forEach((name, i) => {
       items.push(
         <span key={name}>
-          {breakIntoNewLines ? (
-            <span>
-              <br />&nbsp;&nbsp;
-            </span>
-          ) : ' '}
+          {breakIntoNewLines
+            ? <span>
+                <br />&nbsp;&nbsp;
+              </span>
+            : ' '}
           <span style={propNameStyle}>{name}</span>
           {/* Use implicit true: */}
-          {(!props[name] || typeof props[name] !== 'boolean') && (
+          {(!props[name] || typeof props[name] !== 'boolean') &&
             <span>
               =
               <span style={propValueStyle}><PropVal val={props[name]} /></span>
-            </span>
-          )}
+            </span>}
 
-          {i === (names.length - 1) && (
-            breakIntoNewLines ? <br /> : endingSpace
-          )}
+          {i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
         </span>
       );
     });
diff --git a/packages/addon-info/src/components/Story.js b/packages/addon-info/src/components/Story.js
index e2b7051d9de..edbaf3a64ac 100644
--- a/packages/addon-info/src/components/Story.js
+++ b/packages/addon-info/src/components/Story.js
@@ -16,13 +16,13 @@ const stylesheet = {
       background: '#28c',
       color: '#fff',
       padding: '5px 15px',
-      cursor: 'pointer',
+      cursor: 'pointer'
     },
     topRight: {
       top: 0,
       right: 0,
-      borderRadius: '0 0 0 5px',
-    },
+      borderRadius: '0 0 0 5px'
+    }
   },
   info: {
     position: 'absolute',
@@ -32,54 +32,54 @@ const stylesheet = {
     left: 0,
     right: 0,
     padding: '0 40px',
-    overflow: 'auto',
+    overflow: 'auto'
   },
   children: {
     position: 'relative',
-    zIndex: 0,
+    zIndex: 0
   },
   infoBody: {
     ...baseFonts,
     fontWeight: 300,
     lineHeight: 1.45,
-    fontSize: '15px',
+    fontSize: '15px'
   },
   infoContent: {
-    marginBottom: 0,
+    marginBottom: 0
   },
   jsxInfoContent: {
     borderTop: '1px solid #eee',
-    margin: '20px 0 0 0',
+    margin: '20px 0 0 0'
   },
   header: {
     h1: {
       margin: 0,
       padding: 0,
-      fontSize: '35px',
+      fontSize: '35px'
     },
     h2: {
       margin: '0 0 10px 0',
       padding: 0,
       fontWeight: 400,
-      fontSize: '22px',
+      fontSize: '22px'
     },
     body: {
       borderBottom: '1px solid #eee',
       paddingTop: 10,
-      marginBottom: 10,
-    },
+      marginBottom: 10
+    }
   },
   source: {
     h1: {
       margin: '20px 0 0 0',
       padding: '0 0 5px 0',
       fontSize: '25px',
-      borderBottom: '1px solid #EEE',
-    },
+      borderBottom: '1px solid #EEE'
+    }
   },
   propTableHead: {
-    margin: '20px 0 0 0',
-  },
+    margin: '20px 0 0 0'
+  }
 };
 
 export default class Story extends React.Component {
@@ -101,7 +101,7 @@ export default class Story extends React.Component {
   _renderStory() {
     return (
       <div>
-        { this.props.children }
+        {this.props.children}
       </div>
     );
   }
@@ -110,18 +110,18 @@ export default class Story extends React.Component {
     return (
       <div>
         <div style={this.state.stylesheet.infoPage}>
-          <div style={this.state.stylesheet.infoBody} >
-            { this._getInfoHeader() }
+          <div style={this.state.stylesheet.infoBody}>
+            {this._getInfoHeader()}
           </div>
         </div>
         <div>
-            { this._renderStory() }
+          {this._renderStory()}
         </div>
         <div style={this.state.stylesheet.infoPage}>
-          <div style={this.state.stylesheet.infoBody} >
-            { this._getInfoContent() }
-            { this._getSourceCode() }
-            { this._getPropTables() }
+          <div style={this.state.stylesheet.infoBody}>
+            {this._getInfoContent()}
+            {this._getSourceCode()}
+            {this._getPropTables()}
           </div>
         </div>
       </div>
@@ -131,7 +131,7 @@ export default class Story extends React.Component {
   _renderOverlay() {
     const linkStyle = {
       ...stylesheet.link.base,
-      ...stylesheet.link.topRight,
+      ...stylesheet.link.topRight
     };
 
     const infoStyle = Object.assign({}, stylesheet.info);
@@ -152,17 +152,17 @@ export default class Story extends React.Component {
     return (
       <div>
         <div style={this.state.stylesheet.children}>
-          { this.props.children }
+          {this.props.children}
         </div>
         <a style={linkStyle} onClick={openOverlay}>?</a>
         <div style={infoStyle}>
           <a style={linkStyle} onClick={closeOverlay}>×</a>
           <div style={this.state.stylesheet.infoPage}>
             <div style={this.state.stylesheet.infoBody}>
-              { this._getInfoHeader() }
-              { this._getInfoContent() }
-              { this._getSourceCode() }
-              { this._getPropTables() }
+              {this._getInfoHeader()}
+              {this._getInfoContent()}
+              {this._getSourceCode()}
+              {this._getPropTables()}
             </div>
           </div>
         </div>
@@ -190,10 +190,7 @@ export default class Story extends React.Component {
 
     if (React.isValidElement(this.props.info)) {
       return (
-        <div
-          style={this.props.showInline ?
-            stylesheet.jsxInfoContent : stylesheet.infoContent}
-        >
+        <div style={this.props.showInline ? stylesheet.jsxInfoContent : stylesheet.infoContent}>
           {this.props.info}
         </div>
       );
@@ -225,9 +222,9 @@ export default class Story extends React.Component {
       <div>
         <h1 style={this.state.stylesheet.source.h1}>Story Source</h1>
         <Pre>
-        {React.Children.map(this.props.children, (root, idx) => (
-          <Node key={idx} depth={0} node={root} />
-        ))}
+          {React.Children.map(this.props.children, (root, idx) => (
+            <Node key={idx} depth={0} node={root} />
+          ))}
         </Pre>
       </div>
     );
@@ -245,7 +242,7 @@ export default class Story extends React.Component {
     }
 
     if (this.props.propTables) {
-      this.props.propTables.forEach(function (type) {
+      this.props.propTables.forEach(type => {
         types.set(type, true);
       });
     }
@@ -274,18 +271,16 @@ export default class Story extends React.Component {
     extract(this.props.children);
 
     const array = Array.from(types.keys());
-    array.sort(function (a, b) {
-      return (a.displayName || a.name) > (b.displayName || b.name);
-    });
-
-    const propTables = array.map((type, idx) => {
-      return (
-        <div key={idx}>
-          <h2 style={this.state.stylesheet.propTableHead}>"{type.displayName || type.name}" Component</h2>
-          <PropTable type={type} />
-        </div>
-      );
-    });
+    array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
+
+    const propTables = array.map((type, idx) => (
+      <div key={idx}>
+        <h2 style={this.state.stylesheet.propTableHead}>
+          "{type.displayName || type.name}" Component
+        </h2>
+        <PropTable type={type} />
+      </div>
+    ));
 
     if (!propTables || propTables.length === 0) {
       return null;
@@ -313,19 +308,13 @@ export default class Story extends React.Component {
 Story.displayName = 'Story';
 Story.propTypes = {
   context: React.PropTypes.object,
-  info: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.node,
-  ]),
+  info: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.node]),
   propTables: React.PropTypes.arrayOf(React.PropTypes.func),
   showInline: React.PropTypes.bool,
   showHeader: React.PropTypes.bool,
   showSource: React.PropTypes.bool,
   styles: React.PropTypes.func.isRequired,
-  children: React.PropTypes.oneOfType([
-    React.PropTypes.object,
-    React.PropTypes.array,
-  ]),
+  children: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
   mtrcConf: React.PropTypes.object
 };
 
diff --git a/packages/addon-info/src/components/markdown/code.js b/packages/addon-info/src/components/markdown/code.js
index 675e69b22ff..23fe4caea4d 100644
--- a/packages/addon-info/src/components/markdown/code.js
+++ b/packages/addon-info/src/components/markdown/code.js
@@ -1,25 +1,24 @@
 import React from 'react';
 
 export class Code extends React.Component {
-
   componentDidMount() {
-    this.highlight()
+    this.highlight();
   }
 
   componentDidUpdate() {
-    this.highlight()
+    this.highlight();
   }
 
   highlight() {
     if (typeof Prism !== 'undefined') {
-      Prism.highlightAll()
+      Prism.highlightAll();
     }
   }
 
   render() {
     const codeStyle = {
       fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      backgroundColor: '#fafafa',
+      backgroundColor: '#fafafa'
     };
 
     const preStyle = {
@@ -27,7 +26,7 @@ export class Code extends React.Component {
       backgroundColor: '#fafafa',
       padding: '.5rem',
       lineHeight: 1.5,
-      overflowX: 'scroll',
+      overflowX: 'scroll'
     };
 
     const className = this.props.language ? `language-${this.props.language}` : '';
@@ -35,7 +34,7 @@ export class Code extends React.Component {
     return (
       <pre style={preStyle} className={className}>
         <code style={codeStyle} className={className}>
-          { this.props.code }
+          {this.props.code}
         </code>
       </pre>
     );
@@ -50,7 +49,7 @@ export class Pre extends React.Component {
       backgroundColor: '#fafafa',
       padding: '.5rem',
       lineHeight: 1.5,
-      overflowX: 'scroll',
+      overflowX: 'scroll'
     };
 
     return <pre style={style}>{this.props.children}</pre>;
@@ -63,7 +62,7 @@ export class Blockquote extends React.Component {
       fontSize: '1.88em',
       fontFamily: 'Menlo, Monaco, "Courier New", monospace',
       borderLeft: '8px solid #fafafa',
-      padding: '1rem',
+      padding: '1rem'
     };
 
     return <blockquote style={style}>{this.props.children}</blockquote>;
diff --git a/packages/addon-info/src/components/markdown/htags.js b/packages/addon-info/src/components/markdown/htags.js
index 0fb0007f555..554dd6e8509 100644
--- a/packages/addon-info/src/components/markdown/htags.js
+++ b/packages/addon-info/src/components/markdown/htags.js
@@ -9,7 +9,7 @@ export class H1 extends React.Component {
       fontWeight: 600,
       margin: 0,
       padding: 0,
-      fontSize: '40px',
+      fontSize: '40px'
     };
 
     return <h1 id={this.props.id} style={styles}>{this.props.children}</h1>;
@@ -23,7 +23,7 @@ export class H2 extends React.Component {
       fontWeight: 600,
       margin: 0,
       padding: 0,
-      fontSize: '30px',
+      fontSize: '30px'
     };
 
     return <h2 id={this.props.id} style={styles}>{this.props.children}</h2>;
@@ -38,7 +38,7 @@ export class H3 extends React.Component {
       margin: 0,
       padding: 0,
       fontSize: '22px',
-      textTransform: 'uppercase',
+      textTransform: 'uppercase'
     };
 
     return <h3 id={this.props.id} style={styles}>{this.props.children}</h3>;
@@ -52,7 +52,7 @@ export class H4 extends React.Component {
       fontWeight: 600,
       margin: 0,
       padding: 0,
-      fontSize: '20px',
+      fontSize: '20px'
     };
 
     return <h4 id={this.props.id} style={styles}>{this.props.children}</h4>;
@@ -66,7 +66,7 @@ export class H5 extends React.Component {
       fontWeight: 600,
       margin: 0,
       padding: 0,
-      fontSize: '18px',
+      fontSize: '18px'
     };
 
     return <h5 id={this.props.id} style={styles}>{this.props.children}</h5>;
@@ -80,7 +80,7 @@ export class H6 extends React.Component {
       fontWeight: 400,
       margin: 0,
       padding: 0,
-      fontSize: '18px',
+      fontSize: '18px'
     };
 
     return <h6 id={this.props.id} style={styles}>{this.props.children}</h6>;
diff --git a/packages/addon-info/src/components/markdown/text.js b/packages/addon-info/src/components/markdown/text.js
index 58f35c18e9b..08481dd9861 100644
--- a/packages/addon-info/src/components/markdown/text.js
+++ b/packages/addon-info/src/components/markdown/text.js
@@ -5,7 +5,7 @@ export class P extends React.Component {
   render() {
     const style = {
       ...baseFonts,
-      fontSize: '15px',
+      fontSize: '15px'
     };
     return <p style={style}>{this.props.children}</p>;
   }
@@ -15,7 +15,7 @@ export class LI extends React.Component {
   render() {
     const style = {
       ...baseFonts,
-      fontSize: '15px',
+      fontSize: '15px'
     };
     return <li style={style}>{this.props.children}</li>;
   }
@@ -25,7 +25,7 @@ export class UL extends React.Component {
   render() {
     const style = {
       ...baseFonts,
-      fontSize: '15px',
+      fontSize: '15px'
     };
 
     return <ul style={style}>{this.props.children}</ul>;
@@ -35,7 +35,7 @@ export class UL extends React.Component {
 export class A extends React.Component {
   render() {
     const style = {
-      color: '#3498db',
+      color: '#3498db'
     };
 
     return <a href={this.props.href} style={style}>{this.props.children}</a>;
diff --git a/packages/addon-info/src/components/theme.js b/packages/addon-info/src/components/theme.js
index ac246549cde..6718b96700f 100644
--- a/packages/addon-info/src/components/theme.js
+++ b/packages/addon-info/src/components/theme.js
@@ -4,5 +4,5 @@ export const baseFonts = {
     "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
   `,
   color: '#444',
-  WebkitFontSmoothing: 'antialiased',
+  WebkitFontSmoothing: 'antialiased'
 };
diff --git a/packages/addon-info/src/index.js b/packages/addon-info/src/index.js
index 1f93217d7f1..b33632dacc4 100644
--- a/packages/addon-info/src/index.js
+++ b/packages/addon-info/src/index.js
@@ -7,7 +7,7 @@ const defaultOptions = {
   inline: false,
   header: true,
   source: true,
-  propTables: [],
+  propTables: []
 };
 
 const defaultMtrcConf = {
@@ -21,12 +21,11 @@ const defaultMtrcConf = {
   p: P,
   a: A,
   li: LI,
-  ul: UL,
+  ul: UL
 };
 
 export default {
   addWithInfo(storyName, info, storyFn, _options) {
-
     if (typeof storyFn !== 'function') {
       if (typeof info === 'function') {
         _options = storyFn;
@@ -54,7 +53,7 @@ export default {
       Object.assign(mtrcConf, options.mtrcConf);
     }
 
-    return this.add(storyName, (context) => {
+    return this.add(storyName, context => {
       const props = {
         info,
         context,
@@ -62,9 +61,7 @@ export default {
         showHeader: Boolean(options.header),
         showSource: Boolean(options.source),
         propTables: options.propTables,
-        styles: typeof options.styles === 'function'
-          ? options.styles
-          : (s) => s,
+        styles: typeof options.styles === 'function' ? options.styles : s => s,
         mtrcConf
       };
 
@@ -79,4 +76,4 @@ export default {
 
 export function setDefaults(newDefaults) {
   return Object.assign(defaultOptions, newDefaults);
-};
+}