From 67a5fd584125dc6c23bb3e6069e8667b1dd0a38c Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Thu, 9 Nov 2017 02:22:26 +0300
Subject: [PATCH 1/2] Addon-info: allow duplicate displayNames

---
 addons/info/src/components/Story.js           |  13 +-
 .../src/__snapshots__/storyshots.test.js.snap | 341 ++++++++++++++++++
 .../src/stories/issues.stories.js             |  19 +
 3 files changed, 367 insertions(+), 6 deletions(-)
 create mode 100644 examples/cra-kitchen-sink/src/stories/issues.stories.js

diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index b0a2863075b6..a02ce066f58b 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -14,6 +14,8 @@ import { Pre } from './markdown';
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
 const { STORYBOOK_REACT_CLASSES } = global;
 
+const getName = type => type.displayName || type.name;
+
 const stylesheet = {
   link: {
     base: {
@@ -324,14 +326,13 @@ export default class Story extends React.Component {
     extract(this.props.children);
 
     const array = Array.from(types.keys());
-    array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
+    array.sort((a, b) => getName(a) > getName(b));
 
     const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
-    const propTables = array.map(type => (
-      <div key={type.displayName || type.name}>
-        <h2 style={this.state.stylesheet.propTableHead}>
-          "{type.displayName || type.name}" Component
-        </h2>
+    const propTables = array.map((type, i) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <div key={`${getName(type)}_${i}`}>
+        <h2 style={this.state.stylesheet.propTableHead}>"{getName(type)}" Component</h2>
         <PropTable
           type={type}
           maxPropObjectKeys={maxPropObjectKeys}
diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
index e785567131a7..1134d6b9824c 100644
--- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
+++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
@@ -6060,6 +6060,347 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
+exports[`Storyshots GitHub issues #1814 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div>
+      <input
+        type="text"
+      />
+      <textarea />
+    </div>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            GitHub issues
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            #1814
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            HOC
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  div
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  Unknown
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  Unknown
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;/
+                  div
+                  &gt;
+                </span>
+              </div>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              
+              " Component
+            </h2>
+            <small>
+              No propTypes defined!
+            </small>
+          </div>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              
+              " Component
+            </h2>
+            <small>
+              No propTypes defined!
+            </small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Navigation Menu link 1`] = `
 <div
   className="css-t9df35"
diff --git a/examples/cra-kitchen-sink/src/stories/issues.stories.js b/examples/cra-kitchen-sink/src/stories/issues.stories.js
new file mode 100644
index 000000000000..b50b1d8a3b9e
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/issues.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
+
+const Input = hoc(() => <input type="text" />);
+
+const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
+
+storiesOf('GitHub issues', module).add(
+  '#1814',
+  withInfo('HOC')(() => (
+    <div>
+      <Input />
+      <TextArea />
+    </div>
+  ))
+);

From aae332b6c4f7afefc773bcc6dd8eed1862b4771f Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Fri, 10 Nov 2017 02:02:36 +0300
Subject: [PATCH 2/2] Move stories to "Addon Info" namespace

---
 .../src/__snapshots__/storyshots.test.js.snap | 3706 ++++++++---------
 .../src/stories/addon-info.stories.js         |   16 +
 .../src/stories/issues.stories.js             |   19 -
 3 files changed, 1868 insertions(+), 1873 deletions(-)
 delete mode 100644 examples/cra-kitchen-sink/src/stories/issues.stories.js

diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
index dfff317a1673..286edbd7c56f 100644
--- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
+++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
@@ -421,7 +421,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
+exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
 <div>
   <div
     style={
@@ -431,12 +431,12 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
       }
     }
   >
-    <button
-      disabled={false}
-      onClick={[Function]}
-    >
-      Button
-    </button>
+    <div>
+      <input
+        type="text"
+      />
+      <textarea />
+    </div>
   </div>
   <button
     onClick={[Function]}
@@ -537,7 +537,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
               }
             }
           >
-            Addon Info.Markdown
+            Addon Info.GitHub issues
           </h1>
           <h2
             style={
@@ -549,7 +549,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
               }
             }
           >
-            Displays Markdown in description
+            #1814
           </h2>
         </div>
         <div
@@ -559,22 +559,6 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
             }
           }
         >
-          <h4
-            id="you-can-use-markdown-in-your-withinfo()-description."
-            style={
-              Object {
-                "WebkitFontSmoothing": "antialiased",
-                "color": "#444",
-                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-                "fontSize": "20px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            You can use markdown in your withInfo() description.
-          </h4>
           <p
             style={
               Object {
@@ -585,42 +569,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
               }
             }
           >
-            Sometimes you might want to manually include some code examples:
-          </p>
-          <pre>
-            <code
-              className="hljs js"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "const codeblock = [];",
-                }
-              }
-            />
-          </pre>
-          <p
-            style={
-              Object {
-                "WebkitFontSmoothing": "antialiased",
-                "color": "#444",
-                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-                "fontSize": "15px",
-              }
-            }
-          >
-            Maybe include a 
-            <a
-              href="http://storybook.js.org"
-              rel="noopener noreferrer"
-              style={
-                Object {
-                  "color": "#3498db",
-                }
-              }
-              target="_blank"
-            >
-              link
-            </a>
-             to your project as well.
+            Allow Duplicate DisplayNames for HOC #1814
           </p>
         </div>
         <div>
@@ -648,91 +597,114 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
               }
             }
           >
-            <div
-              style={
-                Object {
-                  "paddingLeft": 18,
-                  "paddingRight": 3,
+            <div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
                 }
-              }
-            >
-              <span
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  div
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &gt;
+                </span>
+              </div>
+              <div
                 style={
                   Object {
-                    "color": "#777",
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
                   }
                 }
               >
-                &lt;
-                BaseButton
-              </span>
-              <span>
-                <span>
-                   
-                  <span
-                    style={Object {}}
-                  >
-                    onClick
-                  </span>
-                  <span>
-                    =
-                    <span
-                      style={Object {}}
-                    >
-                      <span>
-                        {
-                        <span
-                          style={
-                            Object {
-                              "color": "#170",
-                            }
-                          }
-                        >
-                          clicked()
-                        </span>
-                        }
-                      </span>
-                    </span>
-                  </span>
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  Unknown
                 </span>
-                <span>
-                   
-                  <span
-                    style={Object {}}
-                  >
-                    label
-                  </span>
-                  <span>
-                    =
-                    <span
-                      style={Object {}}
-                    >
-                      <span
-                        style={
-                          Object {
-                            "color": "#22a",
-                            "wordBreak": "break-word",
-                          }
-                        }
-                      >
-                        "
-                        Button
-                        "
-                      </span>
-                    </span>
-                  </span>
-                   
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
                 </span>
-              </span>
-              <span
+              </div>
+              <div
                 style={
                   Object {
-                    "color": "#777",
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
                   }
                 }
               >
-                /&gt;
-              </span>
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  Unknown
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;/
+                  div
+                  &gt;
+                </span>
+              </div>
             </div>
           </pre>
         </div>
@@ -758,109 +730,28 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
               }
             >
               "
-              BaseButton
+              
               " Component
             </h2>
-            <table
+            <small>
+              No propTypes defined!
+            </small>
+          </div>
+          <div>
+            <h2
               style={
                 Object {
-                  "borderCollapse": "separate",
-                  "borderSpacing": "10px 5px",
-                  "marginLeft": -10,
+                  "margin": "20px 0 0 0",
                 }
               }
             >
-              <thead>
-                <tr>
-                  <th>
-                    property
-                  </th>
-                  <th>
-                    propType
-                  </th>
-                  <th>
-                    required
-                  </th>
-                  <th>
-                    default
-                  </th>
-                  <th>
-                    description
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    disabled
-                  </td>
-                  <td>
-                    bool
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#a11",
-                          }
-                        }
-                      >
-                        false
-                      </span>
-                      }
-                    </span>
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    label
-                  </td>
-                  <td>
-                    string
-                  </td>
-                  <td>
-                    yes
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    onClick
-                  </td>
-                  <td>
-                    func
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#170",
-                          }
-                        }
-                      >
-                        onClick()
-                      </span>
-                      }
-                    </span>
-                  </td>
-                  <td />
-                </tr>
-              </tbody>
-            </table>
+              "
+              
+              " Component
+            </h2>
+            <small>
+              No propTypes defined!
+            </small>
           </div>
         </div>
       </div>
@@ -869,7 +760,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1`] = `
+exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
 <div>
   <div
     style={
@@ -967,6 +858,39 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
           }
         }
       >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Addon Info.Markdown
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            Displays Markdown in description
+          </h2>
+        </div>
         <div
           style={
             Object {
@@ -974,6 +898,22 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
             }
           }
         >
+          <h4
+            id="you-can-use-markdown-in-your-withinfo()-description."
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "20px",
+                "fontWeight": 600,
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            You can use markdown in your withInfo() description.
+          </h4>
           <p
             style={
               Object {
@@ -984,7 +924,42 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
               }
             }
           >
-            The Info Addon header should be hidden
+            Sometimes you might want to manually include some code examples:
+          </p>
+          <pre>
+            <code
+              className="hljs js"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "const codeblock = [];",
+                }
+              }
+            />
+          </pre>
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            Maybe include a 
+            <a
+              href="http://storybook.js.org"
+              rel="noopener noreferrer"
+              style={
+                Object {
+                  "color": "#3498db",
+                }
+              }
+              target="_blank"
+            >
+              link
+            </a>
+             to your project as well.
           </p>
         </div>
         <div>
@@ -1031,6 +1006,34 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
                 BaseButton
               </span>
               <span>
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    onClick
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span>
+                        {
+                        <span
+                          style={
+                            Object {
+                              "color": "#170",
+                            }
+                          }
+                        >
+                          clicked()
+                        </span>
+                        }
+                      </span>
+                    </span>
+                  </span>
+                </span>
                 <span>
                    
                   <span
@@ -1205,576 +1208,217 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`] = `
+exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1`] = `
 <div>
   <div
-    style={undefined}
-  >
-    <div
-      style={
-        Object {
-          "WebkitFontSmoothing": "antialiased",
-          "backgroundColor": "#fff",
-          "border": "1px solid #eee",
-          "borderRadius": "2px",
-          "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
-          "color": "#444",
-          "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-          "fontSize": "15px",
-          "fontWeight": 300,
-          "lineHeight": 1.45,
-          "marginTop": "50px",
-          "padding": "20px 40px 40px",
-        }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
       }
-    >
-      <div
-        style={
-          Object {
-            "borderBottom": "1px solid #eee",
-            "marginBottom": 10,
-            "paddingTop": 10,
-          }
-        }
-      >
-        <h1
-          style={
-            Object {
-              "fontSize": "35px",
-              "margin": 0,
-              "padding": 0,
-            }
-          }
-        >
-          Addon Info.Options.inline
-        </h1>
-        <h2
-          style={
-            Object {
-              "fontSize": "22px",
-              "fontWeight": 400,
-              "margin": "0 0 10px 0",
-              "padding": 0,
-            }
-          }
-        >
-          Inlines component inside story
-        </h2>
-      </div>
-    </div>
-  </div>
-  <div
-    style={Object {}}
-  >
-    <button
-      disabled={false}
-      onClick={[Function]}
+    }
+  >
+    <button
+      disabled={false}
+      onClick={[Function]}
     >
       Button
     </button>
   </div>
+  <button
+    onClick={[Function]}
+    style={
+      Object {
+        "background": "#28c",
+        "border": "none",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    type="button"
+  >
+    Show Info
+  </button>
   <div
-    style={undefined}
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
   >
-    <div
+    <button
+      onClick={[Function]}
       style={
         Object {
-          "WebkitFontSmoothing": "antialiased",
-          "backgroundColor": "#fff",
-          "border": "1px solid #eee",
-          "borderRadius": "2px",
-          "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
-          "color": "#444",
-          "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-          "fontSize": "15px",
-          "fontWeight": 300,
-          "lineHeight": 1.45,
-          "marginTop": "50px",
-          "padding": "20px 40px 40px",
+          "background": "#28c",
+          "border": "none",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "top": 0,
         }
       }
+      type="button"
+    >
+      ×
+    </button>
+    <div
+      style={undefined}
     >
       <div
         style={
           Object {
-            "marginBottom": 0,
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
           }
         }
       >
-        <p
+        <div
           style={
             Object {
-              "WebkitFontSmoothing": "antialiased",
-              "color": "#444",
-              "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-              "fontSize": "15px",
+              "marginBottom": 0,
             }
           }
         >
-          Component should be inlined between description and PropType table
-        </p>
-      </div>
-      <div>
-        <h1
-          style={
-            Object {
-              "borderBottom": "1px solid #EEE",
-              "fontSize": "25px",
-              "margin": "20px 0 0 0",
-              "padding": "0 0 5px 0",
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
             }
-          }
-        >
-          Story Source
-        </h1>
-        <pre
-          style={
-            Object {
-              "backgroundColor": "#fafafa",
-              "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
-              "fontSize": ".88em",
-              "lineHeight": 1.5,
-              "overflowX": "scroll",
-              "padding": ".5rem",
+          >
+            The Info Addon header should be hidden
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
             }
-          }
-        >
-          <div
+          >
+            Story Source
+          </h1>
+          <pre
             style={
               Object {
-                "paddingLeft": 18,
-                "paddingRight": 3,
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
               }
             }
           >
-            <span
+            <div
               style={
                 Object {
-                  "color": "#777",
+                  "paddingLeft": 18,
+                  "paddingRight": 3,
                 }
               }
             >
-              &lt;
-              BaseButton
-            </span>
-            <span>
+              <span
+                style={
+                  Object {
+                    "color": "#777",
+                  }
+                }
+              >
+                &lt;
+                BaseButton
+              </span>
               <span>
-                 
-                <span
-                  style={Object {}}
-                >
-                  label
-                </span>
                 <span>
-                  =
+                   
                   <span
                     style={Object {}}
                   >
+                    label
+                  </span>
+                  <span>
+                    =
                     <span
-                      style={
-                        Object {
-                          "color": "#22a",
-                          "wordBreak": "break-word",
-                        }
-                      }
+                      style={Object {}}
                     >
-                      "
-                      Button
-                      "
+                      <span
+                        style={
+                          Object {
+                            "color": "#22a",
+                            "wordBreak": "break-word",
+                          }
+                        }
+                      >
+                        "
+                        Button
+                        "
+                      </span>
                     </span>
                   </span>
+                   
                 </span>
-                 
               </span>
-            </span>
-            <span
-              style={
-                Object {
-                  "color": "#777",
+              <span
+                style={
+                  Object {
+                    "color": "#777",
+                  }
                 }
-              }
-            >
-              /&gt;
-            </span>
-          </div>
-        </pre>
-      </div>
-      <div>
-        <h1
-          style={
-            Object {
-              "borderBottom": "1px solid #EEE",
-              "fontSize": "25px",
-              "margin": "20px 0 0 0",
-              "padding": "0 0 5px 0",
-            }
-          }
-        >
-          Prop Types
-        </h1>
-        <div>
-          <h2
-            style={
-              Object {
-                "margin": "20px 0 0 0",
-              }
-            }
-          >
-            "
-            BaseButton
-            " Component
-          </h2>
-          <table
-            style={
-              Object {
-                "borderCollapse": "separate",
-                "borderSpacing": "10px 5px",
-                "marginLeft": -10,
-              }
-            }
-          >
-            <thead>
-              <tr>
-                <th>
-                  property
-                </th>
-                <th>
-                  propType
-                </th>
-                <th>
-                  required
-                </th>
-                <th>
-                  default
-                </th>
-                <th>
-                  description
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  disabled
-                </td>
-                <td>
-                  bool
-                </td>
-                <td>
-                  no
-                </td>
-                <td>
-                  <span>
-                    {
-                    <span
-                      style={
-                        Object {
-                          "color": "#a11",
-                        }
-                      }
-                    >
-                      false
-                    </span>
-                    }
-                  </span>
-                </td>
-                <td />
-              </tr>
-              <tr>
-                <td>
-                  label
-                </td>
-                <td>
-                  string
-                </td>
-                <td>
-                  yes
-                </td>
-                <td>
-                  -
-                </td>
-                <td />
-              </tr>
-              <tr>
-                <td>
-                  onClick
-                </td>
-                <td>
-                  func
-                </td>
-                <td>
-                  no
-                </td>
-                <td>
-                  <span>
-                    {
-                    <span
-                      style={
-                        Object {
-                          "color": "#170",
-                        }
-                      }
-                    >
-                      onClick()
-                    </span>
-                    }
-                  </span>
-                </td>
-                <td />
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon Info.Options.propTables Shows additional component prop tables 1`] = `
-<div>
-  <div
-    style={
-      Object {
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <button
-      disabled={false}
-      onClick={[Function]}
-    >
-      Button
-    </button>
-  </div>
-  <button
-    onClick={[Function]}
-    style={
-      Object {
-        "background": "#28c",
-        "border": "none",
-        "borderRadius": "0 0 0 5px",
-        "color": "#fff",
-        "cursor": "pointer",
-        "display": "block",
-        "fontFamily": "sans-serif",
-        "fontSize": "12px",
-        "padding": "5px 15px",
-        "position": "fixed",
-        "right": 0,
-        "top": 0,
-      }
-    }
-    type="button"
-  >
-    Show Info
-  </button>
-  <div
-    style={
-      Object {
-        "background": "white",
-        "bottom": 0,
-        "display": "none",
-        "left": 0,
-        "overflow": "auto",
-        "padding": "0 40px",
-        "position": "fixed",
-        "right": 0,
-        "top": 0,
-        "zIndex": 99999,
-      }
-    }
-  >
-    <button
-      onClick={[Function]}
-      style={
-        Object {
-          "background": "#28c",
-          "border": "none",
-          "borderRadius": "0 0 0 5px",
-          "color": "#fff",
-          "cursor": "pointer",
-          "display": "block",
-          "fontFamily": "sans-serif",
-          "fontSize": "12px",
-          "padding": "5px 15px",
-          "position": "fixed",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      type="button"
-    >
-      ×
-    </button>
-    <div
-      style={undefined}
-    >
-      <div
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "backgroundColor": "#fff",
-            "border": "1px solid #eee",
-            "borderRadius": "2px",
-            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
-            "color": "#444",
-            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "marginTop": "50px",
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "borderBottom": "1px solid #eee",
-              "marginBottom": 10,
-              "paddingTop": 10,
-            }
-          }
-        >
-          <h1
-            style={
-              Object {
-                "fontSize": "35px",
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Addon Info.Options.propTables
-          </h1>
-          <h2
-            style={
-              Object {
-                "fontSize": "22px",
-                "fontWeight": 400,
-                "margin": "0 0 10px 0",
-                "padding": 0,
-              }
-            }
-          >
-            Shows additional component prop tables
-          </h2>
-        </div>
-        <div
-          style={
-            Object {
-              "marginBottom": 0,
-            }
-          }
-        >
-          <p
-            style={
-              Object {
-                "WebkitFontSmoothing": "antialiased",
-                "color": "#444",
-                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-                "fontSize": "15px",
-              }
-            }
-          >
-            There should be a prop table added for a component not included in the story
-          </p>
-        </div>
-        <div>
-          <h1
-            style={
-              Object {
-                "borderBottom": "1px solid #EEE",
-                "fontSize": "25px",
-                "margin": "20px 0 0 0",
-                "padding": "0 0 5px 0",
-              }
-            }
-          >
-            Story Source
-          </h1>
-          <pre
-            style={
-              Object {
-                "backgroundColor": "#fafafa",
-                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
-                "fontSize": ".88em",
-                "lineHeight": 1.5,
-                "overflowX": "scroll",
-                "padding": ".5rem",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "paddingLeft": 18,
-                  "paddingRight": 3,
-                }
-              }
-            >
-              <span
-                style={
-                  Object {
-                    "color": "#777",
-                  }
-                }
-              >
-                &lt;
-                BaseButton
-              </span>
-              <span>
-                <span>
-                   
-                  <span
-                    style={Object {}}
-                  >
-                    label
-                  </span>
-                  <span>
-                    =
-                    <span
-                      style={Object {}}
-                    >
-                      <span
-                        style={
-                          Object {
-                            "color": "#22a",
-                            "wordBreak": "break-word",
-                          }
-                        }
-                      >
-                        "
-                        Button
-                        "
-                      </span>
-                    </span>
-                  </span>
-                   
-                </span>
-              </span>
-              <span
-                style={
-                  Object {
-                    "color": "#777",
-                  }
-                }
-              >
-                /&gt;
-              </span>
-            </div>
-          </pre>
-        </div>
-        <div>
-          <h1
-            style={
-              Object {
-                "borderBottom": "1px solid #EEE",
-                "fontSize": "25px",
-                "margin": "20px 0 0 0",
-                "padding": "0 0 5px 0",
+              >
+                /&gt;
+              </span>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
               }
             }
           >
@@ -1893,96 +1537,332 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
               </tbody>
             </table>
           </div>
-          <div>
-            <h2
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`] = `
+<div>
+  <div
+    style={undefined}
+  >
+    <div
+      style={
+        Object {
+          "WebkitFontSmoothing": "antialiased",
+          "backgroundColor": "#fff",
+          "border": "1px solid #eee",
+          "borderRadius": "2px",
+          "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+          "color": "#444",
+          "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+          "fontSize": "15px",
+          "fontWeight": 300,
+          "lineHeight": 1.45,
+          "marginTop": "50px",
+          "padding": "20px 40px 40px",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "borderBottom": "1px solid #eee",
+            "marginBottom": 10,
+            "paddingTop": 10,
+          }
+        }
+      >
+        <h1
+          style={
+            Object {
+              "fontSize": "35px",
+              "margin": 0,
+              "padding": 0,
+            }
+          }
+        >
+          Addon Info.Options.inline
+        </h1>
+        <h2
+          style={
+            Object {
+              "fontSize": "22px",
+              "fontWeight": 400,
+              "margin": "0 0 10px 0",
+              "padding": 0,
+            }
+          }
+        >
+          Inlines component inside story
+        </h2>
+      </div>
+    </div>
+  </div>
+  <div
+    style={Object {}}
+  >
+    <button
+      disabled={false}
+      onClick={[Function]}
+    >
+      Button
+    </button>
+  </div>
+  <div
+    style={undefined}
+  >
+    <div
+      style={
+        Object {
+          "WebkitFontSmoothing": "antialiased",
+          "backgroundColor": "#fff",
+          "border": "1px solid #eee",
+          "borderRadius": "2px",
+          "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+          "color": "#444",
+          "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+          "fontSize": "15px",
+          "fontWeight": 300,
+          "lineHeight": 1.45,
+          "marginTop": "50px",
+          "padding": "20px 40px 40px",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "marginBottom": 0,
+          }
+        }
+      >
+        <p
+          style={
+            Object {
+              "WebkitFontSmoothing": "antialiased",
+              "color": "#444",
+              "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+              "fontSize": "15px",
+            }
+          }
+        >
+          Component should be inlined between description and PropType table
+        </p>
+      </div>
+      <div>
+        <h1
+          style={
+            Object {
+              "borderBottom": "1px solid #EEE",
+              "fontSize": "25px",
+              "margin": "20px 0 0 0",
+              "padding": "0 0 5px 0",
+            }
+          }
+        >
+          Story Source
+        </h1>
+        <pre
+          style={
+            Object {
+              "backgroundColor": "#fafafa",
+              "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+              "fontSize": ".88em",
+              "lineHeight": 1.5,
+              "overflowX": "scroll",
+              "padding": ".5rem",
+            }
+          }
+        >
+          <div
+            style={
+              Object {
+                "paddingLeft": 18,
+                "paddingRight": 3,
+              }
+            }
+          >
+            <span
               style={
                 Object {
-                  "margin": "20px 0 0 0",
+                  "color": "#777",
                 }
               }
             >
-              "
-              FlowTypeButton
-              " Component
-            </h2>
-            <table
+              &lt;
+              BaseButton
+            </span>
+            <span>
+              <span>
+                 
+                <span
+                  style={Object {}}
+                >
+                  label
+                </span>
+                <span>
+                  =
+                  <span
+                    style={Object {}}
+                  >
+                    <span
+                      style={
+                        Object {
+                          "color": "#22a",
+                          "wordBreak": "break-word",
+                        }
+                      }
+                    >
+                      "
+                      Button
+                      "
+                    </span>
+                  </span>
+                </span>
+                 
+              </span>
+            </span>
+            <span
               style={
                 Object {
-                  "borderCollapse": "separate",
-                  "borderSpacing": "10px 5px",
-                  "marginLeft": -10,
+                  "color": "#777",
                 }
               }
             >
-              <thead>
-                <tr>
-                  <th>
-                    property
-                  </th>
-                  <th>
-                    propType
-                  </th>
-                  <th>
-                    required
-                  </th>
-                  <th>
-                    default
-                  </th>
-                  <th>
-                    description
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    disabled
-                  </td>
-                  <td />
-                  <td />
-                  <td>
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#a11",
-                          }
+              /&gt;
+            </span>
+          </div>
+        </pre>
+      </div>
+      <div>
+        <h1
+          style={
+            Object {
+              "borderBottom": "1px solid #EEE",
+              "fontSize": "25px",
+              "margin": "20px 0 0 0",
+              "padding": "0 0 5px 0",
+            }
+          }
+        >
+          Prop Types
+        </h1>
+        <div>
+          <h2
+            style={
+              Object {
+                "margin": "20px 0 0 0",
+              }
+            }
+          >
+            "
+            BaseButton
+            " Component
+          </h2>
+          <table
+            style={
+              Object {
+                "borderCollapse": "separate",
+                "borderSpacing": "10px 5px",
+                "marginLeft": -10,
+              }
+            }
+          >
+            <thead>
+              <tr>
+                <th>
+                  property
+                </th>
+                <th>
+                  propType
+                </th>
+                <th>
+                  required
+                </th>
+                <th>
+                  default
+                </th>
+                <th>
+                  description
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  disabled
+                </td>
+                <td>
+                  bool
+                </td>
+                <td>
+                  no
+                </td>
+                <td>
+                  <span>
+                    {
+                    <span
+                      style={
+                        Object {
+                          "color": "#a11",
                         }
-                      >
-                        false
-                      </span>
                       }
+                    >
+                      false
                     </span>
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    onClick
-                  </td>
-                  <td />
-                  <td />
-                  <td>
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#170",
-                          }
+                    }
+                  </span>
+                </td>
+                <td />
+              </tr>
+              <tr>
+                <td>
+                  label
+                </td>
+                <td>
+                  string
+                </td>
+                <td>
+                  yes
+                </td>
+                <td>
+                  -
+                </td>
+                <td />
+              </tr>
+              <tr>
+                <td>
+                  onClick
+                </td>
+                <td>
+                  func
+                </td>
+                <td>
+                  no
+                </td>
+                <td>
+                  <span>
+                    {
+                    <span
+                      style={
+                        Object {
+                          "color": "#170",
                         }
-                      >
-                        onClick()
-                      </span>
                       }
+                    >
+                      onClick()
                     </span>
-                  </td>
-                  <td />
-                </tr>
-              </tbody>
-            </table>
-          </div>
+                    }
+                  </span>
+                </td>
+                <td />
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>
@@ -1990,7 +1870,7 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from prop tables 1`] = `
+exports[`Storyshots Addon Info.Options.propTables Shows additional component prop tables 1`] = `
 <div>
   <div
     style={
@@ -2000,20 +1880,12 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
       }
     }
   >
