Rework the app/progress indicator markup and styling

.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>
+  );
 };

.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: {

src/Context.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {DEBUG} from 'utils';
+
 const FormContext = React.createContext({
   uuid: '',
   name: '',
@@ -29,10 +31,10 @@ const ConfigContext = React.createContext({
   requiredFieldsWithAsterisk: true,
   displayComponents: {
     app: null,
-    form: null,
     progressIndicator: null,
     loginOptions: null,
   },
+  debug: DEBUG,
 });
 ConfigContext.displayName = 'ConfigContext';
 

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;