fbredius/storybook

View on GitHub
docs/snippets/web-components/button-story-using-args.js.mdx

Summary

Maintainability
Test Coverage
```js
// demo-button.stories.js

import { html } from 'lit-html';

import './demo-button';

export default {
  title: 'Button',
};

//πŸ‘‡ We create a β€œtemplate” of how args map to rendering
const Template = ({ background, label }) =>
  html`<demo-button .background=${background} .label=${label}></demo-button>`;

//πŸ‘‡ Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };

export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: 'πŸ˜„πŸ‘πŸ˜πŸ’―' };

export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: 'πŸ“šπŸ“•πŸ“ˆπŸ€“' };
```