Refactoring: simplify PropsRenderer a bit

package.json

@@ -53,6 +53,7 @@
     "prettyjson": "1.1.3",
     "react-codemirror": "0.2.6",
     "react-docgen": "2.11.0",
+    "react-group": "^1.0.0",
     "remark": "~6.0.1",
     "remark-parse": "~2.0.2",
     "semver-utils": "1.1.1",

src/rsg-components/Props/Props.css

@@ -41,19 +41,3 @@
 .type {
 	composes: type from "../../styles/colors.css";
 }
-
-.list {
-	display: inline;
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-}
-.listItem {
-	display: inline;
-}
-.listItem:after {
-	content: ", ";
-}
-.listItem:last-child:after {
-	content: "";
-}

src/rsg-components/Props/Props.spec.js

@@ -1,6 +1,7 @@
 import test from 'ava';
 import React from 'react';
 import { parse } from 'react-docgen';
+import Group from 'react-group';
 import Code from '../Code';
 import Markdown from '../Markdown';
 import PropsRenderer from './PropsRenderer';
@@ -31,7 +32,7 @@ test('should render PropTypes.string', () => {
 			<td><Code>color</Code></td>
 			<td><Code>string</Code></td>
 			<td></td>
-			<td><div /></td>
+			<td><Group /></td>
 		</tr>
 	);
 });
@@ -44,7 +45,7 @@ test('should render PropTypes.string with a default value', () => {
 			<td><Code>color</Code></td>
 			<td><Code>string</Code></td>
 			<td><Code>pink</Code></td>
-			<td><div /></td>
+			<td><Group /></td>
 		</tr>
 	);
 });
@@ -57,7 +58,7 @@ test('should render PropTypes.string.isRequired', () => {
 			<td><Code>color</Code></td>
 			<td><Code>string</Code></td>
 			<td><span>Required</span></td>
-			<td><div /></td>
+			<td><Group /></td>
 		</tr>
 	);
 });
@@ -70,7 +71,7 @@ test('should render PropTypes.arrayOf', () => {
 			<td><Code>colors</Code></td>
 			<td><Code>string[]</Code></td>
 			<td></td>
-			<td><div /></td>
+			<td><Group /></td>
 		</tr>
 	);
 });
@@ -83,28 +84,27 @@ test('should render PropTypes.instanceOf', () => {
 			<td><Code>num</Code></td>
 			<td><Code>Number</Code></td>
 			<td></td>
-			<td><div /></td>
+			<td><Group /></td>
 		</tr>
 	);
 });
 
 test('should render PropTypes.shape', () => {
 	const actual = render(['foo: PropTypes.shape({bar: PropTypes.number.isRequired, baz: PropTypes.any})']);
-
 	expect(actual.node, 'to contain',
 		<tr>
 			<td><Code>foo</Code></td>
 			<td><Code>shape</Code></td>
 			<td></td>
 			<td>
-				<div>
+				<Group>
 					<div>
 						<Code>bar</Code>: <Code>number</Code> — <span>Required</span>
 					</div>
 					<div>
 						<Code>baz</Code>: <Code>any</Code>
 					</div>
-				</div>
+				</Group>
 			</td>
 		</tr>
 	);
@@ -118,7 +118,7 @@ test('should render description in Markdown', () => {
 			<td><Code>color</Code></td>
 			<td><Code>string</Code></td>
 			<td></td>
-			<td><div><Markdown text="Label" /></div></td>
+			<td><Group><Markdown text="Label" /></Group></td>
 		</tr>
 	);
 });
@@ -131,7 +131,7 @@ test('should render unknown proptype for a prop when a relevant proptype is not
 			<td><Code>color</Code></td>
 			<td><Code>unknown</Code></td>
 			<td><Code>pink</Code></td>
-			<td><div /></td>
+			<td><Group /></td>
 		</tr>
 	);
 });

src/rsg-components/Props/PropsRenderer.js

@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react';
 import Code from 'rsg-components/Code';
 import Markdown from 'rsg-components/Markdown';
-import { unquote, showSpaces, getType } from './util';
+import Group from 'react-group';
+import { unquote, getType, showSpaces } from './util';
 
 import s from './Props.css';
 
@@ -56,11 +57,10 @@ function renderDescription(prop) {
 	let { description } = prop;
 	let extra = renderExtra(prop);
 	return (
-		<div>
+		<Group>
 			{description && <Markdown text={description} inline />}
-			{description && extra && ' '}
 			{extra}
-		</div>
+		</Group>
 	);
 }
 
@@ -93,27 +93,24 @@ function renderEnum(prop) {
 		return <span>{getType(prop).value}</span>;
 	}
 	let values = getType(prop).value.map(({ value }) => (
-		<li className={s.listItem} key={value}>
-			<Code>{showSpaces(unquote(value))}</Code>
-		</li>
+		<Code>{showSpaces(unquote(value))}</Code>
 	));
+
 	return (
-		<span>One of: <ul className={s.list}>{values}</ul></span>
+		<span>One of: <Group separator=", " inline>{values}</Group></span>
 	);
 }
 
 function renderUnion(prop) {
 	if (!Array.isArray(getType(prop).value)) {
 		return <span>{getType(prop).value}</span>;
 	}
-	let values = getType(prop).value.map((value, index) => (
-		<li className={s.listItem} key={value.name + index}>
-			<Code className={s.type}>{renderType(value)}</Code>
-		</li>
+	let values = getType(prop).value.map((value) => (
+		<Code className={s.type}>{renderType(value)}</Code>
 	));
 
 	return (
-		<span>One of type: <ul className={s.list}>{values}</ul></span>
+		<span>One of type: <Group seperator=", " inline>{values}</Group></span>
 	);
 }