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>
     )
   }

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

src/elements/List/List.js

@@ -9,6 +9,11 @@ import {
   useKeyOnly,
 } from '../../utils/propUtils'
 import ListItem from './ListItem'
+import Icon from '../Icon/Icon'
+import Image from '../Image/Image'
+import ItemHeader from './ItemHeader'
+import Content from '../Content/Content'
+import Description from '../Description/Description'
 
 function List(props) {
   const {
@@ -44,6 +49,11 @@ function List(props) {
 }
 
 List.Item = ListItem
+List.ItemIcon = Icon
+List.ItemImage = Image
+List.ItemHeader = ItemHeader
+List.ItemContent = Content
+List.ItemDescription = Description
 
 List._meta = {
   library: META.library.semanticUI,
@@ -52,6 +62,7 @@ List._meta = {
   props: {
     size: sui.sizes,
     aligned: sui.verticalAlignments,
+    relaxed: 'very',
   },
 }
 
@@ -93,7 +104,10 @@ List.propTypes = {
   inverted: PropTypes.bool,
 
   /** List can relax its padding to provide more negative space */
-  relaxed: PropTypes.bool,
+  relaxed: PropTypes.oneOf(
+    List._meta.props.relaxed,
+    PropTypes.bool
+  ),
 
   /** A selection list formats list items as possible choices */
   selection: PropTypes.bool,