From b402c44a0db72c451d12851c2ef76210e73a9540 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 13 May 2017 18:36:36 +1000 Subject: [PATCH] Fix one more documentation relating to default addons --- .../addons/using-addons/index.md | 26 +++++-------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/pages/docs/react-storybook/addons/using-addons/index.md b/pages/docs/react-storybook/addons/using-addons/index.md index 07174d715ffc..54d25511cb9b 100644 --- a/pages/docs/react-storybook/addons/using-addons/index.md +++ b/pages/docs/react-storybook/addons/using-addons/index.md @@ -3,28 +3,19 @@ id: 'using-addons' title: 'Using Addons' --- -By default, Storybook comes with two addons, which are [actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) and [links](https://github.com/storybooks/storybook/tree/master/packages/addon-links). But you can use any third party addons distributed via NPM. +Storybook comes with a variety of "core" addons developed and maintained alongside Storybook. Most examples in this site use [actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) and [links](https://github.com/storybooks/storybook/tree/master/packages/addon-links). But it's easy to use any third party addons distributed via NPM. Here's how to do it. -Now we are going to use an addon called [Notes](https://github.com/storybooks/storybook/tree/master/packages/addon-notes). Basically, it allows you to write notes for your stories. +We are going to use an addon called [Notes](https://github.com/storybooks/storybook/tree/master/packages/addon-notes). Basically, it allows you to write notes for your stories. -First, you need to create a file called `addons.js` inside the storybook config directory and add the following content: - -~~~js -import '@kadira/storybook/addons'; -~~~ - -This will load our default addons. - -Then install the notes addon with: +First, we need to install the addons: ~~~sh -npm i --save '@kadira/storybook-addon-notes'; +npm i --save-dev @kadira/storybook-addon-actions @kadira/storybook-addon-links @kadira/storybook-addon-notes ~~~ - -After that, add it to the addons.js like this: +Then, we need to create a file called `addons.js` inside the storybook config directory and add the following content: ~~~js import '@kadira/storybook-addon-actions/register'; @@ -32,8 +23,7 @@ import '@kadira/storybook-addon-links/register'; import '@kadira/storybook-addon-notes/register'; ~~~ - -Then you'll be able to see those notes when you are viewing the story. +This will register all the addons and you'll be able to see the actions and notes panels (in that order) when you are viewing the story. (Links do not register a tab--check individual addon docs to see which Storybook features they use!) ![Stories without notes](../static/stories-without-notes.png) @@ -60,7 +50,3 @@ Then you'll be able to see those notes when you are viewing the story. ![Stories with notes](../static/stories-with-notes.png) Just like this, you can install any other addon and use it. Have a look at our [addon gallery](/docs/react-storybook/addons/addon-gallery) to discover more addons. - -> This particular addon has created a panel in Storybook. Some addons may not create a panel and may use some other Storybook platform features. -> -> So, look at the addon’s own documentation on how to use it.