Item: Update to v1 API

docs/app/Examples/views/Item/Content/Images.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Item } from 'stardust'
+
+const { Group, Image } = Item
+
+const Images = () => (
+  <Group divided>
+    <Item>
+      <Image>
+        <img src='http://semantic-ui.com/images/wireframe/image.png' />
+      </Image>
+    </Item>
+
+    <Item>
+      <Image src='http://semantic-ui.com/images/wireframe/image.png' />
+    </Item>
+
+    <Item image='http://semantic-ui.com/images/wireframe/image.png' />
+  </Group>
+)
+
+export default Images

docs/app/Examples/views/Item/Content/index.js

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Image'
+      description='An item can contain an image'
+      examplePath='views/Item/Content/Images'
+    />
+
+    <ComponentExample
+      title='Content'
+      description='An item can contain content'
+      examplePath='views/Item/Content/Content'
+    />
+
+    <ComponentExample
+      title='Header'
+      description='An item can contain a header'
+      examplePath='views/Item/Content/Header'
+    />
+
+    <ComponentExample
+      title='Metadata'
+      description='An item can contain a header'
+      examplePath='views/Item/Content/Metadata'
+    />
+
+    <ComponentExample
+      title='Link'
+      description='An item can contain contain links as images, headers, or inside content'
+      examplePath='views/Item/Content/Link'
+    />
+
+    <ComponentExample
+      title='Description'
+      description='An item can contain contain links as images, headers, or inside content'
+      examplePath='views/Item/Content/Description'
+    />
+
+    <ComponentExample
+      title='Extra Content'
+      description='An item can contain contain links as images, headers, or inside content'
+      examplePath='views/Item/Content/ExtraContent'
+    />
+
+    <ComponentExample
+      title='Rating'
+      description='An item can contain icons signifying a "like" or "favorite" action'
+      examplePath='views/Item/Content/Rating'
+    />
+  </ExampleSection>
+)
+
+export default Content

docs/app/Examples/views/Item/Types/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title='Types'>
+
+  </ExampleSection>
+)
+
+export default Types

docs/app/Examples/views/Item/Variations/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title='Variations'>
+
+  </ExampleSection>
+)
+
+export default Variations

docs/app/Examples/views/Item/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Content from './Content'
+import Types from './Types'
+import Variations from './Variations'
+
+const ItemExamples = () => (
+  <div>
+    <Types />
+    <Content />
+    <Variations />
+  </div>
+)
+
+export default ItemExamples

src/views/Item/Item.js

@@ -1,5 +1,4 @@
 import cx from 'classnames'
-import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -8,35 +7,21 @@ import {
   getUnhandledProps,
   META,
 } from '../../lib'
+
+import ItemDescription from './ItemDescription'
 import ItemGroup from './ItemGroup'
+import ItemImage from './ItemImage'
 
 function Item(props) {
-  const { children, className, contentClassName, description, extra, header, image, meta } = props
-  const rest = getUnhandledProps(Item, props)
-
-  const { className: imageClassName, ...imageProps } = _.get(image, 'props', {})
-
+  const { children, className, image } = props
   const classes = cx(className, 'item')
-  const imageClasses = cx('ui', imageClassName, 'image')
-  const contentClasses = cx(contentClassName, 'content')
-
-  const _description = children || description
-
-  const content = header || meta || extra ? [
-    header && <div className='header'>{header}</div>,
-    meta && <div className='meta'>{meta}</div>,
-    _description && <div className='description'>{_description}</div>,
-    extra && <div className='extra'>{extra}</div>,
-  ] : [
-    _description,
-  ]
-
+  const rest = getUnhandledProps(Item, props)
   const ElementType = getElementType(Item, props)
 
   return (
     <ElementType {...rest} className={classes}>
-      {image && <div className={imageClasses}><img {...imageProps} /></div>}
-      {content && <div className={contentClasses}>{content}</div>}
+      {image && <ItemImage src={image} />}
+      {children}
     </ElementType>
   )
 }
@@ -46,33 +31,28 @@ Item._meta = {
   type: META.TYPES.VIEW,
 }
 
+Item.Description = ItemDescription
+Item.Group = ItemGroup
+Item.Image = ItemImage
+
 Item.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,
   ]),
 
