chore: update storybook docs

This commit is contained in:
Hossein Mehrabi 2023-10-23 11:41:30 +03:30
parent 7b73881023
commit 3387098431
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
2 changed files with 64 additions and 10 deletions

View File

@ -38,7 +38,7 @@ const useGlobals = () => {
themeFont: {
defaultValue: 'sans-serif',
description: 'Theme font',
name: 'Theme Font',
name: 'Theme font',
toolbar: {
icon: '',
items: [
@ -148,6 +148,9 @@ const preview: Preview = {
typeof meta?.parameters?.docs?.controls === 'undefined' ||
meta?.parameters?.docs?.controls === true
const storyId = new URLSearchParams(window.location.search).get(
'storyId',
) as string
const embedded =
new URLSearchParams(window.location.search).get('embedded') === 'true'
const globalControls =
@ -193,7 +196,13 @@ const preview: Preview = {
))}
</div>
)}
<Canvas className="canvas" withToolbar={!hideToolbar} />
<Canvas
className="canvas"
withToolbar={!hideToolbar}
{...(storyId && stories[storyId]
? { story: stories[storyId] as any }
: {})}
/>
{controls && !hideControls && <Controls />}
</div>
<Global

View File

@ -4,7 +4,7 @@ import {
SpacingDesignTokens,
TypographyDesignTokens,
} from '../../docs/components/DesignTokens'
import { Typography } from '../Typography'
import { Typography as TypographyComponent } from '../Typography'
import { ThemeProvider, ThemeProviderProps } from './ThemeProvider'
const subtitle = ``
@ -28,18 +28,18 @@ export const Root: StoryObj<ThemeProviderProps> = {
render: (args) => {
return (
<div>
<Typography variant="h6" component="h2">
<TypographyComponent variant="h6" component="h2">
Colour
</Typography>
</TypographyComponent>
<ColorDesignTokens />
<Typography variant="h6" component="h2">
<TypographyComponent variant="h6" component="h2">
Spacing
</Typography>
</TypographyComponent>
<SpacingDesignTokens />
<Typography variant="h6" component="h2">
Typography
</Typography>
<TypographyComponent variant="h6" component="h2">
TypographyComponent
</TypographyComponent>
<TypographyDesignTokens />
</div>
)
@ -54,3 +54,48 @@ export const Root: StoryObj<ThemeProviderProps> = {
args: {},
}
export const Colors: StoryObj<ThemeProviderProps> = {
render: (args) => {
return <ColorDesignTokens />
},
parameters: {
docs: {
source: {
code: null,
},
},
},
args: {},
}
export const Spacing: StoryObj<ThemeProviderProps> = {
render: (args) => {
return <SpacingDesignTokens />
},
parameters: {
docs: {
source: {
code: null,
},
},
},
args: {},
}
export const Typography: StoryObj<ThemeProviderProps> = {
render: (args) => {
return <TypographyDesignTokens />
},
parameters: {
docs: {
source: {
code: null,
},
},
},
args: {},
}