Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removed usages of hoc-style addons from the docs #3845

Merged
merged 2 commits into from
Jul 6, 2018
Merged

Removed usages of hoc-style addons from the docs #3845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d1d8138
Removed usages of hoc-style addons from the docs
tmeasday Jul 6, 2018
7fa35c9
Typo
tmeasday Jul 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 72 additions & 76 deletions addons/info/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)

* * *
---

Storybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).
Useful when you want to display usage or other types of documentation alongside your story.
Expand All @@ -25,15 +25,18 @@ npm i -D @storybook/addon-info
```

## Basic usage
Then, add `withInfo` as a decarator to your book of stories.

Then, add `withInfo` as a decarator to your book of stories.
It is possible to add `info` by default to all or a subsection of stories 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(withInfo); // Globally in your .storybook/config.js.
```

or

```js
storiesOf('Component', module)
.addDecorator(withInfo) // At your stories directly.
Expand All @@ -53,12 +56,13 @@ storiesOf('Component', module)
.addParameters({
info: {
// Your settings
}
},
})
.add('with some emoji', () => <Component/>);
.add('with some emoji', () => <Component />);
```

...or for each story individually:

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

Expand All @@ -67,12 +71,12 @@ 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
() => <Component emoji />,
{ info: { inline: false, header: false } } // Make your component render inline with the additional info
)
.add(
'with no emoji',
() => <Component/>,
() => <Component />,
{ info: '☹️ no emojis' } // Add additional info text directly
);
```
Expand All @@ -86,41 +90,36 @@ 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
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.
}
}
color: 'red', // and the headers of the sections are red.
},
},
},
}
},
})
.add(
'green version',
() => <Component green/>,
{
info: {
styles: stylesheet => ({ // Setting the style with a function
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.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!
}
);
.add('green version', () => <Component green />, {
info: {
styles: stylesheet => ({
// Setting the style with a function
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.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!
});
```

It is also possible to disable the `info` addon entirely.
Expand All @@ -135,27 +134,22 @@ Depending on the scope at which you want to disable the addon, pass the followin
```

## Markdown

The `info` addon also supports markdown.
To use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.


```js
storiesOf('Button', module)
.add(
'Button Component',
() => <Button />,
{
info: {
text: `
storiesOf('Button', module).add('Button Component', () => <Button />, {
info: {
text: `
description or documentation about my component, supports markdown

~~~js
<Button>Click Here</Button>
~~~
`
}
}
);
`,
},
});
```

## Setting Global Options
Expand All @@ -166,9 +160,11 @@ To configure default options for all usage of the info addon, pass a option obje
// config.js
import { withInfo } from '@storybook/addon-info';

addDecorator(withInfo({
header: false, // Global configuration for the info addon across all of your stories.
}));
addDecorator(
withInfo({
header: false, // Global configuration for the info addon across all of your stories.
})
);
```

Configuration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.
Expand Down Expand Up @@ -274,40 +270,40 @@ Example:
```js
// button.js
// @flow
import React from 'react'
import React from 'react';

const paddingStyles = {
small: '4px 8px',
medium: '8px 16px'
}
medium: '8px 16px',
};

const Button = ({
size,
...rest
}: {
/** The size of the button */
size: 'small' | 'medium'
size: 'small' | 'medium',
}) => {
const style = {
padding: paddingStyles[size] || ''
}
return <button style={style} {...rest} />
}
padding: paddingStyles[size] || '',
};
return <button style={style} {...rest} />;
};
Button.defaultProps = {
size: 'medium'
}
size: 'medium',
};

export default Button
export default Button;
```

```js
// stories.js
import React from "react";
import React from 'react';

import { storiesOf } from "@storybook/react";
import { withInfo } from "@storybook/addon-info";
import Button from "./button";
import { storiesOf } from '@storybook/react';
import Button from './button';

const Red = props => <span style={{ color: "red" }} {...props} />;
const Red = props => <span style={{ color: 'red' }} {...props} />;

const TableComponent = ({ propDefinitions }) => {
const props = propDefinitions.map(
Expand Down Expand Up @@ -341,12 +337,11 @@ const TableComponent = ({ propDefinitions }) => {
);
};

storiesOf("Button", module).add(
"with text",
withInfo({
TableComponent
})(() => <Button>Hello Button</Button>)
);
storiesOf('Button', module).add('with text', () => <Button>Hello Button</Button>, {
info: {
TableComponent,
},
});
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that this line is the only actual change in this file, it seems prettier has started formatting it.

```

### React Docgen Integration
Expand All @@ -359,10 +354,11 @@ import React from 'react';
import PropTypes from 'prop-types';

/** Button component description */
const DocgenButton = ({ disabled, label, style, onClick }) =>
const DocgenButton = ({ disabled, label, style, onClick }) => (
<button disabled={disabled} style={style} onClick={onClick}>
{label}
</button>;
</button>
);

DocgenButton.defaultProps = {
disabled: false,
Expand Down
18 changes: 13 additions & 5 deletions docs/src/pages/addons/using-addons/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,22 @@ Now when you are writing a story it like this and add some notes:
```js
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withNotes } from '@storybook/addon-notes';

import Button from './Button';

storiesOf('Button', module)
.add('with some emoji', () => (
withNotes('A very simple component')(() => <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>));
));
storiesOf('Button', module).add(
'with some emoji',
() => (
() => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
),
{ notes: 'A very simple component' }
)
);
```

Then you'll be able to see those notes when you are viewing the story.
Expand Down
Loading