From 661e59d34033a514a5b4e37261728e924377e8f5 Mon Sep 17 00:00:00 2001 From: Alex Hayes Date: Fri, 8 Sep 2017 06:20:49 +1000 Subject: [PATCH] [stepper] Use next.js as per #7759 (#4799) --- ...HorizontalLinearAlternativeLabelStepper.js | 8 ++--- .../stepper/HorizontalLinearStepper.js | 18 +++++----- ...izontalNonLinearAlternativeLabelStepper.js | 8 ++--- .../stepper/HorizontalNonLinearStepper.js | 8 ++--- .../stepper/VerticalLinearStepper.js | 8 ++--- docs/src/pages/demos/stepper/stepper.md | 10 +++--- .../getting-started/supported-components.md | 4 +-- pages/demos/stepper.js | 35 +++++++++++++++++++ 8 files changed, 68 insertions(+), 31 deletions(-) rename docs/src/pages/{component-demos => demos}/stepper/HorizontalLinearAlternativeLabelStepper.js (90%) rename docs/src/pages/{component-demos => demos}/stepper/HorizontalLinearStepper.js (92%) rename docs/src/pages/{component-demos => demos}/stepper/HorizontalNonLinearAlternativeLabelStepper.js (95%) rename docs/src/pages/{component-demos => demos}/stepper/HorizontalNonLinearStepper.js (94%) rename docs/src/pages/{component-demos => demos}/stepper/VerticalLinearStepper.js (94%) diff --git a/docs/src/pages/component-demos/stepper/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/demos/stepper/HorizontalLinearAlternativeLabelStepper.js similarity index 90% rename from docs/src/pages/component-demos/stepper/HorizontalLinearAlternativeLabelStepper.js rename to docs/src/pages/demos/stepper/HorizontalLinearAlternativeLabelStepper.js index fbba9c56739ca6..c536c481ee98ea 100644 --- a/docs/src/pages/component-demos/stepper/HorizontalLinearAlternativeLabelStepper.js +++ b/docs/src/pages/demos/stepper/HorizontalLinearAlternativeLabelStepper.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/docs/src/pages/component-demos/stepper/HorizontalLinearStepper.js b/docs/src/pages/demos/stepper/HorizontalLinearStepper.js similarity index 92% rename from docs/src/pages/component-demos/stepper/HorizontalLinearStepper.js rename to docs/src/pages/demos/stepper/HorizontalLinearStepper.js index 13e9789cbb994c..415e56af07157c 100644 --- a/docs/src/pages/component-demos/stepper/HorizontalLinearStepper.js +++ b/docs/src/pages/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/docs/src/pages/component-demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js similarity index 95% rename from docs/src/pages/component-demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js rename to docs/src/pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js index 4e8fbcfa314438..b1cfcb58a99e1c 100644 --- a/docs/src/pages/component-demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js +++ b/docs/src/pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper.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/docs/src/pages/component-demos/stepper/HorizontalNonLinearStepper.js b/docs/src/pages/demos/stepper/HorizontalNonLinearStepper.js similarity index 94% rename from docs/src/pages/component-demos/stepper/HorizontalNonLinearStepper.js rename to docs/src/pages/demos/stepper/HorizontalNonLinearStepper.js index 0f53e63db89e33..b4163ac0dcd742 100644 --- a/docs/src/pages/component-demos/stepper/HorizontalNonLinearStepper.js +++ b/docs/src/pages/demos/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/docs/src/pages/component-demos/stepper/VerticalLinearStepper.js b/docs/src/pages/demos/stepper/VerticalLinearStepper.js similarity index 94% rename from docs/src/pages/component-demos/stepper/VerticalLinearStepper.js rename to docs/src/pages/demos/stepper/VerticalLinearStepper.js index cbb88ad63e7562..8e4fa50f53f185 100644 --- a/docs/src/pages/component-demos/stepper/VerticalLinearStepper.js +++ b/docs/src/pages/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 index c1e7d6b1431272..2409334d8526e0 100644 --- a/docs/src/pages/demos/stepper/stepper.md +++ b/docs/src/pages/demos/stepper/stepper.md @@ -32,7 +32,7 @@ The `` 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 `` 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 `` 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 `` 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 index 79c3f495a4b9d4..a020e898536624 100644 --- 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://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders) ✓** - [Menu](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders) - [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) + - **[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 diff --git a/pages/demos/stepper.js b/pages/demos/stepper.js index 57efa064d4192e..f247280065238a 100644 --- a/pages/demos/stepper.js +++ b/pages/demos/stepper.js @@ -10,6 +10,41 @@ function Page() {