From 528b673e367bb2c6108edc582ab831bce9460ade Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 13:01:30 +0100
Subject: [PATCH 01/21] :pencil: [#36] Add story for large form progress
 indicator on mobile

Credits for the story go to @vaszig.

Co-authored-by: @vaszig
---
 src/components/App.stories.js | 159 +++++++++++++++++++++++++++++++++-
 1 file changed, 155 insertions(+), 4 deletions(-)

diff --git a/src/components/App.stories.js b/src/components/App.stories.js
index 5c14ab79d..dda71a305 100644
--- a/src/components/App.stories.js
+++ b/src/components/App.stories.js
@@ -20,7 +20,7 @@ import {SUBMISSION_ALLOWED} from './constants';
 export default {
   title: 'Private API / App',
   component: App,
-  decorators: [LayoutDecorator, ConfigDecorator],
+  decorators: [ConfigDecorator],
   args: {
     'form.translationEnabled': true,
     submissionAllowed: SUBMISSION_ALLOWED.yes,
@@ -113,10 +113,11 @@ const render = args => {
 
 export const Default = {
   render,
+  decorators: [LayoutDecorator],
 };
 
 export const TranslationEnabled = {
-  render,
+  ...Default,
   args: {
     'form.translationEnabled': true,
   },
@@ -127,7 +128,7 @@ export const TranslationEnabled = {
 };
 
 export const TranslationDisabled = {
-  render,
+  ...Default,
   args: {
     'form.translationEnabled': false,
   },
@@ -145,9 +146,10 @@ export const TranslationDisabled = {
 };
 
 export const ActiveSubmission = {
+  ...Default,
   name: 'Active submission',
-  render,
   decorators: [
+    ...Default.decorators,
     // remove the window.localStorage entry, UUID value is from `api-mocks/forms.js`.
     // it gets set because of the play function which starts a submission.
     Story => {
@@ -201,3 +203,152 @@ export const ActiveSubmission = {
     await userEvent.click(beginButton);
   },
 };
+
+export const SeveralStepsInMobileViewport = {
+  render,
+  args: {
+    title: 'Progress',
+    formTitle: 'Formulier',
+    steps: [
+      {
+        uuid: '9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5',
+        slug: 'step-1',
+        formDefinition: 'Step 1',
+        index: 0,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5`,
+        isApplicable: true,
+      },
+      {
+        uuid: '71fa50c1-53db-4179-9fe7-eb3378ef39ee',
+        slug: 'step-2',
+        formDefinition: 'Step 2',
+        index: 1,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/71fa50c1-53db-4179-9fe7-eb3378ef39ee`,
+        isApplicable: true,
+      },
+      {
+        uuid: 'f4f82113-ac83-429b-a17b-c1b145831fa9',
+        slug: 'step-3',
+        formDefinition: 'Step 3',
+        index: 2,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/f4f82113-ac83-429b-a17b-c1b145831fa9`,
+        isApplicable: true,
+      },
+      {
+        uuid: 'ae5af44e-004f-4d2f-be75-d46a22577244',
+        slug: 'step-4',
+        formDefinition: 'Step 4',
+        index: 3,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/ae5af44e-004f-4d2f-be75-d46a22577244`,
+        isApplicable: true,
+      },
+      {
+        uuid: 'cae11cf8-2773-4d70-80f4-71e5828b6fe3',
+        slug: 'step-5',
+        formDefinition: 'Step 5',
+        index: 4,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/cae11cf8-2773-4d70-80f4-71e5828b6fe3`,
+        isApplicable: true,
+      },
+      {
+        uuid: '3b14f4f5-2283-4a81-adf1-03848672c83b',
+        slug: 'step-6',
+        formDefinition: 'Step 6',
+        index: 5,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/3b14f4f5-2283-4a81-adf1-03848672c83b`,
+        isApplicable: true,
+      },
+      {
+        uuid: '3f0a2763-74de-4957-b970-a5117f15b023',
+        slug: 'step-7',
+        formDefinition: 'Step 7',
+        index: 6,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/3f0a2763-74de-4957-b970-a5117f15b023`,
+        isApplicable: true,
+      },
+      {
+        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        slug: 'step-8',
+        formDefinition: 'Step 8',
+        index: 7,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        isApplicable: true,
+      },
+      {
+        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        slug: 'step-9',
+        formDefinition: 'Step 9',
+        index: 8,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        isApplicable: true,
+      },
+      {
+        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        slug: 'step-10',
+        formDefinition: 'Step 10',
+        index: 9,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        isApplicable: true,
+      },
+    ],
+    ariaMobileIconLabel: 'Progress step indicator toggle icon (mobile)',
+    accessibleToggleStepsLabel: 'Current step in form Formulier: Stap 2',
+  },
+  parameters: {
+    chromatic: {disableSnapshot: true}, // TODO: set up viewports in chromatic
+    layout: 'fullscreen', // removes padding in canvas
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+};

From a6a83a6344108aa7e61902569ba226a6b6af6636 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 23 Nov 2023 17:01:15 +0100
Subject: [PATCH 02/21] :recycle: [#36] Refactor container app/form components

Refactored the React components and CSS components to do away with the
Form layout component, favouring a single grid layout for the App container.

This introduces more flexibility with the styling when re-arranging elements.
---
 design-tokens                                 |  2 +-
 src/Context.js                                |  3 +
 src/components/App.js                         | 38 ++----------
 src/components/App.stories.js                 | 11 ++--
 src/components/AppDisplay.js                  | 38 ++++++++++--
 src/components/Form.js                        | 30 +++++----
 src/components/FormDisplay.js                 | 57 ++++++++++-------
 src/components/FormDisplay.stories.js         | 28 +++++----
 src/components/FormStep/FormStep.stories.js   |  7 +--
 src/components/FormStep/index.js              |  5 +-
 src/components/LanguageSwitcher.js            | 12 ++++
 .../CreateAppointment/CreateAppointment.js    | 43 ++++++-------
 src/scss/components/_app.scss                 | 62 ++++++++++++++++---
 src/scss/components/_form.scss                | 46 --------------
 src/styles.scss                               |  1 -
 15 files changed, 202 insertions(+), 181 deletions(-)
 create mode 100644 src/components/LanguageSwitcher.js
 delete mode 100644 src/scss/components/_form.scss

diff --git a/design-tokens b/design-tokens
index ff79cdda4..499476b9f 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit ff79cdda4f02e2fec08e95e1e399ac25244ef8c4
+Subproject commit 499476b9f1d39833ad2850cade0e693bc4637de4
diff --git a/src/Context.js b/src/Context.js
index b9a554ae2..1c59fa651 100644
--- a/src/Context.js
+++ b/src/Context.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {DEBUG} from 'utils';
+
 const FormContext = React.createContext({
   uuid: '',
   name: '',
@@ -33,6 +35,7 @@ const ConfigContext = React.createContext({
     progressIndicator: null,
     loginOptions: null,
   },
+  debug: DEBUG,
 });
 ConfigContext.displayName = 'ConfigContext';
 
diff --git a/src/components/App.js b/src/components/App.js
index 1e6ab8c80..68ed4fc70 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,13 +1,8 @@
-import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
 import {Navigate, Outlet, useMatch} from 'react-router-dom';
 
-import {ConfigContext} from 'Context';
-import AppDebug from 'components/AppDebug';
 import {Cosign} from 'components/CoSign';
 import Form from 'components/Form';
-import LanguageSelection from 'components/LanguageSelection';
 import {
   CreateAppointment,
   appointmentRoutes,
@@ -16,10 +11,6 @@ import {
 import useFormContext from 'hooks/useFormContext';
 import useQuery from 'hooks/useQuery';
 import useZodErrorMap from 'hooks/useZodErrorMap';
-import {I18NContext} from 'i18n';
-import {DEBUG} from 'utils';
-
-import AppDisplay from './AppDisplay';
 
 export const routes = [
   {
@@ -42,30 +33,18 @@ export const routes = [
   },
 ];
 
-const LanguageSwitcher = () => {
-  const {languageSelectorTarget: target} = useContext(I18NContext);
-  return target ? ReactDOM.createPortal(<LanguageSelection />, target) : <LanguageSelection />;
-};
-
 /*
 Top level router - routing between an actual form or supporting screens.
  */
-const App = ({noDebug = false}) => {
+const App = () => {
   const form = useFormContext();
   const query = useQuery();
-  const config = useContext(ConfigContext);
   const appointmentMatch = useMatch('afspraak-maken/*');
   const appointmentCancelMatch = useMatch('afspraak-annuleren/*');
 
   // register localized error messages in the default zod error map
   useZodErrorMap();
 
-  const AppDisplayComponent = config?.displayComponents?.app ?? AppDisplay;
-
-  const {translationEnabled} = form;
-  const languageSwitcher = translationEnabled ? <LanguageSwitcher /> : null;
-  const appDebug = DEBUG && !noDebug ? <AppDebug /> : null;
-
   const isAppointment = form.appointmentOptions?.isAppointment ?? false;
   if (isAppointment && !appointmentMatch && !appointmentCancelMatch) {
     return (
@@ -78,18 +57,9 @@ const App = ({noDebug = false}) => {
       />
     );
   }
-
-  return (
-    <AppDisplayComponent
-      router={<Outlet />}
-      languageSwitcher={languageSwitcher}
-      appDebug={appDebug}
-    />
-  );
+  return <Outlet />;
 };
 
-App.propTypes = {
-  noDebug: PropTypes.bool,
-};
+App.propTypes = {};
 
 export default App;
diff --git a/src/components/App.stories.js b/src/components/App.stories.js
index dda71a305..fe74ab447 100644
--- a/src/components/App.stories.js
+++ b/src/components/App.stories.js
@@ -57,8 +57,6 @@ export default {
     ],
   },
   argTypes: {
-    form: {table: {disable: true}},
-    noDebug: {table: {disable: true}},
     submissionAllowed: {
       options: Object.values(SUBMISSION_ALLOWED),
       control: {type: 'radio'},
@@ -69,6 +67,9 @@ export default {
     },
   },
   parameters: {
+    config: {
+      debug: false,
+    },
     msw: {
       handlers: [
         mockLanguageInfoGet([
@@ -85,7 +86,7 @@ const Wrapper = ({form}) => {
   const routes = [
     {
       path: '*',
-      element: <App noDebug />,
+      element: <App />,
       children: nestedRoutes,
     },
   ];
@@ -121,7 +122,7 @@ export const TranslationEnabled = {
   args: {
     'form.translationEnabled': true,
   },
-  play: async ({args, canvasElement}) => {
+  play: async ({canvasElement}) => {
     const langSelector = await within(canvasElement).findByText(/^nl$/i);
     await expect(langSelector).toBeTruthy();
   },
@@ -132,7 +133,7 @@ export const TranslationDisabled = {
   args: {
     'form.translationEnabled': false,
   },
-  play: async ({args, canvasElement}) => {
+  play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
 
     // wait for spinners to disappear
diff --git a/src/components/AppDisplay.js b/src/components/AppDisplay.js
index 1392df7b6..1bbabfbca 100644
--- a/src/components/AppDisplay.js
+++ b/src/components/AppDisplay.js
@@ -1,18 +1,48 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const AppDisplay = ({router, languageSwitcher = null, appDebug = null}) => (
-  <div className="openforms-app">
+/**
+ * Main application display component - this is the layout wrapper around content.
+ *
+ * The Display component uses 'slots' for certain content blocks. The slot 'children'
+ * is reserved for the main content.
+ *
+ */
+export const AppDisplay = ({
+  children = null,
+  languageSwitcher = null,
+  progressIndicator = null,
+  appDebug = null,
+  router,
+}) => (
+  <div
+    className={classNames('openforms-app', {
+      'openforms-app--no-progress-indicator': !progressIndicator,
+      'openforms-app--no-language-switcher': !languageSwitcher,
+    })}
+  >
     {languageSwitcher && <div className="openforms-app__language-switcher">{languageSwitcher}</div>}
-    <div className="openforms-app__body">{router}</div>
+    <div className="openforms-app__body">{children || router}</div>
+    {progressIndicator && (
+      <div className="openforms-app__progress-indicator">{progressIndicator}</div>
+    )}
     {appDebug && <div className="openforms-app__debug">{appDebug}</div>}
   </div>
 );
 
 AppDisplay.propTypes = {
-  router: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
   languageSwitcher: PropTypes.node,
+  progressIndicator: PropTypes.node,
   appDebug: PropTypes.node,
+  /**
+   * Main content.
+   *
+   * @deprecated Use children instead.
+   *
+   */
+  router: PropTypes.node,
 };
 
 export default AppDisplay;
diff --git a/src/components/Form.js b/src/components/Form.js
index 73f9221b8..995d18a92 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -7,7 +7,6 @@ import {useImmerReducer} from 'use-immer';
 import {ConfigContext} from 'Context';
 import {destroy} from 'api';
 import ErrorBoundary from 'components/Errors/ErrorBoundary';
-import FormDisplay from 'components/FormDisplay';
 import FormStart from 'components/FormStart';
 import FormStep from 'components/FormStep';
 import Loader from 'components/Loader';
@@ -27,6 +26,7 @@ import useQuery from 'hooks/useQuery';
 import useRecycleSubmission from 'hooks/useRecycleSubmission';
 import useSessionTimeout from 'hooks/useSessionTimeout';
 
+import FormDisplay from './FormDisplay';
 import {addFixedSteps, getStepsInfo} from './ProgressIndicator/utils';
 import {PI_TITLE, STEP_LABELS, SUBMISSION_ALLOWED} from './constants';
 
@@ -328,15 +328,18 @@ const Form = () => {
     isCompleted
   );
 
-  const progressIndicator = form.showProgressIndicator ? (
-    <ProgressIndicator
-      title={PI_TITLE}
-      formTitle={formName}
-      steps={stepsToRender}
-      ariaMobileIconLabel={ariaMobileIconLabel}
-      accessibleToggleStepsLabel={accessibleToggleStepsLabel}
-    />
-  ) : null;
+  // Show the progress indicator if enabled on the form AND we're not in the payment
+  // status/overview screen.
+  const progressIndicator =
+    form.showProgressIndicator && !paymentOverviewMatch ? (
+      <ProgressIndicator
+        title={PI_TITLE}
+        formTitle={formName}
+        steps={stepsToRender}
+        ariaMobileIconLabel={ariaMobileIconLabel}
+        accessibleToggleStepsLabel={accessibleToggleStepsLabel}
+      />
+    ) : null;
 
   // Route the correct page based on URL
   const router = (
@@ -431,12 +434,7 @@ const Form = () => {
   // render the form step if there's an active submission (and no summary)
   const FormDisplayComponent = config?.displayComponents?.form ?? FormDisplay;
   return (
-    <FormDisplayComponent
-      router={router}
-      progressIndicator={progressIndicator}
-      showProgressIndicator={form.showProgressIndicator}
-      isPaymentOverview={!!paymentOverviewMatch}
-    />
+    <FormDisplayComponent progressIndicator={progressIndicator}>{router}</FormDisplayComponent>
   );
 };
 
diff --git a/src/components/FormDisplay.js b/src/components/FormDisplay.js
index dfeb5640b..350cfdbff 100644
--- a/src/components/FormDisplay.js
+++ b/src/components/FormDisplay.js
@@ -1,37 +1,52 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useContext} from 'react';
+
+import {ConfigContext} from 'Context';
+import AppDebug from 'components/AppDebug';
+import AppDisplay from 'components/AppDisplay';
+import LanguageSwitcher from 'components/LanguageSwitcher';
+import useFormContext from 'hooks/useFormContext';
 
 /**
  * Layout component to render the form container.
+ *
+ * Takes in the main body and (optional) progress indicator and forwards them to the
+ * AppDisplay component, while adding in any global/skeleton nodes.
+ *
  * @return {JSX}
  */
-const FormDisplay = ({
-  router,
-  progressIndicator = null,
-  showProgressIndicator = true,
-  isPaymentOverview = false,
-}) => {
-  const renderProgressIndicator = progressIndicator && showProgressIndicator && !isPaymentOverview;
+const FormDisplay = ({children = null, progressIndicator = null, router = null}) => {
+  const {translationEnabled} = useFormContext();
+  const config = useContext(ConfigContext);
+
+  const appDebug = config.debug ? <AppDebug /> : null;
+  const languageSwitcher = translationEnabled ? <LanguageSwitcher /> : null;
+
+  const AppDisplayComponent = config?.displayComponents?.app ?? AppDisplay;
   return (
-    <div
-      className={classNames('openforms-form', {
-        'openforms-form--body-only': !renderProgressIndicator,
-      })}
+    <AppDisplayComponent
+      languageSwitcher={languageSwitcher}
+      progressIndicator={progressIndicator}
+      appDebug={appDebug}
     >
-      <div className="openforms-form__body">{router}</div>
-      {renderProgressIndicator && (
-        <div className="openforms-form__progress-indicator">{progressIndicator}</div>
-      )}
-    </div>
+      {children || router}
+    </AppDisplayComponent>
   );
 };
 
 FormDisplay.propTypes = {
-  router: PropTypes.node.isRequired,
+  /**
+   * Main content.
+   */
+  children: PropTypes.node,
   progressIndicator: PropTypes.node,
-  showProgressIndicator: PropTypes.bool,
-  isPaymentOverview: PropTypes.bool,
+  /**
+   * Main content.
+   *
+   * @deprecated Use children instead.
+   *
+   */
+  router: PropTypes.node,
 };
 
 export default FormDisplay;
diff --git a/src/components/FormDisplay.stories.js b/src/components/FormDisplay.stories.js
index 2a5d5d99e..31ca228c3 100644
--- a/src/components/FormDisplay.stories.js
+++ b/src/components/FormDisplay.stories.js
@@ -1,44 +1,46 @@
 import Body from 'components/Body';
 import Card from 'components/Card';
-import {LayoutDecorator} from 'story-utils/decorators';
+import {ConfigDecorator, LayoutDecorator} from 'story-utils/decorators';
 
 import FormDisplay from './FormDisplay';
 
 export default {
   title: 'Composites / Form display',
   component: FormDisplay,
-  decorators: [LayoutDecorator],
+  decorators: [LayoutDecorator, ConfigDecorator],
   render: args => (
     <FormDisplay
-      router={
-        <Card>
-          <Body>Body for relevant route(s)</Body>
-        </Card>
-      }
       progressIndicator={
-        <Card>
-          <Body>Progress indicator</Body>
-        </Card>
+        args.showProgressIndicator ? (
+          <Card>
+            <Body>Progress indicator</Body>
+          </Card>
+        ) : null
       }
       {...args}
-    />
+    >
+      <Card>
+        <Body>Body for relevant route(s)</Body>
+      </Card>
+    </FormDisplay>
   ),
   argTypes: {
     router: {table: {disable: true}},
     progressIndicator: {table: {disable: true}},
   },
+  parameters: {
+    config: {debug: false},
+  },
 };
 
 export const Default = {
   args: {
     showProgressIndicator: true,
-    isPaymentOverview: false,
   },
 };
 
 export const WithoutProgressIndicator = {
   args: {
     showProgressIndicator: false,
-    isPaymentOverview: false,
   },
 };
diff --git a/src/components/FormStep/FormStep.stories.js b/src/components/FormStep/FormStep.stories.js
index d17be2372..4a98f3174 100644
--- a/src/components/FormStep/FormStep.stories.js
+++ b/src/components/FormStep/FormStep.stories.js
@@ -23,6 +23,9 @@ export default {
     routerArgs: {table: {disable: true}},
   },
   parameters: {
+    config: {
+      debug: false,
+    },
     reactRouter: {
       routePath: '/stap/:step',
       routeParams: {step: 'step-1'},
@@ -40,7 +43,6 @@ const render = ({
   onStepSubmitted,
   onLogout,
   onSessionDestroyed,
-  showDebug,
   // story args
   formioConfiguration,
 }) => {
@@ -66,7 +68,6 @@ const render = ({
       onStepSubmitted={onStepSubmitted}
       onLogout={onLogout}
       onSessionDestroyed={onSessionDestroyed}
-      showDebug={showDebug}
     />
   );
 };
@@ -96,7 +97,6 @@ export const Default = {
     },
     form: buildForm(),
     submission: buildSubmission(),
-    showDebug: false,
   },
 };
 
@@ -126,6 +126,5 @@ export const SuspensionDisallowed = {
     },
     form: buildForm({suspensionAllowed: false}),
     submission: buildSubmission(),
-    showDebug: false,
   },
 };
diff --git a/src/components/FormStep/index.js b/src/components/FormStep/index.js
index 95d84178d..07c0c17cb 100644
--- a/src/components/FormStep/index.js
+++ b/src/components/FormStep/index.js
@@ -49,7 +49,6 @@ import {ValidationError} from 'errors';
 import {PREFIX} from 'formio/constants';
 import useTitle from 'hooks/useTitle';
 import Types from 'types';
-import {DEBUG} from 'utils';
 
 import hooks from '../../formio/hooks';
 
@@ -300,7 +299,6 @@ const FormStep = ({
   onStepSubmitted,
   onLogout,
   onSessionDestroyed,
-  showDebug = DEBUG,
 }) => {
   const intl = useIntl();
   const config = useContext(ConfigContext);
@@ -867,7 +865,7 @@ const FormStep = ({
                   },
                 }}
               />
-              {showDebug ? <FormStepDebug data={getCurrentFormData()} /> : null}
+              {config.debug ? <FormStepDebug data={getCurrentFormData()} /> : null}
               <ButtonsToolbar
                 literals={formStep.literals}
                 canSubmitStep={canSubmit}
@@ -906,7 +904,6 @@ FormStep.propTypes = {
   onStepSubmitted: PropTypes.func.isRequired,
   onLogout: PropTypes.func.isRequired,
   onSessionDestroyed: PropTypes.func.isRequired,
-  showDebug: PropTypes.bool,
 };
 
 export default FormStep;
diff --git a/src/components/LanguageSwitcher.js b/src/components/LanguageSwitcher.js
new file mode 100644
index 000000000..d748c99bc
--- /dev/null
+++ b/src/components/LanguageSwitcher.js
@@ -0,0 +1,12 @@
+import {useContext} from 'react';
+import ReactDOM from 'react-dom';
+
+import LanguageSelection from 'components/LanguageSelection';
+import {I18NContext} from 'i18n';
+
+const LanguageSwitcher = () => {
+  const {languageSelectorTarget: target} = useContext(I18NContext);
+  return target ? ReactDOM.createPortal(<LanguageSelection />, target) : <LanguageSelection />;
+};
+
+export default LanguageSwitcher;
diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.js b/src/components/appointments/CreateAppointment/CreateAppointment.js
index f98b29933..093f63aa3 100644
--- a/src/components/appointments/CreateAppointment/CreateAppointment.js
+++ b/src/components/appointments/CreateAppointment/CreateAppointment.js
@@ -52,6 +52,10 @@ const CreateAppointment = () => {
     resetSession();
   };
 
+  const progressIndicator = form.showProgressIndicator ? (
+    <AppointmentProgress title={form.name} currentStep={currentStep} />
+  ) : null;
+
   return (
     <AppointmentConfigContext.Provider value={{supportsMultipleProducts}}>
       <CreateAppointmentState
@@ -59,30 +63,21 @@ const CreateAppointment = () => {
         submission={submission}
         resetSession={reset}
       >
-        <FormDisplayComponent
-          router={
-            <Wrapper sessionExpired={sessionExpired} title={form.name}>
-              <ErrorBoundary>
-                {isLoading ? (
-                  <Loader modifiers={['centered']} />
-                ) : (
-                  <RequireSession
-                    expired={sessionExpired}
-                    expiryDate={expiryDate}
-                    onNavigate={reset}
-                  >
-                    <LiteralsProvider literals={form.literals}>
-                      <Outlet />
-                    </LiteralsProvider>
-                  </RequireSession>
-                )}
-              </ErrorBoundary>
-            </Wrapper>
-          }
-          progressIndicator={<AppointmentProgress title={form.name} currentStep={currentStep} />}
-          showProgressIndicator={form.showProgressIndicator}
-          isPaymentOverview={false}
-        />
+        <FormDisplayComponent progressIndicator={progressIndicator}>
+          <Wrapper sessionExpired={sessionExpired} title={form.name}>
+            <ErrorBoundary>
+              {isLoading ? (
+                <Loader modifiers={['centered']} />
+              ) : (
+                <RequireSession expired={sessionExpired} expiryDate={expiryDate} onNavigate={reset}>
+                  <LiteralsProvider literals={form.literals}>
+                    <Outlet />
+                  </LiteralsProvider>
+                </RequireSession>
+              )}
+            </ErrorBoundary>
+          </Wrapper>
+        </FormDisplayComponent>
       </CreateAppointmentState>
     </AppointmentConfigContext.Provider>
   );
diff --git a/src/scss/components/_app.scss b/src/scss/components/_app.scss
index 8b95eb238..863af75db 100644
--- a/src/scss/components/_app.scss
+++ b/src/scss/components/_app.scss
@@ -10,23 +10,69 @@
  * The default values are added for backwards compatibility.
  */
 .openforms-app {
-  display: flex;
-  flex-direction: column;
-  gap: var(--of-form-gap, 0);
+  display: grid;
+  grid-column-gap: var(--of-app-grid-column-gap, 20px);
+  grid-template-columns: 2fr 1fr;
+  grid-template-areas:
+    'lang-switcher lang-switcher'
+    'body          progress-indicator'
+    'debug         debug';
   position: relative;
 
-  @include mobile-only {
-    padding-block-end: var(--of-form-mobile-padding-block-end, 15px);
-    padding-block-start: var(--of-form-mobile-padding-block-start, 0);
-    padding-inline-end: var(--of-form-mobile-padding-inline-end, 15px);
-    padding-inline-start: var(--of-form-mobile-padding-inline-start, 15px);
+  // When there's no progress indicator, stretch the main content
+  // over both containers.
+  @include bem.modifier('no-progress-indicator') {
+    @include bem.element('body') {
+      grid-row-start: body;
+      grid-row-end: progress-indicator;
+      grid-column-start: body;
+      grid-column-end: progress-indicator;
+    }
   }
 
   @include bem.element('language-switcher') {
+    grid-area: lang-switcher;
     display: flex;
   }
 
+  @include bem.element('body') {
+    grid-area: body;
+  }
+
+  @include bem.element('progress-indicator') {
+    grid-area: progress-indicator;
+  }
+
   @include bem.element('debug') {
+    grid-area: debug;
     margin-block-start: 2em;
   }
+
+  // Responsive styles - switch to a column layout and re-order elements.
+  @include mobile-only {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'progress-indicator'
+      'lang-switcher'
+      'body'
+      'debug';
+    grid-row-gap: var(--of-app-mobile-grid-row-gap, 0);
+
+    padding-block-end: var(--of-app-mobile-padding-block-end, 15px);
+    padding-block-start: var(--of-app-mobile-padding-block-start, 0);
+    padding-inline-end: var(--of-app-mobile-padding-inline-end, 15px);
+    padding-inline-start: var(--of-app-mobile-padding-inline-start, 15px);
+
+    @include bem.element('progress-indicator') {
+      margin-inline-end: var(--of-app-progress-indicator-mobile-margin-inline-end, -15px);
+      margin-inline-start: var(--of-app-progress-indicator-mobile-margin-inline-start, -15px);
+
+      // on mobile, the order of elements is swapped and to keep the progress indicator
+      // in view, we need to apply the positioning to this element rather than
+      // .openforms-progress-indicator
+      position: sticky;
+      inset-block-start: var(--of-app-mobile-progress-indicator-inset-block-start, 0px);
+      z-index: 1;
+    }
+  }
 }
diff --git a/src/scss/components/_form.scss b/src/scss/components/_form.scss
deleted file mode 100644
index 4a9eb9e88..000000000
--- a/src/scss/components/_form.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@use 'microscope-sass/lib/bem';
-
-// @import instead of @use because breakpoints are defined globally
-@import 'microscope-sass/lib/responsive';
-
-/**
- * Custom component to manage our form layout, arranging body and progress indicator.
- *
- * The default values are added for backwards compatibility.
- */
-.openforms-form {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  grid-template-areas: 'body progress-indicator';
-  grid-column-gap: var(--of-form-grid-column-gap, 20px);
-  position: relative;
-
-  @include bem.modifier('body-only') {
-    grid-template-columns: 1fr;
-    grid-template-areas: 'body';
-  }
-
-  @include bem.element('body') {
-    grid-area: body;
-  }
-
-  @include bem.element('progress-indicator') {
-    grid-area: progress-indicator;
-  }
-
-  @include mobile-only {
-    grid-row-gap: var(--of-form-grid-mobile-row-gap, 15px);
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-template-areas:
-      'progress-indicator'
-      'body';
-
-    @include bem.element('progress-indicator') {
-      position: sticky;
-      top: 0;
-      margin-inline-end: var(--of-form-progress-indicator-mobile-margin-inline-end, -15px);
-      margin-inline-start: var(--of-form-progress-indicator-mobile-margin-inline-start, -15px);
-    }
-  }
-}
diff --git a/src/styles.scss b/src/styles.scss
index 2eb60e937..d8dbcbf2b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -31,7 +31,6 @@
 @import './scss/components/checkbox';
 @import './scss/components/content';
 @import './scss/components/errors';
-@import './scss/components/form';
 @import './scss/components/formio-component';
 @import './scss/components/help-text';
 @import './scss/components/image';

From c27cd6010eca89273fcf21a9902823155080b9ec Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 14:32:37 +0100
Subject: [PATCH 03/21] :wheelchair: [#36] Use (hidden) caption as description
 for nav element

Co-authored-by: @vaszig
---
 src/components/Caption.js                 | 8 ++++++--
 src/components/ProgressIndicator/index.js | 6 ++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Caption.js b/src/components/Caption.js
index d71fbc406..f7decbf47 100644
--- a/src/components/Caption.js
+++ b/src/components/Caption.js
@@ -3,9 +3,13 @@ import React from 'react';
 
 import {getBEMClassName} from 'utils';
 
-const Caption = ({children, component = 'caption'}) => {
+const Caption = ({children, component = 'caption', ...props}) => {
   const Component = `${component}`;
-  return <Component className={getBEMClassName('caption')}>{children}</Component>;
+  return (
+    <Component className={getBEMClassName('caption')} {...props}>
+      {children}
+    </Component>
+  );
 };
 
 Caption.propTypes = {
diff --git a/src/components/ProgressIndicator/index.js b/src/components/ProgressIndicator/index.js
index 773f2dc6b..4aa3e9207 100644
--- a/src/components/ProgressIndicator/index.js
+++ b/src/components/ProgressIndicator/index.js
@@ -36,7 +36,7 @@ const ProgressIndicator = ({
 
   return (
     <Card blockClassName="progress-indicator" modifiers={modifiers}>
-      <nav>
+      <nav aria-labelledby="ca10ead3-1537-41dc-b3b4-a4593740ecd9">
         <MobileButton
           ariaMobileIconLabel={ariaMobileIconLabel}
           accessibleToggleStepsLabel={accessibleToggleStepsLabel}
@@ -44,7 +44,9 @@ const ProgressIndicator = ({
           expanded={expanded}
           onExpandClick={() => setExpanded(!expanded)}
         />
-        <Caption component="h2">{title}</Caption>
+        <Caption component="h2" id="ca10ead3-1537-41dc-b3b4-a4593740ecd9">
+          {title}
+        </Caption>
         <List ordered>
           {steps.map((step, index) => (
             <ProgressIndicatorItem

From 10970de7298a22067d7041ff276ce3e7846264ad Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 14:43:30 +0100
Subject: [PATCH 04/21] :recycle: [#36] Reset markup and styles for progress
 indicator entirely

---
 .../ProgressIndicator/MobileButton.js         |   5 +-
 src/components/ProgressIndicator/index.js     |  20 ++-
 src/scss/components/_progress-indicator.scss  | 147 +++++++++---------
 3 files changed, 88 insertions(+), 84 deletions(-)

diff --git a/src/components/ProgressIndicator/MobileButton.js b/src/components/ProgressIndicator/MobileButton.js
index 13a0909bf..e5e9d7caf 100644
--- a/src/components/ProgressIndicator/MobileButton.js
+++ b/src/components/ProgressIndicator/MobileButton.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 
 import FAIcon from 'components/FAIcon';
-import {getBEMClassName} from 'utils';
 
 const MobileButton = ({
   ariaMobileIconLabel,
@@ -12,7 +11,7 @@ const MobileButton = ({
 }) => {
   return (
     <button
-      className={getBEMClassName('progress-indicator__mobile-header')}
+      className="openforms-progress-indicator__mobile-header"
       aria-pressed={expanded ? 'true' : 'false'}
       onClick={onExpandClick}
     >
@@ -22,7 +21,7 @@ const MobileButton = ({
         aria-label={ariaMobileIconLabel}
       />
       <span
-        className={getBEMClassName('progress-indicator__form-title')}
+        className="openforms-progress-indicator__form-title"
         aria-label={accessibleToggleStepsLabel}
       >
         {formTitle}
diff --git a/src/components/ProgressIndicator/index.js b/src/components/ProgressIndicator/index.js
index 4aa3e9207..b3c3b6e0c 100644
--- a/src/components/ProgressIndicator/index.js
+++ b/src/components/ProgressIndicator/index.js
@@ -36,14 +36,18 @@ const ProgressIndicator = ({
 
   return (
     <Card blockClassName="progress-indicator" modifiers={modifiers}>
-      <nav aria-labelledby="ca10ead3-1537-41dc-b3b4-a4593740ecd9">
-        <MobileButton
-          ariaMobileIconLabel={ariaMobileIconLabel}
-          accessibleToggleStepsLabel={accessibleToggleStepsLabel}
-          formTitle={formTitle}
-          expanded={expanded}
-          onExpandClick={() => setExpanded(!expanded)}
-        />
+      <MobileButton
+        ariaMobileIconLabel={ariaMobileIconLabel}
+        accessibleToggleStepsLabel={accessibleToggleStepsLabel}
+        formTitle={formTitle}
+        expanded={expanded}
+        onExpandClick={() => setExpanded(!expanded)}
+      />
+
+      <nav
+        className="openforms-progress-indicator__nav"
+        aria-labelledby="ca10ead3-1537-41dc-b3b4-a4593740ecd9"
+      >
         <Caption component="h2" id="ca10ead3-1537-41dc-b3b4-a4593740ecd9">
           {title}
         </Caption>
diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index 40b68b3f4..7e2e14828 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -11,79 +11,80 @@
   }
 }
 
-.#{prefix('progress-indicator')} {
-  @extend .openforms-card; // TODO -> syntax highlighting trips on #{prefix('card')}
-
-  @include bem.element('mobile-header') {
-    @include body;
-    @include body--big;
-    @include margin(-$grid-container-margin, $properties: margin-left);
-
-    // style for replacing div with a button for accessibility
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    width: calc(100% + $grid-container-margin);
-
-    @include show-on-mobile(flex);
-
-    align-items: center;
-
-    .fa-icon {
-      display: block;
-      flex-shrink: 0;
-      flex-basis: $grid-container-margin * 2;
-      text-align: center;
-    }
-  }
-
-  @include bem.element('form-title') {
-    @include ellipsis;
-    font-weight: bold;
-  }
-
-  // mobile styling for the progress indicator
-  @include mobile-only {
-    @include margin($grid-container-margin, $properties: (padding-top, padding-bottom));
-    box-shadow: var(--of-progress-indicator-mobile-box-shadow);
-    // otherwise the bar is too short, and setting a width creates a horizontal scrollbar
-    width: unset;
-
-    // style layout
-    @at-root .#{prefix('layout__row')} & {
-      @include margin(
-        calc(-1 * var(--of-progress-indicator-mobile-margin)),
-        $properties: (margin-left, margin-right)
-      );
-    }
-
-    @include nested('caption') {
-      @include margin(true, $properties: margin-top);
-      @include margin($grid-container-margin, $properties: margin-left);
-
-      @include mobile-only {
-        display: none;
-      }
-    }
-
-    @include nested('list') {
-      @include margin($grid-container-margin, $properties: margin-left);
-    }
-
-    @include bem.modifier('mobile-collapsed') {
-      @include nested('caption') {
-        display: none;
-      }
-
-      @include nested('list') {
-        display: none;
-      }
-    }
-  }
-}
-
-.#{prefix('progress-indicator-item')} {
+// .#{prefix('progress-indicator')} {
+//   @extend .openforms-card; // TODO -> syntax highlighting trips on #{prefix('card')}
+
+//   @include bem.element('mobile-header') {
+//     @include body;
+//     @include body--big;
+//     @include margin(-$grid-container-margin, $properties: margin-left);
+
+//     // style for replacing div with a button for accessibility
+//     background: none;
+//     border: none;
+//     padding: 0;
+//     cursor: pointer;
+//     width: calc(100% + $grid-container-margin);
+
+//     @include show-on-mobile(flex);
+
+//     align-items: center;
+
+//     .fa-icon {
+//       display: block;
+//       flex-shrink: 0;
+//       flex-basis: $grid-container-margin * 2;
+//       text-align: center;
+//     }
+//   }
+
+//   @include bem.element('form-title') {
+//     @include ellipsis;
+//     font-weight: bold;
+//   }
+
+//   // mobile styling for the progress indicator
+//   @include mobile-only {
+//     @include margin($grid-container-margin, $properties: (padding-top, padding-bottom));
+//     box-shadow: var(--of-progress-indicator-mobile-box-shadow);
+//     // otherwise the bar is too short, and setting a width creates a horizontal scrollbar
+//     width: unset;
+
+//     // style layout
+//     @at-root .#{prefix('layout__row')} & {
+//       @include margin(
+//         calc(-1 * var(--of-progress-indicator-mobile-margin)),
+//         $properties: (margin-left, margin-right)
+//       );
+//     }
+
+//     @include nested('caption') {
+//       @include margin(true, $properties: margin-top);
+//       @include margin($grid-container-margin, $properties: margin-left);
+
+//       @include mobile-only {
+//         display: none;
+//       }
+//     }
+
+//     @include nested('list') {
+//       @include margin($grid-container-margin, $properties: margin-left);
+//     }
+
+//     @include bem.modifier('mobile-collapsed') {
+//       @include nested('caption') {
+//         display: none;
+//       }
+
+//       @include nested('list') {
+//         display: none;
+//       }
+//     }
+//   }
+// }
+
+// TODO: parametrize with design tokens
+.openforms-progress-indicator-item {
   display: flex;
   justify-content: flex-start;
 

From 157576e9aee3fc542571d8a5aa666cd1aa6bc58b Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 14:52:11 +0100
Subject: [PATCH 05/21] :recycle: [#36] Refactor/parametrize card styles

Rather than having the progress indicator component inherit the card
component styles, it shares the implementation details with it but
uses its own component namespace in the design tokens.

Implemented in a backwards compatible manner to point to existing
design tokens, but you can specify more specific ones if you'd like
so.
---
 src/scss/components/_card.scss               | 15 +++++++++++----
 src/scss/components/_progress-indicator.scss |  8 +++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss
index 44959cfbe..fc9dbf27c 100644
--- a/src/scss/components/_card.scss
+++ b/src/scss/components/_card.scss
@@ -5,11 +5,18 @@
 
 @import '../mixins/prefix';
 
-.#{prefix('card')} {
-  @include color-background;
-  padding: $grid-margin-8;
+@mixin card($block: 'card') {
+  background-color: var(--of-#{$block}-background-color, var(--of-color-bg));
   box-sizing: border-box;
-  width: 100%;
+  padding-block-end: var(--of-#{$block}-padding-block-end, 40px);
+  padding-block-start: var(--of-#{$block}-padding-block-start, 40px);
+  padding-inline-end: var(--of-#{$block}-padding-inline-end, 40px);
+  padding-inline-start: var(--of-#{$block}-padding-inline-start, 40px);
+  inline-size: 100%;
+}
+
+.openforms-card {
+  @include card;
 
   @include bem.element('header') {
     @include bem.modifier('padded') {
diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index 7e2e14828..c25b67b3a 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -1,7 +1,5 @@
 @use 'microscope-sass/lib/bem';
-
-@import '~microscope-sass/lib/grid';
-@import '~microscope-sass/lib/typography';
+@use './card';
 
 @import '../mixins/prefix';
 
@@ -11,6 +9,10 @@
   }
 }
 
+.openforms-progress-indicator {
+  @include card.card('progress-indicator');
+}
+
 // .#{prefix('progress-indicator')} {
 //   @extend .openforms-card; // TODO -> syntax highlighting trips on #{prefix('card')}
 

From 0bd512cde472ca27266acd9a1fe878086e25b340 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 15:10:51 +0100
Subject: [PATCH 06/21] :recycle: [#36] Apply (base) styles for desktop

* Use flexbox and gap for spacing between caption and link list in
  progress indicator
* Hide the mobile header/toggle button on desktop
* Manage spacing between list items with gap rather than margins
---
 src/scss/components/_list.scss               | 18 ++++++---------
 src/scss/components/_progress-indicator.scss | 23 +++++++++++++++++++-
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/scss/components/_list.scss b/src/scss/components/_list.scss
index 66d52f61b..7aa5ee28c 100644
--- a/src/scss/components/_list.scss
+++ b/src/scss/components/_list.scss
@@ -7,36 +7,32 @@
 @import '../mixins/prefix';
 
 .#{prefix('list')} {
-  .#{prefix('caption')} + & {
-    @include margin(true, $properties: margin-top);
-  }
-
   list-style: none;
   margin: 0;
   padding: 0;
 
+  display: flex;
+  flex-direction: column;
+  gap: var(--of-list-gap, 20px);
+
   @include bem.element('item') {
     @include body;
     @include body--big;
   }
 
+  // TODO: check if this can be removed
   &:not(#{&}--compact, #{&}--extra-compact) &__item {
-    @include margin;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
   }
 
   @include bem.modifier('compact') {
-    @include bem.element('item') {
-      @include margin($value-mobile: $grid-margin-1);
-    }
+    --of-list-gap: var(--of-list-compact-gap, 8px);
   }
 
   @include bem.modifier('extra-compact') {
-    @include bem.element('item') {
-      @include margin(false);
-    }
+    --of-list-gap: var(--of-list-extra-compact-gap, 0px);
   }
 
   @include bem.modifier('dash') {
diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index c25b67b3a..b90855a1e 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -11,10 +11,31 @@
 
 .openforms-progress-indicator {
   @include card.card('progress-indicator');
+
+  // Do not display the toggle button on non-mobile devices
+  @include bem.element('mobile-header') {
+    display: none;
+  }
+
+  @include bem.element('nav') {
+    display: flex;
+    flex-direction: column;
+    gap: var(--of-progress-indicator-nav-gap, 20px);
+  }
+
+  @include mobile-only {
+    @include bem.element('mobile-header') {
+      display: block;
+    }
+
+    // Hide by default on mobile
+    @include bem.element('nav') {
+      display: none;
+    }
+  }
 }
 
 // .#{prefix('progress-indicator')} {
-//   @extend .openforms-card; // TODO -> syntax highlighting trips on #{prefix('card')}
 
 //   @include bem.element('mobile-header') {
 //     @include body;

From 84cab8a64d0cd8d18509a3d3de41c8cad6afc879 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 15:27:22 +0100
Subject: [PATCH 07/21] :bug: [#36] Fix excluding steps mechanism

---
 src/components/ProgressIndicator/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProgressIndicator/utils.js b/src/components/ProgressIndicator/utils.js
index 18a044a4f..0bf0ae1fb 100644
--- a/src/components/ProgressIndicator/utils.js
+++ b/src/components/ProgressIndicator/utils.js
@@ -75,7 +75,7 @@ const addFixedSteps = (
     ...steps,
     showOverview && summaryStep,
     showConfirmation && confirmationStep,
-  ];
+  ].filter(Boolean);
 
   return finalSteps;
 };

From c50126e42c3d984e8cac1fff393cfa4fce3e7df4 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 16:21:10 +0100
Subject: [PATCH 08/21] :iphone: [#36] Set up styling from scratch for mobile
 header

This now uses a flexbox approach for the content, while using the normal
document flow as much as possible to fit the element inside its
container element(s).

The story is updated so that it's clear how overflowing content is
handled.

Padding is removed from the parent element and moved into the button
element, so that it is more touch-device friendly. Tapping anywhere on
the header now toggles it between open/closed state.

Finally, most of these appearance aspects are now parametrized through
design tokens.
---
 src/components/App.stories.js                |  5 +-
 src/scss/components/_progress-indicator.scss | 64 +++++++++++++++++++-
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/src/components/App.stories.js b/src/components/App.stories.js
index fe74ab447..ddee73b70 100644
--- a/src/components/App.stories.js
+++ b/src/components/App.stories.js
@@ -22,6 +22,7 @@ export default {
   component: App,
   decorators: [ConfigDecorator],
   args: {
+    name: 'Mock form',
     'form.translationEnabled': true,
     submissionAllowed: SUBMISSION_ALLOWED.yes,
     hideNonApplicableSteps: false,
@@ -103,6 +104,7 @@ const Wrapper = ({form}) => {
 
 const render = args => {
   const form = buildForm({
+    name: args.name,
     translationEnabled: args['form.translationEnabled'],
     explanationTemplate: '<p>Toelichtingssjabloon...</p>',
     submissionAllowed: args['submissionAllowed'],
@@ -208,8 +210,7 @@ export const ActiveSubmission = {
 export const SeveralStepsInMobileViewport = {
   render,
   args: {
-    title: 'Progress',
-    formTitle: 'Formulier',
+    name: 'A rather long form name that overflows on mobile',
     steps: [
       {
         uuid: '9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5',
diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index b90855a1e..51c9c9422 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -9,6 +9,19 @@
   }
 }
 
+/**
+ * Desktop and mobile styling for the progress indicator element.
+ *
+ * The parent component (_app.scss) is responsible for re-arranging the order of
+ * elements depending on the viewport. The styles of this component are responsible for
+ * managing how it looks/behaves on mobile/non-mobile viewports:
+ *
+ * - on mobile, the element takes a navbar-like approach that can be expanded/collapsed
+ * - on desktop, it behaves like a sticky element, so that it can be placed in a sidebar
+ *
+ * TODO: remove the fallbacks/defaults after a deprecation period. Many of these
+ * design tokens here didn't exist before 2.1 and had hardcoded values.
+ */
 .openforms-progress-indicator {
   @include card.card('progress-indicator');
 
@@ -23,9 +36,58 @@
     gap: var(--of-progress-indicator-nav-gap, 20px);
   }
 
+  /**
+   * Responsive styles, mobile viewports.
+   *
+   */
   @include mobile-only {
+    // remove any padding from the container element - instead, we apply mobile padding
+    // on the button element so that it's easier to tap on mobile devices.
+    --of-progress-indicator-padding-block-end: 0;
+    --of-progress-indicator-padding-block-start: 0;
+    --of-progress-indicator-padding-inline-end: 0;
+    --of-progress-indicator-padding-inline-start: 0;
+
     @include bem.element('mobile-header') {
-      display: block;
+      // reset base/default user agent styles
+      all: unset;
+      box-shadow: var(--of-progress-indicator-mobile-box-shadow);
+      box-sizing: border-box;
+      cursor: pointer;
+
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: var(--of-progress-indicator-mobile-header-gap, 0);
+      inline-size: 100%;
+      max-inline-size: var(--of-progress-indicator-mobile-header-max-inline-size, 100vw);
+
+      padding-block-end: var(--of-progress-indicator-mobile-padding-block-end, 15px);
+      padding-block-start: var(--of-progress-indicator-mobile-padding-block-start, 15px);
+      padding-inline-end: var(--of-progress-indicator-mobile-padding-inline-end, 15px);
+      padding-inline-start: var(--of-progress-indicator-mobile-padding-inline-start, 15px);
+
+      // include for backwards compatibility reasons
+      color: var(--of-progress-indicator-mobile-header-color, var(--of-color-fg, inherit));
+      font-family: var(
+        --of-progress-indicator-mobile-header-font-family,
+        var(--utrecht-document-font-family, var(--of-typography-sans-serif-font-family, inherit))
+      );
+      font-size: var(--of-progress-indicator-mobile-header-font-size, 1.125rem);
+      line-height: var(--of-progress-indicator-mobile-header-line-height, 1.1333);
+
+      .fa-icon {
+        display: block;
+        flex-shrink: 0;
+        flex-basis: calc(2 * var(--of-progress-indicator-padding-mobile-inline-start, 15px));
+        text-align: center;
+      }
+    }
+
+    // TODO: provide design tokens?
+    @include bem.element('form-title') {
+      @include ellipsis;
+      font-weight: bold;
     }
 
     // Hide by default on mobile

From 3b31fbb058bc7aafc85dda28783998241a278049 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 16:30:42 +0100
Subject: [PATCH 09/21] :recycle: [#36] Ensure that progress indicator is
 sticky on desktop

When scrolling the main content, the progress indicator should stay
in view.
---
 src/scss/components/_progress-indicator.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index 51c9c9422..2913e035b 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -25,6 +25,12 @@
 .openforms-progress-indicator {
   @include card.card('progress-indicator');
 
+  position: sticky;
+  inset-block-start: var(
+    --of-progress-indicator-inset-block-start,
+    var(--of-app-grid-column-gap, 20px)
+  );
+
   // Do not display the toggle button on non-mobile devices
   @include bem.element('mobile-header') {
     display: none;

From e0ab43e048040d17893f8313d5e820a32e209f7b Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 24 Nov 2023 17:07:11 +0100
Subject: [PATCH 10/21] :recycle: [#36] Set up styling for scrollable progress
 indicator on mobile

This is quite involved as there are some styling edge cases to consider:

* form title that overflows and is truncated with ellipsis - if you're not
  careful, this can cause a horizontal scrollbar
* form title that is long and the main content being scrollable - this can also
  cause a small horizontal scrollbar due to the ellipsis situation
* the progress indicator content itself should be scrollable, independent from
  the main content
* possibly there is an external header/footer that may take up some vertical
  space, which limits the amount of vertical space available for our progress
  indicator

The implementation now passes a ref to the button element in React, which
allows us to calculate the height of the button (our 'menu' bar) AND its offset
to the top of the page, in case there is another external UI element taking
space. We then allocate a maximum block size (= vertical space) as the
dynamic viewport block (100dvb, dynamic taking into account the address bar
that can dissapear on actual mobile devices) minues the vertical/block spacing
reserved for the button and possible third party content.

When scrolling down, our button may overlay the third party content (due to the
position: sticky) and this frees up a little bit of space below the progress
indicator - this is deliberate. Users are allowed to interact with buttons
below it and simplifies us having to track more things in React.
---
 src/components/App.stories.js                 |  43 +++++-
 src/components/Card.js                        |   3 +-
 .../ProgressIndicator/MobileButton.js         |  50 ++++---
 src/components/ProgressIndicator/index.js     |  24 +++-
 src/scss/components/_app.scss                 |   3 +-
 src/scss/components/_progress-indicator.scss  | 123 +++++++-----------
 6 files changed, 134 insertions(+), 112 deletions(-)

diff --git a/src/components/App.stories.js b/src/components/App.stories.js
index ddee73b70..714855a69 100644
--- a/src/components/App.stories.js
+++ b/src/components/App.stories.js
@@ -56,6 +56,7 @@ export default {
         completed: false,
       },
     ],
+    showExternalHeader: false,
   },
   argTypes: {
     submissionAllowed: {
@@ -83,7 +84,7 @@ export default {
   },
 };
 
-const Wrapper = ({form}) => {
+const Wrapper = ({form, showExternalHeader}) => {
   const routes = [
     {
       path: '*',
@@ -97,6 +98,9 @@ const Wrapper = ({form}) => {
   });
   return (
     <FormContext.Provider value={form}>
+      {showExternalHeader && (
+        <header style={{padding: '10px', textAlign: 'center'}}>External header</header>
+      )}
       <RouterProvider router={router} />
     </FormContext.Provider>
   );
@@ -111,7 +115,7 @@ const render = args => {
     hideNonApplicableSteps: args['hideNonApplicableSteps'],
     steps: args['steps'],
   });
-  return <Wrapper form={form} />;
+  return <Wrapper form={form} showExternalHeader={args.showExternalHeader} />;
 };
 
 export const Default = {
@@ -210,6 +214,7 @@ export const ActiveSubmission = {
 export const SeveralStepsInMobileViewport = {
   render,
   args: {
+    showExternalHeader: true,
     name: 'A rather long form name that overflows on mobile',
     steps: [
       {
@@ -317,7 +322,7 @@ export const SeveralStepsInMobileViewport = {
         isApplicable: true,
       },
       {
-        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        uuid: '4d4767b6-a3a4-4519-a1d3-f81e15bf829c',
         slug: 'step-9',
         formDefinition: 'Step 9',
         index: 8,
@@ -326,11 +331,11 @@ export const SeveralStepsInMobileViewport = {
           saveText: {resolved: 'Save', value: ''},
           nextText: {resolved: 'Next', value: ''},
         },
-        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        url: `${BASE_URL}forms/mock/steps/4d4767b6-a3a4-4519-a1d3-f81e15bf829c`,
         isApplicable: true,
       },
       {
-        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        uuid: '9166d9b7-baa9-429a-a19e-c0c88f2fdaa8',
         slug: 'step-10',
         formDefinition: 'Step 10',
         index: 9,
@@ -339,7 +344,33 @@ export const SeveralStepsInMobileViewport = {
           saveText: {resolved: 'Save', value: ''},
           nextText: {resolved: 'Next', value: ''},
         },
-        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        url: `${BASE_URL}forms/mock/steps/9166d9b7-baa9-429a-a19e-c0c88f2fdaa8`,
+        isApplicable: true,
+      },
+      {
+        uuid: 'c5eb8263-39e7-4e8c-a6f4-77278f50ee52',
+        slug: 'step-11',
+        formDefinition: 'Step 11',
+        index: 10,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/c5eb8263-39e7-4e8c-a6f4-77278f50ee52`,
+        isApplicable: true,
+      },
+      {
+        uuid: '4f79f369-7aca-4346-9d91-5d5e628b7fb0',
+        slug: 'step-12',
+        formDefinition: 'Step 12',
+        index: 11,
+        literals: {
+          previousText: {resolved: 'Previous', value: ''},
+          saveText: {resolved: 'Save', value: ''},
+          nextText: {resolved: 'Next', value: ''},
+        },
+        url: `${BASE_URL}forms/mock/steps/4f79f369-7aca-4346-9d91-5d5e628b7fb0`,
         isApplicable: true,
       },
     ],
diff --git a/src/components/Card.js b/src/components/Card.js
index c50102581..6dfbeb28b 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -47,10 +47,11 @@ const Card = ({
   captionComponent,
   blockClassName = 'card',
   modifiers = [],
+  ...props
 }) => {
   const className = getBEMClassName(blockClassName, modifiers);
   return (
-    <div className={className}>
+    <div className={className} {...props}>
       {/* Emit header/title only if there is one */}
       {title ? (
         <CardTitle
diff --git a/src/components/ProgressIndicator/MobileButton.js b/src/components/ProgressIndicator/MobileButton.js
index e5e9d7caf..c1003711e 100644
--- a/src/components/ProgressIndicator/MobileButton.js
+++ b/src/components/ProgressIndicator/MobileButton.js
@@ -1,34 +1,32 @@
 import PropTypes from 'prop-types';
+import {forwardRef} from 'react';
 
 import FAIcon from 'components/FAIcon';
 
-const MobileButton = ({
-  ariaMobileIconLabel,
-  accessibleToggleStepsLabel,
-  formTitle,
-  expanded,
-  onExpandClick,
-}) => {
-  return (
-    <button
-      className="openforms-progress-indicator__mobile-header"
-      aria-pressed={expanded ? 'true' : 'false'}
-      onClick={onExpandClick}
-    >
-      <FAIcon
-        icon={expanded ? 'chevron-up' : 'chevron-down'}
-        modifiers={['normal']}
-        aria-label={ariaMobileIconLabel}
-      />
-      <span
-        className="openforms-progress-indicator__form-title"
-        aria-label={accessibleToggleStepsLabel}
+const MobileButton = forwardRef(
+  ({ariaMobileIconLabel, accessibleToggleStepsLabel, formTitle, expanded, onExpandClick}, ref) => {
+    return (
+      <button
+        ref={ref}
+        className="openforms-progress-indicator__mobile-header"
+        aria-pressed={expanded ? 'true' : 'false'}
+        onClick={onExpandClick}
       >
-        {formTitle}
-      </span>
-    </button>
-  );
-};
+        <FAIcon
+          icon={expanded ? 'chevron-up' : 'chevron-down'}
+          modifiers={['normal']}
+          aria-label={ariaMobileIconLabel}
+        />
+        <span
+          className="openforms-progress-indicator__form-title"
+          aria-label={accessibleToggleStepsLabel}
+        >
+          {formTitle}
+        </span>
+      </button>
+    );
+  }
+);
 
 MobileButton.propTypes = {
   ariaMobileIconLabel: PropTypes.string.isRequired,
diff --git a/src/components/ProgressIndicator/index.js b/src/components/ProgressIndicator/index.js
index b3c3b6e0c..fce1950a9 100644
--- a/src/components/ProgressIndicator/index.js
+++ b/src/components/ProgressIndicator/index.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {useLocation} from 'react-router-dom';
 
 import Caption from 'components/Caption';
@@ -18,10 +18,12 @@ const ProgressIndicator = ({
 }) => {
   const {pathname: currentPathname} = useLocation();
   const [expanded, setExpanded] = useState(false);
+  const [verticalSpaceUsed, setVerticalSpaceUsed] = useState(null);
+  const buttonRef = useRef(null);
 
   const modifiers = [];
-  if (!expanded) {
-    modifiers.push('mobile-collapsed');
+  if (expanded) {
+    modifiers.push('expanded');
   }
 
   // collapse the expanded progress indicator if nav occurred, see
@@ -34,9 +36,23 @@ const ProgressIndicator = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPathname]);
 
+  useLayoutEffect(() => {
+    if (buttonRef.current) {
+      const boundingBox = buttonRef.current.getBoundingClientRect();
+      // the offset from top + height of the element (including padding + borders)
+      setVerticalSpaceUsed(boundingBox.bottom);
+    }
+  }, [buttonRef, setVerticalSpaceUsed]);
+
+  const customProperties = verticalSpaceUsed
+    ? {
+        '--_of-progress-indicator-nav-mobile-inset-block-start': `${verticalSpaceUsed}px`,
+      }
+    : undefined;
   return (
-    <Card blockClassName="progress-indicator" modifiers={modifiers}>
+    <Card blockClassName="progress-indicator" modifiers={modifiers} style={customProperties}>
       <MobileButton
+        ref={buttonRef}
         ariaMobileIconLabel={ariaMobileIconLabel}
         accessibleToggleStepsLabel={accessibleToggleStepsLabel}
         formTitle={formTitle}
diff --git a/src/scss/components/_app.scss b/src/scss/components/_app.scss
index 863af75db..11a313169 100644
--- a/src/scss/components/_app.scss
+++ b/src/scss/components/_app.scss
@@ -50,7 +50,8 @@
 
   // Responsive styles - switch to a column layout and re-order elements.
   @include mobile-only {
-    grid-template-columns: 1fr;
+    // https://stackoverflow.com/a/63609468 just 1fr doesn't work, but minmax does?
+    grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       'progress-indicator'
       'lang-switcher'
diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index 2913e035b..f99117589 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -37,6 +37,7 @@
   }
 
   @include bem.element('nav') {
+    // box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: var(--of-progress-indicator-nav-gap, 20px);
@@ -45,6 +46,8 @@
   /**
    * Responsive styles, mobile viewports.
    *
+   * The default state is collapsed, for the expanded state, see the expanded modifier
+   * styles.
    */
   @include mobile-only {
     // remove any padding from the container element - instead, we apply mobile padding
@@ -54,6 +57,10 @@
     --of-progress-indicator-padding-inline-end: 0;
     --of-progress-indicator-padding-inline-start: 0;
 
+    /**
+     * The mobile-header button is visible on mobile, and while it is a button for
+     * acessibility, it should not look like one.
+     */
     @include bem.element('mobile-header') {
       // reset base/default user agent styles
       all: unset;
@@ -64,9 +71,8 @@
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      gap: var(--of-progress-indicator-mobile-header-gap, 0);
+      gap: var(--of-progress-indicator-mobile-header-gap, 0px);
       inline-size: 100%;
-      max-inline-size: var(--of-progress-indicator-mobile-header-max-inline-size, 100vw);
 
       padding-block-end: var(--of-progress-indicator-mobile-padding-block-end, 15px);
       padding-block-start: var(--of-progress-indicator-mobile-padding-block-start, 15px);
@@ -85,7 +91,7 @@
       .fa-icon {
         display: block;
         flex-shrink: 0;
-        flex-basis: calc(2 * var(--of-progress-indicator-padding-mobile-inline-start, 15px));
+        flex-basis: var(--of-progress-indicator-icon-flex-basis, 30px);
         text-align: center;
       }
     }
@@ -100,80 +106,49 @@
     @include bem.element('nav') {
       display: none;
     }
+
+    // Bit of a BEM violation, but the captions are due a refactor to NL DS at some
+    // point too.
+    @include nested('caption') {
+      display: none;
+    }
+
+    /**
+     * Appearance for the expanded variant.
+     */
+    @include bem.modifier('expanded') {
+      @include bem.element('nav') {
+        --of-list-gap: var(--of-progress-indicator-nav-mobile-list-gap, 15px);
+
+        box-shadow: var(--of-progress-indicator-mobile-box-shadow);
+        box-sizing: border-box;
+
+        display: block;
+        // absolute positioning to not push the content below down, since it must be
+        // an overlay.
+        // TODO: there are future CSS features that make anchoring elements to other
+        // elements much developer-friendlier without requiring 'magic numbers'.
+        position: absolute;
+        background: var(--of-progress-indicator-background-color, var(--of-color-bg));
+
+        padding-block-end: var(--of-progress-indicator-nav-mobile-padding-block-end, 15px);
+        padding-block-start: var(--of-progress-indicator-nav-mobile-padding-block-start, 15px);
+        padding-inline-end: var(--of-progress-indicator-nav-mobile-padding-inline-end, 15px);
+        padding-inline-start: var(--of-progress-indicator-nav-mobile-padding-inline-start, 30px);
+
+        // inset-block-start: var(--_of-progress-indicator-nav-mobile-inset-block-start);
+        z-index: 1;
+        inline-size: 100%;
+
+        // use the entire viewport minus the block space (vertical) used by the button and potential
+        // third party elements above
+        max-block-size: calc(100dvb - var(--_of-progress-indicator-nav-mobile-inset-block-start));
+        overflow-y: auto;
+      }
+    }
   }
 }
 
-// .#{prefix('progress-indicator')} {
-
-//   @include bem.element('mobile-header') {
-//     @include body;
-//     @include body--big;
-//     @include margin(-$grid-container-margin, $properties: margin-left);
-
-//     // style for replacing div with a button for accessibility
-//     background: none;
-//     border: none;
-//     padding: 0;
-//     cursor: pointer;
-//     width: calc(100% + $grid-container-margin);
-
-//     @include show-on-mobile(flex);
-
-//     align-items: center;
-
-//     .fa-icon {
-//       display: block;
-//       flex-shrink: 0;
-//       flex-basis: $grid-container-margin * 2;
-//       text-align: center;
-//     }
-//   }
-
-//   @include bem.element('form-title') {
-//     @include ellipsis;
-//     font-weight: bold;
-//   }
-
-//   // mobile styling for the progress indicator
-//   @include mobile-only {
-//     @include margin($grid-container-margin, $properties: (padding-top, padding-bottom));
-//     box-shadow: var(--of-progress-indicator-mobile-box-shadow);
-//     // otherwise the bar is too short, and setting a width creates a horizontal scrollbar
-//     width: unset;
-
-//     // style layout
-//     @at-root .#{prefix('layout__row')} & {
-//       @include margin(
-//         calc(-1 * var(--of-progress-indicator-mobile-margin)),
-//         $properties: (margin-left, margin-right)
-//       );
-//     }
-
-//     @include nested('caption') {
-//       @include margin(true, $properties: margin-top);
-//       @include margin($grid-container-margin, $properties: margin-left);
-
-//       @include mobile-only {
-//         display: none;
-//       }
-//     }
-
-//     @include nested('list') {
-//       @include margin($grid-container-margin, $properties: margin-left);
-//     }
-
-//     @include bem.modifier('mobile-collapsed') {
-//       @include nested('caption') {
-//         display: none;
-//       }
-
-//       @include nested('list') {
-//         display: none;
-//       }
-//     }
-//   }
-// }
-
 // TODO: parametrize with design tokens
 .openforms-progress-indicator-item {
   display: flex;

From c79d8563a710815fa330f9daf6f55f0b40510a89 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 27 Nov 2023 14:53:38 +0100
Subject: [PATCH 11/21] :recycle: [#36] Tweak spacing of language buttons

On mobile, apply some padding to push the language buttons down.
---
 src/scss/components/_language-selection.scss | 24 ++++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/scss/components/_language-selection.scss b/src/scss/components/_language-selection.scss
index 2c4c398e2..6f947db42 100644
--- a/src/scss/components/_language-selection.scss
+++ b/src/scss/components/_language-selection.scss
@@ -17,15 +17,25 @@
     }
   }
 
-  .openforms-button {
-    padding: 0;
-  }
-
   // if we are not rendering in a designated portal node, ensure it's aligned to the
   // right
   @at-root .openforms-app__language-switcher & {
+    --utrecht-button-group-padding-block-end: var(--of-language-selection-in-app-padding-block-end);
+    --utrecht-button-group-padding-block-start: var(
+      --of-language-selection-in-app-padding-block-start
+    );
     margin-inline-start: auto;
-    margin-block-end: var(--of-language-selection-in-app-margin-block-end);
+
+    @include mobile-only {
+      --utrecht-button-group-padding-block-end: var(
+        --of-language-selection-in-app-mobile-padding-block-end,
+        var(--of-language-selection-in-app-padding-block-end)
+      );
+      --utrecht-button-group-padding-block-start: var(
+        --of-language-selection-in-app-mobile-padding-block-start,
+        var(--of-language-selection-in-app-padding-block-start)
+      );
+    }
   }
 }
 
@@ -36,3 +46,7 @@
     }
   }
 }
+
+.openforms-theme {
+  --of-language-selection-in-app-mobile-padding-block-start: 15px;
+}

From 751c23376ab21687a2bf871bf94423ab6448c744 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 27 Nov 2023 15:01:59 +0100
Subject: [PATCH 12/21] :art: Properly clean up the localStorage globally

Would be really nice if storybook adds some before/after render hooks
instead, so that we could do cleanup per story instead of on a global
basis.
---
 .storybook/decorators.js                  | 21 ++++++++++++++++++++-
 .storybook/preview.js                     | 13 +++++++++++--
 src/components/App.stories.js             | 10 ----------
 src/components/ProgressIndicator/index.js |  6 +++++-
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/.storybook/decorators.js b/.storybook/decorators.js
index 734c13074..97da30f9d 100644
--- a/.storybook/decorators.js
+++ b/.storybook/decorators.js
@@ -9,10 +9,29 @@ export const withClearSessionStorage = Story => {
   return <Story />;
 };
 
+/**
+ * Submission ID is persisted in the localStorage once a submission is started, and we
+ * need to clear it for stories.
+ *
+ * The storage key is the form UUID, the default from api-mocks/form is
+ * 'e450890a-4166-410e-8d64-0a54ad30ba01'. You can specify another key via parameters
+ * or args.
+ */
+export const withClearSubmissionLocalStorage = (Story, {args, parameters}) => {
+  const formId =
+    args?.formId ?? parameters?.localStorage?.formId ?? 'e450890a-4166-410e-8d64-0a54ad30ba01';
+  window.localStorage.removeItem(formId);
+  return <Story />;
+};
+
 /**
  * This decorator wraps stories so that they are inside a container with the class name "utrecht-document". This is
  * needed so that components inherit the right font.
  */
 export const utrechtDocumentDecorator = Story => {
-  return (<div className="utrecht-document utrecht-document--surface" ><Story/></div>);
+  return (
+    <div className="utrecht-document utrecht-document--surface">
+      <Story />
+    </div>
+  );
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
index a86a07af9..ec3b30831 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -17,7 +17,11 @@ import 'styles.scss';
 import OpenFormsModule from 'formio/module';
 import OFLibrary from 'formio/templates';
 
-import {utrechtDocumentDecorator, withClearSessionStorage} from './decorators';
+import {
+  utrechtDocumentDecorator,
+  withClearSessionStorage,
+  withClearSubmissionLocalStorage,
+} from './decorators';
 import {reactIntl} from './reactIntl.js';
 
 initialize({
@@ -35,7 +39,12 @@ Formio.use(OpenFormsModule);
 Templates.current = OFLibrary;
 
 export default {
-  decorators: [mswDecorator, withClearSessionStorage, utrechtDocumentDecorator],
+  decorators: [
+    mswDecorator,
+    withClearSessionStorage,
+    withClearSubmissionLocalStorage,
+    utrechtDocumentDecorator,
+  ],
   globals: {
     locale: reactIntl.defaultLocale,
     locales: {
diff --git a/src/components/App.stories.js b/src/components/App.stories.js
index 714855a69..3c50e8e9f 100644
--- a/src/components/App.stories.js
+++ b/src/components/App.stories.js
@@ -155,16 +155,6 @@ export const TranslationDisabled = {
 export const ActiveSubmission = {
   ...Default,
   name: 'Active submission',
-  decorators: [
-    ...Default.decorators,
-    // remove the window.localStorage entry, UUID value is from `api-mocks/forms.js`.
-    // it gets set because of the play function which starts a submission.
-    Story => {
-      const key = 'e450890a-4166-410e-8d64-0a54ad30ba01';
-      window.localStorage.removeItem(key);
-      return <Story />;
-    },
-  ],
   args: {
     steps: [
       {
diff --git a/src/components/ProgressIndicator/index.js b/src/components/ProgressIndicator/index.js
index fce1950a9..bb87195d2 100644
--- a/src/components/ProgressIndicator/index.js
+++ b/src/components/ProgressIndicator/index.js
@@ -37,11 +37,15 @@ const ProgressIndicator = ({
   }, [currentPathname]);
 
   useLayoutEffect(() => {
+    let isMounted = true;
     if (buttonRef.current) {
       const boundingBox = buttonRef.current.getBoundingClientRect();
       // the offset from top + height of the element (including padding + borders)
-      setVerticalSpaceUsed(boundingBox.bottom);
+      isMounted && setVerticalSpaceUsed(boundingBox.bottom);
     }
+    return () => {
+      isMounted = false;
+    };
   }, [buttonRef, setVerticalSpaceUsed]);
 
   const customProperties = verticalSpaceUsed

From 58e122932293a94ab6be089b584fe50c41e75f67 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 27 Nov 2023 15:32:07 +0100
Subject: [PATCH 13/21] :recycle: [#36] Update/clean up design tokens

---
 design-tokens                                | 2 +-
 src/scss/components/_app.scss                | 2 +-
 src/scss/components/_language-selection.scss | 4 ----
 src/scss/components/_progress-indicator.scss | 2 +-
 4 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/design-tokens b/design-tokens
index 499476b9f..dbbcac923 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit 499476b9f1d39833ad2850cade0e693bc4637de4
+Subproject commit dbbcac923e5279e571f265712f0d07f4f114609d
diff --git a/src/scss/components/_app.scss b/src/scss/components/_app.scss
index 11a313169..3fbf14a25 100644
--- a/src/scss/components/_app.scss
+++ b/src/scss/components/_app.scss
@@ -72,7 +72,7 @@
       // in view, we need to apply the positioning to this element rather than
       // .openforms-progress-indicator
       position: sticky;
-      inset-block-start: var(--of-app-mobile-progress-indicator-inset-block-start, 0px);
+      inset-block-start: var(--of-app-progress-indicator-mobile-inset-block-start, 0);
       z-index: 1;
     }
   }
diff --git a/src/scss/components/_language-selection.scss b/src/scss/components/_language-selection.scss
index 6f947db42..9783e30d1 100644
--- a/src/scss/components/_language-selection.scss
+++ b/src/scss/components/_language-selection.scss
@@ -46,7 +46,3 @@
     }
   }
 }
-
-.openforms-theme {
-  --of-language-selection-in-app-mobile-padding-block-start: 15px;
-}
diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index f99117589..5fb8817d5 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -91,7 +91,7 @@
       .fa-icon {
         display: block;
         flex-shrink: 0;
-        flex-basis: var(--of-progress-indicator-icon-flex-basis, 30px);
+        flex-basis: var(--of-progress-indicator-mobile-header-icon-flex-basis, 30px);
         text-align: center;
       }
     }

From 9f96dc2468402e8a810d02f79d8a833f8aaf37ce Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 27 Nov 2023 16:17:34 +0100
Subject: [PATCH 14/21] :pencil: [#36] Clean up FormDisplay usage and document
 upgrade instructions

---
 src/Context.js                                |  1 -
 src/components/Form.js                        |  5 +-
 .../CreateAppointment/CreateAppointment.js    |  9 +-
 src/upgrade-notes.mdx                         | 88 +++++++++++++++++++
 4 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 src/upgrade-notes.mdx

diff --git a/src/Context.js b/src/Context.js
index 1c59fa651..74ac0d719 100644
--- a/src/Context.js
+++ b/src/Context.js
@@ -31,7 +31,6 @@ const ConfigContext = React.createContext({
   requiredFieldsWithAsterisk: true,
   displayComponents: {
     app: null,
-    form: null,
     progressIndicator: null,
     loginOptions: null,
   },
diff --git a/src/components/Form.js b/src/components/Form.js
index 995d18a92..3ee7be829 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -432,10 +432,7 @@ const Form = () => {
   );
 
   // render the form step if there's an active submission (and no summary)
-  const FormDisplayComponent = config?.displayComponents?.form ?? FormDisplay;
-  return (
-    <FormDisplayComponent progressIndicator={progressIndicator}>{router}</FormDisplayComponent>
-  );
+  return <FormDisplay progressIndicator={progressIndicator}>{router}</FormDisplay>;
 };
 
 Form.propTypes = {};
diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.js b/src/components/appointments/CreateAppointment/CreateAppointment.js
index 093f63aa3..a6c071d7f 100644
--- a/src/components/appointments/CreateAppointment/CreateAppointment.js
+++ b/src/components/appointments/CreateAppointment/CreateAppointment.js
@@ -1,7 +1,6 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {Outlet, useLocation} from 'react-router-dom';
 
-import {ConfigContext} from 'Context';
 import Card from 'components/Card';
 import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormDisplay from 'components/FormDisplay';
@@ -39,8 +38,6 @@ const CreateAppointment = () => {
 
   const [sessionExpired, expiryDate, resetSession] = useSessionTimeout(clearSubmission);
 
-  const config = useContext(ConfigContext);
-  const FormDisplayComponent = config?.displayComponents?.form ?? FormDisplay;
   const supportsMultipleProducts = form?.appointmentOptions.supportsMultipleProducts ?? false;
 
   const currentStep =
@@ -63,7 +60,7 @@ const CreateAppointment = () => {
         submission={submission}
         resetSession={reset}
       >
-        <FormDisplayComponent progressIndicator={progressIndicator}>
+        <FormDisplay progressIndicator={progressIndicator}>
           <Wrapper sessionExpired={sessionExpired} title={form.name}>
             <ErrorBoundary>
               {isLoading ? (
@@ -77,7 +74,7 @@ const CreateAppointment = () => {
               )}
             </ErrorBoundary>
           </Wrapper>
-        </FormDisplayComponent>
+        </FormDisplay>
       </CreateAppointmentState>
     </AppointmentConfigContext.Provider>
   );
diff --git a/src/upgrade-notes.mdx b/src/upgrade-notes.mdx
new file mode 100644
index 000000000..5d089da9e
--- /dev/null
+++ b/src/upgrade-notes.mdx
@@ -0,0 +1,88 @@
+import {Meta} from '@storybook/blocks';
+
+<Meta title="Developers / Upgrade notes / 2.1.0" />
+
+# Upgrading from 2.0.x to 2.1.x
+
+In the Open Forms SDK 2.1 we've refactor the app scaffolding to simplify the CSS and markup used,
+fix a number of bugs and add the ability to tweak the appearance through design tokens.
+
+This mostly affects used-to-be private API, but if you have or had custom CSS overrides for this,
+they are likely broken. Users that do not override the default Open Forms theme are not affected.
+
+## Summary of changes
+
+- The `.openforms-layout*` classes, markup and associated design tokens are gone
+- The outer container is now the `AppDisplay` component, with the `.openforms-app` class name and
+  associated `--of-app-*` design tokens. We now place elements using CSS grid to appropriately
+  target styling for mobile devices.
+- `FormDisplay` is now a thin wrapper around `AppDisplay` and can no longer be overridden. This
+  display configuration is still considered experimental.
+
+## Detailed changes and how to upgrade
+
+### `.utrecht-document` class and design tokens
+
+We do not create an element with the `utrecht-document` and `utrecht-document--surface` class names,
+but they are expected by the SDK. If you are embedding forms on your CMS/website, please make sure a
+parent of the form root has these class names.
+
+You can then use the following design tokens for basic styles:
+
+- `--utrecht-document-background-color`
+- `--utrecht-document-color`
+- `--utrecht-document-font-family`
+- `--utrecht-document-font-size`
+- `--utrecht-document-font-weight`
+- `--utrecht-document-line-height`
+
+These properties are inherited when not explicitly set.
+
+### App component
+
+The app component is the outer shell that creates the layout of the form body, progress indicator
+(sidebar on desktop, dropdown menu on mobile) and the language selection buttons.
+
+Currently, we have set default values for the design tokens, but they will be removed in SDK 3.0.
+
+Relevant design tokens:
+
+- `--of-app-grid-column-gap`: spacing between main content and progress indicator, on devices larger
+  than mobile.
+
+**Mobile**
+
+- `--of-app-mobile-grid-row-gap`: vertical spacing between components
+- `--of-app-mobile-padding-{block,inline}-{end,start}`: padding between content and device edges
+- `--of-app-progress-indicator-mobile-margin-inline-{end,start}`: margin for the progress indicator.
+  Setting this to the negative inline padding values above will stretch the button across the full
+  width of the screen.
+- `--of-app-progress-indicator-mobile-inset-block-start`: offset of the sticky toggle button/header
+  to the top of the screen - set to a non-zero value if your own menu should always visible in the
+  screen.
+
+### Card component
+
+The card component is used to wrap the main body content (the form fields, some modals...). It used
+to have hardcoded colors/paddings but they are now customizable through design tokens.
+
+Currently, we have set default values for the design tokens, but they may be removed in SDK 3.0.
+
+Relevant design tokens:
+
+- `--of-card-background-color`
+- `--of-card-padding-block-end`
+- `--of-card-padding-block-start`
+- `--of-card-padding-inline-end`
+- `--of-card-padding-inline-start`
+
+### Language-selection
+
+If a form supports multiple languages and you don't render the language selection into a particular
+node (provided at SDK init time), then you can control the spacing of the element using the
+following design tokens:
+
+- `--of-language-selection-in-app-padding-block-end`
+- `--of-language-selection-in-app-padding-block-start`
+- `--of-language-selection-in-app-mobile-padding-block-end`
+- `--of-language-selection-in-app-mobile-padding-block-start`

From 8bf751e0ba04b1f50452e33d99fd148815422181 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 27 Nov 2023 17:01:06 +0100
Subject: [PATCH 15/21] :recycle: [#36] Restore ability to set vertical space
 above main content

---
 design-tokens                 |  2 +-
 src/scss/components/_app.scss | 13 +++++++++++++
 src/upgrade-notes.mdx         |  3 +++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/design-tokens b/design-tokens
index dbbcac923..a9b6a57a2 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit dbbcac923e5279e571f265712f0d07f4f114609d
+Subproject commit a9b6a57a2f444c251eb15a3f33fdc5708175a750
diff --git a/src/scss/components/_app.scss b/src/scss/components/_app.scss
index 3fbf14a25..9cca5bc83 100644
--- a/src/scss/components/_app.scss
+++ b/src/scss/components/_app.scss
@@ -37,6 +37,8 @@
 
   @include bem.element('body') {
     grid-area: body;
+    padding-block-end: var(--of-app-body-padding-block-end, 0);
+    padding-block-start: var(--of-app-body-padding-block-start, 0);
   }
 
   @include bem.element('progress-indicator') {
@@ -64,6 +66,17 @@
     padding-inline-end: var(--of-app-mobile-padding-inline-end, 15px);
     padding-inline-start: var(--of-app-mobile-padding-inline-start, 15px);
 
+    @include bem.element('body') {
+      padding-block-end: var(
+        --of-app-body-mobile-padding-block-end,
+        var(--of-app-body-padding-block-end, 0)
+      );
+      padding-block-start: var(
+        --of-app-body-mobile-padding-block-start,
+        var(--of-app-body-padding-block-start, 0)
+      );
+    }
+
     @include bem.element('progress-indicator') {
       margin-inline-end: var(--of-app-progress-indicator-mobile-margin-inline-end, -15px);
       margin-inline-start: var(--of-app-progress-indicator-mobile-margin-inline-start, -15px);
diff --git a/src/upgrade-notes.mdx b/src/upgrade-notes.mdx
index 5d089da9e..abd11ec6c 100644
--- a/src/upgrade-notes.mdx
+++ b/src/upgrade-notes.mdx
@@ -47,11 +47,14 @@ Currently, we have set default values for the design tokens, but they will be re
 
 Relevant design tokens:
 
+- `--of-app-body-padding-block-{end,start}`: additional vertical spacing for the main content
 - `--of-app-grid-column-gap`: spacing between main content and progress indicator, on devices larger
   than mobile.
 
 **Mobile**
 
+- `--of-app-body-mobile-padding-block-{end,start}`: vertical spacing between main content and
+  progress indicator/debug information
 - `--of-app-mobile-grid-row-gap`: vertical spacing between components
 - `--of-app-mobile-padding-{block,inline}-{end,start}`: padding between content and device edges
 - `--of-app-progress-indicator-mobile-margin-inline-{end,start}`: margin for the progress indicator.

From bb3194deec721dceb7f681927d11e226ba855948 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 27 Nov 2023 17:11:04 +0100
Subject: [PATCH 16/21] :green_heart: [#36] Fix incorrect test

The fixed steps being added don't need to be falsy, they
need to not be added at all.
---
 src/components/ProgressIndicator/utils.spec.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/ProgressIndicator/utils.spec.js b/src/components/ProgressIndicator/utils.spec.js
index 74185c6b9..2b85a29d4 100644
--- a/src/components/ProgressIndicator/utils.spec.js
+++ b/src/components/ProgressIndicator/utils.spec.js
@@ -51,7 +51,7 @@ describe('Transforming form steps and injecting fixed steps', () => {
       false
     );
 
-    expect(stepsToRender.length).toEqual(4);
+    expect(stepsToRender.length).toEqual(2);
 
     expect(stepsToRender[0].to).toEqual('startpagina');
 
@@ -61,8 +61,5 @@ describe('Transforming form steps and injecting fixed steps', () => {
     expect(stepsToRender[1].isApplicable).toEqual(true);
     expect(stepsToRender[1].isCurrent).toEqual(true);
     expect(stepsToRender[1].canNavigateTo).toEqual(true);
-
-    expect(stepsToRender[2]).toBeFalsy();
-    expect(stepsToRender[3]).toBeFalsy();
   });
 });

From cf27bea2a7f464fd31b3d233326fb836268a1fb8 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 27 Nov 2023 17:44:38 +0100
Subject: [PATCH 17/21] :lipstick: [#36] Remove z-index

The explicit z-index creates a stacking context which puts it on top of
the date picker in appointments. Not specifying the z-index seems to
work equally well.
---
 src/scss/components/_app.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scss/components/_app.scss b/src/scss/components/_app.scss
index 9cca5bc83..1e6fc0f52 100644
--- a/src/scss/components/_app.scss
+++ b/src/scss/components/_app.scss
@@ -86,7 +86,6 @@
       // .openforms-progress-indicator
       position: sticky;
       inset-block-start: var(--of-app-progress-indicator-mobile-inset-block-start, 0);
-      z-index: 1;
     }
   }
 }

From 4eac0e6d406d4198cefdcbf6460c16b7405acaad Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 29 Nov 2023 09:02:50 +0100
Subject: [PATCH 18/21] :ok_hand: [#36] PR feedback

Something went wrong with the previous version of design tokens,
so I've redone them. Even the git reflog couldn't help :(
---
 design-tokens                                | 2 +-
 src/scss/components/_app.scss                | 2 +-
 src/scss/components/_progress-indicator.scss | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/design-tokens b/design-tokens
index a9b6a57a2..81467e1e6 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit a9b6a57a2f444c251eb15a3f33fdc5708175a750
+Subproject commit 81467e1e69f38b6ef53655e45ecf779fdc5bedb9
diff --git a/src/scss/components/_app.scss b/src/scss/components/_app.scss
index 1e6fc0f52..5cc1443ce 100644
--- a/src/scss/components/_app.scss
+++ b/src/scss/components/_app.scss
@@ -73,7 +73,7 @@
       );
       padding-block-start: var(
         --of-app-body-mobile-padding-block-start,
-        var(--of-app-body-padding-block-start, 0)
+        var(--of-app-body-padding-block-start, 15px)
       );
     }
 
diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index 5fb8817d5..1153f98d2 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -37,7 +37,6 @@
   }
 
   @include bem.element('nav') {
-    // box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: var(--of-progress-indicator-nav-gap, 20px);
@@ -136,7 +135,6 @@
         padding-inline-end: var(--of-progress-indicator-nav-mobile-padding-inline-end, 15px);
         padding-inline-start: var(--of-progress-indicator-nav-mobile-padding-inline-start, 30px);
 
-        // inset-block-start: var(--_of-progress-indicator-nav-mobile-inset-block-start);
         z-index: 1;
         inline-size: 100%;
 

From 246f90bdcd048eaafef74b394b1749ff4bb92234 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 29 Nov 2023 09:48:32 +0100
Subject: [PATCH 19/21] :coffin: [#36] We no longer have a progress indicator
 display component

On request we can bring it back, but currently it doesn't seem that
anyone makes use of this mechanism.
---
 src/Context.js                                           | 1 -
 .../CreateAppointment/AppointmentProgress.js             | 9 ++-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/Context.js b/src/Context.js
index 74ac0d719..9bd99b470 100644
--- a/src/Context.js
+++ b/src/Context.js
@@ -31,7 +31,6 @@ const ConfigContext = React.createContext({
   requiredFieldsWithAsterisk: true,
   displayComponents: {
     app: null,
-    progressIndicator: null,
     loginOptions: null,
   },
   debug: DEBUG,
diff --git a/src/components/appointments/CreateAppointment/AppointmentProgress.js b/src/components/appointments/CreateAppointment/AppointmentProgress.js
index 175d3aebf..f4b909c7c 100644
--- a/src/components/appointments/CreateAppointment/AppointmentProgress.js
+++ b/src/components/appointments/CreateAppointment/AppointmentProgress.js
@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
+import React from 'react';
 import {useIntl} from 'react-intl';
 import {useLocation} from 'react-router-dom';
 
-import {ConfigContext} from 'Context';
 import ProgressIndicator from 'components/ProgressIndicator';
 import {PI_TITLE, STEP_LABELS} from 'components/constants';
 import {checkMatchesPath} from 'components/utils/routers';
@@ -12,7 +11,6 @@ import {useCreateAppointmentContext} from './CreateAppointmentState';
 import {APPOINTMENT_STEPS, APPOINTMENT_STEP_PATHS} from './routes';
 
 const AppointmentProgress = ({title, currentStep}) => {
-  const config = useContext(ConfigContext);
   const {submission, submittedSteps} = useCreateAppointmentContext();
   const intl = useIntl();
   const {pathname: currentPathname} = useLocation();
@@ -87,11 +85,8 @@ const AppointmentProgress = ({title, currentStep}) => {
     },
     {title, activeStepTitle}
   );
-
-  const ProgressIndicatorComponent =
-    config?.displayComponents?.progressIndicator ?? ProgressIndicator;
   return (
-    <ProgressIndicatorComponent
+    <ProgressIndicator
       title={PI_TITLE}
       formTitle={title}
       steps={finalSteps}

From 1dbd9647538ed14236acdb7d198bd7382bff7672 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 29 Nov 2023 09:58:17 +0100
Subject: [PATCH 20/21] :recycle: [#36] Fix the progress indicator
 overview/confirmation step state

The overview should be navigable once all the preceding steps are
completed, rather than always rendering a placeholder.
---
 .../appointments/CreateAppointment/AppointmentProgress.js | 4 +++-
 .../CreateAppointment/CreateAppointment.stories.js        | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/appointments/CreateAppointment/AppointmentProgress.js b/src/components/appointments/CreateAppointment/AppointmentProgress.js
index f4b909c7c..764773790 100644
--- a/src/components/appointments/CreateAppointment/AppointmentProgress.js
+++ b/src/components/appointments/CreateAppointment/AppointmentProgress.js
@@ -53,13 +53,15 @@ const AppointmentProgress = ({title, currentStep}) => {
       isCompleted: isConfirmation,
       isApplicable: true,
       isCurrent: checkMatchesPath(currentPathname, 'overzicht'),
-      canNavigateTo: false,
+      canNavigateTo: steps.every(step => step.isCompleted),
     },
     {
       to: 'bevestiging',
       label: intl.formatMessage(STEP_LABELS.confirmation),
       isCompleted: isSubmissionComplete,
+      isApplicable: true,
       isCurrent: checkMatchesPath(currentPathname, 'bevestiging'),
+      canNavigateTo: isSubmissionComplete,
     },
   ];
 
diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.stories.js b/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
index 6109de94f..27671bafc 100644
--- a/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
+++ b/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
@@ -219,6 +219,13 @@ export const HappyFlow = {
           /I accept the privacy policy and consent to the processing of my personal data/
         )
       );
+
+      // test that the progress indicator displays all the expected links
+      await canvas.findByRole('link', {name: 'Product'});
+      await canvas.findByRole('link', {name: 'Afspraakdetails'});
+      await canvas.findByRole('link', {name: 'Contactgegevens'});
+      await canvas.findByRole('link', {name: 'Overzicht'});
+
       const submitButton = canvas.getByRole('button', {name: 'Confirm'});
       await waitFor(async () => {
         expect(submitButton).not.toHaveAttribute('aria-disabled', 'true');
@@ -233,6 +240,7 @@ export const HappyFlow = {
         },
         {timeout: 2000, interval: 200}
       );
+      await canvas.findByRole('link', {name: 'Bevestiging'});
     });
   },
 };

From adc91c240587a8dcb94c10223d83f0007ea2f54c Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 29 Nov 2023 11:14:09 +0100
Subject: [PATCH 21/21] :arrow_up: [#36] Upgrade to design tokens 0.51.0

---
 design-tokens | 2 +-
 package.json  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/design-tokens b/design-tokens
index 81467e1e6..326390434 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit 81467e1e69f38b6ef53655e45ecf779fdc5bedb9
+Subproject commit 326390434b5eb44bf82c3b1d2996b3a1012014eb
diff --git a/package.json b/package.json
index cf7715e1c..e723ce51b 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.50.0",
+    "@open-formulieren/design-tokens": "^0.51.0",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",