fbredius/storybook

import { Story, Canvas, Meta } from '@storybook/addon-docs';
import { action } from '@storybook/addon-actions';

# Storybook Docs for HTML

<Meta title="Addons/Docs" />

## Story definition

Hallelujah! HTML is working out of the box without modification.
How you like them apples?!

<Story name="heading" height="100px">
  {'<h1>Hello World</h1>'}
</Story>

## Function stories

<Story name="function" height="100px">
  {() => {
    const btn = document.createElement('button');
    btn.innerHTML = 'Hello Button';
    btn.addEventListener('click', action('Click'));
    return btn;
  }}
</Story>

## Standard source

<Canvas>
  <Story name="standard source" height="100px">
    {'<h1>Standard source</h1>'}
  </Story>
</Canvas>

## Custom source

<Canvas>
  <Story name="custom source" height="100px" parameters={{ docs: { source: { code: 'hello' } } }}>
    {'<h1>Custom source</h1>'}
  </Story>
</Canvas>

## Transformed source

<Canvas>
  <Story
    name="transformed source"
    height="100px"
    parameters={{ docs: { transformSource: (src) => `transformed: ${src}` } }}
  >
    {'<h1>Some source</h1>'}
  </Story>
</Canvas>

## Story reference

You can also reference an existing story from within your MDX file.

<Story id="welcome--welcome" height="800px" />