Skip to content
This repository has been archived by the owner on Nov 10, 2017. It is now read-only.

Update linkTo documentation #11

Merged
merged 2 commits into from
Apr 27, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions src/docs/react-storybook/addons/addon-gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@ export default {

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
28 changes: 27 additions & 1 deletion src/docs/react-storybook/basics/writing-stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ export default {
.add('with some props', () => (<MyComponent text="The Comp"/>));
~~~


Here we only add the decorator for the current set of stories. (In this example, we add it just for the **MyComponent** story group.)

But, you can also add a decorator **globally** and it'll be applied to all the stories you create. This is how to add a decorator like that:
Expand All @@ -107,6 +106,33 @@ export default {
}, 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