update item component to handle images better

Author: kyleturco

docs/app/Examples/elements/List/Content/ListImageExample.js

@@ -1,6 +1,6 @@
 import faker from 'faker';
 import React, {Component} from 'react';
-import {List, ListItem} from 'stardust';
+import {List, ListItem, Image} from 'stardust';
 
 export default class ListImageExample extends Component {
   render() {

src/elements/Image/Image.js

@@ -24,9 +24,7 @@ export default class Image extends Component {
     );
 
     return (
-      <div className={classes}>
-        <img {...this.props} />
-      </div>
+      <img {...this.props} className={classes} />
     );
   }
 }

src/views/Items/Item.js

@@ -11,7 +11,7 @@ export default class Item extends Component {
     contentClass: PropTypes.string,
     description: customPropTypes.mutuallyExclusive(['children']),
     extra: PropTypes.node,
-    heading: PropTypes.node,
+    header: PropTypes.node,
     image: PropTypes.node,
     meta: PropTypes.node,
   };
@@ -27,20 +27,33 @@ export default class Item extends Component {
   };
 
   render() {
-    const heading = <div className='header'>{this.props.heading}</div>;
-    const meta = <div className='meta'>{this.props.meta}</div>;
     const description = <div className='description'>{this.props.children || this.props.description}</div>;
     const extra = <div className='extra'>{this.props.extra}</div>;
+    const header = <div className='header'>{this.props.header}</div>;
+
+    const imageClasses = classNames(
+      'sd-item-image',
+      'ui',
+      this.props.image.props.className,
+      'image',
+    );
+    const image = (
+      <div className={imageClasses}>
+        <img {..._.omit(this.props.image.props, 'className')} />
+      </div>
+    );
+    const meta = <div className='meta'>{this.props.meta}</div>;
+
     const contentClass = classNames('sd-item-content', this.props.contentClass, 'content');
     const content = (
       <div className={contentClass}>
-        {this.props.heading && heading}
+        {this.props.header && header}
         {this.props.meta && meta}
-        {this.props.children && description || this.props.description && description}
+        {(this.props.children || this.props.description) && description}
         {this.props.extra && extra}
       </div>
     );
-    const hasContent = !!this.props.heading || !!this.props.meta || !!this.props.extra || !!this.props.children
+    const hasContent = !!this.props.header || !!this.props.meta || !!this.props.extra || !!this.props.children
     || !!this.props.description;
 
     const classes = classNames(
@@ -54,13 +67,13 @@ export default class Item extends Component {
     delete props.className;
     delete props.description;
     delete props.extra;
-    delete props.heading;
+    delete props.header;
     delete props.image;
     delete props.meta;
 
     return (
       <div {...props} className={classes}>
-        {this.props.image}
+        {this.props.image && image}
         {hasContent && content}
       </div>
     );