JavaScript @storybook/html storiesOf Beispiele

Beispiel #1

Datei: index.stories.js Projekt: rinatsafin/storybook

/* global document */
import { storiesOf } from '@storybook/html';

storiesOf('Demo', module)
  .add('heading', () => '<h1>Hello World</h1>')
  .add('button', () => {
    const button = document.createElement('button');
    button.innerText = 'Hello Button';
    // eslint-disable-next-line no-console
    button.addEventListener('click', e => console.log(e));
    return button;
  });

Beispiel #2

Datei: update.stories.js Projekt: francoischalifour/medium-zoom

import { storiesOf } from '@storybook/html'

storiesOf('update()', module).add(
  'multiple options',
  () => `
    <img src="image-2.jpg">

    <div>
      <button id="update">Update options</button>
    </div>

    <script>
      const zoom = mediumZoom('img');
      const button = document.querySelector('#update');

      button.addEventListener('click', () => zoom.update({
        margin: 100,
        background: 'yellow',
        scrollOffset: 0,
      }));
    </script>
  `,
  {
    notes: {
      markdown: `Click on the button the update the options and zoom again.`,
    },
  }
)

Beispiel #3

Datei: getImages.stories.js Projekt: francoischalifour/medium-zoom

import { storiesOf } from '@storybook/html'

storiesOf('getImages()', module).add(
  'default',
  () => `
    <div>
      <img src="image-3.jpg">
    </div>

    <div>
      <img src="image-4.jpg">
    </div>

    <script>
      const zoom = mediumZoom('img');

      console.group('getImages()');
      console.log(zoom.getImages());
      console.groupEnd();
    </script>
  `,
  {
    notes: {
      markdown: `
Returns the zoom images.

_Check the console._`,
    },
  }
)

Beispiel #4

Datei: addon-jest.stories.js Projekt: lyndontavares/storybook

import { storiesOf } from '@storybook/html';

import { withTests } from '@storybook/addon-jest';
import results from './addon-jest.testresults.json';

storiesOf('Addons|jest', module)
  .addDecorator(withTests({ results }))
  .add('withTests', () => 'This story shows test results', { jest: 'addon-jest' });

Beispiel #5

Datei: addon-knobs.stories.js Projekt: chinmaymoharir/storybook

import { storiesOf } from '@storybook/html';
import { action } from '@storybook/addon-actions';

import {
  array,
  boolean,
  button,
  color,
  date,
  select,
  withKnobs,
  text,
  number,
} from '@storybook/addon-knobs';

storiesOf('Addons|Knobs', module)
  .addDecorator(withKnobs)
  .add('Simple', () => {
    const name = text('Name', 'John Doe');
    const age = number('Age', 44);
    const content = `I am ${name} and I'm ${age} years old.`;

    return `<div>${content}</div>`;
  })
  .add('All knobs', () => {
    const name = text('Name', 'Jane');
    const stock = number('Stock', 20, {
      range: true,
      min: 0,
      max: 30,
      step: 5,

Beispiel #6

Datei: off.stories.js Projekt: francoischalifour/medium-zoom

import { storiesOf } from '@storybook/html'

storiesOf('off()', module)
  .add(
    'open',
    () => `
      <img src="image-2.jpg">

      <script>
        const zoom = mediumZoom('img');
        const onOpen = () => alert('open')

        zoom.on('open', onOpen);
        zoom.off('open', onOpen);
      </script>
    `,
    {
      notes: {
        markdown: 'Listens and removes the listener on `open`.',
      },
    }
  )
  .add(
    'opened',
    () => `
      <img src="image-2.jpg">

      <script>
        const zoom = mediumZoom('img');
        const onOpened = () => alert('opened')

Beispiel #7

Datei: addon-notes.stories.js Projekt: chinmaymoharir/storybook

import { storiesOf } from '@storybook/html';

storiesOf('Addons|Notes', module).add(
  'Simple note',
  () =>
    `<p>
        <strong>
          This is a fragment of HTML
        </strong>
      </p>`,
  {
    notes: 'My notes on some bold text',
  }
);

Beispiel #8

Datei: open.stories.js Projekt: francoischalifour/medium-zoom

import { storiesOf } from '@storybook/html'

storiesOf('open()', module)
  .add(
    'default',
    () =>
      `
      <div>
        <img id="image-1" src="image-3.jpg">
      </div>

      <div>
        <img id="image-2" src="image-4.jpg">
      </div>

      <script>
        const zoom = mediumZoom('img');
        zoom.open();
      </script>
    `,
    {
      notes: {
        markdown: `Opens the zoom with the default target.`,
      },
    }
  )
  .add(
    'with target',
    () =>
      `
      <div>