diff options
Diffstat (limited to 'packages/forms/stories/input.stories.js')
-rw-r--r-- | packages/forms/stories/input.stories.js | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/packages/forms/stories/input.stories.js b/packages/forms/stories/input.stories.js new file mode 100644 index 000000000..2cc784209 --- /dev/null +++ b/packages/forms/stories/input.stories.js | |||
@@ -0,0 +1,95 @@ | |||
1 | import React from 'react'; | ||
2 | |||
3 | import { storiesOf } from '@storybook/react'; | ||
4 | import { action } from '@storybook/addon-actions'; | ||
5 | |||
6 | import { Input } from '../lib'; | ||
7 | |||
8 | const defaultProps = { | ||
9 | label: 'Label', | ||
10 | id: 'test1', | ||
11 | name: 'test1', | ||
12 | onChange: action('changed'), | ||
13 | focus: true, | ||
14 | }; | ||
15 | |||
16 | const defaultPasswordProps = { | ||
17 | label: 'Password', | ||
18 | type: 'password', | ||
19 | id: 'test1', | ||
20 | name: 'test1', | ||
21 | onChange: action('changed'), | ||
22 | focus: true, | ||
23 | }; | ||
24 | |||
25 | storiesOf('Input', module) | ||
26 | .add('Basic', () => ( | ||
27 | <Input | ||
28 | {...defaultProps} | ||
29 | placeholder="Placeholder text" | ||
30 | /> | ||
31 | )) | ||
32 | .add('Without Label', () => ( | ||
33 | <Input | ||
34 | {...defaultProps} | ||
35 | showLabel={false} | ||
36 | /> | ||
37 | )) | ||
38 | .add('Disabled', () => ( | ||
39 | <Input {...defaultProps} disabled /> | ||
40 | )) | ||
41 | .add('With prefix', () => ( | ||
42 | <Input | ||
43 | {...defaultProps} | ||
44 | prefix="https://" | ||
45 | /> | ||
46 | )) | ||
47 | .add('With suffix', () => ( | ||
48 | <Input | ||
49 | {...defaultProps} | ||
50 | suffix=".meetfranz.com" | ||
51 | /> | ||
52 | )) | ||
53 | .add('With pre-/suffix', () => ( | ||
54 | <Input | ||
55 | {...defaultProps} | ||
56 | prefix="https://" | ||
57 | suffix=".meetfranz.com" | ||
58 | /> | ||
59 | )) | ||
60 | .add('With error', () => ( | ||
61 | <Input | ||
62 | {...defaultProps} | ||
63 | value="faulty input" | ||
64 | error="This is a generic error message." | ||
65 | /> | ||
66 | )); | ||
67 | |||
68 | storiesOf('Password', module) | ||
69 | // .addDecorator(withThemesProvider(themes)) | ||
70 | .add('Basic', () => ( | ||
71 | <Input | ||
72 | {...defaultPasswordProps} | ||
73 | /> | ||
74 | )) | ||
75 | .add('Show password toggle', () => ( | ||
76 | <Input | ||
77 | {...defaultPasswordProps} | ||
78 | showPasswordToggle | ||
79 | /> | ||
80 | )) | ||
81 | .add('Score password', () => ( | ||
82 | <Input | ||
83 | {...defaultPasswordProps} | ||
84 | showPasswordToggle | ||
85 | scorePassword | ||
86 | /> | ||
87 | )) | ||
88 | .add('Score password with error', () => ( | ||
89 | <Input | ||
90 | {...defaultPasswordProps} | ||
91 | error="Password is too short" | ||
92 | showPasswordToggle | ||
93 | scorePassword | ||
94 | /> | ||
95 | )); | ||