Addon-docs: Add inline story rendering support for HTML

This commit is contained in:
Michael Shilman 2020-08-05 22:11:22 +08:00
parent 10cafc82af
commit a05c6e805e
3 changed files with 20 additions and 1 deletions

View File

@ -14,6 +14,7 @@
- [React prop tables with Typescript](#react-prop-tables-with-typescript)
- [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react)
- [Docs description parameter](#docs-description-parameter)
- [6.0 Inline stories](#60-inline-stories)
- [New addon presets](#new-addon-presets)
- [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
- [Removed Deprecated APIs](#removed-deprecated-apis)
@ -305,6 +306,12 @@ Basic.parameters = { docs: { description: { story: 'some story **markdown**' }}}
In 5.3 you customized a story description with the `docs.storyDescription` parameter. This has been deprecated, and support will be removed in 7.0.
#### 6.0 Inline stories
The following frameworks now render stories inline on the Docs tab by default, rather than in an iframe: `react`, `vue`, `web-components`, `html`.
To disable inline rendering, set the `docs.inlineStories` parameter to `false`.
### New addon presets
In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.

View File

@ -89,7 +89,7 @@ Storybook Docs supports all view layers that Storybook supports except for React
| Props table | + | + | + | + | + | | | | | | |
| Props controls | + | + | | | | | | | | | |
| Description | + | + | + | + | + | | | | | | |
| Inline stories | + | + | | | + | | | | | | |
| Inline stories | + | + | | | + | + | | | | | |
**Note:** `#` = WIP support

View File

@ -0,0 +1,12 @@
import React from 'react';
import { StoryFn } from '@storybook/addons';
export const parameters = {
docs: {
inlineStories: true,
prepareForInline: (storyFn: StoryFn<string>) => (
// eslint-disable-next-line react/no-danger
<div dangerouslySetInnerHTML={{ __html: storyFn() }} />
),
},
};