-    <div>
-      <button
-        disabled={false}
-        onClick={[Function]}
-      >
-        Button
-      </button>
-      <button
-        disabled={false}
-        onClick={[Function]}
-      >
-        Flow Typed Button
-      </button>
-    </div>
+    <button
+      disabled={false}
+      onClick={[Function]}
+    >
+      Button
+    </button>
   </div>
   <button
     onClick={[Function]}
@@ -2114,7 +1986,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
               }
             }
           >
-            Addon Info.Options.propTablesExclude
+            Addon Info.Options.propTables
           </h1>
           <h2
             style={
@@ -2126,7 +1998,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
               }
             }
           >
-            Exclude component from prop tables
+            Shows additional component prop tables
           </h2>
         </div>
         <div
@@ -2146,7 +2018,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
               }
             }
           >
-            This can exclude extraneous components from being displayed in prop tables.
+            There should be a prop table added for a component not included in the story
           </p>
         </div>
         <div>
@@ -2174,172 +2046,63 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
               }
             }
           >
-            <div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  div
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  BaseButton
-                </span>
-                <span>
-                  <span>
-                     
-                    <span
-                      style={Object {}}
-                    >
-                      label
-                    </span>
-                    <span>
-                      =
-                      <span
-                        style={Object {}}
-                      >
-                        <span
-                          style={
-                            Object {
-                              "color": "#22a",
-                              "wordBreak": "break-word",
-                            }
-                          }
-                        >
-                          "
-                          Button
-                          "
-                        </span>
-                      </span>
-                    </span>
-                     
-                  </span>
-                </span>
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  /&gt;
-                </span>
-              </div>
-              <div
+            <div
+              style={
+                Object {
+                  "paddingLeft": 18,
+                  "paddingRight": 3,
+                }
+              }
+            >
+              <span
                 style={
                   Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  FlowTypeButton
-                </span>
+                &lt;
+                BaseButton
+              </span>
+              <span>
                 <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    label
+                  </span>
                   <span>
-                     
+                    =
                     <span
                       style={Object {}}
                     >
-                      label
-                    </span>
-                    <span>
-                      =
                       <span
-                        style={Object {}}
-                      >
-                        <span
-                          style={
-                            Object {
-                              "color": "#22a",
-                              "wordBreak": "break-word",
-                            }
+                        style={
+                          Object {
+                            "color": "#22a",
+                            "wordBreak": "break-word",
                           }
-                        >
-                          "
-                          Flow Typed Button
-                          "
-                        </span>
+                        }
+                      >
+                        "
+                        Button
+                        "
                       </span>
                     </span>
-                     
                   </span>
+                   
                 </span>
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  /&gt;
-                </span>
-              </div>
-              <div
+              </span>
+              <span
                 style={
                   Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;/
-                  div
-                  &gt;
-                </span>
-              </div>
+                /&gt;
+              </span>
             </div>
           </pre>
         </div>
@@ -2469,6 +2232,96 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
               </tbody>
             </table>
           </div>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              FlowTypeButton
+              " Component
+            </h2>
+            <table
+              style={
+                Object {
+                  "borderCollapse": "separate",
+                  "borderSpacing": "10px 5px",
+                  "marginLeft": -10,
+                }
+              }
+            >
+              <thead>
+                <tr>
+                  <th>
+                    property
+                  </th>
+                  <th>
+                    propType
+                  </th>
+                  <th>
+                    required
+                  </th>
+                  <th>
+                    default
+                  </th>
+                  <th>
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    disabled
+                  </td>
+                  <td />
+                  <td />
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    onClick
+                  </td>
+                  <td />
+                  <td />
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
@@ -2476,7 +2329,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1`] = `
+exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from prop tables 1`] = `
 <div>
   <div
     style={
@@ -2486,12 +2339,20 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
       }
     }
   >
-    <button
-      disabled={false}
-      onClick={[Function]}
-    >
-      Button
-    </button>
+    <div>
+      <button
+        disabled={false}
+        onClick={[Function]}
+      >
+        Button
+      </button>
+      <button
+        disabled={false}
+        onClick={[Function]}
+      >
+        Flow Typed Button
+      </button>
+    </div>
   </div>
   <button
     onClick={[Function]}
@@ -2592,7 +2453,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
               }
             }
           >
