From 3fa0b0439c7dc49ffb2c4aff89e5a0f96aacf5e2 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Thu, 3 Jan 2019 16:46:47 +0100 Subject: Add forms --- packages/forms/.storybook/theme/index.js | 58 ++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 packages/forms/.storybook/theme/index.js (limited to 'packages/forms/.storybook/theme/index.js') 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 @@ +import React from 'react'; +import injectSheet, { ThemeProvider } from 'react-jss'; +import addons, { makeDecorator } from '@storybook/addons'; +import theme from '@meetfranz/theme'; + +const defaultTheme = { + name: 'Default', + variables: theme('default'), +}; + +const darkTheme = { + name: 'Dark Mode', + variables: theme('dark'), +}; + +const themes = [defaultTheme, darkTheme]; + +const styles = (theme) => ({ + title: { + fontSize: 14, + }, + container: { + border: theme.inputBorder, + borderRadius: theme.borderRadiusSmall, + marginBottom: 20, + padding: 20, + background: theme.colorContentBackground, + }, +}); + +const Container = injectSheet(styles)(({ name, classes, story }) => ( +
+

{name}

+
+ {story} +
+
+)); + +export default makeDecorator({ + name: 'withTheme', + parameterName: 'theme', + // This means don't run this decorator if the notes decorator is not set + // skipIfNoParametersOrOptions: true, + wrapper: (getStory, context, { options }) => { + const channel = addons.getChannel(); + + return ( + <> + {themes.map(theme => ( + + + + ))} + + ); + } +}) -- cgit v1.2.3-70-g09d2