feat(List): update to v1 API

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

@@ -17,6 +17,15 @@ export default class ListDescriptionExample extends Component {
           header='Nashville'
           description='This city is located in the state of Tennessee'
         />
+        <List.Item>
+          <List.ItemIcon className='user' />
+          <List.ItemContent>
+            <List.ItemHeader>Daniel Louise</List.ItemHeader>
+            <List.ItemDescription>
+              This is an example of using sub-components.
+            </List.ItemDescription>
+          </List.ItemContent>
+        </List.Item>
       </List>
     )
   }

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

@@ -8,6 +8,16 @@ export default class ListHeaderExample extends Component {
         <List.Item header='Chapter 1' description='The chapter in which we meet the characters' />
         <List.Item header='Chapter 2' description='The chapter in which the bad guy is introduced' />
         <List.Item header='Chapter 3' description='Spoiler alert: The chapter in which the good guy wins!' />
+        <List.Item>
+          <List.ItemContent>
+            <List.ItemHeader>
+              Chapter 4
+            </List.ItemHeader>
+            <List.ItemDescription>
+              This is an example of a sub-component.
+            </List.ItemDescription>
+          </List.ItemContent>
+        </List.Item>
       </List>
     )
   }

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

@@ -21,6 +21,12 @@ export default class ListIconExample extends Component {
         <List.Item icon={helpIcon}>
           This item uses <code>child</code> text, check the code.
         </List.Item>
+        <List.Item>
+          <List.ItemIcon className='right triangle' />
+          <List.ItemContent>
+            This is an example of using sub-components
+          </List.ItemContent>
+        </List.Item>
       </List>
     )
   }

docs/app/Examples/elements/List/Types/ListBulletedExample.js

