diff options
author | 2021-08-16 23:13:06 +0530 | |
---|---|---|
committer | 2021-08-16 23:13:06 +0530 | |
commit | bbed06e2ba255199703343625129712ef7707697 (patch) | |
tree | 19a525fbd1d621a6e561b1a687195269e54f43d5 /uidev/src/stories/input.stories.tsx | |
parent | chore: update outdated node_modules (#1807) (diff) | |
download | ferdium-app-bbed06e2ba255199703343625129712ef7707697.tar.gz ferdium-app-bbed06e2ba255199703343625129712ef7707697.tar.zst ferdium-app-bbed06e2ba255199703343625129712ef7707697.zip |
Revert "chore: update outdated node_modules (#1807)"
This reverts commit 26a9dba22236bc22a7612107630282cfe02d20e0.
Diffstat (limited to 'uidev/src/stories/input.stories.tsx')
-rw-r--r-- | uidev/src/stories/input.stories.tsx | 66 |
1 files changed, 51 insertions, 15 deletions
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx index 4136cfd4d..889539266 100644 --- a/uidev/src/stories/input.stories.tsx +++ b/uidev/src/stories/input.stories.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { v4 as uuid } from 'uuid'; | 2 | import uuid from 'uuid/v4'; |
3 | 3 | ||
4 | import { Input } from '@meetfranz/forms'; | 4 | import { Input } from '@meetfranz/forms'; |
5 | import { storiesOf } from '../stores/stories'; | 5 | import { storiesOf } from '../stores/stories'; |
@@ -10,8 +10,7 @@ const defaultProps = () => { | |||
10 | label: 'Label', | 10 | label: 'Label', |
11 | id: `test-${id}`, | 11 | id: `test-${id}`, |
12 | name: `test-${id}`, | 12 | name: `test-${id}`, |
13 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | 13 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), |
14 | console.log('changed event', e), | ||
15 | }; | 14 | }; |
16 | }; | 15 | }; |
17 | 16 | ||
@@ -22,23 +21,44 @@ const defaultPasswordProps = () => { | |||
22 | id: `test-${id}`, | 21 | id: `test-${id}`, |
23 | name: `test-${id}`, | 22 | name: `test-${id}`, |
24 | type: 'password', | 23 | type: 'password', |
25 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => | 24 | onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e), |
26 | console.log('changed event', e), | ||
27 | }; | 25 | }; |
28 | }; | 26 | }; |
29 | 27 | ||
30 | storiesOf('Input') | 28 | storiesOf('Input') |
31 | .add('Basic', () => ( | 29 | .add('Basic', () => ( |
32 | <Input {...defaultProps()} placeholder="Placeholder text" /> | 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 | /> | ||
33 | )) | 49 | )) |
34 | .add('Without Label', () => <Input {...defaultProps()} showLabel={false} />) | ||
35 | .add('Disabled', () => <Input {...defaultProps()} disabled />) | ||
36 | .add('With prefix', () => <Input {...defaultProps()} prefix="https://" />) | ||
37 | .add('With suffix', () => ( | 50 | .add('With suffix', () => ( |
38 | <Input {...defaultProps()} suffix=".meetfranz.com" /> | 51 | <Input |
52 | {...defaultProps()} | ||
53 | suffix=".meetfranz.com" | ||
54 | /> | ||
39 | )) | 55 | )) |
40 | .add('With pre-suffix', () => ( | 56 | .add('With pre-suffix', () => ( |
41 | <Input {...defaultProps()} prefix="https://" suffix=".meetfranz.com" /> | 57 | <Input |
58 | {...defaultProps()} | ||
59 | prefix="https://" | ||
60 | suffix=".meetfranz.com" | ||
61 | /> | ||
42 | )) | 62 | )) |
43 | .add('With error', () => ( | 63 | .add('With error', () => ( |
44 | <Input | 64 | <Input |
@@ -48,16 +68,32 @@ storiesOf('Input') | |||
48 | /> | 68 | /> |
49 | )) | 69 | )) |
50 | .add('Type number with min & max', () => ( | 70 | .add('Type number with min & max', () => ( |
51 | <Input {...defaultProps()} type="number" min={1} max={10} /> | 71 | <Input |
72 | {...defaultProps()} | ||
73 | type="number" | ||
74 | min={1} | ||
75 | max={10} | ||
76 | /> | ||
52 | )); | 77 | )); |
53 | 78 | ||
54 | storiesOf('Password') | 79 | storiesOf('Password') |
55 | .add('Basic', () => <Input {...defaultPasswordProps()} />) | 80 | .add('Basic', () => ( |
81 | <Input | ||
82 | {...defaultPasswordProps()} | ||
83 | /> | ||
84 | )) | ||
56 | .add('Show password toggle', () => ( | 85 | .add('Show password toggle', () => ( |
57 | <Input {...defaultPasswordProps()} showPasswordToggle /> | 86 | <Input |
87 | {...defaultPasswordProps()} | ||
88 | showPasswordToggle | ||
89 | /> | ||
58 | )) | 90 | )) |
59 | .add('Score password', () => ( | 91 | .add('Score password', () => ( |
60 | <Input {...defaultPasswordProps()} showPasswordToggle scorePassword /> | 92 | <Input |
93 | {...defaultPasswordProps()} | ||
94 | showPasswordToggle | ||
95 | scorePassword | ||
96 | /> | ||
61 | )) | 97 | )) |
62 | .add('Score password with error', () => ( | 98 | .add('Score password with error', () => ( |
63 | <Input | 99 | <Input |