prepare submission screen, nav layout updates

content/publish/form.json

@@ -152,5 +152,8 @@
   },
   "preview": {
     "title": "Preview"
+  },
+  "submission": {
+    "title": "Submit"
   }
 }

src/components/Publish/Navigation/index.module.css

@@ -1,30 +1,43 @@
 .navigation {
-  margin-bottom: var(--spacer);
-  margin-top: -1rem;
+  margin: -1.3rem calc(var(--spacer) / -1.5) var(--spacer)
+    calc(var(--spacer) / -1.5);
   padding: calc(var(--spacer) / 2) 0;
+  scrollbar-width: none;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--background-highlight);
 }
 
 @media (min-width: 40rem) {
   .navigation {
     margin-top: -2rem;
+    margin-left: calc(var(--spacer) * -2);
+    margin-right: calc(var(--spacer) * -2);
+  }
+}
+
+@media (min-width: 60rem) {
+  .navigation {
     padding: var(--spacer) 0;
+    margin-left: calc(var(--spacer) * -4);
+    margin-right: calc(var(--spacer) * -4);
   }
 }
 
 .navigation ol {
-  display: flex;
-  justify-content: center;
+  white-space: nowrap;
+  text-align: center;
   width: 100%;
   padding: 0;
   margin: 0;
   counter-reset: list-number;
-  overflow-y: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
 }
 
 .navigation li {
   cursor: pointer;
-  display: block;
+  display: inline-block;
   margin: 0 var(--spacer);
   padding: 0 calc(var(--spacer) / 2);
   counter-increment: list-number;

src/components/Publish/Submission/index.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement } from 'react'
+import styles from './index.module.css'
+import { FormPublishData } from '../_types'
+import { useFormikContext } from 'formik'
+
+export default function Submission(): ReactElement {
+  const { values } = useFormikContext<FormPublishData>()
+
+  return (
+    <div className={styles.submission}>
+      <h3>Submission</h3>
+      Place to teach about what happens next, output all the steps in background
+      in some list, after submission continously update this list with the
+      status of the submission.
+    </div>
+  )
+}

src/components/Publish/_constants.tsx

@@ -6,6 +6,7 @@ import PricingFields from './Pricing'
 import MetadataFields from './Metadata'
 import ServicesFields from './Services'
 import Preview from './Preview'
+import Submission from './Submission'
 
 export const wizardSteps: StepContent[] = [
   {
@@ -27,6 +28,11 @@ export const wizardSteps: StepContent[] = [
     step: 4,
     title: content.preview.title,
     component: <Preview />
+  },
+  {
+    step: 5,
+    title: content.submission.title,
+    component: <Submission />
   }
 ]
 

src/components/Publish/index.module.css

@@ -3,7 +3,7 @@
   margin-bottom: var(--spacer);
 }
 
-@media (min-width: 45rem) {
+@media (min-width: 40rem) {
   .form {
     padding-left: calc(var(--spacer) * 2);
     padding-right: calc(var(--spacer) * 2);