mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-20 05:02:37 +08:00
Updates urls for addons
This commit is contained in:
jonniebigodes
parent
7e02352a50
commit
36a3c4a8e8
@ -4,7 +4,7 @@ This Storybook addon can be helpful to make your UI components more accessible.
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting started
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Addon Actions can be used to display data received by event handlers i
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Addon Backgrounds can be used to change background colors inside the p
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -8,12 +8,12 @@ Each addon is documented and maintained by the core team and will be upgraded al
|
||||
|
||||
Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
|
||||
|
||||
- [Actions](https://github.com/storybookjs/storybook/tree/next/addons/actions)
|
||||
- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)
|
||||
- [Controls](https://github.com/storybookjs/storybook/tree/next/addons/controls)
|
||||
- [Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs)
|
||||
- [Viewport](https://github.com/storybookjs/storybook/tree/next/addons/viewport)
|
||||
- [Toolbars](https://github.com/storybookjs/storybook/tree/next/addons/toolbars)
|
||||
- [Actions](https://github.com/storybookjs/storybook/tree/next/code/addons/actions)
|
||||
- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/code/addons/backgrounds)
|
||||
- [Controls](https://github.com/storybookjs/storybook/tree/next/code/addons/controls)
|
||||
- [Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs)
|
||||
- [Viewport](https://github.com/storybookjs/storybook/tree/next/code/addons/viewport)
|
||||
- [Toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars)
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook addon for inspecting Jest unit test results.
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
|
||||
> Check out the above [Live Storybook](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel).
|
||||
|
||||
@ -87,7 +87,7 @@ Assuming that you have already created a test file for your component (e.g., `My
|
||||
In your story file, add a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) to your story's default export to display the results:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx
|
||||
// MyComponent.stories.js|jsx
|
||||
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters), for example:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx
|
||||
// MyComponent.stories.js|jsx
|
||||
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
@ -152,7 +152,7 @@ export const decorators = [
|
||||
Then in your story file:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx
|
||||
// MyComponent.stories.js|jsx
|
||||
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
@ -180,6 +180,8 @@ then "MyComponent" will be used to find your test file results. It currently doe
|
||||
You can disable the addon for a single story by setting the `jest` parameter to `{disable: true}`:
|
||||
|
||||
```js
|
||||
// MyComponent.stories.js|jsx
|
||||
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
export default {
|
||||
@ -206,6 +208,8 @@ Using this addon with Angular will require some additional configuration. You'll
|
||||
Then, in your `.storybook/preview.js`, you'll need to add a decorator with the following:
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
|
||||
import results from '../.jest-test-results.json';
|
||||
@ -221,6 +225,8 @@ export const decorators = [
|
||||
Finally, in your story, you'll need to include the following:
|
||||
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
|
||||
import MyComponent from './MyComponent.component';
|
||||
|
||||
@ -4,7 +4,7 @@ StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storyboo
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
To use StoryShots, you must use your existing Storybook stories as the input for Jest Snapshot Testing.
|
||||
|
||||
@ -31,7 +31,7 @@ That's all.
|
||||
|
||||
Now run your Jest test command. (Usually, `npm test`.) Then you can see all of your stories are converted as Jest snapshot tests.
|
||||
|
||||
|
||||
|
||||
|
||||
### Testing stories that rely on addon-added decorators
|
||||
|
||||
|
||||
@ -228,7 +228,7 @@ import { axeTest } from '@storybook/addon-storyshots-puppeteer';
|
||||
initStoryshots({ suite: 'A11y checks', test: axeTest() });
|
||||
```
|
||||
|
||||
For configuration, it uses the same `story.parameters.a11y` parameter as [`@storybook/addon-a11y`](https://github.com/storybookjs/storybook/tree/next/addons/a11y#parameters)
|
||||
For configuration, it uses the same `story.parameters.a11y` parameter as [`@storybook/addon-a11y`](https://github.com/storybookjs/storybook/tree/next/code/addons/a11y#parameters)
|
||||
|
||||
### Specifying options to `axeTest`
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ This addon is used to show stories source in the addon panel.
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
- [Getting Started](#getting-started)
|
||||
- [Install using preset](#install-using-preset)
|
||||
|
||||
@ -8,7 +8,7 @@ The Toolbars addon controls global story rendering options from [Storybook's](ht
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user