GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +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
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:
```js
import '@storybook/addon-backgrounds/register';
module.exports = {
addons: ['@storybook/addon-backgrounds/register']
}
```
## Usage
@ -28,19 +30,23 @@ Then write your stories like this:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.addParameters({
export default {
title: 'Button',
parameters: {
backgrounds: [
{ name: 'twitter', value: '#00aced', default: true },
{ 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
import { addParameters } from '@storybook/react'; // <- or your storybook framework
@ -51,48 +57,52 @@ addParameters({
{ 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:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.add('with text', () => <button>Click me</button>, {
backgrounds: [{
name: 'red', value: 'rgba(255, 0, 0)',
}]
});
export default {
title: 'Button',
}
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:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.add('example 1', () => <button>Click me</button>, {
backgrounds: [],
});
export default {
title: 'Button',
}
storiesOf('Button', module)
.add('example 2', () => <button>Click me</button>, {
backgrounds: { disable: true },
});
```
## 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.
```js
addonAPI.getChannel().on('storybook/background/update', (bg) => {
console.log('Background color', bg.selected);
console.log('Background name', bg.name);
});
export const noBackgrounds = () => (
<button>Click me</button>
);
defaultView.story = {
parameters: {
background: [],
},
};
export const disabledbackgrounds = () => (
<button>Click me</button>
);
defaultView.story = {
parameters: {
background: { disabled: true },
},
};
```