Merge branch 'next-6.0.0' into ts-migration/polymer

# Conflicts: # app/polymer/package.json # lib/ui/src/components/sidebar/SidebarHeading.tsx
2025-04-09 00:19:13 +08:00 · 2019-12-21 00:57:21 +01:00 · 2019-12-21 00:57:21 +01:00 · 754579aac7
commit 754579aac7
parent c38000eaee fe8252113b
439 changed files with 6580 additions and 3817 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -51,7 +51,55 @@ jobs:
          command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p"
      - run:
          name: Run chromatic on the pre-built angular example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --exit-zero-on-changes --app-code="tl92yzsj6w"
+          command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --app-code="tl92yzsj6w"
+      - run:
+          name: Run chromatic on the pre-built cra-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-kitchen-sink" --app-code="tg55gajmdt"
+      - run:
+          name: Run chromatic on the pre-built cra-react15 example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-react15" --app-code="gxk7iqej3wt"
+      - run:
+          name: Run chromatic on the pre-built cra-ts-essentials example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-essentials" --app-code="b311ypk6of"
+      - run:
+          name: Run chromatic on the pre-built cra-ts-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-kitchen-sink" --app-code="19whyj1tlac"
+      - run:
+          name: Run chromatic on the pre-built dev-kits example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/dev-kits" --app-code="7yykp9ifdxx"
+      - run:
+          name: Run chromatic on the pre-built ember-cli example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/ember-cli" --app-code="19z23qxndju"
+      - run:
+          name: Run chromatic on the pre-built html-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/html-kitchen-sink" --app-code="e8zolxoyg8o"
+      - run:
+          name: Run chromatic on the pre-built marko-cli example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/marko-cli" --app-code="qaegx64axu"
+      - run:
+          name: Run chromatic on the pre-built mithril-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8"
+      - run:
+          name: Run chromatic on the pre-built polymer-cli example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/polymer-cli" --app-code="o6jl9kmh0qd"
+      - run:
+          name: Run chromatic on the pre-built preact-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt"
+      - run:
+          name: Run chromatic on the pre-built rax-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/rax-kitchen-sink" --app-code="4co6vptx8qo"
+      - run:
+          name: Run chromatic on the pre-built riot-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/riot-kitchen-sink" --app-code="g2dp3lnr34a"
+      - run:
+          name: Run chromatic on the pre-built svelte-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/svelte-kitchen-sink" --app-code="8ob73wgl995"
+      - run:
+          name: Run chromatic on the pre-built vue-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/vue-kitchen-sink" --app-code="cyxj0e38bqj"
+      - run:
+          name: Run chromatic on the pre-built web-components-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/web-components-kitchen-sink" --app-code="npm5gsofwkf"

  packtracker:
    <<: *defaults
--- a/.eslintignore
+++ b/.eslintignore
@ -15,8 +15,9 @@ scripts/storage
 examples/ember-cli/.storybook/preview-head.html
 examples/official-storybook/tests/addon-jest.test.js
 examples/cra-ts-kitchen-sink/*.json
-examples/cra-ts-kitchen-sink/public/*.json
-examples/cra-ts-kitchen-sink/public/*.html
+examples/cra-ts-kitchen-sink/public/*
+examples/cra-ts-essentials/*.json
+examples/cra-ts-essentials/public/*

 !.remarkrc.js
 !.babelrc.js
--- a/.github/automention.yml
+++ b/.github/automention.yml
@ -7,7 +7,7 @@
 'app: react-native': ['benoitdion', 'gongreg']
 'app: react-native-server': ['benoitdion', 'gongreg']
 'app: svelte': ['rixo', 'cam-stitt', 'plumpNation']
-'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool']
+'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool', 'pocka']
 'app: web-components': ['daKmoR']
 'api: addons': ['ndelangen']
 'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
--- a/.github/workflows/tests-puppeteer.yml
+++ b/.github/workflows/tests-puppeteer.yml
@ -0,0 +1,32 @@
+name: Puppeteer & A11y tests
+
+on: [push]
+
+jobs:
+  build:
+
+    name: Puppeteer & A11y tests
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '10.x'
+    - uses: actions/checkout@v1
+    - name: Cache node modules
+      uses: actions/cache@v1
+      with:
+        path: node_modules
+        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.OS }}-build-${{ env.cache-name }}-
+          ${{ runner.OS }}-build-
+          ${{ runner.OS }}-
+    - name: install, bootstrap
+      run: |
+        yarn bootstrap --core
+    - name: build storybook
+      run: |
+        yarn --cwd examples/official-storybook build-storybook
+    - name: test
+      run: |
+        yarn test --puppeteer
--- a/ADDONS_SUPPORT.md
+++ b/ADDONS_SUPPORT.md
@ -12,7 +12,7 @@
 |[graphql](addons/graphql)                   |+| | | | | | | | | | | |
 |[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+|
 |[info](addons/info)                         |+| | | | | | | | | | | |
-|[jest](addons/jest)                         |+| | |+| | |+| | | | | |
+|[jest](addons/jest)                         |+|+|+|+|+|+|+|+|+|+|+|+|
 |[knobs](addons/knobs)                       |+|+*|+|+|+|+|+|+|+|+|+|+|
 |[links](addons/links)                       |+|+|+|+|+|+|+| |+|+|+|+|
 |[notes](addons/notes)                       |+|+*|+|+|+|+|+| |+|+|+|+|
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,225 @@
+## 5.3.0-rc.0 (December 19, 2019)
+
+### Features
+
+* CSF: Use `__orderedExports` in loader if provided  ([#9181](https://github.com/storybookjs/storybook/pull/9181))
+
+### Bug Fixes
+
+* Addon-a11y: Fix selected blindness color filter ([#9179](https://github.com/storybookjs/storybook/pull/9179))
+
+### Maintenance
+
+* Addon-essentials: Remove actions, links, knobs ([#9184](https://github.com/storybookjs/storybook/pull/9184))
+
+## 5.3.0-beta.31 (December 16, 2019)
+
+### Features
+
+* React: Add support for CRA without overrides ([#9157](https://github.com/storybookjs/storybook/pull/9157))
+* Addon-docs: Add fontFamily prop to Typeset component ([#9158](https://github.com/storybookjs/storybook/pull/9158))
+
+### Bug Fixes
+
+* Core: Emit store render event synchronously if we can ([#9087](https://github.com/storybookjs/storybook/pull/9087))
+
+## 5.3.0-beta.30 (December 16, 2019)
+
+Failed NPM publish
+
+## 5.3.0-beta.29 (December 16, 2019)
+
+Failed NPM publish
+
+## 5.3.0-beta.28 (December 16, 2019)
+
+Failed NPM publish
+
+## 5.3.0-beta.27 (December 16, 2019)
+
+Failed NPM publish
+
+## 5.3.0-beta.26 (December 16, 2019)
+
+Failed NPM publish
+
+## 5.3.0-beta.25 (December 15, 2019)
+
+### Bug Fixes
+
+* Addon-docs: Hide addons on  docs-only stories ([#9125](https://github.com/storybookjs/storybook/pull/9125))
+
+### Dependency Upgrades
+
+* Upgrade vue-docgen-loader to 1.3.0-beta.0 ([#9155](https://github.com/storybookjs/storybook/pull/9155))
+
+## 5.3.0-beta.24 (December 15, 2019)
+
+Failed NPM publish
+
+## 5.3.0-beta.23 (December 14, 2019)
+
+### Features
+
+* Addon-docs: Render components as leaves in `--docs` mode ([#7700](https://github.com/storybookjs/storybook/pull/7700))
+
+### Bug Fixes
+
+* Addon-viewport: Allow viewports config to be optional ([#9137](https://github.com/storybookjs/storybook/pull/9137))
+
+## 5.3.0-beta.22 (December 12, 2019)
+
+### Bug Fixes
+
+* React: Fix CRA preset check ([#9142](https://github.com/storybookjs/storybook/pull/9142))
+
+### Maintenance
+
+* Build: Change CI to chromatic on all examples ([#9114](https://github.com/storybookjs/storybook/pull/9114))
+* Web-components: Clean up example `custom-elements.json` and expose `defaultValue` ([#9107](https://github.com/storybookjs/storybook/pull/9107))
+
+### Dependency Upgrades
+
+* Restore main jscodeshift package ([#9140](https://github.com/storybookjs/storybook/pull/9140))
+
+## 5.3.0-beta.21 (December 11, 2019)
+
+### Features
+
+* CLI: Add Yarn workspaces support for init command ([#9104](https://github.com/storybookjs/storybook/pull/9104))
+
+### Bug Fixes
+
+* Addon-docs: Update MDX compiler to fix knobs ([#9118](https://github.com/storybookjs/storybook/pull/9118))
+* CLI: Add web-components to sb init ([#9106](https://github.com/storybookjs/storybook/pull/9106))
+
+### Maintenance
+
+* UI: Remove css usage ([#9003](https://github.com/storybookjs/storybook/pull/9003))
+
+## 5.3.0-beta.20 (December 9, 2019)
+
+### Features
+
+* Addon-essentials: Remove docs from essentials ([#9093](https://github.com/storybookjs/storybook/pull/9093))
+
+### Bug Fixes
+
+* Source-loader: Handle includeStories/excludeStories in CSF ([#9100](https://github.com/storybookjs/storybook/pull/9100))
+* Source-loader: Support function declaration story exports ([#9092](https://github.com/storybookjs/storybook/pull/9092))
+
+### Maintenance
+
+* CSF: Refactor router utils into CSF library ([#9099](https://github.com/storybookjs/storybook/pull/9099))
+
+## 5.3.0-beta.19 (December 7, 2019)
+
+### Features
+
+* Addon-essentials ([#9019](https://github.com/storybookjs/storybook/pull/9019))
+
+### Bug Fixes
+
+* Addon-docs: Fix prop table default value for web-components ([#9086](https://github.com/storybookjs/storybook/pull/9086))
+
+## 5.3.0-beta.18 (December 6, 2019)
+
+### Features
+
+* CLI: Change generators to Triconfig ([#9075](https://github.com/storybookjs/storybook/pull/9075))
+* Addon-docs: Add Props for Ember ([#9067](https://github.com/storybookjs/storybook/pull/9067))
+* MDX: Handle quotes / template literals in title ([#9069](https://github.com/storybookjs/storybook/pull/9069))
+
+### Bug Fixes
+
+* Addon-docs: MDX Octicon anchors should not be tabbable ([#9063](https://github.com/storybookjs/storybook/pull/9063))
+
+### Dependency Upgrades
+
+* Addon-docs: Upgrade vue-docgen-loader ([#9082](https://github.com/storybookjs/storybook/pull/9082))
+
+## 5.3.0-beta.17 (December 6, 2019)
+
+NPM publish failed
+
+## 5.3.0-beta.16 (December 5, 2019)
+
+### Features
+
+* Addon-docs: DocsPage Heading and Subheading anchor links ([#9060](https://github.com/storybookjs/storybook/pull/9060))
+
+### Bug Fixes
+
+* Core: Fix `api.selectStory` for component permalinks ([#9054](https://github.com/storybookjs/storybook/pull/9054))
+* Storyshots: Escape Windows fileNames ([#9061](https://github.com/storybookjs/storybook/pull/9061))
+
+### Dependency Upgrades
+
+* Addon-docs: Upgrade vue-docgen-api ([#9066](https://github.com/storybookjs/storybook/pull/9066))
+
+## 5.3.0-beta.15 (December 4, 2019)
+
+### Features
+
+* Addon-docs: MDX Linking ([#9051](https://github.com/storybookjs/storybook/pull/9051))
+
+## 5.2.8 (December 2, 2019)
+
+### Bug Fixes
+
+* UI: Fix layout of Preview container ([#8628](https://github.com/storybookjs/storybook/pull/8628))
+* Core: Use `stable` package to ensure story sorting is stable ([#8795](https://github.com/storybookjs/storybook/pull/8795))
+* Source-loader: Warn if applied to non-stories file ([#8773](https://github.com/storybookjs/storybook/pull/8773))
+
+## 5.3.0-beta.14 (December 2, 2019)
+
+### Features
+
+* Addon-docs: Increase Props summary and func length ([#8998](https://github.com/storybookjs/storybook/pull/8998))
+
+### Bug Fixes
+
+* Addon-docs: Restore IE11 compat by transpiling acorn-jsx ([#9021](https://github.com/storybookjs/storybook/pull/9021))
+* Source-loader: Handle template strings in CSF title ([#8995](https://github.com/storybookjs/storybook/pull/8995))
+* CLI: Fix various storiesof-to-csf cases based on chromatic stories upgrade ([#9013](https://github.com/storybookjs/storybook/pull/9013))
+
+## 5.2.7 (November 30, 2019)
+
+### Bug Fixes
+
+* Addon-contexts: Fix 'cannot read property h of undefined' in preact ([#9001](https://github.com/storybookjs/storybook/pull/9001))
+* Addon-viewports: Fix missing TypeScript types ([#8848](https://github.com/storybookjs/storybook/pull/8848))
+* Addon-A11y: Show errors, reset config properly ([#8779](https://github.com/storybookjs/storybook/pull/8779))
+* UI: Store layout state in sessionStorage ([#8786](https://github.com/storybookjs/storybook/pull/8786))
+* UI: Fix MobileLayout component error on master ([#8941](https://github.com/storybookjs/storybook/pull/8941))
+* Addon-analytics: Fix 'path is required in .pageview()' ([#8468](https://github.com/storybookjs/storybook/pull/8468))
+
+## 5.3.0-beta.13 (November 30, 2019)
+
+### Bug Fixes
+
+* Addon-contexts: Fix 'cannot read property h of undefined' in preact ([#9001](https://github.com/storybookjs/storybook/pull/9001))
+
+### Maintenance
+
+* CLI: Code cleanup ([#9004](https://github.com/storybookjs/storybook/pull/9004))
+
+## 5.3.0-beta.12 (November 29, 2019)
+
+### Features
+
+* Storyshots: Support a11y tests, generic tests ([#8934](https://github.com/storybookjs/storybook/pull/8934))
+
+### Maintenance
+
+* Dev: Add vscode launch.json for debugging ([#8993](https://github.com/storybookjs/storybook/pull/8993))
+* UI: viewMode proptypes changed to any string ([#8994](https://github.com/storybookjs/storybook/pull/8994))
+* Addon-docs: Remove deprecated framework-specific docs presets ([#8985](https://github.com/storybookjs/storybook/pull/8985))
+
+### Dependency Upgrades
+
+* Addon-docs: Upgrade MDX dependencies ([#8991](https://github.com/storybookjs/storybook/pull/8991))
+
 ## 5.3.0-beta.11 (November 28, 2019)

 ### Features
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -2,6 +2,7 @@

 - [Migration](#migration)
  - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
+    - [To tri-config configuration](#to-triconfig-configuration)
    - [Create React App preset](#create-react-app-preset)
    - [Description doc block](#description-doc-block)
    - [React Native Async Storage](#react-native-async-storage)
@ -74,8 +75,76 @@
    - [Packages renaming](#packages-renaming)
    - [Deprecated embedded addons](#deprecated-embedded-addons)

+
 ## From version 5.2.x to 5.3.x

+### To tri-config configuration
+
+In storybook 5.3 3 new files for configuration were introduced, that replaced some previous files.
+
+These files are now soft-deprecated, (*they still work, but over time we will promote users to migrate*):
+
+- `config.js` has been renamed to `preview.js`.
+- `addons.js` has been renamed to `manager.js`.
+- `presets.js` has been renamed to `main.js`.
+
+#### Using main.js
+
+`main.js` is now the main point of configuration for Storybook. This is what a basic `main.js` looks like:
+
+```js
+module.exports = {
+  stories: ['../**/*.stories.js'],
+  addons: [
+    '@storybook/addon-docs/register',
+  ],
+};
+```
+
+You remove all "register" import from `addons.js` and place them inside the array. If this means `addons.js` is now empty for you, it's safe to remove.
+
+Next you remove the code that imports/requires all your stories from `config.js`, and change it to a glob-pattern and place that glob in the `stories` array. If this means `config.js` is empty, it's safe to remove.
+
+If you had a `presets.js` file before you can add the array of presets to the main.js file and remove `presets.js` like so:
+
+```js
+module.exports = {
+  stories: ['../**/*.stories.js'],
+  presets: ['@storybook/addon-docs/preset'],
+};
+```
+
+#### Using preview.js
+
+If after migrating the imports/requires of your stories to `main.js` you're left with some code in `config.js` it's likely the usage of `addParameters` & `addDecorator`.
+
+This is fine, rename `config.js` to `preview.js`.
+
+This file can also be used to inject global stylesheets, fonts etc, into the preview bundle.
+
+#### Using manager.js
+
+If you are setting storybook options in `config.js`, especially `theme`, you should migrate it to `manager.js`:
+
+```js
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'My custom title',
+});
+
+addons.setConfig({
+  showRoots: true,
+  panelPosition: 'bottom',
+  theme,
+});
+```
+
+This makes storybook load and use the theme in the manager directly. 
+This allows for richer theming in the future, and has a much better performance!
+
 ### Create React App preset

 You can now move to the new preset for [Create React App](https://create-react-app.dev/). The in-built preset for Create React App will be disabled in Storybook 6.0.
@ -187,7 +256,7 @@ For example, here's how to sort by story ID using `storySort`:
 addParameters({
  options: {
    storySort: (a, b) =>
-      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
+      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
 });
 ```
