import { EuiMarkdownFormat , EuiFlexGroup , EuiFlexItem , EuiHorizontalRule , EuiText } from '@elastic/eui' ; import { DecoratorFunction } from '@storybook/addons' ; import React from 'react' ; import { ThemeId , ThemeIdProvider , BackgroundIdProvider } from './use_base_theme' ; export const StoryWrapper = ( Story , context ) => { if ( ! Story ) return < div > No Story < /div>; const themeId = context . globals ?. theme ?? ThemeId . Light ; const backgroundId = context . globals ?. background ; const markdown = context ?. parameters ?. markdown ; return ( < ThemeIdProvider value = { themeId } > < BackgroundIdProvider value = { backgroundId } > < EuiFlexGroup gutterSize = "none" direction = "column" responsive = { false } > < EuiFlexItem id = "story-header" grow = { false } > < EuiFlexGroup gutterSize = "none" direction = "column" responsive = { false } > < EuiFlexItem > < EuiText > < h1 style = { { fontWeight : 200 } } > { context . kind } < /h1> < /EuiText> < /EuiFlexItem> < EuiFlexItem > < EuiText > < h2 style = { { fontWeight : 400 } } > { context . name } < /h2> < /EuiText> < /EuiFlexItem> < EuiHorizontalRule / > < /EuiFlexGroup> < /EuiFlexItem> < EuiFlexItem grow = { false } > < div id = "story-root" > < Story { ... context } / > < /div> < /EuiFlexItem> { markdown && ( < EuiFlexItem style = { { padding : 24 } } > < EuiMarkdownFormat > { markdown } < /EuiMarkdownFormat> < /EuiFlexItem>)} < /EuiFlexGroup> < /BackgroundIdProvider> < /ThemeIdProvider>); } ;