24a20f48e1
* Feat/589: Reimplement theme switcher in storybook * Feat/589: Setting a higher level 'dark' class when dark theme selected * Feat/589: Removed class test
85 lines
2.2 KiB
JavaScript
85 lines
2.2 KiB
JavaScript
import '../src/styles.scss';
|
|
export const parameters = {
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
backgrounds: { disable: true },
|
|
layout: 'fullscreen',
|
|
a11y: {
|
|
config: {
|
|
rules: [
|
|
{
|
|
// Disabled only for storybook because we display both the dark and light variants of the components on the same page without differentiating the ids, so it will always error.
|
|
id: 'duplicate-id-aria',
|
|
selector: '[data-testid="form-group"] > label',
|
|
},
|
|
{
|
|
// Disabled because we can't control the radix radio group component and it claims to be accessible to begin with, so hopefully no issues.
|
|
id: 'button-name',
|
|
selector: '[role=radiogroup] > button',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
};
|
|
|
|
export const globalTypes = {
|
|
theme: {
|
|
name: 'Theme',
|
|
description: 'Global theme for components',
|
|
defaultValue: 'dark',
|
|
toolbar: {
|
|
icon: 'circlehollow',
|
|
items: [
|
|
{ value: 'light', title: 'Light' },
|
|
{ value: 'dark', title: 'Dark' },
|
|
{ value: 'sideBySide', title: 'Side by side' },
|
|
],
|
|
showName: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
const StoryWrapper = ({ children, className, style }) => (
|
|
<div style={style} className={className}>
|
|
<div className="p-16">
|
|
<div className="text-body dark:bg-black dark:text-white-60 bg-white text-black-60">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const lightThemeClasses = 'bg-white text-black';
|
|
const darkThemeClasses = 'dark bg-black text-white';
|
|
|
|
const withTheme = (Story, context) => {
|
|
const theme = context.parameters.theme || context.globals.theme;
|
|
const storyClasses = `h-[100vh] w-[100vw] ${
|
|
theme === 'dark' ? darkThemeClasses : lightThemeClasses
|
|
}`;
|
|
|
|
document.body.classList.toggle('dark', theme === 'dark');
|
|
|
|
return theme === 'sideBySide' ? (
|
|
<>
|
|
<div className={lightThemeClasses}>
|
|
<StoryWrapper>
|
|
<Story />
|
|
</StoryWrapper>
|
|
</div>
|
|
<div className={darkThemeClasses}>
|
|
<StoryWrapper>
|
|
<Story />
|
|
</StoryWrapper>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className={storyClasses}>
|
|
<StoryWrapper>
|
|
<Story />
|
|
</StoryWrapper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const decorators = [withTheme];
|