-            Addon Info.Options.source
+            Addon Info.Options.propTablesExclude
           </h1>
           <h2
             style={
@@ -2604,7 +2465,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
               }
             }
           >
-            Shows or hides Info Addon source
+            Exclude component from prop tables
           </h2>
         </div>
         <div
@@ -2624,9 +2485,203 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
               }
             }
           >
-            The Info Addon source section should be hidden
+            This can exclude extraneous components from being displayed in prop tables.
           </p>
         </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  div
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  BaseButton
+                </span>
+                <span>
+                  <span>
+                     
+                    <span
+                      style={Object {}}
+                    >
+                      label
+                    </span>
+                    <span>
+                      =
+                      <span
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "color": "#22a",
+                              "wordBreak": "break-word",
+                            }
+                          }
+                        >
+                          "
+                          Button
+                          "
+                        </span>
+                      </span>
+                    </span>
+                     
+                  </span>
+                </span>
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  FlowTypeButton
+                </span>
+                <span>
+                  <span>
+                     
+                    <span
+                      style={Object {}}
+                    >
+                      label
+                    </span>
+                    <span>
+                      =
+                      <span
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "color": "#22a",
+                              "wordBreak": "break-word",
+                            }
+                          }
+                        >
+                          "
+                          Flow Typed Button
+                          "
+                        </span>
+                      </span>
+                    </span>
+                     
+                  </span>
+                </span>
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  /&gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;/
+                  div
+                  &gt;
+                </span>
+              </div>
+            </div>
+          </pre>
+        </div>
         <div>
           <h1
             style={
@@ -2760,7 +2815,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.styles Change info styles // I think this is broken or I am using it wrong? 1`] = `
+exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1`] = `
 <div>
   <div
     style={
@@ -2868,114 +2923,48 @@ exports[`Storyshots Addon Info.Options.styles Change info styles // I think this
           }
         >
           <h1
-            style={
-              Object {
-                "fontSize": "35px",
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Addon Info.Options.styles
-          </h1>
-          <h2
-            style={
-              Object {
-                "fontSize": "22px",
-                "fontWeight": 400,
-                "margin": "0 0 10px 0",
-                "padding": 0,
-              }
-            }
-          >
-            Change info styles // I think this is broken or I am using it wrong?
-          </h2>
-        </div>
-        
-        <div>
-          <h1
-            style={
-              Object {
-                "borderBottom": "1px solid #EEE",
-                "fontSize": "25px",
-                "margin": "20px 0 0 0",
-                "padding": "0 0 5px 0",
-              }
-            }
-          >
-            Story Source
-          </h1>
-          <pre
-            style={
-              Object {
-                "backgroundColor": "#fafafa",
-                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
-                "fontSize": ".88em",
-                "lineHeight": 1.5,
-                "overflowX": "scroll",
-                "padding": ".5rem",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "paddingLeft": 18,
-                  "paddingRight": 3,
-                }
-              }
-            >
-              <span
-                style={
-                  Object {
-                    "color": "#777",
-                  }
-                }
-              >
-                &lt;
-                BaseButton
-              </span>
-              <span>
-                <span>
-                   
-                  <span
-                    style={Object {}}
-                  >
-                    label
-                  </span>
-                  <span>
-                    =
-                    <span
-                      style={Object {}}
-                    >
-                      <span
-                        style={
-                          Object {
-                            "color": "#22a",
-                            "wordBreak": "break-word",
-                          }
-                        }
-                      >
-                        "
-                        Button
-                        "
-                      </span>
-                    </span>
-                  </span>
-                   
-                </span>
-              </span>
-              <span
-                style={
-                  Object {
-                    "color": "#777",
-                  }
-                }
-              >
-                /&gt;
-              </span>
-            </div>
-          </pre>
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Addon Info.Options.source
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            Shows or hides Info Addon source
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+                "fontSize": "15px",
+              }
+            }
+          >
+            The Info Addon source section should be hidden
+          </p>
         </div>
         <div>
           <h1
@@ -3110,7 +3099,7 @@ exports[`Storyshots Addon Info.Options.styles Change info styles // I think this
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`] = `
+exports[`Storyshots Addon Info.Options.styles Change info styles // I think this is broken or I am using it wrong? 1`] = `
 <div>
   <div
     style={
@@ -3124,7 +3113,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
       disabled={false}
       onClick={[Function]}
     >
-      Flow Typed Button
+      Button
     </button>
   </div>
   <button
@@ -3226,7 +3215,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
               }
             }
           >
-            Addon Info.React Docgen
+            Addon Info.Options.styles
           </h1>
           <h2
             style={
@@ -3238,29 +3227,10 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
               }
             }
           >
-            Comments from Flow declarations
+            Change info styles // I think this is broken or I am using it wrong?
           </h2>
         </div>
-        <div
-          style={
-            Object {
-              "marginBottom": 0,
-            }
-          }
-        >
-          <p
-            style={
-              Object {
-                "WebkitFontSmoothing": "antialiased",
-                "color": "#444",
-                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
-                "fontSize": "15px",
-              }
-            }
-          >
-            Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
-          </p>
-        </div>
+        
         <div>
           <h1
             style={
@@ -3302,37 +3272,9 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
                 }
               >
                 &lt;
-                FlowTypeButton
+                BaseButton
               </span>
               <span>
-                <span>
-                   
-                  <span
-                    style={Object {}}
-                  >
-                    onClick
-                  </span>
-                  <span>
-                    =
-                    <span
-                      style={Object {}}
-                    >
-                      <span>
-                        {
-                        <span
-                          style={
-                            Object {
-                              "color": "#170",
-                            }
-                          }
-                        >
-                          clicked()
-                        </span>
-                        }
-                      </span>
-                    </span>
-                  </span>
-                </span>
                 <span>
                    
                   <span
@@ -3354,7 +3296,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
                         }
                       >
                         "
-                        Flow Typed Button
+                        Button
                         "
                       </span>
                     </span>
@@ -3396,7 +3338,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
               }
             >
               "
-              FlowTypeButton
+              BaseButton
               " Component
             </h2>
             <table
@@ -3432,8 +3374,12 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
                   <td>
                     disabled
                   </td>
-                  <td />
-                  <td />
+                  <td>
+                    bool
+                  </td>
+                  <td>
+                    no
+                  </td>
                   <td>
                     <span>
                       {
@@ -3453,10 +3399,29 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
                 </tr>
                 <tr>
                   <td>
-                    onClick
+                    label
+                  </td>
+                  <td>
+                    string
+                  </td>
+                  <td>
+                    yes
+                  </td>
+                  <td>
+                    -
                   </td>
                   <td />
-                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    onClick
+                  </td>
+                  <td>
+                    func
+                  </td>
+                  <td>
+                    no
+                  </td>
                   <td>
                     <span>
                       {
@@ -3484,7 +3449,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations 1`] = `
+exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`] = `
 <div>
   <div
     style={
@@ -3498,7 +3463,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
       disabled={false}
       onClick={[Function]}
     >
-      Docgen Button
+      Flow Typed Button
     </button>
   </div>
   <button
@@ -3612,7 +3577,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
               }
             }
           >
-            Comments from PropType declarations
+            Comments from Flow declarations
           </h2>
         </div>
         <div
@@ -3632,7 +3597,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
               }
             }
           >
-            Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
+            Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
           </p>
         </div>
         <div>
@@ -3676,7 +3641,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
                 }
               >
                 &lt;
-                DocgenButton
+                FlowTypeButton
               </span>
               <span>
                 <span>
@@ -3728,7 +3693,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
                         }
                       >
                         "
-                        Docgen Button
+                        Flow Typed Button
                         "
                       </span>
                     </span>
@@ -3770,7 +3735,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
               }
             >
               "
-              DocgenButton
+              FlowTypeButton
               " Component
             </h2>
             <table
@@ -3806,12 +3771,8 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
                   <td>
                     disabled
                   </td>
-                  <td>
-                    bool
-                  </td>
-                  <td>
-                    no
-                  </td>
+                  <td />
+                  <td />
                   <td>
                     <span>
                       {
@@ -3829,31 +3790,12 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
                   </td>
                   <td />
                 </tr>
-                <tr>
-                  <td>
-                    label
-                  </td>
-                  <td>
-                    string
-                  </td>
-                  <td>
-                    yes
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
                 <tr>
                   <td>
                     onClick
                   </td>
-                  <td>
-                    func
-                  </td>
-                  <td>
-                    no
-                  </td>
+                  <td />
+                  <td />
                   <td>
                     <span>
                       {
@@ -3871,81 +3813,6 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
                   </td>
                   <td />
                 </tr>
-                <tr>
-                  <td>
-                    one
-                  </td>
-                  <td>
-                    other
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    two
-                  </td>
-                  <td>
-                    other
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    msg
-                  </td>
-                  <td>
-                    other
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    enm
-                  </td>
-                  <td>
-                    other
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    union
-                  </td>
-                  <td>
-                    other
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
               </tbody>
             </table>
           </div>
@@ -3956,7 +3823,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from component declaration 1`] = `
+exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations 1`] = `
 <div>
   <div
     style={
@@ -3970,7 +3837,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
       disabled={false}
       onClick={[Function]}
     >
-      Button
+      Docgen Button
     </button>
   </div>
   <button
@@ -4084,7 +3951,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
               }
             }
           >
-            Comments from component declaration
+            Comments from PropType declarations
           </h2>
         </div>
         <div
@@ -4104,7 +3971,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
               }
             }
           >
-            Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
+            Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
           </p>
         </div>
         <div>
@@ -4148,7 +4015,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
                 }
               >
                 &lt;
-                BaseButton
+                DocgenButton
               </span>
               <span>
                 <span>
@@ -4200,7 +4067,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
                         }
                       >
                         "
-                        Button
+                        Docgen Button
                         "
                       </span>
                     </span>
@@ -4242,7 +4109,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
               }
             >
               "
-              BaseButton
+              DocgenButton
               " Component
             </h2>
             <table
@@ -4343,178 +4210,92 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    one
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    two
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    msg
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    enm
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    union
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
               </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon Knobs.withKnobs triggers actions via button 1`] = `
-<div>
-  <p>
-    Hit the knob load button and it should trigger an async load after a short delay
-  </p>
-  <p>
-    No items loaded
-  </p>
-</div>
-`;
-
-exports[`Storyshots Addon Knobs.withKnobs tweaks static values 1`] = `
-<div
-  style={
-    Object {
-      "backgroundColor": "#ffff00",
-      "border": "3px solid #ff00ff",
-      "padding": "10px",
-    }
-  }
->
-  <p>
-    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
-  </p>
-  <p>
-    My birthday is: 
-    January 20, 2017
-  </p>
-  <p>
-    My wallet contains: $
-    12.50
-  </p>
-  <p>
-    In my backpack, I have:
-  </p>
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-  <p>
-    Nice to meet you!
-  </p>
-  <hr />
-  <p>
-    PS. My shirt pocket contains: 
-  </p>
-</div>
-`;
-
-exports[`Storyshots Addon Knobs.withKnobsOptions triggers actions via button with debounce delay 1`] = `
-<div>
-  <p>
-    Hit the knob load button and it should trigger an async load after a short delay
-  </p>
-  <p>
-    No items loaded
-  </p>
-</div>
-`;
-
-exports[`Storyshots Addon Knobs.withKnobsOptions tweaks static values with debounce delay 1`] = `
-<div
-  style={
-    Object {
-      "backgroundColor": "#ffff00",
-      "border": "3px solid #ff00ff",
-      "padding": "10px",
-    }
-  }
->
-  <p>
-    If you are encountering performance issues with state updating too often, use withKnobsOptions to debounce changes.
-  </p>
-  <p>
-    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
-  </p>
-  <p>
-    My birthday is: 
-    January 20, 2017
-  </p>
-  <p>
-    My wallet contains: $
-    12.50
-  </p>
-  <p>
-    In my backpack, I have:
-  </p>
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-  <p>
-    Nice to meet you!
-  </p>
-  <hr />
-  <p>
-    PS. My shirt pocket contains: 
-  </p>
-</div>
-`;
-
-exports[`Storyshots Addon Notes using deprecated API 1`] = `
-<button
-  disabled={false}
-  onClick={[Function]}
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Addon Notes withNotes 1`] = `
-<button
-  disabled={false}
-  onClick={[Function]}
->
-  Button with notes - check the notes panel for details
-</button>
-`;
-
-exports[`Storyshots App full app 1`] = `
-<div
-  className="App"
->
-  <div
-    className="App-header"
-  >
-    <img
-      alt="logo"
-      className="App-logo"
-      src="file-stub"
-    />
-    <h2>
-      Welcome to React
-    </h2>
-  </div>
-  <p
-    className="App-intro"
-  >
-    To get started, edit 
-    <code>
-      src/App.js
-    </code>
-     and save to reload.
-  </p>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Button addons composition 1`] = `
+exports[`Storyshots Addon Info.React Docgen Comments from component declaration 1`] = `
 <div>
   <div
     style={
@@ -4524,30 +4305,12 @@ exports[`Storyshots Button addons composition 1`] = `
       }
     }
   >
-    <div>
-      click the 
-      <span
-        style={
-          Object {
-            "background": "rgb(34, 136, 204)",
-            "borderRadius": "0px 0px 0px 5px",
-            "color": "rgb(255, 255, 255)",
-            "fontFamily": "sans-serif",
-            "fontSize": 12,
-            "margin": 10,
-            "padding": "5px 15px",
-            "textDecoration": "none",
-          }
-        }
-      >
-         
-        Show Info
-         
-      </span>
-       label in top right for info about "
-      addons composition
-      "
-    </div>
+    <button
+      disabled={false}
+      onClick={[Function]}
+    >
+      Button
+    </button>
   </div>
   <button
     onClick={[Function]}
@@ -4648,7 +4411,7 @@ exports[`Storyshots Button addons composition 1`] = `
               }
             }
           >
