Feature/add sd list item

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

src/elements/List/List.js

@@ -0,0 +1,15 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+
+export default class List extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+  };
+
+  render() {
+    let classes = classNames('sd-list', 'ui', this.props.className, 'list');
+    return (
+      <div {...this.props} className={classes}></div>
+    );
+  }
+}

src/elements/List/ListItem.js

@@ -0,0 +1,44 @@
+import _ from 'lodash';
+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() {
+    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 {...props} className={classes}>
+        {image || icon}
+        <div className='content'>
+          {hasHeader && header}
+          <div className='description'>
+            {children || description}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}