@@ -4,7 +4,7 @@ import { List } from 'stardust'
 export default class ListBulletedExample extends Component {
   render() {
     return (
-      <List className='bulleted'>
+      <List bulleted>
         <List.Item description='Apples' />
         <List.Item description='Pears' />
         <List.Item description='Oranges' />

docs/app/Examples/elements/List/Types/ListLinkExample.js

@@ -8,7 +8,7 @@ export default class ListLinkExample extends Component {
     const link3 = <a>Services</a>
     const link4 = <a>Careers</a>
     return (
-      <List className='link'>
+      <List link>
         <List.Item className='active' description={link1} />
         <List.Item description={link2} />
         <List.Item description={link3} />

docs/app/Examples/elements/List/Types/ListOrderedExample.js

@@ -4,7 +4,7 @@ import { List } from 'stardust'
 export default class ListOrderedExample extends Component {
   render() {
     return (
-      <List className='ordered'>
+      <List ordered>
         <List.Item description='Apples'>
           <List>
             <List.Item description='Fuji' />

docs/app/Examples/elements/List/Variations/ListAnimatedExample.js

@@ -8,7 +8,7 @@ export default class ListAnimatedExample extends Component {
     const avatar2 = <Image className='avatar' src={faker.image.avatar()} />
     const avatar3 = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='middle aligned animated'>
+      <List animated aligned='middle'>
         <List.Item image={avatar1} header='Helen' />
         <List.Item image={avatar2} header='Christian' />
         <List.Item image={avatar3} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListCelledExample.js

@@ -8,7 +8,7 @@ export default class ListCelledExample extends Component {
     const avatar2 = <Image className='avatar' src={faker.image.avatar()} />
     const avatar3 = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='celled'>
+      <List celled>
         <List.Item image={avatar1} header='Helen' />
         <List.Item image={avatar2} header='Christian' />
         <List.Item image={avatar3} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListDividedExample.js

@@ -8,7 +8,7 @@ export default class ListDividedExample extends Component {
     const avatar2 = <Image className='avatar' src={faker.image.avatar()} />
     const avatar3 = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='middle aligned divided'>
+      <List divided aligned='middle'>
         <List.Item image={avatar1} header='Helen' />
         <List.Item image={avatar2} header='Christian' />
         <List.Item image={avatar3} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListHorizontalExample.js

@@ -8,7 +8,7 @@ export default class ListHorizontalExample extends Component {
     const image2 = <Image className='avatar' src={faker.image.city(100, 100)} />
     const image3 = <Image className='avatar' src={faker.image.city(100, 100)} />
     return (
-      <List className='horizontal'>
+      <List horizontal>
         <List.Item image={image1} header='Chicago' description='This city is located in the state of Illinois' />
         <List.Item image={image2} header='Indianapolis' description='This city is located in the state of Indiana' />
         <List.Item image={image3} header='Nashville' description='This city is located in the state of Tennessee' />

docs/app/Examples/elements/List/Variations/ListInvertedExample.js

@@ -5,7 +5,7 @@ export default class ListInvertedExample extends Component {
   render() {
     return (
       <Segment className='inverted'>
-        <List className='inverted relaxed divided'>
+        <List inverted relaxed divided>
           <List.Item header='Chicago' description='Located in the state of Illinois' />
           <List.Item header='Indianapolis' description='Located in the state of Indiana' />
           <List.Item header='Nashville' description='Located in the state of Tennessee' />

docs/app/Examples/elements/List/Variations/ListRelaxedExample.js

@@ -8,7 +8,7 @@ export default class ListRelaxedExample extends Component {
     const avatar2 = <Image className='avatar' src={faker.image.avatar()} />
     const avatar3 = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='relaxed'>
+      <List relaxed>
         <List.Item image={avatar1} header='Helen' />
         <List.Item image={avatar2} header='Christian' />
         <List.Item image={avatar3} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListSelectionExample.js

@@ -8,7 +8,7 @@ export default class ListSelectionExample extends Component {
     const avatar2 = <Image className='avatar' src={faker.image.avatar()} />
     const avatar3 = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='selection'>
+      <List selection>
         <List.Item image={avatar1} header='Helen' />
         <List.Item image={avatar2} header='Christian' />
         <List.Item image={avatar3} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListSizeBigExample.js

@@ -8,7 +8,7 @@ export default class ListSizeBigExample extends Component {
     const christianAvatar = <Image className='avatar' src={faker.image.avatar()} />
     const danielAvatar = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='big horizontal divided'>
+      <List size='big' horizontal divided>
         <List.Item image={helenAvatar} header='Helen' />
         <List.Item image={christianAvatar} header='Christian' />
         <List.Item image={danielAvatar} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListSizeHugeExample.js

@@ -8,7 +8,7 @@ export default class ListSizeHugeExample extends Component {
     const christianAvatar = <Image className='avatar' src={faker.image.avatar()} />
     const danielAvatar = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='huge horizontal divided'>
+      <List size='huge' horizontal divided>
         <List.Item image={helenAvatar} header='Helen' />
         <List.Item image={christianAvatar} header='Christian' />
         <List.Item image={danielAvatar} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListSizeLargeExample.js

@@ -8,7 +8,7 @@ export default class ListSizeLargeExample extends Component {
     const christianAvatar = <Image className='avatar' src={faker.image.avatar()} />
     const danielAvatar = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='large horizontal divided'>
+      <List size='large' horizontal divided>
         <List.Item image={helenAvatar} header='Helen' />
         <List.Item image={christianAvatar} header='Christian' />
         <List.Item image={danielAvatar} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListSizeMassiveExample.js

@@ -8,7 +8,7 @@ export default class ListSizeMassiveExample extends Component {
     const christianAvatar = <Image className='avatar' src={faker.image.avatar()} />
     const danielAvatar = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='massive horizontal divided'>
+      <List size='massive' horizontal divided>
         <List.Item image={helenAvatar} header='Helen' />
         <List.Item image={christianAvatar} header='Christian' />
         <List.Item image={danielAvatar} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListSizeMediumExample.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import { List, Image } from 'stardust'
+import faker from 'faker'
+
+export default class ListSizeLargeExample extends Component {
+  render() {
+    const helenAvatar = <Image className='avatar' src={faker.image.avatar()} />
+    const christianAvatar = <Image className='avatar' src={faker.image.avatar()} />
+    const danielAvatar = <Image className='avatar' src={faker.image.avatar()} />
+    return (
+      <List size='medium' horizontal divided>
+        <List.Item image={helenAvatar} header='Helen' />
+        <List.Item image={christianAvatar} header='Christian' />
+        <List.Item image={danielAvatar} header='Daniel' />
+      </List>
+    )
+  }
+}

docs/app/Examples/elements/List/Variations/ListSizeMiniExample.js

@@ -8,7 +8,7 @@ export default class ListSizeMiniExample extends Component {
     const christianAvatar = <Image className='avatar' src={faker.image.avatar()} />
     const danielAvatar = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='mini horizontal divided'>
+      <List size='mini' horizontal divided>
         <List.Item image={helenAvatar} header='Helen' />
         <List.Item image={christianAvatar} header='Christian' />
         <List.Item image={danielAvatar} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListSizeSmallExample.js

@@ -8,7 +8,7 @@ export default class ListSizeSmallExample extends Component {
     const christianAvatar = <Image className='avatar' src={faker.image.avatar()} />
     const danielAvatar = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='small horizontal divided'>
+      <List size='small' horizontal divided>
         <List.Item image={helenAvatar} header='Helen' />
         <List.Item image={christianAvatar} header='Christian' />
         <List.Item image={danielAvatar} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListSizeTinyExample.js

@@ -8,7 +8,7 @@ export default class ListSizeTinyExample extends Component {
     const christianAvatar = <Image className='avatar' src={faker.image.avatar()} />
     const danielAvatar = <Image className='avatar' src={faker.image.avatar()} />
     return (
-      <List className='tiny horizontal divided'>
+      <List size='tiny' horizontal divided>
         <List.Item image={helenAvatar} header='Helen' />
         <List.Item image={christianAvatar} header='Christian' />
         <List.Item image={danielAvatar} header='Daniel' />

docs/app/Examples/elements/List/Variations/ListVariationsExamples.js

@@ -57,6 +57,7 @@ export default class ListVariationsExamples extends Component {
         />
         <ComponentExample examplePath='elements/List/Variations/ListSizeTinyExample' />
         <ComponentExample examplePath='elements/List/Variations/ListSizeSmallExample' />
+        <ComponentExample examplePath='elements/List/Variations/ListSizeMediumExample' />
         <ComponentExample examplePath='elements/List/Variations/ListSizeLargeExample' />
         <ComponentExample examplePath='elements/List/Variations/ListSizeBigExample' />
         <ComponentExample examplePath='elements/List/Variations/ListSizeHugeExample' />

docs/app/Examples/elements/List/Variations/ListVeryRelaxedExample.js

@@ -9,7 +9,7 @@ export default class ListVeryRelaxedExample extends Component {
     const avatar3 = <Image className='avatar' src={faker.image.avatar()} />
 
     return (
-      <List className='very relaxed'>
+      <List relaxed='very'>
         <List.Item image={avatar1} header='Helen' />
         <List.Item image={avatar2} header='Christian' />
         <List.Item image={avatar3} header='Daniel' />

src/elements/Content/Content.js

@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import META from '../../utils/Meta'
+
+function Content(props) {
+  const {
+    children, className, ...rest,
+    } = props
+
+  const classes = cx(
+    'content',
+    className
+  )
+
+  return (
+    <div className={classes} {...rest}>{children}</div>
+  )
+}
+
+Content._meta = {
+  name: 'Content',
+  type: META.type.element,
+}
+
+Content.propTypes = {
+  /** Primary content of the List */
+  children: PropTypes.node,
+
+  /** Classes to add to the list className. */
+  className: PropTypes.string,
+}
+
+export default Content

src/elements/Description/Description.js

@@ -0,0 +1,34 @@
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import META from '../../utils/Meta'
+
+function Description(props) {
+  const {
+    children, className, ...rest,
+    } = props
+
+  const classes = cx(
+    'description',
+    className
+  )
+
+  return (
+    <div className={classes} {...rest}>{children}</div>
+  )
+}
+
+Description._meta = {
+  library: META.library.semanticUI,
+  name: 'Description',
+  type: META.type.element,
+}
+
+Description.propTypes = {
+  /** Primary content of the List */
+  children: PropTypes.node,
+
+  /** Classes to add to the list className. */
+  className: PropTypes.string,
+}
+
+export default Description

src/elements/Icon/Icon.js

@@ -16,8 +16,8 @@ export default class Icon extends Component {
   render() {
     const { className } = this.props
     const classes = cx(
-      className,
       'icon',
+      className
     )
     return (
       <i {...this.props} className={classes} />

src/elements/List/ItemHeader.js

@@ -0,0 +1,38 @@
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import META from '../../utils/Meta'
+
+/**
+ * I'm not sure a seperate file is necessary or if there's a better way.
+ * Also not sure this is where this file would go.
+ */
+
+function ItemHeader(props) {
+  const {
+    children, className, ...rest,
+    } = props
+
+  const classes = cx(
+    'header',
+    className
+  )
+
+  return (
+    <div className={classes} {...rest}>{children}</div>
+  )
+}
+
+ItemHeader._meta = {
+  name: 'ItemHeader',
+  type: META.type.element,
+}
+
+ItemHeader.propTypes = {
+  /** Primary content of the List */
+  children: PropTypes.node,
+
+  /** Classes to add to the list className. */
+  className: PropTypes.string,
+}
+
+export default ItemHeader