-            Button
+            Addon Info.React Docgen
           </h1>
           <h2
             style={
@@ -4660,7 +4423,7 @@ exports[`Storyshots Button addons composition 1`] = `
               }
             }
           >
-            addons composition
+            Comments from component declaration
           </h2>
         </div>
         <div
@@ -4680,7 +4443,7 @@ exports[`Storyshots Button addons composition 1`] = `
               }
             }
           >
-            see Notes panel for composition info
+            Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
           </p>
         </div>
         <div>
@@ -4708,173 +4471,91 @@ exports[`Storyshots Button addons composition 1`] = `
               }
             }
           >
-            <div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  div
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                />
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  click the 
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;
-                  InfoButton
-                </span>
-                <span />
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  /&gt;
-                </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
+            <div
+              style={
+                Object {
+                  "paddingLeft": 18,
+                  "paddingRight": 3,
                 }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                   label in top right for info about "
-                </span>
-              </div>
-              <div
+              }
+            >
+              <span
                 style={
                   Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  addons composition
+                &lt;
+                BaseButton
+              </span>
+              <span>
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    onClick
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span>
+                        {
+                        <span
+                          style={
+                            Object {
+                              "color": "#170",
+                            }
+                          }
+                        >
+                          clicked()
+                        </span>
+                        }
+                      </span>
+                    </span>
+                  </span>
                 </span>
-              </div>
-              <div
-                style={
-                  Object {
-                    "paddingLeft": 33,
-                    "paddingRight": 3,
-                  }
-                }
-              >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  "
+                <span>
+                   
+                  <span
+                    style={Object {}}
+                  >
+                    label
+                  </span>
+                  <span>
+                    =
+                    <span
+                      style={Object {}}
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#22a",
+                            "wordBreak": "break-word",
+                          }
+                        }
+                      >
+                        "
+                        Button
+                        "
+                      </span>
+                    </span>
+                  </span>
+                   
                 </span>
-              </div>
-              <div
+              </span>
+              <span
                 style={
                   Object {
-                    "paddingLeft": 18,
-                    "paddingRight": 3,
+                    "color": "#777",
                   }
                 }
               >
-                <span
-                  style={
-                    Object {
-                      "color": "#777",
-                    }
-                  }
-                >
-                  &lt;/
-                  div
-                  &gt;
-                </span>
-              </div>
+                /&gt;
+              </span>
             </div>
           </pre>
         </div>
@@ -4900,12 +4581,109 @@ exports[`Storyshots Button addons composition 1`] = `
               }
             >
               "
