How to use @open-wc/demoing-storybook - 6 common examples
To help you get started, we’ve selected a few @open-wc/demoing-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.
preignition / multi-chart / stories / charts.stories.js View on Github 
.add('Pie', () => withClassPropertiesKnobs(Pie, {
template: html `
<h4 slot="header">This is a pie</h4>
<code slot="footer">selected: ${selected}</code>
`}),{
// overrides: el => [async function run() {
await fetch(new URL('../custom-elements.json', import.meta.url))
.then(handleAsJson)
.then(setCustomElements);
addDecorator(withA11y);
addParameters({
a11y: {
config: {},
options: {
checks: { 'color-contrast': { options: { noScroll: true } } },
restoreScroll: true
}
},
docs: {
iframeHeight: '200px'
}
});
}import { storiesOf, html, withKnobs, withClassPropertiesKnobs } from '@open-wc/demoing-storybook';
import { UprtclCommon } from '../dist/UprtclCommon.js';
import '../dist/uprtcl-common.js';
storiesOf('uprtcl-common', module)
.addDecorator(withKnobs)
.add('Documentation', () => withClassPropertiesKnobs(UprtclCommon))
.add(
'Alternative Title',
() => html`
`,
);const keys = [{key: 'ananas'}, {key: 'banana'}, {key: 'apple'}, {key: 'orange'}];
const d1 = multipleRnd(keys.map(k => k.key), 50);
const d2 = multipleRnd(keys.map(k => k.key), 50);
import { default as Pie } from '../src/chart/multi-chart-pie.js';
import {default as data } from './data.js';
import '../index.js';
const colorScale = scaleOrdinal().range(schemeCategory10);
const innerRadius = 30;
const padAngle = 0.07;
let selected = '';
storiesOf('Demo | Charts', module)
.addDecorator(withKnobs)
.add('Pie', () => withClassPropertiesKnobs(Pie, {
template: html `
<h4 slot="header">This is a pie</h4>
<code slot="footer">selected: ${selected}</code>
.add('Documentation', () => withClassPropertiesKnobs(UprtclCommon))
.add(async function run() {
await fetch(new URL('../custom-elements.json', import.meta.url))
.then(handleAsJson)
.then(setCustomElements);
addDecorator(withA11y);
addParameters({
a11y: {
config: {},
options: {
checks: { 'color-contrast': { options: { noScroll: true } } },
restoreScroll: true
}
},
docs: {
iframeHeight: '200px'
}
});
}@open-wc/demoing-storybook
Storybook configuration following open-wc recommendations
