Skip to content

Commit

Permalink
Update the documentation with the new possibilities
Browse files Browse the repository at this point in the history
  • Loading branch information
Keraito committed Jun 1, 2018
1 parent 8b174bc commit 848cf43
Showing 1 changed file with 82 additions and 2 deletions.
84 changes: 82 additions & 2 deletions addons/info/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,94 @@ storiesOf('Component', module)

## Usage as decorator

It is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.
It is possible to add infos by default to all components by using a global or story decorator.

It is important to declare this decorator as **the first decorator**, otherwise it won't work well.

```js
addDecorator((story, context) => withInfo('common info')(story)(context));
addDecorator(withInfo);
```

Then, you can use the `info` parameter to pass certain options to your stories.
This can be done per book of stories:

This comment has been minimized.

Copy link
@Hypnosphi

Hypnosphi Oct 1, 2018

Member

book of stories

Do we use this term anywhere else?

This comment has been minimized.

Copy link
@Keraito

Keraito Oct 4, 2018

Author Contributor

Don't think so, but at the time couldn't think of a better way of referring to a multiple of stories in storiesOf, so that came to mind. I can change it if you don't likt it

This comment has been minimized.

Copy link
@Hypnosphi

Hypnosphi Oct 6, 2018

Member

In the code it's called "kind", not sure how we call it in docs

@ndelangen @shilman @igor-dv any thoughts?

This comment has been minimized.

Copy link
@igor-dv

igor-dv Oct 6, 2018

Member

Maybe set of stories ?


```js
import { storiesOf } from '@storybook/react';

import Component from './Component';

storiesOf('Component', module)
.addParameters({
info: {
// Your settings
}
})
.add('with some emoji', () => <Component/>);
```

...or for each story individually:
```js
import { storiesOf } from '@storybook/react';

import Component from './Component';

storiesOf('Component', module)
.add(
'with some emoji',
() => <Component emoji/>,
{ info : { inline: false, header: false } } // Make your component render inline with the additional info
)
.add(
'with no emoji',
() => <Component/>,
{ info: '☹️ no emojis' } // Add additional info text
);
```

...or even together:

```js
import { storiesOf } from '@storybook/react';

import Component from './Component';

storiesOf('Component', module)
.addParameters({
info: { // Make a default for all stories in this book,
inline: true, // where the components are inlined
styles: {
header: {
h1: {
color: 'red' // and the headers of the sections are red.
}
}
},
}
})
.add(
'green version',
() => <Component green/>,
{
info: {
styles: {
headers: {
h1: {
color: 'green' // Still inlined but with green headers!
}
}
}
}
})
.add(
'something else',
() => <Component different/>,
{
info: "This story has additional text added to the info!" // Still inlined and with red headers!
}
);
```


## Global options

To configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:
Expand Down

0 comments on commit 848cf43

Please sign in to comment.