Storybook: Configure actions to transition to a different story?

Created on 5 Apr 2016 · 3Comments · Source: storybookjs/storybook

It would be nice if an action could trigger a transition to a different story to simulate interactivity, similar to how you can create simple prototypes with Invision, Framer.js, etc.

For example, say you have a "Toggle" widget with two states, "on" and "off", it would be nice if you could set up the actions for each story to switch to another story to simulate the toggle actually occurring:

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

Most helpful comment

We can do it like this:

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')} />
  });

I think this API looks great.

arunoda on 5 Apr 2016

👍4

All 3 comments

Wow. Thats a cool feature.

arunoda on 5 Apr 2016

We can do it like this:

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')} />
  });

I think this API looks great.

arunoda on 5 Apr 2016

👍4

Thanks to @jeef3 's PR #86, now we've the story linking functionality.
Released with v1.8.0.

arunoda on 9 Apr 2016

Was this page helpful?

0 / 5 - 0 ratings