--- a/mocks/inject-decorator.ts.csf.txt
+++ b/mocks/inject-decorator.ts.csf.txt
@ -3,7 +3,9 @@ import { action } from "@storybook/addon-actions";
 import { Button } from "@storybook/react/demo";

 export default {
-  title: "Button"
+  title: "Button",
+  excludeStories: ["text"],
+  includeStories: /emoji.*/
 };

 export const text = () => (
@ -17,3 +19,13 @@ export const emoji = () => (
    </span>
  </Button>
 );
+
+export function emojiFn() {
+  return (
+    <Button onClick={action("clicked")}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  )
+};
--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@ -47,6 +47,8 @@ export const inaccessible = () => (
 );
 ```

+## Parameters
+
 For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
 You can override these options [at story level too](https://storybook.js.org/docs/configurations/options-parameter/#per-story-options).

--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "a11y addon for storybook",
  "keywords": [
    "a11y",
@ -33,12 +33,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/client-logger": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/client-logger": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "axe-core": "^3.3.2",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
@ -55,5 +55,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/a11y/src/components/A11YPanel.tsx
+++ b/addons/a11y/src/components/A11YPanel.tsx
@ -22,9 +22,9 @@ export enum RuleType {

 const Icon = styled(Icons)(
  {
-    height: '12px',
-    width: '12px',
-    marginRight: '4px',
+    height: 12,
+    width: 12,
+    marginRight: 4,
  },
  ({ status, theme }: any) =>
    status === 'running'
--- a/addons/a11y/src/components/ColorBlindness.tsx
+++ b/addons/a11y/src/components/ColorBlindness.tsx
@ -87,9 +87,7 @@ export const ColorBlindness: FunctionComponent = () => {

    if (iframe) {
      iframe.style.filter = getFilter(activeState);
-      setActiveState({
-        active: activeState,
-      });
+      setActiveState(activeState);
    } else {
      logger.error('Cannot find Storybook iframe');
    }
--- a/addons/a11y/src/components/Report/Elements.tsx
+++ b/addons/a11y/src/components/Report/Elements.tsx
@ -15,15 +15,15 @@ const ItemTitle = styled.span<{}>(({ theme }) => ({
  borderBottom: `1px solid ${theme.appBorderColor}`,
  width: '100%',
  display: 'flex',
-  paddingBottom: '6px',
-  marginBottom: '6px',
+  paddingBottom: 6,
+  marginBottom: 6,
  justifyContent: 'space-between',
 }));

 const HighlightToggleElement = styled.span({
  fontWeight: 'normal',
  alignSelf: 'center',
-  paddingRight: '15px',
+  paddingRight: 15,
  input: { margin: 0 },
 });

--- a/addons/a11y/src/components/Report/Info.tsx
+++ b/addons/a11y/src/components/Report/Info.tsx
@ -4,14 +4,14 @@ import { styled } from '@storybook/theming';
 import { Result } from 'axe-core';

 const Wrapper = styled.div({
-  padding: '12px',
-  marginBottom: '10px',
+  padding: 12,
+  marginBottom: 10,
 });
 const Help = styled.p({
  margin: '0 0 12px',
 });
 const Link = styled.a({
-  marginTop: '12px',
+  marginTop: 12,
  textDecoration: 'underline',
  color: 'inherit',
  display: 'block',
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@ -24,7 +24,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
  width: 10,
  minWidth: 10,
  color: theme.color.mediumdark,
-  marginRight: '10px',
+  marginRight: 10,
  transition: 'transform 0.1s ease-in-out',
  alignSelf: 'center',
  display: 'inline-flex',
@ -49,7 +49,7 @@ const HeaderBar = styled.div<{}>(({ theme }) => ({
 const HighlightToggleElement = styled.span({
  fontWeight: 'normal',
  float: 'right',
-  marginRight: '15px',
+  marginRight: 15,
  alignSelf: 'center',
  input: { margin: 0 },
 });
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/addons/a11y/src/components/Report/Rules.tsx
@ -16,9 +16,9 @@ const impactColors = {
 const List = styled.div({
  display: 'flex',
  flexDirection: 'column',
-  paddingBottom: '4px',
-  paddingRight: '4px',
-  paddingTop: '4px',
+  paddingBottom: 4,
+  paddingRight: 4,
+  paddingTop: 4,
  fontWeight: '400',
 } as any);

@ -26,23 +26,23 @@ const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
  const maxWidthBeforeBreak = 407;
  return {
    flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',
-    marginBottom: elementWidth > maxWidthBeforeBreak ? '6px' : '12px',
+    marginBottom: elementWidth > maxWidthBeforeBreak ? 6 : 12,
    display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
  };
 });

 const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({
  padding: '2px 8px',
-  marginBottom: '3px',
-  minWidth: '65px',
+  marginBottom: 3,
+  minWidth: 65,
  maxWidth: 'fit-content',
  width: '100%',
  textAlign: 'center',
 }));

 const Message = styled.div({
-  paddingLeft: '6px',
-  paddingRight: '23px',
+  paddingLeft: 6,
+  paddingRight: 23,
 });

 const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
@ -51,8 +51,8 @@ const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string
  alignItems: 'center',
  color: passes ? impactColors.success : (impactColors as any)[impact],
  '& > svg': {
-    height: '16px',
-    width: '16px',
+    height: 16,
+    width: 16,
  },
 }));

--- a/addons/a11y/src/components/Report/Tags.tsx
+++ b/addons/a11y/src/components/Report/Tags.tsx
@ -11,7 +11,7 @@ const Wrapper = styled.div({

 const Item = styled.div<{}>(({ theme }) => ({
  margin: '0 6px',
-  padding: '5px',
+  padding: 5,
  border: `1px solid ${theme.appBorderColor}`,
  borderRadius: theme.appBorderRadius,
 }));
--- a/addons/a11y/src/components/Tabs.tsx
+++ b/addons/a11y/src/components/Tabs.tsx
@ -18,8 +18,8 @@ const Container = styled.div({
 const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
  cursor: 'pointer',
  userSelect: 'none',
-  marginBottom: '3px',
-  marginRight: '3px',
+  marginBottom: 3,
+  marginRight: 3,
  color: theme.color.dark,
 }));

@ -31,7 +31,7 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
    padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px',
    height: '40px',
    border: 'none',
-    marginTop: elementWidth > maxWidthBeforeBreak ? '-40px' : '0px',
+    marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
    float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
    display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
    alignItems: 'center',
@ -39,10 +39,10 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
    borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',

    input: {
-      marginLeft: '10',
-      marginRight: '0',
-      marginTop: '0',
-      marginBottom: '0',
+      marginLeft: 10,
+      marginRight: 0,
+      marginTop: 0,
+      marginBottom: 0,
    },
  };
 });
--- a/addons/a11y/src/components/snapshots/A11YPanel.test.js.snap
+++ b/addons/a11y/src/components/snapshots/A11YPanel.test.js.snap
@ -229,7 +229,6 @@ exports[`A11YPanel should render report 1`] = `
                "15paq49": true,
                "1977chw": true,
                "19mcg9j": true,
-                "1ez3l8h": true,
                "1imo1gr": true,
                "1kbt4a0": true,
                "1l7fvsg": true,
@ -239,6 +238,7 @@ exports[`A11YPanel should render report 1`] = `
                "6z0ulf": true,
                "animation-u07e3c": true,
                "aq4p19": true,
+                "f68qle": true,
                "fg630j": true,
                "iau1th": true,
                "jb2puo": true,
@ -620,13 +620,13 @@ exports[`A11YPanel should render report 1`] = `
                    data-emotion="css"
                  >
                    
-                    .css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                  </style>
                  <style
                    data-emotion="css"
                  >
                    
-                    .css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
+                    .css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
                  </style>
                  <style
                    data-emotion="css"
@ -846,13 +846,13 @@ exports[`A11YPanel should render report 1`] = `
                    data-emotion="css"
                  >
                    
-                    .css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                  </style>,
                  <style
                    data-emotion="css"
                  >
                    
-                    .css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
+                    .css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
                  </style>,
                  <style
                    data-emotion="css"
@ -952,6 +952,11 @@ exports[`A11YPanel should render report 1`] = `
        >
          <l
            className="emotion-0"
+            scrollableNodeProps={
+              Object {
+                "tabIndex": 0,
+              }
+            }
          >
            <div
              className="emotion-0"
@ -975,6 +980,7 @@ exports[`A11YPanel should render report 1`] = `
                  >
                    <div
                      className="simplebar-content-wrapper"
+                      tabIndex={0}
                    >
                      <div
                        className="simplebar-content"
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Action Logger addon for storybook",
  "keywords": [
    "storybook"
@ -28,12 +28,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/client-api": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/client-api": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "fast-deep-equal": "^2.0.1",
    "global": "^4.3.2",
@ -49,5 +49,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/actions/src/components/ActionLogger/style.tsx
+++ b/addons/actions/src/components/ActionLogger/style.tsx
@ -3,7 +3,7 @@ import { opacify } from 'polished';

 export const Action = styled.div({
  display: 'flex',
-  padding: '0',
+  padding: 0,
  borderLeft: '5px solid transparent',
  borderBottom: '1px solid transparent',
  transition: 'all 0.1s',
@ -17,7 +17,7 @@ export const Counter = styled.div<{}>(({ theme }) => ({
  fontWeight: theme.typography.weight.bold,
  lineHeight: 1,
  padding: '1px 5px',
-  borderRadius: '20px',
+  borderRadius: 20,
  margin: '2px 0px',
 }));

--- a/addons/backgrounds/README.md
+++ b/addons/backgrounds/README.md
@ -73,7 +73,7 @@ export const defaultView = () => (
 );
 defaultView.story = {
  parameters: {
-    background: [
+    backgrounds: [
      { name: 'red', value: 'rgba(255, 0, 0)' },
    ],
  },
@ -94,7 +94,7 @@ export const noBackgrounds = () => (
 );
 noBackgrounds.story = {
  parameters: {
-    background: [],
+    backgrounds: [],
  },
 };

@ -103,7 +103,7 @@ export const disabledBackgrounds = () => (
 );
 disabledBackgrounds.story = {
  parameters: {
-    background: { disabled: true },
+    backgrounds: { disabled: true },
  },
 };
 ```
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "A storybook addon to show different backgrounds for your preview",
  "keywords": [
    "addon",
@ -32,12 +32,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/client-logger": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/client-logger": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "memoizerific": "^1.11.3",
    "react": "^16.8.3",
@ -48,5 +48,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-centered",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Storybook decorator to center components",
  "keywords": [
    "addon",
@ -29,7 +29,7 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "util-deprecate": "^1.0.2"
@ -39,5 +39,6 @@
    "mithril": "*",
    "preact": "*",
    "react": "*"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-contexts",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Storybook Addon Contexts",
  "keywords": [
    "preact",
@ -27,10 +27,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "qs": "^6.6.0"
@ -44,5 +44,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/contexts/src/preview/frameworks/preact.ts
+++ b/addons/contexts/src/preview/frameworks/preact.ts
@ -1,4 +1,4 @@
-import Preact from 'preact';
+import { h, VNode } from 'preact';
 import { createAddonDecorator, Render } from '../../index';
 import { ContextsPreviewAPI } from '../ContextsPreviewAPI';

@ -6,9 +6,9 @@ import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
 * This is the framework specific bindings for Preact.
 * '@storybook/preact' expects the returning object from a decorator to be a 'Preact vNode'.
 */
-export const renderPreact: Render<Preact.VNode> = (contextNodes, propsMap, getStoryVNode) => {
+export const renderPreact: Render<VNode> = (contextNodes, propsMap, getStoryVNode) => {
  const { getRendererFrom } = ContextsPreviewAPI();
-  return getRendererFrom(Preact.h)(contextNodes, propsMap, getStoryVNode);
+  return getRendererFrom(h)(contextNodes, propsMap, getStoryVNode);
 };

 export const withContexts = createAddonDecorator(renderPreact);
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
@ -32,10 +32,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3"
@ -45,5 +45,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-design-assets",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Design asset preview for storybook",
  "keywords": [
    "addon",
@ -34,12 +34,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/client-logger": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/client-logger": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3",
@ -48,5 +48,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@ -1,5 +1,5 @@
 <center>
-  <img src="docs/media/hero.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/hero.png" width="100%" />
 </center>

 # Storybook Docs
@ -32,7 +32,7 @@ When you [install Docs](#installation), every story gets a `DocsPage`. `DocsPage
 Click on the `Docs` tab to see it:

 <center>
-  <img src="docs/media/docs-tab.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docs-tab.png" width="100%" />
 </center>

 For more information on how it works, see the [`DocsPage` reference](./docs/docspage.md).
@ -68,7 +68,7 @@ markdown documentation.
 And here's how that's rendered in Storybook:

 <center>
-  <img src="docs/media/mdx-simple.png" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-simple.png" width="100%" />
 </center>

 For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md).
@ -77,16 +77,16 @@ For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md).

 Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support:

-|                   | React | Vue | Angular | HTML | [Web Components](./web-components) | Svelte | Polymer | Marko | Mithril | Riot | Ember | Preact |
-| ----------------- | :---: | :-: | :-----: | :--: | :--------------------------------: | :----: | :-----: | :---: | :-----: | :--: | :---: | :----: |
-| MDX stories       |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
-| CSF stories       |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
-| StoriesOf stories |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
-| Source            |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
-| Notes / Info      |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
-| Props table       |   +   |  +  |    #    |      |                 +                  |        |         |       |         |      |       |        |
-| Description       |   +   |  +  |    #    |      |                 +                  |        |         |       |         |      |       |        |
-| Inline stories    |   +   |  +  |         |      |                 +                  |        |         |       |         |      |       |        |
+|                   | React | Vue | Angular | Ember | Web Components | HTML | Svelte | Preact | Polymer | Riot | Mithril | Marko |
+| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :--: | :----: | :----: | :-----: | :--: | :-----: | :---: |
+| MDX stories       |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
+| CSF stories       |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
+| StoriesOf stories |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
+| Source            |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
+| Notes / Info      |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |    +    |  +   |    +    |   +   |
+| Props table       |   +   |  +  |    +    |   +   |       +        |      |        |        |         |      |         |       |
+| Description       |   +   |  +  |    +    |   +   |       +        |      |        |        |         |      |         |       |
+| Inline stories    |   +   |  +  |         |       |       +        |      |        |        |         |      |         |       |

 **Note:** `#` = WIP support

@ -111,7 +111,7 @@ Then add the following to your `.storybook/main.js`:
 ```js
 module.exports = {
  presets: ['@storybook/addon-docs/preset'],
-  stories: ['../src/**/*/stories.(js|mdx)'],
+  stories: ['../src/**/*.stories.(js|mdx)'],
 };
 ```

@ -131,8 +131,10 @@ Add the following to your Jest configuration:

 ### Be sure to check framework specific installation needs

- [Angular](./angular)
+- [React](./react) (covered here)
 - [Vue](./vue)
+- [Angular](./angular)
+- [Ember](./ember)
 - [Web Components](./web-components)

 ## Preset options
@ -164,11 +166,10 @@ If you don't want to use the preset, and prefer to configure "the long way", fir

 ```js
 module.exports = {
-  addons: ['@storybook/addon-docs/register']
+  addons: ['@storybook/addon-docs/register'],
 };
 ```

-
 Then configure Storybook's webpack loader in `.storybook/main.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`:

 ```js
@ -201,7 +202,7 @@ module.exports = {
      enforce: 'pre',
    });
    return config;
-  }
+  },
 };
 ```

--- a/addons/docs/angular/README.md
+++ b/addons/docs/angular/README.md
@ -22,10 +22,12 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
 yarn add -D @storybook/addon-docs@next
 ```

-Then add the following to your `.storybook/presets.js` exports:
+Then add the following to your `.storybook/main.js` exports:

 ```js
-module.exports = ['@storybook/addon-docs/preset'];
+module.exports = {
+  presets: ['@storybook/addon-docs/preset'],
+};
 ```

 ## DocsPage
@ -55,7 +57,7 @@ Then you'll need to configure Compodoc to generate a `documentation.json` file.

 Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc.

-Next, add the following to your `.storybook/config.json` to load the Compodoc-generated file:
+Next, add the following to `.storybook/preview.ts` to load the Compodoc-generated file:

 ```js
 import { setCompodocJson } from '@storybook/addon-docs/angular';
@ -95,10 +97,12 @@ Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you wa
 yarn add -D react react-is babel-loader
 ```

-Then update your `.storybook/config.ts` to make sure you load MDX files:
+Then update your `.storybook/main.js` to make sure you load MDX files:

 ```ts
-configure(require.context('../src/stories', true, /\.stories\.(ts|mdx)$/), module);
+module.exports = {
+  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+};
 ```

 Finally, you can create MDX files like this:
@ -131,7 +135,7 @@ Also, to use the `Props` doc block, you need to set up Compodoc, [as described a

 Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`.

-To update the global default, modify `.storybook/config.ts`:
+To update the global default, modify `.storybook/preview.ts`:

 ```ts
 import { addParameters } from '@storybook/angular';
--- a/addons/docs/ember/README.md
+++ b/addons/docs/ember/README.md
@ -0,0 +1,150 @@
+# Storybook Docs for Ember
+
+Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Ember supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
+
+To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Ember specifics, read on!
+
+- [Installation](#installation)
+- [DocsPage](#docspage)
+- [MDX](#mdx)
+- [IFrame height](#iframe-height)
+- [More resources](#more-resources)
+
+## Installation
+
+First add the package. Make sure that the versions for your `@storybook/*` packages match:
+
+```sh
+yarn add -D @storybook/addon-docs@next
+```
+
+Then add the following to your `.storybook/main.js` presets:
+
+```js
+module.exports = {
+  presets: ['@storybook/addon-docs/preset'],
+};
+```
+
+## DocsPage
+
+When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
+
+Props tables for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file:
+
+```js
+let app = new EmberApp(defaults, {
+  'ember-cli-storybook': {
+    enableAddonDocsIntegration: true,
+  },
+});
+```
+
+Now, running the ember-cli server will generate a JSON documentation file at `/storybook-docgen/index.json`. Since generation of this file is tied into the ember-cli build, it will get regenerated everytime component files are saved. For details on documenting your components, check out the examples in the addon that powers the generation [ember-cli-addon-docs-yuidoc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components).
+
+Next, add the following to your `.storybook/preview.js` to load the generated json file:
+
+```js
+import { setJSONDoc } from '@storybook/addon-docs/ember';
+import docJson from '../storybook-docgen/index.json';
+setJSONDoc(docJson);
+```
+
+Finally, be sure to fill in the `component` field in your story metadata. This should be a string that matches the name of the `@class` used in your souce comments:
+
+```ts
+export default {
+  title: 'App Component',
+  component: 'AppComponent',
+};
+```
+
+If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
+
+```ts
+import { storiesOf } from '@storybook/angular';
+
+storiesOf('App Component', module)
+  .addParameters({ component: 'AppComponent' })
+  .add( ... );
+```
+
+## MDX
+
+[MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
+
+Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well:
+
+```sh
+yarn add -D react react-is babel-loader
+```
+
+Then update your `.storybook/main.js` to make sure you load MDX files:
+
+```js
+module.exports = {
+  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+};
+```
+
+Finally, you can create MDX files like this:
+
+```md
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import hbs from 'htmlbars-inline-precompile'
+
+<Meta title='App Component' component='AppComponent' />
+
+# App Component
+
+Some **markdown** description, or whatever you want.
+
+<Story name='basic' height='400px'>{{
+  template: hbs`<AppComponent @title={{title}} />`,
+context: { title: "Title" },
+}}</Story>
+
+## Props
+
+<Props of='AppComponent' />
+```
+
+Yes, it's redundant to declare `component` twice. [Coming soon](https://github.com/storybookjs/storybook/issues/8673).
+
+Also, to use the `Props` doc block, you need to set up documentation generation, [as described above](#docspage).
+
+## IFrame height
+
+Storybook Docs renders all Ember stories inside `iframe`s, with a default height of `60px`. You can update this default globally, or modify the `iframe` height locally per story in `DocsPage` and `MDX`.
+
+To update the global default, modify `.storybook/preview.js`:
+
+```ts
+import { addParameters } from '@storybook/ember';
+
+addParameters({ docs: { iframeHeight: 400 } });
+```
+
+For `DocsPage`, you need to update the parameter locally in a story:
+
+```ts
+export const basic = () => ...
+basic.story = {
+  parameters: { docs: { iframeHeight: 400 } }
+}
+```
+
+And for `MDX` you can modify it as an attribute on the `Story` element:
+
+```md
+<Story name='basic' height='400px'>{...}</Story>
+```
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md)
+- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
--- a/addons/docs/ember/index.js
+++ b/addons/docs/ember/index.js
@ -0,0 +1 @@
+module.exports = require('../dist/frameworks/ember');
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Superior documentation for your components",
  "keywords": [
    "addon",
@ -45,13 +45,13 @@
    "@mdx-js/loader": "^1.5.1",
    "@mdx-js/mdx": "^1.5.1",
    "@mdx-js/react": "^1.5.1",
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/postinstall": "5.3.0-beta.11",
-    "@storybook/router": "5.3.0-beta.11",
-    "@storybook/source-loader": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/csf": "0.0.1",
+    "@storybook/postinstall": "5.3.0-rc.0",
+    "@storybook/source-loader": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "acorn": "^7.1.0",
    "acorn-jsx": "^5.1.0",
    "acorn-walk": "^7.0.0",
@ -64,10 +64,12 @@
    "lodash": "^4.17.15",
    "prop-types": "^15.7.2",
    "react-element-to-jsx-string": "^14.1.0",
+    "remark-external-links": "^5.0.0",
+    "remark-slug": "^5.1.2",
    "ts-dedent": "^1.1.0",
    "util-deprecate": "^1.0.2",
-    "vue-docgen-api": "^3.26.0",
-    "vue-docgen-loader": "^1.0.1"
+    "vue-docgen-api": "^4.1.0",
+    "vue-docgen-loader": "^1.3.0-beta.0"
  },
  "devDependencies": {
    "@types/doctrine": "^0.0.3",
@ -85,5 +87,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/docs/react/README.md
+++ b/addons/docs/react/README.md
@ -0,0 +1,120 @@
+<center>
+  <img src="../docs/media/docspage-hero.png" width="100%" />
+</center>
+
+# Storybook Docs for React
+
+Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
+
+To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the React specifics, read on!
+
+- [Installation](#installation)
+- [DocsPage](#docspage)
+- [MDX](#mdx)
+- [Inline stories](#inline-stories)
+- [More resources](#more-resources)
+
+## Installation
+
+First add the package. Make sure that the versions for your `@storybook/*` packages match:
+
+```sh
+yarn add -D @storybook/addon-docs@next
+```
+
+Then add the following to your `.storybook/main.js` list of `presets`:
+
+```js
+module.exports = {
+  // other settings
+  presets: ['@storybook/addon-docs/preset'];
+}
+```
+
+## DocsPage
+
+When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
+
+To show the props table for your component, be sure to fill in the `component` field in your story metadata:
+
+```ts
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+```
+
+If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing:
+
+```ts
+import { storiesOf } from '@storybook/react';
+import { Button } from './Button';
+
+storiesOf('InfoButton', module)
+  .addParameters({ component: Button })
+  .add( ... );
+```
+
+## MDX
+
+[MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
+
+Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well:
+
+```sh
+yarn add -D react react-is babel-loader
+```
+
+Then update your `.storybook/main.js` to make sure you load MDX files:
+
+```js
+module.exports = {
+  stories: ['../src/stories/**/*.stories.(js|mdx)'],
+};
+```
+
+Finally, you can create MDX files like this:
+
+```md
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { Button } from './Button';
+
+<Meta title='Button' component={Button} />
+
+# Button
+
+Some **markdown** description, or whatever you want.
+
+<Story name='basic' height='400px'>
+  <Button>Label</Button>
+</Story>
+
+## Props
+
+<Props of={Button} />
+```
+
+## Inline Stories
+
+Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an `iframe` so that they are better isolated. To do this, update `.storybook/preview.js`:
+
+```js
+import { addParameters } from '@storybook/react';
+
+addParameters({
+  docs: {
+    inlineStories: false,
+  },
+});
+```
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md)
+- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
--- a/addons/docs/src/blocks/Anchor.tsx
+++ b/addons/docs/src/blocks/Anchor.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { FC } from 'react';

 export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`;

@ -6,6 +6,6 @@ export interface AnchorProps {
  storyId: string;
 }

-export const Anchor: FunctionComponent<AnchorProps> = ({ storyId, children }) => (
+export const Anchor: FC<AnchorProps> = ({ storyId, children }) => (
  <div id={anchorBlockIdFromId(storyId)}>{children}</div>
 );
--- a/addons/docs/src/blocks/DocsContainer.tsx
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@ -1,44 +1,24 @@
 import React, { FunctionComponent, useEffect } from 'react';
-import { document } from 'global';
+import { document, window } from 'global';
 import { MDXProvider } from '@mdx-js/react';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
-import { DocsWrapper, DocsContent, Source } from '@storybook/components';
-import { components as htmlComponents, Code } from '@storybook/components/html';
+import { DocsWrapper, DocsContent } from '@storybook/components';
+import { components as htmlComponents } from '@storybook/components/html';
 import { DocsContextProps, DocsContext } from './DocsContext';
 import { anchorBlockIdFromId } from './Anchor';
 import { storyBlockIdFromId } from './Story';
+import { CodeOrSourceMdx, AnchorMdx, HeadersMdx } from './mdx';
+import { scrollToElement } from './utils';

 interface DocsContainerProps {
  context: DocsContextProps;
 }

-interface CodeOrSourceProps {
-  className?: string;
-}
-export const CodeOrSource: FunctionComponent<CodeOrSourceProps> = props => {
-  const { className, children, ...rest } = props;
-  // markdown-to-jsx does not add className to inline code
-  if (
-    typeof className !== 'string' &&
-    (typeof children !== 'string' || !(children as string).match(/[\n\r]/g))
-  ) {
-    return <Code>{children}</Code>;
-  }
-  // className: "lang-jsx"
-  const language = className && className.split('-');
-  return (
-    <Source
-      language={(language && language[1]) || 'plaintext'}
-      format={false}
-      code={children as string}
-      {...rest}
-    />
-  );
-};
-
 const defaultComponents = {
  ...htmlComponents,
-  code: CodeOrSource,
+  code: CodeOrSourceMdx,
+  a: AnchorMdx,
+  ...HeadersMdx,
 };

 export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
@ -46,30 +26,40 @@ export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context,
  const options = parameters.options || {};
  const theme = ensureTheme(options.theme);
  const { components: userComponents = null } = parameters.docs || {};
-  const components = { ...defaultComponents, ...userComponents };
+  const allComponents = { ...defaultComponents, ...userComponents };

  useEffect(() => {
-    let element = document.getElementById(anchorBlockIdFromId(storyId));
-    if (!element) {
-      element = document.getElementById(storyBlockIdFromId(storyId));
-    }
-    if (element) {
-      const allStories = element.parentElement.querySelectorAll('[id|="anchor-"]');
-      let block = 'start';
-      if (allStories && allStories[0] === element) {
-        block = 'end'; // first story should be shown with the intro content above
+    const url = new URL(window.parent.location);
+    if (url.hash) {
+      const element = document.getElementById(url.hash.substring(1));
+      if (element) {
+        // Introducing a delay to ensure scrolling works when it's a full refresh.
+        setTimeout(() => {
+          scrollToElement(element);
+        }, 200);
+      }
+    } else {
+      const element =
+        document.getElementById(anchorBlockIdFromId(storyId)) ||
+        document.getElementById(storyBlockIdFromId(storyId));
+      if (element) {
+        const allStories = element.parentElement.querySelectorAll('[id|="anchor-"]');
+        let block = 'start';
+        if (allStories && allStories[0] === element) {
+          block = 'end'; // first story should be shown with the intro content above
+        }
+        // Introducing a delay to ensure scrolling works when it's a full refresh.
+        setTimeout(() => {
+          scrollToElement(element, block);
+        }, 200);
      }
-      element.scrollIntoView({
-        behavior: 'smooth',
-        block,
-        inline: 'nearest',
-      });
    }
  }, [storyId]);
+
  return (
    <DocsContext.Provider value={context}>
      <ThemeProvider theme={theme}>
-        <MDXProvider components={components}>
+        <MDXProvider components={allComponents}>
          <DocsWrapper className="sbdocs sbdocs-wrapper">
            <DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>
          </DocsWrapper>
--- a/addons/docs/src/blocks/DocsPage.test.ts
+++ b/addons/docs/src/blocks/DocsPage.test.ts
@ -15,4 +15,10 @@ describe('defaultTitleSlot', () => {
    expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('b');
    expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('d');
  });
+  it('empty options', () => {
+    const parameters = { options: {} };
+    expect(defaultTitleSlot({ selectedKind: 'a/b/c', parameters })).toBe('c');
+    expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('b');
+    expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('d');
+  });
 });
--- a/addons/docs/src/blocks/Heading.tsx
+++ b/addons/docs/src/blocks/Heading.tsx
@ -1,7 +1,20 @@
 import React, { FunctionComponent } from 'react';
 import { H2 } from '@storybook/components/html';
+import { HeaderMdx } from './mdx';

-interface HeadingProps {
+export interface HeadingProps {
  children: JSX.Element | string;
+  disableAnchor?: boolean;
 }
-export const Heading: FunctionComponent<HeadingProps> = ({ children }) => <H2>{children}</H2>;
+
+export const Heading: FunctionComponent<HeadingProps> = ({ children, disableAnchor }) => {
+  if (disableAnchor || typeof children !== 'string') {
+    return <H2>{children}</H2>;
+  }
+  const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+  return (
+    <HeaderMdx as="h2" id={tagID}>
+      {children}
+    </HeaderMdx>
+  );
+};
--- a/addons/docs/src/blocks/Subheading.tsx
+++ b/addons/docs/src/blocks/Subheading.tsx
@ -1,7 +1,16 @@
 import React, { FunctionComponent } from 'react';
 import { H3 } from '@storybook/components/html';
+import { HeaderMdx } from './mdx';
+import { HeadingProps } from './Heading';

-interface SubheadingProps {
-  children: JSX.Element | string;
-}
-export const Subheading: FunctionComponent<SubheadingProps> = ({ children }) => <H3>{children}</H3>;
+export const Subheading: FunctionComponent<HeadingProps> = ({ children, disableAnchor }) => {
+  if (disableAnchor || typeof children !== 'string') {
+    return <H3>{children}</H3>;
+  }
+  const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+  return (
+    <HeaderMdx as="h3" id={tagID}>
+      {children}
+    </HeaderMdx>
+  );
+};
--- a/addons/docs/src/blocks/Title.tsx
+++ b/addons/docs/src/blocks/Title.tsx
@ -1,5 +1,5 @@
 import React, { useContext, FunctionComponent } from 'react';
-import { parseKind } from '@storybook/router';
+import { parseKind } from '@storybook/csf';
 import { Title as PureTitle } from '@storybook/components';
 import { DocsContext } from './DocsContext';
 import { StringSlot } from './shared';
@ -11,13 +11,9 @@ interface TitleProps {
 export const defaultTitleSlot: StringSlot = ({ selectedKind, parameters }) => {
  const {
    showRoots,
-    hierarchyRootSeparator: rootSeparator,
-    hierarchySeparator: groupSeparator,
-  } = (parameters && parameters.options) || {
-    showRoots: undefined,
-    hierarchyRootSeparator: '|',
-    hierarchySeparator: /\/|\./,
-  };
+    hierarchyRootSeparator: rootSeparator = '|',
+    hierarchySeparator: groupSeparator = /\/|\./,
+  } = (parameters && parameters.options) || {};

  let groups;
  if (typeof showRoots !== 'undefined') {
--- a/addons/docs/src/blocks/mdx.tsx
+++ b/addons/docs/src/blocks/mdx.tsx
@ -1,14 +1,209 @@
-import * as React from 'react';
+import React, { FC, SyntheticEvent } from 'react';
+import { Source } from '@storybook/components';
+import { Code, components } from '@storybook/components/html';
+import { document, window } from 'global';
+import { isNil } from 'lodash';
+import { styled } from '@storybook/theming';
 import { DocsContext, DocsContextProps } from './DocsContext';
+import { scrollToElement } from './utils';

-// Hacky utility for dealing with functions or values in MDX Story elements
-export const makeStoryFn = (val: any) => (typeof val === 'function' ? val : () => val);
+// Hacky utility for asserting identifiers in MDX Story elements
+export const assertIsFn = (val: any) => {
+  if (typeof val !== 'function') {
+    throw new Error(`Expected story function, got: ${val}`);
+  }
+  return val;
+};

 // Hacky utilty for adding mdxStoryToId to the default context
-export const AddContext: React.FC<DocsContextProps> = props => {
+export const AddContext: FC<DocsContextProps> = props => {
  const { children, ...rest } = props;
  const parentContext = React.useContext(DocsContext);
  return (
    <DocsContext.Provider value={{ ...parentContext, ...rest }}>{children}</DocsContext.Provider>
  );
 };
+
+interface CodeOrSourceMdxProps {
+  className?: string;
+}
+
+export const CodeOrSourceMdx: FC<CodeOrSourceMdxProps> = ({ className, children, ...rest }) => {
+  // markdown-to-jsx does not add className to inline code
+  if (
+    typeof className !== 'string' &&
+    (typeof children !== 'string' || !(children as string).match(/[\n\r]/g))
+  ) {
+    return <Code>{children}</Code>;
+  }
+  // className: "lang-jsx"
+  const language = className && className.split('-');
+  return (
+    <Source
+      language={(language && language[1]) || 'plaintext'}
+      format={false}
+      code={children as string}
+      {...rest}
+    />
+  );
+};
+
+function generateHrefWithHash(hash: string): string {
+  const url = new URL(window.parent.location);
+  const href = `${url.origin}/${url.search}#${hash}`;
+
+  return href;
+}
+
+// @ts-ignore
+const A = components.a;
+
+interface AnchorInPageProps {
+  hash: string;
+}
+
+const AnchorInPage: FC<AnchorInPageProps> = ({ hash, children }) => (
+  <A
+    href={hash}
+    onClick={(event: SyntheticEvent) => {
+      event.preventDefault();
+
+      const hashValue = hash.substring(1);
+      const element = document.getElementById(hashValue);
+      if (!isNil(element)) {
+        window.parent.history.replaceState(null, '', generateHrefWithHash(hashValue));
+        scrollToElement(element);
+      }
+    }}
+  >
+    {children}
+  </A>
+);
+
+interface AnchorMdxProps {
+  href: string;
+  target: string;
+}
+
+export const AnchorMdx: FC<AnchorMdxProps> = props => {
+  const { href, target, children, ...rest } = props;
+
+  if (!isNil(href)) {
+    // Enable scrolling for in-page anchors.
+    if (href.startsWith('#')) {
+      return <AnchorInPage hash={href}>{children}</AnchorInPage>;
+    }
+
+    // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
+    if (target !== '_blank') {
+      const parentUrl = new URL(window.parent.location.href);
+      const newHref = `${parentUrl.origin}${href}`;
+
+      return (
+        <A href={newHref} target={target} {...rest}>
+          {children}
+        </A>
+      );
+    }
+  }
+
+  // External URL dont need any modification.
+  return <A {...props} />;
+};
+
+const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
+  (acc, headerType) => ({
+    ...acc,
+    // @ts-ignore
+    [headerType]: styled(components[headerType])({
+      '& svg': {
+        visibility: 'hidden',
+      },
+      '&:hover svg': {
+        visibility: 'visible',
+      },
+    }),
+  }),
+  {}
+);
+
+const OcticonAnchor = styled.a(() => ({
+  float: 'left',
+  paddingRight: '4px',
+  marginLeft: '-20px',
+}));
+
+interface HeaderWithOcticonAnchorProps {
+  as: string;
+  id: string;
+  children: any;
+}
+
+const HeaderWithOcticonAnchor: FC<HeaderWithOcticonAnchorProps> = ({
+  as,
+  id,
+  children,
+  ...rest
+}) => {
+  // @ts-ignore
+  const OcticonHeader = OcticonHeaders[as];
+
+  return (
+    <OcticonHeader id={id} {...rest}>
+      <OcticonAnchor
+        aria-hidden="true"
+        href={generateHrefWithHash(id)}
+        tabIndex={-1}
+        onClick={() => {
+          const element = document.getElementById(id);
+          if (!isNil(element)) {
+            scrollToElement(element);
+          }
+        }}
+      >
+        <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+          <path
+            fillRule="evenodd"
+            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+          />
+        </svg>
+      </OcticonAnchor>
+      {children}
+    </OcticonHeader>
+  );
+};
+
+interface HeaderMdxProps {
+  as: string;
+  id: string;
+}
+
+export const HeaderMdx: FC<HeaderMdxProps> = props => {
+  const { as, id, children, ...rest } = props;
+
+  // An id should have been added on every header by the "remark-slug" plugin.
+  if (!isNil(id)) {
+    return (
+      <HeaderWithOcticonAnchor as={as} id={id} {...rest}>
+        {children}
+      </HeaderWithOcticonAnchor>
+    );
+  }
+
+  // @ts-ignore
+  const Header = components[as];
+
+  // Make sure it still work if "remark-slug" plugin is not present.
+  return <Header {...props} />;
+};
+
+export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce(
+  (acc, headerType) => ({
+    ...acc,
+    // @ts-ignore
+    [headerType]: (props: object) => <HeaderMdx as={headerType} {...props} />,
+  }),
+  {}
+);
--- a/addons/docs/src/blocks/utils.ts
+++ b/addons/docs/src/blocks/utils.ts
@ -32,3 +32,11 @@ export const getComponentName = (component: Component): string => {

  return component.name;
 };
+
+export function scrollToElement(element: any, block = 'start') {
+  element.scrollIntoView({
+    behavior: 'smooth',
+    block,
+    inline: 'nearest',
+  });
+}
--- a/addons/docs/src/frameworks/common/preset.ts
+++ b/addons/docs/src/frameworks/common/preset.ts
@ -1,5 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import createCompiler from '@storybook/addon-docs/mdx-compiler-plugin';
+import remarkSlug from 'remark-slug';
+import remarkExternalLinks from 'remark-external-links';

 function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
  if (!configureJSX) {
@ -26,6 +28,10 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
    sourceLoaderOptions = {},
  } = options;

+  const mdxLoaderOptions = {
+    remarkPlugins: [remarkSlug, remarkExternalLinks],
+  };
+
  // set `sourceLoaderOptions` to `null` to disable for manual configuration
  const sourceLoader = sourceLoaderOptions
    ? [
@ -44,6 +50,18 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
      ...module,
      rules: [
        ...(module.rules || []),
+        {
+          test: /\.js$/,
+          include: /node_modules\/acorn-jsx/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: [[require.resolve('@babel/preset-env'), { modules: 'commonjs' }]],
+              },
+            },
+          ],
+        },
        {
          test: /\.(stories|story).mdx$/,
          use: [
@ -55,6 +73,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
              loader: '@mdx-js/loader',
              options: {
                compilers: [createCompiler(options)],
+                ...mdxLoaderOptions,
              },
            },
          ],
@ -69,6 +88,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
            },
            {
              loader: '@mdx-js/loader',
+              options: mdxLoaderOptions,
            },
          ],
        },
--- a/addons/docs/src/frameworks/ember/config.js
+++ b/addons/docs/src/frameworks/ember/config.js
@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { addParameters } from '@storybook/client-api';
+import { extractProps, extractComponentDescription } from './jsondoc';
+
+addParameters({
+  docs: {
+    iframeHeight: 80,
+    extractProps,
+    extractComponentDescription,
+  },
+});
--- a/addons/docs/src/frameworks/ember/index.js
+++ b/addons/docs/src/frameworks/ember/index.js
@ -0,0 +1 @@
+export { setJSONDoc } from './jsondoc';
--- a/addons/docs/src/frameworks/ember/jsondoc.js
+++ b/addons/docs/src/frameworks/ember/jsondoc.js
@ -0,0 +1,30 @@
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = jsondoc => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};
+export const getJSONDoc = () => {
+  return window.__EMBER_GENERATED_DOC_JSON__;
+};
+
+export const extractProps = componentName => {
+  const json = getJSONDoc();
+  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
+  const rows = componentDoc.attributes.arguments.map(prop => {
+    return {
+      name: prop.name,
+      type: prop.type,
+      required: prop.tags.length ? prop.tags.some(tag => tag.name === 'required') : false,
+      defaultValue: prop.defaultValue,
+      description: prop.description,
+    };
+  });
+  return { rows };
+};
+
+export const extractComponentDescription = componentName => {
+  const json = getJSONDoc();
+  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
+  return componentDoc.attributes.description;
+};
--- a/addons/docs/src/frameworks/react/propTypes/createType.ts
+++ b/addons/docs/src/frameworks/react/propTypes/createType.ts
@ -2,7 +2,11 @@ import { isNil } from 'lodash';
 import { PropType } from '@storybook/components';
 import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib';
 import { ExtractedProp, DocgenPropType } from '../../../lib/docgen';
-import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature';
+import {
+  generateFuncSignature,
+  generateShortFuncSignature,
+  toMultilineSignature,
+} from './generateFuncSignature';
 import {
  OBJECT_CAPTION,
  ARRAY_CAPTION,
@ -22,6 +26,8 @@ import {
  InspectionArray,
 } from '../lib/inspection';

+const MAX_FUNC_LENGTH = 150;
+
 enum PropTypesType {
  CUSTOM = 'custom',
  ANY = 'any',
@ -146,7 +152,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
    }
    default:
      short = getCaptionForInspectionType(type);
-      compact = value;
+      compact = splitIntoLines(value).length === 1 ? value : null;
      full = value;
      break;
  }
@ -379,18 +385,18 @@ export function createType(extractedProp: ExtractedProp): PropType {
        return createSummaryValue(short, short !== full ? full : undefined);
      }
      case PropTypesType.FUNC: {
-        const { short, compact, full } = generateType(type, extractedProp);
+        const { short, full } = generateType(type, extractedProp);

        let summary = short;
-        const detail = full;
+        let detail;

-        if (!isTooLongForTypeSummary(full)) {
+        if (full.length < MAX_FUNC_LENGTH) {
          summary = full;
-        } else if (!isNil(compact)) {
-          summary = compact;
+        } else {
+          detail = toMultilineSignature(full);
        }

-        return createSummaryValue(summary, summary !== detail ? detail : undefined);
+        return createSummaryValue(summary, detail);
      }
      default:
        return null;
--- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
+++ b/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts
@ -63,3 +63,7 @@ export function generateShortFuncSignature(

  return funcParts.join(' ');
 }
+
+export function toMultilineSignature(signature: string): string {
+  return signature.replace(/,/g, ',\r\n');
+}
--- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
+++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
@ -161,7 +161,7 @@ describe('enhancePropTypesProp', () => {
            type: {
              name: 'custom',
              raw:
-                '<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>',
+                '<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>',
            },
          });

@ -170,7 +170,7 @@ describe('enhancePropTypesProp', () => {
          expect(type.summary).toBe('element');

          const expectedDetail =
-            '<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>';
+            '<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>';

          expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
        });
@ -303,7 +303,15 @@ describe('enhancePropTypesProp', () => {
              name: 'string',
              required: false,
            },
-            anotherAnother: {
+            another2: {
+              name: 'string',
+              required: false,
+            },
+            another3: {
+              name: 'string',
+              required: false,
+            },
+            another4: {
              name: 'string',
              required: false,
            },
@ -319,7 +327,9 @@ describe('enhancePropTypesProp', () => {
        foo: string,
        bar: string,
        another: string,
-        anotherAnother: string
+        another2: string,
+        another3: string,
+        another4: string
      }`;

      expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@ -382,7 +392,8 @@ describe('enhancePropTypesProp', () => {
              computed: true,
            },
            {
-              value: '{\n  foo: PropTypes.string,\n  bar: PropTypes.string,\n}',
+              value:
+                '{\n  foo: PropTypes.string,\n  bar: PropTypes.string,\n  hey: PropTypes.string,\n  ho: PropTypes.string,\n}',
              computed: true,
            },
          ],
@ -398,7 +409,9 @@ describe('enhancePropTypesProp', () => {
          value: string
        } | {
          foo: string,
-          bar: string
+          bar: string,
+          hey: string,
+          ho: string
        }`;

      expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@ -799,7 +812,7 @@ describe('enhancePropTypesProp', () => {
            value: {
              name: 'custom',
              raw:
-                '{\n  text: PropTypes.string.isRequired,\n  value: PropTypes.string.isRequired,\n  another: PropTypes.string.isRequired,\n  anotherAnother: PropTypes.string.isRequired,\n}',
+                '{\n  text: PropTypes.string.isRequired,\n  value: PropTypes.string.isRequired,\n  another: PropTypes.string.isRequired,\n  another2: PropTypes.string.isRequired,\n  another3: PropTypes.string.isRequired,\n  another4: PropTypes.string.isRequired,\n}',
            },
          },
        });
@ -812,7 +825,9 @@ describe('enhancePropTypesProp', () => {
          text: string,
          value: string,
          another: string,
-          anotherAnother: string
+          another2: string,
+          another3: string,
+          another4: string
        }]`;

        expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@ -875,7 +890,15 @@ describe('enhancePropTypesProp', () => {
                  name: 'string',
                  required: false,
                },
-                anotherAnother: {
+                another2: {
+                  name: 'string',
+                  required: false,
+                },
+                another3: {
+                  name: 'string',
+                  required: false,
+                },
+                another4: {
                  name: 'string',
                  required: false,
                },
@ -892,7 +915,9 @@ describe('enhancePropTypesProp', () => {
          foo: string,
          bar: string,
          another: string,
-          anotherAnother: string
+          another2: string,
+          another3: string,
+          another4: string
        }]`;

        expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
--- a/addons/docs/src/frameworks/web-components/config.js
+++ b/addons/docs/src/frameworks/web-components/config.js
@ -11,7 +11,7 @@ function mapData(data) {
    type: { summary: item.type },
    required: '',
    description: item.description,
-    defaultValue: { summary: item.default },
+    defaultValue: { summary: item.defaultValue },
  }));
 }

--- a/addons/docs/src/lib/docgen/extractDocgenProps.ts
+++ b/addons/docs/src/lib/docgen/extractDocgenProps.ts
@ -31,13 +31,16 @@ const getTypeSystem = (docgenInfo: DocgenInfo): TypeSystem => {
  return TypeSystem.UNKNOWN;
 };

-export const extractComponentProps: ExtractProps = (component, section) => {
-  const docgenSection = getDocgenSection(component, section);
+export const extractComponentSectionArray = (docgenSection: any) => {
+  const typeSystem = getTypeSystem(docgenSection[0]);
+  const createPropDef = getPropDefFactory(typeSystem);

-  if (!isValidDocgenSection(docgenSection)) {
-    return [];
-  }
+  return docgenSection
+    .map((item: any) => extractProp(item.name, item, typeSystem, createPropDef))
+    .filter(Boolean);
+};

+export const extractComponentSectionObject = (docgenSection: any) => {
  const docgenPropsKeys = Object.keys(docgenSection);
  const typeSystem = getTypeSystem(docgenSection[docgenPropsKeys[0]]);
  const createPropDef = getPropDefFactory(typeSystem);
@ -50,7 +53,20 @@ export const extractComponentProps: ExtractProps = (component, section) => {
        ? extractProp(propName, docgenInfo, typeSystem, createPropDef)
        : null;
    })
-    .filter(x => x);
+    .filter(Boolean);
+};
+
+export const extractComponentProps: ExtractProps = (component, section) => {
+  const docgenSection = getDocgenSection(component, section);
+
+  if (!isValidDocgenSection(docgenSection)) {
+    return [];
+  }
+
+  // vue-docgen-api has diverged from react-docgen and returns an array
+  return Array.isArray(docgenSection)
+    ? extractComponentSectionArray(docgenSection)
+    : extractComponentSectionObject(docgenSection);
 };

 function extractProp(
--- a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
+++ b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
@ -98,7 +98,7 @@ describe('type', () => {
        name: 'signature',
        type: 'object',
        raw:
-          '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }',
+          '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }',
        signature: {
          properties: [
            {
@ -136,6 +136,34 @@ describe('type', () => {
                required: true,
              },
            },
+            {
+              key: 'prop5',
+              value: {
+                name: 'string',
+                required: true,
+              },
+            },
+            {
+              key: 'prop6',
+              value: {
+                name: 'string',
+                required: true,
+              },
+            },
+            {
+              key: 'prop7',
+              value: {
+                name: 'string',
+                required: true,
+              },
+            },
+            {
+              key: 'prop8',
+              value: {
+                name: 'string',
+                required: true,
+              },
+            },
          ],
          constructor: {
            name: 'signature',
@ -163,7 +191,7 @@ describe('type', () => {

    expect(type.summary).toBe('object');
    expect(type.detail).toBe(
-      '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string }'
+      '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }'
    );
  });

--- a/addons/docs/src/lib/utils.ts
+++ b/addons/docs/src/lib/utils.ts
@ -1,6 +1,6 @@
 import { PropSummaryValue } from '@storybook/components';

-export const MAX_TYPE_SUMMARY_LENGTH = 70;
+export const MAX_TYPE_SUMMARY_LENGTH = 90;
 export const MAX_DEFALUT_VALUE_SUMMARY_LENGTH = 50;

 export function isTooLongForTypeSummary(value: string): boolean {
--- a/addons/docs/src/mdx/testfixtures/component-id.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/component-id.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
--- a/addons/docs/src/mdx/testfixtures/decorators.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/decorators.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin decorators.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
--- a/addons/docs/src/mdx/testfixtures/docs-only.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/docs-only.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin docs-only.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Meta } from '@storybook/addon-docs/blocks';

--- a/addons/docs/src/mdx/testfixtures/meta-quotes-in-title.mdx
+++ b/addons/docs/src/mdx/testfixtures/meta-quotes-in-title.mdx
@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Addons/Docs/what's in a title?"
+/>
--- a/addons/docs/src/mdx/testfixtures/meta-quotes-in-title.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/meta-quotes-in-title.output.snapshot
@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs-mdx-compiler-plugin meta-quotes-in-title.mdx 1`] = `
+"/* @jsx mdx */
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+
+import { Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title=\\"Addons/Docs/what's in a title?\\" mdxType=\\"Meta\\" />
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const __page = () => {
+  throw new Error('Docs-only story');
+};
+
+__page.story = { parameters: { docsOnly: true } };
+
+const componentMeta = { title: \\"Addons/Docs/what's in a title?\\", includeStories: ['__page'] };
+
+const mdxStoryNameToId = {};
+
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = {
+  ...(componentMeta.parameters.docs || {}),
+  page: () => (
+    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+      <MDXContent />
+    </AddContext>
+  ),
+};
+
+export default componentMeta;
+"
+`;
--- a/addons/docs/src/mdx/testfixtures/non-story-exports.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/non-story-exports.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin non-story-exports.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
--- a/addons/docs/src/mdx/testfixtures/parameters.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/parameters.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin parameters.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
--- a/addons/docs/src/mdx/testfixtures/previews.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/previews.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin previews.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Button } from '@storybook/react/demo';
 import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
--- a/addons/docs/src/mdx/testfixtures/story-current.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-current.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin story-current.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Story } from '@storybook/addon-docs/blocks';

--- a/addons/docs/src/mdx/testfixtures/story-def-text-only.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-def-text-only.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin story-def-text-only.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Story, Meta } from '@storybook/addon-docs/blocks';

@ -32,7 +32,7 @@ function MDXContent({ components, ...props }) {

 MDXContent.isMDXComponent = true;

-export const text = makeStoryFn('Plain text');
+export const text = () => 'Plain text';
 text.story = {};
 text.story.name = 'text';
 text.story.parameters = { mdxSource: \\"'Plain text'\\" };
--- a/addons/docs/src/mdx/testfixtures/story-definitions.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-definitions.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin story-definitions.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
--- a/addons/docs/src/mdx/testfixtures/story-function-var.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-function-var.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin story-function-var.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Meta, Story } from '@storybook/addon-docs/blocks';
 export const basicFn = () => <Button mdxType=\\"Button\\" />;
@ -36,7 +36,7 @@ function MDXContent({ components, ...props }) {

 MDXContent.isMDXComponent = true;

-export const basic = makeStoryFn(basicFn);
+export const basic = assertIsFn(basicFn);
 basic.story = {};
 basic.story.name = 'basic';
 basic.story.parameters = { mdxSource: 'basicFn' };
--- a/addons/docs/src/mdx/testfixtures/story-function.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-function.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin story-function.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
@ -33,12 +33,12 @@ function MDXContent({ components, ...props }) {

 MDXContent.isMDXComponent = true;

-export const functionStory = makeStoryFn(() => {
+export const functionStory = () => {
  const btn = document.createElement('button');
  btn.innerHTML = 'Hello Button';
  btn.addEventListener('click', action('Click'));
  return btn;
-});
+};
 functionStory.story = {};
 functionStory.story.name = 'function';
 functionStory.story.parameters = {
--- a/addons/docs/src/mdx/testfixtures/story-object.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-object.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin story-object.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Story, Meta } from '@storybook/addon-docs/blocks';
 import { Welcome, Button } from '@storybook/angular/demo';
@ -42,7 +42,7 @@ function MDXContent({ components, ...props }) {

 MDXContent.isMDXComponent = true;

-export const toStorybook = makeStoryFn({
+export const toStorybook = () => ({
  template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,
  props: {
    showApp: linkTo('Button'),
--- a/addons/docs/src/mdx/testfixtures/story-references.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-references.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin story-references.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Story } from '@storybook/addon-docs/blocks';

--- a/addons/docs/src/mdx/testfixtures/title-template-string.mdx
+++ b/addons/docs/src/mdx/testfixtures/title-template-string.mdx
@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { titleFunction } from '../title-generators';
+
+<Meta title={`${titleFunction('template')}`} />
--- a/addons/docs/src/mdx/testfixtures/title-template-string.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/title-template-string.output.snapshot
@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs-mdx-compiler-plugin title-template-string.mdx 1`] = `
+"/* @jsx mdx */
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { titleFunction } from '../title-generators';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title={\`\${titleFunction('template')}\`} mdxType=\\"Meta\\" />
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const __page = () => {
+  throw new Error('Docs-only story');
+};
+
+__page.story = { parameters: { docsOnly: true } };
+
+const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };
+
+const mdxStoryNameToId = {};
+
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = {
+  ...(componentMeta.parameters.docs || {}),
+  page: () => (
+    <AddContext mdxStoryNameToId={mdxStoryNameToId}>
+      <MDXContent />
+    </AddContext>
+  ),
+};
+
+export default componentMeta;
+"
+`;
--- a/addons/docs/src/mdx/testfixtures/vanilla.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/vanilla.output.snapshot
@ -2,7 +2,7 @@

 exports[`docs-mdx-compiler-plugin vanilla.mdx 1`] = `
 "/* @jsx mdx */
-import { makeStoryFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';

 import { Button } from '@storybook/react/demo';

--- a/addons/docs/src/mdx/mdx-compiler-plugin.js
+++ b/addons/docs/src/mdx/mdx-compiler-plugin.js
@ -3,7 +3,7 @@ const parser = require('@babel/parser');
 const generate = require('@babel/generator').default;
 const camelCase = require('lodash/camelCase');
 const jsStringEscape = require('js-string-escape');
-const { toId, storyNameFromExport } = require('@storybook/router/utils');
+const { toId, storyNameFromExport } = require('@storybook/csf');

 // Generate the MDX as is, but append named exports for every
 // story in the contents
@ -55,7 +55,7 @@ function genStoryExport(ast, context) {

  let body = ast.children.find(n => n.type !== 'JSXText');
  let storyCode = null;
-  let isJsx = false;
+
  if (!body) {
    // plain text node
    const { code } = generate(ast.children[0], {});
@ -64,21 +64,29 @@ function genStoryExport(ast, context) {
    if (body.type === 'JSXExpressionContainer') {
      // FIXME: handle fragments
      body = body.expression;
-    } else {
-      isJsx = true;
    }
    const { code } = generate(body, {});
    storyCode = code;
  }
-  if (isJsx) {
-    statements.push(
-      `export const ${storyKey} = () => (
+
+  let storyVal = null;
+  switch (body && body.type) {
+    // We don't know what type the identifier is, but this code
+    // assumes it's a function from CSF. Let's see who complains!
+    case 'Identifier':
+      storyVal = `assertIsFn(${storyCode})`;
+      break;
+    case 'ArrowFunctionExpression':
+      storyVal = `(${storyCode})`;
+      break;
+    default:
+      storyVal = `() => (
        ${storyCode}
-      );`
-    );
-  } else {
-    statements.push(`export const ${storyKey} = makeStoryFn(${storyCode});`);
+      )`;
+      break;
  }
+
+  statements.push(`export const ${storyKey} = ${storyVal};`);
  statements.push(`${storyKey}.story = {};`);

  // always preserve the name, since CSF exports can get modified by displayName
@ -128,12 +136,28 @@ function genPreviewExports(ast, context) {
  return previewExports;
 }

-function genMeta(ast) {
+function genMeta(ast, options) {
  let title = getAttr(ast.openingElement, 'title');
  let id = getAttr(ast.openingElement, 'id');
  let parameters = getAttr(ast.openingElement, 'parameters');
  let decorators = getAttr(ast.openingElement, 'decorators');
-  title = title && `'${title.value}'`;
+  if (title) {
+    if (title.type === 'StringLiteral') {
+      title = "'".concat(jsStringEscape(title.value), "'");
+    } else {
+      try {
+        // generate code, so the expression is evaluated by the CSF compiler
+        const { code } = generate(title, {});
+        // remove the curly brackets at start and end of code
+        title = code.replace(/^\{(.+)\}$/, '$1');
+      } catch (e) {
+        // eat exception if title parsing didn't go well
+        // eslint-disable-next-line no-console
+        console.warn('Invalid title:', options.filepath);
+        title = undefined;
+      }
+    }
+  }
  id = id && `'${id.value}'`;
  if (parameters && parameters.expression) {
    const { code: params } = generate(parameters.expression, {});
@ -151,7 +175,7 @@ function genMeta(ast) {
  };
 }

-function getExports(node, counter) {
+function getExports(node, counter, options) {
  const { value, type } = node;
  if (type === 'jsx') {
    if (STORY_REGEX.exec(value)) {
@ -168,7 +192,7 @@ function getExports(node, counter) {
    if (META_REGEX.exec(value)) {
      // Preview, possibly containing multiple stories
      const ast = parser.parseExpression(value, { plugins: ['jsx'] });
-      return { meta: genMeta(ast) };
+      return { meta: genMeta(ast, options) };
    }
  }
  return null;
@ -270,7 +294,7 @@ function extractExports(node, options) {
    storyNameToKey: {},
  };
  node.children.forEach(n => {
-    const exports = getExports(n, context);
+    const exports = getExports(n, context, options);
    if (exports) {
      const { stories, meta } = exports;
      if (stories) {
@ -310,7 +334,7 @@ function extractExports(node, options) {
  );

  const fullJsx = [
-    'import { makeStoryFn, AddContext } from "@storybook/addon-docs/blocks";',
+    'import { assertIsFn, AddContext } from "@storybook/addon-docs/blocks";',
    defaultJsx,
    ...storyExports,
    `const componentMeta = ${stringifyMeta(metaExport)};`,
--- a/addons/docs/src/mdx/title-generators.js
+++ b/addons/docs/src/mdx/title-generators.js
@ -0,0 +1 @@
+export const titleFunction = title => `Addons/Docs/${title}`;
--- a/addons/docs/src/typings.d.ts
+++ b/addons/docs/src/typings.d.ts
@ -4,3 +4,5 @@ declare module '@storybook/addon-docs/blocks';
 declare module 'global';
 declare module 'react-is';
 declare module '@egoist/vue-to-react';
+declare module "remark-slug";
+declare module "remark-external-links";
--- a/addons/docs/vue/README.md
+++ b/addons/docs/vue/README.md
@ -22,10 +22,12 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
 yarn add -D @storybook/addon-docs@next
 ```

-Then add the following to your `.storybook/presets.js` exports:
+Then add the following to your `.storybook/main.js` presets:

 ```js
-module.exports = ['@storybook/addon-docs/preset'];
+module.exports = {
+  presets: ['@storybook/addon-docs/preset'],
+};
 ```

 ## DocsPage
@ -77,7 +79,7 @@ module.exports = {
 Finally, you can create MDX files like this:

 ```md
-import { Meta, Story, Props } from '@storybook/docs/blocks';
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
 import { InfoButton } from './InfoButton.vue';

 <Meta title='InfoButton' component={InfoButton} />
--- a/addons/essentials/README.md
+++ b/addons/essentials/README.md
@ -0,0 +1,51 @@
+# Storybook Essentials
+
+Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
+
+Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) for all of the officially supported frameworks.
+
+## Contents
+
+Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
+
+- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)
+- [Viewport](https://github.com/storybookjs/storybook/tree/next/addons/viewport)
+
+## Installation
+
+You can add Essentials to your project with:
+
+```
+npm install --save-dev @storybook/addon-essentials
+```
+
+And then add the following line to your `.storybook/main.js`:
+
+```js
+module.exports = {
+  presets: ['@storybook/addon-essentials'],
+};
+```
+
+## Configuration
+
+Essentials is "zero config." That means that comes with a recommended configuration out of the box.
+
+If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `package.json` on startup and if detects one of its addons is already installed, it will skip that addon's configuration entirely.
+
+## Disabling addons
+
+Yuu can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
+
+```js
+module.exports = {
+  presets: [{
+    name: '@storybook/addon-essentials'],
+    options: {
+      <addon-key>: false,
+    }
+  }]
+};
+```
+
+Valid addon keys include: `backgrounds`, `viewport`
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@ -0,0 +1,49 @@
+{
+  "name": "@storybook/addon-essentials",
+  "version": "5.3.0-rc.0",
+  "description": "Curated addons to bring out the best of Storybook",
+  "keywords": [
+    "addon",
+    "essentials",
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/essentials",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/essentials"
+  },
+  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "README.md"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addon-backgrounds": "5.3.0-rc.0",
+    "@storybook/addon-viewport": "5.3.0-rc.0",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/node-logger": "5.3.0-rc.0",
+    "ts-dedent": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.11"
+  },
+  "peerDependencies": {
+    "babel-loader": "^8.0.0",
+    "react": "^16.8.0",
+    "react-is": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
+}
--- a/addons/essentials/src/index.ts
+++ b/addons/essentials/src/index.ts
@ -0,0 +1,32 @@
+import fs from 'fs';
+import { logger } from '@storybook/node-logger';
+
+type PresetOptions = {
+  backgrounds?: any;
+  viewport?: any;
+};
+
+let packageJson: any = {};
+if (fs.existsSync('./package.json')) {
+  try {
+    packageJson = JSON.parse(fs.readFileSync('./package.json').toString());
+  } catch (err) {
+    logger.error(`Error reading package.json: ${err.message}`);
+  }
+}
+
+const isInstalled = (addon: string) => {
+  const { dependencies, devDependencies } = packageJson;
+  return (dependencies && dependencies[addon]) || (devDependencies && devDependencies[addon]);
+};
+
+const makeAddon = (key: string) => `@storybook/addon-${key}`;
+
+export function addons(entry: any[] = [], options: PresetOptions = {}) {
+  const registerAddons = ['backgrounds', 'viewport']
+    .filter(key => (options as any)[key] !== false)
+    .map(key => makeAddon(key))
+    .filter(addon => !isInstalled(addon))
+    .map(addon => `${addon}/register`);
+  return [...entry, ...registerAddons];
+}
--- a/addons/essentials/src/typings.d.ts
+++ b/addons/essentials/src/typings.d.ts
@ -0,0 +1 @@
+declare module 'fs';
--- a/addons/essentials/tsconfig.json
+++ b/addons/essentials/tsconfig.json
@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env", "jest"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**.test.ts"]
+}
--- a/addons/events/package.json
+++ b/addons/events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-events",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Add events to your Storybook stories.",
  "keywords": [
    "addon",
@ -31,11 +31,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/client-api": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/client-api": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "format-json": "^1.0.3",
    "lodash": "^4.17.15",
@ -50,5 +50,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/events/src/components/Panel.tsx
+++ b/addons/events/src/components/Panel.tsx
@ -11,7 +11,7 @@ import { Event as EventType, OnEmitEvent } from '../index';
 const Wrapper = styled.div({
  width: '100%',
  boxSizing: 'border-box',
-  padding: '10px',
+  padding: 10,
  minHeight: '100%',
 });

--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-google-analytics",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Storybook addon for google analytics",
  "keywords": [
    "addon",
@ -20,13 +20,14 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react-ga": "^2.5.7"
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/google-analytics/src/register.ts
+++ b/addons/google-analytics/src/register.ts
@ -8,8 +8,8 @@ addons.register('storybook/google-analytics', api => {
  ReactGA.initialize(window.STORYBOOK_GA_ID, window.STORYBOOK_REACT_GA_OPTIONS);

  api.on(STORY_CHANGED, () => {
-    const { url } = api.getUrlState();
-    ReactGA.pageview(url);
+    const { path } = api.getUrlState();
+    ReactGA.pageview(path);
  });
  api.on(STORY_ERRORED, ({ description }: { description: string }) => {
    ReactGA.exception({
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-graphql",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Storybook addon to display the GraphiQL IDE",
  "keywords": [
    "addon",
@ -29,8 +29,8 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "graphiql": "^0.16.0",
@ -42,5 +42,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/info/package.json
+++ b/addons/info/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-info",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "A Storybook addon to show additional information for your stories.",
  "keywords": [
    "addon",
@ -28,10 +28,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/client-logger": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/client-logger": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "marksy": "^7.0.0",
@ -52,5 +52,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/info/src/snapshots/index.test.js.snap
+++ b/addons/info/src/snapshots/index.test.js.snap
@ -118,7 +118,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
          "cursor": "pointer",
          "display": "block",
          "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
          "padding": "5px 15px",
          "position": "fixed",
          "right": 0,
@ -253,7 +253,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
          "cursor": "pointer",
          "display": "block",
          "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
          "padding": "5px 15px",
          "position": "fixed",
          "right": 0,
@ -386,7 +386,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
          "cursor": "pointer",
          "display": "block",
          "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
          "padding": "5px 15px",
          "position": "fixed",
          "right": 0,
@ -2627,6 +2627,11 @@ exports[`addon Info should render component description if story kind matches co
                          >
                            <l
                              className="emotion-2"
+                              scrollableNodeProps={
+                                Object {
+                                  "tabIndex": 0,
+                                }
+                              }
                            >
                              <div
                                className="emotion-2"
@ -2650,6 +2655,7 @@ exports[`addon Info should render component description if story kind matches co
                                    >
                                      <div
                                        className="simplebar-content-wrapper"
+                                        tabIndex={0}
                                      >
                                        <div
                                          className="simplebar-content"
@ -4412,6 +4418,11 @@ exports[`addon Info should render component description if story kind matches co
                          >
                            <l
                              className="emotion-2"
+                              scrollableNodeProps={
+                                Object {
+                                  "tabIndex": 0,
+                                }
+                              }
                            >
                              <div
                                className="emotion-2"
@ -4435,6 +4446,7 @@ exports[`addon Info should render component description if story kind matches co
                                    >
                                      <div
                                        className="simplebar-content-wrapper"
+                                        tabIndex={0}
                                      >
                                        <div
                                          className="simplebar-content"
@ -7416,6 +7428,11 @@ exports[`addon Info should render component description if story name matches co
                          >
                            <l
                              className="emotion-2"
+                              scrollableNodeProps={
+                                Object {
+                                  "tabIndex": 0,
+                                }
+                              }
                            >
                              <div
                                className="emotion-2"
@ -7439,6 +7456,7 @@ exports[`addon Info should render component description if story name matches co
                                    >
                                      <div
                                        className="simplebar-content-wrapper"
+                                        tabIndex={0}
                                      >
                                        <div
                                          className="simplebar-content"
@ -9429,6 +9447,11 @@ exports[`addon Info should render component description if story name matches co
                          >
                            <l
                              className="emotion-2"
+                              scrollableNodeProps={
+                                Object {
+                                  "tabIndex": 0,
+                                }
+                              }
                            >
                              <div
                                className="emotion-2"
@ -9452,6 +9475,7 @@ exports[`addon Info should render component description if story name matches co
                                    >
                                      <div
                                        className="simplebar-content-wrapper"
+                                        tabIndex={0}
                                      >
                                        <div
                                          className="simplebar-content"
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@ -18,7 +18,7 @@ const stylesheetBase = {
  button: {
    base: {
      fontFamily: 'sans-serif',
-      fontSize: '12px',
+      fontSize: 12,
      display: 'block',
      position: 'fixed',
      border: 'none',
--- a/addons/info/src/components/markdown/pre/copyButton.js
+++ b/addons/info/src/components/markdown/pre/copyButton.js
@ -16,11 +16,11 @@ function CopyButton({ onClick, toggled }) {
        alignSelf: 'flex-start',
        flexShrink: '0',
        overflow: 'hidden',
-        borderWidth: '1px',
+        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'rgb(238, 238, 238)',
        borderImage: 'initial',
-        borderRadius: '3px',
+        borderRadius: 3,
        padding: '3px 10px',
      }}
    >
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -35,11 +35,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3",
@ -52,5 +52,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/jest/src/components/Message.tsx
+++ b/addons/jest/src/components/Message.tsx
@ -22,27 +22,27 @@ class TestDetail {
 }
 const StackTrace = styled.pre<{}>(({ theme }) => ({
  background: theme.color.lighter,
-  paddingTop: '4px',
-  paddingBottom: '4px',
-  paddingLeft: '6px',
-  borderRadius: '2px',
+  paddingTop: 4,
+  paddingBottom: 4,
+  paddingLeft: 6,
+  borderRadius: 2,
  overflow: 'auto',
  margin: '10px 30px 10px 30px',
  whiteSpace: 'pre',
 }));

 const Results = styled.div({
-  paddingTop: '10px',
-  marginLeft: '31px',
-  marginRight: '30px',
+  paddingTop: 10,
+  marginLeft: 31,
+  marginRight: 30,
 });

 const Description = styled.div<{}>(({ theme }) => ({
-  paddingBottom: '10px',
-  paddingTop: '10px',
+  paddingBottom: 10,
+  paddingTop: 10,
  borderBottom: theme.appBorderColor,
-  marginLeft: '31px',
-  marginRight: '30px',
+  marginLeft: 31,
+  marginRight: 30,
  overflowWrap: 'break-word',
 }));

--- a/addons/jest/src/components/Panel.tsx
+++ b/addons/jest/src/components/Panel.tsx
@ -26,10 +26,10 @@ const Item = styled.li({

 const ProgressWrapper = styled.div({
  position: 'relative',
-  height: '10px',
-  width: '30px',
+  height: 10,
+  width: 30,
  display: 'flex',
-  top: '-2px',
+  top: -2,
 });

 const SuiteHead = styled.div({
@ -37,8 +37,8 @@ const SuiteHead = styled.div({
  alignItems: 'baseline',
  position: 'absolute',
  zIndex: 2,
-  right: '20px',
-  marginTop: '15px',
+  right: 20,
+  marginTop: 15,
 });

 const SuiteTotals = styled(({ result, className, width }) => (
@ -62,7 +62,7 @@ const SuiteTotals = styled(({ result, className, width }) => (
  alignItems: 'center',
  color: theme.color.dark,
  fontSize: '14px',
-  marginTop: '-5px',
+  marginTop: -5,
  '& > *': {
    marginRight: 10,
  },
@ -70,8 +70,8 @@ const SuiteTotals = styled(({ result, className, width }) => (

 const SuiteProgressPortion = styled.div<{ color: any; progressPercent: number }>(
  ({ theme, color, progressPercent }) => ({
-    height: '6px',
-    top: '3px',
+    height: 6,
+    top: 3,
    width: `${progressPercent}%`,
    backgroundColor: color,
  })
--- a/addons/jest/src/components/Result.tsx
+++ b/addons/jest/src/components/Result.tsx
@ -34,7 +34,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
  width: 10,
  minWidth: 10,
  color: theme.color.mediumdark,
-  marginRight: '10px',
+  marginRight: 10,
  transition: 'transform 0.1s ease-in-out',
  alignSelf: 'center',
  display: 'inline-flex',
--- a/addons/jest/src/styles.js
+++ b/addons/jest/src/styles.js
@ -1,573 +0,0 @@
-import { document } from 'global';
-
-const styles = `
-  @font-face {
-    font-family: octicons-link;
-    src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
-  }
-  .markdown-body {
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    line-height: 1.5;
-    color: #333;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size: 16px;
-    line-height: 1.5;
-    word-wrap: break-word;
-  }
-  .markdown-body .pl-c {
-    color: #969896;
-  }
-  .markdown-body .pl-c1,
-  .markdown-body .pl-s .pl-v {
-    color: #0086b3;
-  }
-  .markdown-body .pl-e,
-  .markdown-body .pl-en {
-    color: #795da3;
-  }
-  .markdown-body .pl-smi,
-  .markdown-body .pl-s .pl-s1 {
-    color: #333;
-  }
-  .markdown-body .pl-ent {
-    color: #63a35c;
-  }
-  .markdown-body .pl-k {
-    color: #a71d5d;
-  }
-  .markdown-body .pl-s,
-  .markdown-body .pl-pds,
-  .markdown-body .pl-s .pl-pse .pl-s1,
-  .markdown-body .pl-sr,
-  .markdown-body .pl-sr .pl-cce,
-  .markdown-body .pl-sr .pl-sre,
-  .markdown-body .pl-sr .pl-sra {
-    color: #183691;
-  }
-  .markdown-body .pl-v {
-    color: #ed6a43;
-  }
-  .markdown-body .pl-id {
-    color: #b52a1d;
-  }
-  .markdown-body .pl-ii {
-    color: #f8f8f8;
-    background-color: #b52a1d;
-  }
-  .markdown-body .pl-sr .pl-cce {
-    font-weight: bold;
-    color: #63a35c;
-  }
-  .markdown-body .pl-ml {
-    color: #693a17;
-  }
-  .markdown-body .pl-mh,
-  .markdown-body .pl-mh .pl-en,
-  .markdown-body .pl-ms {
-    font-weight: bold;
-    color: #1d3e81;
-  }
-  .markdown-body .pl-mq {
-    color: #008080;
-  }
-  .markdown-body .pl-mi {
-    font-style: italic;
-    color: #333;
-  }
-  .markdown-body .pl-mb {
-    font-weight: bold;
-    color: #333;
-  }
-  .markdown-body .pl-md {
-    color: #bd2c00;
-    background-color: #ffecec;
-  }
-  .markdown-body .pl-mi1 {
-    color: #55a532;
-    background-color: #eaffea;
-  }
-  .markdown-body .pl-mdr {
-    font-weight: bold;
-    color: #795da3;
-  }
-  .markdown-body .pl-mo {
-    color: #1d3e81;
-  }
-  .markdown-body .octicon {
-    display: inline-block;
-    vertical-align: text-top;
-    fill: currentColor;
-  }
-  .markdown-body a {
-    background-color: transparent;
-    -webkit-text-decoration-skip: objects;
-  }
-  .markdown-body a:active,
-  .markdown-body a:hover {
-    outline-width: 0;
-  }
-  .markdown-body strong {
-    font-weight: inherit;
-  }
-  .markdown-body strong {
-    font-weight: bolder;
-  }
-  .markdown-body h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-  .markdown-body img {
-    border-style: none;
-  }
-  .markdown-body svg:not(:root) {
-    overflow: hidden;
-  }
-  .markdown-body code,
-  .markdown-body kbd,
-  .markdown-body pre {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-  .markdown-body hr {
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible;
-  }
-  .markdown-body input {
-    font: inherit;
-    margin: 0;
-  }
-  .markdown-body input {
-    overflow: visible;
-  }
-  .markdown-body [type="checkbox"] {
-    box-sizing: border-box;
-    padding: 0;
-  }
-  .markdown-body * {
-    box-sizing: border-box;
-  }
-  .markdown-body input {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-  .markdown-body a {
-  color: #4078c0;
-    text-decoration: none;
-  }
-  .markdown-body a:hover,
-  .markdown-body a:active {
-    text-decoration: underline;
-  }
-  .markdown-body strong {
-    font-weight: 600;
-  }
-  .markdown-body hr {
-    height: 0;
-    margin: 15px 0;
-    overflow: hidden;
-    background: transparent;
-    border: 0;
-    border-bottom: 1px solid #ddd;
-  }
-  .markdown-body hr::before {
-    display: table;
-    content: "";
-  }
-  .markdown-body hr::after {
-    display: table;
-    clear: both;
-    content: "";
-  }
-  .markdown-body table {
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-  .markdown-body td,
-  .markdown-body th {
-    padding: 0;
-  }
-  .markdown-body h1,
-  .markdown-body h2,
-  .markdown-body h3,
-  .markdown-body h4,
-  .markdown-body h5,
-  .markdown-body h6 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .markdown-body h1 {
-    font-size: 32px;
-    font-weight: 600;
-  }
-  .markdown-body h2 {
-    font-size: 24px;
-    font-weight: 600;
-  }
-  .markdown-body h3 {
-    font-size: 20px;
-    font-weight: 600;
-  }
-  .markdown-body h4 {
-    font-size: 16px;
-    font-weight: 600;
-  }
-  .markdown-body h5 {
-    font-size: 14px;
-    font-weight: 600;
-  }
-  .markdown-body h6 {
-    font-size: 12px;
-    font-weight: 600;
-  }
-  .markdown-body p {
-    margin-top: 0;
-    margin-bottom: 10px;
-  }
-  .markdown-body blockquote {
-    margin: 0;
-  }
-  .markdown-body ul,
-  .markdown-body ol {
-    padding-left: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .markdown-body ol ol,
-  .markdown-body ul ol {
-    list-style-type: lower-roman;
-  }
-  .markdown-body ul ul ol,
-  .markdown-body ul ol ol,
-  .markdown-body ol ul ol,
-  .markdown-body ol ol ol {
-    list-style-type: lower-alpha;
-  }
-  .markdown-body dd {
-    margin-left: 0;
-  }
-  .markdown-body code {
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    font-size: 12px;
-  }
-  .markdown-body pre {
-    margin-top: 0;
-    margin-bottom: 0;
-    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  }
-  .markdown-body .octicon {
-    vertical-align: text-bottom;
-  }
-  .markdown-body input {
-    -webkit-font-feature-settings: "liga" 0;
-    font-feature-settings: "liga" 0;
-  }
-  .markdown-body::before {
-    display: table;
-    content: "";
-  }
-  .markdown-body::after {
-    display: table;
-    clear: both;
-    content: "";
-  }
-  .markdown-body>*:first-child {
-    margin-top: 0 !important;
-  }
-  .markdown-body>*:last-child {
-    margin-bottom: 0 !important;
-  }
-  .markdown-body a:not([href]) {
-    color: inherit;
-    text-decoration: none;
-  }
-  .markdown-body .anchor {
-    float: left;
-    padding-right: 4px;
-    margin-left: -20px;
-    line-height: 1;
-  }
-  .markdown-body .anchor:focus {
-    outline: none;
-  }
-  .markdown-body p,
-  .markdown-body blockquote,
-  .markdown-body ul,
-  .markdown-body ol,
-  .markdown-body dl,
-  .markdown-body table,
-  .markdown-body pre {
-    margin-top: 0;
-    margin-bottom: 16px;
-  }
-  .markdown-body hr {
-    height: 0.25em;
-    padding: 0;
-    margin: 24px 0;
-    background-color: #e7e7e7;
-    border: 0;
-  }
-  .markdown-body blockquote {
-    padding: 0 1em;
-    color: #777;
-    border-left: 0.25em solid #ddd;
-  }
-  .markdown-body blockquote>:first-child {
-    margin-top: 0;
-  }
-  .markdown-body blockquote>:last-child {
-    margin-bottom: 0;
-  }
-  .markdown-body kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: #555;
-    vertical-align: middle;
-    background-color: #fcfcfc;
-    border: solid 1px #ccc;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
-  }
-  .markdown-body h1,
-  .markdown-body h2,
-  .markdown-body h3,
-  .markdown-body h4,
-  .markdown-body h5,
-  .markdown-body h6 {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 600;
-    line-height: 1.25;
-  }
-  .markdown-body h1 .octicon-link,
-  .markdown-body h2 .octicon-link,
-  .markdown-body h3 .octicon-link,
-  .markdown-body h4 .octicon-link,
-  .markdown-body h5 .octicon-link,
-  .markdown-body h6 .octicon-link {
-    color: #000;
-    vertical-align: middle;
-    visibility: hidden;
-  }
-  .markdown-body h1:hover .anchor,
-  .markdown-body h2:hover .anchor,
-  .markdown-body h3:hover .anchor,
-  .markdown-body h4:hover .anchor,
-  .markdown-body h5:hover .anchor,
-  .markdown-body h6:hover .anchor {
-    text-decoration: none;
-  }
-  .markdown-body h1:hover .anchor .octicon-link,
-  .markdown-body h2:hover .anchor .octicon-link,
-  .markdown-body h3:hover .anchor .octicon-link,
-  .markdown-body h4:hover .anchor .octicon-link,
-  .markdown-body h5:hover .anchor .octicon-link,
-  .markdown-body h6:hover .anchor .octicon-link {
-    visibility: visible;
-  }
-  .markdown-body h1 {
-    padding-bottom: 0.3em;
-    font-size: 2em;
-    border-bottom: 1px solid #eee;
-  }
-  .markdown-body h2 {
-    padding-bottom: 0.3em;
-    font-size: 1.5em;
-    border-bottom: 1px solid #eee;
-  }
-  .markdown-body h3 {
-    font-size: 1.25em;
-  }
-  .markdown-body h4 {
-    font-size: 1em;
-  }
-  .markdown-body h5 {
-    font-size: 0.875em;
-  }
-  .markdown-body h6 {
-    font-size: 0.85em;
-    color: #777;
-  }
-  .markdown-body ul,
-  .markdown-body ol {
-    padding-left: 2em;
-  }
-  .markdown-body ul ul,
-  .markdown-body ul ol,
-  .markdown-body ol ol,
-  .markdown-body ol ul {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .markdown-body li>p {
-    margin-top: 16px;
-  }
-  .markdown-body li+li {
-    margin-top: 0.25em;
-  }
-  .markdown-body dl {
-    padding: 0;
-  }
-  .markdown-body dl dt {
-    padding: 0;
-    margin-top: 16px;
-    font-size: 1em;
-    font-style: italic;
-    font-weight: bold;
-  }
-  .markdown-body dl dd {
-    padding: 0 16px;
-    margin-bottom: 16px;
-  }
-  .markdown-body table {
-    display: block;
-    width: 100%;
-    overflow: auto;
-  }
-  .markdown-body table th {
-    font-weight: bold;
-  }
-  .markdown-body table th,
-  .markdown-body table td {
-    padding: 6px 13px;
-    border: 1px solid #ddd;
-  }
-  .markdown-body table tr {
-    background-color: #fff;
-    border-top: 1px solid #ccc;
-  }
-  .markdown-body table tr:nth-child(2n) {
-    background-color: #f8f8f8;
-  }
-  .markdown-body img {
-    max-width: 100%;
-    box-sizing: content-box;
-    background-color: #fff;
-  }
-  .markdown-body code {
-    padding: 0;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-    margin: 0;
-    font-size: 85%;
-    background-color: rgba(0,0,0,0.04);
-    border-radius: 3px;
-  }
-  .markdown-body code::before,
-  .markdown-body code::after {
-    letter-spacing: -0.2em;
-    content: " ";
-  }
-  .markdown-body pre {
-    word-wrap: normal;
-  }
-  .markdown-body pre>code {
-    padding: 0;
-    margin: 0;
-    font-size: 100%;
-    word-break: normal;
-    white-space: pre;
-    background: transparent;
-    border: 0;
-  }
-  .markdown-body .highlight {
-    margin-bottom: 16px;
-  }
-  .markdown-body .highlight pre {
-    margin-bottom: 0;
-    word-break: normal;
-  }
-  .markdown-body .highlight pre,
-  .markdown-body pre {
-    padding: 16px;
-    overflow: auto;
-    font-size: 85%;
-    line-height: 1.45;
-    background-color: #f7f7f7;
-    border-radius: 3px;
-  }
-  .markdown-body pre code {
-    display: inline;
-    max-width: auto;
-    padding: 0;
-    margin: 0;
-    overflow: visible;
-    line-height: inherit;
-    word-wrap: normal;
-    background-color: transparent;
-    border: 0;
-  }
-  .markdown-body pre code::before,
-  .markdown-body pre code::after {
-    content: normal;
-  }
-  .markdown-body .pl-0 {
-    padding-left: 0 !important;
-  }
-  .markdown-body .pl-1 {
-    padding-left: 3px !important;
-  }
-  .markdown-body .pl-2 {
-    padding-left: 6px !important;
-  }
-  .markdown-body .pl-3 {
-    padding-left: 12px !important;
-  }
-  .markdown-body .pl-4 {
-    padding-left: 24px !important;
-  }
-  .markdown-body .pl-5 {
-    padding-left: 36px !important;
-  }
-  .markdown-body .pl-6 {
-    padding-left: 48px !important;
-  }
-  .markdown-body .full-commit .btn-outline:not(:disabled):hover {
-    color: #4078c0;
-    border: 1px solid #4078c0;
-  }
-  .markdown-body kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    line-height: 10px;
-    color: #555;
-    vertical-align: middle;
-    background-color: #fcfcfc;
-    border: solid 1px #ccc;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
-  }
-  .markdown-body :checked+.radio-label {
-    position: relative;
-    z-index: 1;
-    border-color: #4078c0;
-  }
-  .markdown-body .task-list-item {
-    list-style-type: none;
-  }
-  .markdown-body .task-list-item+.task-list-item {
-    margin-top: 3px;
-  }
-  .markdown-body .task-list-item input {
-    margin: 0 0.2em 0.25em -1.6em;
-    vertical-align: middle;
-  }
-  .markdown-body hr {
-    border-bottom-color: #eee;
-  }
-`;
-
-if (document && !document.getElementById('github-markdown-css')) {
-  const styleNode = document.createElement('style');
-  styleNode.id = 'github-markdown-css';
-  styleNode.innerHTML = styles;
-
-  document.head.appendChild(styleNode);
-}
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-knobs",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Storybook Addon Prop Editor Component",
  "keywords": [
    "addon",
@ -29,12 +29,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/api": "5.3.0-beta.11",
-    "@storybook/client-api": "5.3.0-beta.11",
-    "@storybook/components": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
-    "@storybook/theming": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/api": "5.3.0-rc.0",
+    "@storybook/client-api": "5.3.0-rc.0",
+    "@storybook/components": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/theming": "5.3.0-rc.0",
    "@types/react-color": "^3.0.1",
    "copy-to-clipboard": "^3.0.8",
    "core-js": "^3.0.1",
@ -58,5 +58,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/addons/knobs/preset.js
+++ b/addons/knobs/preset.js
@ -0,0 +1 @@
+module.exports = require('./dist/preset');
--- a/addons/knobs/src/components/types/Number.tsx
+++ b/addons/knobs/src/components/types/Number.tsx
@ -27,12 +27,12 @@ interface NumberTypeProps extends KnobControlProps<NumberTypeKnobValue | null> {
 const RangeInput = styled.input(
  {
    boxSizing: 'border-box',
-    height: '25px',
+    height: 25,
    outline: 'none',
    border: '1px solid #f7f4f4',
    borderRadius: 2,
    fontSize: 11,
-    padding: '5px',
+    padding: 5,
    color: '#444',
  },
  {
--- a/addons/knobs/src/preset/addDecorator.ts
+++ b/addons/knobs/src/preset/addDecorator.ts
@ -0,0 +1,4 @@
+import { addDecorator } from '@storybook/client-api';
+import { withKnobs } from '../index';
+
+addDecorator(withKnobs);
--- a/addons/knobs/src/preset/index.ts
+++ b/addons/knobs/src/preset/index.ts
@ -0,0 +1,15 @@
+type KnobsOptions = {
+  addDecorator?: boolean;
+};
+
+export function addons(entry: any[] = [], options: any) {
+  return [...entry, require.resolve('../register')];
+}
+
+export function config(entry: any[] = [], { addDecorator = true }: KnobsOptions = {}) {
+  const knobsConfig = [];
+  if (addDecorator) {
+    knobsConfig.push(require.resolve('./addDecorator'));
+  }
+  return [...entry, ...knobsConfig];
+}
--- a/addons/links/package.json
+++ b/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "5.3.0-beta.11",
+  "version": "5.3.0-rc.0",
  "description": "Story Links addon for storybook",
  "keywords": [
    "addon",
@ -29,10 +29,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.3.0-beta.11",
-    "@storybook/client-logger": "5.3.0-beta.11",
-    "@storybook/core-events": "5.3.0-beta.11",
-    "@storybook/router": "5.3.0-beta.11",
+    "@storybook/addons": "5.3.0-rc.0",
+    "@storybook/client-logger": "5.3.0-rc.0",
+    "@storybook/core-events": "5.3.0-rc.0",
+    "@storybook/csf": "0.0.1",
+    "@storybook/router": "5.3.0-rc.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "prop-types": "^15.7.2",
@ -44,5 +45,6 @@
  },
  "publishConfig": {
    "access": "public"
-  }
+  },
+  "gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
 }
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`module.exports = require('../dist/frameworks/ember');`
				`@ -0,0 +1 @@`
				export const titleFunction = title => `Addons/Docs/${title}`;