-
Notifications
You must be signed in to change notification settings - Fork 51
/
Button.story.js
104 lines (102 loc) · 3.29 KB
/
Button.story.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React from 'react'
import cx from 'classnames'
import { storiesOf, action } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { host } from 'storybook-host'
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'
import Button from '.'
/*
* See .storybook/README.md for info on the component storybook.
*/
storiesOf('Button', module)
.addDecorator(withKnobs)
.addDecorator(host({
title: 'Button',
align: 'center middle'
}))
.add('plain', withInfo()(() => (
<Button title="Click should trigger onClick action"
onClick={action('onClick')}>
Unstyled button. Pretty plain. Should be used with some styles.
</Button>
)))
.add('plain (disabled)', withInfo()(() => (
<Button title="Should not dispatch onClick action"
onClick={action('onClick')}
disabled>
Plain disabled button. Click event should <strong>not</strong> be fired.
</Button>
)))
.add('colour styles', withInfo()(() => (
<ul>
<li>
<Button title="Click should trigger onClick action"
onClick={action('onClick')}
className="Button Button--primary">
Button Button--primary
</Button>
</li>
<li>
<Button title="Click should trigger onClick action"
onClick={action('onClick')}
className="Button Button--success">
Button Button--success
</Button>
</li>
<li>
<Button title="Click should trigger onClick action"
onClick={action('onClick')}
className="Button Button--unsure">
Button Button--unsure
</Button>
</li>
<li>
<Button title="Click should trigger onClick action"
onClick={action('onClick')}
className="Button Button--neutral">
Button Button--neutral
</Button>
</li>
</ul>
)))
.add('rounded and styled', withInfo()(() => (
<Button title="Styles from suggestion panel button"
onClick={action('onClick')}
className="Button Button--small u-rounded Button--primary">
Button Button--small u-rounded Button--primary
</Button>
)))
.add('BUTTON BUILDER', withInfo({
text: 'Use KNOBS tab to adjust the settings, ' +
'then copy your code from Story Source',
maxPropsIntoLine: 1,
maxPropStringLength: 500
})(() => {
return (
<Button title={text('title (tooltip)', 'Click Me')}
disabled={boolean('disabled', false)}
onClick={action('onClick')}
className={cx('Button',
select('colour style', [
'Button--default',
'Button--primary',
'Button--secondary',
'Button--success',
'Button--unsure',
'Button--neutral',
'Button--warning',
'Button--danger'
], 'Button--default'),
{
'is-active': boolean('.is-active', false),
'u-rounded': boolean('.u-rounded', false),
'Button--snug': boolean('.Button--snug', false),
'Button--small': boolean('.Button--small', false),
'Button--invisible': boolean('.Button--invisible', false)
}
)}>
{text('Content', 'Click Me')}
</Button>
)
}))
// TODO add more variety of styles. See if there is a stylesheet to compare to