Update Documentation for Paper

docs/src/app/app-routes.jsx

@@ -36,7 +36,7 @@ import IconMenus from './components/pages/components/icon-menus';
 import LeftNavPage from './components/pages/components/LeftNav/Page';
 import Lists from './components/pages/components/lists';
 import Menus from './components/pages/components/menus';
-import Paper from './components/pages/components/paper';
+import PaperPage from './components/pages/components/Paper/Page';
 import Popover from './components/pages/components/popover';
 import Progress from './components/pages/components/progress';
 import RefreshIndicator from './components/pages/components/refresh-indicator';
@@ -97,7 +97,7 @@ const AppRoutes = (
       <Route path="left-nav" component={LeftNavPage} />
       <Route path="lists" component={Lists} />
       <Route path="menus" component={Menus} />
-      <Route path="paper" component={Paper} />
+      <Route path="paper" component={PaperPage} />
       <Route path="popover" component={Popover} />
       <Route path="progress" component={Progress} />
       <Route path="refresh-indicator" component={RefreshIndicator} />

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import Paper from 'material-ui/lib/paper';
+
+const style = {
+  root: {
+    height: 100,
+    width: 100,
+    marginLeft: 40,
+    textAlign: 'center',
+    display: 'inline-block',
+  },
+  p: {
+    lineHeight: '80px',
+  },
+};
+
+const PaperExampleCircle = () => (
+  <div>
+    <Paper style={style.root} zDepth={1} circle={true}>
+      <p style={style.p}>circle=true</p>
+    </Paper>
+    <Paper style={style.root} zDepth={2} circle={true}>
+      <p style={style.p}>circle=true</p>
+    </Paper>
+    <Paper style={style.root} zDepth={3} circle={true}>
+      <p style={style.p}>circle=true</p>
+    </Paper>
+    <Paper style={style.root} zDepth={4} circle={true}>
+      <p style={style.p}>circle=true</p>
+    </Paper>
+    <Paper style={style.root} zDepth={5} circle={true}>
+      <p style={style.p}>circle=true</p>
+    </Paper>
+  </div>
+);
+
+export default PaperExampleCircle;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import Paper from 'material-ui/lib/paper';
+
+const style = {
+  root: {
+    height: 100,
+    width: 100,
+    marginLeft: 40,
+    textAlign: 'center',
+    display: 'inline-block',
+  },
+  p: {
+    lineHeight: '80px',
+  },
+};
+
+const PaperExampleRounded = () => (
+  <div>
+    <Paper style={style.root} zDepth={1} rounded={false}>
+      <p style={style.p}>rounded=false</p>
+    </Paper>
+    <Paper style={style.root} zDepth={2} rounded={false}>
+      <p style={style.p}>rounded=false</p>
+    </Paper>
+    <Paper style={style.root} zDepth={3} rounded={false}>
+      <p style={style.p}>rounded=false</p>
+    </Paper>
+    <Paper style={style.root} zDepth={4} rounded={false}>
+      <p style={style.p}>rounded=false</p>
+    </Paper>
+    <Paper style={style.root} zDepth={5} rounded={false}>
+      <p style={style.p}>rounded=false</p>
+    </Paper>
+  </div>
+);
+
+export default PaperExampleRounded;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import Paper from 'material-ui/lib/paper';
+
+const style = {
+  root: {
+    height: 100,
+    width: 100,
+    marginLeft: 40,
+    textAlign: 'center',
+    display: 'inline-block',
+  },
+  p: {
+    lineHeight: '80px',
+  },
+};
+
+const PaperExampleSimple = () => (
+  <div>
+    <Paper style={style.root} zDepth={1}>
+      <p style={style.p}>zDepth=1</p>
+    </Paper>
+    <Paper style={style.root} zDepth={2}>
+      <p style={style.p}>zDepth=2</p>
+    </Paper>
+    <Paper style={style.root} zDepth={3}>
+      <p style={style.p}>zDepth=3</p>
+    </Paper>
+    <Paper style={style.root} zDepth={4}>
+      <p style={style.p}>zDepth=4</p>
+    </Paper>
+    <Paper style={style.root} zDepth={5}>
+      <p style={style.p}>zDepth=5</p>
+    </Paper>
+  </div>
+);
+
+export default PaperExampleSimple;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import paperReadmeText from './README';
+import paperCode from '!raw!material-ui/lib/paper';
+import PaperExampleSimple from './ExampleSimple';
+import paperExampleSimpleCode from '!raw!./ExampleSimple';
+import PaperExampleRounded from './ExampleRounded';
+import paperExampleRoundedCode from '!raw!./ExampleRounded';
+import PaperExampleCircle from './ExampleCircle';
+import paperExampleCircleCode from '!raw!./ExampleCircle';
+
+const PaperPage = () => (
+  <div>
+    <MarkdownElement text={paperReadmeText} />
+    <CodeExample code={paperExampleSimpleCode}>
+      <PaperExampleSimple />
+    </CodeExample>
+    <CodeExample code={paperExampleRoundedCode}>
+      <PaperExampleRounded />
+    </CodeExample>
+    <CodeExample code={paperExampleCircleCode}>
+      <PaperExampleCircle />
+    </CodeExample>
+    <PropTypeDescription code={paperCode}/>
+  </div>
+);
+
+export default PaperPage;

docs/src/app/components/pages/components/Paper/README.md

@@ -0,0 +1,5 @@
+## Paper
+A [Paper](https://www.google.com/design/spec/layout/principles.html#principles-how-paper-works)
+element is a basic container that can give depth to the page.
+
+### Examples