43 lines
881 B
JavaScript
43 lines
881 B
JavaScript
export const parameters = {
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/
|
|
}
|
|
},
|
|
backgrounds: {
|
|
values: [
|
|
{
|
|
name: 'light',
|
|
value: '#ffffff'
|
|
},
|
|
{
|
|
name: 'dark',
|
|
value: '#0a0a23'
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
export const decorators = [renderTheme];
|
|
|
|
/**
|
|
* Gets matching theme name for currently selected background and provides it
|
|
* to the story.
|
|
*/
|
|
function renderTheme(Story, context) {
|
|
const selectedBackgroundValue = context.globals.backgrounds?.value;
|
|
const selectedBackgroundName = parameters.backgrounds.values.find(
|
|
bg => bg.value === selectedBackgroundValue
|
|
)?.name;
|
|
|
|
// There can be no background selected, prevent "undefined" className
|
|
const className = selectedBackgroundName || '';
|
|
|
|
return (
|
|
<div className={className}>
|
|
<Story />
|
|
</div>
|
|
);
|
|
}
|