diff options
author | 2019-01-14 22:26:06 +0100 | |
---|---|---|
committer | 2019-01-14 22:26:06 +0100 | |
commit | 8b4231e3109d4b29e4d90f4553f718a1d7867bc5 (patch) | |
tree | b7c89bd60d01cca3692a3e6df580669fd08a4b27 /uidev/src | |
parent | Update package.json (diff) | |
download | ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.tar.gz ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.tar.zst ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.zip |
Add buttons
Diffstat (limited to 'uidev/src')
-rw-r--r-- | uidev/src/app.html | 6 | ||||
-rw-r--r-- | uidev/src/app.tsx | 7 | ||||
-rw-r--r-- | uidev/src/stories/button.stories.tsx | 74 | ||||
-rw-r--r-- | uidev/src/stories/input.stories.tsx | 51 | ||||
-rw-r--r-- | uidev/src/withTheme/index.tsx | 1 |
5 files changed, 110 insertions, 29 deletions
diff --git a/uidev/src/app.html b/uidev/src/app.html index 40801775e..2557bf25e 100644 --- a/uidev/src/app.html +++ b/uidev/src/app.html | |||
@@ -4,12 +4,6 @@ | |||
4 | <head> | 4 | <head> |
5 | <title>UIDev</title> | 5 | <title>UIDev</title> |
6 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet"> | 6 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet"> |
7 | <style> | ||
8 | * { | ||
9 | font-family: 'Open Sans', sans-serif; | ||
10 | font-size: 14px; | ||
11 | } | ||
12 | </style> | ||
13 | </head> | 7 | </head> |
14 | 8 | ||
15 | <body> | 9 | <body> |
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx index 6a5c578f2..0fd524e34 100644 --- a/uidev/src/app.tsx +++ b/uidev/src/app.tsx | |||
@@ -7,14 +7,20 @@ import injectSheet from 'react-jss'; | |||
7 | 7 | ||
8 | import { WithTheme } from './withTheme'; | 8 | import { WithTheme } from './withTheme'; |
9 | 9 | ||
10 | import './stories/button.stories'; | ||
10 | import './stories/input.stories'; | 11 | import './stories/input.stories'; |
11 | import './stories/toggle.stories'; | 12 | import './stories/toggle.stories'; |
12 | 13 | ||
13 | import { store } from './stores'; | 14 | import { store } from './stores'; |
14 | 15 | ||
16 | import { theme, ThemeType } from '@meetfranz/theme'; | ||
17 | const defaultTheme = theme(ThemeType.default); | ||
18 | |||
15 | const styles = { | 19 | const styles = { |
16 | '@global body': { | 20 | '@global body': { |
17 | margin: 0, | 21 | margin: 0, |
22 | fontSize: defaultTheme.uiFontSize, | ||
23 | fontFamily: '\'Open Sans\', sans-serif', | ||
18 | }, | 24 | }, |
19 | container: { | 25 | container: { |
20 | display: 'flex', | 26 | display: 'flex', |
@@ -24,6 +30,7 @@ const styles = { | |||
24 | width: 300, | 30 | width: 300, |
25 | position: 'fixed' as CSS.PositionProperty, | 31 | position: 'fixed' as CSS.PositionProperty, |
26 | listStyleType: 'none', | 32 | listStyleType: 'none', |
33 | fontSize: 14, | ||
27 | }, | 34 | }, |
28 | storyList: { | 35 | storyList: { |
29 | paddingLeft: 18, | 36 | paddingLeft: 18, |
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx new file mode 100644 index 000000000..1a54eb6bf --- /dev/null +++ b/uidev/src/stories/button.stories.tsx | |||
@@ -0,0 +1,74 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | ||
4 | |||
5 | import { Button } from '@meetfranz/forms'; | ||
6 | import { storiesOf } from '../stores/stories'; | ||
7 | |||
8 | const defaultProps = { | ||
9 | label: 'Button', | ||
10 | id: 'test1', | ||
11 | name: 'test1', | ||
12 | type: 'button', | ||
13 | onClick: (e: React.MouseEvent<HTMLButtonElement>) => console.log('click event', e), | ||
14 | disabled: false, | ||
15 | }; | ||
16 | |||
17 | const createStore = (args?: any) => { | ||
18 | return observable(Object.assign({}, defaultProps, args)); | ||
19 | }; | ||
20 | |||
21 | const WithStoreButton = observer(({ store }: { store: any }) => ( | ||
22 | <> | ||
23 | <Button | ||
24 | {...Object.assign({}, defaultProps, store)} | ||
25 | onClick={() => { | ||
26 | store.busy = !store.busy; | ||
27 | |||
28 | window.setTimeout(() => { | ||
29 | store.busy = !store.busy; | ||
30 | }, 1000); | ||
31 | }} | ||
32 | /> | ||
33 | </> | ||
34 | )); | ||
35 | |||
36 | storiesOf('Button') | ||
37 | .add('Basic', () => ( | ||
38 | <WithStoreButton store={createStore()} /> | ||
39 | )) | ||
40 | .add('Secondary', () => ( | ||
41 | <WithStoreButton store={createStore({ | ||
42 | buttonType: 'secondary', | ||
43 | })} /> | ||
44 | )) | ||
45 | .add('Warning', () => ( | ||
46 | <WithStoreButton store={createStore({ | ||
47 | buttonType: 'warning', | ||
48 | })} /> | ||
49 | )) | ||
50 | .add('Danger', () => ( | ||
51 | <WithStoreButton store={createStore({ | ||
52 | buttonType: 'danger', | ||
53 | })} /> | ||
54 | )) | ||
55 | .add('Inverted', () => ( | ||
56 | <WithStoreButton store={createStore({ | ||
57 | buttonType: 'inverted', | ||
58 | })} /> | ||
59 | )) | ||
60 | .add('Full width', () => ( | ||
61 | <WithStoreButton store={createStore({ | ||
62 | stretch: true, | ||
63 | })} /> | ||
64 | )) | ||
65 | .add('Disabled', () => ( | ||
66 | <WithStoreButton store={createStore({ | ||
67 | disabled: true, | ||
68 | })} /> | ||
69 | )) | ||
70 | .add('With loader', () => ( | ||
71 | <WithStoreButton store={createStore({ | ||
72 | busy: true, | ||
73 | })} /> | ||
74 | )); | ||
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 |
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx index d7d4be3de..17a1074d3 100644 --- a/uidev/src/withTheme/index.tsx +++ b/uidev/src/withTheme/index.tsx | |||
@@ -24,7 +24,6 @@ const styles = (theme: Theme) => ({ | |||
24 | borderRadius: theme.borderRadiusSmall, | 24 | borderRadius: theme.borderRadiusSmall, |
25 | marginBottom: 20, | 25 | marginBottom: 20, |
26 | padding: 20, | 26 | padding: 20, |
27 | paddingBottom: 5, | ||
28 | background: theme.colorContentBackground, | 27 | background: theme.colorContentBackground, |
29 | }, | 28 | }, |
30 | }); | 29 | }); |