How to use the @storybook/polymer.addDecorator function in @storybook/polymer

To help you get started, we’ve selected a few @storybook/polymer 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 zazuko / openlayers-elements / .storybook / config.js View on Github external
import { configure, addDecorator } from '@storybook/polymer';
import { withKnobs } from '@storybook/addon-knobs';
import { setOptions } from '@storybook/addon-options';
import '@storybook/addon-console';

addDecorator(withKnobs);

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

setOptions({
    selectedAddonPanel: 'storybooks/storybook-addon-knobs',
});

configure(loadStories, module);
github open-wc / open-wc / packages / demoing-storybook / demo / .storybook / config.js View on Github external
import { configure, addDecorator } from '@storybook/polymer';
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';

const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(withA11y);
configure(loadStories, module);
github uprtcl / js-uprtcl / modules / evees / .storybook / config.js View on Github external
import { configure, addDecorator } from '@storybook/polymer';
import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';

const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(withA11y);
configure(loadStories, module);
github nuxeo / nuxeo-elements / storybook / .storybook / config.js View on Github external
import { configure, addDecorator, addParameters, setAddon } from '@storybook/polymer';
import { withActions } from '@storybook/addon-actions';
import { withKnobs } from '@storybook/addon-knobs';
import { analyse } from './analysis';
import theme from './theme';
import './nuxeo-demo-theme';

addDecorator(withKnobs);

setAddon({
  addElement(tag, fn) {
    const analysis = analyse(tag);
    const { events, notes } = analysis;
    const storyFn = () => fn(analysis);
    this.add(`<${tag}>`, () => withActions(...events)(storyFn), { notes });
  },
});

addParameters({
  backgrounds: [
    { name: 'Default', value: '#f5f5f5' },
    { name: 'Dark', value: '#060826' },
    { name: 'Kawai', value: '#f8d3e0' },
    { name: 'Light', value: '#f7f7f7' },
github carbon-design-system / carbon-custom-elements / .storybook / config.ts View on Github external
${containerStyles}
    
    Skip to main content
    <div class="bx--body bx-ce-demo-devenv--container" role="${hasMainTag ? 'none' : 'main'}" data-floating-menu-container="" name="main-content">
      ${result}
    </div>
    End of content
  `;
});

addDecorator(withKnobs);

addDecorator((story, { parameters }) =&gt; {
  const { knobs } = parameters;
  if (Object(knobs) === knobs) {
    if (!parameters.props) {
      parameters.props = {};
    }
    Object.keys(knobs).forEach(name =&gt; {
      if (typeof knobs[name] === 'function') {
        parameters.props[name] = knobs[name]();
      }
    });
  }
  return story();
});

@storybook/polymer

Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.

MIT
Latest version published 4 years ago

Package Health Score

67 / 100
Full package analysis