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