+  /** Primary content of the Item. */
   children: customPropTypes.every([
-    customPropTypes.disallow(['description']),
+    customPropTypes.disallow(['content']),
     PropTypes.node,
   ]),
+
+  /** Classes that will be added to the Item className. */
   className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  description: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.node,
-  ]),
-  extra: PropTypes.node,
-  header: PropTypes.node,
-  image: PropTypes.node,
-  meta: PropTypes.node,
-}
 
-Item.defaultProps = {
-  contentClassName: 'middle aligned',
+  /** Shorthand for ItemImage component. */
+  image: PropTypes.string,
 }
 
-Item.Group = ItemGroup
-
 export default Item

src/views/Item/ItemContent.js

@@ -0,0 +1,49 @@
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
+
+import {
+  customPropTypes,
+getElementType,
+  getUnhandledProps,
+  META,
+} from '../../lib'
+
+function ItemContent(props) {
+  const { children, className, content } = props
+  const classes = cx(className, 'content')
+  const rest = getUnhandledProps(ItemContent, props)
+  const ElementType = getElementType(ItemContent, props)
+
+  return <ElementType {...rest} className={classes}>{children || content}</ElementType>
+}
+
+ItemContent._meta = {
+  name: 'ItemContent',
+  parent: 'Item',
+  type: META.TYPES.VIEW,
+}
+
+ItemContent.propTypes = {
+  /** An element type to render as (string or function). */
+  as: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+
+  /** Primary content of the ItemContent. */
+  children: customPropTypes.every([
+    customPropTypes.disallow(['content']),
+    PropTypes.node,
+  ]),
+
+  /** Classes that will be added to the ItemContent className. */
+  className: PropTypes.string,
+
+  /** Primary content of the ItemContent. Mutually exclusive with the children prop. */
+  content: customPropTypes.every([
+    customPropTypes.disallow(['children']),
+    PropTypes.string,
+  ]),
+}
+
+export default ItemContent

src/views/Item/ItemDescription.js

@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
 
 import {
   customPropTypes,
+getElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
@@ -11,8 +12,9 @@ function ItemDescription(props) {
   const { children, className, content } = props
   const classes = cx(className, 'description')
   const rest = getUnhandledProps(ItemDescription, props)
+  const ElementType = getElementType(ItemDescription, props)
 
-  return <div {...rest} className={classes}>{children || content}</div>
+  return <ElementType {...rest} className={classes}>{children || content}</ElementType>
 }
 
 ItemDescription._meta = {
@@ -22,6 +24,12 @@ ItemDescription._meta = {
 }
 
 ItemDescription.propTypes = {
+  /** An element type to render as (string or function). */
+  as: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+
   /** Primary content of the ItemDescription. */
   children: customPropTypes.every([
     customPropTypes.disallow(['content']),

src/views/Item/ItemGroup.js

@@ -1,6 +1,11 @@
-import React, { PropTypes } from 'react'
 import cx from 'classnames'
-import { getElementType, getUnhandledProps, META } from '../../lib'
+import React, { PropTypes } from 'react'
+
+import {
+  getElementType,
+  getUnhandledProps,
+  META,
+} from '../../lib'
 
 function ItemGroup(props) {
   const { className, children } = props
@@ -11,21 +16,27 @@ function ItemGroup(props) {
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }
 
+ItemGroup._meta = {
+  name: 'ItemGroup',
+  type: META.TYPES.VIEW,
+  parent: 'Item',
+}
+
 ItemGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,
   ]),
 
+  /** Primary content of the ItemGroup. */
   children: PropTypes.node,
+
+  /** Classes that will be added to the ItemGroup className. */
   className: PropTypes.string,
-}
 
-ItemGroup._meta = {
-  name: 'ItemGroup',
-  type: META.TYPES.VIEW,
-  parent: 'Item',
+  /** Items can be divided to better distinguish between grouped content. */
+  divided: PropTypes.bool,
 }
 
 export default ItemGroup

src/views/Item/ItemImage.js

@@ -0,0 +1,15 @@
+import React, { PropTypes } from 'react'
+import { META } from '../../lib'
+import Image from '../../elements/Image/Image'
+
+function ItemImage(props) {
+  return <Image {...props} />
+}
+
+ItemImage._meta = {
+  name: 'ItemImage',
+  parent: 'Item',
+  type: META.TYPES.VIEW,
+}
+
+export default ItemImage