[stepper] Use next.js as per mui#7759 (mui#4799)

alexhayes · Oct 2, 2017 · 33a8f5f · 33a8f5f
1 parent 58b60fe
commit 33a8f5f
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 31 deletions.
diff --git a/...orizontalLinearAlternativeLabelStepper.js → ...orizontalLinearAlternativeLabelStepper.js b/...orizontalLinearAlternativeLabelStepper.js → ...orizontalLinearAlternativeLabelStepper.js
@@ -2,18 +2,18 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { withStyles, createStyleSheet } from "material-ui/styles";
+import { withStyles } from "material-ui/styles";
 import { Step, Stepper, StepLabel, StepButton } from "material-ui/Stepper";
 import Button from "material-ui/Button";
 
-const styleSheet = createStyleSheet("HorizontalLabelPositionBelowStepper", theme => ({
+const styles = theme => ({
   root: {
     width: '90%'
   },
   backButton: {
     marginRight: theme.spacing.unit
   }
-}));
+});
 
 class HorizontalLabelPositionBelowStepper extends Component {
   state = {
@@ -96,4 +96,4 @@ HorizontalLabelPositionBelowStepper.propTypes = {
   classes: PropTypes.object
 };
 
-export default withStyles(styleSheet)(HorizontalLabelPositionBelowStepper);
+export default withStyles(styles)(HorizontalLabelPositionBelowStepper);
diff --git a/...-demos/stepper/HorizontalLinearStepper.js → .../demos/stepper/HorizontalLinearStepper.js b/...-demos/stepper/HorizontalLinearStepper.js → .../demos/stepper/HorizontalLinearStepper.js
@@ -2,26 +2,32 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { withStyles, createStyleSheet } from "material-ui/styles";
+import { withStyles } from "material-ui/styles";
 import { Step, Stepper, StepLabel } from "material-ui/Stepper";
 import Button from "material-ui/Button";
 
-const styleSheet = createStyleSheet("HorizontalLinearStepper", theme => ({
+const styles = theme => ({
   root: {
     width: '90%'
   },
   button: {
     marginRight: theme.spacing.unit
   }
-}));
+});
 
 
 class HorizontalLinearStepper extends Component {
+
+  static propTypes = {
+    classes: PropTypes.object
+  }
+
   state = {
     activeStep: 0,
     skipped: new Set(),
   };
 
+
   isStepOptional(step) {
     return step === 1;
   }
@@ -139,8 +145,4 @@ class HorizontalLinearStepper extends Component {
   }
 }
 
-HorizontalLinearStepper.propTypes = {
-  classes: PropTypes.object
-};
-
-export default withStyles(styleSheet)(HorizontalLinearStepper);
+export default withStyles(styles)(HorizontalLinearStepper);
diff --git a/...zontalNonLinearAlternativeLabelStepper.js → ...zontalNonLinearAlternativeLabelStepper.js b/...zontalNonLinearAlternativeLabelStepper.js → ...zontalNonLinearAlternativeLabelStepper.js
@@ -2,12 +2,12 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { withStyles, createStyleSheet } from "material-ui/styles";
+import { withStyles } from "material-ui/styles";
 import { Step, Stepper, StepLabel, StepButton } from "material-ui/Stepper";
 import Button from "material-ui/Button";
 import Typography from "material-ui/Typography";
 
-const styleSheet = createStyleSheet("HorizontalLabelPositionBelowStepper", theme => ({
+const styles = theme => ({
   root: {
     width: '90%'
   },
@@ -20,7 +20,7 @@ const styleSheet = createStyleSheet("HorizontalLabelPositionBelowStepper", theme
   completed: {
     display: 'inline-block',
   },
-}));
+});
 
 class HorizontalNonLinearAlternativeLabelStepper extends Component {
   state = {
@@ -207,4 +207,4 @@ HorizontalNonLinearAlternativeLabelStepper.propTypes = {
   classes: PropTypes.object
 };
 
-export default withStyles(styleSheet)(HorizontalNonLinearAlternativeLabelStepper);
+export default withStyles(styles)(HorizontalNonLinearAlternativeLabelStepper);
diff --git a/...mos/stepper/HorizontalNonLinearStepper.js → ...mos/stepper/HorizontalNonLinearStepper.js b/...mos/stepper/HorizontalNonLinearStepper.js → ...mos/stepper/HorizontalNonLinearStepper.js
@@ -2,12 +2,12 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { withStyles, createStyleSheet } from "material-ui/styles";
+import { withStyles } from "material-ui/styles";
 import { Step, Stepper, StepLabel, StepButton } from "material-ui/Stepper";
 import Button from "material-ui/Button";
 import Typography from "material-ui/Typography";
 
-const styleSheet = createStyleSheet("HorizontalNonLinearStepper", theme => ({
+const styles = theme => ({
   root: {
     width: '90%'
   },
@@ -17,7 +17,7 @@ const styleSheet = createStyleSheet("HorizontalNonLinearStepper", theme => ({
   completed: {
     display: 'inline-block',
   },
-}));
+});
 
 class HorizontalNonLinearStepper extends Component {
   state = {
@@ -155,4 +155,4 @@ HorizontalNonLinearStepper.propTypes = {
   classes: PropTypes.object
 };
 
-export default withStyles(styleSheet)(HorizontalNonLinearStepper);
+export default withStyles(styles)(HorizontalNonLinearStepper);
diff --git a/...nt-demos/stepper/VerticalLinearStepper.js → ...es/demos/stepper/VerticalLinearStepper.js b/...nt-demos/stepper/VerticalLinearStepper.js → ...es/demos/stepper/VerticalLinearStepper.js
@@ -2,13 +2,13 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { withStyles, createStyleSheet } from "material-ui/styles";
+import { withStyles } from "material-ui/styles";
 import { Step, Stepper, StepLabel, StepContent } from "material-ui/Stepper";
 import Button from "material-ui/Button";
 import Paper from "material-ui/Paper";
 import Typography from "material-ui/Typography";
 
-const styleSheet = createStyleSheet("VerticalLinearStepper", theme => ({
+const styles = theme => ({
   root: {
     width: '90%'
   },
@@ -22,7 +22,7 @@ const styleSheet = createStyleSheet("VerticalLinearStepper", theme => ({
     marginTop: 0,
     padding: theme.spacing.unit * 3, // TODO: See TODO note on Stepper
   },
-}));
+});
 
 class VerticalLinearStepper extends Component {
   state = {
@@ -111,4 +111,4 @@ VerticalLinearStepper.propTypes = {
   classes: PropTypes.object
 };
 
-export default withStyles(styleSheet)(VerticalLinearStepper);
+export default withStyles(styles)(VerticalLinearStepper);
diff --git a/docs/src/pages/demos/stepper/stepper.md b/docs/src/pages/demos/stepper/stepper.md
@@ -32,7 +32,7 @@ The `<Stepper>` can be controlled by passing the current step index (zero based)
 
 This example also shows the use of an optional step by placing the `optional` prop on the second `<Step>` component. Note that it's up to you to manage when an optional step is skipped. Once you've determined this for a particular step you must set `completed={false}` to signify that even though the active step index has gone beyond the optional step, it's not actually complete.
 
-{{demo='pages/component-demos/stepper/HorizontalLinearStepper.js'}}
+{{demo='pages/demos/stepper/HorizontalLinearStepper.js'}}
 
 
 ## Horizontal Non Linear
@@ -45,24 +45,24 @@ We've used the `<StepButton>` here to demonstrate clickable step labels as well
 flag however because steps can be accessed in a non-linear fashion it's up to your own implementation to 
 determine when all steps are completed (or even if they need to be completed).
 
-{{demo='pages/component-demos/stepper/HorizontalNonLinearStepper.js'}}
+{{demo='pages/demos/stepper/HorizontalNonLinearStepper.js'}}
 
 
 ## Horizontal Linear - Alternative Label
 
 Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `<Stepper>` component.
 
-{{demo='pages/component-demos/stepper/HorizontalLinearAlternativeLabelStepper.js'}}
+{{demo='pages/demos/stepper/HorizontalLinearAlternativeLabelStepper.js'}}
 
 
 ## Horizontal Non Linear - Alternative Label
 
-{{demo='pages/component-demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js'}}
+{{demo='pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js'}}
 
 
 ## Vertical Stepper
 
-{{demo='pages/component-demos/stepper/VerticalLinearStepper.js'}}
+{{demo='pages/demos/stepper/VerticalLinearStepper.js'}}
 
 ## Mobile Stepper
 

diff --git a/docs/src/pages/getting-started/supported-components.md b/docs/src/pages/getting-started/supported-components.md
@@ -94,8 +94,8 @@ to discuss the approach before submitting a PR.
   - **[Grid](https://material.io/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓**
   - [Menu](https://material.io/guidelines/components/subheaders.html#subheaders-list-subheaders)
 - [Steppers](https://material.io/guidelines/components/steppers.html)
-  - [Horizontal](https://material.io/guidelines/components/steppers.html#steppers-types-of-steppers)
-  - [Vertical](https://material.io/guidelines/components/steppers.html#steppers-types-of-steppers)
+  - **[Horizontal](https://material.io/guidelines/components/steppers.html#steppers-types-of-steppers) ✓**
+  - **[Vertical](https://material.io/guidelines/components/steppers.html#steppers-types-of-steppers) ✓**
   - **[Mobile steps](https://material.io/guidelines/components/steppers.html#steppers-types-of-steps) ✓**
 - **[Tabs](https://material.io/guidelines/components/tabs.html) ✓**
   - Usage

diff --git a/pages/demos/stepper.js b/pages/demos/stepper.js
@@ -10,6 +10,41 @@ function Page() {
     <MarkdownDocs
       markdown={markdown}
       demos={{
+        'pages/demos/stepper/HorizontalLinearAlternativeLabelStepper.js': {
+          js: require('docs/src/pages/demos/stepper/HorizontalLinearAlternativeLabelStepper').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/stepper/HorizontalLinearAlternativeLabelStepper'), 'utf8')
+`,
+        },
+        'pages/demos/stepper/HorizontalLinearStepper.js': {
+          js: require('docs/src/pages/demos/stepper/HorizontalLinearStepper').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/stepper/HorizontalLinearStepper'), 'utf8')
+`,
+        },
+        'pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js': {
+          js: require('docs/src/pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper'), 'utf8')
+`,
+        },
+        'pages/demos/stepper/HorizontalNonLinearStepper.js': {
+          js: require('docs/src/pages/demos/stepper/HorizontalNonLinearStepper').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/stepper/HorizontalNonLinearStepper'), 'utf8')
+`,
+        },
+        'pages/demos/stepper/VerticalLinearStepper.js': {
+          js: require('docs/src/pages/demos/stepper/VerticalLinearStepper').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/stepper/VerticalLinearStepper'), 'utf8')
+`,
+        },
         'pages/demos/stepper/TextMobileStepper.js': {
           js: require('docs/src/pages/demos/stepper/TextMobileStepper').default,
           raw: preval`