From 1dcc3be54a909f0aa73d8d947520d29e545738c6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 12 May 2017 21:51:22 +1000 Subject: [PATCH] Update documentation to use addon-links package --- .../addons/addon-gallery/index.md | 6 ++++- .../basics/writing-stories/index.md | 27 ------------------- 2 files changed, 5 insertions(+), 28 deletions(-) diff --git a/pages/docs/react-storybook/addons/addon-gallery/index.md b/pages/docs/react-storybook/addons/addon-gallery/index.md index d140de8..cbea316 100644 --- a/pages/docs/react-storybook/addons/addon-gallery/index.md +++ b/pages/docs/react-storybook/addons/addon-gallery/index.md @@ -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. @@ -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. \ No newline at end of file +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. diff --git a/pages/docs/react-storybook/basics/writing-stories/index.md b/pages/docs/react-storybook/basics/writing-stories/index.md index 9b36dee..89eff62 100644 --- a/pages/docs/react-storybook/basics/writing-stories/index.md +++ b/pages/docs/react-storybook/basics/writing-stories/index.md @@ -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', () => ( - - )) - .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.