Feature/add sd item

index.js

@@ -31,6 +31,10 @@ import ModalFooter from 'src/modules/Modal/ModalFooter';
 import ModalHeader from 'src/modules/Modal/ModalHeader';
 import Dropdown from 'src/modules/Dropdown/Dropdown';
 
+// Views
+import Item from 'src/views/Items/Item';
+import Items from 'src/views/Items/Items';
+
 export default {
   // Addons
   Confirm,
@@ -64,4 +68,8 @@ export default {
   ModalFooter,
   ModalHeader,
   Dropdown,
+
+  // Views
+  Item,
+  Items,
 };

src/utils/customPropTypes.js

@@ -0,0 +1,16 @@
+import _ from 'lodash';
+
+let customPropTypes = {
+  mutuallyExclusive: (exclusives, props, propName, componentName) => {
+    _.forEach(exclusives, exclusiveProp => {
+      if (props[propName] && props[exclusiveProp]) {
+        throw new Error(`\`${componentName}\` should only have one of type \`${propName}\` or \`${exclusiveProp}\`, ` +
+          `not both.`);
+      }
+
+      return null;
+    });
+  },
+};
+
+export default customPropTypes;

src/views/Items/Item.js

@@ -0,0 +1,44 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import customPropTypes from '../../utils/customPropTypes';
+
+export default class Item extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    description: customPropTypes.mutuallyExclusive.bind(null, ['children']),
+    extra: PropTypes.node,
+    heading: PropTypes.node.isRequired,
+    image: PropTypes.node,
+    meta: PropTypes.node,
+  };
+
+  render() {
+    let heading = <div className='header'>{this.props.heading}</div>;
+    let meta = <div className='meta'>{this.props.meta}</div>;
+    let description = <div className='description'>{this.props.children || this.props.description}</div>;
+    let extra = <div className='extra'>{this.props.extra}</div>;
+    let content = (
+      <div className='middle aligned content'>
+        {this.props.heading && heading}
+        {this.props.meta && meta}
+        {this.props.children && description || this.props.description && description}
+        {this.props.extra && extra}
+      </div>
+    );
+    let hasContent = !!this.props.heading || !!this.props.meta || !!this.props.extra || !!this.props.children
+    || !!this.props.description;
+
+    let classes = classNames(
+      'sd-item',
+      this.props.className,
+      'item',
+    );
+    return (
+      <div {...this.props} className={classes}>
+        {this.props.image}
+        {hasContent && content}
+      </div>
+    );
+  }
+}

src/views/Items/Items.js

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

test/specs/views/Items/Item-test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {Item} from 'stardust';
+import faker from 'faker';
+
+describe('Item', () => {
+  it('has children', () => {
+    let child = faker.hacker.phrase();
+    render(<Item description='foo'>{child}</Item>).findText(child);
+  });
+});