LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Feat/589: Reimplement theme switcher in storybook (#988)

Browse Source 
* Feat/589: Reimplement theme switcher in storybook

* Feat/589: Setting a higher level 'dark' class when dark theme selected

* Feat/589: Removed class test
This commit is contained in:
Sam Keen 2022-08-10 13:24:51 +01:00 committed by GitHub
parent c1019c0ffb
commit 24a20f48e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
libs/ui-toolkit/.storybook/preview.js
View File

@ -2,6 +2,7 @@ import '../src/styles.scss';
export const parameters = { export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' }, actions: { argTypesRegex: '^on[A-Z].*' },
backgrounds: { disable: true }, backgrounds: { disable: true },
layout: 'fullscreen',
a11y: { a11y: {
config: { config: {
rules: [ rules: [
@ -18,39 +19,66 @@ export const parameters = {
], ],
}, },
}, },
/*themes: {
default: 'dark',
list: [
{ name: 'dark', class: ['dark', 'bg-black'], color: '#000' },
{ name: 'light', class: '', color: '#FFF' },
],
},*/
}; };
export const decorators = [ export const globalTypes = {
(Story, context) => theme: {
context.parameters.themes === false ? ( name: 'Theme',
<div className="text-body"> description: 'Global theme for components',
<Story /> defaultValue: 'dark',
</div> toolbar: {
) : ( icon: 'circlehollow',
<div className="text-body"> items: [
<StoryWrapper className="dark bg-black"> { value: 'light', title: 'Light' },
<Story /> { value: 'dark', title: 'Dark' },
</StoryWrapper> { value: 'sideBySide', title: 'Side by side' },
<StoryWrapper> ],
<Story /> showName: true,
</StoryWrapper> },
</div> },
), };
];
const StoryWrapper = ({ children, className }) => ( const StoryWrapper = ({ children, className, style }) => (
<div className={className}> <div style={style} className={className}>
<div className="p-16"> <div className="p-16">
<div className="dark:bg-black dark:text-white-60 bg-white text-black-60"> <div className="text-body dark:bg-black dark:text-white-60 bg-white text-black-60">
{children} {children}
</div> </div>
</div> </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];