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