The preview content.
References:
presentationImage, presentationVideo, presentationCode, presentationUrl
[
{
"kind": "preview",
"presentation": {
"kind": "image",
"url": "https://design.acme.com/assets/button-primary-default.png",
"alt": "A primary Acme Button with a solid blue background and white label text reading Save."
}
},
{
"kind": "preview",
"presentation": {
"kind": "video",
"url": "https://design.acme.com/assets/button-loading-interaction.mp4",
"alt": "A user clicks a primary Button labeled Save. The label is replaced by a spinner while the button maintains its width. After two seconds, the spinner is replaced by a checkmark and the label changes to Saved."
}
},
{
"kind": "preview",
"presentation": {
"kind": "code",
"code": "<Button variant=\"primary\" onClick={handleSave}>\n Save\n</Button>",
"language": "jsx"
}
},
{
"kind": "preview",
"presentation": {
"kind": "url",
"url": "https://storybook.acme.com/?path=/story/components-button--primary"
}
}
]
Design System Documentation Spec (DSDS) 0.2.1 — Draft Specification
GitHub