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