Merge ac449a7 into 1a5ffe7

src/GridList.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import cx from 'classnames';
+
+/**
+ * @module GridList
+ */
+class GridList extends React.Component {
+	render() {
+		const {
+			className,
+			columns,
+			items,
+			...other
+		} = this.props;
+
+		const classNames = cx(
+			'gridList',
+			{
+				[`gridList--has${columns.default}`]: !!columns.default,
+				[`atMedium_gridList--has${columns.medium}`]: !!columns.medium,
+				[`atLarge_gridList--has${columns.large}`]: !!columns.large
+			},
+			className
+		);
+
+		return (
+			<ul
+				className={classNames}
+				{...other}>
+				{items.map((item, key) =>
+					<div key={key} className='gridList-item'>{item}</div>
+				)}
+			</ul>
+		);
+	}
+}
+
+GridList.propTypes = {
+	columns: React.PropTypes.shape({
+		default: React.PropTypes.number.isRequired,
+		medium: React.PropTypes.number,
+		large: React.PropTypes.number
+	}),
+	items: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
+};
+
+export default GridList;

src/gridList.story.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { InfoWrapper } from './utils/storyComponents';
+import { storiesOf } from '@kadira/storybook';
+import GridList from './GridList';
+
+const boxStyles = {
+	alignItems: 'center',
+	boxSizing: 'border-box',
+	display: 'flex',
+	fontSize: '28px',
+	fontWeight: '700',
+	height: '100%',
+	justifyContent : 'center',
+	outline: '1px dotted red',
+	padding: '20px',
+};
+
+storiesOf('GridList', module)
+	.addWithInfo(
+		'Static grid',
+		'Basic usage of GridList with columns fixed at 3 for all breakpoints',
+		() => (
+		<InfoWrapper>
+			<GridList
+				columns={{
+					default: 3
+				}}
+				style={{padding: '20px'}}
+				items={[
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>
+				]}
+			/>
+		</InfoWrapper>
+	))
+	.addWithInfo(
+		'Responsive grid',
+		'Responsive GridList that increases number of columns for larger breakpoints',
+		() => (
+		<InfoWrapper>
+			<GridList
+				columns={{
+					default: 2,
+					medium: 4,
+					large: 6
+				}}
+				style={{padding: '20px'}}
+				items={[
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>,
+					<div style={boxStyles}>GridItem</div>
+				]}
+			/>
+		</InfoWrapper>
+	));

src/gridList.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import GridList from './GridList';
+
+const JSX_GridListStatic = (
+	<GridList
+		columns={{
+			default: 3
+		}}
+		items={[
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>
+		]}
+	/>
+);
+
+const responsiveColsDefault = 2,
+	responsiveColsMedium = 4,
+	responsiveColsLarge = 6;
+
+const JSX_GridListResponsive = (
+	<GridList
+		columns={{
+			default: responsiveColsDefault,
+			medium: responsiveColsMedium,
+			large: responsiveColsLarge
+		}}
+		items={[
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>,
+			<div>GridItem</div>
+		]}
+	/>
+);
+
+let gridList;
+
+describe('Static GridList', function() {
+	beforeEach(() => {
+		gridList = TestUtils.renderIntoDocument(JSX_GridListStatic);
+	});
+	afterEach(() => {
+		gridList = null;
+	});
+
+	it('wraps gridList items with element containing className "gridList-item"', function() {
+		const glItems = TestUtils.scryRenderedDOMComponentsWithClass(gridList, 'gridList-item');
+		expect(glItems.length).not.toBe(0);
+	});
+});
+
+describe('Responsive GridList', function() {
+	let glClassList;
+
+	beforeEach(() => {
+		gridList = TestUtils.renderIntoDocument(JSX_GridListResponsive);
+		glClassList = TestUtils.scryRenderedDOMComponentsWithTag(gridList, 'UL')[0].className;
+	});
+	afterEach(() => {
+		gridList = null;
+		glClassList = null;
+	});
+
+	it('sets correct default columns class', function() {
+		const defaultClass = `gridList--has${responsiveColsDefault}`;
+		expect(glClassList).toContain(defaultClass);
+	});
+
+	it('sets correct medium breakpoint columns class', function() {
+		const mediumClass = `atMedium_gridList--has${responsiveColsMedium}`;
+		expect(glClassList).toContain(mediumClass);
+	});
+
+	it('sets correct large breakpoint columns class', function() {
+		const largeClass = `atLarge_gridList--has${responsiveColsLarge}`;
+		expect(glClassList).toContain(largeClass);
+	});
+});