Storybook: Configurer des actions pour passer à une histoire différente ?

Créé le 5 avr. 2016 · 3Commentaires · Source: storybookjs/storybook

Ce serait bien si une action pouvait déclencher une transition vers une histoire différente pour simuler l'interactivité, de la même manière que vous pouvez créer des prototypes simples avec Invision, Framer.js, etc.

Par exemple, supposons que vous ayez un widget "Toggle" avec deux états, "on" et "off", ce serait bien si vous pouviez configurer les actions pour chaque histoire pour passer à une autre histoire afin de simuler la bascule qui se produit réellement :

storiesOf('Toggle', module)
  .add('on', () => {
    return <Toggle value={true} onChange={action('onChange', 'off')} />
  })
  .add('off', () => {
    return <Toggle value={false} onChange={action('onChange', 'on')} />
  });

feature request

Source

tlrobinson

👍2

Commentaire le plus utile

Nous pouvons le faire comme ceci :

import { linkTo } from @kadira/storybook

storiesOf('Toggle', module)
  .add('on', () => {
    return <Toggle value={true} onChange={linkTo('Toggle', 'off')} />
  })
  .add('off', () => {
    return <Toggle value={false} onChange={linkTo('Toggle', 'on')} />
  });

Je pense que cette API a fière allure.

arunoda le 5 avr. 2016

👍4

Tous les 3 commentaires

Wow. C'est une fonctionnalité intéressante.

arunoda le 5 avr. 2016

Nous pouvons le faire comme ceci :

import { linkTo } from @kadira/storybook

storiesOf('Toggle', module)
  .add('on', () => {
    return <Toggle value={true} onChange={linkTo('Toggle', 'off')} />
  })
  .add('off', () => {
    return <Toggle value={false} onChange={linkTo('Toggle', 'on')} />
  });

Je pense que cette API a fière allure.

arunoda le 5 avr. 2016

👍4

Grâce au PR #86 de @jeef3 , nous avons maintenant la fonctionnalité de liaison d'histoires.
Sorti avec v1.8.0 .

arunoda le 9 avr. 2016

Cette page vous a été utile?

0 / 5 - 0 notes