Adding demo of Mobile Stepper - Text with Carousel effect

docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import MobileStepper from 'material-ui/MobileStepper';
+import Paper from 'material-ui/Paper';
+import Typography from 'material-ui/Typography';
+import Button from 'material-ui/Button';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import SwipeableViews from 'react-swipeable-views';
+import tutorialData from './steppersData';
+
+const styles = theme => ({
+  root: {
+    maxWidth: 400,
+    flexGrow: 1,
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    height: 50,
+    paddingLeft: theme.spacing.unit * 4,
+    marginBottom: 20,
+    backgroundColor: theme.palette.background.default,
+  },
+  img: {
+    height: 255,
+    maxWidth: 400,
+    overflow: 'hidden',
+    width: '100%',
+  },
+});
+
+class SwipeableTextMobileStepper extends React.Component {
+  state = {
+    activeStep: 0,
+  };
+
+  handleNext = () => {
+    this.setState(prevState => ({
+      activeStep: prevState.activeStep + 1,
+    }));
+  };
+
+  handleBack = () => {
+    this.setState(prevState => ({
+      activeStep: prevState.activeStep - 1,
+    }));
+  };
+
+  handleStepChange = activeStep => {
+    this.setState({ activeStep });
+  };
+
+  render() {
+    const { classes, theme } = this.props;
+    const { activeStep } = this.state;
+
+    const maxSteps = tutorialData.length;
+
+    return (
+      <div className={classes.root}>
+        <Paper square elevation={0} className={classes.header}>
+          <Typography>{tutorialData[activeStep].label}</Typography>
+        </Paper>
+        <SwipeableViews
+          onChangeIndex={this.handleStepChange}
+          enableMouseEvents
+          index={this.state.activeStep}
+        >
+          {tutorialData.map(step => (
+            <img className={classes.img} src={step.imgPath} alt={step.label} />
+          ))}
+        </SwipeableViews>
+        <MobileStepper
+          variant="text"
+          steps={maxSteps}
+          position="static"
+          activeStep={activeStep}
+          className={classes.mobileStepper}
+          nextButton={
+            <Button size="small" onClick={this.handleNext} disabled={activeStep === maxSteps - 1}>
+              Next
+              {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+            </Button>
+          }
+          backButton={
+            <Button size="small" onClick={this.handleBack} disabled={activeStep === 0}>
+              {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+              Back
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
+}
+
+SwipeableTextMobileStepper.propTypes = {
+  classes: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(SwipeableTextMobileStepper);

docs/src/pages/demos/steppers/steppers.md

@@ -73,6 +73,13 @@ You must implement the textual description yourself, however, an example is prov
 
 {{"demo": "pages/demos/steppers/TextMobileStepper.js"}}
 
+### Mobile Stepper - Text with Carousel effect
+
+This demo is very similar to the previous, the difference is the usage of 
+[react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to make the transition of steps.
+
+{{"demo": "pages/demos/steppers/SwipeableTextMobileStepper.js"}}
+
 ### Mobile Stepper - Dots
 
 Use dots when the number of steps isn’t large.

pages/demos/steppers.js

@@ -62,6 +62,13 @@ module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/steppers/TextMobileStepper'), 'utf8')
 `,
         },
+        'pages/demos/steppers/SwipeableTextMobileStepper.js': {
+          js: require('docs/src/pages/demos/steppers/SwipeableTextMobileStepper').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/steppers/SwipeableTextMobileStepper'), 'utf8')
+          `,
+        },
         'pages/demos/steppers/DotsMobileStepper.js': {
           js: require('docs/src/pages/demos/steppers/DotsMobileStepper').default,
           raw: preval`