Stories

Source file extensions: .stories.(js|jsx|ts|tsx)

Stories are expresssed in Storybook’s Component Story Format (CSF).

WebComponents.dev supports Storybook 6.x improvements.

In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required default export and one or more named exports.

Stories

Stories are named exports returning a function.

export const BasicButton = () => story;

The rendering of story depends on his type.

See our Open-Source universal-story-renderer for more details.

String

export const BasicButton = () => '<button>Basic</button>';

Element

var element = document.createElement('button');
element.appendChild(document.createTextNode('Click Me!'));
export const BasicButton = () => element;

lit-html

import { html } from 'lit-html';
import './my-button.js';

const name = 'World';
export const BasicButton = () => html`<button>Hello ${name}</button>`;

uhtml

import { html } from 'uhtml';
import './my-button.js';

const name = 'World';
export const BasicButton = () => html`<button>Hello ${name}</button>`;

lighterhtml

import { html } from 'lighterhtml';
import './my-button.js';

const name = 'World';
export const BasicButton = () => html`<button>Hello ${name}</button>`;

Omi (JSX)

/** @jsx h */
import './index.js';
import { h } from 'omi';

export const story1 = () => <my-counter></my-counter>;

Stencil (JSX)

/* @jsx h */
import { h } from '@stencil/core';
import './my-counter.tsx';

export const story1 = () => <my-counter></my-counter>;

Parameters

Supported parameters are:

parameters: {
  backgrounds: {
    default: "light" | "dark",
  },
  layout: "centered" | "padded" | "fullscreen",
}

You can default the parameters of all stories in export default

export default {
  parameters: {
    backgrounds: {
      default: 'dark',
    },
    layout: 'centered',
  },
};

Or setup for a specific story

export const BasicButton = () => html`<button>Hello ${name}</button>`;
BasicButton.parameters = {
    backgrounds: {
      default: "dark",
    },
    layout: "centered",
  }
};

Args

Args allows stories to receive dynamic data as input arguments.

const Template = (args) => <Button {...args} />;

export const Text = Template.bind({});
Text.args = { label: 'hello', background: '#ff0' };

export const Emoji = Template.bind({});
Emoji.args = { ...Text.args, label: '😀 😎 👍 💯' };

For more details see Introducing Storybook Args.

References

Quick example

index.stories.js

import './index.ts';
import { html } from 'lit-html';

export default {
  parameters: {
    backgrounds: {
      default: 'dark',
    },
    layout: 'centered',
  },
};

export const story1 = () => html` <name-tag>John Foo</name-tag> `;
export const story2 = () => html` <name-tag>John Bar</name-tag> `;
story2.parameters = { backgrounds: { default: 'light' } };

JSX

TypeScript