feat(List): More docs

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListBulleted = () => {
+  return (
+    <List bulleted>
+      <List.Item>Gaining Access</List.Item>
+      <List.Item>Inviting Friends</List.Item>
+      <List.Item>
+        <div>Benefits</div>
+
+        <List.List>
+          <List.Item href='#'>Link to somewhere</List.Item>
+          <List.Item>Rebates</List.Item>
+          <List.Item>Discounts</List.Item>
+        </List.List>
+      </List.Item>
+      <List.Item>Warranty</List.Item>
+    </List>
+  )
+}
+
+export default ListBulleted

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListBulletedHorizontal = () => {
+  return (
+    <List bulleted horizontal>
+      <List.Item as='a'>About Us</List.Item>
+      <List.Item as='a'>Sitemap</List.Item>
+      <List.Item as='a'>Contact</List.Item>
+    </List>
+  )
+}
+
+export default ListBulletedHorizontal

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListBulleted = () => {
+  return (
+    <List as='ul' bulleted>
+      <List.Item as='li'>Gaining Access</List.Item>
+      <List.Item as='li'>Inviting Friends</List.Item>
+      <List.Item as='li'>
+        Benefits
+
+        <List.List as='ul'>
+          <List.Item as='li'>
+            <a href='#'>Link to somewhere</a>
+          </List.Item>
+          <List.Item as='li'>Rebates</List.Item>
+          <List.Item as='li'>Discounts</List.Item>
+        </List.List>
+      </List.Item>
+      <List.Item as='li'>Warranty</List.Item>
+    </List>
+  )
+}
+
+export default ListBulleted

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

@@ -1,25 +1,25 @@
 import React from 'react'
