From 8e9cb3acad2f5ff9507f3571e6aa0ffd9cfabd45 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 24 Nov 2021 14:46:10 +0000
Subject: [PATCH] prepare submission screen, nav layout updates

---
 content/publish/form.json                     |  3 +++
 .../Publish/Navigation/index.module.css       | 25 ++++++++++++++-----
 .../Publish/Submission/index.module.css       |  0
 src/components/Publish/Submission/index.tsx   | 17 +++++++++++++
 src/components/Publish/_constants.tsx         |  6 +++++
 src/components/Publish/index.module.css       |  2 +-
 6 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Publish/Submission/index.module.css
 create mode 100644 src/components/Publish/Submission/index.tsx

diff --git a/content/publish/form.json b/content/publish/form.json
index b95e6a8e5..fde2ab998 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -152,5 +152,8 @@
   },
   "preview": {
     "title": "Preview"
+  },
+  "submission": {
+    "title": "Submit"
   }
 }
diff --git a/src/components/Publish/Navigation/index.module.css b/src/components/Publish/Navigation/index.module.css
index bca38ae38..8ffc67c12 100644
--- a/src/components/Publish/Navigation/index.module.css
+++ b/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;
diff --git a/src/components/Publish/Submission/index.module.css b/src/components/Publish/Submission/index.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/Publish/Submission/index.tsx b/src/components/Publish/Submission/index.tsx
new file mode 100644
index 000000000..04fca3e93
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index 522c3f289..963285ed6 100644
--- a/src/components/Publish/_constants.tsx
+++ b/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 />
   }
 ]
 
diff --git a/src/components/Publish/index.module.css b/src/components/Publish/index.module.css
index 77710010b..09b653875 100644
--- a/src/components/Publish/index.module.css
+++ b/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);