How to use @open-wc/storybook - 10 common examples
To help you get started, we’ve selected a few @open-wc/storybook examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
open-wc / open-wc / packages / generator-open-wc / generators / scaffold-demoing / templates / static / stories / example.stories.js View on Github 
el.foo = 'bar';
el.addEventListener('click', e => alert(e.target.foo));
return el;
})
.add('lit-html', () => html`
<button> alert(e.target.foo)}>click me</button>
`);
const globalParameter = 'globalParameter';
const chapterParameter = 'chapterParameter';
const storyParameter = 'storyParameter';
addParameters({ globalParameter });
storiesOf('Core|Parameters', module)
.addParameters({ chapterParameter })
.add('passed to story', ({ parameters: { fileName, ...parameters } }) => `
<div>Parameters are ${JSON.stringify(parameters)}</div>
`, {
storyParameter,
});
// disable until https://github.com/storybooks/storybook/issues/4321 is resolved
// storiesOf('Addon|Knobs', module)
// .addDecorator(withKnobs)
// .add('button label', () => html`
// <button>${text('Button label', 'You can change me in the tab KNOBS')}</button>
// `)
// .add('complex', () => {
// const name = text('Name', 'Jane');
// const stock = number('Stock', 20, {withBackgrounds,
withNotes,
document,
// disable until https://github.com/storybooks/storybook/issues/4321 is resolved
// withKnobs,
// text,
// button,
// number,
// select,
// date,
// color,
// array,
// boolean,
} from '@open-wc/storybook';
storiesOf('Addon|Actions', module)
.add('Action only', () => html`
<button>click me</button>
`)
.add('Action and method', () => html`
<button> action('log2')(e.target)}>click me</button>
`);
storiesOf('Addon|Links', module)
.add('To Welcome', () => html`
<button>Go to welcome</button>
`);
storiesOf('Addon|Backgrounds', module)
.addDecorator(// date,
// color,
// array,
// boolean,
} from '@open-wc/storybook';
storiesOf('Addon|Actions', module)
.add('Action only', () => html`
<button>click me</button>
`)
.add('Action and method', () => html`
<button> action('log2')(e.target)}>click me</button>
`);
storiesOf('Addon|Links', module)
.add('To Welcome', () => html`
<button>Go to welcome</button>
`);
storiesOf('Addon|Backgrounds', module)
.addDecorator(
withBackgrounds([
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
]),
)
.add('Button with text', () => `
<button>Click me</button>
<p>See tab "Backgrounds" at the bottom</p>
`);import { unsafeStatic } from '@open-wc/storybook';
// eslint-disable-next-line import/no-mutable-exports
export let opts = {
tag: unsafeStatic('<%= tagName %>'),
header: '<<%= tagName %>>',
};
export function setOptions(newOptions) {
opts = newOptions;
}import { storiesOf, html } from '@open-wc/storybook';
import '../set-game.js';
import { generateDeck, generateCard } from '../helpers';
storiesOf('Set Game', module)
.add(
'Welcome',
() => html`
<h1>Welcome the Set Game</h1>
<p>
It's a demo project showing everything
<a href="http://open-wc.org">open-wc</a> has to offer
</p>
<p>
Using open-wc's generators and guidelines creating something like this should be a peace of
cake
</p>
<p>This includes:</p>
<ul>
<li>Code Quality</li>
<li>Testing</li></ul>storiesOf('Addon|Actions', module)
.add('Action only', () => html`
<button>click me</button>
`)
.add('Action and method', () => html`
<button> action('log2')(e.target)}>click me</button>
`);
storiesOf('Addon|Links', module)
.add('To Welcome', () => html`
<button>Go to welcome</button>
`);
storiesOf('Addon|Backgrounds', module)
.addDecorator(
withBackgrounds([
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
]),
)
.add('Button with text', () => `
<button>Click me</button>
<p>See tab "Backgrounds" at the bottom</p>
`);
storiesOf('Addon|Notes', module)
.addDecorator(withNotes)
.add('Simple note', () => `
<p><strong>See tab "notes" at the bottom.</strong></p>.add('Button with text', () => `
<button>Click me</button>
<p>See tab "Backgrounds" at the bottom</p>
`);
storiesOf('Addon|Notes', module)
.addDecorator(withNotes)
.add('Simple note', () => `
<p><strong>See tab "notes" at the bottom.</strong></p>
`, {
notes: 'My notes on some <strong>bold</strong> text',
});
storiesOf('Core|Methods for rendering', module)
.add('html string', () => '<div>Rendered with string</div>')
.add('document.createElement', () => {
const el = document.createElement('button');
el.innerText = 'click me';
el.foo = 'bar';
el.addEventListener('click', e => alert(e.target.foo));
return el;
})
.add('lit-html', () => html`
<button> alert(e.target.foo)}>click me</button>
`);
const globalParameter = 'globalParameter';
const chapterParameter = 'chapterParameter';
const storyParameter = 'storyParameter';storiesOf('Addon|Backgrounds', module)
.addDecorator(
withBackgrounds([
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
]),
)
.add('Button with text', () => `
<button>Click me</button>
<p>See tab "Backgrounds" at the bottom</p>
`);
storiesOf('Addon|Notes', module)
.addDecorator(withNotes)
.add('Simple note', () => `
<p><strong>See tab "notes" at the bottom.</strong></p>
`, {
notes: 'My notes on some <strong>bold</strong> text',
});
storiesOf('Core|Methods for rendering', module)
.add('html string', () => '<div>Rendered with string</div>')
.add('document.createElement', () => {
const el = document.createElement('button');
el.innerText = 'click me';
el.foo = 'bar';
el.addEventListener('click', e => alert(e.target.foo));
return el;<ul>
<li>Quantity: 2, 2, 3 ✗</li>
<li>Color: different - red, green, blue ✓</li>
<li>Shape: same- all skewed ✓</li>
<li>Filling: different - empty, full, striped ✓</li>
</ul>
`,
)
.add(
'Game',
() => html`
`,
);
storiesOf('Game Parts', module)
.add('Rigged Game', () => {
const data = {
quantity: 1,
color: 'red',
shape: 'bar',
filling: 'empty',
};
const card1 = generateCard(data);
const card2 = generateCard({ ...data, color: 'green' });
const card3 = generateCard({ ...data, color: 'blue' });
return html`
`;
})
.add(
'Card',import {
storiesOf,
html,
} from '@open-wc/storybook';
import '../<%= tagName %>.js';
storiesOf('<%= tagName %>', module)
.add('default', () => html`
<<%= tagName %>>user content tag: <%= tagName %>>
`)
.add('right', () => html`
<<%= tagName %> class="right">user content tag: <%= tagName %>>
`);@open-wc/storybook
Storybook configuration following open-wc recommendations
