GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 05:51:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

MIGRATE addon-background documentation to CSF & triconfig

Browse Source
This commit is contained in:
Norbert de Langen 2019-11-25 21:34:24 +01:00
parent 4ecc44364a
commit 56f476b4cd
1 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
addons/backgrounds/README.md
View File

@ -14,12 +14,14 @@ npm i -D @storybook/addon-backgrounds
## Configuration ## Configuration
Then create a file called `addons.js` in your storybook config. Then create a file called `main.js` in your storybook config.
Add following content to it: Add following content to it:
```js ```js
import '@storybook/addon-backgrounds/register'; module.exports = {
addons: ['@storybook/addon-backgrounds/register']
}
``` ```
## Usage ## Usage
@ -28,19 +30,23 @@ Then write your stories like this:
```js ```js
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module) export default {
.addParameters({ title: 'Button',
parameters: {
backgrounds: [ backgrounds: [
{ name: 'twitter', value: '#00aced', default: true }, { name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' }, { name: 'facebook', value: '#3b5998' },
], ]
}) },
.add('with text', () => <button>Click me</button>); };
export const defaultView = () => (
<button>Click me</button>
);
``` ```
You can add the backgrounds to all stories with `addParameters` in `.storybook/config.js`: You can add the backgrounds to all stories with `addParameters` in `.storybook/preview.js`:
```js ```js
import { addParameters } from '@storybook/react'; // <- or your storybook framework import { addParameters } from '@storybook/react'; // <- or your storybook framework
@ -51,48 +57,52 @@ addParameters({
{ name: 'facebook', value: '#3b5998' }, { name: 'facebook', value: '#3b5998' },
], ],
}); });
// should be before configure()
``` ```
If you want to override backgrounds for a single story or group of stories, pass the `backgrounds` parameter: If you want to override backgrounds for a single story or group of stories, pass the `backgrounds` parameter:
```js ```js
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module) export default {
.add('with text', () => <button>Click me</button>, { title: 'Button',
backgrounds: [{ }
name: 'red', value: 'rgba(255, 0, 0)',
}] export const defaultView = () => (
}); <button>Click me</button>
);
defaultView.story = {
parameters: {
background: [
{ name: 'red', value: 'rgba(255, 0, 0)' },
],
},
};
``` ```
If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `[]`, or use `{ disable: true }` to skip the addon: If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `[]`, or use `{ disable: true }` to skip the addon:
```js ```js
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module) export default {
.add('example 1', () => <button>Click me</button>, { title: 'Button',
backgrounds: [], }
});
storiesOf('Button', module) export const noBackgrounds = () => (
.add('example 2', () => <button>Click me</button>, { <button>Click me</button>
backgrounds: { disable: true }, );
}); defaultView.story = {
``` parameters: {
background: [],
## Events },
};
If you want to react to a background change—for instance to implement some custom logic in your Storybook—you can subscribe to the `storybook/background/update` event. It will be emitted when the user changes the background. export const disabledbackgrounds = () => (
<button>Click me</button>
```js );
addonAPI.getChannel().on('storybook/background/update', (bg) => { defaultView.story = {
console.log('Background color', bg.selected); parameters: {
console.log('Background name', bg.name); background: { disabled: true },
}); },
};
``` ```