-              InfoButton
+              BaseButton
               " Component
             </h2>
-            <small>
-              No propTypes defined!
-            </small>
+            <table
+              style={
+                Object {
+                  "borderCollapse": "separate",
+                  "borderSpacing": "10px 5px",
+                  "marginLeft": -10,
+                }
+              }
+            >
+              <thead>
+                <tr>
+                  <th>
+                    property
+                  </th>
+                  <th>
+                    propType
+                  </th>
+                  <th>
+                    required
+                  </th>
+                  <th>
+                    default
+                  </th>
+                  <th>
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    disabled
+                  </td>
+                  <td>
+                    bool
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    label
+                  </td>
+                  <td>
+                    string
+                  </td>
+                  <td>
+                    yes
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    onClick
+                  </td>
+                  <td>
+                    func
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#170",
+                          }
+                        }
+                      >
+                        onClick()
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
@@ -4914,7 +4692,168 @@ exports[`Storyshots Button addons composition 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button with new info 1`] = `
+exports[`Storyshots Addon Knobs.withKnobs triggers actions via button 1`] = `
+<div>
+  <p>
+    Hit the knob load button and it should trigger an async load after a short delay
+  </p>
+  <p>
+    No items loaded
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Knobs.withKnobs tweaks static values 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#ffff00",
+      "border": "3px solid #ff00ff",
+      "padding": "10px",
+    }
+  }
+>
+  <p>
+    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
+  </p>
+  <p>
+    My birthday is: 
+    January 20, 2017
+  </p>
+  <p>
+    My wallet contains: $
+    12.50
+  </p>
+  <p>
+    In my backpack, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+  <hr />
+  <p>
+    PS. My shirt pocket contains: 
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Knobs.withKnobsOptions triggers actions via button with debounce delay 1`] = `
+<div>
+  <p>
+    Hit the knob load button and it should trigger an async load after a short delay
+  </p>
+  <p>
+    No items loaded
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Knobs.withKnobsOptions tweaks static values with debounce delay 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#ffff00",
+      "border": "3px solid #ff00ff",
+      "padding": "10px",
+    }
+  }
+>
+  <p>
+    If you are encountering performance issues with state updating too often, use withKnobsOptions to debounce changes.
+  </p>
+  <p>
+    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
+  </p>
+  <p>
+    My birthday is: 
+    January 20, 2017
+  </p>
+  <p>
+    My wallet contains: $
+    12.50
+  </p>
+  <p>
+    In my backpack, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+  <hr />
+  <p>
+    PS. My shirt pocket contains: 
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Notes using deprecated API 1`] = `
+<button
+  disabled={false}
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Addon Notes withNotes 1`] = `
+<button
+  disabled={false}
+  onClick={[Function]}
+>
+  Button with notes - check the notes panel for details
+</button>
+`;
+
+exports[`Storyshots App full app 1`] = `
+<div
+  className="App"
+>
+  <div
+    className="App-header"
+  >
+    <img
+      alt="logo"
+      className="App-logo"
+      src="file-stub"
+    />
+    <h2>
+      Welcome to React
+    </h2>
+  </div>
+  <p
+    className="App-intro"
+  >
+    To get started, edit 
+    <code>
+      src/App.js
+    </code>
+     and save to reload.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Button addons composition 1`] = `
 <div>
   <div
     style={
@@ -4924,9 +4863,7 @@ exports[`Storyshots Button with new info 1`] = `
       }
     }
   >
-    <div
-      title="the best container ever"
-    >
+    <div>
       click the 
       <span
         style={
@@ -4947,9 +4884,8 @@ exports[`Storyshots Button with new info 1`] = `
          
       </span>
        label in top right for info about "
-      with new info
+      addons composition
       "
-      
     </div>
   </div>
   <button
@@ -5063,7 +4999,7 @@ exports[`Storyshots Button with new info 1`] = `
               }
             }
           >
-            with new info
+            addons composition
           </h2>
         </div>
         <div
@@ -5083,20 +5019,7 @@ exports[`Storyshots Button with new info 1`] = `
               }
             }
           >
