diff --git a/.storybook/addons.js b/.storybook/addons.js index b5fba72ec45..e32e5d2cc74 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -1,5 +1,5 @@ // The order of these imports defines the order of the tabs in the addons panel -import '@storybook/addon-backgrounds/register'; +import '@storybook/addon-contexts/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-notes/register'; diff --git a/.storybook/config.js b/.storybook/config.js index 6a02acd7218..c2b768fe0ca 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -7,11 +7,12 @@ import { storiesOf, } from '@storybook/react'; import {setConsoleOptions} from '@storybook/addon-console'; +import {withContexts} from '@storybook/addon-contexts/react'; import {create} from '@storybook/theming'; import tokens from '@shopify/polaris-tokens'; import {AppProvider} from '../src'; import {Playground} from '../playground/Playground'; -import en from '../locales/en.json'; +import enTranslations from '../locales/en.json'; addParameters({ options: { @@ -29,27 +30,67 @@ addParameters({ // SEE https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/theming/index.md }), }, - backgrounds: [ - {name: 'Sky Light', value: tokens.colorSkyLight, default: true}, - {name: 'White', value: '#fff'}, - ], percy: { skip: true, widths: [375, 1280], }, }); -addDecorator(function StrictModeDecorator(story) { - return {story()}; +addDecorator(function PaddingDecorator(story) { + return
{story()}
; }); -addDecorator(function AppProviderDecorator(story) { - return ( -
- {story()} -
- ); -}); +function StrictModeToggle({isStrict = false, children}) { + const Wrapper = isStrict ? React.StrictMode : React.Fragment; + return {children}; +} + +addDecorator( + withContexts([ + { + icon: 'dashboard', + title: 'Strict Mode', + components: [StrictModeToggle], + params: [ + {name: 'React Strict Mode On', default: true, props: {isStrict: true}}, + {name: 'React Strict Mode Off', props: {isStrict: false}}, + ], + }, + { + icon: 'paintbrush', + title: 'Themes', + components: [AppProvider], + params: [ + { + name: 'Global Theming Disabled', + default: true, + props: {i18n: enTranslations}, + }, + { + name: 'Global Theming Enabled - Light Mode', + props: { + i18n: enTranslations, + features: { + unstableGlobalTheming: true, + theme: {UNSTABLE_colors: {surface: '#FAFAFA'}}, + }, + }, + }, + { + name: 'Global Theming Enabled - Dark Mode', + props: { + i18n: enTranslations, + features: {unstableGlobalTheming: true}, + theme: { + colors: {topBar: {background: '#357997'}}, + UNSTABLE_colors: {surface: '#111213'}, + }, + }, + }, + ], + }, + ]), +); // addon-console setConsoleOptions((opts) => { diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 19309addd8b..6db92f3f116 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,13 +1,4 @@