-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update the documentation with the new possibilities
- Loading branch information
Showing
1 changed file
with
82 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong.
Keraito
Author
Contributor
|
||
|
||
```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`: | ||
|
Do we use this term anywhere else?