-            Use the 
-            <a
-              href="https://github.com/storybooks/storybook/tree/master/addons/info"
-              rel="noopener noreferrer"
-              style={
-                Object {
-                  "color": "#3498db",
-                }
-              }
-              target="_blank"
-            >
-              info addon
-            </a>
-             with its new painless API.
+            see Notes panel for composition info
           </p>
         </div>
         <div>
@@ -5141,7 +5064,7 @@ exports[`Storyshots Button with new info 1`] = `
                   }
                 >
                   &lt;
-                  Container
+                  div
                 </span>
                 <span />
                 <span
@@ -5250,7 +5173,7 @@ exports[`Storyshots Button with new info 1`] = `
                     }
                   }
                 >
-                  with new info
+                  addons composition
                 </span>
               </div>
               <div
@@ -5287,7 +5210,7 @@ exports[`Storyshots Button with new info 1`] = `
                   }
                 >
                   &lt;/
-                  Container
+                  div
                   &gt;
                 </span>
               </div>
@@ -5307,145 +5230,6 @@ exports[`Storyshots Button with new info 1`] = `
           >
             Prop Types
           </h1>
-          <div>
-            <h2
-              style={
-                Object {
-                  "margin": "20px 0 0 0",
-                }
-              }
-            >
-              "
-              Container
-              " Component
-            </h2>
-            <table
-              style={
-                Object {
-                  "borderCollapse": "separate",
-                  "borderSpacing": "10px 5px",
-                  "marginLeft": -10,
-                }
-              }
-            >
-              <thead>
-                <tr>
-                  <th>
-                    property
-                  </th>
-                  <th>
-                    propType
-                  </th>
-                  <th>
-                    required
-                  </th>
-                  <th>
-                    default
-                  </th>
-                  <th>
-                    description
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    children
-                  </td>
-                  <td>
-                    node
-                  </td>
-                  <td>
-                    yes
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    isAmazing
-                  </td>
-                  <td>
-                    bool
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#a11",
-                          }
-                        }
-                      >
-                        false
-                      </span>
-                      }
-                    </span>
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    age
-                  </td>
-                  <td>
-                    number
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    <span>
-                      {
-                      <span
-                        style={
-                          Object {
-                            "color": "#a11",
-                          }
-                        }
-                      >
-                        0
-                      </span>
-                      }
-                    </span>
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td>
-                    title
-                  </td>
-                  <td>
-                    string
-                  </td>
-                  <td>
-                    no
-                  </td>
-                  <td>
-                    <span
-                      style={
-                        Object {
-                          "color": "#22a",
-                          "wordBreak": "break-word",
-                        }
-                      }
-                    >
-                      "
-                      the best container ever
-                      "
-                    </span>
-                  </td>
-                  <td />
-                </tr>
-              </tbody>
-            </table>
-          </div>
           <div>
             <h2
               style={
@@ -5469,24 +5253,7 @@ exports[`Storyshots Button with new info 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button with notes 1`] = `
-<button
-  className="css-1yjiefr"
->
-  Check my notes in the notes panel
-</button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Button with some info 1`] = `
+exports[`Storyshots Button with new info 1`] = `
 <div>
   <div
     style={
@@ -5519,7 +5286,7 @@ exports[`Storyshots Button with some info 1`] = `
          
       </span>
        label in top right for info about "
-      with some info
+      with new info
       "
       
     </div>
@@ -5635,7 +5402,7 @@ exports[`Storyshots Button with some info 1`] = `
               }
             }
           >
