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

Update documentation to use addon-links package #20

Merged
merged 1 commit into from
May 12, 2017
Merged

Update documentation to use addon-links package #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 5 additions & 1 deletion pages/docs/react-storybook/addons/addon-gallery/index.md
View file
Open in desktop
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
View file
Open in desktop
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