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.

github preignition / multi-chart / stories / charts.stories.js View on Github external
  .add('Pie', () => withClassPropertiesKnobs(Pie, {
    template: html `
      
        
        
        
        
        <h4 slot="header">This is a pie</h4>
        <code slot="footer">selected: ${selected}</code>
        
      
      `}),{
    // overrides: el =&gt; [
github bennypowers / stripe-elements / .storybook / preview.js View on Github external
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'
    }
  });
}
github uprtcl / js-uprtcl / modules / evees / stories / index.stories.js View on Github external
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', () =&gt; withClassPropertiesKnobs(UprtclCommon))
  .add(
    'Alternative Title',
    () =&gt; html`
      
    `,
  );
github preignition / multi-chart / stories / charts.stories.js View on Github external
const keys =  [{key: 'ananas'}, {key: 'banana'}, {key: 'apple'}, {key: 'orange'}];
const d1 = multipleRnd(keys.map(k =&gt; k.key), 50);
const d2 = multipleRnd(keys.map(k =&gt; 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', () =&gt; withClassPropertiesKnobs(Pie, {
    template: html `
      
        
        
        
        
        <h4 slot="header">This is a pie</h4>
        <code slot="footer">selected: ${selected}</code>
        
github uprtcl / js-uprtcl / modules / evees / stories / index.stories.js View on Github external
  .add('Documentation', () => withClassPropertiesKnobs(UprtclCommon))
  .add(
github bennypowers / stripe-elements / .storybook / preview.js View on Github external
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

MIT
Latest version published 4 years ago

Package Health Score

64 / 100
Full package analysis