Item: Update to v1 API

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Item } from 'stardust'
+
+const { Content, Group, Image } = Item
+
+const Contents = () => (
+  <Group divided>
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content verticalAlign='middle'>Content A</Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content verticalAlign='middle'>Content B</Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content content='Content C' verticalAlign='middle' />
+    </Item>
+  </Group>
+)
+
+export default Contents

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Item } from 'stardust'
+
+const { Content, Description, Group, Header, Image } = Item
+const description = [
+  'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',
+  'tiny stature, and even others for their massive size.',
+].join(' ')
+
+const Descriptions = () => (
+  <Group>
+    <Item>
+      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Content>
+        <Header as='a'>Cute Dog</Header>
+        <Description>
+          <p>{description}</p>
+          <p>
+            Many people also have their own barometers for what makes a cute dog.
+          </p>
+        </Description>
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Content>
+        <Header as='a'>Cute Dog</Header>
+        <Description content={description} />
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content header='Cute Dog' description={description} />
+    </Item>
+  </Group>
+)
+
+export default Descriptions

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Icon, Image as ImageComponent, Item } from 'stardust'
+
+const { Content, Description, Extra, Group, Header, Image } = Item
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const ExtraContent = () => (
+  <Group>
+    <Item>
+      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Content>
+        <Header as='a'>Cute Dog</Header>
+        <Description>{paragraph}</Description>
+        <Extra>
+          <Icon name='green check' /> 121 Votes
+        </Extra>
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Content>
+        <Header as='a'>Cute Dog</Header>
+        <Description>{paragraph}</Description>
+        <Extra content='121 Votes' />
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content header='Cute Dog' extra='121 Votes' />
+    </Item>
+  </Group>
+)
+
+export default ExtraContent

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Item } from 'stardust'
+
+const { Content, Group, Header, Image } = Item
+
+const Headers = () => (
+  <Group>
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content verticalAlign='middle'>
+        <Header as='a'>12 Years a Slave</Header>
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content verticalAlign='middle'>
+        <Header as='a' content='My Neighbor Totoro' />
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content header='Watchmen' verticalAlign='middle' />
+    </Item>
+  </Group>
+)
+
+export default Headers

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Item } from 'stardust'
+
+const { Group, Image } = Item
+
+const Images = () => (
+  <Group divided>
+    <Item>
+      <Image src='http://semantic-ui.com/images/wireframe/image.png' />
+    </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/Link.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Image as ImageComponent, Item } from 'stardust'
+
+const { Content, Description, Group, Header, Image, Meta } = Item
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const Link = () => (
+  <Group>
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Content>
+        <Header>Arrowhead Valley Camp</Header>
+        <Meta>
+          <span className='price'>$1200</span>
+          <span className='stay'>1 Month</span>
+        </Meta>
+        <Description>{paragraph}</Description>
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Content>
+        <Header>Buck's Homebrew Stayaway</Header>
+        <Meta content='$1000 2 Weeks' />
+        <Description>{paragraph}</Description>
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
+    </Item>
+  </Group>
+)
+
+export default Link

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Image as ImageComponent, Item } from 'stardust'
+
+const { Content, Description, Group, Header, Image, Meta } = Item
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const Metadata = () => (
+  <Group>
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Content>
+        <Header>Arrowhead Valley Camp</Header>
+        <Meta>
+          <span className='price'>$1200</span>
+          <span className='stay'>1 Month</span>
+        </Meta>
+        <Description>{paragraph}</Description>
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Content>
+        <Header>Buck's Homebrew Stayaway</Header>
+        <Meta content='$1000 2 Weeks' />
+        <Description>{paragraph}</Description>
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
+    </Item>
+  </Group>
+)
+
+export default Metadata

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Icon, Item } from 'stardust'
+
+const { Content, Group, Header, Image } = Item
+
+const Ratings = () => (
+  <Group>
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/avatar/large/jenny.jpg' />
+
+      <Content verticalAlign='middle'>
+        <Header>
+          <Icon name='like' />
+          Veronika Ossi
+        </Header>
+      </Content>
+    </Item>
+
+    <Item>
+      <Image size='tiny' src='http://semantic-ui.com/images/avatar/large/justen.jpg' />
+
+      <Content verticalAlign='middle'>
+        <Header>
+          <Icon name='favorite' />
+          Justen Kitsune
+        </Header>
+      </Content>
+    </Item>
+  </Group>
+)
+
+export default Ratings

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/Contents'
+    />
+
+    <ComponentExample
+      title='Header'
+      description='An item can contain a header'
+      examplePath='views/Item/Content/Headers'
+    />
+
+    <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/Descriptions'
+    />
+
+    <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/Ratings'
+     />
+  </ExampleSection>
+)
+
+export default Content

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Image, Item } from 'stardust'
+
+const Items = () => (
+  <Item.Group>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>Header</Item.Header>
+        <Item.Meta>Description</Item.Meta>
+        <Item.Description>
+          <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+        </Item.Description>
+        <Item.Extra>Additional Details</Item.Extra>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>Header</Item.Header>
+        <Item.Meta>Description</Item.Meta>
+        <Item.Description>
+          <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+        </Item.Description>
+        <Item.Extra>Additional Details</Item.Extra>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default Items

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Item } from 'stardust'
+
+const items = [
+  {
+    childKey: 0,
+    image: 'http://semantic-ui.com/images/wireframe/image.png',
+    header: 'Header',
+    description: 'Description',
+    meta: 'Metadata',
+    extra: 'Extra',
+  },
+  {
+    childKey: 1,
+    image: 'http://semantic-ui.com/images/wireframe/image.png',
+    header: 'Header',
+    description: 'Description',
+    meta: 'Metadata',
+    extra: 'Extra',
+  },
+]
+
+const Props = () => (
+  <Item.Group items={items} />
+)
+
+export default Props