From ab611bdc6accb94a3a0a73eef149545de58ea157 Mon Sep 17 00:00:00 2001
From: Evgeniy Zaitsev <overhawlin@gmail.com>
Date: Tue, 30 May 2017 17:10:08 +0300
Subject: [PATCH 1/4] add new options to info addon

---
 addons/info/.storybook/addons.js      |  1 -
 addons/info/example/story.js          | 67 ++++++++++++++++++++-------
 addons/info/package.json              |  3 +-
 addons/info/src/components/PropVal.js | 31 ++++++++-----
 addons/info/src/components/Props.js   |  7 ++-
 addons/info/src/components/Story.js   | 23 ++++++++-
 addons/info/src/index.js              |  8 ++++
 7 files changed, 106 insertions(+), 34 deletions(-)

diff --git a/addons/info/.storybook/addons.js b/addons/info/.storybook/addons.js
index 0d8df7d5b1c4..5dea101a7c9a 100644
--- a/addons/info/.storybook/addons.js
+++ b/addons/info/.storybook/addons.js
@@ -1,2 +1 @@
 import '@storybook/addon-actions/register';
-import 'react-storybook-addon-backgrounds/register';
diff --git a/addons/info/example/story.js b/addons/info/example/story.js
index ca357f89a9db..28368fd84a4a 100644
--- a/addons/info/example/story.js
+++ b/addons/info/example/story.js
@@ -3,7 +3,6 @@ import Button from './Button';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import backgrounds from 'react-storybook-addon-backgrounds';
 
 storiesOf(
   'Button'
@@ -137,23 +136,57 @@ storiesOf('Button').addWithInfo(
   { inline: true }
 );
 
-storiesOf('Button')
-  .addDecorator(backgrounds([{ name: 'dark', value: '#333', default: true }]))
-  .addWithInfo(
-    'with custom styles',
-    `
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropsInLine === 1)',
+  `
+      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, maxPropsIntoLine: 1 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropObjectKeys === 5)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
+  { inline: true, maxPropObjectKeys: 5 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropObjectKeys === 8)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
+  { inline: true, maxPropArrayLength: 5 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropStringLength === 10)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button array="1 2 3 4 5 6 7 8" />,
+  { inline: true, maxPropStringLength: 5 }
+);
+
+storiesOf('Button').addWithInfo(
+  'with custom styles',
+  `
       This is an example of how to customize the styles of the info components.
 
       For the full styles available, see \`./src/components/Story.js\`
     `,
-    () => <Button label="The Button" onClick={action('onClick')} />,
-    {
-      inline: true,
-      styles: stylesheet => {
-        stylesheet.infoPage = {
-          backgroundColor: '#ccc',
-        };
-        return stylesheet;
-      },
-    }
-  );
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  {
+    inline: true,
+    styles: stylesheet => {
+      stylesheet.infoPage = {
+        backgroundColor: '#ccc',
+      };
+      return stylesheet;
+    },
+  }
+);
diff --git a/addons/info/package.json b/addons/info/package.json
index 6d1bb811e77b..ba487465d013 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -16,7 +16,6 @@
     "git-url-parse": "^6.2.2",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "react-storybook-addon-backgrounds": "0.0.7",
     "react-test-renderer": "^15.5.4"
   },
   "peerDependencies": {
@@ -30,4 +29,4 @@
     "react-addons-create-fragment": "^15.5.3"
   },
   "main": "dist/index.js"
-}
+}
\ No newline at end of file
diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js
index 7fe7bf3603c3..a7e3dd82e8da 100644
--- a/addons/info/src/components/PropVal.js
+++ b/addons/info/src/components/PropVal.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import createFragment from 'react-addons-create-fragment';
 
 const valueStyles = {
@@ -36,13 +37,13 @@ const valueStyles = {
   },
 };
 
