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