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