From 12bc19a930728e33e5065cf44b7aa45057917d62 Mon Sep 17 00:00:00 2001
From: Zadielerick <zadielerick@gmail.com>
Date: Wed, 6 Jan 2016 10:24:50 -0600
Subject: [PATCH] Update Documentation for Paper

---
 docs/src/app/app-routes.jsx                   |   4 +-
 .../pages/components/Paper/ExampleCircle.jsx  |  22 +++
 .../pages/components/Paper/ExampleRounded.jsx |  22 +++
 .../pages/components/Paper/ExampleSimple.jsx  |  22 +++
 .../pages/components/Paper/Page.jsx           |  31 ++++
 .../pages/components/Paper/README.md          |   5 +
 .../app/components/pages/components/paper.jsx | 157 ------------------
 .../app/components/raw-code/paper-code.txt    |  48 ------
 src/paper.jsx                                 |  20 +++
 9 files changed, 124 insertions(+), 207 deletions(-)
 create mode 100644 docs/src/app/components/pages/components/Paper/ExampleCircle.jsx
 create mode 100644 docs/src/app/components/pages/components/Paper/ExampleRounded.jsx
 create mode 100644 docs/src/app/components/pages/components/Paper/ExampleSimple.jsx
 create mode 100644 docs/src/app/components/pages/components/Paper/Page.jsx
 create mode 100644 docs/src/app/components/pages/components/Paper/README.md
 delete mode 100644 docs/src/app/components/pages/components/paper.jsx
 delete mode 100644 docs/src/app/components/raw-code/paper-code.txt

diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx
index 8fbe82249fe4dc..5155cbce57ebb1 100644
--- a/docs/src/app/app-routes.jsx
+++ b/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} />
diff --git a/docs/src/app/components/pages/components/Paper/ExampleCircle.jsx b/docs/src/app/components/pages/components/Paper/ExampleCircle.jsx
new file mode 100644
index 00000000000000..d6fc25c19b692f
--- /dev/null
+++ b/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;
diff --git a/docs/src/app/components/pages/components/Paper/ExampleRounded.jsx b/docs/src/app/components/pages/components/Paper/ExampleRounded.jsx
new file mode 100644
index 00000000000000..5599765be11325
--- /dev/null
+++ b/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;
diff --git a/docs/src/app/components/pages/components/Paper/ExampleSimple.jsx b/docs/src/app/components/pages/components/Paper/ExampleSimple.jsx
new file mode 100644
index 00000000000000..77c7615c484f86
--- /dev/null
+++ b/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;
diff --git a/docs/src/app/components/pages/components/Paper/Page.jsx b/docs/src/app/components/pages/components/Paper/Page.jsx
new file mode 100644
index 00000000000000..e340dba5b12520
--- /dev/null
+++ b/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;
diff --git a/docs/src/app/components/pages/components/Paper/README.md b/docs/src/app/components/pages/components/Paper/README.md
new file mode 100644
index 00000000000000..41615003a9df2b
--- /dev/null
+++ b/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
diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx
deleted file mode 100644
index d664e283f642b6..00000000000000
--- a/docs/src/app/components/pages/components/paper.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React from 'react';
-import {ClearFix, Mixins, Paper} from 'material-ui';
-import ComponentDoc from '../../component-doc';
-
-const {StyleResizable} = Mixins;
-import Code from 'paper-code';
-import CodeExample from '../../CodeExample';
-import CodeBlock from '../../CodeExample/CodeBlock';
-
-const PaperPage = React.createClass({
-
-  mixins: [StyleResizable],
-
-  getStyles() {
-    let styles = {
-      root: {
-        height: '100px',
-        width: '100px',
-        margin: '0 auto',
-        marginBottom: '64px',
-        textAlign: 'center',
-      },
-      group: {
-        float: 'left',
-        width: '100%',
-      },
-      p: {
-        lineHeight: '80px',
-        height: '100%',
-      },
-    };
-
-    if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM)) {
-      styles.group.width = '33%';
-    }
-
-    return styles;
-  },
-
-  _createParagraphElement(text) {
-    return <p style={this.getStyles().p}>{text}</p>;
-  },
-
-  _createPaperElement(zDepth, text) {
-    return (
-      <Paper
-        style={this.getStyles().root}
-        zDepth={zDepth}>
-        {this._createParagraphElement(text)}
-      </Paper>
-    );
-  },
-
-  _getGroupDefault() {
-    let elements = [];
-    for (let i = 1; i <= 5; i++) {
-      elements.push(this._createPaperElement(i, 'zDepth=' + i));
-    }
-    return elements;
-  },
-
-  _getGroupRounded() {
-    let elements = [];
-    for (let i = 1; i <= 5; i++) {
-      elements.push(React.cloneElement(this._createPaperElement(i, 'rounded=false'), {rounded: false}));
-    }
-    return elements;
-  },
-
-  _getGroupCircle() {
-    let elements = [];
-    for (let i = 1; i <= 5; i++) {
-      elements.push(React.cloneElement(this._createPaperElement(i, 'circle=true'), {circle: true}));
-    }
-    return elements;
-  },
-
-  render() {
-
-    let componentInfo = [
-      {
-        name: 'Props',
-        infoArray: [
-          {
-            name: 'circle',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'Set to true to generate a circlular paper container.',
-          },
-          {
-            name: 'rounded',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'By default, the paper container will have a border radius. ' +
-              'Set this to false to generate a container with sharp corners.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of Paper\'s root element.',
-          },
-          {
-            name: 'zDepth',
-            type: 'oneOf [0,1,2,3,4,5]',
-            header: 'default: 1',
-            desc: 'This number represents the zDepth of the paper shadow.',
-          },
-          {
-            name: 'transitionEnabled',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'Set to false to disable CSS transitions for the paper element.',
-          },
-        ],
-      },
-    ];
-
-    let groupStyle = this.getStyles().group;
-
-    return (
-      <ComponentDoc
-        name="Paper"
-        componentInfo={componentInfo}>
-
-        <Paper style = {{marginBottom: '22px'}}>
-          <CodeBlock>
-          {
-            `//Import statement:
-import Paper from 'material-ui/lib/paper';
-
-//See material-ui/lib/index.js for more
-            `
-          }
-          </CodeBlock>
-        </Paper>
-
-        <CodeExample code={Code}>
-          <div>
-            <ClearFix style={groupStyle}>
-              {this._getGroupDefault()}
-            </ClearFix>
-            <ClearFix style={groupStyle}>
-              {this._getGroupRounded()}
-            </ClearFix>
-            <ClearFix style={groupStyle}>
-              {this._getGroupCircle()}
-            </ClearFix>
-          </div>
-        </CodeExample>
-      </ComponentDoc>
-    );
-  },
-
-});
-
-export default PaperPage;
diff --git a/docs/src/app/components/raw-code/paper-code.txt b/docs/src/app/components/raw-code/paper-code.txt
deleted file mode 100644
index 649cbc52d44064..00000000000000
--- a/docs/src/app/components/raw-code/paper-code.txt
+++ /dev/null
@@ -1,48 +0,0 @@
-//Rounded Corners
-<Paper zDepth={1}>
-  <p>zDepth=1</p>
-</Paper>
-<Paper zDepth={2}>
-  <p>zDepth=2</p>
-</Paper>
-<Paper zDepth={3}>
-  <p>zDepth=3</p>
-</Paper>
-<Paper zDepth={4}>
-  <p>zDepth=4</p>
-</Paper>
-<Paper zDepth={5}>
-  <p>zDepth=5</p>
-</Paper>
-//Sharp Corners
-<Paper zDepth={1} rounded={false}>
-  <p>rounded=false</p>
-</Paper>
-<Paper zDepth={2} rounded={false}>
-  <p>rounded=false</p>
-</Paper>
-<Paper zDepth={3} rounded={false}>
-  <p>rounded=false</p>
-</Paper>
-<Paper zDepth={4} rounded={false}>
-  <p>rounded=false</p>
-</Paper>
-<Paper zDepth={5} rounded={false}>
-  <p>rounded=false</p>
-</Paper>
-//Circular
-<Paper zDepth={1} circle={true}>
-  <p>circle=true</p>
-</Paper>
-<Paper zDepth={2} circle={true}>
-  <p>circle=true</p>
-</Paper>
-<Paper zDepth={3} circle={true}>
-  <p>circle=true</p>
-</Paper>
-<Paper zDepth={4} circle={true}>
-  <p>circle=true</p>
-</Paper>
-<Paper zDepth={5} circle={true}>
-  <p>circle=true</p>
-</Paper>
diff --git a/src/paper.jsx b/src/paper.jsx
index 94d57849d92ed7..86031024393790 100644
--- a/src/paper.jsx
+++ b/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,
   },