import React from 'react';
import Button from './Button';
import { storiesOf, action } from '@kadira/storybook';
import backgrounds from 'react-storybook-addon-backgrounds';
storiesOf('Button')
.addWithInfo(
'simple usage',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (
Click the "?" mark at top-right to view the info.
),
);
storiesOf('Button')
.addWithInfo(
'simple usage (inline info)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (),
{ inline: true },
);
storiesOf('Button')
.addWithInfo(
'simple usage (disable source)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (),
{ source: false, inline: true },
);
storiesOf('Button')
.addWithInfo(
'simple usage (no header)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (),
{ header: false, inline: true },
);
storiesOf('Button')
.addWithInfo(
'simple usage (no prop tables)',
`
This is the basic usage with the button with providing a label to show the text.
`,
() => (),
{ propTables: false, inline: true },
);
storiesOf('Button')
.addWithInfo(
'simple usage (custom propTables)',
`
This is the basic usage with the button with providing a label to show the text.
Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
~~~js
storiesOf('Button')
.addWithInfo(
'simple usage (custom propTables)',
,
,
{ inline: true, propTables: [Button]}
);
~~~
`,
() => (
),
{ inline: true, propTables: [Button]}
);
storiesOf('Button')
.addWithInfo(
'simple usage (JSX description)',
(
This is a JSX info section
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
nulla.
This is a link
),
() => (
Click the "?" mark at top-right to view the info.
),
);
storiesOf('Button')
.addWithInfo(
'simple usage (inline JSX description)',
(
This is a JSX info section
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
nulla.
This is a link
),
() => (),
{ inline: true }
);
storiesOf('Button')
.addDecorator(backgrounds([
{ name: 'dark', value: '#333', default: true },
]))
.addWithInfo(
'with custom styles',
`
This is an example of how to customize the styles of the info components.
For the full styles available, see \`./src/components/Story.js\`
`,
() => (),
{
inline: true,
styles: (stylesheet) => {
stylesheet.infoPage = {
backgroundColor: '#ccc'
};
return stylesheet;
}
}
);