/
addon-backgrounds.stories.js
53 lines (50 loc) · 1.69 KB
/
addon-backgrounds.stories.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React from 'react';
import { storiesOf } from '@storybook/react';
import backgrounds, { withBackgrounds } from '@storybook/addon-backgrounds';
import BaseButton from '../components/BaseButton';
storiesOf('Addons|Backgrounds', module)
.addDecorator(withBackgrounds)
.addParameters({
backgrounds: [
{ name: 'twitter', value: '#00aced' },
{ name: 'facebook', value: '#3b5998', default: true },
],
})
.add('story 1', () => (
<BaseButton label="You should be able to switch backgrounds for this story" />
))
.add('story 2', () => <BaseButton label="This one too!" />)
.add('overriden', () => <BaseButton label="This one should have different backgrounds" />, {
backgrounds: [
{ name: 'red', value: '#F44336' },
{ name: 'blue', value: '#2196F3', default: true },
],
})
.add('disabled via []', () => <BaseButton label="This one should not use backgrounds" />, {
backgrounds: [],
})
.add(
'skipped via disable:true',
() => <BaseButton label="This one should not use backgrounds either" />,
{
backgrounds: { disable: true },
}
);
storiesOf('Addons|Backgrounds.deprecated', module)
.addDecorator(
backgrounds([
{ name: 'twitter', value: '#00aced' },
{ name: 'facebook', value: '#3b5998', default: true },
])
)
.add('story 1', () => (
<BaseButton label="You should be able to switch backgrounds for this story" />
))
.add('story 2', () => <BaseButton label="This one too!" />)
.add(
'overriden',
backgrounds([
{ name: 'red', value: '#F44336' },
{ name: 'blue', value: '#2196F3', default: true },
])(() => <BaseButton label="This one should have different backgrounds" />)
);