feat(react-lists): Add list components in react

-Ul, Ol, InlineList, GroupList

[Finishes #86747994]

Signed-off-by: Beatrice Peng <bpeng@pivotal.io>

src/pivotal-ui/components/lists.scss

@@ -983,11 +983,97 @@ Use [Card lists][list_cards] if you'd like to make a grid of vertically and hori
 
 /*doc
 ---
-title: React Draggable List
-name: react_draggable_list
+title: React Lists
+name: react_list
 categories:
   - Beta
 ---
+*/
+
+/*doc
+---
+title: Unordered List
+name: react_list_unordered
+parent: react_list
+---
+
+```react_example_table
+<UI.Ul>
+  <UI.Li>Item 1</UI.Li>
+  <UI.Li>Item 2</UI.Li>
+  <UI.Li>Item 3</UI.Li>
+</UI.Ul>
+```
+
+```react_example_table
+<UI.Ul checked>
+  <UI.Li>Item 1</UI.Li>
+  <UI.Li>Item 2</UI.Li>
+  <UI.Li>Item 3</UI.Li>
+</UI.Ul>
+```
+*/
+
+/*doc
+---
+title: Ordered List
+name: react_list_ordered
+parent: react_list
+---
+
+```react_example_table
+<UI.Ol>
+  <UI.Li>Item 1</UI.Li>
+  <UI.Li>Item 2</UI.Li>
+  <UI.Li>Item 3</UI.Li>
+</UI.Ol>
+```
+*/
+
+/*doc
+---
+title: Inline List
+name: react_list_inline
+parent: react_list
+---
+
+```react_example_table
+<UI.InlineList>
+  <UI.Li>Item 1</UI.Li>
+  <UI.Li>Item 2</UI.Li>
+  <UI.Li>Item 3</UI.Li>
+</UI.InlineList>
+
+<UI.InlineList divider>
+  <UI.Li>Item 1</UI.Li>
+  <UI.Li>Item 2</UI.Li>
+  <UI.Li>Item 3</UI.Li>
+</UI.InlineList>
+```
+*/
+
+/*doc
+---
+title: Group List
+name: react_list_group
+parent: react_list
+---
+
+```react_example
+<UI.GroupList>
+  <UI.Li>Item 1</UI.Li>
+  <UI.Li>Item 2</UI.Li>
+  <UI.Li>Item 3</UI.Li>
+</UI.GroupList>
+```
+*/
+
+/*doc
+---
+title: React Draggable List
+name: react_list_draggable
+parent: react_list
+---
 
 Creates a draggable list.
 

src/pivotal-ui/javascripts/components.js

@@ -76,6 +76,11 @@ module.exports = {
   SimpleTabs: require('./tabs.jsx').SimpleTabs,
   SimpleAltTabs: require('./tabs.jsx').SimpleAltTabs,
 
+  Ul: require('./lists').Ul,
+  Ol: require('./lists').Ol,
+  InlineList: require('./lists').InlineList,
+  GroupList: require('./lists').GroupList,
+  Li: require('./li').Li,
   DraggableList: require('./draggable-list.js').DraggableList,
   DraggableListItem: require('./draggable-list.js').DraggableListItem,
 

src/pivotal-ui/javascripts/li.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react/addons');
+
+var Li = React.createClass({
+  render: function() {
+    return (
+      <li {...this.props}>{this.props.children}</li>
+    );
+  }
+});
+
+
+module.exports = {Li};

src/pivotal-ui/javascripts/lists.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var _ = require('lodash');
+var React = require('react/addons');
+
+module.exports = _.transform([
+  {name: 'Ul', Tag: 'ul', className: 'list-unordered', props: ['checked']},
+  {name: 'Ol', Tag: 'ol'},
+  {name: 'InlineList', className: 'list-inline', Tag: 'ul', props: ['divider']},
+  {name: 'GroupList', className: 'list-group', Tag: 'ul'}
+], function(memo, {name, className, props, Tag}) {
+  memo[name] = React.createClass({
+    renderChildren: function() {
+      if (name !== 'GroupList') {
+        return this.props.children
+      }
+      return React.Children.map(this.props.children, c => React.addons.cloneWithProps(c, {className: 'list-group-item'}));
+    },
+
+    render: function() {
+      if (this.props.checked && props.indexOf('checked') !== -1) {
+        className = 'list-checked';
+      } else if (this.props.divider && props.indexOf('divider') !== -1) {
+        className = 'list-inline-divider';
+      }
+      return (
+        <Tag {...{className}}>
+          {this.renderChildren()}
+        </Tag>
+      );
+    }
+  });
+}, {});