GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-20 05:02:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

ADD dual theme rendering

Browse Source
This commit is contained in:
Norbert de Langen 2020-06-24 17:26:57 +02:00
parent 003dd2abe5
commit 22e088e393
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
1 changed files with 50 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
examples/official-storybook/preview.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import React, { Fragment } from 'react';
import { isChromatic } from 'chromatic';
import { addDecorator, addParameters } from '@storybook/react';
import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
import { Global, ThemeProvider, themes, createReset, convert, styled } from '@storybook/theming';
import { withCssResources } from '@storybook/addon-cssresources';
import { DocsPage } from '@storybook/addon-docs/blocks';
@ -37,12 +38,53 @@ const themeDecorator = (storyFn, { globalArgs: { theme } }) => {
addDecorator(themeDecorator);
addDecorator((storyFn) => (
<ThemeProvider theme={convert(themes.light)}>
<Global styles={createReset} />
{storyFn()}
</ThemeProvider>
));
const ThemeBlock = styled.div(
{
position: 'absolute',
top: 0,
left: 0,
right: '50vw',
width: '50vw',
height: '100vh',
bottom: 0,
overflow: 'auto',
padding: 10,
},
({ theme }) => ({
background: theme.background.app,
}),
({ side }) =>
side === 'left'
? {
left: 0,
right: '50vw',
}
: {
right: 0,
left: '50vw',
}
);
addDecorator((storyFn) =>
isChromatic ? (
<Fragment>
<ThemeProvider theme={convert(themes.light)}>
<Global styles={createReset} />
</ThemeProvider>
<ThemeProvider theme={convert(themes.light)}>
<ThemeBlock side="left">{storyFn()}</ThemeBlock>
</ThemeProvider>
<ThemeProvider theme={convert(themes.dark)}>
<ThemeBlock side="right">{storyFn()}</ThemeBlock>
</ThemeProvider>
</Fragment>
) : (
<ThemeProvider theme={convert(themes.light)}>
<Global styles={createReset} />
{storyFn()}
</ThemeProvider>
)
);
addParameters({
a11y: {