DSDS Presentation Definitions

4 definitions in this file:

presentationImage
presentationVideo
presentationCode
presentationUrl

Identifies this presentation as an image.

URL or relative path to the image file.

Alternative text describing the image content. MUST be provided for accessibility.

{ "kind": "image", "url": "https://design.acme.com/assets/button-primary-default.png", "alt": "A primary button in its default state, with a solid blue background and white label text reading Save." }

Identifies this presentation as a video.

URL or relative path to the video file.

Alternative text describing the video content. MUST be provided for accessibility.

{ "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 animation while the button maintains its width. After two seconds, the spinner is replaced by a checkmark and the label changes to Saved." }

Identifies this presentation as a code snippet.

The source code of the example.

The programming language or syntax (e.g., 'jsx', 'tsx', 'html', 'css', 'vue', 'svelte', 'swift', 'kotlin').

{ "kind": "code", "code": "<ButtonGroup>\n <Button variant=\"secondary\">Cancel</Button>\n <Button variant=\"primary\">Save</Button>\n</ButtonGroup>", "language": "jsx" }

Identifies this presentation as a URL reference to a web resource.

URL to the web resource (e.g., 'https://storybook.acme.com/?path=/story/components-button--primary', 'https://codesandbox.io/s/button-example').

{ "kind": "url", "url": "https://storybook.acme.com/?path=/story/components-button--primary" }