aboutsummaryrefslogtreecommitdiffstats
path: root/uidev/src/stories/input.stories.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'uidev/src/stories/input.stories.tsx')
-rw-r--r--uidev/src/stories/input.stories.tsx69
1 files changed, 0 insertions, 69 deletions
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx
deleted file mode 100644
index 2a252ee66..000000000
--- a/uidev/src/stories/input.stories.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
1import * as React from 'react';
2
3import { Input } from '@meetfranz/forms';
4import { v4 as uuid } from 'uuid';
5import { storiesOf } from '../stores/stories';
6
7const defaultProps = () => {
8 const id = uuid();
9 return {
10 label: 'Label',
11 id: `test-${id}`,
12 name: `test-${id}`,
13 onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
14 console.log('changed event', e),
15 };
16};
17
18const defaultPasswordProps = () => {
19 const id = uuid();
20 return {
21 label: 'Password',
22 id: `test-${id}`,
23 name: `test-${id}`,
24 type: 'password',
25 onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
26 console.log('changed event', e),
27 };
28};
29
30storiesOf('Input')
31 .add('Basic', () => (
32 <Input {...defaultProps()} placeholder="Placeholder text" />
33 ))
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', () => (
38 <Input {...defaultProps()} suffix=".meetfranz.com" />
39 ))
40 .add('With pre-suffix', () => (
41 <Input {...defaultProps()} prefix="https://" suffix=".meetfranz.com" />
42 ))
43 .add('With error', () => (
44 <Input
45 {...defaultProps()}
46 value="faulty input"
47 error="This is a generic error message."
48 />
49 ))
50 .add('Type number with min & max', () => (
51 <Input {...defaultProps()} type="number" min={1} max={10} />
52 ));
53
54storiesOf('Password')
55 .add('Basic', () => <Input {...defaultPasswordProps()} />)
56 .add('Show password toggle', () => (
57 <Input {...defaultPasswordProps()} showPasswordToggle />
58 ))
59 .add('Score password', () => (
60 <Input {...defaultPasswordProps()} showPasswordToggle scorePassword />
61 ))
62 .add('Score password with error', () => (
63 <Input
64 {...defaultPasswordProps()}
65 error="Password is too short"
66 showPasswordToggle
67 scorePassword
68 />
69 ));