diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index e3cb3ea64eaa..b2411d48c6be 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -67,8 +67,8 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
             <div>
               <h1>
                 function func(x) {
-        return x + 1;
-      }
+          return x + 1;
+        }
               </h1>
               <h2>
                 [object Object]
@@ -230,9 +230,1346 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
                   Object {
                     "__html": "<h1>HTML Mock</h1>",
                   }
-                }
-                key="0"
-              />
+                }
+                key="0"
+              />
+            </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
+                theme={Object {}}
+              >
+                <pre
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "backgroundColor": "#fafafa",
+                      "display": "flex",
+                      "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                      "fontSize": ".88em",
+                      "justifyContent": "space-between",
+                      "lineHeight": 1.5,
+                      "overflowX": "scroll",
+                      "padding": ".5rem",
+                    }
+                  }
+                >
+                  <div>
+                    <Node
+                      depth={0}
+                      key="0/.0"
+                      maxPropArrayLength={3}
+                      maxPropObjectKeys={3}
+                      maxPropStringLength={50}
+                      maxPropsIntoLine={3}
+                      node={
+                        <div>
+                          It's a 
+                           story:
+                          <TestComponent
+                            array={
+                              Array [
+                                1,
+                                2,
+                                3,
+                              ]
+                            }
+                            bool={true}
+                            func={[Function]}
+                            number={7}
+                            obj={
+                              Object {
+                                "a": "a",
+                                "b": "b",
+                              }
+                            }
+                            string="seven"
+                          />
+                        </div>
+                      }
+                    >
+                      <div>
+                        <div
+                          style={
+                            Object {
+                              "paddingLeft": 18,
+                              "paddingRight": 3,
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "color": "#444",
+                              }
+                            }
+                          >
+                            &lt;
+                            div
+                          </span>
+                          <Props
+                            maxPropArrayLength={3}
+                            maxPropObjectKeys={3}
+                            maxPropStringLength={50}
+                            maxPropsIntoLine={3}
+                            node={
+                              <div>
+                                It's a 
+                                 story:
+                                <TestComponent
+                                  array={
+                                    Array [
+                                      1,
+                                      2,
+                                      3,
+                                    ]
+                                  }
+                                  bool={true}
+                                  func={[Function]}
+                                  number={7}
+                                  obj={
+                                    Object {
+                                      "a": "a",
+                                      "b": "b",
+                                    }
+                                  }
+                                  string="seven"
+                                />
+                              </div>
+                            }
+                            singleLine={false}
+                          >
+                            <span />
+                          </Props>
+                          <span
+                            style={
+                              Object {
+                                "color": "#444",
+                              }
+                            }
+                          >
+                            &gt;
+                          </span>
+                        </div>
+                        <Node
+                          depth={1}
+                          key=".0"
+                          maxPropArrayLength={3}
+                          maxPropObjectKeys={3}
+                          maxPropStringLength={50}
+                          maxPropsIntoLine={3}
+                          node="It's a "
+                        >
+                          <div
+                            style={
+                              Object {
+                                "paddingLeft": 33,
+                                "paddingRight": 3,
+                              }
+                            }
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "color": "#444",
+                                }
+                              }
+                            >
+                              It's a 
+                            </span>
+                          </div>
+                        </Node>
+                        <Node
+                          depth={1}
+                          key=".1"
+                          maxPropArrayLength={3}
+                          maxPropObjectKeys={3}
+                          maxPropStringLength={50}
+                          maxPropsIntoLine={3}
+                          node={null}
+                        >
+                          <div
+                            style={
+                              Object {
+                                "paddingLeft": 33,
+                                "paddingRight": 3,
+                              }
+                            }
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "color": "#444",
+                                }
+                              }
+                            />
+                          </div>
+                        </Node>
+                        <Node
+                          depth={1}
+                          key=".2"
+                          maxPropArrayLength={3}
+                          maxPropObjectKeys={3}
+                          maxPropStringLength={50}
+                          maxPropsIntoLine={3}
+                          node=" story:"
+                        >
+                          <div
+                            style={
+                              Object {
+                                "paddingLeft": 33,
+                                "paddingRight": 3,
+                              }
+                            }
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "color": "#444",
+                                }
+                              }
+                            >
+                               story:
+                            </span>
+                          </div>
+                        </Node>
+                        <Node
+                          depth={1}
+                          key=".3"
+                          maxPropArrayLength={3}
+                          maxPropObjectKeys={3}
+                          maxPropStringLength={50}
+                          maxPropsIntoLine={3}
+                          node={
+                            <TestComponent
+                              array={
+                                Array [
+                                  1,
+                                  2,
+                                  3,
+                                ]
+                              }
+                              bool={true}
+                              func={[Function]}
+                              number={7}
+                              obj={
+                                Object {
+                                  "a": "a",
+                                  "b": "b",
+                                }
+                              }
+                              string="seven"
+                            />
+                          }
+                        >
+                          <div
+                            style={
+                              Object {
+                                "paddingLeft": 33,
+                                "paddingRight": 3,
+                              }
+                            }
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "color": "#444",
+                                }
+                              }
+                            >
+                              &lt;
+                              TestComponent
+                            </span>
+                            <Props
+                              maxPropArrayLength={3}
+                              maxPropObjectKeys={3}
+                              maxPropStringLength={50}
+                              maxPropsIntoLine={3}
+                              node={
+                                <TestComponent
+                                  array={
+                                    Array [
+                                      1,
+                                      2,
+                                      3,
+                                    ]
+                                  }
+                                  bool={true}
+                                  func={[Function]}
+                                  number={7}
+                                  obj={
+                                    Object {
+                                      "a": "a",
+                                      "b": "b",
+                                    }
+                                  }
+                                  string="seven"
+                                />
+                              }
+                              singleLine={true}
+                            >
+                              <span>
+                                <span
+                                  key="func"
+                                >
+                                  <span>
+                                    <br />
+                                      
+                                  </span>
+                                  <span
+                                    style={Object {}}
+                                  >
+                                    func
+                                  </span>
+                                  <span>
+                                    =
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      {
+                                      <PropVal
+                                        level={1}
+                                        maxPropArrayLength={3}
+                                        maxPropObjectKeys={3}
+                                        maxPropStringLength={50}
+                                        maxPropsIntoLine={3}
+                                        theme={Object {}}
+                                        val={[Function]}
+                                        valueStyles={null}
+                                      >
+                                        <span
+                                          style={
+                                            Object {
+                                              "color": "#170",
+                                            }
+                                          }
+                                        >
+                                          func
+                                        </span>
+                                      </PropVal>
+                                      }
+                                    </span>
+                                  </span>
+                                </span>
+                                <span
+                                  key="obj"
+                                >
+                                  <span>
+                                    <br />
+                                      
+                                  </span>
+                                  <span
+                                    style={Object {}}
+                                  >
+                                    obj
+                                  </span>
+                                  <span>
+                                    =
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      {
+                                      <PropVal
+                                        level={1}
+                                        maxPropArrayLength={3}
+                                        maxPropObjectKeys={3}
+                                        maxPropStringLength={50}
+                                        maxPropsIntoLine={3}
+                                        theme={Object {}}
+                                        val={
+                                          Object {
+                                            "a": "a",
+                                            "b": "b",
+                                          }
+                                        }
+                                        valueStyles={null}
+                                      >
+                                        <PreviewObject
+                                          level={1}
+                                          maxPropObjectKeys={3}
+                                          maxPropStringLength={50}
+                                          maxPropsIntoLine={3}
+                                          val={
+                                            Object {
+                                              "a": "a",
+                                              "b": "b",
+                                            }
+                                          }
+                                          valueStyles={
+                                            Object {
+                                              "array": Object {
+                                                "color": "#666",
+                                              },
+                                              "attr": Object {
+                                                "color": "#666",
+                                              },
+                                              "bool": Object {
+                                                "color": "#a11",
+                                              },
+                                              "empty": Object {
+                                                "color": "#444",
+                                              },
+                                              "func": Object {
+                                                "color": "#170",
+                                              },
+                                              "number": Object {
+                                                "color": "#a11",
+                                              },
+                                              "object": Object {
+                                                "color": "#666",
+                                              },
+                                              "string": Object {
+                                                "color": "#22a",
+                                                "wordBreak": "break-word",
+                                              },
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            style={
+                                              Object {
+                                                "color": "#666",
+                                              }
+                                            }
+                                          >
+                                            {
+                                            <span
+                                              key="k0/.0"
+                                            >
+                                              <span
+                                                style={
+                                                  Object {
+                                                    "color": "#666",
+                                                  }
+                                                }
+                                              >
+                                                a
+                                              </span>
+                                            </span>
+                                            : 
+                                            <PropVal
+                                              key="v0/.0"
+                                              level={2}
+                                              maxPropArrayLength={3}
+                                              maxPropObjectKeys={3}
+                                              maxPropStringLength={50}
+                                              maxPropsIntoLine={3}
+                                              theme={Object {}}
+                                              val="a"
+                                              valueStyles={
+                                                Object {
+                                                  "array": Object {
+                                                    "color": "#666",
+                                                  },
+                                                  "attr": Object {
+                                                    "color": "#666",
+                                                  },
+                                                  "bool": Object {
+                                                    "color": "#a11",
+                                                  },
+                                                  "empty": Object {
+                                                    "color": "#444",
+                                                  },
+                                                  "func": Object {
+                                                    "color": "#170",
+                                                  },
+                                                  "number": Object {
+                                                    "color": "#a11",
+                                                  },
+                                                  "object": Object {
+                                                    "color": "#666",
+                                                  },
+                                                  "string": Object {
+                                                    "color": "#22a",
+                                                    "wordBreak": "break-word",
+                                                  },
+                                                }
+                                              }
+                                            >
+                                              <span
+                                                style={
+                                                  Object {
+                                                    "color": "#22a",
+                                                    "wordBreak": "break-word",
+                                                  }
+                                                }
+                                              >
+                                                'a'
+                                              </span>
+                                            </PropVal>
+                                            ,
+                                            <span
+                                              key="k1/.0"
+                                            >
+                                              <span
+                                                style={
+                                                  Object {
+                                                    "color": "#666",
+                                                  }
+                                                }
+                                              >
+                                                b
+                                              </span>
+                                            </span>
+                                            : 
+                                            <PropVal
+                                              key="v1/.0"
+                                              level={2}
+                                              maxPropArrayLength={3}
+                                              maxPropObjectKeys={3}
+                                              maxPropStringLength={50}
+                                              maxPropsIntoLine={3}
+                                              theme={Object {}}
+                                              val="b"
+                                              valueStyles={
+                                                Object {
+                                                  "array": Object {
+                                                    "color": "#666",
+                                                  },
+                                                  "attr": Object {
+                                                    "color": "#666",
+                                                  },
+                                                  "bool": Object {
+                                                    "color": "#a11",
+                                                  },
+                                                  "empty": Object {
+                                                    "color": "#444",
+                                                  },
+                                                  "func": Object {
+                                                    "color": "#170",
+                                                  },
+                                                  "number": Object {
+                                                    "color": "#a11",
+                                                  },
+                                                  "object": Object {
+                                                    "color": "#666",
+                                                  },
+                                                  "string": Object {
+                                                    "color": "#22a",
+                                                    "wordBreak": "break-word",
+                                                  },
+                                                }
+                                              }
+                                            >
+                                              <span
+                                                style={
+                                                  Object {
+                                                    "color": "#22a",
+                                                    "wordBreak": "break-word",
+                                                  }
+                                                }
+                                              >
+                                                'b'
+                                              </span>
+                                            </PropVal>
+                                            }
+                                          </span>
+                                        </PreviewObject>
+                                      </PropVal>
+                                      }
+                                    </span>
+                                  </span>
+                                </span>
+                                <span
+                                  key="array"
+                                >
+                                  <span>
+                                    <br />
+                                      
+                                  </span>
+                                  <span
+                                    style={Object {}}
+                                  >
+                                    array
+                                  </span>
+                                  <span>
+                                    =
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      {
+                                      <PropVal
+                                        level={1}
+                                        maxPropArrayLength={3}
+                                        maxPropObjectKeys={3}
+                                        maxPropStringLength={50}
+                                        maxPropsIntoLine={3}
+                                        theme={Object {}}
+                                        val={
+                                          Array [
+                                            1,
+                                            2,
+                                            3,
+                                          ]
+                                        }
+                                        valueStyles={null}
+                                      >
+                                        <PreviewArray
+                                          level={1}
+                                          maxPropArrayLength={3}
+                                          maxPropStringLength={50}
+                                          maxPropsIntoLine={3}
+                                          val={
+                                            Array [
+                                              1,
+                                              2,
+                                              3,
+                                            ]
+                                          }
+                                          valueStyles={
+                                            Object {
+                                              "array": Object {
+                                                "color": "#666",
+                                              },
+                                              "attr": Object {
+                                                "color": "#666",
+                                              },
+                                              "bool": Object {
+                                                "color": "#a11",
+                                              },
+                                              "empty": Object {
+                                                "color": "#444",
+                                              },
+                                              "func": Object {
+                                                "color": "#170",
+                                              },
+                                              "number": Object {
+                                                "color": "#a11",
+                                              },
+                                              "object": Object {
+                                                "color": "#666",
+                                              },
+                                              "string": Object {
+                                                "color": "#22a",
+                                                "wordBreak": "break-word",
+                                              },
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            style={
+                                              Object {
+                                                "color": "#666",
+                                              }
+                                            }
+                                          >
+                                            [
+                                            <span
+                                              key="n0/.0"
+                                            >
+                                              <PropVal
+                                                level={2}
+                                                maxPropArrayLength={3}
+                                                maxPropObjectKeys={3}
+                                                maxPropStringLength={50}
+                                                maxPropsIntoLine={3}
+                                                theme={Object {}}
+                                                val={1}
+                                                valueStyles={
+                                                  Object {
+                                                    "array": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "attr": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "bool": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "empty": Object {
+                                                      "color": "#444",
+                                                    },
+                                                    "func": Object {
+                                                      "color": "#170",
+                                                    },
+                                                    "number": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "object": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "string": Object {
+                                                      "color": "#22a",
+                                                      "wordBreak": "break-word",
+                                                    },
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  style={
+                                                    Object {
+                                                      "color": "#a11",
+                                                    }
+                                                  }
+                                                >
+                                                  1
+                                                </span>
+                                              </PropVal>
+                                            </span>
+                                            ,
+                                            <span
+                                              key="n1/.0"
+                                            >
+                                              <PropVal
+                                                level={2}
+                                                maxPropArrayLength={3}
+                                                maxPropObjectKeys={3}
+                                                maxPropStringLength={50}
+                                                maxPropsIntoLine={3}
+                                                theme={Object {}}
+                                                val={2}
+                                                valueStyles={
+                                                  Object {
+                                                    "array": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "attr": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "bool": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "empty": Object {
+                                                      "color": "#444",
+                                                    },
+                                                    "func": Object {
+                                                      "color": "#170",
+                                                    },
+                                                    "number": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "object": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "string": Object {
+                                                      "color": "#22a",
+                                                      "wordBreak": "break-word",
+                                                    },
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  style={
+                                                    Object {
+                                                      "color": "#a11",
+                                                    }
+                                                  }
+                                                >
+                                                  2
+                                                </span>
+                                              </PropVal>
+                                            </span>
+                                            ,
+                                            <span
+                                              key="n2/.0"
+                                            >
+                                              <PropVal
+                                                level={2}
+                                                maxPropArrayLength={3}
+                                                maxPropObjectKeys={3}
+                                                maxPropStringLength={50}
+                                                maxPropsIntoLine={3}
+                                                theme={Object {}}
+                                                val={3}
+                                                valueStyles={
+                                                  Object {
+                                                    "array": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "attr": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "bool": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "empty": Object {
+                                                      "color": "#444",
+                                                    },
+                                                    "func": Object {
+                                                      "color": "#170",
+                                                    },
+                                                    "number": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "object": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "string": Object {
+                                                      "color": "#22a",
+                                                      "wordBreak": "break-word",
+                                                    },
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  style={
+                                                    Object {
+                                                      "color": "#a11",
+                                                    }
+                                                  }
+                                                >
+                                                  3
+                                                </span>
+                                              </PropVal>
+                                            </span>
+                                            ]
+                                          </span>
+                                        </PreviewArray>
+                                      </PropVal>
+                                      }
+                                    </span>
+                                  </span>
+                                </span>
+                                <span
+                                  key="number"
+                                >
+                                  <span>
+                                    <br />
+                                      
+                                  </span>
+                                  <span
+                                    style={Object {}}
+                                  >
+                                    number
+                                  </span>
+                                  <span>
+                                    =
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      {
+                                      <PropVal
+                                        level={1}
+                                        maxPropArrayLength={3}
+                                        maxPropObjectKeys={3}
+                                        maxPropStringLength={50}
+                                        maxPropsIntoLine={3}
+                                        theme={Object {}}
+                                        val={7}
+                                        valueStyles={null}
+                                      >
+                                        <span
+                                          style={
+                                            Object {
+                                              "color": "#a11",
+                                            }
+                                          }
+                                        >
+                                          7
+                                        </span>
+                                      </PropVal>
+                                      }
+                                    </span>
+                                  </span>
+                                </span>
+                                <span
+                                  key="string"
+                                >
+                                  <span>
+                                    <br />
+                                      
+                                  </span>
+                                  <span
+                                    style={Object {}}
+                                  >
+                                    string
+                                  </span>
+                                  <span>
+                                    =
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      "
+                                      <PropVal
+                                        level={1}
+                                        maxPropArrayLength={3}
+                                        maxPropObjectKeys={3}
+                                        maxPropStringLength={50}
+                                        maxPropsIntoLine={3}
+                                        theme={Object {}}
+                                        val="seven"
+                                        valueStyles={null}
+                                      >
+                                        <span
+                                          style={
+                                            Object {
+                                              "color": "#22a",
+                                              "wordBreak": "break-word",
+                                            }
+                                          }
+                                        >
+                                          seven
+                                        </span>
+                                      </PropVal>
+                                      "
+                                    </span>
+                                  </span>
+                                </span>
+                                <span
+                                  key="bool"
+                                >
+                                  <span>
+                                    <br />
+                                      
+                                  </span>
+                                  <span
+                                    style={Object {}}
+                                  >
+                                    bool
+                                  </span>
+                                  <br />
+                                </span>
+                              </span>
+                            </Props>
+                            <span
+                              style={
+                                Object {
+                                  "color": "#444",
+                                }
+                              }
+                            >
+                              /&gt;
+                            </span>
+                          </div>
+                        </Node>
+                        <div
+                          style={
+                            Object {
+                              "paddingLeft": 18,
+                              "paddingRight": 3,
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "color": "#444",
+                              }
+                            }
+                          >
+                            &lt;/
+                            div
+                            &gt;
+                          </span>
+                        </div>
+                      </div>
+                    </Node>
+                  </div>
+                  <CopyButton
+                    onClick={[Function]}
+                    toggled={false}
+                  >
+                    <button
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "alignSelf": "flex-start",
+                          "backgroundColor": "rgb(255, 255, 255)",
+                          "borderColor": "rgb(238, 238, 238)",
+                          "borderImage": "initial",
+                          "borderRadius": "3px",
+                          "borderStyle": "solid",
+                          "borderWidth": "1px",
+                          "cursor": "pointer",
+                          "flexShrink": "0",
+                          "fontSize": "13px",
+                          "overflow": "hidden",
+                          "padding": "3px 10px",
+                        }
+                      }
+                      type="button"
+                    >
+                      Copy
+                    </button>
+                  </CopyButton>
+                </pre>
+              </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
+                key="TestComponent_0"
+              >
+                <h3
+                  style={
+                    Object {
+                      "margin": "20px 0 0 0",
+                    }
+                  }
+                >
+                  "
+                  TestComponent
+                  " Component
+                </h3>
+                <TableComponent
+                  excludedPropTypes={Array []}
+                  maxPropArrayLength={3}
+                  maxPropObjectKeys={3}
+                  maxPropStringLength={50}
+                  type={[Function]}
+                >
+                  <PropTable
+                    excludedPropTypes={Array []}
+                    maxPropArrayLength={3}
+                    maxPropObjectKeys={3}
+                    maxPropStringLength={50}
+                    propDefinitions={Array []}
+                    type={[Function]}
+                  >
+                    <small>
+                      No propTypes defined!
+                    </small>
+                  </PropTable>
+                </TableComponent>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Story>
+</Component>
+`;
+
+exports[`addon Info should render <Info /> and markdown 1`] = `
+<Component>
+  <Story
+    PropTable={[Function]}
+    components={
+      Object {
+        "a": [Function],
+        "code": [Function],
+        "h1": [Function],
+        "h2": [Function],
+        "h3": [Function],
+        "h4": [Function],
+        "h5": [Function],
+        "h6": [Function],
+        "li": [Function],
+        "p": [Function],
+        "ul": [Function],
+      }
+    }
+    context={Object {}}
+    excludedPropTypes={Array []}
+    info="# Test story
+## with markdown info
+containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
+    maxPropArrayLength={3}
+    maxPropObjectKeys={3}
+    maxPropStringLength={50}
+    maxPropsIntoLine={3}
+    propTables={Array []}
+    propTablesExclude={Array []}
+    showHeader={true}
+    showInline={false}
+    showSource={true}
+    styles={[Function]}
+  >
+    <div>
+      <div
+        style={
+          Object {
+            "position": "relative",
+            "zIndex": 0,
+          }
+        }
+      >
+        <div>
+          It's a 
+           story:
+          <TestComponent
+            array={
+              Array [
+                1,
+                2,
+                3,
+              ]
+            }
+            bool={true}
+            func={[Function]}
+            number={7}
+            obj={
+              Object {
+                "a": "a",
+                "b": "b",
+              }
+            }
+            string="seven"
+          >
+            <div>
+              <h1>
+                function func(x) {
+          return x + 1;
+        }
+              </h1>
+              <h2>
+                [object Object]
+              </h2>
+              <h3>
+                1,2,3
+              </h3>
+              <h4>
+                7
+              </h4>
+              <h5>
+                seven
+              </h5>
+              <h6>
+                true
+              </h6>
+              <p>
+                undefined
+              </p>
+              <a
+                href="#"
+              >
+                test
+              </a>
+              <code>
+                storiesOf
+              </code>
+              <ul>
+                <li>
+                  1
+                </li>
+                <li>
+                  2
+                </li>
+              </ul>
+            </div>
+          </TestComponent>
+        </div>
+      </div>
+      <button
+        className="info__show-button"
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#027ac5",
+            "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
+        className="info__overlay"
+        style={
+          Object {
+            "background": "white",
+            "bottom": 0,
+            "display": "none",
+            "left": 0,
+            "overflow": "auto",
+            "padding": "0 40px",
+            "position": "fixed",
+            "right": 0,
+            "top": 0,
+            "zIndex": 99999,
+          }
+        }
+      >
+        <button
+          className="info__close-button"
+          onClick={[Function]}
+          style={
+            Object {
+              "background": "#027ac5",
+              "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>
+          <div
+            style={
+              Object {
+                "backgroundColor": "#fff",
+                "border": "1px solid #eee",
+                "borderRadius": "2px",
+                "color": "black",
+                "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
+                "fontSize": "15px",
+                "fontWeight": 300,
+                "lineHeight": 1.45,
+                "marginBottom": "20px",
+                "marginTop": "20px",
+                "padding": "20px 40px 40px",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "borderBottom": "1px solid #eee",
+                  "marginBottom": 10,
+                  "paddingTop": 10,
+                }
+              }
+            >
+              <h1
+                style={
+                  Object {
+                    "fontSize": "35px",
+                    "margin": 0,
+                    "padding": 0,
+                  }
+                }
+              />
+              <h2
+                style={
+                  Object {
+                    "fontSize": "22px",
+                    "fontWeight": 400,
+                    "margin": "0 0 10px 0",
+                    "padding": 0,
+                  }
+                }
+              />
+            </div>
+            <div
+              style={
+                Object {
+                  "marginBottom": 0,
+                }
+              }
+            >
+              <H1
+                context={Object {}}
+                id="test-story"
+                key="0"
+              >
+                <h1
+                  id="test-story"
+                  style={
+                    Object {
+                      "borderBottom": "1px solid #eee",
+                      "fontSize": "40px",
+                      "fontWeight": 600,
+                      "margin": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  Test story
+                </h1>
+              </H1>
+              <H2
+                context={Object {}}
+                id="test-story-with-markdown-info"
+                key="1"
+              >
+                <h2
+                  id="test-story-with-markdown-info"
+                  style={
+                    Object {
+                      "fontSize": "30px",
+                      "fontWeight": 600,
+                      "margin": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  with markdown info
+                </h2>
+              </H2>
+              <P
+                context={Object {}}
+                key="6"
+              >
+                <div
+                  style={
+                    Object {
+                      "fontSize": "15px",
+                    }
+                  }
+                >
+                  containing 
+                  <strong
+                    key="2"
+                  >
+                    bold
+                  </strong>
+                  , 
+                  <em
+                    key="3"
+                  >
+                    cursive
+                  </em>
+                   text, 
+                  <code
+                    key="4"
+                  >
+                    code
+                  </code>
+                   and 
+                  <A
+                    context={Object {}}
+                    href="https://github.com"
+                    key="5"
+                    title={null}
+                  >
+                    <a
+                      href="https://github.com"
+                      rel="noopener noreferrer"
+                      style={
+                        Object {
+                          "color": "#3498db",
+                        }
+                      }
+                      target="_blank"
+                    >
+                      a link
+                    </a>
+                  </A>
+                </div>
+              </P>
             </div>
             <div>
               <h1
@@ -1253,7 +2590,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
 </Component>
 `;
 
-exports[`addon Info should render <Info /> and markdown 1`] = `
+exports[`addon Info should render <Info /> for memoized component 1`] = `
 <Component>
   <Story
     PropTable={[Function]}
@@ -1274,14 +2611,12 @@ exports[`addon Info should render <Info /> and markdown 1`] = `
     }
     context={Object {}}
     excludedPropTypes={Array []}
-    info="# Test story
-## with markdown info
-containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
+    info=""
     maxPropArrayLength={3}
     maxPropObjectKeys={3}
     maxPropStringLength={50}
     maxPropsIntoLine={3}
-    propTables={Array []}
+    propTables={null}
     propTablesExclude={Array []}
     showHeader={true}
     showInline={false}
@@ -1319,47 +2654,45 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
             }
             string="seven"
           >
-            <div>
-              <h1>
-                function func(x) {
-        return x + 1;
-      }
-              </h1>
-              <h2>
-                [object Object]
-              </h2>
-              <h3>
-                1,2,3
-              </h3>
-              <h4>
-                7
-              </h4>
-              <h5>
-                seven
-              </h5>
-              <h6>
-                true
-              </h6>
-              <p>
-                undefined
-              </p>
-              <a
-                href="#"
-              >
-                test
-              </a>
-              <code>
-                storiesOf
-              </code>
-              <ul>
-                <li>
-                  1
-                </li>
-                <li>
-                  2
-                </li>
-              </ul>
-            </div>
+            <h1>
+              function func(x) {
+          return x + 1;
+        }
+            </h1>
+            <h2>
+              [object Object]
+            </h2>
+            <h3>
+              1,2,3
+            </h3>
+            <h4>
+              7
+            </h4>
+            <h5>
+              seven
+            </h5>
+            <h6>
+              true
+            </h6>
+            <p>
+              undefined
+            </p>
+            <a
+              href="#"
+            >
+              test
+            </a>
+            <code>
+              storiesOf
+            </code>
+            <ul>
+              <li>
+                1
+              </li>
+              <li>
+                2
+              </li>
+            </ul>
           </TestComponent>
         </div>
       </div>
@@ -1473,104 +2806,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                 }
               />
             </div>
-            <div
-              style={
-                Object {
-                  "marginBottom": 0,
-                }
-              }
-            >
-              <H1
-                context={Object {}}
-                id="test-story"
-                key="0"
-              >
-                <h1
-                  id="test-story"
-                  style={
-                    Object {
-                      "borderBottom": "1px solid #eee",
-                      "fontSize": "40px",
-                      "fontWeight": 600,
-                      "margin": 0,
-                      "padding": 0,
-                    }
-                  }
-                >
-                  Test story
-                </h1>
-              </H1>
-              <H2
-                context={Object {}}
-                id="test-story-with-markdown-info"
-                key="1"
-              >
-                <h2
-                  id="test-story-with-markdown-info"
-                  style={
-                    Object {
-                      "fontSize": "30px",
-                      "fontWeight": 600,
-                      "margin": 0,
-                      "padding": 0,
-                    }
-                  }
-                >
-                  with markdown info
-                </h2>
-              </H2>
-              <P
-                context={Object {}}
-                key="6"
-              >
-                <div
-                  style={
-                    Object {
-                      "fontSize": "15px",
-                    }
-                  }
-                >
-                  containing 
-                  <strong
-                    key="2"
-                  >
-                    bold
-                  </strong>
-                  , 
-                  <em
-                    key="3"
-                  >
-                    cursive
-                  </em>
-                   text, 
-                  <code
-                    key="4"
-                  >
-                    code
-                  </code>
-                   and 
-                  <A
-                    context={Object {}}
-                    href="https://github.com"
-                    key="5"
-                    title={null}
-                  >
-                    <a
-                      href="https://github.com"
-                      rel="noopener noreferrer"
-                      style={
-                        Object {
-                          "color": "#3498db",
-                        }
-                      }
-                      target="_blank"
-                    >
-                      a link
-                    </a>
-                  </A>
-                </div>
-              </P>
-            </div>
             <div>
               <h1
                 style={
@@ -1614,7 +2849,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                         <div>
                           It's a 
                            story:
-                          <TestComponent
+                          <Memo(TestComponent)
                             array={
                               Array [
                                 1,
@@ -1664,7 +2899,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                               <div>
                                 It's a 
                                  story:
-                                <TestComponent
+                                <Memo(TestComponent)
                                   array={
                                     Array [
                                       1,
@@ -1789,7 +3024,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                           maxPropStringLength={50}
                           maxPropsIntoLine={3}
                           node={
-                            <TestComponent
+                            <Memo(TestComponent)
                               array={
                                 Array [
                                   1,
@@ -1834,7 +3069,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                               maxPropStringLength={50}
                               maxPropsIntoLine={3}
                               node={
-                                <TestComponent
+                                <Memo(TestComponent)
                                   array={
                                     Array [
                                       1,
@@ -2533,55 +3768,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                 </pre>
               </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
-                key="TestComponent_0"
-              >
-                <h3
-                  style={
-                    Object {
-                      "margin": "20px 0 0 0",
-                    }
-                  }
-                >
-                  "
-                  TestComponent
-                  " Component
-                </h3>
-                <TableComponent
-                  excludedPropTypes={Array []}
-                  maxPropArrayLength={3}
-                  maxPropObjectKeys={3}
-                  maxPropStringLength={50}
-                  type={[Function]}
-                >
-                  <PropTable
-                    excludedPropTypes={Array []}
-                    maxPropArrayLength={3}
-                    maxPropObjectKeys={3}
-                    maxPropStringLength={50}
-                    propDefinitions={Array []}
-                    type={[Function]}
-                  >
-                    <small>
-                      No propTypes defined!
-                    </small>
-                  </PropTable>
-                </TableComponent>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -2712,8 +3898,8 @@ exports[`addon Info should render component description if story kind matches co
             <div>
               <h1>
                 function func(x) {
-        return x + 1;
-      }
+          return x + 1;
+        }
               </h1>
               <h2>
                 [object Object]
@@ -3931,8 +5117,8 @@ exports[`addon Info should render component description if story name matches co
             <div>
               <h1>
                 function func(x) {
-        return x + 1;
-      }
+          return x + 1;
+        }
               </h1>
               <h2>
                 [object Object]
diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js
index 926b664c3588..a51c716a27ad 100644
--- a/addons/info/src/components/Node.js
+++ b/addons/info/src/components/Node.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { isForwardRef } from 'react-is';
 import PropTypes from 'prop-types';
 import Props from './Props';
+import { getDisplayName } from '../react-utils';
 
 const stylesheet = {
   containerStyle: {},
@@ -32,13 +33,7 @@ function getData(element) {
   }
 
   data.children = element.props.children;
-  const { type } = element;
-
-  if (typeof type === 'string') {
-    data.name = type;
-  } else {
-    data.name = type.displayName || type.name || 'Unknown';
-  }
+  data.name = getDisplayName(element.type);
 
   return data;
 }
diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js
index 851b160ee1ea..722c4aa8be28 100644
--- a/addons/info/src/components/Props.js
+++ b/addons/info/src/components/Props.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import PropVal from './PropVal';
+import { getType } from '../react-utils';
 
 const stylesheet = {
   propStyle: {},
@@ -18,7 +19,7 @@ export default function Props(props) {
     singleLine,
   } = props;
   const nodeProps = node.props;
-  const { defaultProps } = node.type;
+  const { defaultProps } = getType(node.type);
   if (!nodeProps || typeof nodeProps !== 'object') {
     return <span />;
   }
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index 939b4bb50dca..0716aa6a76a9 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -9,12 +9,11 @@ import global from 'global';
 import marksy from 'marksy';
 import Node from './Node';
 import { Pre } from './markdown';
+import { getDisplayName, getType } from '../react-utils';
 
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
 const { STORYBOOK_REACT_CLASSES } = global;
 
-const getName = type => type.displayName || type.name;
-
 const stylesheetBase = {
   button: {
     base: {
@@ -379,14 +378,14 @@ class Story extends Component {
     extract(children);
 
     const array = Array.from(types.keys());
-    array.sort((a, b) => (getName(a) > getName(b) ? 1 : -1));
+    array.sort((a, b) => (getDisplayName(a) > getDisplayName(b) ? 1 : -1));
 
     propTables = array.map((type, i) => (
       // eslint-disable-next-line react/no-array-index-key
-      <div key={`${getName(type)}_${i}`}>
-        <h3 style={stylesheet.propTableHead}>"{getName(type)}" Component</h3>
+      <div key={`${getDisplayName(type)}_${i}`}>
+        <h3 style={stylesheet.propTableHead}>"{getDisplayName(type)}" Component</h3>
         <this.props.PropTable
-          type={type}
+          type={getType(type)}
           maxPropObjectKeys={maxPropObjectKeys}
           maxPropArrayLength={maxPropArrayLength}
           maxPropStringLength={maxPropStringLength}
diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js
index 339d4c669ad1..c60f53e81730 100644
--- a/addons/info/src/index.test.js
+++ b/addons/info/src/index.test.js
@@ -46,10 +46,10 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)`;
 
 describe('addon Info', () => {
   // eslint-disable-next-line react/prop-types
-  const storyFn = ({ name }) => (
+  const createStoryFn = Component => ({ name }) => (
     <div>
       It's a {name} story:
-      <TestComponent
+      <Component
         func={x => x + 1}
         obj={{ a: 'a', b: 'b' }}
         array={[1, 2, 3]}
@@ -59,6 +59,8 @@ describe('addon Info', () => {
       />
     </div>
   );
+  const storyFn = createStoryFn(TestComponent);
+
   it('should render <Info /> and markdown', () => {
     const Info = withInfo(testMarkdown)(storyFn);
 
@@ -78,6 +80,12 @@ describe('addon Info', () => {
     const Info = withInfo()(storyFn);
     mount(<Info />);
   });
+  it('should render <Info /> for memoized component', () => {
+    const MemoizedTestComponent = React.memo(TestComponent);
+    const Info = withInfo()(createStoryFn(MemoizedTestComponent));
+
+    expect(mount(<Info />)).toMatchSnapshot();
+  });
 
   it('should render component description if story kind matches component', () => {
     const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
diff --git a/addons/info/src/react-utils.js b/addons/info/src/react-utils.js
new file mode 100644
index 000000000000..c85ff7bb90eb
--- /dev/null
+++ b/addons/info/src/react-utils.js
@@ -0,0 +1,14 @@
+import { isMemo } from 'react-is';
+
+export function getType(typeOrMemo) {
+  return isMemo(typeOrMemo) ? typeOrMemo.type : typeOrMemo;
+}
+
+export function getDisplayName(typeOrMemo) {
+  if (typeof typeOrMemo === 'string') {
+    return typeOrMemo;
+  }
+
+  const type = getType(typeOrMemo);
+  return type.displayName || type.name || 'Unknown';
+}
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index eb3917327d2e..171cc888c88b 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -940,7 +940,7 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
             <h3
               style="margin:20px 0 0 0"
             >
-              "" Component
+              "Unknown" Component
             </h3>
             <small>
               No propTypes defined!
@@ -950,7 +950,7 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
             <h3
               style="margin:20px 0 0 0"
             >
-              "" Component
+              "Unknown" Component
             </h3>
             <small>
               No propTypes defined!