-function previewArray(val) {
+function previewArray(val, maxPropArrayLength) {
   const items = {};
-  val.slice(0, 3).forEach((item, i) => {
+  val.slice(0, maxPropArrayLength).forEach((item, i) => {
     items[`n${i}`] = <PropVal val={item} />;
     items[`c${i}`] = ', ';
   });
-  if (val.length > 3) {
+  if (val.length > maxPropArrayLength) {
     items.last = '…';
   } else {
     delete items[`c${val.length - 1}`];
@@ -54,16 +55,16 @@ function previewArray(val) {
   );
 }
 
-function previewObject(val) {
+function previewObject(val, maxPropObjectKeys) {
   const names = Object.keys(val);
   const items = {};
-  names.slice(0, 3).forEach((name, i) => {
+  names.slice(0, maxPropObjectKeys).forEach((name, i) => {
     items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
     items[`c${i}`] = ': ';
     items[`v${i}`] = <PropVal val={val[name]} />;
     items[`m${i}`] = ', ';
   });
-  if (names.length > 3) {
+  if (names.length > maxPropObjectKeys) {
     items.rest = '…';
   } else {
     delete items[`m${names.length - 1}`];
@@ -75,21 +76,21 @@ function previewObject(val) {
   );
 }
 
-function previewProp(val) {
+function previewProp(val, { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength }) {
   let braceWrap = true;
   let content = null;
   if (typeof val === 'number') {
     content = <span style={valueStyles.number}>{val}</span>;
   } else if (typeof val === 'string') {
-    if (val.length > 50) {
-      val = `${val.slice(0, 50)}…`;
+    if (val.length > maxPropStringLength) {
+      val = `${val.slice(0, maxPropStringLength)}…`;
     }
     content = <span style={valueStyles.string}>"{val}"</span>;
     braceWrap = false;
   } else if (typeof val === 'boolean') {
     content = <span style={valueStyles.bool}>{`${val}`}</span>;
   } else if (Array.isArray(val)) {
-    content = previewArray(val);
+    content = previewArray(val, maxPropArrayLength);
   } else if (typeof val === 'function') {
     content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
   } else if (!val) {
@@ -103,7 +104,7 @@ function previewProp(val) {
       </span>
     );
   } else {
-    content = previewObject(val);
+    content = previewObject(val, maxPropObjectKeys);
   }
 
   if (!braceWrap) return content;
@@ -112,8 +113,14 @@ function previewProp(val) {
 
 export default class PropVal extends React.Component {
   render() {
-    return previewProp(this.props.val);
+    return previewProp(this.props.val, this.context);
   }
 }
 
+PropVal.contextTypes = {
+  maxPropObjectKeys: PropTypes.number,
+  maxPropArrayLength: PropTypes.number,
+  maxPropStringLength: PropTypes.number,
+};
+
 module.exports = PropVal;
diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js
index bbefbd9abf73..48101edcbf68 100644
--- a/addons/info/src/components/Props.js
+++ b/addons/info/src/components/Props.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import PropVal from './PropVal';
 
 const stylesheet = {
@@ -24,7 +25,7 @@ export default class Props extends React.Component {
         (!defaultProps || props[name] != defaultProps[name])
     );
 
-    const breakIntoNewLines = names.length > 3;
+    const breakIntoNewLines = names.length > this.context.maxPropsIntoLine;
     const endingSpace = this.props.singleLine ? ' ' : '';
 
     const items = [];
@@ -52,3 +53,7 @@ export default class Props extends React.Component {
     return <span>{items}</span>;
   }
 }
+
+Props.contextTypes = {
+  maxPropsIntoLine: PropTypes.number,
+};
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index a3736a479cb3..100afd776378 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -93,6 +93,15 @@ export default class Story extends React.Component {
     MTRC.configure(this.props.mtrcConf);
   }
 
+  getChildContext() {
+    return {
+      maxPropsIntoLine: this.props.maxPropsIntoLine,
+      maxPropObjectKeys: this.props.maxPropObjectKeys,
+      maxPropArrayLength: this.props.maxPropArrayLength,
+      maxPropStringLength: this.props.maxPropStringLength,
+    };
+  }
+
   componentWillReceiveProps(nextProps) {
     this.setState({
       stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))),
@@ -244,7 +253,7 @@ export default class Story extends React.Component {
         <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} />
+            <Node key={idx} node={root} depth={0} />
           ))}
         </Pre>
       </div>
@@ -330,6 +339,7 @@ export default class Story extends React.Component {
 }
 
 Story.displayName = 'Story';
+
 Story.propTypes = {
   context: PropTypes.object,
   info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -341,6 +351,10 @@ Story.propTypes = {
   styles: PropTypes.func.isRequired,
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   mtrcConf: PropTypes.object,
+  maxPropObjectKeys: PropTypes.number,
+  maxPropArrayLength: PropTypes.number,
+  maxPropsIntoLine: PropTypes.number,
+  maxPropStringLength: PropTypes.number,
 };
 
 Story.defaultProps = {
@@ -349,3 +363,10 @@ Story.defaultProps = {
   showSource: true,
   mtrcConf: {},
 };
+
+Story.childContextTypes = {
+  maxPropsIntoLine: PropTypes.number,
+  maxPropObjectKeys: PropTypes.number,
+  maxPropArrayLength: PropTypes.number,
+  maxPropStringLength: PropTypes.number,
+};
diff --git a/addons/info/src/index.js b/addons/info/src/index.js
index ede94ae320ca..27a40bd27064 100644
--- a/addons/info/src/index.js
+++ b/addons/info/src/index.js
@@ -8,6 +8,10 @@ const defaultOptions = {
   header: true,
   source: true,
   propTables: [],
+  maxPropObjectKeys: 3,
+  maxPropArrayLength: 3,
+  maxPropsIntoLine: 3,
+  maxPropStringLength: 50,
 };
 
 const defaultMtrcConf = {
@@ -64,6 +68,10 @@ export default {
         propTablesExclude: options.propTablesExclude,
         styles: typeof options.styles === 'function' ? options.styles : s => s,
         mtrcConf,
+        maxPropObjectKeys: options.maxPropObjectKeys,
+        maxPropArrayLength: options.maxPropArrayLength,
+        maxPropsIntoLine: options.maxPropsIntoLine,
+        maxPropStringLength: options.maxPropStringLength,
       };
 
       return (

From c46d701bb107eed4ec9f5d943b1936b8fa9f1571 Mon Sep 17 00:00:00 2001
From: Evgeniy Zaitsev <overhawlin@gmail.com>
Date: Wed, 31 May 2017 13:05:43 +0300
Subject: [PATCH 2/4] replace context with props

---
 addons/info/src/components/Node.js      | 35 ++++++++++++++++++---
 addons/info/src/components/PropTable.js | 13 ++++++--
 addons/info/src/components/PropVal.js   | 10 ++----
 addons/info/src/components/Props.js     | 21 +++++++++----
 addons/info/src/components/Story.js     | 42 ++++++++++++++-----------
 5 files changed, 83 insertions(+), 38 deletions(-)

diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js
index a91de1369ed5..2b6bc2e945fb 100644
--- a/addons/info/src/components/Node.js
+++ b/addons/info/src/components/Node.js
@@ -10,7 +10,14 @@ const stylesheet = {
 
 export default class Node extends React.Component {
   render() {
-    const { node, depth } = this.props;
+    const {
+      node,
+      depth,
+      maxPropsIntoLine,
+      maxPropObjectKeys,
+      maxPropArrayLength,
+      maxPropStringLength,
+    } = this.props;
     const { tagStyle, containerStyle } = stylesheet;
 
     const leftPad = {
@@ -36,7 +43,14 @@ export default class Node extends React.Component {
       return (
         <div style={containerStyle}>
           <span style={tagStyle}>&lt;{name}</span>
-          <Props node={node} singleLine />
+          <Props
+            node={node}
+            singleLine
+            maxPropsIntoLine={maxPropsIntoLine}
+            maxPropObjectKeys={maxPropObjectKeys}
+            maxPropArrayLength={maxPropArrayLength}
+            maxPropStringLength={maxPropStringLength}
+          />
           <span style={tagStyle}>/&gt;</span>
         </div>
       );
@@ -50,11 +64,24 @@ export default class Node extends React.Component {
       <div>
         <div style={containerStyleCopy}>
           <span style={tagStyle}>&lt;{name}</span>
-          <Props node={node} />
+          <Props
+            node={node}
+            maxPropsIntoLine={maxPropsIntoLine}
+            maxPropObjectKeys={maxPropObjectKeys}
+            maxPropArrayLength={maxPropArrayLength}
+            maxPropStringLength={maxPropStringLength}
+          />
           <span style={tagStyle}>&gt;</span>
         </div>
         {React.Children.map(children, childElement => (
-          <Node node={childElement} depth={depth + 1} />
+          <Node
+            node={childElement}
+            depth={depth + 1}
+            maxPropsIntoLine={maxPropsIntoLine}
+            maxPropObjectKeys={maxPropObjectKeys}
+            maxPropArrayLength={maxPropArrayLength}
+            maxPropStringLength={maxPropStringLength}
+          />
         ))}
         <div style={containerStyleCopy}>
           <span style={tagStyle}>&lt;/{name}&gt;</span>
diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
index 96000bb1182a..e71fa5889ef9 100644
--- a/addons/info/src/components/PropTable.js
+++ b/addons/info/src/components/PropTable.js
@@ -22,7 +22,7 @@ const stylesheet = {
 
 export default class PropTable extends React.Component {
   render() {
-    const type = this.props.type;
+    const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
 
     if (!type) {
       return null;
@@ -96,7 +96,16 @@ export default class PropTable extends React.Component {
               <td>{row.property}</td>
               <td>{row.propType}</td>
               <td>{row.required}</td>
-              <td>{row.defaultValue === undefined ? '-' : <PropVal val={row.defaultValue} />}</td>
+              <td>
+                {row.defaultValue === undefined
+                  ? '-'
+                  : <PropVal
+                      val={row.defaultValue}
+                      maxPropObjectKeys={maxPropObjectKeys}
+                      maxPropArrayLength={maxPropArrayLength}
+                      maxPropStringLength={maxPropStringLength}
+                    />}
+              </td>
               <td>{row.description}</td>
             </tr>
           ))}
diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js
index a7e3dd82e8da..197b27aa97b1 100644
--- a/addons/info/src/components/PropVal.js
+++ b/addons/info/src/components/PropVal.js
@@ -76,7 +76,7 @@ function previewObject(val, maxPropObjectKeys) {
   );
 }
 
-function previewProp(val, { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength }) {
+function previewProp({ val, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength }) {
   let braceWrap = true;
   let content = null;
   if (typeof val === 'number') {
@@ -113,14 +113,8 @@ function previewProp(val, { maxPropObjectKeys, maxPropArrayLength, maxPropString
 
 export default class PropVal extends React.Component {
   render() {
-    return previewProp(this.props.val, this.context);
+    return previewProp(this.props);
   }
 }
 
-PropVal.contextTypes = {
-  maxPropObjectKeys: PropTypes.number,
-  maxPropArrayLength: PropTypes.number,
-  maxPropStringLength: PropTypes.number,
-};
-
 module.exports = PropVal;
diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js
index 48101edcbf68..5fa7d7d5a89d 100644
--- a/addons/info/src/components/Props.js
+++ b/addons/info/src/components/Props.js
@@ -10,6 +10,12 @@ const stylesheet = {
 
 export default class Props extends React.Component {
   render() {
+    const {
+      maxPropsIntoLine,
+      maxPropObjectKeys,
+      maxPropArrayLength,
+      maxPropStringLength,
+    } = this.props;
     const props = this.props.node.props;
     const defaultProps = this.props.node.type.defaultProps;
     if (!props || typeof props !== 'object') {
@@ -25,7 +31,7 @@ export default class Props extends React.Component {
         (!defaultProps || props[name] != defaultProps[name])
     );
 
-    const breakIntoNewLines = names.length > this.context.maxPropsIntoLine;
+    const breakIntoNewLines = names.length > maxPropsIntoLine;
     const endingSpace = this.props.singleLine ? ' ' : '';
 
     const items = [];
@@ -42,7 +48,14 @@ export default class Props extends React.Component {
           {(!props[name] || typeof props[name] !== 'boolean') &&
             <span>
               =
-              <span style={propValueStyle}><PropVal val={props[name]} /></span>
+              <span style={propValueStyle}>
+                <PropVal
+                  val={props[name]}
+                  maxPropObjectKeys={maxPropObjectKeys}
+                  maxPropArrayLength={maxPropArrayLength}
+                  maxPropStringLength={maxPropStringLength}
+                />
+              </span>
             </span>}
 
           {i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
@@ -53,7 +66,3 @@ export default class Props extends React.Component {
     return <span>{items}</span>;
   }
 }
-
-Props.contextTypes = {
-  maxPropsIntoLine: PropTypes.number,
-};
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index 100afd776378..4b1436188c7c 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -93,15 +93,6 @@ export default class Story extends React.Component {
     MTRC.configure(this.props.mtrcConf);
   }
 
-  getChildContext() {
-    return {
-      maxPropsIntoLine: this.props.maxPropsIntoLine,
-      maxPropObjectKeys: this.props.maxPropObjectKeys,
-      maxPropArrayLength: this.props.maxPropArrayLength,
-      maxPropStringLength: this.props.maxPropStringLength,
-    };
-  }
-
   componentWillReceiveProps(nextProps) {
     this.setState({
       stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))),
@@ -248,12 +239,27 @@ export default class Story extends React.Component {
       return null;
     }
 
+    const {
+      maxPropsIntoLine,
+      maxPropObjectKeys,
+      maxPropArrayLength,
+      maxPropStringLength,
+    } = this.props;
+
     return (
       <div>
         <h1 style={this.state.stylesheet.source.h1}>Story Source</h1>
         <Pre>
           {React.Children.map(this.props.children, (root, idx) => (
-            <Node key={idx} node={root} depth={0} />
+            <Node
+              key={idx}
+              node={root}
+              depth={0}
+              maxPropsIntoLine={maxPropsIntoLine}
+              maxPropObjectKeys={maxPropObjectKeys}
+              maxPropArrayLength={maxPropArrayLength}
+              maxPropStringLength={maxPropStringLength}
+            />
           ))}
         </Pre>
       </div>
@@ -308,12 +314,19 @@ export default class Story extends React.Component {
     const array = Array.from(types.keys());
     array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
 
+    const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
+
     const propTables = array.map((type, idx) => (
       <div key={idx}>
         <h2 style={this.state.stylesheet.propTableHead}>
           "{type.displayName || type.name}" Component
         </h2>
-        <PropTable type={type} />
+        <PropTable
+          type={type}
+          maxPropObjectKeys={maxPropObjectKeys}
+          maxPropArrayLength={maxPropArrayLength}
+          maxPropStringLength={maxPropStringLength}
+        />
       </div>
     ));
 
@@ -363,10 +376,3 @@ Story.defaultProps = {
   showSource: true,
   mtrcConf: {},
 };
-
-Story.childContextTypes = {
-  maxPropsIntoLine: PropTypes.number,
-  maxPropObjectKeys: PropTypes.number,
-  maxPropArrayLength: PropTypes.number,
-  maxPropStringLength: PropTypes.number,
-};

From 6be7f418f9fce973c94208f522dab152ce16b83d Mon Sep 17 00:00:00 2001
From: Evgeniy Zaitsev <overhawlin@gmail.com>
Date: Wed, 31 May 2017 13:05:54 +0300
Subject: [PATCH 3/4] fix stories

---
 addons/info/example/story.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/info/example/story.js b/addons/info/example/story.js
index 28368fd84a4a..590f9ccd2ae0 100644
--- a/addons/info/example/story.js
+++ b/addons/info/example/story.js
@@ -155,12 +155,12 @@ storiesOf('Button').addWithInfo(
 );
 
 storiesOf('Button').addWithInfo(
-  'simple usage (maxPropObjectKeys === 8)',
+  'simple usage (maxPropArrayLength === 8)',
   `
       This is the basic usage with the button with providing a label to show the text.
     `,
   () => <Button array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
-  { inline: true, maxPropArrayLength: 5 }
+  { inline: true, maxPropArrayLength: 8 }
 );
 
 storiesOf('Button').addWithInfo(

From 70f7b51f615f3b2bcfd7ba26343cde7adbb328ec Mon Sep 17 00:00:00 2001
From: Evgeniy Zaitsev <overhawlin@gmail.com>
Date: Wed, 7 Jun 2017 11:58:13 +0300
Subject: [PATCH 4/4] Fix build and lint after merge

---
 addons/info/example/story.js            |  6 +-
 addons/info/src/components/Node.js      | 72 ++++++++++++------------
 addons/info/src/components/PropTable.js | 74 +++++++++++++------------
 addons/info/src/components/PropVal.js   | 19 ++++---
 addons/info/src/components/Props.js     | 49 ++++++++--------
 addons/info/src/components/Story.js     | 12 ++--
 addons/info/src/index.js                |  2 +-
 7 files changed, 123 insertions(+), 111 deletions(-)

diff --git a/addons/info/example/story.js b/addons/info/example/story.js
index 590f9ccd2ae0..e927751d8920 100644
--- a/addons/info/example/story.js
+++ b/addons/info/example/story.js
@@ -150,7 +150,7 @@ storiesOf('Button').addWithInfo(
   `
       This is the basic usage with the button with providing a label to show the text.
     `,
-  () => <Button object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
+  () => <Button label="The Button" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
   { inline: true, maxPropObjectKeys: 5 }
 );
 
@@ -159,7 +159,7 @@ storiesOf('Button').addWithInfo(
   `
       This is the basic usage with the button with providing a label to show the text.
     `,
-  () => <Button array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
+  () => <Button label="The Button" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
   { inline: true, maxPropArrayLength: 8 }
 );
 
@@ -168,7 +168,7 @@ storiesOf('Button').addWithInfo(
   `
       This is the basic usage with the button with providing a label to show the text.
     `,
-  () => <Button array="1 2 3 4 5 6 7 8" />,
+  () => <Button label="The Button" string="1 2 3 4 5 6 7 8" />,
   { inline: true, maxPropStringLength: 5 }
 );
 
diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js
index f98484209b02..34bf3aad17bb 100644
--- a/addons/info/src/components/Node.js
+++ b/addons/info/src/components/Node.js
@@ -43,14 +43,14 @@ function getData(element) {
 }
 
 export default function Node(props) {
-   const {
-      node,
-      depth,
-      maxPropsIntoLine,
-      maxPropObjectKeys,
-      maxPropArrayLength,
-      maxPropStringLength,
-    } = props;
+  const {
+    node,
+    depth,
+    maxPropsIntoLine,
+    maxPropObjectKeys,
+    maxPropArrayLength,
+    maxPropStringLength,
+  } = props;
   const { tagStyle, containerStyle } = stylesheet;
 
   const leftPad = {
@@ -94,33 +94,33 @@ export default function Node(props) {
 
   // tag with children
   return (
-      <div>
-        <div style={containerStyleCopy}>
-          <span style={tagStyle}>&lt;{name}</span>
-          <Props
-            node={node}
-            maxPropsIntoLine={maxPropsIntoLine}
-            maxPropObjectKeys={maxPropObjectKeys}
-            maxPropArrayLength={maxPropArrayLength}
-            maxPropStringLength={maxPropStringLength}
-          />
-          <span style={tagStyle}>&gt;</span>
-        </div>
-        {React.Children.map(children, childElement => (
-          <Node
-            node={childElement}
-            depth={depth + 1}
-            maxPropsIntoLine={maxPropsIntoLine}
-            maxPropObjectKeys={maxPropObjectKeys}
-            maxPropArrayLength={maxPropArrayLength}
-            maxPropStringLength={maxPropStringLength}
-          />
-        ))}
-        <div style={containerStyleCopy}>
-          <span style={tagStyle}>&lt;/{name}&gt;</span>
-        </div>
+    <div>
+      <div style={containerStyleCopy}>
+        <span style={tagStyle}>&lt;{name}</span>
+        <Props
+          node={node}
+          maxPropsIntoLine={maxPropsIntoLine}
+          maxPropObjectKeys={maxPropObjectKeys}
+          maxPropArrayLength={maxPropArrayLength}
+          maxPropStringLength={maxPropStringLength}
+        />
+        <span style={tagStyle}>&gt;</span>
       </div>
-    );
+      {React.Children.map(children, childElement => (
+        <Node
+          node={childElement}
+          depth={depth + 1}
+          maxPropsIntoLine={maxPropsIntoLine}
+          maxPropObjectKeys={maxPropObjectKeys}
+          maxPropArrayLength={maxPropArrayLength}
+          maxPropStringLength={maxPropStringLength}
+        />
+      ))}
+      <div style={containerStyleCopy}>
+        <span style={tagStyle}>&lt;/{name}&gt;</span>
+      </div>
+    </div>
+  );
 }
 
 Node.defaultProps = {
@@ -131,4 +131,8 @@ Node.defaultProps = {
 Node.propTypes = {
   node: PropTypes.node,
   depth: PropTypes.number,
+  maxPropsIntoLine: PropTypes.number.isRequired,
+  maxPropObjectKeys: PropTypes.number.isRequired,
+  maxPropArrayLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired,
 };
diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
index 44d0df747bca..ca44d6e4d977 100644
--- a/addons/info/src/components/PropTable.js
+++ b/addons/info/src/components/PropTable.js
@@ -5,14 +5,13 @@ import React from 'react';
 import PropVal from './PropVal';
 
 const PropTypesMap = new Map();
-for (const typeName in PropTypes) { // eslint-disable-line
-  if (!PropTypes.hasOwnProperty(typeName)) { // eslint-disable-line
-    continue; // eslint-disable-line
-  }
+
+Object.keys(PropTypes).forEach(typeName => {
   const type = PropTypes[typeName];
+
   PropTypesMap.set(type, typeName);
   PropTypesMap.set(type.isRequired, typeName);
-}
+});
 
 const stylesheet = {
   propTable: {
@@ -22,28 +21,26 @@ const stylesheet = {
   },
 };
 
-const PropTable = ({ type }) => {
-  const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
-  
+export default function PropTable(props) {
+  const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
+
   if (!type) {
     return null;
   }
 
-  const props = {};
+  const accumProps = {};
 
   if (type.propTypes) {
-      for (const property in type.propTypes) { // eslint-disable-line
-        if (!type.propTypes.hasOwnProperty(property)) { // eslint-disable-line
-          continue; // eslint-disable-line
-      }
+    Object.keys(type.propTypes).forEach(property => {
       const typeInfo = type.propTypes[property];
-      let propType = PropTypesMap.get(typeInfo) || 'other';
       const required = typeInfo.isRequired === undefined ? 'yes' : 'no';
       const description = type.__docgenInfo &&
         type.__docgenInfo.props &&
         type.__docgenInfo.props[property]
         ? type.__docgenInfo.props[property].description
         : null;
+      let propType = PropTypesMap.get(typeInfo) || 'other';
+
       if (propType === 'other') {
         if (
           type.__docgenInfo &&
@@ -54,32 +51,41 @@ const PropTable = ({ type }) => {
           propType = type.__docgenInfo.props[property].type.name;
         }
       }
-      props[property] = { property, propType, required, description };
-    }
+
+      accumProps[property] = { property, propType, required, description };
+    });
   }
 
   if (type.defaultProps) {
-      for (const property in type.defaultProps) { // eslint-disable-line
-        if (!type.defaultProps.hasOwnProperty(property)) { // eslint-disable-line
-          continue; // eslint-disable-line
-      }
+    Object.keys(type.defaultProps).forEach(property => {
       const value = type.defaultProps[property];
+
       if (value === undefined) {
-          continue; // eslint-disable-line
+        return;
       }
-      if (!props[property]) {
-        props[property] = { property };
+
+      if (!accumProps[property]) {
+        accumProps[property] = { property };
       }
-      props[property].defaultValue = value;
-    }
+
+      accumProps[property].defaultValue = value;
+    });
   }
 
-  const array = Object.values(props);
+  const array = Object.values(accumProps);
+
   if (!array.length) {
     return <small>No propTypes defined!</small>;
   }
+
   array.sort((a, b) => a.property > b.property);
 
+  const propValProps = {
+    maxPropObjectKeys,
+    maxPropArrayLength,
+    maxPropStringLength,
+  };
+
   return (
     <table style={stylesheet.propTable}>
       <thead>
@@ -92,7 +98,7 @@ const PropTable = ({ type }) => {
         </tr>
       </thead>
       <tbody>
-        {array.map(row =>
+        {array.map(row => (
           <tr key={row.property}>
             <td>{row.property}</td>
             <td>{row.propType}</td>
@@ -100,18 +106,15 @@ const PropTable = ({ type }) => {
             <td>
               {row.defaultValue === undefined
                 ? '-'
-                : <PropVal
-                    val={row.defaultValue}
-                    maxPropObjectKeys={maxPropObjectKeys}
-                    maxPropArrayLength={maxPropArrayLength}
-                    maxPropStringLength={maxPropStringLength}
-                  />}
+                : <PropVal val={row.defaultValue} {...propValProps} />}
             </td>
             <td>{row.description}</td>
           </tr>
-        )}
+        ))}
       </tbody>
     </table>
+  );
+}
 
 PropTable.displayName = 'PropTable';
 PropTable.defaultProps = {
@@ -119,4 +122,7 @@ PropTable.defaultProps = {
 };
 PropTable.propTypes = {
   type: PropTypes.func,
+  maxPropObjectKeys: PropTypes.number.isRequired,
+  maxPropArrayLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired,
 };
diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js
index 197b27aa97b1..13901ab87fef 100644
--- a/addons/info/src/components/PropVal.js
+++ b/addons/info/src/components/PropVal.js
@@ -76,9 +76,12 @@ function previewObject(val, maxPropObjectKeys) {
   );
 }
 
-function previewProp({ val, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength }) {
+export default function PropVal(props) {
+  const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
+  let val = props.val;
   let braceWrap = true;
   let content = null;
+
   if (typeof val === 'number') {
     content = <span style={valueStyles.number}>{val}</span>;
   } else if (typeof val === 'string') {
@@ -108,13 +111,13 @@ function previewProp({ val, maxPropObjectKeys, maxPropArrayLength, maxPropString
   }
 
   if (!braceWrap) return content;
-  return <span>{content}</span>;
-}
 
-export default class PropVal extends React.Component {
-  render() {
-    return previewProp(this.props);
-  }
+  return <span>{content}</span>;
 }
 
-module.exports = PropVal;
+PropVal.propTypes = {
+  val: PropTypes.any.isRequired, // eslint-disable-line
+  maxPropObjectKeys: PropTypes.number.isRequired,
+  maxPropArrayLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired,
+};
diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js
index 65dc061ee0d6..64493abfcc9a 100644
--- a/addons/info/src/components/Props.js
+++ b/addons/info/src/components/Props.js
@@ -9,12 +9,7 @@ const stylesheet = {
 };
 
 export default function Props(props) {
-    const {
-      maxPropsIntoLine,
-      maxPropArrayLength,
-      maxPropObjectKeys,
-      maxPropStringLength,
-    } = props;
+  const { maxPropsIntoLine, maxPropArrayLength, maxPropObjectKeys, maxPropStringLength } = props;
   const nodeProps = props.node.props;
   const defaultProps = props.node.type.defaultProps;
   if (!nodeProps || typeof nodeProps !== 'object') {
@@ -23,35 +18,35 @@ export default function Props(props) {
 
   const { propValueStyle, propNameStyle } = stylesheet;
 
-  const names = Object.keys(props).filter(
+  const names = Object.keys(nodeProps).filter(
     name =>
       name[0] !== '_' &&
       name !== 'children' &&
-      (!defaultProps || props[name] !== defaultProps[name])
+      (!defaultProps || nodeProps[name] !== defaultProps[name])
   );
 
-    const breakIntoNewLines = names.length > maxPropsIntoLine;
-    const endingSpace = props.singleLine ? ' ' : '';
+  const breakIntoNewLines = names.length > maxPropsIntoLine;
+  const endingSpace = props.singleLine ? ' ' : '';
 
-    const items = [];
-    names.forEach((name, i) => {
-      items.push(
-        <span key={name}>
+  const items = [];
+  names.forEach((name, i) => {
+    items.push(
+      <span key={name}>
         {breakIntoNewLines ? <span><br />&nbsp;&nbsp;</span> : ' '}
         <span style={propNameStyle}>{name}</span>
         {/* Use implicit true: */}
         {(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') &&
-            <span>
-              =
-              <span style={propValueStyle}>
-                <PropVal
-                  val={props[name]}
-                  maxPropObjectKeys={maxPropObjectKeys}
-                  maxPropArrayLength={maxPropArrayLength}
-                  maxPropStringLength={maxPropStringLength}
-                />
-              </span>
-            </span>}
+          <span>
+            =
+            <span style={propValueStyle}>
+              <PropVal
+                val={nodeProps[name]}
+                maxPropObjectKeys={maxPropObjectKeys}
+                maxPropArrayLength={maxPropArrayLength}
+                maxPropStringLength={maxPropStringLength}
+              />
+            </span>
+          </span>}
 
         {i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
       </span>
@@ -71,4 +66,8 @@ Props.propTypes = {
     type: PropTypes.object.isRequired,
   }).isRequired,
   singleLine: PropTypes.bool,
+  maxPropsIntoLine: PropTypes.number.isRequired,
+  maxPropObjectKeys: PropTypes.number.isRequired,
+  maxPropArrayLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired,
 };
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index b740e050582e..0ec1e096f9de 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -323,7 +323,7 @@ export default class Story extends React.Component {
     array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
 
     const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
-    const propTables = array.map(type =>
+    const propTables = array.map(type => (
       <div key={type.name}>
         <h2 style={this.state.stylesheet.propTableHead}>
           "{type.displayName || type.name}" Component
@@ -335,7 +335,7 @@ export default class Story extends React.Component {
           maxPropStringLength={maxPropStringLength}
         />
       </div>
-    );
+    ));
 
     if (!propTables || propTables.length === 0) {
       return null;
@@ -374,10 +374,10 @@ Story.propTypes = {
   styles: PropTypes.func.isRequired,
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   marksyConf: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  maxPropObjectKeys: PropTypes.number,
-  maxPropArrayLength: PropTypes.number,
-  maxPropsIntoLine: PropTypes.number,
-  maxPropStringLength: PropTypes.number,
+  maxPropsIntoLine: PropTypes.number.isRequired,
+  maxPropObjectKeys: PropTypes.number.isRequired,
+  maxPropArrayLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired,
 };
 Story.defaultProps = {
   context: null,
diff --git a/addons/info/src/index.js b/addons/info/src/index.js
index 1eb725b87c30..4567ed366ba5 100644
--- a/addons/info/src/index.js
+++ b/addons/info/src/index.js
@@ -9,9 +9,9 @@ const defaultOptions = {
   header: true,
   source: true,
   propTables: [],
+  maxPropsIntoLine: 3,
   maxPropObjectKeys: 3,
   maxPropArrayLength: 3,
-  maxPropsIntoLine: 3,
   maxPropStringLength: 50,
 };