diff options
author | 2019-01-11 21:07:21 +0100 | |
---|---|---|
committer | 2019-01-11 21:07:21 +0100 | |
commit | 0ac2806481852249c6a2d4a032cc2c0324a58ef8 (patch) | |
tree | 03292af10a5a97b824293ff8878d2a5c821d5ed2 /uidev/src | |
parent | expose legacy styles (diff) | |
download | ferdium-app-0ac2806481852249c6a2d4a032cc2c0324a58ef8.tar.gz ferdium-app-0ac2806481852249c6a2d4a032cc2c0324a58ef8.tar.zst ferdium-app-0ac2806481852249c6a2d4a032cc2c0324a58ef8.zip |
Add toggle element to @meetfranz/forms
Diffstat (limited to 'uidev/src')
-rw-r--r-- | uidev/src/app.tsx | 47 | ||||
-rw-r--r-- | uidev/src/stores/stories.ts | 2 | ||||
-rw-r--r-- | uidev/src/stories/input.stories.tsx (renamed from uidev/src/stories/input.tsx) | 2 | ||||
-rw-r--r-- | uidev/src/stories/toggle.stories.tsx | 70 | ||||
-rw-r--r-- | uidev/src/withTheme/index.tsx | 1 |
5 files changed, 106 insertions, 16 deletions
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx index a1c9ee343..6a5c578f2 100644 --- a/uidev/src/app.tsx +++ b/uidev/src/app.tsx | |||
@@ -1,20 +1,34 @@ | |||
1 | import CSS from 'csstype'; | ||
1 | import { Classes } from 'jss'; | 2 | import { Classes } from 'jss'; |
3 | import { observer } from 'mobx-react'; | ||
4 | import DevTools from 'mobx-react-devtools'; | ||
2 | import React, { Component } from 'react'; | 5 | import React, { Component } from 'react'; |
3 | import { render } from 'react-dom'; | ||
4 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
5 | import './stories/input'; | 7 | |
6 | import { WithTheme } from './withTheme'; | 8 | import { WithTheme } from './withTheme'; |
7 | 9 | ||
10 | import './stories/input.stories'; | ||
11 | import './stories/toggle.stories'; | ||
12 | |||
8 | import { store } from './stores'; | 13 | import { store } from './stores'; |
9 | 14 | ||
10 | const styles = { | 15 | const styles = { |
16 | '@global body': { | ||
17 | margin: 0, | ||
18 | }, | ||
11 | container: { | 19 | container: { |
12 | display: 'flex', | 20 | display: 'flex', |
13 | width: '100%', | 21 | width: '100%', |
14 | }, | 22 | }, |
15 | menu: { | 23 | menu: { |
16 | width: 300, | 24 | width: 300, |
17 | position: 'fixed' as any, | 25 | position: 'fixed' as CSS.PositionProperty, |
26 | listStyleType: 'none', | ||
27 | }, | ||
28 | storyList: { | ||
29 | paddingLeft: 18, | ||
30 | marginTop: 5, | ||
31 | marginBottom: 20, | ||
18 | }, | 32 | }, |
19 | stories: { | 33 | stories: { |
20 | width: '100%', | 34 | width: '100%', |
@@ -22,6 +36,7 @@ const styles = { | |||
22 | paddingLeft: 40, | 36 | paddingLeft: 40, |
23 | paddingRight: 40, | 37 | paddingRight: 40, |
24 | borderLeft: '1px solid #CFCFCF', | 38 | borderLeft: '1px solid #CFCFCF', |
39 | background: '#f7f7f7', | ||
25 | }, | 40 | }, |
26 | sectionHeadline: { | 41 | sectionHeadline: { |
27 | fontSize: 30, | 42 | fontSize: 30, |
@@ -34,24 +49,29 @@ const styles = { | |||
34 | marginBottom: 40, | 49 | marginBottom: 40, |
35 | borderBottom: '1px solid #CFCFCF', | 50 | borderBottom: '1px solid #CFCFCF', |
36 | }, | 51 | }, |
52 | sectionLink: { | ||
53 | fontWeight: 'bold' as CSS.FontWeightProperty, | ||
54 | color: '#000', | ||
55 | textDecoration: 'none', | ||
56 | }, | ||
57 | storyLink: { | ||
58 | color: '#000', | ||
59 | textDecoration: 'none', | ||
60 | }, | ||
37 | }; | 61 | }; |
38 | 62 | ||
39 | const foo = { | 63 | export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => ( |
40 | seas: 'bar', | ||
41 | }; | ||
42 | |||
43 | export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => ( | ||
44 | <div className={classes.container}> | 64 | <div className={classes.container}> |
45 | <ul className={classes.menu}> | 65 | <ul className={classes.menu}> |
46 | {store.stories.sections.map((section, key) => ( | 66 | {store.stories.sections.map((section, key) => ( |
47 | <li key={key}> | 67 | <li key={key}> |
48 | <a href={`#section-${key}`}>{ | 68 | <a href={`#section-${key}`} className={classes.sectionLink}>{ |
49 | section.name} | 69 | section.name} |
50 | </a> | 70 | </a> |
51 | <ul> | 71 | <ul className={classes.storyList}> |
52 | {section.stories.map((story, storyKey) => ( | 72 | {section.stories.map((story, storyKey) => ( |
53 | <li key={storyKey}> | 73 | <li key={storyKey}> |
54 | <a href={`#section-${key}-story-${storyKey}`}> | 74 | <a href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}> |
55 | {story.name} | 75 | {story.name} |
56 | </a> | 76 | </a> |
57 | </li> | 77 | </li> |
@@ -78,12 +98,13 @@ export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => ( | |||
78 | {story.name} | 98 | {story.name} |
79 | </h2> | 99 | </h2> |
80 | <WithTheme> | 100 | <WithTheme> |
81 | {story.component()} | 101 | <story.component /> |
82 | </WithTheme> | 102 | </WithTheme> |
83 | </div> | 103 | </div> |
84 | ))} | 104 | ))} |
85 | </div> | 105 | </div> |
86 | ))} | 106 | ))} |
87 | </div> | 107 | </div> |
108 | <DevTools /> | ||
88 | </div> | 109 | </div> |
89 | )); | 110 | ))); |
diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts index 064bf275f..6a98c9fd3 100644 --- a/uidev/src/stores/stories.ts +++ b/uidev/src/stores/stories.ts | |||
@@ -2,7 +2,7 @@ import { store } from './index'; | |||
2 | 2 | ||
3 | export type StorySectionName = string; | 3 | export type StorySectionName = string; |
4 | export type StoryName = string; | 4 | export type StoryName = string; |
5 | export type StoryComponent = Function; | 5 | export type StoryComponent = () => JSX.Element; |
6 | 6 | ||
7 | export interface IStories { | 7 | export interface IStories { |
8 | name: string; | 8 | name: string; |
diff --git a/uidev/src/stories/input.tsx b/uidev/src/stories/input.stories.tsx index dc8f6e997..9862ee479 100644 --- a/uidev/src/stories/input.tsx +++ b/uidev/src/stories/input.stories.tsx | |||
@@ -3,8 +3,6 @@ import React from 'react'; | |||
3 | import { Input } from '@meetfranz/forms'; | 3 | import { Input } from '@meetfranz/forms'; |
4 | import { storiesOf } from '../stores/stories'; | 4 | import { storiesOf } from '../stores/stories'; |
5 | 5 | ||
6 | export const stories = () => (<div>input stories</div>); | ||
7 | |||
8 | const defaultProps = { | 6 | const defaultProps = { |
9 | label: 'Label', | 7 | label: 'Label', |
10 | id: 'test1', | 8 | id: 'test1', |
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx new file mode 100644 index 000000000..091342496 --- /dev/null +++ b/uidev/src/stories/toggle.stories.tsx | |||
@@ -0,0 +1,70 @@ | |||
1 | import { observable } from 'mobx'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import React from 'react'; | ||
4 | import uuid from 'uuid/v4'; | ||
5 | |||
6 | import { Toggle } from '@meetfranz/forms'; | ||
7 | import { storiesOf } from '../stores/stories'; | ||
8 | |||
9 | interface IStoreArgs { | ||
10 | value?: boolean; | ||
11 | checked?: boolean; | ||
12 | label?: string; | ||
13 | id?: string; | ||
14 | name?: string; | ||
15 | disabled?: boolean; | ||
16 | error?: string; | ||
17 | } | ||
18 | |||
19 | const createStore = (args?: IStoreArgs) => { | ||
20 | return observable(Object.assign({ | ||
21 | id: `element-${uuid()}`, | ||
22 | name: 'toggle', | ||
23 | label: 'Label', | ||
24 | value: true, | ||
25 | checked: false, | ||
26 | disabled: false, | ||
27 | error: '', | ||
28 | }, args)); | ||
29 | }; | ||
30 | |||
31 | const WithStoreToggle = observer(({ store }: { store: any }) => ( | ||
32 | <> | ||
33 | <Toggle | ||
34 | value={store.value} | ||
35 | checked={store.checked} | ||
36 | label={store.label} | ||
37 | id={store.id} | ||
38 | name={store.name} | ||
39 | disabled={store.disabled} | ||
40 | error={store.error} | ||
41 | onChange={() => store.checked = !store.checked} | ||
42 | /> | ||
43 | </> | ||
44 | )); | ||
45 | |||
46 | storiesOf('Toggle') | ||
47 | .add('Basic', () => ( | ||
48 | <WithStoreToggle store={createStore()} /> | ||
49 | )) | ||
50 | .add('Checked', () => ( | ||
51 | <WithStoreToggle store={createStore({ | ||
52 | checked: true, | ||
53 | })} /> | ||
54 | )) | ||
55 | .add('Disabled', () => ( | ||
56 | <WithStoreToggle store={createStore({ | ||
57 | checked: true, | ||
58 | disabled: true, | ||
59 | })} /> | ||
60 | )) | ||
61 | .add('Long label', () => ( | ||
62 | <WithStoreToggle store={createStore({ | ||
63 | label: 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.', | ||
64 | })} /> | ||
65 | )) | ||
66 | .add('With error', () => ( | ||
67 | <WithStoreToggle store={createStore({ | ||
68 | error: 'Something went wrong', | ||
69 | })} /> | ||
70 | )); | ||
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx index 17a1074d3..d7d4be3de 100644 --- a/uidev/src/withTheme/index.tsx +++ b/uidev/src/withTheme/index.tsx | |||
@@ -24,6 +24,7 @@ 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, | ||
27 | background: theme.colorContentBackground, | 28 | background: theme.colorContentBackground, |
28 | }, | 29 | }, |
29 | }); | 30 | }); |