[Stepper] Mobile version

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

@@ -0,0 +1,39 @@
+# MobileStepper
+
+
+
+## Props
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| activeStep | number | `0` | Specifies the currently active step. |
+| disableBack | bool | `false` | Set to disable the back button. |
+| disableNext | bool | `false` | Set to disable the next button. |
+| kind | `text`, `dots` or `progress` | `dots` | Defines the kind of mobile stepper to use. |
+| onBack | function |  | Supplied to the onClick attribute of the back button. |
+| onNext | function |  | Supplied to the onClick attribute of the next button. |
+| steps | number |  | The total amount of steps. |
+| buttonClassName | string |  | Specify an extra class to be put on back/next buttons |
+| className | string |  | Specify an extra class to be put on the root element |
+| dotClassName | string |  | Specify an extra class to be put on each dot element |
+| dotsClassName | string |  | Specify an extra class to be put the container that holds the dots |
+| progressClassname | string |  | Specify an extra class to be put the container that holds the <LinearProgress /> component. |
+
+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:
+- `mobileStepper`
+- `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: `MuiAppBar`.

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

@@ -0,0 +1,61 @@
+// @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: {
+    position: 'relative',
+    marginTop: 30,
+    width: '100%',
+  },
+  mobileStepper: {
+    position: 'relative',
+  },
+});
+
+class DotsMobileStepper extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  state = {
+    activeStep: 0,
+  };
+
+  handleOnNext = () => {
+    const activeStep = this.state.activeStep === 5 ? 5 : this.state.activeStep + 1;
+    this.setState({
+      activeStep,
+    });
+  };
+
+  handleOnBack = () => {
+    const activeStep = this.state.activeStep === 0 ? 0 : this.state.activeStep - 1;
+    this.setState({
+      activeStep,
+    });
+  };
+
+  render() {
+    const classes = this.props.classes;
+    return (
+      <div className={classes.root}>
+        <MobileStepper
+          kind="dots"
+          steps={6}
+          activeStep={this.state.activeStep}
+          className={classes.mobileStepper}
+          onBack={this.handleOnBack}
+          onNext={this.handleOnNext}
+          disableBack={this.state.activeStep === 0}
+          disableNext={this.state.activeStep === 5}
+        />
+      </div>
+    );
+  }
+}
+
+export default withStyles(styleSheet)(DotsMobileStepper);

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

@@ -0,0 +1,61 @@
+// @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: {
+    position: 'relative',
+    marginTop: 30,
+    width: '100%',
+  },
+  mobileStepper: {
+    position: 'relative',
+  },
+});
+
+class ProgressMobileStepper extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  state = {
+    activeStep: 0,
+  };
+
+  handleOnNext = () => {
+    const activeStep = this.state.activeStep === 5 ? 5 : this.state.activeStep + 1;
+    this.setState({
+      activeStep,
+    });
+  };
+
+  handleOnBack = () => {
+    const activeStep = this.state.activeStep === 0 ? 0 : this.state.activeStep - 1;
+    this.setState({
+      activeStep,
+    });
+  };
+
+  render() {
+    const classes = this.props.classes;
+    return (
+      <div className={classes.root}>
+        <MobileStepper
+          kind="progress"
+          steps={6}
+          activeStep={this.state.activeStep}
+          className={classes.mobileStepper}
+          onBack={this.handleOnBack}
+          onNext={this.handleOnNext}
+          disableBack={this.state.activeStep === 0}
+          disableNext={this.state.activeStep === 5}
+        />
+      </div>
+    );
+  }
+}
+
+export default withStyles(styleSheet)(ProgressMobileStepper);

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

@@ -0,0 +1,78 @@
+// @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';
+
+const styleSheet = createStyleSheet('TextMobileStepper', {
+  root: {
+    position: 'relative',
+    marginTop: 30,
+    width: '100%',
+  },
+  mobileStepper: {
+    position: 'relative',
+  },
+  textualDescription: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    position: 'relative',
+    height: '50px',
+    left: 0,
+    fontSize: '14px',
+    paddingLeft: '28px',
+    marginBottom: '20px',
+  },
+});
+
+class TextMobileStepper extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  state = {
+    activeStep: 0,
+  };
+
+  handleOnNext = () => {
+    const activeStep = this.state.activeStep === 5 ? 5 : this.state.activeStep + 1;
+    this.setState({
+      activeStep,
+    });
+  };
+
+  handleOnBack = () => {
+    const activeStep = this.state.activeStep === 0 ? 0 : this.state.activeStep - 1;
+    this.setState({
+      activeStep,
+    });
+  };
+
+  render() {
+    const classes = this.props.classes;
+    return (
+      <div className={classes.root}>
+        <Paper square elevation={0} className={classes.textualDescription}>
+          Step {this.state.activeStep + 1} of 6
+        </Paper>
+        <MobileStepper
+          kind="text"
+          steps={6}
+          activeStep={this.state.activeStep}
+          className={classes.mobileStepper}
+          onBack={this.handleOnBack}
+          onNext={this.handleOnNext}
+          disableBack={this.state.activeStep === 0}
+          disableNext={this.state.activeStep === 5}
+        />
+      </div>
+    );
+  }
+}
+
+export default withStyles(styleSheet)(TextMobileStepper);

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

@@ -0,0 +1,22 @@
+---
+components: MobileStepper
+---
+
+# MobileStepper
+
+The [MobileStepper](https://material.io/guidelines/layout/structure.html#structure-mobile-stepper) implements a compact stepper suitable for a mobile device. 
+
+## Mobile Stepper - Dots
+
+{{demo='pages/component-demos/mobile-stepper/DotsMobileStepper.js'}}
+
+## 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/mobile-stepper/TextMobileStepper.js'}}
+
+## Mobile Stepper - Progress
+
+{{demo='pages/component-demos/mobile-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)
+  - [MobileStepper](https://www.google.com/design/spec/components/mobile-stepper.html)
 - **[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) ✓**