fbredius/storybook

import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs';
import { html } from 'lit';
import '../../../../demo-wc-card.js';

# Storybook Docs for Web Components

<Meta title="Misc. / Addons - Docs" />

## Story definition

A story can be a simple return of `html`

<Story name="simple" height="220px">
  {html` <demo-wc-card>Hello World</demo-wc-card> `}
</Story>

## API

You can show the api table of a web component at any point in your documentation.

<ArgsTable of="demo-wc-card" />

## Function stories

Or a function

<Story name="function" height="220px">
  {() => {
    const rows = [
      { header: 'health', value: '200' },
      { header: 'mana', value: '100' },
    ];
    return html`
      <demo-wc-card back-side .rows=${rows}> A card with data on the back </demo-wc-card>
    `;
  }}
</Story>

## Wrapper

You can also wrap your live demos in a nice little wrapper.

<Canvas withToolbar>
  <Story name="wrapper" height="220px">
    {html` <demo-wc-card>Hello World</demo-wc-card> `}
  </Story>
</Canvas>

## Story reference

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

<Canvas withToolbar>
  <Story id="welcome--welcome" height="500px" inline={false} />
</Canvas>

## Stories not inline

By default stories are rendered inline.
For web components that is usually fine as they are style encapsulated via shadow dom.
However when you have a style tag in you template it might be best to show them in an iframe.

To always use iframes you can set

```js
addParameters({
  docs: {
    inlineStories: false,
  },
});
```

or add it to individual stories.

```
<Story inline={false} />
```

<Canvas withToolbar>
  <Story name="notInline" height="220px">
    {html`
    <style>
      p { color: red; }
    </style>
    <p>Makes all p tags red... so best to not render inline</pd>
  `}
  </Story>
</Canvas>