Modify Stepper to have it working vertically

src/components/Stepper/index.jsx

@@ -2,6 +2,7 @@
 import Stepper from '@material-ui/core/Stepper'
 import FormStep from '@material-ui/core/Step'
 import StepLabel from '@material-ui/core/StepLabel'
+import StepContent from '@material-ui/core/StepContent'
 import { withStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 import GnoForm from '~/components/forms/GnoForm'
@@ -123,24 +124,22 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <Stepper classes={{ root: classes.root }} activeStep={page} alternativeLabel>
-          {steps.map(label => (
-            <FormStep key={label}>
-              <StepLabel>{label}</StepLabel>
-            </FormStep>
-          ))}
-        </Stepper>
         <GnoForm
           onSubmit={this.handleSubmit}
           initialValues={values}
           padding={15}
           validation={this.validate}
-          render={activePage}
         >
-          {(submitting: boolean, validating: boolean) => {
+          {(submitting: boolean, validating: boolean, ...rest: any) => {
             const disabled = disabledWhenValidating ? submitting || validating : submitting
 
             return (
+              <Stepper classes={{ root: classes.root }} activeStep={page} orientation="vertical">
+                {steps.map(label => (
+                  <FormStep key={label}>
+                    <StepLabel>{label}</StepLabel>
+                    <StepContent>
+                      {activePage(rest)}
                       <Row align="end" margin="lg" grow>
                         <Col xs={12} center="xs">
                           <Controls
@@ -153,6 +152,10 @@ class GnoStepper extends React.PureComponent<Props, State> {
                           />
                         </Col>
                       </Row>
+                    </StepContent>
+                  </FormStep>
+                ))}
+              </Stepper>
             )
           }}
         </GnoForm>

src/components/forms/GnoForm/index.jsx

@@ -15,7 +15,6 @@ type Props = {
   padding: number,
   validation?: (values: Object) => Object | Promise<Object>,
   initialValues?: Object,
-  render: Function,
 }
 
 const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
@@ -26,7 +25,7 @@ const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
 })
 
 const GnoForm = ({
-  onSubmit, validation, initialValues, children, padding, render,
+  onSubmit, validation, initialValues, children, padding,
 }: Props) => (
   <Form
     validate={validation}
@@ -34,8 +33,7 @@ const GnoForm = ({
     initialValues={initialValues}
     render={({ handleSubmit, ...rest }) => (
       <form onSubmit={handleSubmit} style={stylesBasedOn(padding)}>
-        {render(rest)}
-        {children(rest.submitting, rest.validating)}
+        {children(rest.submitting, rest.validating, rest)}
       </form>
     )}
   />