primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-23 06:01:54 +03:00
Code Issues Projects Releases Wiki Activity

Improve the JS code in for the theme picker in the storybook decorator (#1769)

Browse Source 
* Improve the js code in for the theme picker in storybook

* Fix npm execution error in the storybook documentation

Co-authored-by: Katie Langerman <langermank@github.com>
This commit is contained in:
Adrián Bolonio 2021-11-30 20:05:26 +01:00 committed by GitHub
parent 504813c7c0
commit 3979793677
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
DEVELOP.md
View File

@ -46,7 +46,7 @@ All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and l
Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
```sh
npm storybook
npm run storybook
```
### The Storybook directory

127
docs/.storybook/preview.js
View File

@ -97,6 +97,16 @@ export const parameters = {
viewport: {viewports: customViewports}
}
const themes = [
'light',
'light_colorblind',
'light_high_contrast',
'dark',
'dark_dimmed',
'dark_high_contrast',
'dark_colorblind'
]
export const globalTypes = {
theme: {
name: 'Theme',
@ -104,16 +114,7 @@ export const globalTypes = {
defaultValue: 'light',
toolbar: {
icon: 'circlehollow',
items: [
'light',
'light_colorblind',
'light_high_contrast',
'dark',
'dark_dimmed',
'dark_high_contrast',
'dark_colorblind',
'all'
],
items: [...themes, 'all'],
showName: true
}
}
@ -121,99 +122,21 @@ export const globalTypes = {
export const decorators = [
(Story, context) => {
if (context.globals.theme === 'all') {
return (
<div class="theme-wrap">
<div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
<Story {...context} />
</div>
<div data-color-mode="light" data-light-theme="light_colorblind" className="story-wrap" id="story">
<Story {...context} />
</div>
<div data-color-mode="light" data-light-theme="light_high_contrast" className="story-wrap" id="story">
<Story {...context} />
</div>
<div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
<Story {...context} />
</div>
<div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
<Story {...context} />
</div>
<div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
<Story {...context} />
</div>
<div data-color-mode="dark" data-dark-theme="dark_colorblind" className="story-wrap" id="story">
<Story {...context} />
</div>
</div>
)
}
if (context.globals.theme === 'light') {
return (
<div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
<Story {...context} />
</div>
)
}
if (context.globals.theme === 'light_colorblind') {
return (
<div data-color-mode="light" data-light-theme="light_colorblind" className="story-wrap" id="story">
<Story {...context} />
</div>
)
}
if (context.globals.theme === 'light_high_contrast') {
return (
<div data-color-mode="light" data-light-theme="light_high_contrast" className="story-wrap" id="story">
<Story {...context} />
</div>
)
}
if (context.globals.theme === 'dark') {
return (
<div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
<Story {...context} />
</div>
)
}
if (context.globals.theme === 'dark_dimmed') {
return (
<div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
<Story {...context} />
</div>
)
}
if (context.globals.theme === 'dark_high_contrast') {
return (
<div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
<Story {...context} />
</div>
)
}
if (context.globals.theme === 'dark_colorblind') {
return (
<div data-color-mode="dark" data-dark-theme="dark_colorblind" className="story-wrap" id="story">
<Story {...context} />
</div>
)
}
return (
<div className="story-wrap" id="story">
<Story {...context} />
<div class="theme-wrap">
{ themes.map((theme) => {
if (context.globals.theme === theme || context.globals.theme === 'all') {
return <div
id="story"
className="story-wrap"
data-color-mode={theme.startsWith('dark') ? 'dark' : 'light'}
data-light-theme={theme.startsWith('light') ? theme : undefined}
data-dark-theme={theme.startsWith('dark') ? theme : undefined}
>
<Story {...context} />
</div>
}
})}
</div>
)
}