Merge bc6bcb8 into f4d6481

meetup · Mar 21, 2017 · 9d24a97 · 9d24a97
2 parents f4d6481 + bc6bcb8
commit 9d24a97
Show file tree

Hide file tree

Showing 5 changed files with 255 additions and 0 deletions.
diff --git a/assets/scss/components/_all.scss b/assets/scss/components/_all.scss
@@ -15,6 +15,7 @@
 @import "dateDisplay";
 @import "gridList";
 @import "groupCard";
+@import "inlineblockList";
 @import "modal";
 @import "popover";
 @import "tabs";

diff --git a/assets/scss/components/_inlineblockList.scss b/assets/scss/components/_inlineblockList.scss
@@ -0,0 +1,77 @@
+/*doc
+---
+title: Inline-block list
+name: inlineblockList
+category: Layout
+---
+Resets list styles; adds `display: inline-block` to
+each list item and right gutters between items.
+
+#### Example
+
+```html_example
+<ul class="inlineblockList">
+	<li><img src="https://placekitten.com/g/72/72" alt="fluffy kitten" /></li>
+	<li><img src="https://placekitten.com/g/72/72" alt="fluffy kitten" /></li>
+	<li><img src="https://placekitten.com/g/72/72" alt="fluffy kitten" /></li>
+	<li><img src="https://placekitten.com/g/72/72" alt="fluffy kitten" /></li>
+</ul>
+
+<ul class="inlineblockList inlineblockList--bulleted">
+	<li>These</li>
+	<li>list</li>
+	<li>items</li>
+	<li>are</li>
+	<li>bulleted</li>
+</ul>
+
+<ul class="inlineblockList inlineblockList--overlap">
+	<li><img src="https://placekitten.com/g/72/72" alt="fluffy kitten" /></li>
+	<li><img src="https://placekitten.com/g/72/72" alt="fluffy kitten" /></li>
+	<li><img src="https://placekitten.com/g/72/72" alt="fluffy kitten" /></li>
+	<li><img src="https://placekitten.com/g/72/72" alt="fluffy kitten" /></li>
+</ul>
+```
+
+### Variants
+A class of `inlineblockList` is required; the following classes are
+optional variants:
+
+Class                        | Description
+---------------------------- | ------------------------------------------------------------
+`inlineblockList--separated` | puts a character between each list item. Used for things like lists of links
+*/
+%inlineblockList,
+.inlineblockList {
+	margin: 0;
+	padding: 0;
+	> li {
+		display: inline-block;
+		@include responsiveVarContext--base() {
+			padding-right: $base;
+		}
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+}
+
+.inlineblockList--separated > li {
+
+	@include responsiveVarContext--base() {
+		padding-right: $base/2;
+	}
+
+	&:after {
+		content: attr(data-separator);
+		@include responsiveVarContext--base() {
+			padding-left: $base/2;
+		}
+	}
+
+	&:last-child {
+		&:after {
+			display: none;
+		}
+	}
+}
diff --git a/src/InlineBlockList.jsx b/src/InlineBlockList.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import cx from 'classnames';
+
+export const INLINEBLOCKLIST_CLASS = 'inlineblockList';
+export const INLINEBLOCKLIST_SEPERATED_CLASS = 'inlineblockList--separated';
+
+/**
+ * @module InlineBlockList
+ */
+class InlineBlockList extends React.Component {
+	render() {
+		const {
+			className,
+			items,
+			separator,
+			...other
+		} = this.props;
+
+		const classNames = cx(
+			INLINEBLOCKLIST_CLASS,
+			{
+				[INLINEBLOCKLIST_SEPERATED_CLASS]: separator
+			},
+			className
+		);
+
+		return (
+			<ul
+				className={classNames}
+				{...other}
+				>
+				{items.map((item, key) =>
+					<li key={key} data-separator={separator}>{item}</li>
+				)}
+			</ul>
+		);
+	}
+}
+
+InlineBlockList.propTypes = {
+	items: React.PropTypes.oneOf([
+		React.PropTypes.arrayOf(React.PropTypes.element),
+		React.PropTypes.arrayOf(React.PropTypes.string)
+	]).isRequired,
+	separator: React.PropTypes.string
+};
+
+export default InlineBlockList;
diff --git a/src/inlineBlockList.story.jsx b/src/inlineBlockList.story.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { InfoWrapper } from './utils/storyComponents';
+import Bounds from './Bounds';
+import Section from './Section';
+import InlineBlockList from './InlineBlockList';
+
+const basicItems = [
+	'English',
+	'English (Australian)',
+	'Deutsch',
+	'Español',
+	'Español (España)',
+	'Français',
+	'Italiano',
+	'Nederlands',
+	'Português',
+	'日本語',
+	'한국어',
+];
+
+storiesOf('InlineBlockList', module)
+	.addWithInfo(
+		'default',
+		'Basic usage of InlineBlockList',
+		() => (
+		<InfoWrapper>
+			<Bounds><Section>
+				<InlineBlockList
+					items={basicItems}
+				/>
+			</Section></Bounds>
+		</InfoWrapper>
+	))
+	.addWithInfo(
+		'with separator',
+		'Basic usage of InlineBlockList with a middot between items',
+		() => (
+		<InfoWrapper>
+			<Bounds>
+				<Section>
+					<InlineBlockList
+						items={basicItems}
+						separator='·'
+					/>
+				</Section>
+				<Section>
+					<InlineBlockList
+						items={['any', 'glyph', 'will', 'work']}
+						separator='👏'
+					/>
+				</Section>
+			</Bounds>
+
+		</InfoWrapper>
+	))
+	.addWithInfo(
+		'using elements',
+		'InlineBlockList using elements as items',
+		() => (
+		<InfoWrapper>
+			<Bounds><Section>
+				<InlineBlockList
+					items={[
+						<img src='https://placekitten.com/g/72/72' alt='fluffy kitten' />,
+						<img src='https://placekitten.com/g/72/72' alt='fluffy kitten' />,
+						<img src='https://placekitten.com/g/72/72' alt='fluffy kitten' />,
+						<img src='https://placekitten.com/g/72/72' alt='fluffy kitten' />,
+						<img src='https://placekitten.com/g/72/72' alt='fluffy kitten' />,
+						<img src='https://placekitten.com/g/72/72' alt='fluffy kitten' />,
+						<img src='https://placekitten.com/g/72/72' alt='fluffy kitten' />,
+					]}
+				/>
+			</Section></Bounds>
+		</InfoWrapper>
+	));
diff --git a/src/inlineBlockList.test.jsx b/src/inlineBlockList.test.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import InlineBlockList, {
+	INLINEBLOCKLIST_CLASS,
+	INLINEBLOCKLIST_SEPERATED_CLASS
+} from './InlineBlockList';
+
+const ITEMS = [
+		'English',
+		'English (Australian)',
+		'Deutsch',
+		'Español',
+		'Español (España)',
+		'Français',
+		'Italiano',
+		'Nederlands',
+		'Português',
+		'日本語',
+		'한국어',
+	],
+	SEPARATOR = '☃';
+
+let inlineblockList,
+	inlineblockListSeparated;
+
+describe('InlineBlockList', function() {
+	beforeEach(() => {
+		inlineblockList = TestUtils.renderIntoDocument(
+			<InlineBlockList items={ITEMS} />
+		);
+		inlineblockListSeparated = TestUtils.renderIntoDocument(
+			<InlineBlockList items={ITEMS} separator={SEPARATOR} />
+		);
+	});
+	afterEach(() => {
+		inlineblockList = null;
+		inlineblockListSeparated = null;
+	});
+
+	it('exists', function() {
+		expect(() => TestUtils.findRenderedDOMComponentWithClass(inlineblockList, INLINEBLOCKLIST_CLASS)).not.toThrow();
+	});
+
+	it(`should have a class of '${INLINEBLOCKLIST_SEPERATED_CLASS}' when a separator is defined`, () => {
+		const separatedList = TestUtils.scryRenderedDOMComponentsWithClass(inlineblockListSeparated, INLINEBLOCKLIST_SEPERATED_CLASS);
+		expect(separatedList.length).toBe(1);
+	});
+
+	it('should set the data-separator attribute on item elements when a separator is defined', () => {
+		const itemEl = TestUtils.scryRenderedDOMComponentsWithTag(inlineblockListSeparated, 'li');
+		expect(itemEl[0].getAttribute('data-separator')).toEqual(SEPARATOR);
+	});
+});