diff --git a/src/docs/react-storybook/addons/addon-gallery.js b/src/docs/react-storybook/addons/addon-gallery.js index 2683c3c..dfce725 100644 --- a/src/docs/react-storybook/addons/addon-gallery.js +++ b/src/docs/react-storybook/addons/addon-gallery.js @@ -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. diff --git a/src/docs/react-storybook/basics/writing-stories.js b/src/docs/react-storybook/basics/writing-stories.js index 724779f..3691e48 100644 --- a/src/docs/react-storybook/basics/writing-stories.js +++ b/src/docs/react-storybook/basics/writing-stories.js @@ -89,7 +89,6 @@ export default { .add('with some props', () => ()); ~~~ - 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: @@ -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', () => ( + + )) + .add('Second', () => ( + + )); + ~~~ + + 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.