Skip to content

Instantly share code, notes, and snippets.

@kevinSuttle
Created August 1, 2019 16:46
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save kevinSuttle/010e73e5ba9f58ee1fa651a320d108f3 to your computer and use it in GitHub Desktop.
Storybook docs - Custom Story wrapper
// @flow
/** @jsx jsx */
import * as React from 'react';
import {jsx} from '@emotion/core';
import {ThemeProvider} from 'emotion-theming';
import {Flexbox, Grid} from '../primitives';
import {darkTheme, lightTheme} from '../theme';
const storybookDocsBlock = {
minHeight: '100vh',
// KEY style declaration
// https://emotion.sh/docs/nested
'#docs-root &': {
minHeight: 'auto',
},
};
export const CustomStoryWrapper = (props: StoryProps) => {
const theme = props.theme === 'light' ? lightTheme : darkTheme;
const {
minWidth,
children,
gridTemplateColumns = props.gridTemplateColumns ||
`repeat(${React.Children.count(children)}, auto)`,
gridAutoFlow = 'column',
gridAutoColumns = 'auto',
gridAutoRows = 'auto',
maxWidth = '800px',
width = '100%',
alignGridItems = 'center',
color = 'text.default',
} = props;
return (
<ThemeProvider theme={theme}>
<Flexbox
alignItems="center"
justifyItems="center"
justifyContent="center"
padding="1em 1em 1em 0"
backgroundColor="background.appInnerChrome"
flexWrap={'wrap'}
color={color}
css={storybookDocsBlock}
>
<Grid
justifyContent="center"
gridGap={4}
gridTemplateColumns={gridTemplateColumns}
gridAutoFlow={gridAutoFlow}
gridAutoRows={gridAutoRows}
gridAutoColumns={gridAutoColumns}
maxWidth={maxWidth}
minWidth={minWidth}
padding={2}
width={width}
alignItems={alignGridItems}
{...props}
>
{children}
</Grid>
</Flexbox>
</ThemeProvider>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment