2021 October 30thAdding a description to a Storystorybook
Adding a description to a Storybook Story in either CSF or MDX.
Adding a description to a Story
CSF
Can use the story.parameters object:
// Component level
export default {
title: "components/atoms/SidebarFooter",
component: SidebarFooter,
parameters: {
docs: {
description: {
component: "Cool component description"
}
}
},
}
// Story level
export const Default = (args) => <SidebarFooter {...args} />;
Default.parameters = {
docs: {
description: {
story: "Cool description bro"
}
}
}
MDX
Just write normally using Markdown.
### SomeComponent
Some manually typed documentation text.
<Canvas withSource="none">
<Story story={stories.NavWithButton} />
</Canvas>
If you'd like to use the description typed in the component JS file via JSDoc, can use the <Description of={ComponentName} /> block.
// Component.js
/** Some JSDoc documentation text */
function SomeComponent() {
// do something
return (<div>Some HTML </div>)
}
// Component.stories.mdx
import {Title, Description} from '@storybook/addon-docs'
import {SomeComponent} from './SomeComponent'
<Title />
<Description of={SomeComponent} />