Merge 8a98ef5 into fc65369

src/Checkbox.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import cx from 'classnames';
+import Flex from './Flex';
+import FlexItem from './FlexItem';
+
+/**
+ * @module Checkbox
+ */
+class Checkbox extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			checked: props.checked
+		};
+		this.onChange = this.onChange.bind(this);
+	}
+
+	onChange(e) {
+		this.setState({ checked: e.target.checked });
+	}
+
+	render() {
+		const {
+			checked, // eslint-disable-line no-unused-vars
+			children,
+			className,
+			label,
+			name,
+			value,
+			...other
+		} = this.props;
+
+		const classNames = cx(
+			'minTouchHeight',
+			className
+		);
+
+		const id = `${name}-${value}`;
+
+		return (
+			<Flex align='center'
+				className={classNames}
+				{...other}>
+				<FlexItem shrink>
+					<input	type='checkbox'
+						name={name}
+						value={value}
+						checked={this.state.checked}
+						id={id}
+						onChange={this.onChange}
+					/>
+				</FlexItem>
+				<FlexItem>
+					<label className='label--minor' htmlFor={id}>{label}</label>
+					{children}
+				</FlexItem>
+			</Flex>
+		);
+	}
+}
+
+Checkbox.propTypes = {
+	checked: React.PropTypes.bool,
+	id: React.PropTypes.string.isRequired,
+	label: React.PropTypes.string,
+	name: React.PropTypes.string.isRequired
+};
+
+export default Checkbox;

src/checkbox.story.jsx

@@ -0,0 +1,10 @@
+
+import React from 'react';
+
+import Checkbox from './Checkbox';
+import { storiesOf } from '@kadira/storybook';
+
+storiesOf('Checkbox', module)
+	.add('default', () => <Checkbox id='nada' name='no-name' checked={false} />)
+	.add('with label', () => <Checkbox label='Ketchup' id='ketchup' checked={false} name='condiment' />)
+	.add('checked', () => <Checkbox label='Mustard' checked id='mustard' name='condiment' />);

src/checkbox.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+
+import Checkbox from './Checkbox';
+
+
+describe('CheckboxContainer', function() {
+
+	it('exists', function() {
+		const checkbox = TestUtils.renderIntoDocument(<Checkbox name='hello' id='hello' checked={false} />);
+		const checkboxNode = ReactDOM.findDOMNode(checkbox);
+
+		expect(checkboxNode).not.toBeNull();
+	});
+
+	it('has a label', function() {});
+
+	it('calls onChange and sets state when clicked', function() {});
+});

src/layoutUtils.js

@@ -0,0 +1,14 @@
+export {default as Bounds} from './Bounds';
+export {default as Chunk} from './Chunk';
+export {default as Flex} from './Flex';
+export {default as FlexItem} from './FlexItem';
+export {default as GridList} from './GridList';
+export {default as GridListItem} from './GridListItem';
+export {default as PageActions} from './PageActions';
+export {default as PageAction} from './PageAction';
+export {default as PageActionButton} from './PageActionButton';
+export {default as PageHead} from './PageHead';
+export {default as PageTitle} from './PageTitle';
+export {default as Section} from './Section';
+export {default as SectionTitle} from './SectionTitle';
+export {default as Stripe} from './Stripe';