storybook/examples/official-storybook/stories/addon-links.stories.js
2018-02-24 19:50:16 +03:00

37 lines
1.3 KiB
JavaScript

import React from 'react';
import { storiesOf } from '@storybook/react';
import { linkTo, hrefTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';
import { action } from '@storybook/addon-actions';
storiesOf('Addons|Links.Link', module)
.add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
.add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
storiesOf('Addons|Links.Button', module)
.add('First', () => (
<button onClick={linkTo('Addons|Links.Button', 'Second')}>Go to "Second"</button>
))
.add('Second', () => (
<button onClick={linkTo('Addons|Links.Button', 'First')}>Go to "First"</button>
));
storiesOf('Addons|Links.Select', module)
.add('Index', () => (
<select value="Index" onChange={linkTo('Addons|Links.Select', e => e.currentTarget.value)}>
<option>Index</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
))
.add('First', () => <LinkTo story="Index">Go back</LinkTo>)
.add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
.add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
storiesOf('Addons|Links.Href', module).add('log', () => {
hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')({ href }));
return <span>See action logger</span>;
});