Merge pull request #2798 from Zadielerick/progressDocsUpdate

[Docs] Update Documentation for Progress

docs/src/app/app-routes.jsx

@@ -25,6 +25,7 @@ import AvatarPage from './components/pages/components/Avatar/Page';
 import BadgePage from './components/pages/components/Badge/Page';
 import Buttons from './components/pages/components/buttons';
 import CardPage from './components/pages/components/Card/Page';
+import CircularProgressPage from './components/pages/components/CircularProgress/Page';
 import DatePicker from './components/pages/components/DatePicker/Page';
 import DialogPage from './components/pages/components/Dialog/Page';
 import DividerPage from './components/pages/components/Divider/Page';
@@ -35,10 +36,10 @@ import IconButtonPage from './components/pages/components/IconButton/Page';
 import IconMenus from './components/pages/components/icon-menus';
 import LeftNavPage from './components/pages/components/LeftNav/Page';
 import ListPage from './components/pages/components/List/Page';
+import LinearProgressPage from './components/pages/components/LinearProgress/Page';
 import Menus from './components/pages/components/menus';
 import Paper from './components/pages/components/paper';
 import Popover from './components/pages/components/popover';
-import Progress from './components/pages/components/progress';
 import RefreshIndicatorPage from './components/pages/components/RefreshIndicator/Page';
 import SelectField from './components/pages/components/SelectField/Page';
 import Sliders from './components/pages/components/sliders';
@@ -87,6 +88,7 @@ const AppRoutes = (
       <Route path="badge" component={BadgePage} />
       <Route path="buttons" component={Buttons} />
       <Route path="card" component={CardPage} />
+      <Route path="circular-progress" component={CircularProgressPage} />
       <Route path="date-picker" component={DatePicker} />
       <Route path="dialog" component={DialogPage} />
       <Route path="divider" component={DividerPage} />
@@ -97,10 +99,10 @@ const AppRoutes = (
       <Route path="icon-menus" component={IconMenus} />
       <Route path="left-nav" component={LeftNavPage} />
       <Route path="list" component={ListPage} />
+      <Route path="linear-progress" component={LinearProgressPage} />
       <Route path="menus" component={Menus} />
       <Route path="paper" component={Paper} />
       <Route path="popover" component={Popover} />
-      <Route path="progress" component={Progress} />
       <Route path="refresh-indicator" component={RefreshIndicatorPage} />
       <Route path="select-field" component={SelectField} />
       <Route path="sliders" component={Sliders} />

docs/src/app/components/app-left-nav.jsx

@@ -226,12 +226,22 @@ const AppLeftNav = React.createClass({
                 primaryText="Popover"
               />,
               <ListItem
-                value="/components/progress"
                 primaryText="Progress"
-              />,
-              <ListItem
-                value="/components/refresh-indicator"
-                primaryText="Refresh Indicator"
+                primaryTogglesNestedList={true}
+                nestedItems={[
+                  <ListItem
+                    value="/components/circular-progress"
+                    primaryText="Circular Progress"
+                  />,
+                  <ListItem
+                    value="/components/linear-progress"
+                    primaryText="Linear Progress"
+                  />,
+                  <ListItem
+                    value="/components/refresh-indicator"
+                    primaryText="Refresh Indicator"
+                  />,
+                ]}
               />,
               <ListItem
                 value="/components/select-field"

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import CircularProgress from 'material-ui/lib/circular-progress';
+
+export default class CircularProgressExampleDeterminate extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      completed: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.timer = setTimeout(() => this.progress(5), 1000);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  progress(completed) {
+    if (completed > 100) {
+      this.setState({completed: 100});
+    } else {
+      this.setState({completed});
+      const diff = Math.random() * 10;
+      this.timer = setTimeout(() => this.progress(completed + diff), 1000);
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <CircularProgress mode="determinate" value={this.state.completed}/>
+        <CircularProgress mode="determinate" value={this.state.completed} size={1.5}/>
+        <CircularProgress mode="determinate" value={this.state.completed} size={2}/>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import CircularProgress from 'material-ui/lib/circular-progress';
+
+const CircularProgressExampleSimple = () => (
+  <div>
+    <CircularProgress mode="indeterminate" />
+    <CircularProgress mode="indeterminate" size={1.5}/>
+    <CircularProgress mode="indeterminate" size={2}/>
+  </div>
+);
+
+export default CircularProgressExampleSimple;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import circleProgressReadmeText from './README';
+import circleProgressCode from '!raw!material-ui/lib/circular-progress';
+import CircleProgressExampleSimple from './ExampleSimple';
+import circleProgressExampleSimpleCode from '!raw!./ExampleSimple';
+import CircleProgressExampleDeterminate from './ExampleDeterminate';
+import circleProgressExampleDeterminateCode from '!raw!./ExampleDeterminate';
+
+const CircleProgressPage = () => (
+  <div>
+    <MarkdownElement text={circleProgressReadmeText} />
+    <CodeExample code={circleProgressExampleSimpleCode}>
+      <CircleProgressExampleSimple />
+    </CodeExample>
+    <CodeExample code={circleProgressExampleDeterminateCode}>
+      <CircleProgressExampleDeterminate />
+    </CodeExample>
+    <PropTypeDescription code={circleProgressCode}/>
+  </div>
+);
+
+export default CircleProgressPage;

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

@@ -0,0 +1,5 @@
+## Circular Progress
+[Circular Progress](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
+will rotate to show the progress of a task or that there is a wait for a task to complete. 
+
+### Examples

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import LinearProgress from 'material-ui/lib/linear-progress';
+
+export default class LinearProgressExampleDeterminate extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      completed: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.timer = setTimeout(() => this.progress(5), 1000);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  progress(completed) {
+    if (completed > 100) {
+      this.setState({completed: 100});
+    } else {
+      this.setState({completed});
+      const diff = Math.random() * 10;
+      this.timer = setTimeout(() => this.progress(completed + diff), 1000);
+    }
+  }
+
+  render() {
+    return (
+      <LinearProgress mode="determinate" value={this.state.completed} />
+    );
+  }
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import LinearProgress from 'material-ui/lib/linear-progress';
+
+const LinearProgressExampleSimple = () => (
+  <LinearProgress mode="indeterminate"/>
+);
+
+export default LinearProgressExampleSimple;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import linearProgressReadmeText from './README';
+import linearProgressCode from '!raw!material-ui/lib/linear-progress';
+import LinearProgressExampleSimple from './ExampleSimple';
+import linearProgressExampleSimpleCode from '!raw!./ExampleSimple';
+import LinearProgressExampleDeterminate from './ExampleDeterminate';
+import linearProgressExampleDeterminateCode from '!raw!./ExampleDeterminate';
+
+const LinearProgressPage = () => (
+  <div>
+    <MarkdownElement text={linearProgressReadmeText} />
+    <CodeExample code={linearProgressExampleSimpleCode}>
+      <LinearProgressExampleSimple />
+    </CodeExample>
+    <CodeExample code={linearProgressExampleDeterminateCode}>
+      <LinearProgressExampleDeterminate />
+    </CodeExample>
+    <PropTypeDescription code={linearProgressCode}/>
+  </div>
+);
+
+export default LinearProgressPage;

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

@@ -0,0 +1,6 @@
+## Linear Progress
+[Linear Progress](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
+bars fill from 0% to 100% to show the progress of a task. It also will animate to
+show there is a task waiting to be done.
+
+### Examples