Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
Add example story
Browse files Browse the repository at this point in the history
  • Loading branch information
pablosichert committed Oct 24, 2017
1 parent 450edb2 commit d6b8b65
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 1 deletion.
26 changes: 26 additions & 0 deletions .storybook/Example/Example.js
@@ -0,0 +1,26 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Example extends Component {
static propTypes = {
inverted: PropTypes.bool
}

render() {
const { inverted } = this.props;

let divProps;

if (inverted) {
divProps = { style: { background: 'black', color: 'white' } };
}

return (
<div {...divProps}>
<h1>This is an example story.</h1>
<p>Navigate to <strong>.storybook/Example</strong> to see how to add a story to your component.</p>
<p>For more info, have a look at the <a target="_blank" href="https://storybook.js.org/basics/introduction/">docs</a> or at some <a target="_blank" href="https://storybook.js.org/examples/">examples</a>.</p>
</div>
);
}
}
21 changes: 21 additions & 0 deletions .storybook/Example/Example.story.js
@@ -0,0 +1,21 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Example from './';

// Defaults to <name>.story.js
export const name = 'Example component';

export default story => {
const states = {
'Regular state': () => (
<Example />
),
'Inverted state': () => (
<Example inverted />
),
};

for (const [state, render] of Object.entries(states)) {
story.add(state, render);
}
};
1 change: 1 addition & 0 deletions .storybook/Example/index.js
@@ -0,0 +1 @@
export { default } from './Example.js';
3 changes: 2 additions & 1 deletion .storybook/stories.js
Expand Up @@ -2,9 +2,10 @@ import React from 'react';

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

const example = require('./Example/Example.story.js');
const stories = require('./foundStories').default;

for (const [storyName, storyExport] of stories) {
for (const [storyName, storyExport] of [['Example', example], ...stories]) {
const { name, default: story } = storyExport;

story(storiesOf(name || storyName, module));
Expand Down

0 comments on commit d6b8b65

Please sign in to comment.