-import { Icon, List } from 'stardust'
+import { List } from 'stardust'
 
 const ListIcons = () => {
   return (
     <List>
       <List.Item>
-        <Icon name='users' />
+        <List.Icon name='users' />
         <List.Content>Semantic UI</List.Content>
       </List.Item>
       <List.Item>
-        <Icon name='marker' />
+        <List.Icon name='marker' />
         <List.Content>New York, NY</List.Content>
       </List.Item>
       <List.Item>
-        <Icon name='mail' />
+        <List.Icon name='mail' />
         <List.Content>
           <a href='mailto:jack@semantic-ui.com'>jack@semantic-ui.com</a>
         </List.Content>
       </List.Item>
       <List.Item>
-        <Icon name='linkify' />
+        <List.Icon name='linkify' />
         <List.Content>
           <a href='http://www.semantic-ui.com'>semantic-ui.com</a>
         </List.Content>

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

@@ -0,0 +1,80 @@
+import React from 'react'
+import { List } from 'stardust'
+
+const ListTree = () => {
+  return (
+    <List>
+      <List.Item>
+        <List.Icon name='folder' />
+        <List.Content>
+          <List.Header>src</List.Header>
+          <List.Description>Source files for project</List.Description>
+          <List.List>
+            <List.Item>
+              <List.Icon name='folder' />
+              <List.Content>
+                <List.Header>site</List.Header>
+                <List.Description>Your site's theme</List.Description>
+              </List.Content>
+            </List.Item>
+            <List.Item>
+              <List.Icon name='folder' />
+              <List.Content>
+                <List.Header>themes</List.Header>
+                <List.Description>Packaged theme files</List.Description>
+                <List.List>
+                  <List.Item>
+                    <List.Icon name='folder' />
+                    <List.Content>
+                      <List.Header>default</List.Header>
+                      <List.Description>Default packaged theme</List.Description>
+                    </List.Content>
+                  </List.Item>
+                  <List.Item>
+                    <List.Icon name='folder' />
+                    <List.Content>
+                      <List.Header>my_theme</List.Header>
+                      <List.Description>Packaged themes are also available in this folder</List.Description>
+                    </List.Content>
+                  </List.Item>
+                </List.List>
+              </List.Content>
+            </List.Item>
+            <List.Item>
+              <List.Icon name='file' />
+              <List.Content>
+                <List.Header>theme.config</List.Header>
+                <List.Description>Config file for setting packaged themes</List.Description>
+              </List.Content>
+            </List.Item>
+          </List.List>
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <List.Icon name='folder' />
+        <List.Content>
+          <List.Header>dist</List.Header>
+          <List.Description>Compiled CSS and JS files</List.Description>
+          <List.List>
+            <List.Item>
+              <List.Icon name='folder' />
+              <List.Content>
+                <List.Header>components</List.Header>
+                <List.Description>Individual component CSS and JS</List.Description>
+              </List.Content>
+            </List.Item>
+          </List.List>
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <List.Icon name='file' />
+        <List.Content>
+          <List.Header>semantic.json</List.Header>
+          <List.Description>Contains build settings for gulp</List.Description>
+        </List.Content>
+      </List.Item>
+    </List>
+  )
+}
+
+export default ListTree

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Message } from 'stardust'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
@@ -12,12 +13,21 @@ const Types = () => {
         examplePath='elements/List/Types/ListBasic'
       />
       <ComponentExample examplePath='elements/List/Types/ListIcons' />
+      <ComponentExample examplePath='elements/List/Types/ListDivided' />
+      <ComponentExample examplePath='elements/List/Types/ListTree' />
 
       <ComponentExample
         title='Bulleted'
         description='A list can mark items with a bullet'
-        examplePath='elements/List/Types/ListBulletedExample'
+        examplePath='elements/List/Types/ListBulleted'
       />
+      <ComponentExample examplePath='elements/List/Types/ListBulletedUl'>
+        <Message info>
+          For convenience, a simple bulleted list can also use <code>ul</code> tag.
+        </Message>
+      </ComponentExample>
+      <ComponentExample examplePath='elements/List/Types/ListBulletedHorizontal' />
+
       <ComponentExample
         title='Ordered'
         description='A list can be ordered numerically'

src/elements/List/List.js

@@ -6,15 +6,33 @@ import {
   getElementType,
   getUnhandledProps,
   META,
+  useKeyOnly,
 } from '../../lib'
 import ListContent from './ListContent'
+import ListDescription from './ListDescription'
 import ListHeader from './ListHeader'
 import ListIcon from './ListIcon'
 import ListItem from './ListItem'
+import ListList from './ListList'
 
 function List(props) {
-  const { children, className } = props
-  const classes = cx('ui', className, 'item')
+  const {
+    bulleted,
+    children,
+    className,
+    divided,
+    horizontal,
+    relaxed,
+  } = props
+  const classes = cx(
+    'ui',
+    useKeyOnly(bulleted, 'bulleted'),
+    useKeyOnly(divided, 'divided'),
+    useKeyOnly(horizontal, 'horizontal'),
+    useKeyOnly(relaxed, 'relaxed'),
+    className,
+    'list'
+  )
 
   const ElementType = getElementType(List, props)
   const rest = getUnhandledProps(List, props)
@@ -31,16 +49,27 @@ List.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
+  /** A list can mark items with a bullet. */
+  bulleted: PropTypes.bool,
+
   /** Primary content of the List. */
   children: PropTypes.node,
 
   /** Classes to add to the List className. */
   className: PropTypes.string,
+
+  divided: PropTypes.bool,
+
+  horizontal: PropTypes.bool,
+
+  relaxed: PropTypes.bool,
 }
 
 List.Content = ListContent
+List.Description = ListDescription
 List.Header = ListHeader
 List.Icon = ListIcon
 List.Item = ListItem
+List.List = ListList
 
 export default List

src/elements/List/ListDescription.js

@@ -0,0 +1,38 @@
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
+
+import {
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  META,
+} from '../../lib'
+
+function ListDescription(props) {
+  const { children, className } = props
+  const classes = cx(className, 'description')
+
+  const ElementType = getElementType(ListDescription, props)
+  const rest = getUnhandledProps(ListDescription, props)
+
+  return <ElementType {...rest} className={classes}>{children}</ElementType>
+}
+
+ListDescription._meta = {
+  name: 'ListDescription',
+  parent: 'List',
+  type: META.TYPES.ELEMENT,
+}
+
+ListDescription.propTypes = {
+  /** An element type to render as (string or function). */
+  as: customPropTypes.as,
+
+  /** Primary content of the ListDescription. */
+  children: PropTypes.node,
+
+  /** Classes to add to the ListDescription className. */
+  className: PropTypes.string,
+}
+
+export default ListDescription

src/elements/List/ListHeader.js

@@ -10,7 +10,7 @@ import {
 
 function ListHeader(props) {
   const { children, className } = props
-  const classes = cx(className, 'content')
+  const classes = cx(className, 'header')
 
   const ElementType = getElementType(ListHeader, props)
   const rest = getUnhandledProps(ListHeader, props)

src/elements/List/ListIcon.js

@@ -1,16 +1,23 @@
+import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
 import {
+  getUnhandledProps,
   META,
   SUI,
   useVerticalAlignProp,
 } from '../../lib'
 import { Icon } from '../'
 
 function ListIcon(props) {
-  const { verticalAlign } = props
+  const { className, verticalAlign } = props
+  const classes = cx(
+    useVerticalAlignProp(verticalAlign),
+    className
+  )
+  const rest = getUnhandledProps(ListIcon, props)
 
-  return <Icon {...props} className={useVerticalAlignProp(verticalAlign)} />
+  return <Icon {...rest} className={classes} />
 }
 
 ListIcon._meta = {
@@ -23,6 +30,9 @@ ListIcon._meta = {
 }
 
 ListIcon.propTypes = {
+  /** Classes to add to the ListIcon className. */
+  className: PropTypes.string,
+
   verticalAlign: PropTypes.oneOf(ListIcon._meta.props.verticalAlign),
 }