-            with some info
+            with new info
           </h2>
         </div>
         <div
@@ -5668,7 +5435,7 @@ exports[`Storyshots Button with some info 1`] = `
             >
               info addon
             </a>
-             with its painful API.
+             with its new painless API.
           </p>
         </div>
         <div>
@@ -5726,6 +5493,22 @@ exports[`Storyshots Button with some info 1`] = `
                   &gt;
                 </span>
               </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                />
+              </div>
               <div
                 style={
                   Object {
@@ -5806,7 +5589,7 @@ exports[`Storyshots Button with some info 1`] = `
                     }
                   }
                 >
-                  with some info
+                  with new info
                 </span>
               </div>
               <div
@@ -6025,16 +5808,24 @@ exports[`Storyshots Button with some info 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button with notes 1`] = `
+<button
+  className="css-1yjiefr"
+>
+  Check my notes in the notes panel
+</button>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
 <button
   className="css-1yjiefr"
   onClick={[Function]}
 >
-  Hello Button
+  😀 😎 👍 💯
 </button>
 `;
 
-exports[`Storyshots GitHub issues #1814 1`] = `
+exports[`Storyshots Button with some info 1`] = `
 <div>
   <div
     style={
@@ -6044,19 +5835,40 @@ exports[`Storyshots GitHub issues #1814 1`] = `
       }
     }
   >
