diff --git a/addons/links/README.md b/addons/links/README.md index dcf74a2d1a0..4469bb98313 100644 --- a/addons/links/README.md +++ b/addons/links/README.md @@ -12,25 +12,29 @@ Install this addon by adding the `@storybook/addon-links` dependency: yarn add -D @storybook/addon-links ``` -First configure it as an addon by adding it to your addons.js file (located in the Storybook config directory). +within `main.js`: ```js -import '@storybook/addon-links/register'; +module.exports = { + addons: ['@storybook/addon-links/register'] +} ``` Then you can import `linkTo` in your stories and use like this: ```js -import { storiesOf } from '@storybook/react' import { linkTo } from '@storybook/addon-links' -storiesOf('Button', module) - .add('First', () => ( - - )) - .add('Second', () => ( - - )); +export default { + title: 'Button', +}; + +export const first = () => ( + +); +export const second = () => ( + +); ``` Have a look at the linkTo function: @@ -45,28 +49,36 @@ linkTo('Toggle') // Links to the first story in the 'Toggle' kind With that, you can link an event in a component to any story in the Storybook. -- First parameter is the story kind name (what you named with `storiesOf`). -- Second (optional) parameter is the story name (what you named with `.add`). - If the second parameter is omitted, the link will point to the first story in the given kind. +- First parameter is the story kind name (what you named with `title`). +- Second (optional) parameter is the story name (what you named with `exported name`). + If the second parameter is omitted, the link will point to the first story in the given kind. You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string: ```js -import { storiesOf } from '@storybook/react'; import { LinkTo, linkTo } from '@storybook/addon-links'; -storiesOf('Select', module) - .add('Index', () => ( - - )) - .add('First', () => Go back) - .add('Second', () => Go back) - .add('Third', () => Go back); +export default { + title: 'Select', +}; + +export const index = () => ( + +); +export const first = () => ( + Go back +); +export const second = () => ( + Go back +); +export const third = () => ( + Go back +); ``` ## hrefTo function @@ -74,16 +86,18 @@ storiesOf('Select', module) If you want to get an URL for a particular story, you may use `hrefTo` function. It returns a promise, which resolves to string containing a relative URL: ```js -import { storiesOf } from '@storybook/react'; import { hrefTo } from '@storybook/addon-links'; import { action } from '@storybook/addon-actions'; -storiesOf('Href', module) - .add('log', () => { - hrefTo('Href', 'log').then(action('URL of this story')); +export default { + title: 'Href', +}; - return See action logger; - }); +export const log = () => { + hrefTo('Href', 'log').then(action('URL of this story')); + + return See action logger; +}; ``` ## withLinks decorator @@ -92,14 +106,16 @@ storiesOf('Href', module) Here is an example in React, but it works with any framework: ```js -import { storiesOf } from '@storybook/react' import { withLinks } from '@storybook/addon-links' -storiesOf('Button', module) - .addDecorator(withLinks) - .add('First', () => ( - - )) +export default { + title: 'Button', + decorators: [withLinks], +}; + +export const first = () => ( + +); ``` ## LinkTo component (React only) @@ -108,16 +124,18 @@ One possible way of using `hrefTo` is to create a component that uses native `a` A React implementation of such a component can be imported from `@storybook/addon-links` package: ```js -import { storiesOf } from '@storybook/react'; import LinkTo from '@storybook/addon-links/react'; -storiesOf('Link', module) - .add('First', () => ( - Go to Second - )) - .add('Second', () => ( - Go to First - )); +export default { + title: 'Link', +}; + +export const first = () => ( + Go to Second +); +export const second = () => ( + Go to First +); ``` It accepts all the props the `a` element does, plus `story` and `kind`. It the `kind` prop is omitted, the current kind will be preserved.