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() + + return ( +
+

Submission

+ 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. +
+ ) +} 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: + }, + { + step: 5, + title: content.submission.title, + component: } ] 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);