Skip to content

Commit

Permalink
Add permalinking docs
Browse files Browse the repository at this point in the history
  • Loading branch information
shilman committed Jan 13, 2020
1 parent 21b5b8c commit dff83e3
Showing 1 changed file with 34 additions and 1 deletion.
35 changes: 34 additions & 1 deletion docs/src/pages/basics/writing-stories/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,10 +202,11 @@ addDecorator(storyFn => <div style={{ textAlign: 'center' }}>{storyFn()}</div>);
```

> \* In Vue projects you have to use the special component `<story/>` instead of the function parameter `storyFn` that is used in React projects, even if you are using JSX, for example:
>
> ```jsx
> var decoratorVueJsx = () => ({ render() { return <div style={{ textAlign: 'center' }}><story/></div>} })
> addDecorator(decoratorVueJsx)
>
>
> var decoratorVueTemplate = () => { return { template: `<div style="text-align:center"><story/></div>` }
> addDecorator(decoratorVueTemplate)
> ```
Expand Down Expand Up @@ -349,3 +350,35 @@ Multiple storybooks can be built for different kinds of stories or components in
}
}
```
## Permalinking to stories
Sometimes you might wish to change the name of a story or its position in the hierarchy, but preserve the link to the story or its documentation. Here's how to do it.
Consider the following story:
```js
export default {
title: 'Foo/Bar',
};
export const Baz = () => <MyComponent />;
```
Storybook's ID-generation logic will give this the ID `foo-bar--baz`, so the link would be `?path=/story/foo-bar--baz`.
Now suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
```js
export default {
title: 'OtherFoo/Bar',
componentId: 'Foo/Bar', // or 'foo-bar' if you prefer
};
export const Baz = () => <MyComponent />;
Baz.story = {
name: 'Moo',
};
```
Storybook will prioritize the `componentId` over the title for ID generation, if provided, and will prioritize the `story.name` over the export key for display.

0 comments on commit dff83e3

Please sign in to comment.