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,22 @@
+import React from 'react';
+import Paper from 'material-ui/lib/paper';
+
+const style = {
+  height: 100,
+  width: 100,
+  margin: 20,
+  textAlign: 'center',
+  display: 'inline-block',
+};
+
+const PaperExampleCircle = () => (
+  <div>
+    <Paper style={style} zDepth={1} circle={true}/>
+    <Paper style={style} zDepth={2} circle={true}/>
+    <Paper style={style} zDepth={3} circle={true}/>
+    <Paper style={style} zDepth={4} circle={true}/>
+    <Paper style={style} zDepth={5} circle={true}/>
+  </div>
+);
+
+export default PaperExampleCircle;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import Paper from 'material-ui/lib/paper';
+
+const style = {
+  height: 100,
+  width: 100,
+  margin: 20,
+  textAlign: 'center',
+  display: 'inline-block',
+};
+
+const PaperExampleRounded = () => (
+  <div>
+    <Paper style={style} zDepth={1} rounded={false}/>
+    <Paper style={style} zDepth={2} rounded={false}/>
+    <Paper style={style} zDepth={3} rounded={false}/>
+    <Paper style={style} zDepth={4} rounded={false}/>
+    <Paper style={style} zDepth={5} rounded={false}/>
+  </div>
+);
+
+export default PaperExampleRounded;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import Paper from 'material-ui/lib/paper';
+
+const style = {
+  height: 100,
+  width: 100,
+  margin: 20,
+  textAlign: 'center',
+  display: 'inline-block',
+};
+
+const PaperExampleSimple = () => (
+  <div>
+    <Paper style={style} zDepth={1}/>
+    <Paper style={style} zDepth={2}/>
+    <Paper style={style} zDepth={3}/>
+    <Paper style={style} zDepth={4}/>
+    <Paper style={style} zDepth={5}/>
+  </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

src/paper.jsx

@@ -9,15 +9,35 @@ import ThemeManager from './styles/theme-manager';
 const Paper = React.createClass({
 
   propTypes: {
+    /**
+     * Children passed into the paper element.
+     */
     children: React.PropTypes.node,
+
+    /**
+     * Set to true to generate a circlular paper container.
+     */
     circle: React.PropTypes.bool,
+
+    /**
+     * By default, the paper container will have a border radius.
+     * Set this to false to generate a container with sharp corners.
+     */
     rounded: React.PropTypes.bool,
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * Set to false to disable CSS transitions for the paper element.
+     */
     transitionEnabled: React.PropTypes.bool,
+
+    /**
+     * This number represents the zDepth of the paper shadow.
+     */
     zDepth: PropTypes.zDepth,
   },