[Stepper] Mobile version

docs/src/pages/component-api/MobileStepper/MobileStepper.md

@@ -0,0 +1,40 @@
+# MobileStepper
+
+
+
+## Props
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| activeStep | number | 0 | Set the active step (zero based index). This will enable `Step` control helpers. |
+| backButtonText | node | 'Back' | Set the text that appears for the back button. |
+| classes | object |  | Useful to extend the style applied to components. |
+| disableBack | bool | false | Set to true to disable the back button. |
+| disableNext | bool | false | Set to true to disable the next button. |
+| nextButtonText | node | 'Next' | Set the text that appears for the next button. |
+| <span style="color: #31a148">onBack *</span> | function |  | Passed into the onTouchTap prop of the Back button. |
+| <span style="color: #31a148">onNext *</span> | function |  | Passed into the onTouchTap prop of the Next button. |
+| position | enum:&nbsp;'bottom'<br>&nbsp;'top'<br>&nbsp;'static'<br> | 'bottom' | Set the text that appears for the next button. |
+| <span style="color: #31a148">steps *</span> | number |  | The total steps. |
+| type | enum:&nbsp;'text'<br>&nbsp;'dots'<br>&nbsp;'progress'<br> | 'dots' | The type of mobile stepper to use. |
+
+Any other properties supplied will be spread to the root element.
+## Classes
+
+You can overrides all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+- `position-bottom`
+- `positon-top`
+- `position-static`
+- `button`
+- `dots`
+- `dot`
+- `dotActive`
+- `progress`
+
+Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiMobileStepper`.

docs/src/pages/component-demos/stepper/DotsMobileStepper.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import MobileStepper from 'material-ui/MobileStepper';
+
+const styleSheet = createStyleSheet('DotsMobileStepper', {
+  root: {
+    maxWidth: 400,
+    flexGrow: 1,
+  },
+});
+
+class DotsMobileStepper extends Component {
+  state = {
+    activeStep: 0,
+  };
+
+  handleNext = () => {
+    this.setState({
+      activeStep: this.state.activeStep + 1,
+    });
+  };
+
+  handleBack = () => {
+    this.setState({
+      activeStep: this.state.activeStep - 1,
+    });
+  };
+
+  render() {
+    const classes = this.props.classes;
+    return (
+      <MobileStepper
+        type="dots"
+        steps={6}
+        position="static"
+        activeStep={this.state.activeStep}
+        className={classes.root}
+        onBack={this.handleBack}
+        onNext={this.handleNext}
+        disableBack={this.state.activeStep === 0}
+        disableNext={this.state.activeStep === 5}
+      />
+    );
+  }
+}
+
+DotsMobileStepper.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(DotsMobileStepper);

docs/src/pages/component-demos/stepper/ProgressMobileStepper.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import MobileStepper from 'material-ui/MobileStepper';
+
+const styleSheet = createStyleSheet('ProgressMobileStepper', {
+  root: {
+    maxWidth: 400,
+    flexGrow: 1,
+  },
+});
+
+class ProgressMobileStepper extends Component {
+  state = {
+    activeStep: 0,
+  };
+
+  handleNext = () => {
+    this.setState({
+      activeStep: this.state.activeStep + 1,
+    });
+  };
+
+  handleBack = () => {
+    this.setState({
+      activeStep: this.state.activeStep - 1,
+    });
+  };
+
+  render() {
+    const classes = this.props.classes;
+    return (
+      <MobileStepper
+        type="progress"
+        steps={6}
+        position="static"
+        activeStep={this.state.activeStep}
+        className={classes.root}
+        onBack={this.handleBack}
+        onNext={this.handleNext}
+        disableBack={this.state.activeStep === 0}
+        disableNext={this.state.activeStep === 5}
+      />
+    );
+  }
+}
+
+ProgressMobileStepper.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(ProgressMobileStepper);

docs/src/pages/component-demos/stepper/TextMobileStepper.js

@@ -0,0 +1,71 @@
+// @flow
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import MobileStepper from 'material-ui/MobileStepper';
+import Paper from 'material-ui/Paper';
+import Typography from 'material-ui/Typography';
+
+const styleSheet = createStyleSheet('TextMobileStepper', theme => ({
+  root: {
+    maxWidth: 400,
+    flexGrow: 1,
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    height: 50,
+    paddingLeft: theme.spacing.unit * 5,
+    marginBottom: 20,
+    background: theme.palette.background.default,
+  },
+}));
+
+class TextMobileStepper extends Component {
+  state = {
+    activeStep: 0,
+  };
+
+  handleNext = () => {
+    this.setState({
+      activeStep: this.state.activeStep + 1,
+    });
+  };
+
+  handleBack = () => {
+    this.setState({
+      activeStep: this.state.activeStep - 1,
+    });
+  };
+
+  render() {
+    const classes = this.props.classes;
+    return (
+      <div className={classes.root}>
+        <Paper square elevation={0} className={classes.header}>
+          <Typography>
+            Step {this.state.activeStep + 1} of 6
+          </Typography>
+        </Paper>
+        <MobileStepper
+          type="text"
+          steps={6}
+          position="static"
+          activeStep={this.state.activeStep}
+          className={classes.mobileStepper}
+          onBack={this.handleBack}
+          onNext={this.handleNext}
+          disableBack={this.state.activeStep === 0}
+          disableNext={this.state.activeStep === 5}
+        />
+      </div>
+    );
+  }
+}
+
+TextMobileStepper.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(TextMobileStepper);

docs/src/pages/component-demos/stepper/stepper.md

@@ -0,0 +1,31 @@
+---
+components: MobileStepper
+---
+
+# Stepper
+
+[Steppers](https://material.io/guidelines/components/steppers.html) convey progress through numbered steps.
+
+## Mobile Stepper
+
+The [mobile steps](https://material.io/guidelines/components/steppers.html#steppers-types-of-steps) implements a compact stepper suitable for a mobile device.
+
+### Mobile Stepper - Text
+
+This is essentially a back/next button positioned correctly.
+You must implement the textual description yourself however an example is provided below for reference.
+
+{{demo='pages/component-demos/stepper/TextMobileStepper.js'}}
+
+### Mobile Stepper - Dots
+
+Use dots when the number of steps isn’t large.
+
+{{demo='pages/component-demos/stepper/DotsMobileStepper.js'}}
+
+### Mobile Stepper - Progress
+
+Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).
+
+{{demo='pages/component-demos/stepper/ProgressMobileStepper.js'}}
+

docs/src/pages/getting-started/supported-components.md

@@ -96,6 +96,7 @@ to discuss the approach before submitting a PR.
 - [Steppers](https://www.google.com/design/spec/components/steppers.html)
   - [Horizontal](https://www.google.com/design/spec/components/steppers.html#steppers-types-of-steppers)
   - [Vertical](https://www.google.com/design/spec/components/steppers.html#steppers-types-of-steppers)
+  - **[Mobile steps](https://material.io/guidelines/components/steppers.html#steppers-types-of-steps) ✓**
 - **[Tabs](https://www.google.com/design/spec/components/tabs.html) ✓**
   - Usage
     - **[Mobile (Full width)](https://www.google.com/design/spec/components/tabs.html#tabs-usage) ✓**