Skip to content

Instantly share code, notes, and snippets.

@hungrysquirrel
Created July 12, 2017 04:12
Show Gist options
  • Save hungrysquirrel/3d0a984db97f8ece7c43455b30d57b2b to your computer and use it in GitHub Desktop.
Save hungrysquirrel/3d0a984db97f8ece7c43455b30d57b2b to your computer and use it in GitHub Desktop.
Style Storybook with Styled Components
import React, { PropTypes } from 'react';
import styled from 'styled-components'
const Field = ({
children,
label,
name,
}) => (
<div className="test">
<label className="test" htmlFor={name}>{label}</label>
{ children }
</div>
);
Field.propTypes = {
children: React.PropTypes.node,
label: PropTypes.string,
name: PropTypes.string.isRequired,
};
export default Field;
import React from 'react';
import { storiesOf, action } from '@storybook/react';
import TextField from '../components/TextField';
import Button from '../components/Button';
import SelectField from '../components/SelectField';
import Form from '../components/Form';
storiesOf('🍗 TextField', module)
.add('default', () => (
<TextField name="name" label="a label" />
))
.add('with a value', () => (
<TextField name="name" label="a label" onChange={action('change')} value="some value" />
))
.add('with a placeholder', () => (
<TextField name="name" label="a label" placeholder="this is a placeholder" />
))
.add('disabled', () => (
<TextField name="name" label="a label" disabled />
))
.add('disabled with a value', () => (
<TextField name="name" label="a label" value="some value" disabled />
))
.add('disabled with a placeholder', () => (
<TextField name="name" label="a label" placeholder="this is a placeholder" disabled />
));
storiesOf('🍖 Button', module)
.add('default', () => (
<Button name="name">Click me</Button>
))
.add('submit', () => (
<Button name="name" submit>Submit me</Button>
))
.add('disabled', () => (
<Button name="name" disabled>Click me</Button>
))
.add('disabled submit', () => (
<Button name="name" submit disabled>Submit me</Button>
));
const options = [
{ value: 'value_a', text: 'Value A' },
{ value: 'value_b', text: 'Value B' },
];
const props = {
label: 'a label',
name: 'name',
options,
onChange: action('onChange'),
};
storiesOf('🍗 SelectField', module)
.add('default', () => (
<SelectField {...props} />
))
.add('with a value', () => (
<SelectField {...props} value="value_b" />
))
.add('disabled', () => (
<SelectField {...props} disabled />
))
.add('disabled with a value', () => (
<SelectField {...props} value="value_b" disabled />
));
const myProps = {
intervalName: '',
startMilestone: '',
endMilestone: '',
handleChange: action('handleChange'),
};
storiesOf('🍤 Form', module)
.add('default', () => (
<Form {...myProps} />
));
import React, { PropTypes } from 'react';
import Field from './Field';
import styled from 'styled-components'
const TextField = ({
disabled = false,
label,
name,
placeholder,
value,
onChange,
}) => (
<Field name={name} label={label}>
<input
disabled={disabled}
onChange={onChange}
className="test"
id={name}
name={name}
placeholder={placeholder}
type="text"
value={value}
/>
</Field>
);
TextField.propTypes = {
disabled: PropTypes.bool,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
placeholder: PropTypes.string,
onChange: PropTypes.func,
value: PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
};
export default TextField;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment