diff --git a/addons/info/README.md b/addons/info/README.md index d952d7d1c0b5..66cf3538ce29 100644 --- a/addons/info/README.md +++ b/addons/info/README.md @@ -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: + +```js +import { storiesOf } from '@storybook/react'; + +import Component from './Component'; + +storiesOf('Component', module) + .addParameters({ + info: { + // Your settings + } + }) + .add('with some emoji', () => ); +``` + +...or for each story individually: +```js +import { storiesOf } from '@storybook/react'; + +import Component from './Component'; + +storiesOf('Component', module) + .add( + 'with some emoji', + () => , + { info : { inline: false, header: false } } // Make your component render inline with the additional info + ) + .add( + 'with no emoji', + () => , + { 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', + () => , + { + info: { + styles: { + headers: { + h1: { + color: 'green' // Still inlined but with green headers! + } + } + } + } + }) + .add( + 'something else', + () => , + { + 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`: