New List, ListItem, ListDivider, Avatar Components

docs/src/app/app-routes.jsx

@@ -24,6 +24,7 @@ var DropDownMenu = require('./components/pages/components/drop-down-menu.jsx');
 var Icons = require('./components/pages/components/icons.jsx');
 var IconButtons = require('./components/pages/components/icon-buttons.jsx');
 var LeftNav = require('./components/pages/components/left-nav.jsx');
+var Lists = require('./components/pages/components/lists.jsx');
 var Menus = require('./components/pages/components/menus.jsx');
 var Paper = require('./components/pages/components/paper.jsx');
 var Progress = require('./components/pages/components/progress.jsx');
@@ -65,6 +66,7 @@ var AppRoutes = (
       <Route name="icons" handler={Icons} />
       <Route name="icon-buttons" handler={IconButtons} />
       <Route name="left-nav" handler={LeftNav} />
+      <Route name="lists" handler={Lists} />
       <Route name="menus" handler={Menus} />
       <Route name="paper" handler={Paper} />
       <Route name="progress" handler={Progress} />

docs/src/app/components/mobile-tear-sheet.jsx

@@ -0,0 +1,55 @@
+var React = require('react');
+var mui = require('mui');
+var SvgIcon = mui.SvgIcon;
+
+var MobileTearSheet = React.createClass({
+
+  propTypes: {
+    height: React.PropTypes.number
+  },
+
+  getDefaultProps: function() {
+    return {
+      height: 500
+    };
+  },
+
+  render: function() {
+
+    var styles = {
+      root: {
+        float: 'left',
+        marginBottom: 24,
+        marginRight: 24,
+        width: 360
+
+      },
+
+      container: {
+        border: 'solid 1px #d9d9d9',
+        borderBottom: 'none',
+        height: this.props.height,
+        overflow: 'hidden'
+      },
+
+      bottomTear: {
+        display: 'block',
+        position: 'relative',
+        marginTop: -10,
+        width: 360
+      }
+    };
+
+    return (
+      <div style={styles.root}>
+        <div style={styles.container}>
+          {this.props.children}
+        </div>
+        <img style={styles.bottomTear} src="images/bottom-tear.svg" />
+      </div>
+    );
+  }
+
+});
+
+module.exports = MobileTearSheet;

docs/src/app/components/pages/components.jsx

@@ -13,6 +13,7 @@ class Components extends React.Component {
       { route: 'icons', text: 'Icons'},
       { route: 'icon-buttons', text: 'Icon Buttons'},
       { route: 'left-nav', text: 'Left Nav'},
+      { route: 'lists', text: 'Lists'},
       { route: 'menus', text: 'Menus'},
       { route: 'paper', text: 'Paper'},
       { route: 'progress', text: 'Progress'},