/
Form.story.js
89 lines (85 loc) · 2.99 KB
/
Form.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
import React from 'react'
import { storiesOf } from '@kadira/storybook'
import { Col, ControlLabel, FormGroup, FormControl, Form, InputGroup,
Checkbox, Radio } from 'react-bootstrap'
storiesOf('Form', module)
.add('default', () => (
<Form>
<FormGroup>
<FormControl type='text' placeholder='Text' />
<FormControl type='text' disabled placeholder='disabled' />
</FormGroup>
<FormGroup bsSize='lg'>
<FormControl type='text' placeholder='large' />
</FormGroup>
<FormGroup bsSize='sm'>
<FormControl type='text' placeholder='small' />
</FormGroup>
</Form>
))
.add('validation states', () => (
<Form>
<FormGroup controlId='formValidationSuccess1'
validationState='success'>
<ControlLabel>Input with success</ControlLabel>
<FormControl type='text' />
</FormGroup>
<FormGroup controlId='formValidationWarning1'
validationState='warning'>
<ControlLabel>Input with warning</ControlLabel>
<FormControl type='text' />
</FormGroup>
<FormGroup controlId='formValidationError1' validationState='error'>
<ControlLabel>Input with error</ControlLabel>
<FormControl type='text' />
</FormGroup>
<FormGroup controlId='formValidationWarning3'
validationState='warning'>
<ControlLabel>Input group with warning</ControlLabel>
<InputGroup>
<InputGroup.Addon>@</InputGroup.Addon>
<FormControl type='text' />
</InputGroup>
<FormControl.Feedback />
</FormGroup>
</Form>
))
.add('inline label', () => (
<Form componentClass='fieldset' horizontal>
<FormGroup controlId='formValidationError3' validationState='error'>
<Col componentClass={ControlLabel} xs={3}>
Input with error
</Col>
<Col xs={9}>
<FormControl type='text' />
<FormControl.Feedback />
</Col>
</FormGroup>
<FormGroup controlId='formValidationSuccess4'
validationState='success'>
<Col componentClass={ControlLabel} xs={3}>
Input group with success
</Col>
<Col xs={9}>
<InputGroup>
<InputGroup.Addon>@</InputGroup.Addon>
<FormControl type='text' />
</InputGroup>
<FormControl.Feedback />
</Col>
</FormGroup>
</Form>
))
.add('checkbox and radios', () => (
<span>
<Checkbox validationState='success'>
Checkbox with success
</Checkbox>
<Radio validationState='warning'>
Radio with warning
</Radio>
<Checkbox validationState='error'>
Checkbox with error
</Checkbox>
</span>
))