[Stepper] Swipeable demo integration

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

@@ -0,0 +1,127 @@
+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';
+
+const tutorialSteps = [
+  {
+    label: 'How to be happy :)',
+    imgPath: '/static/images/steppers/1-happy.jpg',
+  },
+  {
+    label: '1. Work with something that you like, like…',
+    imgPath: '/static/images/steppers/2-work.jpg',
+  },
+  {
+    label: '2. Keep your friends close to you and hangout with them',
+    imgPath: '/static/images/steppers/3-friends.jpg',
+  },
+  {
+    label: '3. Travel everytime that you have a chance',
+    imgPath: '/static/images/steppers/4-travel.jpg',
+  },
+  {
+    label: '4. And contribute to Material-UI :D',
+    imgPath: '/static/images/steppers/5-mui.png',
+  },
+];
+
+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 = tutorialSteps.length;
+
+    return (
+      <div className={classes.root}>
+        <Paper square elevation={0} className={classes.header}>
+          <Typography>{tutorialSteps[activeStep].label}</Typography>
+        </Paper>
+        <SwipeableViews
+          axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
+          index={this.state.activeStep}
+          onChangeIndex={this.handleStepChange}
+          enableMouseEvents
+        >
+          {tutorialSteps.map(step => (
+            <img key={step.label} 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/TextMobileStepper.js

@@ -8,6 +8,29 @@ import Button from 'material-ui/Button';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
+const tutorialSteps = [
+  {
+    label: 'How to be happy :)',
+    imgPath: '/static/images/steppers/1-happy.jpg',
+  },
+  {
+    label: '1. Work with something that you like, like…',
+    imgPath: '/static/images/steppers/2-work.jpg',
+  },
+  {
+    label: '2. Keep your friends close to you and hangout with them',
+    imgPath: '/static/images/steppers/3-friends.jpg',
+  },
+  {
+    label: '3. Travel everytime that you have a chance',
+    imgPath: '/static/images/steppers/4-travel.jpg',
+  },
+  {
+    label: '4. And contribute to Material-UI :D',
+    imgPath: '/static/images/steppers/5-mui.png',
+  },
+];
+
 const styles = theme => ({
   root: {
     maxWidth: 400,
@@ -21,6 +44,12 @@ const styles = theme => ({
     marginBottom: 20,
     backgroundColor: theme.palette.background.default,
   },
+  img: {
+    height: 255,
+    maxWidth: 400,
+    overflow: 'hidden',
+    width: '100%',
+  },
 });
 
 class TextMobileStepper extends React.Component {
@@ -42,26 +71,34 @@ class TextMobileStepper extends React.Component {
 
   render() {
     const { classes, theme } = this.props;
+    const { activeStep } = this.state;
+
+    const maxSteps = tutorialSteps.length;
 
     return (
       <div className={classes.root}>
         <Paper square elevation={0} className={classes.header}>
-          <Typography>Step {this.state.activeStep + 1} of 6</Typography>
+          <Typography>{tutorialSteps[activeStep].label}</Typography>
         </Paper>
+        <img
+          className={classes.img}
+          src={tutorialSteps[activeStep].imgPath}
+          alt={tutorialSteps[activeStep].label}
+        />
         <MobileStepper
           variant="text"
-          steps={6}
+          steps={maxSteps}
           position="static"
-          activeStep={this.state.activeStep}
+          activeStep={activeStep}
           className={classes.mobileStepper}
           nextButton={
-            <Button size="small" onClick={this.handleNext} disabled={this.state.activeStep === 5}>
+            <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={this.state.activeStep === 0}>
+            <Button size="small" onClick={this.handleBack} disabled={activeStep === 0}>
               {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
               Back
             </Button>

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.

docs/src/pages/demos/tabs/tabs.md

@@ -18,7 +18,6 @@ Long labels will automatically wrap on tabs. If the label is too long for the ta
 
 {{"demo": "pages/demos/tabs/TabsWrappedLabel.js"}}
 
-
 ### Disabled Tab
 
 A Tab can be disabled by setting `disabled` property.

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`