From dbf80fc4b4cc46ef771a74ac31c8aec5308e6dc8 Mon Sep 17 00:00:00 2001
From: athurman <athurman215@gmail.com>
Date: Mon, 19 Oct 2015 21:42:04 -0500
Subject: [PATCH 1/4] add list components

---
 src/elements/List/List.js     | 18 ++++++++++++++++++
 src/elements/List/ListItem.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/elements/List/List.js
 create mode 100644 src/elements/List/ListItem.js

diff --git a/src/elements/List/List.js b/src/elements/List/List.js
new file mode 100644
index 0000000000..fc5ad18727
--- /dev/null
+++ b/src/elements/List/List.js
@@ -0,0 +1,18 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+
+export default class List extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+  };
+
+  render() {
+    let classes = classNames('sd-list', 'ui', this.props.className, 'list');
+    return (
+      <div {...this.props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
new file mode 100644
index 0000000000..d094ce3fc4
--- /dev/null
+++ b/src/elements/List/ListItem.js
@@ -0,0 +1,29 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+
+export default class ListItem extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    description: PropTypes.node,
+    header: PropTypes.string,
+    icon: PropTypes.node,
+    image: PropTypes.node,
+  };
+
+  render() {
+    let classes = classNames('sd-list-item', this.props.className, 'item');
+    let header = <div className='header'>{this.props.header}</div>;
+    return (
+      <div {...this.props} className={classes}>
+        {this.props.image || this.props.icon}
+        <div className='content'>
+          {this.props.header && header}
+          <div className='description'>
+            {this.props.children || this.props.description}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

From eb8b88dfaec6272ec27b1d400c50764e3ba57866 Mon Sep 17 00:00:00 2001
From: athurman <athurman215@gmail.com>
Date: Mon, 19 Oct 2015 21:42:54 -0500
Subject: [PATCH 2/4] add components to index.js

---
 index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.js b/index.js
index 621308d50c..82cc3e4291 100644
--- a/index.js
+++ b/index.js
@@ -22,6 +22,8 @@ import Button from 'src/elements/Button/Button';
 import Container from 'src/elements/Container/Container';
 import Image from 'src/elements/Image/Image';
 import Input from 'src/elements/Input/Input';
+import List from 'src/elements/List/List';
+import ListItem from 'src/elements/List/ListItem';
 import Segment from 'src/elements/Segment/Segment';
 
 // Modules
@@ -61,6 +63,8 @@ export default {
   Container,
   Image,
   Input,
+  List,
+  ListItem,
   Segment,
 
   // Modules

From 4093af22ad3ef558e29bf8411c95f07b2478964b Mon Sep 17 00:00:00 2001
From: levithomason <me@levithomason.com>
Date: Wed, 21 Oct 2015 15:46:04 -0700
Subject: [PATCH 3/4] handle spread props on list item

---
 src/elements/List/ListItem.js | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index d094ce3fc4..3d90751a55 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 
@@ -12,15 +13,29 @@ export default class ListItem extends Component {
   };
 
   render() {
-    let classes = classNames('sd-list-item', this.props.className, 'item');
-    let header = <div className='header'>{this.props.header}</div>;
+    const children = _.clone(this.props.children);
+    const classes = classNames('sd-list-item', this.props.className, 'item');
+    const description = _.clone(this.props.description);
+    const hasHeader = !!this.props.header;
+    const header = <div className='header'>{this.props.header}</div>;
+    const icon = _.clone(this.props.icon);
+    const image = _.clone(this.props.image);
+
+    const props = _.clone(this.props);
+    delete props.children;
+    delete props.className;
+    delete props.description;
+    delete props.header;
+    delete props.icon;
+    delete props.image;
+
     return (
-      <div {...this.props} className={classes}>
-        {this.props.image || this.props.icon}
+      <div {...props} className={classes}>
+        {image || icon}
         <div className='content'>
-          {this.props.header && header}
+          {hasHeader && header}
           <div className='description'>
-            {this.props.children || this.props.description}
+            {children || description}
           </div>
         </div>
       </div>

From fa70c082526a39c35ba4f4fce8a071b3cfae5570 Mon Sep 17 00:00:00 2001
From: levithomason <me@levithomason.com>
Date: Wed, 21 Oct 2015 15:47:15 -0700
Subject: [PATCH 4/4] fix duplicate children in list

---
 src/elements/List/List.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index fc5ad18727..f88f0fab16 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -3,16 +3,13 @@ import classNames from 'classnames';
 
 export default class List extends Component {
   static propTypes = {
-    children: PropTypes.node,
     className: PropTypes.string,
   };
 
   render() {
     let classes = classNames('sd-list', 'ui', this.props.className, 'list');
     return (
-      <div {...this.props} className={classes}>
-        {this.props.children}
-      </div>
+      <div {...this.props} className={classes}></div>
     );
   }
 }