diff options
| author | Sebastian <sebasjm@gmail.com> | 2021-07-16 12:00:39 -0300 |
|---|---|---|
| committer | Sebastian <sebasjm@gmail.com> | 2021-07-16 12:00:41 -0300 |
| commit | 56902288c6ce498cdfbd80ac9036cd457872a73b (patch) | |
| tree | d8c6fa70edcaadc33859df4817ab40c4f469057e /packages/taler-wallet-webextension/.storybook | |
| parent | 2b9686ccc69d39140d83efe0bfc6ebb2b77ff140 (diff) | |
| download | wallet-core-56902288c6ce498cdfbd80ac9036cd457872a73b.tar.xz | |
added fake header to stories
Diffstat (limited to 'packages/taler-wallet-webextension/.storybook')
| -rw-r--r-- | packages/taler-wallet-webextension/.storybook/preview.js | 36 |
1 files changed, 29 insertions, 7 deletions
diff --git a/packages/taler-wallet-webextension/.storybook/preview.js b/packages/taler-wallet-webextension/.storybook/preview.js index 0fda6ac0e..af768dde8 100644 --- a/packages/taler-wallet-webextension/.storybook/preview.js +++ b/packages/taler-wallet-webextension/.storybook/preview.js @@ -15,7 +15,9 @@ */ import { setupI18n } from "@gnu-taler/taler-util" +import { Fragment } from "preact" import { strings } from '../src/i18n/strings.ts' +import { NavBar } from '../src/popup/popup' const mockConfig = { backendURL: 'http://demo.taler.net', @@ -45,12 +47,28 @@ export const globalTypes = { export const decorators = [ - (Story, { globals }) => { - setupI18n(globals.locale, strings); - return <Story /> - }, (Story, { kind }) => { if (kind.startsWith('popup')) { + + function Body() { + const isTestingHeader = (/.*\/header\/?.*/.test(kind)); + if (isTestingHeader) { + // simple box with correct width and height + return <div style={{ width: 400, height: 320 }}> + <Story /> + </div> + } else { + const path = !isTestingHeader ? /popup(\/.*)\/.*/.exec(kind)[1] : '' + // add a fake header so it looks similar + return <Fragment> + <NavBar path={path} devMode={path === '/dev'} /> + <div style={{ padding: 8, width: 'calc(400px - 16px)', height: 'calc(320px - 34px - 16px)' }}> + <Story /> + </div> + </Fragment> + } + } + return <div class="popup-container"> <style>{` html { @@ -78,8 +96,8 @@ export const decorators = [ font-family: Arial, Helvetica, sans-serif; }`} </style> - <div style={{ padding: 8, width: 'calc(400px - 16px - 2px)', height: 'calc(320px - 34px - 16px - 2px)', border: 'black solid 1px' }}> - <Story /> + <div style={{ width: 400, border: 'black solid 1px' }}> + <Body /> </div> </div> } @@ -94,6 +112,10 @@ export const decorators = [ <h1>this story is not under wallet or popup, check title property</h1> <Story /> </div> - } + }, + (Story, { globals }) => { + setupI18n(globals.locale, strings); + return <Story /> + }, // (Story) => <ConfigContextProvider value={mockConfig}> <Story /> </ConfigContextProvider> ]; |