update from next

2025-04-04 12:41:06 +08:00 · 2019-02-27 00:52:49 +08:00 · 2019-02-27 00:52:49 +08:00 · 1e1b1a17b9
commit 1e1b1a17b9
parent 7e85bb37ab b8b2f79ed7
434 changed files with 41962 additions and 25183 deletions
--- a/.babelrc.js
+++ b/.babelrc.js
@ -49,7 +49,6 @@ module.exports = {
        './addons/storysource/src/loader',
        './app/**/src/server/**',
        './app/**/src/bin/**',
-        './dangerfile.js',
      ],
      presets: [
        [
--- a/.ci/danger/dangerfile.ts
+++ b/.ci/danger/dangerfile.ts
@ -1,7 +1,11 @@
 import { fail, danger } from 'danger';
-import { flatten, intersection, isEmpty } from 'lodash';
+import { execSync } from 'child_process';

-const pkg = require('./package.json'); // eslint-disable-line import/newline-after-import
+execSync('npm install lodash');
+
+const { flatten, intersection, isEmpty } = require('lodash');
+
+const pkg = require('../../package.json'); // eslint-disable-line import/newline-after-import
 const prLogConfig = pkg['pr-log'];

 const Versions = {
@ -20,18 +24,11 @@ const checkRequiredLabels = labels => {
    branchVersion === Versions.PATCH ? 'feature request' : [],
  ]);

-  const requiredLabels = flatten([
-    prLogConfig.skipLabels || [],
-    (prLogConfig.validLabels || []).map(keyVal => keyVal[0]),
-  ]);
+  const requiredLabels = flatten([prLogConfig.skipLabels || [], (prLogConfig.validLabels || []).map(keyVal => keyVal[0])]);

  const blockingLabels = intersection(forbiddenLabels, labels);
  if (!isEmpty(blockingLabels)) {
-    fail(
-      `PR is marked with ${blockingLabels.map(label => `"${label}"`).join(', ')} label${
-        blockingLabels.length > 1 ? 's' : ''
-      }.`
-    );
+    fail(`PR is marked with ${blockingLabels.map(label => `"${label}"`).join(', ')} label${blockingLabels.length > 1 ? 's' : ''}.`);
  }

  const foundLabels = intersection(requiredLabels, labels);
--- a/.github/main.workflow
+++ b/.github/main.workflow
@ -1,12 +1,15 @@
-workflow "New workflow" {
-  on = "push"
-  resolves = ["Hello World"]
+workflow "Dangerfile JS Pull" {
+  on = "pull_request"
+  resolves = "Danger JS"
 }

-action "Hello World" {
-  uses = "./ci/action-a"
-  env = {
-    MY_NAME = "Mona"
-  }
-  args = "\"Hello world, I'm $MY_NAME!\""
+workflow "Dangerfile JS Label" {
+  on = "label"
+  resolves = "Danger JS"
 }
+
+action "Danger JS" {
+  uses = "danger/danger-js@master"
+  secrets = ["GITHUB_TOKEN"]
+  args = "--dangerfile .ci/danger/dangerfile.ts"
+}
--- a/.teamcity/OpenSourceProjects_Storybook/Project.kt
+++ b/.teamcity/OpenSourceProjects_Storybook/Project.kt
@ -21,7 +21,6 @@ object Project : Project({
    buildType(OpenSourceProjects_Storybook_Bootstrap)
    buildType(OpenSourceProjects_Storybook_CliTestLatestCra)
    buildType(OpenSourceProjects_Storybook_Examples)
-    buildType(OpenSourceProjects_Storybook_Danger)
    buildType(OpenSourceProjects_Storybook_NativeSmokeTests)
    buildType(OpenSourceProjects_Storybook_Docs)
    buildType(OpenSourceProjects_Storybook_Build_2)
--- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Danger.kt
+++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Danger.kt
@ -1,79 +0,0 @@
-package OpenSourceProjects_Storybook.buildTypes
-
-import jetbrains.buildServer.configs.kotlin.v2017_2.*
-import jetbrains.buildServer.configs.kotlin.v2017_2.buildFeatures.commitStatusPublisher
-import jetbrains.buildServer.configs.kotlin.v2017_2.buildSteps.script
-import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
-import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
-import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
-
-object OpenSourceProjects_Storybook_Danger : BuildType({
-    uuid = "759f0116-2f7d-4c03-8220-56e4ab03be3a"
-    id = "OpenSourceProjects_Storybook_Danger"
-    name = "Danger"
-
-    params {
-        password("env.DANGER_GITHUB_API_TOKEN", "credentialsJSON:9ac87388-d267-4def-a10e-3e596369f644")
-        param("env.PULL_REQUEST_URL", "https://github.com/storybooks/storybook/%teamcity.build.branch%")
-    }
-
-    vcs {
-        root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1)
-
-        buildDefaultBranch = false
-    }
-
-    steps {
-        script {
-            name = "Danger"
-            scriptContent = """
-                #!/bin/sh
-
-                set -e -x
-
-                yarn
-                yarn danger ci
-            """.trimIndent()
-            dockerImage = "node:%docker.node.version%"
-        }
-    }
-
-    triggers {
-        vcs {
-            quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
-            branchFilter = """
-                +:*
-                -:master
-            """.trimIndent()
-        }
-        retryBuild {
-            delaySeconds = 3600
-        }
-    }
-
-    features {
-        commitStatusPublisher {
-            publisher = github {
-                githubUrl = "https://api.github.com"
-                authType = personalToken {
-                    token = "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa"
-                }
-            }
-            param("github_oauth_user", "Hypnosphi")
-        }
-        feature {
-            type = "pullRequests"
-            param("filterAuthorRole", "EVERYBODY")
-            param("authenticationType", "token")
-            param("secure:accessToken", "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa")
-        }
-    }
-
-    requirements {
-        doesNotContain("env.OS", "Windows")
-    }
-
-    cleanup {
-        artifacts(days = 1)
-    }
-})
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,185 @@
+## 5.0.0-rc.6 (February 25, 2019)
+
+### Bug Fixes
+
+* Addon-actions: FIX performance by upgrading to telejson 2.1 ([#5751](https://github.com/storybooks/storybook/pull/5751))
+* UI: FIX bad treeview mockdata ([#5741](https://github.com/storybooks/storybook/pull/5741))
+* UI: About page styling fixes ([#5732](https://github.com/storybooks/storybook/pull/5732))
+* UI: Restore the toolbar eject button ([#5737](https://github.com/storybooks/storybook/pull/5737))
+
+## 5.0.0-rc.5 (February 23, 2019)
+
+### Bug Fixes
+
+* UI: Fix `/` search hotkey so it doesn't type into the input ([#5702](https://github.com/storybooks/storybook/pull/5702))
+* Addon-a11y: Fix a11y setup being undefined ([#5724](https://github.com/storybooks/storybook/pull/5724))
+* UI: Fix duplicate theming packages ([#5722](https://github.com/storybooks/storybook/pull/5722))
+* Core: Clean up debug logging ([#5705](https://github.com/storybooks/storybook/pull/5705))
+* UI: Minor addon ux tweaks ([#5712](https://github.com/storybooks/storybook/pull/5712))
+* Addon-a11y: Fix story scrolling ([#5713](https://github.com/storybooks/storybook/pull/5713))
+* UI: Fix mobile styling ([#5709](https://github.com/storybooks/storybook/pull/5709))
+* UI: Fix tooltip bugs ([#5692](https://github.com/storybooks/storybook/pull/5692))
+* UI: Fix toolbar separators ([#5711](https://github.com/storybooks/storybook/pull/5711))
+
+### Maintenance
+
+* Typescript: migrate addon-backgrounds ([#5535](https://github.com/storybooks/storybook/pull/5535))
+* Typescript: fix typings for addon-backgrounds ([#5730](https://github.com/storybooks/storybook/pull/5730))
+
+## 5.0.0-rc.4 (February 21, 2019)
+
+### Features
+
+* UI: Handle prerelease versions in version check ([#5641](https://github.com/storybooks/storybook/pull/5641))
+
+### Bug Fixes
+
+* UI: Fix scrollbar persistence ([#5689](https://github.com/storybooks/storybook/pull/5689))
+* UI: Fix keyboard shortcuts of toggleNav & togglePanel ([#5677](https://github.com/storybooks/storybook/pull/5677))
+* Core: Fix singleton module issue for manager & theme ([#5679](https://github.com/storybooks/storybook/pull/5679))
+* Addon-storysource: Fix source not updating ([#5672](https://github.com/storybooks/storybook/pull/5672))
+* Core: Fix broken error reporting ([#5678](https://github.com/storybooks/storybook/pull/5678))
+* Addon-info: Compare component name to story name, not story fn ([#5649](https://github.com/storybooks/storybook/pull/5649))
+
+### Maintenance
+
+* CLI: Cleanup version notice ([#5699](https://github.com/storybooks/storybook/pull/5699))
+* Core: Fix story fn consistency ([#5669](https://github.com/storybooks/storybook/pull/5669))
+
+## 4.1.13 (February 21, 2019)
+
+### Maintenance
+
+* CLI: Cleanup version notice ([#5699](https://github.com/storybooks/storybook/pull/5699))
+* Docs: Use static versions.json file instead of hacking one in ([#5675](https://github.com/storybooks/storybook/pull/5675))
+
+## 5.0.0-rc.3 (February 19, 2019)
+
+### Bug Fixes
+
+* UI: Styling bug fixes, story updates, and more QA ([#5650](https://github.com/storybooks/storybook/pull/5650))
+* UI: V5 style refinements ([#5562](https://github.com/storybooks/storybook/pull/5562))
+
+## 5.0.0-rc.2 (February 19, 2019)
+
+### Features
+
+* UI: Allow collapsing active story and use separate expansion for filtered ([#5625](https://github.com/storybooks/storybook/pull/5625))
+
+### Bug Fixes
+
+* Addon-a11y: Fix tab highlighting  ([#5646](https://github.com/storybooks/storybook/pull/5646))
+* Addon-jest: Fix event subscription ([#5644](https://github.com/storybooks/storybook/pull/5644))
+* UI: Handle old versions in version check ([#5638](https://github.com/storybooks/storybook/pull/5638))
+
+### Maintenance
+
+* UI: Fix some prop warnings ([#5635](https://github.com/storybooks/storybook/pull/5635))
+* UI: Use the correct props to start the tooltip open ([#5610](https://github.com/storybooks/storybook/pull/5610))
+
+## 4.1.12 (February 18, 2019)
+
+### Bug Fixes
+
+* Addon-google-analytics: Add missing `register.js` file ([#5379](https://github.com/storybooks/storybook/pull/5379))
+
+### Dependency Upgrades
+
+* Update modal manager for rn 0.58 support ([#5581](https://github.com/storybooks/storybook/pull/5581))
+
+## 5.0.0-rc.1 (February 16, 2019)
+
+### Bug Fixes
+
+* Core: Add missing babel-preset-env dependency ([#5617](https://github.com/storybooks/storybook/pull/5617))
+
+## 5.0.0-rc.0 (February 16, 2019)
+
+Welcome to Storybook 5 (SB5) with a beautiful new user interface including:
+
+* Navigation sidebar redesign
+* New canvas toolbar 
+* Customizable keyboard shortcuts
+* Improved search
+* Version update notifications
+
+SB5 also includes a new URL structure, expanded addon API, and many more features and architectural improvements.
+
+See [the RC announcement](https://gist.github.com/shilman/0332090b63f1798a58ed8d85db44f4b4) for more details!
+
+## 5.0.0-beta.4 (February 15, 2019)
+
+### Bug Fixes
+
+* UI: Fix mobile view ([#5603](https://github.com/storybooks/storybook/pull/5603))
+* UI: Misc warning fixes ([#5601](https://github.com/storybooks/storybook/pull/5601))
+* UI: Fix ie 11 ([#5599](https://github.com/storybooks/storybook/pull/5599))
+* CLI: Fix for when outputDir is an absolute path ([#5573](https://github.com/storybooks/storybook/pull/5573))
+* CLI: Avoid false-negative checks for port ([#5565](https://github.com/storybooks/storybook/pull/5565))
+* Core: Prioritise programatic configuration ([#5564](https://github.com/storybooks/storybook/pull/5564))
+* UI: FIX clear search ([#5550](https://github.com/storybooks/storybook/pull/5550))
+* Core: Transpile safe-eval package ([#5498](https://github.com/storybooks/storybook/pull/5498))
+* UI: Add default backgrounds to official example ([#5585](https://github.com/storybooks/storybook/pull/5585))
+
+## 5.0.0-beta.3 (February 13, 2019)
+
+### Bug Fixes
+
+* UI: V5 styling refinements ([#5562](https://github.com/storybooks/storybook/pull/5562))
+
+## 5.0.0-beta.2 (February 9, 2019)
+
+### Features
+
+* Storyshots: puppeteer launch config for CI ([#5487](https://github.com/storybooks/storybook/pull/5487))
+
+### Bug Fixes
+
+* Addon-notes: fix loading behavior ([#5514](https://github.com/storybooks/storybook/pull/5514))
+* CLI: Workaround -h shorthand conflict ([#5464](https://github.com/storybooks/storybook/pull/5464))
+* Addons: remove tool addon styling ([#5452](https://github.com/storybooks/storybook/pull/5452))
+
+### Maintenance
+
+* UI: V5 style refinements ([#5444](https://github.com/storybooks/storybook/pull/5444))
+* Core: Allow ignoring preview bundle building in core ([#5523](https://github.com/storybooks/storybook/pull/5523))
+* Core: Extract client-api pkg from core ([#5521](https://github.com/storybooks/storybook/pull/5521))
+* UI: Add react element hoisting && ADD display names via babel-plugin ([#5454](https://github.com/storybooks/storybook/pull/5454))
+* Build: TEMP disable the image snapshots ([#5469](https://github.com/storybooks/storybook/pull/5469))
+
+### Dependency Upgrades
+
+* Bump vue and vue-template-compiler ([#5516](https://github.com/storybooks/storybook/pull/5516))
+* Bump react from 16.7.0 to 16.8.1 ([#5517](https://github.com/storybooks/storybook/pull/5517))
+* Bump react-is from 16.7.0 to 16.8.1 ([#5504](https://github.com/storybooks/storybook/pull/5504))
+* Bump eslint-plugin-jest from 22.2.1 to 22.2.2 ([#5505](https://github.com/storybooks/storybook/pull/5505))
+* Bump babel-plugin-emotion from 10.0.6 to 10.0.7 ([#5502](https://github.com/storybooks/storybook/pull/5502))
+* Bump ember-source from 3.7.2 to 3.7.3 ([#5501](https://github.com/storybooks/storybook/pull/5501))
+* Bump lint-staged from 8.1.1 to 8.1.3 ([#5503](https://github.com/storybooks/storybook/pull/5503))
+* Bump enzyme-adapter-react-16 from 1.9.0 to 1.9.1 ([#5507](https://github.com/storybooks/storybook/pull/5507))
+* dependencies: update lit-html to 1.0.0 ([#5490](https://github.com/storybooks/storybook/pull/5490))
+* Bump esm from 3.2.0 to 3.2.1 ([#5492](https://github.com/storybooks/storybook/pull/5492))
+* Bump webpack-cli from 3.2.1 to 3.2.3 ([#5494](https://github.com/storybooks/storybook/pull/5494))
+* Bump @babel/plugin-proposal-object-rest-spread from 7.3.1 to 7.3.2 ([#5496](https://github.com/storybooks/storybook/pull/5496))
+* Bump fuse.js from 3.3.0 to 3.3.1 ([#5497](https://github.com/storybooks/storybook/pull/5497))
+* Bump jest-emotion from 10.0.6 to 10.0.7 ([#5495](https://github.com/storybooks/storybook/pull/5495))
+* Bump prettier from 1.16.1 to 1.16.4 ([#5482](https://github.com/storybooks/storybook/pull/5482))
+* Bump @types/webpack-env from 1.13.6 to 1.13.7 ([#5477](https://github.com/storybooks/storybook/pull/5477))
+* Bump typescript from 3.2.4 to 3.3.1 ([#5479](https://github.com/storybooks/storybook/pull/5479))
+* Bump eslint-plugin-import from 2.15.0 to 2.16.0 ([#5480](https://github.com/storybooks/storybook/pull/5480))
+* Bump storybook-chromatic from 1.2.5 to 1.2.6 ([#5481](https://github.com/storybooks/storybook/pull/5481))
+* Bump enzyme-adapter-react-16 from 1.8.0 to 1.9.0 ([#5478](https://github.com/storybooks/storybook/pull/5478))
+* Bump markdown-to-jsx from 6.9.0 to 6.9.1 ([#5465](https://github.com/storybooks/storybook/pull/5465))
+* Bump @angular/compiler from 7.2.2 to 7.2.3 ([#5466](https://github.com/storybooks/storybook/pull/5466))
+* Bump babel-plugin-react-docgen from 2.0.0 to 2.0.2 ([#5468](https://github.com/storybooks/storybook/pull/5468))
+* Bump danger from 7.0.4 to 7.0.7 ([#5467](https://github.com/storybooks/storybook/pull/5467))
+* Bump puppeteer from 1.11.0 to 1.12.0 ([#5450](https://github.com/storybooks/storybook/pull/5450))
+* Bump @angular/platform-browser-dynamic from 7.2.2 to 7.2.3 ([#5434](https://github.com/storybooks/storybook/pull/5434))
+* Bump esm from 3.1.4 to 3.2.0 ([#5447](https://github.com/storybooks/storybook/pull/5447))
+* Bump eslint-plugin-jest from 22.1.3 to 22.2.1 ([#5448](https://github.com/storybooks/storybook/pull/5448))
+* Bump danger from 7.0.2 to 7.0.4 ([#5449](https://github.com/storybooks/storybook/pull/5449))
+* Bump case-sensitive-paths-webpack-plugin from 2.1.2 to 2.2.0 ([#5451](https://github.com/storybooks/storybook/pull/5451))
+
 ## 5.0.0-beta.1 (February 1, 2019)

 ### Bug Fixes
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -2,6 +2,8 @@

 - [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
  - [Webpack config simplification](#webpack-config-simplification)
+  - [Story hierarchy defaults](#story-hierarchy-defaults)
+  - [Options addon deprecated](#options-addon-deprecated)
 - [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
  - [Private addon config](#private-addon-config)
  - [React 15.x](#react-15x)
@ -59,6 +61,84 @@ In contrast, the 4.x configuration function accepted either two or three argumen

 Please see the [current custom webpack documentation](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config.

+## Story hierarchy defaults
+
+Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).
+
+In Storybook 4.x the values defaulted to `null` for both of these options, so that there would be no hierarchy by default.
+
+In 5.0, we now provide recommended defaults:
+
+```js
+{
+  hierarchyRootSeparator: '|',
+  hierarchySeparator: /\/|\./,
+}
+```
+
+This means if you use the characters { `|`, `/`, `.` } in your story kinds it will triggger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component.
+
+If you wish to opt-out of this new behavior and restore the flat UI, simply set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:
+
+```js
+addParameters({
+  options: {
+    hierarchyRootSeparator: null,
+    hierarchySeparator: null,
+  },
+});
+```
+
+## Options addon deprecated
+
+In 4.x we added story parameters. In 5.x we've deprecated the options addon in favor of [global parameters](./docs/src/pages/configurations/options-parameter/index.md), and we've also renamed some of the options in the process (though we're maintaining backwards compatibility until 6.0).
+
+Here's an old configuration:
+
+```js
+addDecorator(
+  withOptions({
+    name: 'Storybook',
+    url: 'https://storybook.js.org',
+    goFullScreen: false,
+    addonPanelInRight: true,
+  })
+);
+```
+
+And here's its new counterpart:
+
+```js
+import { create } from '@storybook/theming';
+addParameters({
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'Storybook',
+      brandUrl: 'https://storybook.js.org',
+      // To control appearance:
+      // brandImage: 'http://url.of/some.svg',
+    }),
+    isFullscreen: false,
+    panelPosition: 'right',
+  },
+});
+```
+
+Here is the mapping from old options to new:
+
+| Old               | New              |
+| ----------------- | ---------------- |
+| name              | theme.brandTitle |
+| url               | theme.brandUrl   |
+| goFullScreen      | isFullscreen     |
+| showStoriesPanel  | showNav          |
+| showAddonPanel    | showPanel        |
+| addonPanelInRight | panelPosition    |
+| showSearchBox     |                  |
+
+Storybook v5 removes the search dialog box in favor of a quick search in the navigation view, so `showSearchBox` has been removed.
+
 ## From version 4.0.x to 4.1.x

 There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.
@ -89,16 +169,16 @@ Also, here's the error you'll get if you're running an older version of React:

 ```
 core.browser.esm.js:15 Uncaught TypeError: Object(...) is not a function
-    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
-    at __webpack_require__ (bootstrap:724)
-    at fn (bootstrap:101)
-    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
-    at __webpack_require__ (bootstrap:724)
-    at fn (bootstrap:101)
-    at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
-    at __webpack_require__ (bootstrap:724)
-    at fn (bootstrap:101)
-    at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)
+  at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
+  at **webpack_require** (bootstrap:724)
+  at fn (bootstrap:101)
+  at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
+  at **webpack_require** (bootstrap:724)
+  at fn (bootstrap:101)
+  at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
+  at **webpack_require** (bootstrap:724)
+  at fn (bootstrap:101)
+  at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)
 ```

 ### Generic addons
--- a/README.md
+++ b/README.md
@ -131,10 +131,10 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)

 We have a badge! Link it to your live Storybook example.

-![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)
+![Storybook](https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg)

 ```md
-[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](link to site)
+[![Storybook](https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg)](link to site)
 ```

 If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press).
--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@ -58,10 +58,11 @@ addParameters({
  a11y: {
    // ... axe options
    element: '#root', // optional selector which element to inspect
+    config: {} // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
+    options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
  },
 });

-
 storiesOf('button', module)
  .add('Accessible', () => (
    <button style={{ backgroundColor: 'black', color: 'white', }}>
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "a11y addon for storybook",
  "keywords": [
    "a11y",
@ -16,7 +16,8 @@
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/storybooks/storybook.git"
+    "url": "git+https://github.com/storybooks/storybook.git",
+    "directory": "addons/a11y"
  },
  "license": "MIT",
  "main": "dist/index.js",
@ -25,19 +26,18 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.0.0-beta.1",
-    "@storybook/client-logger": "5.0.0-beta.1",
-    "@storybook/components": "5.0.0-beta.1",
-    "@storybook/core-events": "5.0.0-beta.1",
-    "@storybook/theming": "5.0.0-beta.1",
+    "@storybook/addons": "5.0.0-beta.3",
+    "@storybook/client-logger": "5.0.0-beta.3",
+    "@storybook/components": "5.0.0-beta.3",
+    "@storybook/core-events": "5.0.0-beta.3",
+    "@storybook/theming": "5.0.0-beta.3",
    "axe-core": "^3.1.2",
    "common-tags": "^1.8.0",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
    "memoizerific": "^1.11.3",
    "prop-types": "^15.6.2",
-    "react": "^16.8.1",
-    "react-dom": "^16.7.0",
+    "react": "^16.8.2",
    "util-deprecate": "^1.0.2"
  },
  "publishConfig": {
--- a/addons/a11y/src/components/ColorBlindness.js
+++ b/addons/a11y/src/components/ColorBlindness.js
@ -4,22 +4,30 @@ import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';

 import { logger } from '@storybook/client-logger';
-import { Popout, Item, Icons, Icon, IconButton, Title, List } from '@storybook/components';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

 const getIframe = memoize(1)(() => document.getElementById('storybook-preview-iframe'));

 const ColorIcon = styled.span(
  {
    background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
+    borderRadius: '1rem',
+    display: 'block',
+    height: '1rem',
+    width: '1rem',
  },
  ({ filter }) => ({
    filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
+  }),
+  ({ theme }) => ({
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
  })
 );

 class ColorBlindness extends Component {
  state = {
-    filter: false,
+    expanded: false,
+    filter: null,
  };

  setFilter = filter => {
@ -27,8 +35,8 @@ class ColorBlindness extends Component {

    if (iframe) {
      iframe.style.filter = filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`;
-
      this.setState({
+        expanded: false,
        filter,
      });
    } else {
@ -37,57 +45,52 @@ class ColorBlindness extends Component {
  };

  render() {
-    const { filter } = this.state;
+    const { filter, expanded } = this.state;
+
+    let colorList = [
+      'protanopia',
+      'protanomaly',
+      'deuteranopia',
+      'deuteranomaly',
+      'tritanopia',
+      'tritanomaly',
+      'achromatopsia',
+      'achromatomaly',
+      'mono',
+    ].map(i => ({
+      id: i,
+      title: i,
+      onClick: () => {
+        this.setFilter(i);
+      },
+      right: <ColorIcon filter={i} />,
+    }));
+
+    if (filter !== null) {
+      colorList = [
+        {
+          title: 'Reset color filter',
+          onClick: () => {
+            this.setFilter(null);
+          },
+        },
+        ...colorList,
+      ];
+    }

    return (
-      <Popout key="filters">
+      <WithTooltip
+        placement="top"
+        trigger="click"
+        tooltipShown={expanded}
+        onVisibilityChange={s => this.setState({ expanded: s })}
+        tooltip={<TooltipLinkList links={colorList} />}
+        closeOnClick
+      >
        <IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
          <Icons icon="mirror" />
        </IconButton>
-        {({ hide }) => (
-          <List>
-            {[
-              'protanopia',
-              'protanomaly',
-              'deuteranopia',
-              'deuteranomaly',
-              'tritanopia',
-              'tritanomaly',
-              'achromatopsia',
-              'achromatomaly',
-            ].map(i => (
-              <Item
-                key={i}
-                onClick={() => {
-                  this.setFilter(filter === i ? null : i);
-                  hide();
-                }}
-              >
-                <Icon type={<ColorIcon filter={i} />} />
-                <Title>{i}</Title>
-              </Item>
-            ))}
-            <Item
-              onClick={() => {
-                this.setFilter(filter === 'mono' ? null : 'mono');
-                hide();
-              }}
-            >
-              <Icon type={<ColorIcon filter="mono" />} />
-              <Title>mono</Title>
-            </Item>
-            <Item
-              onClick={() => {
-                this.setFilter(null);
-                hide();
-              }}
-            >
-              <Icon type={<ColorIcon />} />
-              <Title>Off</Title>
-            </Item>
-          </List>
-        )}
-      </Popout>
+      </WithTooltip>
    );
  }
 }
--- a/addons/a11y/src/components/Panel.js
+++ b/addons/a11y/src/components/Panel.js
@ -4,13 +4,27 @@ import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';

 import { STORY_RENDERED } from '@storybook/core-events';
-import { ActionBar, ActionButton, Icons } from '@storybook/components';
+import { ActionBar, Icons } from '@storybook/components';

 import EVENTS from '../constants';

 import Tabs from './Tabs';
 import Report from './Report';

+const Icon = styled(Icons)(
+  {
+    height: '12px',
+    width: '12px',
+    marginRight: '4px',
+  },
+  ({ status, theme }) =>
+    status === 'running'
+      ? {
+          animation: `${theme.animation.rotate360} 1s linear infinite;`,
+        }
+      : {}
+);
+
 const Passes = styled.span(({ theme }) => ({
  color: theme.color.positive,
 }));
@ -97,6 +111,23 @@ class A11YPanel extends Component {
    const { passes, violations, status } = this.state;
    const { active } = this.props;

+    let actionTitle;
+    if (status === 'ready') {
+      actionTitle = 'Rerun tests';
+    } else if (status === 'running') {
+      actionTitle = (
+        <Fragment>
+          <Icon inline icon="sync" status={status} /> Running test
+        </Fragment>
+      );
+    } else if (status === 'ran') {
+      actionTitle = (
+        <Fragment>
+          <Icon inline icon="check" /> Tests completed
+        </Fragment>
+      );
+    }
+
    return active ? (
      <Fragment>
        <Tabs
@ -112,21 +143,7 @@ class A11YPanel extends Component {
            },
          ]}
        />
-        <ActionBar key="actionbar">
-          <ActionButton onClick={this.request}>
-            {status === 'ready' ? <span>RERUN TEST</span> : null}
-            {status === 'running' ? (
-              <Fragment>
-                <Icons inline icon="timer" /> <span>Running test</span>
-              </Fragment>
-            ) : null}
-            {status === 'ran' ? (
-              <Fragment>
-                <Icons inline icon="check" /> <span>Tests completed</span>
-              </Fragment>
-            ) : null}
-          </ActionButton>
-        </ActionBar>
+        <ActionBar key="actionbar" actionItems={[{ title: actionTitle, onClick: this.request }]} />
      </Fragment>
    ) : null;
  }
--- a/addons/a11y/src/components/Report/Info.js
+++ b/addons/a11y/src/components/Report/Info.js
@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';

 const Wrapper = styled.div(({ theme }) => ({
-  backgroundColor: theme.barFill,
+  backgroundColor: theme.background.bar,
  padding: '12px',
  marginBottom: '10px',
 }));
--- a/addons/a11y/src/components/Report/Item.js
+++ b/addons/a11y/src/components/Report/Item.js
@ -10,6 +10,16 @@ import Elements from './Elements';

 const Wrapper = styled.div();

+const Icon = styled(Icons)(({ theme }) => ({
+  height: 10,
+  width: 10,
+  color: theme.color.mediumdark,
+  marginRight: '10px',
+  transition: 'transform 0.1s ease-in-out',
+  alignSelf: 'center',
+  display: 'inline-flex',
+}));
+
 const HeaderBar = styled.button(({ theme }) => ({
  padding: theme.layoutMargin,
  paddingLeft: theme.layoutMargin - 3,
@ -53,14 +63,12 @@ class Item extends Component {
    return (
      <Wrapper>
        <HeaderBar onClick={this.onToggle}>
-          <Icons
+          <Icon
            icon="chevrondown"
            size={10}
            color="#9DA5AB"
            style={{
-              marginRight: '10px',
              transform: `rotate(${open ? 0 : -90}deg)`,
-              transition: 'transform 0.1s ease-in-out',
            }}
          />
          {item.description}
--- a/addons/a11y/src/components/Report/Tags.js
+++ b/addons/a11y/src/components/Report/Tags.js
@ -12,8 +12,8 @@ const Wrapper = styled.div({
 const Item = styled.div(({ theme }) => ({
  margin: '0 6px',
  padding: '5px',
-  border: theme.mainBorder,
-  borderRadius: theme.mainBorderRadius,
+  border: `1px solid ${theme.appBorderColor}`,
+  borderRadius: theme.appBorderRadius,
 }));

 function Tags({ tags }) {
--- a/addons/a11y/src/components/Tabs.js
+++ b/addons/a11y/src/components/Tabs.js
@ -10,38 +10,38 @@ const Container = styled.div({
 });

 const List = styled.div(({ theme }) => ({
-  borderBottom: theme.mainBorder,
+  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
+  background: 'rgba(0,0,0,.05)',
  flexWrap: 'wrap',
  display: 'flex',
 }));

 const Item = styled.button(
-  ({ active }) =>
-    active
-      ? {
-          opacity: 1,
-          fontWeight: 600,
-        }
-      : {},
  ({ theme }) => ({
    textDecoration: 'none',
-    textTransform: 'uppercase',
    padding: '10px 15px',
-    letterSpacing: '1px',
    cursor: 'pointer',
-    fontWeight: 500,
-    opacity: 0.7,
+    fontWeight: theme.typography.weight.bold,
+    fontSize: theme.typography.size.s2 - 1,
+    lineHeight: 1,
+    height: 40,
    border: 'none',
    borderTop: '3px solid transparent',
    borderBottom: '3px solid transparent',
-    background: 'none',
-    flex: 1,
+    background: 'transparent',

    '&:focus': {
      outline: '0 none',
      borderBottom: `3px solid ${theme.color.secondary}`,
    },
-  })
+  }),
+  ({ active, theme }) =>
+    active
+      ? {
+          opacity: 1,
+          borderBottom: `3px solid ${theme.color.secondary}`,
+        }
+      : {}
 );

 class Tabs extends Component {
--- a/addons/a11y/src/index.js
+++ b/addons/a11y/src/index.js
@ -9,7 +9,7 @@ import EVENTS, { PARAM_KEY } from './constants';

 const channel = addons.getChannel();
 let progress = Promise.resolve();
-let options;
+let setup = {};

 const getElement = () => {
  const storyRoot = document.getElementById('story-root');
@ -24,13 +24,20 @@ const report = input => {
  channel.emit(EVENTS.RESULT, input);
 };

-const run = o => {
+const run = (c, o) => {
  progress = progress.then(() => {
    axe.reset();
-    if (o) {
-      axe.configure(o);
+    if (c) {
+      axe.configure(c);
    }
-    return axe.run(getElement()).then(report);
+    return axe
+      .run(
+        getElement(),
+        o || {
+          restoreScroll: true,
+        }
+      )
+      .then(report);
  });
 };

@ -41,14 +48,14 @@ export const withA11Y = makeDecorator({
  allowDeprecatedUsage: false,

  wrapper: (getStory, context, opt) => {
-    options = opt.parameters || opt.options;
+    setup = opt.parameters || opt.options || {};

    return getStory(context);
  },
 });

-channel.on(STORY_RENDERED, () => run(options));
-channel.on(EVENTS.REQUEST, () => run(options));
+channel.on(STORY_RENDERED, () => run(setup.config, setup.options));
+channel.on(EVENTS.REQUEST, () => run(setup.config, setup.options));

 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
@ -63,7 +70,7 @@ export const checkA11y = deprecate(
 // TODO: REMOVE at v6.0.0
 export const configureA11y = deprecate(
  config => {
-    options = config;
+    setup = config;
  },
  stripIndents`
    configureA11y is deprecated, please configure addon-a11y using the addParameter api:
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "Action Logger addon for storybook",
  "keywords": [
    "storybook"
@ -11,30 +11,35 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/actions"
  },
  "license": "MIT",
  "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.0.0-beta.1",
-    "@storybook/components": "5.0.0-beta.1",
-    "@storybook/core-events": "5.0.0-beta.1",
-    "@storybook/theming": "5.0.0-beta.1",
+    "@storybook/addons": "5.0.0-beta.3",
+    "@storybook/components": "5.0.0-beta.3",
+    "@storybook/core-events": "5.0.0-beta.3",
+    "@storybook/theming": "5.0.0-beta.3",
    "core-js": "^2.6.2",
    "fast-deep-equal": "^2.0.1",
    "global": "^4.3.2",
    "lodash": "^4.17.11",
-    "make-error": "^1.3.5",
    "prop-types": "^15.6.2",
-    "react": "^16.8.1",
+    "polished": "^2.3.3",
+    "react": "^16.8.2",
    "react-inspector": "^2.3.0",
    "uuid": "^3.3.2"
  },
  "publishConfig": {
    "access": "public"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.121",
+    "@types/uuid": "^3.4.4"
  }
 }
--- a/addons/actions/src/components/ActionLogger/index.js
+++ b/addons/actions/src/components/ActionLogger/index.js
@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Inspector from 'react-inspector';
-
-import { withTheme } from '@storybook/theming';
-import { ActionBar, ActionButton } from '@storybook/components';
-
-import { Actions, Action, Wrapper, InspectorContainer, Countwrap, Counter } from './style';
-
-const ActionLogger = withTheme(({ actions, onClear, theme }) => (
-  <Wrapper>
-    <Actions>
-      {actions.map(action => (
-        <Action key={action.id}>
-          <Countwrap>{action.count > 1 && <Counter>{action.count}</Counter>}</Countwrap>
-          <InspectorContainer>
-            <Inspector
-              theme={theme.addonActionsTheme || 'chromeLight'}
-              sortObjectKeys
-              showNonenumerable={false}
-              name={action.data.name}
-              data={action.data.args || action.data}
-            />
-          </InspectorContainer>
-        </Action>
-      ))}
-    </Actions>
-
-    <ActionBar>
-      <ActionButton onClick={onClear}>CLEAR</ActionButton>
-    </ActionBar>
-  </Wrapper>
-));
-
-ActionLogger.propTypes = {
-  onClear: PropTypes.func.isRequired,
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      count: PropTypes.node,
-      data: PropTypes.shape({
-        name: PropTypes.node.isRequired,
-        args: PropTypes.any,
-      }),
-    })
-  ).isRequired,
-};
-
-export default ActionLogger;
--- a/addons/actions/src/components/ActionLogger/index.tsx
+++ b/addons/actions/src/components/ActionLogger/index.tsx
@ -0,0 +1,37 @@
+import React from 'react';
+import Inspector from 'react-inspector';
+
+import { withTheme } from '@storybook/theming';
+import { ActionBar } from '@storybook/components';
+
+import { Actions, Action, Wrapper, InspectorContainer, Counter } from './style';
+import { ActionDisplay } from '../../models';
+
+interface ActionLoggerProps {
+  actions: ActionDisplay[];
+  onClear: () => void;
+  theme: any;
+}
+
+export const ActionLogger = withTheme(({ actions, onClear, theme }: ActionLoggerProps) => (
+  <Wrapper>
+    <Actions>
+      {actions.map((action: ActionDisplay) => (
+        <Action key={action.id}>
+          {action.count > 1 && <Counter>{action.count}</Counter>}
+          <InspectorContainer>
+            <Inspector
+              theme={theme.addonActionsTheme || 'chromeLight'}
+              sortObjectKeys
+              showNonenumerable={false}
+              name={action.data.name}
+              data={action.data.args || action.data}
+            />
+          </InspectorContainer>
+        </Action>
+      ))}
+    </Actions>
+
+    <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
+  </Wrapper>
+));
--- a/addons/actions/src/components/ActionLogger/style.ts
+++ b/addons/actions/src/components/ActionLogger/style.ts
@ -1,33 +1,33 @@
 import { styled } from '@storybook/theming';
+import { opacify } from 'polished';

 export const Actions = styled.pre({
  flex: 1,
  margin: 0,
-  padding: '8px 2px 20px 0',
+  padding: '10px 5px 20px',
  overflowY: 'auto',
  color: '#666',
 });

 export const Action = styled.div({
  display: 'flex',
-  padding: '3px 3px 3px 0',
+  padding: '0',
  borderLeft: '5px solid transparent',
  borderBottom: '1px solid transparent',
  transition: 'all 0.1s',
-  alignItems: 'start',
+  alignItems: 'flex-start',
 });

-export const Counter = styled.div({
-  margin: '0 5px 0 5px',
-  backgroundColor: '#777777',
-  color: '#ffffff',
+export const Counter = styled.div(({ theme }) => ({
+  backgroundColor: opacify(0.5, theme.appBorderColor),
+  color: theme.color.inverseText,
+  fontSize: theme.typography.size.s1,
+  fontWeight: theme.typography.weight.bold,
+  lineHeight: 1,
  padding: '1px 5px',
  borderRadius: '20px',
-});
-
-export const Countwrap = styled.div({
-  paddingBottom: 2,
-});
+  margin: '2px 0px',
+}));

 export const InspectorContainer = styled.div({
  flex: 1,
--- a/addons/actions/src/constants.ts
+++ b/addons/actions/src/constants.ts
--- a/addons/actions/src/containers/ActionLogger/index.tsx
+++ b/addons/actions/src/containers/ActionLogger/index.tsx
@ -1,14 +1,32 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import deepEqual from 'fast-deep-equal';

 import { STORY_RENDERED } from '@storybook/core-events';

-import ActionLoggerComponent from '../../components/ActionLogger';
+import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
 import { EVENT_ID } from '../..';
+import { ActionDisplay } from '../../models';

-export default class ActionLogger extends React.Component {
-  state = { actions: [] };
+interface ActionLoggerProps {
+  active: boolean;
+  api: {
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+  };
+}
+
+interface ActionLoggerState {
+  actions: ActionDisplay[];
+}
+
+export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
+  private mounted: boolean;
+
+  constructor(props: ActionLoggerProps) {
+    super(props);
+
+    this.state = { actions: [] };
+  }

  componentDidMount() {
    this.mounted = true;
@ -33,13 +51,13 @@ export default class ActionLogger extends React.Component {
    }
  };

-  addAction = action => {
+  addAction = (action: ActionDisplay) => {
    let { actions = [] } = this.state;
    actions = [...actions];

    const previous = actions.length && actions[0];

-    if (previous && deepEqual(previous.data, action.data, { strict: true })) {
+    if (previous && deepEqual(previous.data, action.data)) {
      previous.count++; // eslint-disable-line
    } else {
      action.count = 1; // eslint-disable-line
@ -62,17 +80,3 @@ export default class ActionLogger extends React.Component {
    return active ? <ActionLoggerComponent {...props} /> : null;
  }
 }
-
-ActionLogger.propTypes = {
-  active: PropTypes.bool.isRequired,
-  channel: PropTypes.shape({
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    removeListener: PropTypes.func,
-  }).isRequired,
-  api: PropTypes.shape({
-    on: PropTypes.func,
-    getQueryParam: PropTypes.func,
-    setQueryParams: PropTypes.func,
-  }).isRequired,
-};
--- a/addons/actions/src/index.js
+++ b/addons/actions/src/index.js
@ -1,27 +0,0 @@
-import {
-  action,
-  actions,
-  decorate,
-  configureActions,
-  decorateAction,
-  withActions,
-} from './preview';
-
-// addons, panels and events get unique names using a prefix
-import { ADDON_ID, PANEL_ID, EVENT_ID } from './constants';
-
-export {
-  action,
-  actions,
-  decorate,
-  configureActions,
-  decorateAction,
-  withActions,
-  ADDON_ID,
-  PANEL_ID,
-  EVENT_ID,
-};
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
--- a/addons/actions/src/index.ts
+++ b/addons/actions/src/index.ts
@ -0,0 +1,6 @@
+export * from './constants';
+export * from './preview';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
--- a/addons/actions/src/manager.tsx
+++ b/addons/actions/src/manager.tsx
@ -5,13 +5,9 @@ import { ADDON_ID, PANEL_ID } from '.';

 export function register() {
  addons.register(ADDON_ID, api => {
-    const channel = addons.getChannel();
    addons.addPanel(PANEL_ID, {
      title: 'Actions',
-      // eslint-disable-next-line react/prop-types
-      render: ({ active, key }) => (
-        <ActionLogger key={key} channel={channel} api={api} active={active} />
-      ),
+      render: ({ active, key }) => <ActionLogger key={key} api={api} active={active} />,
    });
  });
 }
--- a/addons/actions/src/models/ActionDisplay.ts
+++ b/addons/actions/src/models/ActionDisplay.ts
@ -0,0 +1,11 @@
+import { ActionOptions } from './ActionOptions';
+
+export interface ActionDisplay {
+  id: string;
+  data: {
+    name: string;
+    args: any[];
+  };
+  count: number;
+  options: ActionOptions;
+}
--- a/addons/actions/src/models/ActionOptions.ts
+++ b/addons/actions/src/models/ActionOptions.ts
@ -0,0 +1,5 @@
+export interface ActionOptions {
+  depth?: number;
+  clearOnStoryChange?: boolean;
+  limit?: number;
+}
--- a/addons/actions/src/models/ActionsMap.ts
+++ b/addons/actions/src/models/ActionsMap.ts
@ -0,0 +1,5 @@
+import { HandlerFunction } from './HandlerFunction';
+
+export interface ActionsMap {
+  [key: string]: HandlerFunction;
+}
--- a/addons/actions/src/models/DecoratorFunction.ts
+++ b/addons/actions/src/models/DecoratorFunction.ts
@ -0,0 +1 @@
+export type DecoratorFunction = (args: any[]) => any[];
--- a/addons/actions/src/models/HandlerFunction.ts
+++ b/addons/actions/src/models/HandlerFunction.ts
@ -0,0 +1 @@
+export type HandlerFunction = (...args: any[]) => void;
--- a/addons/actions/src/models/index.ts
+++ b/addons/actions/src/models/index.ts
@ -0,0 +1,5 @@
+export * from './ActionDisplay';
+export * from './ActionOptions';
+export * from './ActionsMap';
+export * from './DecoratorFunction';
+export * from './HandlerFunction';
--- a/addons/actions/src/preview/action.js
+++ b/addons/actions/src/preview/action.js
@ -1,22 +0,0 @@
-import uuid from 'uuid/v1';
-import addons from '@storybook/addons';
-import { EVENT_ID } from '../constants';
-
-export default function action(name, options = {}) {
-  const actionOptions = {
-    ...options,
-  };
-
-  // eslint-disable-next-line no-shadow
-  const handler = function action(...args) {
-    const channel = addons.getChannel();
-    const id = uuid();
-    channel.emit(EVENT_ID, {
-      id,
-      data: { name, args },
-      options: actionOptions,
-    });
-  };
-
-  return handler;
-}
--- a/addons/actions/src/preview/action.ts
+++ b/addons/actions/src/preview/action.ts
@ -0,0 +1,25 @@
+import uuid from 'uuid/v1';
+import { addons } from '@storybook/addons';
+import { EVENT_ID } from '../constants';
+import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
+
+export function action(name: string, options: ActionOptions = {}): HandlerFunction {
+  const actionOptions = {
+    ...options,
+  };
+
+  // tslint:disable-next-line:no-shadowed-variable
+  const handler = function action(...args: any[]) {
+    const channel = addons.getChannel();
+    const id = uuid();
+    const actionDisplayToEmit: ActionDisplay = {
+      id,
+      count: 0,
+      data: { name, args },
+      options: actionOptions,
+    };
+    channel.emit(EVENT_ID, actionDisplayToEmit);
+  };
+
+  return handler;
+}
--- a/addons/actions/src/preview/actions.ts
+++ b/addons/actions/src/preview/actions.ts
@ -1,7 +1,8 @@
-import action from './action';
+import { action } from './action';
+import { ActionOptions, ActionsMap } from '../models';

-export default function actions(...args) {
-  let options = {};
+export function actions(...args: any[]): ActionsMap {
+  let options: ActionOptions = {};
  const names = args;
  // last argument can be options
  if (names.length !== 1 && typeof args[args.length - 1] !== 'string') {
@ -16,7 +17,7 @@ export default function actions(...args) {
    });
  }

-  const actionsObject = {};
+  const actionsObject: ActionsMap = {};
  Object.keys(namesObject).forEach(name => {
    actionsObject[name] = action(namesObject[name], options);
  });
--- a/addons/actions/src/preview/configureActions.js
+++ b/addons/actions/src/preview/configureActions.js
@ -1,9 +0,0 @@
-export const config = {
-  depth: 10,
-  clearOnStoryChange: true,
-  limit: 50,
-};
-
-export function configureActions(options = {}) {
-  Object.assign(config, options);
-}
--- a/addons/actions/src/preview/configureActions.ts
+++ b/addons/actions/src/preview/configureActions.ts
@ -0,0 +1,11 @@
+import { ActionOptions } from '../models';
+
+export const config: ActionOptions = {
+  depth: 10,
+  clearOnStoryChange: true,
+  limit: 50,
+};
+
+export const configureActions = (options: ActionOptions = {}): void => {
+  Object.assign(config, options);
+};
--- a/addons/actions/src/preview/decorateAction.js
+++ b/addons/actions/src/preview/decorateAction.js
@ -1,34 +0,0 @@
-import action from './action';
-import actions from './actions';
-import { createDecorator } from './withActions';
-
-function applyDecorators(decorators, actionCallback) {
-  return (..._args) => {
-    const decorated = decorators.reduce((args, fn) => fn(args), _args);
-    actionCallback(...decorated);
-  };
-}
-
-export function decorateAction(decorators) {
-  return (name, options) => {
-    const callAction = action(name, options);
-    return applyDecorators(decorators, callAction);
-  };
-}
-
-export function decorate(decorators) {
-  const decorated = decorateAction(decorators);
-  const decoratedActions = (...args) => {
-    const rawActions = actions(...args);
-    const actionsObject = {};
-    Object.keys(rawActions).forEach(name => {
-      actionsObject[name] = applyDecorators(decorators, rawActions[name]);
-    });
-    return actionsObject;
-  };
-  return {
-    action: decorated,
-    actions: decoratedActions,
-    withActions: createDecorator(decoratedActions),
-  };
-}
--- a/addons/actions/src/preview/decorateAction.ts
+++ b/addons/actions/src/preview/decorateAction.ts
@ -0,0 +1,35 @@
+import { action } from './action';
+import { actions } from './actions';
+import { createDecorator } from './withActions';
+import { ActionOptions, DecoratorFunction, HandlerFunction } from '../models';
+
+const applyDecorators = (decorators: DecoratorFunction[], actionCallback: HandlerFunction) => {
+  return (..._args: any[]) => {
+    const decorated = decorators.reduce((args, storyFn) => storyFn(args), _args);
+    actionCallback(...decorated);
+  };
+};
+
+export const decorateAction = (decorators: DecoratorFunction[]): ((name: string, options?: ActionOptions) => HandlerFunction) => {
+  return (name: string, options?: ActionOptions) => {
+    const callAction = action(name, options);
+    return applyDecorators(decorators, callAction);
+  };
+};
+
+export const decorate = (decorators: DecoratorFunction[]) => {
+  const decorated = decorateAction(decorators);
+  const decoratedActions = (...args: any[]) => {
+    const rawActions = actions(...args);
+    const actionsObject = {} as any;
+    Object.keys(rawActions).forEach(name => {
+      actionsObject[name] = applyDecorators(decorators, rawActions[name]);
+    });
+    return actionsObject;
+  };
+  return {
+    action: decorated,
+    actions: decoratedActions,
+    withActions: createDecorator(decoratedActions),
+  };
+};
--- a/addons/actions/src/preview/index.js
+++ b/addons/actions/src/preview/index.js
@ -1,5 +0,0 @@
-export { default as action } from './action';
-export { default as actions } from './actions';
-export { configureActions } from './configureActions';
-export { decorateAction, decorate } from './decorateAction';
-export { default as withActions } from './withActions';
--- a/addons/actions/src/preview/index.ts
+++ b/addons/actions/src/preview/index.ts
@ -0,0 +1,5 @@
+export * from './action';
+export * from './actions';
+export * from './configureActions';
+export * from './decorateAction';
+export * from './withActions';
--- a/addons/actions/src/preview/withActions.ts
+++ b/addons/actions/src/preview/withActions.ts
@ -1,13 +1,13 @@
 // Based on http://backbonejs.org/docs/backbone.html#section-164
 import { document, Element } from 'global';
-import isEqual from 'lodash/isEqual';
-import addons from '@storybook/addons';
+import { isEqual } from 'lodash';
+import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';

-import actions from './actions';
+import { actions } from './actions';

-let lastSubscription;
-let lastArgs;
+let lastSubscription: () => () => void;
+let lastArgs: any[];

 const delegateEventSplitter = /^(\S+)\s*(.*)$/;

@ -16,7 +16,7 @@ const matchesMethod = isIE ? 'msMatchesSelector' : 'matches';

 const root = document && document.getElementById('root');

-const hasMatchInAncestry = (element, selector) => {
+const hasMatchInAncestry = (element: any, selector: any): boolean => {
  if (element[matchesMethod](selector)) {
    return true;
  }
@ -27,14 +27,14 @@ const hasMatchInAncestry = (element, selector) => {
  return hasMatchInAncestry(parent, selector);
 };

-const createHandlers = (actionsFn, ...args) => {
+const createHandlers = (actionsFn: (...arg: any[]) => object, ...args: any[]) => {
  const actionsObject = actionsFn(...args);
  return Object.entries(actionsObject).map(([key, action]) => {
    // eslint-disable-next-line no-unused-vars
    const [_, eventName, selector] = key.match(delegateEventSplitter);
    return {
      eventName,
-      handler: e => {
+      handler: (e: { target: any }) => {
        if (!selector || hasMatchInAncestry(e.target, selector)) {
          action(e);
        }
@ -43,24 +43,24 @@ const createHandlers = (actionsFn, ...args) => {
  });
 };

-const actionsSubscription = (...args) => {
+const actionsSubscription = (...args: any[]) => {
  if (!isEqual(args, lastArgs)) {
    lastArgs = args;
+    // @ts-ignore
    const handlers = createHandlers(...args);
    lastSubscription = () => {
      handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
-      return () =>
-        handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
+      return () => handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
    };
  }
  return lastSubscription;
 };

-export const createDecorator = actionsFn => (...args) => story => {
+export const createDecorator = (actionsFn: any) => (...args: any[]) => (storyFn: () => any) => {
  if (root != null) {
    addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, actionsSubscription(actionsFn, ...args));
  }
-  return story();
+  return storyFn();
 };

-export default createDecorator(actions);
+export const withActions = createDecorator(actions);
--- a/addons/actions/src/typings.d.ts
+++ b/addons/actions/src/typings.d.ts
@ -0,0 +1,4 @@
+// TODO: following packages need definition files or a TS migration
+declare module '@storybook/components';
+declare module 'global';
+declare module 'react-inspector';
--- a/addons/actions/tsconfig.json
+++ b/addons/actions/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "A storybook addon to show different backgrounds for your preview",
  "keywords": [
    "addon",
@ -14,29 +14,31 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/backgrounds"
  },
  "license": "MIT",
  "author": "jbaxleyiii",
  "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.0.0-beta.1",
-    "@storybook/client-logger": "5.0.0-beta.1",
-    "@storybook/components": "5.0.0-beta.1",
-    "@storybook/core-events": "5.0.0-beta.1",
-    "@storybook/theming": "5.0.0-beta.1",
+    "@storybook/addons": "5.0.0-beta.3",
+    "@storybook/client-logger": "5.0.0-beta.3",
+    "@storybook/components": "5.0.0-beta.3",
+    "@storybook/core-events": "5.0.0-beta.3",
+    "@storybook/theming": "5.0.0-beta.3",
    "core-js": "^2.6.2",
-    "eventemitter3": "^3.1.0",
    "global": "^4.3.2",
    "memoizerific": "^1.11.3",
-    "prop-types": "^15.6.2",
-    "react": "^16.8.1",
+    "react": "^16.8.2",
    "util-deprecate": "^1.0.2"
  },
+  "devDependencies": {
+    "@types/util-deprecate": "^1.0.0"
+  },
  "publishConfig": {
    "access": "public"
  }
--- a/addons/backgrounds/src/Tool.js
+++ b/addons/backgrounds/src/Tool.js
@ -1,130 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import memoize from 'memoizerific';
-
-import { SET_STORIES } from '@storybook/core-events';
-import { Global } from '@storybook/theming';
-
-import { Popout, Item, Icons, Icon, IconButton, Title, Detail, List } from '@storybook/components';
-import * as S from './components';
-
-import { PARAM_KEY } from './constants';
-
-const iframeId = 'storybook-preview-background';
-
-const getState = memoize(10)((props, state) => {
-  const data = props.api.getCurrentStoryData();
-  const list = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
-
-  const items = list.length
-    ? list.map(({ name, styles: value, id }) => ({ name, value, id }))
-    : list;
-
-  const selected =
-    state.selected === 'responsive' || list.find(i => i.id === state.selected)
-      ? state.selected
-      : list.find(i => i.default) || 'responsive';
-
-  return {
-    items,
-    selected,
-  };
-});
-
-export default class BackgroundTool extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      items: [],
-      selected: 'transparent',
-    };
-
-    this.listener = () => {
-      this.setState({ selected: null });
-    };
-  }
-
-  componentDidMount() {
-    const { api } = this.props;
-    api.on(SET_STORIES, this.listener);
-  }
-
-  componentWillUnmount() {
-    const { api } = this.props;
-    api.off(SET_STORIES, this.listener);
-  }
-
-  change = selected => {
-    this.setState({ selected });
-  };
-
-  render() {
-    const { items, selected } = getState(this.props, this.state);
-
-    return items.length ? (
-      <Fragment>
-        <Global
-          styles={{
-            [`#${iframeId}`]: {
-              background: selected,
-            },
-          }}
-        />
-
-        <Popout key="backgrounds">
-          <IconButton key="background" title="Backgrounds">
-            <Icons icon="photo" />
-          </IconButton>
-          {({ hide }) => (
-            <List>
-              {selected !== 'transparent' ? (
-                <Fragment>
-                  <Item
-                    key="clear"
-                    onClick={() => {
-                      hide();
-                      this.change('transparent');
-                    }}
-                  >
-                    <Icon type="undo" />
-                    <Title>Clear</Title>
-                    <Detail>transparent</Detail>
-                  </Item>
-                </Fragment>
-              ) : null}
-
-              {items.map(({ name, value }) => (
-                <Item
-                  key={name}
-                  onClick={() => {
-                    hide();
-                    this.change(value);
-                  }}
-                >
-                  <Icon type={<S.ColorIcon background={value} />} />
-                  <Title>{name}</Title>
-                  <Detail>{value}</Detail>
-                </Item>
-              ))}
-            </List>
-          )}
-        </Popout>
-      </Fragment>
-    ) : null;
-  }
-}
-BackgroundTool.propTypes = {
-  api: PropTypes.shape({
-    getQueryParam: PropTypes.func,
-    setQueryParams: PropTypes.func,
-  }).isRequired,
-  channel: PropTypes.shape({
-    emit: PropTypes.func,
-    on: PropTypes.func,
-    removeListener: PropTypes.func,
-  }),
-};
-BackgroundTool.defaultProps = {
-  channel: undefined,
-};
--- a/addons/backgrounds/src/components.js
+++ b/addons/backgrounds/src/components.js
@ -1,5 +0,0 @@
-import { styled } from '@storybook/theming';
-
-export const ColorIcon = styled.span(({ background }) => ({
-  background,
-}));
--- a/addons/backgrounds/src/components/ColorIcon.tsx
+++ b/addons/backgrounds/src/components/ColorIcon.tsx
@ -0,0 +1,14 @@
+import { styled } from '@storybook/theming';
+
+export const ColorIcon = styled.span(
+  ({ background }: { background: string }) => ({
+    borderRadius: '1rem',
+    display: 'block',
+    height: '1rem',
+    width: '1rem',
+    background,
+  }),
+  ({ theme }) => ({
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
+  }),
+);
--- a/addons/backgrounds/src/components/index.ts
+++ b/addons/backgrounds/src/components/index.ts
@ -0,0 +1 @@
+export * from './ColorIcon';
--- a/addons/backgrounds/src/constants.ts
+++ b/addons/backgrounds/src/constants.ts
@ -1,7 +1,7 @@
 export const ADDON_ID = 'storybook/background';
 export const PARAM_KEY = 'backgrounds';

-export default {
+export const EVENTS = {
  SET: `${ADDON_ID}:set`,
  UNSET: `${ADDON_ID}:unset`,
 };
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@ -0,0 +1,150 @@
+import React, { Component, Fragment } from 'react';
+import memoize from 'memoizerific';
+
+import { Global } from '@storybook/theming';
+
+import { SET_STORIES } from '@storybook/core-events';
+
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+
+import { PARAM_KEY } from '../constants';
+import { ColorIcon } from '../components/ColorIcon';
+import { BackgroundConfig, BackgroundSelectorItem } from '../models';
+
+const iframeId = 'storybook-preview-background';
+
+const createBackgroundSelectorItem = memoize(1000)(
+  (
+    id: string,
+    name: string,
+    value: string,
+    hasSwatch: boolean,
+    change: (arg: { selected: string; expanded: boolean }) => void
+  ): BackgroundSelectorItem => ({
+    id: id || name,
+    title: name,
+    onClick: () => {
+      change({ selected: value, expanded: false });
+    },
+    value,
+    right: hasSwatch ? <ColorIcon background={value} /> : undefined,
+  })
+);
+
+const getSelectedBackgroundColor = (list: BackgroundConfig[], currentSelectedValue: string): string => {
+  if (!list.length) {
+    return 'transparent';
+  }
+
+  if (currentSelectedValue === 'transparent') {
+    return currentSelectedValue;
+  }
+
+  if (list.find(i => i.value === currentSelectedValue)) {
+    return currentSelectedValue;
+  }
+
+  if (list.find(i => i.default)) {
+    return list.find(i => i.default).value;
+  }
+
+  return 'transparent';
+};
+
+const getDisplayableState = memoize(10)((props: BackgroundToolProps, state: BackgroundToolState, change) => {
+  const data = props.api.getCurrentStoryData();
+  const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
+
+  const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
+
+  let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
+
+  if (selectedBackgroundColor !== 'transparent') {
+    availableBackgroundSelectorItems.push(createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change));
+  }
+
+  if (list.length) {
+    availableBackgroundSelectorItems = [
+      ...availableBackgroundSelectorItems,
+      ...list.map(({ name, value }) => createBackgroundSelectorItem(null, name, value, true, change)),
+    ];
+  }
+
+  return {
+    items: availableBackgroundSelectorItems,
+    selectedBackgroundColor,
+  };
+});
+
+interface BackgroundToolProps {
+  api: {
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+    getCurrentStoryData(): any;
+  };
+}
+
+interface BackgroundToolState {
+  items: BackgroundSelectorItem[];
+  selected: string;
+  expanded: boolean;
+}
+
+export class BackgroundSelector extends Component<BackgroundToolProps, BackgroundToolState> {
+  private listener = () => {
+    this.setState({ selected: null });
+  };
+
+  constructor(props: BackgroundToolProps) {
+    super(props);
+
+    this.state = {
+      items: [],
+      selected: null,
+      expanded: false,
+    };
+  }
+
+  componentDidMount() {
+    const { api } = this.props;
+    api.on(SET_STORIES, this.listener);
+  }
+
+  componentWillUnmount() {
+    const { api } = this.props;
+    api.off(SET_STORIES, this.listener);
+  }
+
+  change = (args: { selected: string; expanded: boolean }) => this.setState(args);
+
+  render() {
+    const { expanded } = this.state;
+    const { items, selectedBackgroundColor } = getDisplayableState(this.props, this.state, this.change);
+
+    return items.length ? (
+      <Fragment>
+        {selectedBackgroundColor ? (
+          <Global
+            styles={{
+              [`#${iframeId}`]: {
+                background: selectedBackgroundColor,
+              },
+            }}
+          />
+        ) : null}
+        <WithTooltip
+          placement="top"
+          trigger="click"
+          tooltipShown={expanded}
+          onVisibilityChange={(newVisibility: boolean) => this.setState({ expanded: newVisibility })}
+          tooltip={<TooltipLinkList links={items} />}
+          closeOnClick
+        >
+          <IconButton key="background" active={selectedBackgroundColor !== 'transparent'} title="Change the background of the preview">
+            <Icons icon="photo" />
+          </IconButton>
+        </WithTooltip>
+      </Fragment>
+    ) : null;
+  }
+}
--- a/addons/backgrounds/src/containers/index.ts
+++ b/addons/backgrounds/src/containers/index.ts
@ -0,0 +1 @@
+export * from './BackgroundSelector';
--- a/addons/backgrounds/src/deprecated.ts
+++ b/addons/backgrounds/src/deprecated.ts
--- a/addons/backgrounds/src/index.ts
+++ b/addons/backgrounds/src/index.ts
@ -1,14 +1,15 @@
-import addons, { makeDecorator } from '@storybook/addons';
-import CoreEvents from '@storybook/core-events';
+import { addons, makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons';
 import deprecate from 'util-deprecate';

-import Events from './constants';
+import { REGISTER_SUBSCRIPTION } from '@storybook/core-events';
+import { EVENTS } from './constants';
+import { BackgroundConfig } from './models';

-let prevBackgrounds;
+let prevBackgrounds: BackgroundConfig[];

 const subscription = () => () => {
  prevBackgrounds = null;
-  addons.getChannel().emit(Events.UNSET);
+  addons.getChannel().emit(EVENTS.UNSET);
 };

 export const withBackgrounds = makeDecorator({
@ -16,7 +17,7 @@ export const withBackgrounds = makeDecorator({
  parameterName: 'backgrounds',
  skipIfNoParametersOrOptions: true,
  allowDeprecatedUsage: true,
-  wrapper: (getStory, context, { options, parameters }) => {
+  wrapper: (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
    const data = parameters || options || [];
    const backgrounds = Array.isArray(data) ? data : Object.values(data);

@ -25,10 +26,10 @@ export const withBackgrounds = makeDecorator({
    }

    if (prevBackgrounds !== backgrounds) {
-      addons.getChannel().emit(Events.SET, backgrounds);
+      addons.getChannel().emit(EVENTS.SET, backgrounds);
      prevBackgrounds = backgrounds;
    }
-    addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
+    addons.getChannel().emit(REGISTER_SUBSCRIPTION, subscription);

    return getStory(context);
  },
--- a/addons/backgrounds/src/models/BackgroundConfig.ts
+++ b/addons/backgrounds/src/models/BackgroundConfig.ts
@ -0,0 +1,5 @@
+export interface BackgroundConfig {
+  name: string;
+  value: string;
+  default?: boolean;
+}
--- a/addons/backgrounds/src/models/BackgroundSelectorItem.ts
+++ b/addons/backgrounds/src/models/BackgroundSelectorItem.ts
@ -0,0 +1,7 @@
+export interface BackgroundSelectorItem {
+  id: string;
+  title: string;
+  onClick: () => void;
+  value: string;
+  right?: any;
+}
--- a/addons/backgrounds/src/models/index.ts
+++ b/addons/backgrounds/src/models/index.ts
@ -0,0 +1,2 @@
+export * from './BackgroundConfig';
+export * from './BackgroundSelectorItem';
--- a/addons/backgrounds/src/register.tsx
+++ b/addons/backgrounds/src/register.tsx
@ -1,13 +1,14 @@
 import React from 'react';
-import addons, { types } from '@storybook/addons';
+import { addons, types } from '@storybook/addons';

 import { ADDON_ID } from './constants';
-import Tool from './Tool';
+import { BackgroundSelector } from './containers';

 addons.register(ADDON_ID, api => {
  addons.add(ADDON_ID, {
+    title: 'Backgrounds',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
-    render: () => <Tool api={api} />,
+    render: () => <BackgroundSelector api={api} />,
  });
 });
--- a/addons/backgrounds/src/typings.d.ts
+++ b/addons/backgrounds/src/typings.d.ts
@ -0,0 +1,2 @@
+// TODO: following packages need definition files or a TS migration
+declare module '@storybook/components';
--- a/addons/backgrounds/tsconfig.json
+++ b/addons/backgrounds/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-centered",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "Storybook decorator to center components",
  "keywords": [
    "addon",
@ -12,7 +12,8 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/centered"
  },
  "license": "MIT",
  "author": "Muhammed Thanish <mnmtanish@gmail.com>",
--- a/addons/centered/src/html.js
+++ b/addons/centered/src/html.js
@ -31,15 +31,15 @@ export default function(storyFn) {
  const wrapper = getWrapperDiv();
  wrapper.appendChild(inner);

-  const component = storyFn();
+  const element = storyFn();

-  if (typeof component === 'string') {
-    inner.innerHTML = component;
-  } else if (component instanceof Node) {
+  if (typeof element === 'string') {
+    inner.innerHTML = element;
+  } else if (element instanceof Node) {
    inner.innerHTML = '';
-    inner.appendChild(component);
+    inner.appendChild(element);
  } else {
-    return component;
+    return element;
  }

  return wrapper;
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
@ -14,7 +14,8 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/cssresources"
  },
  "license": "MIT",
  "author": "nm123github",
@ -24,18 +25,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@emotion/styled": "10.0.6",
-    "@storybook/addons": "5.0.0-beta.1",
-    "@storybook/channels": "5.0.0-beta.1",
-    "@storybook/components": "5.0.0-beta.1",
-    "@storybook/core-events": "5.0.0-beta.1",
+    "@storybook/addons": "5.0.0-beta.3",
+    "@storybook/components": "5.0.0-beta.3",
+    "@storybook/core-events": "5.0.0-beta.3",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.8.1",
-    "react-dom": "^16.7.0",
-    "react-syntax-highlighter": "^8.0.1",
-    "util-deprecate": "^1.0.2"
+    "react": "^16.8.2"
  },
  "peerDependencies": {
    "react": "*"
--- a/addons/cssresources/src/index.ts
+++ b/addons/cssresources/src/index.ts
@ -67,7 +67,7 @@ export const withCssResources = makeDecorator({
  skipIfNoParametersOrOptions: true,
  allowDeprecatedUsage: false,

-  wrapper: (getStory: any, context: any, { options, parameters }: any) => {
+  wrapper: (getStory, context, { options, parameters }) => {
    const storyOptions = parameters || options;
    addons.getChannel().on(EVENTS.SET, setResources);

--- a/addons/events/package.json
+++ b/addons/events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-events",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "Add events to your Storybook stories.",
  "keywords": [
    "addon",
@ -14,7 +14,8 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/events"
  },
  "license": "MIT",
  "main": "dist/index.js",
@ -23,13 +24,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.0.0-beta.1",
-    "@storybook/core-events": "5.0.0-beta.1",
-    "@storybook/theming": "5.0.0-beta.1",
+    "@storybook/addons": "5.0.0-beta.3",
+    "@storybook/core-events": "5.0.0-beta.3",
+    "@storybook/theming": "5.0.0-beta.3",
    "core-js": "^2.6.2",
    "format-json": "^1.0.3",
    "prop-types": "^15.6.2",
-    "react": "^16.8.1",
+    "react": "^16.8.2",
    "react-lifecycles-compat": "^3.0.4",
    "react-textarea-autosize": "^7.0.4",
    "util-deprecate": "^1.0.2"
--- a/addons/events/src/index.js
+++ b/addons/events/src/index.js
@ -39,9 +39,9 @@ export default options => {
  if (options.children) {
    return WithEvents(options);
  }
-  return story => {
+  return storyFn => {
    addEvents(options);
-    return story();
+    return storyFn();
  };
 };

--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-google-analytics",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "Storybook addon for google analytics",
  "keywords": [
    "addon",
@ -12,15 +12,16 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/google-analytics"
  },
  "license": "MIT",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.0.0-beta.1",
-    "@storybook/core-events": "5.0.0-beta.1",
+    "@storybook/addons": "5.0.0-beta.3",
+    "@storybook/core-events": "5.0.0-beta.3",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
    "react-ga": "^2.5.3"
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-graphql",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "Storybook addon to display the GraphiQL IDE",
  "keywords": [
    "addon",
@ -12,7 +12,8 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/graphql"
  },
  "license": "MIT",
  "main": "dist/index.js",
--- a/addons/info/package.json
+++ b/addons/info/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-info",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "A Storybook addon to show additional information for your stories.",
  "keywords": [
    "addon",
@ -12,7 +12,8 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/info"
  },
  "license": "MIT",
  "main": "dist/index.js",
@ -21,24 +22,23 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.0.0-beta.1",
-    "@storybook/client-logger": "5.0.0-beta.1",
-    "@storybook/components": "5.0.0-beta.1",
-    "@storybook/theming": "5.0.0-beta.1",
+    "@storybook/addons": "5.0.0-beta.3",
+    "@storybook/client-logger": "5.0.0-beta.3",
+    "@storybook/components": "5.0.0-beta.3",
+    "@storybook/theming": "5.0.0-beta.3",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
    "marksy": "^6.1.0",
    "nested-object-assign": "^1.0.1",
    "prop-types": "^15.6.2",
-    "react": "^16.8.1",
+    "react": "^16.8.2",
    "react-addons-create-fragment": "^15.5.3",
-    "react-element-to-jsx-string": "^14.0.2",
-    "react-is": "^16.8.1",
+    "react-is": "^16.8.3",
    "react-lifecycles-compat": "^3.0.4",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "react-test-renderer": "^16.7.0"
+    "react-test-renderer": "^16.8.1"
  },
  "peerDependencies": {
    "react": "*"
--- a/addons/info/src/snapshots/index.test.js.snap
+++ b/addons/info/src/snapshots/index.test.js.snap
@ -175,12 +175,9 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
          <div
            style={
              Object {
-                "WebkitFontSmoothing": "antialiased",
                "backgroundColor": "#fff",
                "border": "1px solid #eee",
                "borderRadius": "2px",
-                "color": "#444",
-                "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                "fontSize": "15px",
                "fontWeight": 300,
                "lineHeight": 1.45,
@ -1431,12 +1428,9 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
          <div
            style={
              Object {
-                "WebkitFontSmoothing": "antialiased",
                "backgroundColor": "#fff",
                "border": "1px solid #eee",
                "borderRadius": "2px",
-                "color": "#444",
-                "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                "fontSize": "15px",
                "fontWeight": 300,
                "lineHeight": 1.45,
@ -1491,10 +1485,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                  id="test-story"
                  style={
                    Object {
-                      "WebkitFontSmoothing": "antialiased",
                      "borderBottom": "1px solid #eee",
-                      "color": "#444",
-                      "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                      "fontSize": "40px",
                      "fontWeight": 600,
                      "margin": 0,
@ -1514,9 +1505,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                  id="test-story-with-markdown-info"
                  style={
                    Object {
-                      "WebkitFontSmoothing": "antialiased",
-                      "color": "#444",
-                      "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                      "fontSize": "30px",
                      "fontWeight": 600,
                      "margin": 0,
@ -1534,9 +1522,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                <div
                  style={
                    Object {
-                      "WebkitFontSmoothing": "antialiased",
-                      "color": "#444",
-                      "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                      "fontSize": "15px",
                    }
                  }
@ -2623,7 +2608,7 @@ exports[`addon Info should render component description if story kind matches co
    context={
      Object {
        "kind": "TestComponent",
-        "story": "Basic test",
+        "name": "Basic test",
      }
    }
    excludedPropTypes={Array []}
@ -2644,12 +2629,9 @@ exports[`addon Info should render component description if story kind matches co
        <div
          style={
            Object {
-              "WebkitFontSmoothing": "antialiased",
              "backgroundColor": "#fff",
              "border": "1px solid #eee",
              "borderRadius": "2px",
-              "color": "#444",
-              "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
              "fontSize": "15px",
              "fontWeight": 300,
              "lineHeight": 1.45,
@ -2688,7 +2670,9 @@ exports[`addon Info should render component description if story kind matches co
                  "padding": 0,
                }
              }
-            />
+            >
+              Basic test
+            </h2>
          </div>
        </div>
      </div>
@ -2767,12 +2751,9 @@ exports[`addon Info should render component description if story kind matches co
        <div
          style={
            Object {
-              "WebkitFontSmoothing": "antialiased",
              "backgroundColor": "#fff",
              "border": "1px solid #eee",
              "borderRadius": "2px",
-              "color": "#444",
-              "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
              "fontSize": "15px",
              "fontWeight": 300,
              "lineHeight": 1.45,
@ -2792,10 +2773,7 @@ exports[`addon Info should render component description if story kind matches co
                id="awesome-test-component-description"
                style={
                  Object {
-                    "WebkitFontSmoothing": "antialiased",
                    "borderBottom": "1px solid #eee",
-                    "color": "#444",
-                    "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "fontSize": "40px",
                    "fontWeight": 600,
                    "margin": 0,
@ -2815,9 +2793,6 @@ exports[`addon Info should render component description if story kind matches co
                id="awesome-test-component-description-with-markdown-support"
                style={
                  Object {
-                    "WebkitFontSmoothing": "antialiased",
-                    "color": "#444",
-                    "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "fontSize": "30px",
                    "fontWeight": 600,
                    "margin": 0,
@ -2835,9 +2810,6 @@ exports[`addon Info should render component description if story kind matches co
              <div
                style={
                  Object {
-                    "WebkitFontSmoothing": "antialiased",
-                    "color": "#444",
-                    "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "fontSize": "15px",
                  }
                }
@ -2853,7 +2825,6 @@ exports[`addon Info should render component description if story kind matches co
                >
                  cursive
                </em>
-                 
              </div>
            </P>
          </div>
@ -3852,7 +3823,7 @@ exports[`addon Info should render component description if story name matches co
    context={
      Object {
        "kind": "Test Components",
-        "story": "TestComponent",
+        "name": "TestComponent",
      }
    }
    excludedPropTypes={Array []}
@ -3873,12 +3844,9 @@ exports[`addon Info should render component description if story name matches co
        <div
          style={
            Object {
-              "WebkitFontSmoothing": "antialiased",
              "backgroundColor": "#fff",
              "border": "1px solid #eee",
              "borderRadius": "2px",
-              "color": "#444",
-              "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
              "fontSize": "15px",
              "fontWeight": 300,
              "lineHeight": 1.45,
@ -3917,7 +3885,9 @@ exports[`addon Info should render component description if story name matches co
                  "padding": 0,
                }
              }
-            />
+            >
+              TestComponent
+            </h2>
          </div>
        </div>
      </div>
@ -3996,12 +3966,9 @@ exports[`addon Info should render component description if story name matches co
        <div
          style={
            Object {
-              "WebkitFontSmoothing": "antialiased",
              "backgroundColor": "#fff",
              "border": "1px solid #eee",
              "borderRadius": "2px",
-              "color": "#444",
-              "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
              "fontSize": "15px",
              "fontWeight": 300,
              "lineHeight": 1.45,
@ -4021,10 +3988,7 @@ exports[`addon Info should render component description if story name matches co
                id="awesome-test-component-description"
                style={
                  Object {
-                    "WebkitFontSmoothing": "antialiased",
                    "borderBottom": "1px solid #eee",
-                    "color": "#444",
-                    "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "fontSize": "40px",
                    "fontWeight": 600,
                    "margin": 0,
@ -4044,9 +4008,6 @@ exports[`addon Info should render component description if story name matches co
                id="awesome-test-component-description-with-markdown-support"
                style={
                  Object {
-                    "WebkitFontSmoothing": "antialiased",
-                    "color": "#444",
-                    "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "fontSize": "30px",
                    "fontWeight": 600,
                    "margin": 0,
@ -4064,9 +4025,6 @@ exports[`addon Info should render component description if story name matches co
              <div
                style={
                  Object {
-                    "WebkitFontSmoothing": "antialiased",
-                    "color": "#444",
-                    "fontFamily": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
                    "fontSize": "15px",
                  }
                }
@ -4082,7 +4040,6 @@ exports[`addon Info should render component description if story name matches co
                >
                  cursive
                </em>
-                 
              </div>
            </P>
          </div>
--- a/addons/info/src/components/PropTable/snapshots/index.test.js.snap
+++ b/addons/info/src/components/PropTable/snapshots/index.test.js.snap
@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropTable multiLineText should exclude excluded propTypes 1`] = `
+<small>
+  No propTypes defined!
+</small>
+`;
+
+exports[`PropTable multiLineText should have 2 br tags for 3 lines of text 1`] = `
+Array [
+  <span>
+     
+    foo 
+  </span>,
+  <span>
+    <br />
+     
+     bar 
+  </span>,
+  <span>
+    <br />
+     
+     baz
+  </span>,
+]
+`;
+
+exports[`PropTable multiLineText should include all propTypes by default 1`] = `
+<Table>
+  <Thead>
+    <Tr>
+      <Th>
+        property
+      </Th>
+      <Th>
+        propType
+      </Th>
+      <Th>
+        required
+      </Th>
+      <Th>
+        default
+      </Th>
+      <Th>
+        description
+      </Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    <Tr
+      key="foo"
+    >
+      <Td
+        isMonospace={true}
+      >
+        foo
+      </Td>
+      <Td
+        isMonospace={true}
+      >
+        <PrettyPropType
+          depth={1}
+          propType={
+            Object {
+              "name": "string",
+            }
+          }
+        />
+      </Td>
+      <Td
+        isMonospace={false}
+      >
+        -
+      </Td>
+      <Td
+        isMonospace={false}
+      >
+        -
+      </Td>
+      <Td
+        isMonospace={false}
+      />
+    </Tr>
+  </Tbody>
+</Table>
+`;
--- a/addons/info/src/components/PropTable/components/Table.js
+++ b/addons/info/src/components/PropTable/components/Table.js
@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import '../style.css';
+
+const Table = ({ children }) => <table className="info-table">{children}</table>;
+
+Table.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
+    .isRequired,
+};
+
+export default Table;
--- a/addons/info/src/components/PropTable/components/Table.test.js
+++ b/addons/info/src/components/PropTable/components/Table.test.js
@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Table from './Table';
+
+describe('PropTable/Table', () => {
+  it('renders a table html node with one child element', () => {
+    const wrapper = shallow(
+      <Table>
+        <div>foo bar</div>
+      </Table>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a table html node with multiple children elements', () => {
+    const wrapper = shallow(
+      <Table>
+        <div>foo bar</div>
+        <div>baz</div>
+      </Table>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/addons/info/src/components/PropTable/components/Tbody.js
+++ b/addons/info/src/components/PropTable/components/Tbody.js
@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Tbody = ({ children }) => <tbody>{children}</tbody>;
+
+Tbody.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
+    .isRequired,
+};
+
+export default Tbody;
--- a/addons/info/src/components/PropTable/components/Tbody.test.js
+++ b/addons/info/src/components/PropTable/components/Tbody.test.js
@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Tbody from './Tbody';
+
+describe('PropTable/Tbody', () => {
+  it('renders a tbody html node with children', () => {
+    const wrapper = shallow(
+      <Tbody>
+        <div>foo bar</div>
+      </Tbody>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a tbody html node with multiple children elements', () => {
+    const wrapper = shallow(
+      <Tbody>
+        <div>foo bar</div>
+        <div>baz</div>
+      </Tbody>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/addons/info/src/components/PropTable/components/Td.js
+++ b/addons/info/src/components/PropTable/components/Td.js
@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import '../style.css';
+
+const Td = ({ isMonospace, children }) => (
+  <td className={isMonospace ? 'info-table-monospace' : null}>{children}</td>
+);
+
+Td.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.arrayOf(PropTypes.element),
+  ]).isRequired,
+  isMonospace: PropTypes.bool,
+};
+
+Td.defaultProps = {
+  isMonospace: false,
+};
+
+export default Td;
--- a/addons/info/src/components/PropTable/components/Td.test.js
+++ b/addons/info/src/components/PropTable/components/Td.test.js
@ -0,0 +1,54 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Td from './Td';
+
+describe('PropTable/Td', () => {
+  it('renders a td html node child element', () => {
+    const wrapper = shallow(
+      <Td>
+        <div>foo bar</div>
+      </Td>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a monospace td html node child element', () => {
+    const wrapper = shallow(
+      <Td isMonospace>
+        <div>foo bar</div>
+      </Td>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a td html node with multiple children elements', () => {
+    const wrapper = shallow(
+      <Td>
+        <div>foo bar</div>
+        <div>baz</div>
+      </Td>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a monospace td html node with multiple children elements', () => {
+    const wrapper = shallow(
+      <Td isMonospace>
+        <div>foo bar</div>
+        <div>baz</div>
+      </Td>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a td html node with one child node', () => {
+    const wrapper = shallow(<Td>foo bar</Td>);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a monospace td html node with one child node', () => {
+    const wrapper = shallow(<Td isMonospace>foo bar</Td>);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/addons/info/src/components/PropTable/components/Th.js
+++ b/addons/info/src/components/PropTable/components/Th.js
@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Th = ({ children }) => <th>{children}</th>;
+
+Th.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.arrayOf(PropTypes.element),
+  ]).isRequired,
+};
+
+export default Th;
--- a/addons/info/src/components/PropTable/components/Th.test.js
+++ b/addons/info/src/components/PropTable/components/Th.test.js
@ -0,0 +1,26 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Th from './Th';
+
+describe('PropTable/Th', () => {
+  it('renders a th html node with react element children', () => {
+    const wrapper = shallow(
+      <Th>
+        <div>foo bar</div>
+        <div>baz</div>
+      </Th>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a th html node with html node children', () => {
+    const wrapper = shallow(<Th>foo bar baz</Th>);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a th html node with one child node', () => {
+    const wrapper = shallow(<Th>foo bar</Th>);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/addons/info/src/components/PropTable/components/Thead.js
+++ b/addons/info/src/components/PropTable/components/Thead.js
@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Thead = ({ children }) => <thead>{children}</thead>;
+
+Thead.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
+    .isRequired,
+};
+
+export default Thead;
--- a/addons/info/src/components/PropTable/components/Thead.test.js
+++ b/addons/info/src/components/PropTable/components/Thead.test.js
@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Thead from './Thead';
+
+describe('PropTable/Thead', () => {
+  it('renders a thead html node with children', () => {
+    const wrapper = shallow(
+      <Thead>
+        <div>foo bar</div>
+      </Thead>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a thead html node with multiple children elements', () => {
+    const wrapper = shallow(
+      <Thead>
+        <div>foo bar</div>
+        <div>baz</div>
+      </Thead>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/addons/info/src/components/PropTable/components/Tr.js
+++ b/addons/info/src/components/PropTable/components/Tr.js
@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Tr = ({ children }) => <tr>{children}</tr>;
+
+Tr.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Tr;
--- a/addons/info/src/components/PropTable/components/Tr.test.js
+++ b/addons/info/src/components/PropTable/components/Tr.test.js
@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Tr from './Tr';
+import Td from './Td';
+
+describe('PropTable/Tr', () => {
+  it('renders a tr html node with react element children', () => {
+    const wrapper = shallow(
+      <Tr>
+        <Td>foo bar</Td>
+        <Td>baz</Td>
+      </Tr>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a tr html node with html node children', () => {
+    const wrapper = shallow(<Tr>foo bar baz</Tr>);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders a tr html node with one child node', () => {
+    const wrapper = shallow(<Tr>foo bar</Tr>);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/addons/info/src/components/PropTable/components/snapshots/Table.test.js.snap
+++ b/addons/info/src/components/PropTable/components/snapshots/Table.test.js.snap
@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropTable/Table renders a table html node with multiple children elements 1`] = `
+<table
+  className="info-table"
+>
+  <div>
+    foo bar
+  </div>
+  <div>
+    baz
+  </div>
+</table>
+`;
+
+exports[`PropTable/Table renders a table html node with one child element 1`] = `
+<table
+  className="info-table"
+>
+  <div>
+    foo bar
+  </div>
+</table>
+`;
--- a/addons/info/src/components/PropTable/components/snapshots/Tbody.test.js.snap
+++ b/addons/info/src/components/PropTable/components/snapshots/Tbody.test.js.snap
@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropTable/Tbody renders a tbody html node with children 1`] = `
+<tbody>
+  <div>
+    foo bar
+  </div>
+</tbody>
+`;
+
+exports[`PropTable/Tbody renders a tbody html node with multiple children elements 1`] = `
+<tbody>
+  <div>
+    foo bar
+  </div>
+  <div>
+    baz
+  </div>
+</tbody>
+`;
--- a/addons/info/src/components/PropTable/components/snapshots/Td.test.js.snap
+++ b/addons/info/src/components/PropTable/components/snapshots/Td.test.js.snap
@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropTable/Td renders a monospace td html node child element 1`] = `
+<td
+  className="info-table-monospace"
+>
+  <div>
+    foo bar
+  </div>
+</td>
+`;
+
+exports[`PropTable/Td renders a monospace td html node with multiple children elements 1`] = `
+<td
+  className="info-table-monospace"
+>
+  <div>
+    foo bar
+  </div>
+  <div>
+    baz
+  </div>
+</td>
+`;
+
+exports[`PropTable/Td renders a monospace td html node with one child node 1`] = `
+<td
+  className="info-table-monospace"
+>
+  foo bar
+</td>
+`;
+
+exports[`PropTable/Td renders a td html node child element 1`] = `
+<td
+  className={null}
+>
+  <div>
+    foo bar
+  </div>
+</td>
+`;
+
+exports[`PropTable/Td renders a td html node with multiple children elements 1`] = `
+<td
+  className={null}
+>
+  <div>
+    foo bar
+  </div>
+  <div>
+    baz
+  </div>
+</td>
+`;
+
+exports[`PropTable/Td renders a td html node with one child node 1`] = `
+<td
+  className={null}
+>
+  foo bar
+</td>
+`;
--- a/addons/info/src/components/PropTable/components/snapshots/Th.test.js.snap
+++ b/addons/info/src/components/PropTable/components/snapshots/Th.test.js.snap
@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropTable/Th renders a th html node with html node children 1`] = `
+<th>
+  foo bar baz
+</th>
+`;
+
+exports[`PropTable/Th renders a th html node with one child node 1`] = `
+<th>
+  foo bar
+</th>
+`;
+
+exports[`PropTable/Th renders a th html node with react element children 1`] = `
+<th>
+  <div>
+    foo bar
+  </div>
+  <div>
+    baz
+  </div>
+</th>
+`;
--- a/addons/info/src/components/PropTable/components/snapshots/Thead.test.js.snap
+++ b/addons/info/src/components/PropTable/components/snapshots/Thead.test.js.snap
@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropTable/Thead renders a thead html node with children 1`] = `
+<thead>
+  <div>
+    foo bar
+  </div>
+</thead>
+`;
+
+exports[`PropTable/Thead renders a thead html node with multiple children elements 1`] = `
+<thead>
+  <div>
+    foo bar
+  </div>
+  <div>
+    baz
+  </div>
+</thead>
+`;
--- a/addons/info/src/components/PropTable/components/snapshots/Tr.test.js.snap
+++ b/addons/info/src/components/PropTable/components/snapshots/Tr.test.js.snap
@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropTable/Tr renders a tr html node with html node children 1`] = `
+<tr>
+  foo bar baz
+</tr>
+`;
+
+exports[`PropTable/Tr renders a tr html node with one child node 1`] = `
+<tr>
+  foo bar
+</tr>
+`;
+
+exports[`PropTable/Tr renders a tr html node with react element children 1`] = `
+<tr>
+  <Td
+    isMonospace={false}
+  >
+    foo bar
+  </Td>
+  <Td
+    isMonospace={false}
+  >
+    baz
+  </Td>
+</tr>
+`;
--- a/addons/info/src/components/PropTable/index.js
+++ b/addons/info/src/components/PropTable/index.js
@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import PrettyPropType from '../types/PrettyPropType';
+import PropVal from '../PropVal';
+import Table from './components/Table';
+import Tbody from './components/Tbody';
+import Td from './components/Td';
+import Th from './components/Th';
+import Thead from './components/Thead';
+import Tr from './components/Tr';
+
+export const multiLineText = input => {
+  if (!input) {
+    return input;
+  }
+  const text = String(input);
+  const arrayOfText = text.split(/\r?\n|\r/g);
+  const isSingleLine = arrayOfText.length < 2;
+  return isSingleLine
+    ? text
+    : arrayOfText.map((lineOfText, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <span key={`${lineOfText}.${i}`}>
+          {i > 0 && <br />} {lineOfText}
+        </span>
+      ));
+};
+
+const determineIncludedPropTypes = (propDefinitions, excludedPropTypes) => {
+  if (excludedPropTypes.length === 0) {
+    return propDefinitions;
+  }
+
+  return propDefinitions.filter(
+    propDefinition => !excludedPropTypes.includes(propDefinition.property)
+  );
+};
+
+export default function PropTable(props) {
+  const {
+    type,
+    maxPropObjectKeys,
+    maxPropArrayLength,
+    maxPropStringLength,
+    propDefinitions,
+    excludedPropTypes,
+  } = props;
+
+  if (!type) {
+    return null;
+  }
+
+  const includedPropDefinitions = determineIncludedPropTypes(propDefinitions, excludedPropTypes);
+
+  if (!includedPropDefinitions.length) {
+    return <small>No propTypes defined!</small>;
+  }
+
+  const propValProps = {
+    maxPropObjectKeys,
+    maxPropArrayLength,
+    maxPropStringLength,
+  };
+
+  return (
+    <Table>
+      <Thead>
+        <Tr>
+          <Th>property</Th>
+          <Th>propType</Th>
+          <Th>required</Th>
+          <Th>default</Th>
+          <Th>description</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {includedPropDefinitions.map(row => (
+          <Tr key={row.property}>
+            <Td isMonospace>{row.property}</Td>
+            <Td isMonospace>
+              <PrettyPropType propType={row.propType} />
+            </Td>
+            <Td>{row.required ? 'yes' : '-'}</Td>
+            <Td>
+              {row.defaultValue === undefined ? (
+                '-'
+              ) : (
+                <PropVal val={row.defaultValue} {...propValProps} valueStyles={{}} />
+              )}
+            </Td>
+            <Td>{multiLineText(row.description)}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+}
+
+PropTable.displayName = 'PropTable';
+PropTable.defaultProps = {
+  type: null,
+  propDefinitions: [],
+  excludedPropTypes: [],
+};
+PropTable.propTypes = {
+  type: PropTypes.func,
+  maxPropObjectKeys: PropTypes.number.isRequired,
+  maxPropArrayLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired,
+  excludedPropTypes: PropTypes.arrayOf(PropTypes.string),
+  propDefinitions: PropTypes.arrayOf(
+    PropTypes.shape({
+      property: PropTypes.string.isRequired,
+      propType: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+      required: PropTypes.bool,
+      description: PropTypes.string,
+      defaultValue: PropTypes.any,
+    })
+  ),
+};
--- a/addons/info/src/components/PropTable/index.test.js
+++ b/addons/info/src/components/PropTable/index.test.js
@ -0,0 +1,78 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+
+import PropTable, { multiLineText } from './index';
+
+describe('PropTable', () => {
+  describe('multiLineText', () => {
+    const singleLine = 'Foo bar baz';
+    const unixMultiLineText = 'foo \n bar \n baz';
+    const windowsMultiLineText = 'foo \r bar \r baz';
+    const duplicatedMultiLine = 'foo\nfoo\nfoo';
+    const propDefinitions = [
+      {
+        defaultValue: undefined,
+        description: '',
+        propType: { name: 'string' },
+        property: 'foo',
+        required: false,
+      },
+    ];
+    const FooComponent = () => <div />;
+    const propTableProps = {
+      type: FooComponent,
+      maxPropArrayLength: 5,
+      maxPropObjectKeys: 5,
+      maxPropStringLength: 5,
+      propDefinitions,
+    };
+
+    it('should include all propTypes by default', () => {
+      const wrapper = shallow(<PropTable {...propTableProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should exclude excluded propTypes', () => {
+      const props = { ...propTableProps, excludedPropTypes: ['foo'] };
+      const wrapper = shallow(<PropTable {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should return a blank string for a null input', () => {
+      expect(multiLineText(null)).toBe(null);
+    });
+
+    it('should return a blank string for an undefined input', () => {
+      expect(multiLineText(undefined)).toBe(undefined);
+    });
+
+    it('should cast a number to a string', () => {
+      expect(multiLineText(1)).toBe('1');
+    });
+
+    it('should return its input for a single line of text', () => {
+      expect(multiLineText(singleLine)).toBe(singleLine);
+    });
+
+    it('should return an array for unix multiline text', () => {
+      expect(multiLineText(unixMultiLineText)).toHaveLength(3);
+    });
+
+    it('should return an array for windows multiline text', () => {
+      expect(multiLineText(windowsMultiLineText)).toHaveLength(3);
+    });
+
+    it('should return an array with unique keys for duplicated multiline text', () => {
+      const wrappers = multiLineText(duplicatedMultiLine).map(tag => shallow(tag));
+      const keys = wrappers.map(wrapper => wrapper.key());
+      const deDup = new Set(keys);
+      expect(keys).toHaveLength(deDup.size);
+    });
+
+    it('should have 2 br tags for 3 lines of text', () => {
+      const tree = renderer.create(multiLineText(unixMultiLineText)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});
--- a/addons/info/src/components/PropTable/style.css
+++ b/addons/info/src/components/PropTable/style.css
@ -0,0 +1,19 @@
+.info-table {
+  width: 100%;
+}
+
+.info-table, .info-table td, .info-table th {
+  border-collapse: collapse;
+  border: 1px solid #cccccc;
+  color: #444444;
+  margin-top: 0.25rem;
+  padding-right: 0.5rem;
+  padding: 0.25rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.info-table-monospace {
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-size: 0.88em;
+}
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@ -5,7 +5,6 @@ import { isForwardRef } from 'react-is';
 import { polyfill } from 'react-lifecycles-compat';
 import PropTypes from 'prop-types';
 import global from 'global';
-import { baseFonts } from '@storybook/theming/dist/base';

 import marksy from 'marksy';
 import Node from './Node';
@ -51,7 +50,6 @@ const stylesheetBase = {
    zIndex: 0,
  },
  infoBody: {
-    ...baseFonts,
    fontWeight: 300,
    lineHeight: 1.45,
    fontSize: '15px',
@ -266,11 +264,11 @@ class Story extends Component {

  _getComponentDescription() {
    const {
-      context: { kind, story },
+      context: { kind, name },
    } = this.props;
    let retDiv = null;

-    const validMatches = [kind, story];
+    const validMatches = [kind, name];

    if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
      Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
--- a/addons/info/src/components/markdown/htags.js
+++ b/addons/info/src/components/markdown/htags.js
@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { baseFonts } from '@storybook/theming/dist/base';

 const defaultProps = {
  children: null,
@ -13,7 +12,6 @@ const propTypes = {

 export function H1({ id, children }) {
  const styles = {
-    ...baseFonts,
    borderBottom: '1px solid #eee',
    fontWeight: 600,
    margin: 0,
@ -32,7 +30,6 @@ H1.propTypes = propTypes;

 export function H2({ id, children }) {
  const styles = {
-    ...baseFonts,
    fontWeight: 600,
    margin: 0,
    padding: 0,
@ -50,7 +47,6 @@ H2.propTypes = propTypes;

 export function H3({ id, children }) {
  const styles = {
-    ...baseFonts,
    fontWeight: 600,
    margin: 0,
    padding: 0,
@ -69,7 +65,6 @@ H3.propTypes = propTypes;

 export function H4({ id, children }) {
  const styles = {
-    ...baseFonts,
    fontWeight: 600,
    margin: 0,
    padding: 0,
@ -87,7 +82,6 @@ H4.propTypes = propTypes;

 export function H5({ id, children }) {
  const styles = {
-    ...baseFonts,
    fontWeight: 600,
    margin: 0,
    padding: 0,
@ -105,7 +99,6 @@ H5.propTypes = propTypes;

 export function H6({ id, children }) {
  const styles = {
-    ...baseFonts,
    fontWeight: 400,
    margin: 0,
    padding: 0,
--- a/addons/info/src/components/markdown/text.js
+++ b/addons/info/src/components/markdown/text.js
@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { baseFonts } from '@storybook/theming/dist/base';

 const defaultProps = { children: null };
 const propTypes = { children: PropTypes.node };

 export function P({ children }) {
  const style = {
-    ...baseFonts,
    fontSize: '15px',
  };

@ -23,7 +21,6 @@ P.propTypes = propTypes;

 export function LI({ children }) {
  const style = {
-    ...baseFonts,
    fontSize: '15px',
  };
  return <li style={style}>{children}</li>;
@ -34,7 +31,6 @@ LI.propTypes = propTypes;

 export function UL({ children }) {
  const style = {
-    ...baseFonts,
    fontSize: '15px',
  };
  return <ul style={style}>{children}</ul>;
--- a/addons/info/src/index.js
+++ b/addons/info/src/index.js
@ -4,7 +4,7 @@ import deprecate from 'util-deprecate';
 import { makeDecorator } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
 import Story from './components/Story';
-import PropTable from './components/PropTable';
+import PropTable from './components/PropTable/index';
 import makeTableComponent from './components/makeTableComponent';
 import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';

--- a/addons/info/src/index.test.js
+++ b/addons/info/src/index.test.js
@ -20,7 +20,8 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
      <li>1</li>
      <li>2</li>
    </ul>
-  </div>);
+  </div>
+);
 /* eslint-enable */

 const reactClassPath = 'some/path/TestComponent.jsx';
@ -31,7 +32,7 @@ const storybookReactClassMock = {
    description: `
 # Awesome test component description
 ## with markdown support
-**bold** *cursive* 
+**bold** *cursive*
    `,
    name: 'TestComponent',
  },
@ -45,9 +46,9 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)`;

 describe('addon Info', () => {
  // eslint-disable-next-line react/prop-types
-  const storyFn = ({ story }) => (
+  const storyFn = ({ name }) => (
    <div>
-      It's a {story} story:
+      It's a {name} story:
      <TestComponent
        func={x => x + 1}
        obj={{ a: 'a', b: 'b' }}
@ -85,7 +86,7 @@ describe('addon Info', () => {
    const Info = () =>
      withInfo({ inline: true, propTables: false })(storyFn, {
        kind: 'TestComponent',
-        story: 'Basic test',
+        name: 'Basic test',
      });

    expect(mount(<Info />)).toMatchSnapshot();
@ -100,7 +101,7 @@ describe('addon Info', () => {
    const Info = () =>
      withInfo({ inline: true, propTables: false })(storyFn, {
        kind: 'Test Components',
-        story: 'TestComponent',
+        name: 'TestComponent',
      });

    expect(mount(<Info />)).toMatchSnapshot();
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -17,7 +17,8 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "addons/jest"
  },
  "license": "MIT",
  "author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
@ -27,14 +28,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.0.0-beta.1",
-    "@storybook/components": "5.0.0-beta.1",
-    "@storybook/core-events": "5.0.0-beta.1",
-    "@storybook/theming": "5.0.0-beta.1",
+    "@storybook/addons": "5.0.0-beta.3",
+    "@storybook/core-events": "5.0.0-beta.3",
+    "@storybook/theming": "5.0.0-beta.3",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
    "prop-types": "^15.6.2",
-    "react": "^16.8.1",
+    "react": "^16.8.2",
    "upath": "^1.1.0",
    "util-deprecate": "^1.0.2"
  },
--- a/addons/jest/src/components/Result.js
+++ b/addons/jest/src/components/Result.js
@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { styled, monoFonts } from '@storybook/theming';
+import { styled } from '@storybook/theming';

 import Indicator from './Indicator';
 import colors from '../colors';

 const Pre = styled.pre({
  margin: 0,
-  ...monoFonts,
 });

 const FlexContainer = styled.div({
--- a/addons/jest/src/index.js
+++ b/addons/jest/src/index.js
@ -1,6 +1,7 @@
 import addons from '@storybook/addons';
 import deprecate from 'util-deprecate';
 import { normalize } from 'upath';
+import { ADD_TESTS } from './shared';

 const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
  Object.values(testFiles).map(name => {
@ -22,7 +23,7 @@ const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
  });

 const emitAddTests = ({ kind, story, testFiles, options }) => {
-  addons.getChannel().emit('storybook/tests/add_tests', {
+  addons.getChannel().emit(ADD_TESTS, {
    kind,
    storyName: story,
    tests: findTestResults(testFiles, options.results, options.filesExt),
@ -37,14 +38,14 @@ export const withTests = userOptions => {

  return (...args) => {
    if (typeof args[0] === 'string') {
-      return deprecate((story, { kind }) => {
-        emitAddTests({ kind, story, testFiles: args, options });
+      return deprecate((storyFn, { kind }) => {
+        emitAddTests({ kind, story: storyFn, testFiles: args, options });

-        return story();
+        return storyFn();
      }, 'Passing component filenames to the `@storybook/addon-jest` via `withTests` is deprecated. Instead, use the `jest` story parameter');
    }

-    const [story, { kind, parameters = {} }] = args;
+    const [storyFn, { kind, parameters = {} }] = args;
    let { jest: testFiles } = parameters;

    if (typeof testFiles === 'string') {
@ -52,10 +53,10 @@ export const withTests = userOptions => {
    }

    if (testFiles && !testFiles.disable) {
-      emitAddTests({ kind, story, testFiles, options });
+      emitAddTests({ kind, story: storyFn, testFiles, options });
    }

-    return story();
+    return storyFn();
  };
 };

--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export type DecoratorFunction = (args: any[]) => any[];`
				`@ -0,0 +1 @@`
				`export type HandlerFunction = (...args: any[]) => void;`