-    <div>
-      <input
-        type="text"
-      />
-      <textarea />
+    <div
+      title="the best container ever"
+    >
+      click the 
+      <span
+        style={
+          Object {
+            "background": "rgb(34, 136, 204)",
+            "borderRadius": "0px 0px 0px 5px",
+            "color": "rgb(255, 255, 255)",
+            "fontFamily": "sans-serif",
+            "fontSize": 12,
+            "margin": 10,
+            "padding": "5px 15px",
+            "textDecoration": "none",
+          }
+        }
+      >
+         
+        Show Info
+         
+      </span>
+       label in top right for info about "
+      with some info
+      "
+      
     </div>
   </div>
-  <a
+  <button
     onClick={[Function]}
-    role="button"
     style={
       Object {
         "background": "#28c",
+        "border": "none",
         "borderRadius": "0 0 0 5px",
         "color": "#fff",
         "cursor": "pointer",
@@ -6066,14 +5878,13 @@ exports[`Storyshots GitHub issues #1814 1`] = `
         "padding": "5px 15px",
         "position": "fixed",
         "right": 0,
-        "textDecoration": "none",
         "top": 0,
       }
     }
-    tabIndex="0"
+    type="button"
   >
     Show Info
-  </a>
+  </button>
   <div
     style={
       Object {
@@ -6090,12 +5901,12 @@ exports[`Storyshots GitHub issues #1814 1`] = `
       }
     }
   >
-    <a
+    <button
       onClick={[Function]}
-      role="button"
       style={
         Object {
           "background": "#28c",
+          "border": "none",
           "borderRadius": "0 0 0 5px",
           "color": "#fff",
           "cursor": "pointer",
@@ -6105,14 +5916,13 @@ exports[`Storyshots GitHub issues #1814 1`] = `
           "padding": "5px 15px",
           "position": "fixed",
           "right": 0,
-          "textDecoration": "none",
           "top": 0,
         }
       }
-      tabIndex="0"
+      type="button"
     >
       ×
-    </a>
+    </button>
     <div
       style={undefined}
     >
@@ -6152,7 +5962,7 @@ exports[`Storyshots GitHub issues #1814 1`] = `
               }
             }
           >
-            GitHub issues
+            Button
           </h1>
           <h2
             style={
@@ -6164,7 +5974,7 @@ exports[`Storyshots GitHub issues #1814 1`] = `
               }
             }
           >
-            #1814
+            with some info
           </h2>
         </div>
         <div
@@ -6184,7 +5994,20 @@ exports[`Storyshots GitHub issues #1814 1`] = `
               }
             }
           >
-            HOC
+            Use the 
+            <a
+              href="https://github.com/storybooks/storybook/tree/master/addons/info"
+              rel="noopener noreferrer"
+              style={
+                Object {
+                  "color": "#3498db",
+                }
+              }
+              target="_blank"
+            >
+              info addon
+            </a>
+             with its painful API.
           </p>
         </div>
         <div>
@@ -6229,7 +6052,7 @@ exports[`Storyshots GitHub issues #1814 1`] = `
                   }
                 >
                   &lt;
-                  div
+                  Container
                 </span>
                 <span />
                 <span
@@ -6242,6 +6065,24 @@ exports[`Storyshots GitHub issues #1814 1`] = `
                   &gt;
                 </span>
               </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  click the 
+                </span>
+              </div>
               <div
                 style={
                   Object {
@@ -6258,7 +6099,7 @@ exports[`Storyshots GitHub issues #1814 1`] = `
                   }
                 >
                   &lt;
-                  Unknown
+                  InfoButton
                 </span>
                 <span />
                 <span
@@ -6286,10 +6127,17 @@ exports[`Storyshots GitHub issues #1814 1`] = `
                     }
                   }
                 >
-                  &lt;
-                  Unknown
+                   label in top right for info about "
                 </span>
-                <span />
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
                 <span
                   style={
                     Object {
@@ -6297,7 +6145,25 @@ exports[`Storyshots GitHub issues #1814 1`] = `
                     }
                   }
                 >
-                  /&gt;
+                  with some info
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  "
                 </span>
               </div>
               <div
@@ -6316,7 +6182,7 @@ exports[`Storyshots GitHub issues #1814 1`] = `
                   }
                 >
                   &lt;/
-                  div
+                  Container
                   &gt;
                 </span>
               </div>
@@ -6345,12 +6211,135 @@ exports[`Storyshots GitHub issues #1814 1`] = `
               }
             >
               "
-              
+              Container
               " Component
             </h2>
-            <small>
-              No propTypes defined!
-            </small>
+            <table
+              style={
+                Object {
+                  "borderCollapse": "separate",
+                  "borderSpacing": "10px 5px",
+                  "marginLeft": -10,
+                }
+              }
+            >
+              <thead>
+                <tr>
+                  <th>
+                    property
+                  </th>
+                  <th>
+                    propType
+                  </th>
+                  <th>
+                    required
+                  </th>
+                  <th>
+                    default
+                  </th>
+                  <th>
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    children
+                  </td>
+                  <td>
+                    node
+                  </td>
+                  <td>
+                    yes
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    isAmazing
+                  </td>
+                  <td>
+                    bool
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        false
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    age
+                  </td>
+                  <td>
+                    number
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#a11",
+                          }
+                        }
+                      >
+                        0
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    title
+                  </td>
+                  <td>
+                    string
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span
+                      style={
+                        Object {
+                          "color": "#22a",
+                          "wordBreak": "break-word",
+                        }
+                      }
+                    >
+                      "
+                      the best container ever
+                      "
+                    </span>
+                  </td>
+                  <td />
+                </tr>
+              </tbody>
+            </table>
           </div>
           <div>
             <h2
@@ -6361,7 +6350,7 @@ exports[`Storyshots GitHub issues #1814 1`] = `
               }
             >
               "
-              
+              InfoButton
               " Component
             </h2>
             <small>
@@ -6375,6 +6364,15 @@ exports[`Storyshots GitHub issues #1814 1`] = `
 </div>
 `;
 
+exports[`Storyshots Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;
+
 exports[`Storyshots Navigation Menu link 1`] = `
 <div
   className="css-t9df35"
diff --git a/examples/cra-kitchen-sink/src/stories/addon-info.stories.js b/examples/cra-kitchen-sink/src/stories/addon-info.stories.js
index 0aec884b6d87..ba836f024db1 100644
--- a/examples/cra-kitchen-sink/src/stories/addon-info.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/addon-info.stories.js
@@ -100,3 +100,19 @@ storiesOf('Addon Info.Decorator', module)
     withInfo('Info could be used as a global or local decorator as well.')(story)(context)
   )
   .add('Use Info as story decorator', () => <BaseButton label="Button" />);
+
+const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
+
+const Input = hoc(() => <input type="text" />);
+
+const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
+
+storiesOf('Addon Info.GitHub issues', module).add(
+  '#1814',
+  withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
+    <div>
+      <Input />
+      <TextArea />
+    </div>
+  ))
+);
diff --git a/examples/cra-kitchen-sink/src/stories/issues.stories.js b/examples/cra-kitchen-sink/src/stories/issues.stories.js
deleted file mode 100644
index b50b1d8a3b9e..000000000000
--- a/examples/cra-kitchen-sink/src/stories/issues.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-
-const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
-
-const Input = hoc(() => <input type="text" />);
-
-const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
-
-storiesOf('GitHub issues', module).add(
-  '#1814',
-  withInfo('HOC')(() => (
-    <div>
-      <Input />
-      <TextArea />
-    </div>
-  ))
-);