add step descriptions, button layout

src/data/form-publish.json

@@ -4,6 +4,7 @@
   "steps": [
     {
       "title": "Essentials",
+      "description": "A description about these essential fields",
       "fields": {
         "name": {
           "label": "Title",
@@ -23,6 +24,7 @@
     },
     {
       "title": "Information",
+      "description": "A description about these fields",
       "fields": {
         "description": {
           "label": "Description",
@@ -72,6 +74,7 @@
     },
     {
       "title": "Credentials",
+      "description": "A description about these credentials fields",
       "fields": {
         "author": {
           "label": "Author",

src/routes/Publish/Step.module.scss

@@ -1,5 +1,28 @@
 @import '../../styles/variables';
 
+.header {
+    margin-bottom: $spacer * 1.5;
+    border-bottom: .1rem solid $brand-grey-lighter;
+}
+
 .title {
     font-size: $font-size-h2;
+    margin: 0;
+}
+
+.description {
+    margin-top: $spacer / 4;
+}
+
+.actions {
+    display: flex;
+    justify-content: space-between;
+    border-top: .1rem solid $brand-grey-lighter;
+    padding-top: $spacer;
+    margin-top: $spacer * 2;
+
+    button:last-child {
+        min-width: 12rem;
+        margin-left: auto;
+    }
 }

src/routes/Publish/Step.tsx

@@ -16,6 +16,7 @@ interface StepProps {
     files?: any
     state: any
     title: string
+    description: string
     next: any
     prev: any
     totalSteps: number
@@ -26,7 +27,11 @@ export default class Step extends PureComponent<StepProps, {}> {
         let { currentStep, prev } = this.props
 
         if (currentStep !== 1) {
-            return <Button onClick={prev}>Previous</Button>
+            return (
+                <Button link onClick={prev}>
+                    ← Previous
+                </Button>
+            )
         }
         return null
     }
@@ -35,7 +40,7 @@ export default class Step extends PureComponent<StepProps, {}> {
         let { currentStep, next, totalSteps } = this.props
 
         if (currentStep < totalSteps) {
-            return <Button onClick={next}>Next</Button>
+            return <Button onClick={next}>Next →</Button>
         }
         return null
     }
@@ -45,6 +50,7 @@ export default class Step extends PureComponent<StepProps, {}> {
             currentStep,
             index,
             title,
+            description,
             fields,
             inputChange,
             inputToArrayChange,
@@ -59,7 +65,11 @@ export default class Step extends PureComponent<StepProps, {}> {
 
         return (
             <>
-                <h3 className={styles.title}>{title}</h3>
+                <header className={styles.header}>
+                    <h2 className={styles.title}>{title}</h2>
+                    <p className={styles.description}>{description}</p>
+                </header>
+
                 {fields &&
                     Object.entries(fields).map(([key, value]) => {
                         let onChange = inputChange
@@ -102,6 +112,7 @@ export default class Step extends PureComponent<StepProps, {}> {
                         )
                     })}
 
+                <div className={styles.actions}>
                     {this.previousButton()}
                     {this.nextButton()}
 
@@ -118,6 +129,7 @@ export default class Step extends PureComponent<StepProps, {}> {
                             }
                         </User.Consumer>
                     )}
+                </div>
             </>
         )
     }

src/routes/Publish/index.tsx

@@ -182,6 +182,7 @@ class Publish extends Component<{}, PublishState> {
                                     key={index}
                                     index={index}
                                     title={step.title}
+                                    description={step.description}
                                     currentStep={this.state.currentStep}
                                     fields={step.fields}
                                     inputChange={this.inputChange}