diff options
author | 2019-01-03 16:46:47 +0100 | |
---|---|---|
committer | 2019-01-03 16:46:47 +0100 | |
commit | 3fa0b0439c7dc49ffb2c4aff89e5a0f96aacf5e2 (patch) | |
tree | 450b9e21d0bfac2cdde28995a04a3643b3ea2a37 /packages/forms/.storybook/theme | |
parent | Add theme (diff) | |
download | ferdium-app-3fa0b0439c7dc49ffb2c4aff89e5a0f96aacf5e2.tar.gz ferdium-app-3fa0b0439c7dc49ffb2c4aff89e5a0f96aacf5e2.tar.zst ferdium-app-3fa0b0439c7dc49ffb2c4aff89e5a0f96aacf5e2.zip |
Add forms
Diffstat (limited to 'packages/forms/.storybook/theme')
-rw-r--r-- | packages/forms/.storybook/theme/index.js | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/packages/forms/.storybook/theme/index.js b/packages/forms/.storybook/theme/index.js new file mode 100644 index 000000000..f016f21eb --- /dev/null +++ b/packages/forms/.storybook/theme/index.js | |||
@@ -0,0 +1,58 @@ | |||
1 | import React from 'react'; | ||
2 | import injectSheet, { ThemeProvider } from 'react-jss'; | ||
3 | import addons, { makeDecorator } from '@storybook/addons'; | ||
4 | import theme from '@meetfranz/theme'; | ||
5 | |||
6 | const defaultTheme = { | ||
7 | name: 'Default', | ||
8 | variables: theme('default'), | ||
9 | }; | ||
10 | |||
11 | const darkTheme = { | ||
12 | name: 'Dark Mode', | ||
13 | variables: theme('dark'), | ||
14 | }; | ||
15 | |||
16 | const themes = [defaultTheme, darkTheme]; | ||
17 | |||
18 | const styles = (theme) => ({ | ||
19 | title: { | ||
20 | fontSize: 14, | ||
21 | }, | ||
22 | container: { | ||
23 | border: theme.inputBorder, | ||
24 | borderRadius: theme.borderRadiusSmall, | ||
25 | marginBottom: 20, | ||
26 | padding: 20, | ||
27 | background: theme.colorContentBackground, | ||
28 | }, | ||
29 | }); | ||
30 | |||
31 | const Container = injectSheet(styles)(({ name, classes, story }) => ( | ||
32 | <article> | ||
33 | <h1 className={classes.title}>{name}</h1> | ||
34 | <div className={classes.container}> | ||
35 | {story} | ||
36 | </div> | ||
37 | </article> | ||
38 | )); | ||
39 | |||
40 | export default makeDecorator({ | ||
41 | name: 'withTheme', | ||
42 | parameterName: 'theme', | ||
43 | // This means don't run this decorator if the notes decorator is not set | ||
44 | // skipIfNoParametersOrOptions: true, | ||
45 | wrapper: (getStory, context, { options }) => { | ||
46 | const channel = addons.getChannel(); | ||
47 | |||
48 | return ( | ||
49 | <> | ||
50 | {themes.map(theme => ( | ||
51 | <ThemeProvider theme={theme.variables}> | ||
52 | <Container story={getStory(context)} name={theme.name} /> | ||
53 | </ThemeProvider> | ||
54 | ))} | ||
55 | </> | ||
56 | ); | ||
57 | } | ||
58 | }) | ||