Skip to content

Commit

Permalink
Merge pull request #20 from storybooks/1016-restore-addon-links
Browse files Browse the repository at this point in the history
Update documentation to use addon-links package
  • Loading branch information
ndelangen authored May 12, 2017
2 parents 347ce50 + 1dcc3be commit be57585
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 28 deletions.
6 changes: 5 additions & 1 deletion pages/docs/react-storybook/addons/addon-gallery/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ With actions, you can inspect events related to your components. This is pretty

Also, you can think of this as a way to document events in your components.

### [Links](https://github.com/storybooks/storybook/tree/master/packages/addon-links)

With links you can link stories together. With that, you can build demos and prototypes directly from your UI components. (Like you can do with [Invision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/))

## Third Party Addons

You need to install these addons directly from NPM in order to use them.
Expand Down Expand Up @@ -75,4 +79,4 @@ A [decorator](/docs/react-storybook/addons/introduction) that allows you to inte

### [JSX preview](https://github.com/Kilix/storybook-addon-jsx)

This addon shows a preview of the JSX code for each story. It allows you to configure the display and copy the code with a single click.
This addon shows a preview of the JSX code for each story. It allows you to configure the display and copy the code with a single click.
27 changes: 0 additions & 27 deletions pages/docs/react-storybook/basics/writing-stories/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,33 +101,6 @@ configure(function () {
}, module);
~~~

## Linking stories

With `linkTo` you can link stories together to build demos and prototypes directly from your UI components. (Similar to [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/))

~~~js
import { storiesOf, linkTo } from '@kadira/storybook'

storiesOf('Button', module)
.add('First', () => (
<button onClick={linkTo('Button', 'Second')}>Go to "Second"</button>
))
.add('Second', () => (
<button onClick={linkTo('Button', 'First')}>Go to "First"</button>
));
~~~

With that, you can link an event in a component to any story in the Storybook.

* First parameter is the story kind (what you named with storiesOf).
* Second parameter is the story name (what you named with .add).

You can also pass a function instead for any of above parameters. That function accepts arguments emitted by the event and it should return a string. For example:

~~~js
linkTo(() => 'Button', () => 'Second')
~~~

## Managing stories

Storybook has a very simple API to write stories. With that, you can’t display nested stories.
Expand Down

0 comments on commit be57585

Please sign in to comment.