Merge pull request #710 from open-formulieren/of-4543/add-summary-pro…

…gress

[OF#4543] Add summary progress to the formstep

package.json

@@ -30,7 +30,7 @@
  "@floating-ui/react": "^0.26.9",
  "@formio/protected-eval": "^1.2.1",
  "@fortawesome/fontawesome-free": "6.4.0",
- "@open-formulieren/design-tokens": "^0.52.1",
+ "@open-formulieren/design-tokens": "^0.53.0",
  "@open-formulieren/formiojs": "^4.13.14",
  "@open-formulieren/leaflet-tools": "^1.0.0",
  "@sentry/react": "^6.13.2",

src/Context.js

@@ -12,6 +12,7 @@ const FormContext = React.createContext({
  loginOptions: [],
  maintenanceMode: false,
  showProgressIndicator: true,
+ showSummaryProgress: false,
  submissionAllowed: 'yes',
  submissionStatementsConfiguration: [],
  literals: {

src/api-mocks/forms.js

@@ -15,6 +15,7 @@ export const FORM_DEFAULTS = {
  cosignLoginInfo: undefined,
  product: '',
  showProgressIndicator: true,
+ showSummaryProgress: false,
  maintenanceMode: false,
  active: true,
  submissionAllowed: 'yes',

src/components/FormStart/fixtures.js

@@ -31,6 +31,7 @@ export const testForm = {
  ],
  active: true,
  showProgressIndicator: true,
+ showSummaryProgress: false,
  authenticationBackends: ['digid'],
  product: null,
  slug: 'test-form',
@@ -84,6 +85,7 @@ export const testLoginForm = {
  ],
  active: true,
  showProgressIndicator: true,
+ showSummaryProgress: false,
  authenticationBackends: ['digid'],
  product: null,
  slug: 'test-form',

src/components/FormStep/FormStep.stories.js

@@ -266,3 +266,29 @@ export const EmailVerification = {
  expect(await within(modal).findByText(/The email address has now been verified/)).toBeVisible();
  },
 };
+
+export const SummaryProgressVisible = {
+ render,
+ args: {
+ form: buildForm({showSummaryProgress: true}),
+ submission: buildSubmission(),
+ },
+ play: async ({canvasElement}) => {
+ const canvas = within(canvasElement);
+
+ expect(await canvas.findByText(/Step 1 of 1/)).toBeVisible();
+ },
+};
+
+export const SummaryProgressNotVisible = {
+ render,
+ args: {
+ form: buildForm(),
+ submission: buildSubmission(),
+ },
+ play: async ({canvasElement}) => {
+ const canvas = within(canvasElement);
+
+ expect(canvas.queryByText(/Step 1 of 1/)).toBeNull();
+ },
+};

src/components/FormStep/index.js

@@ -40,6 +40,7 @@ import Card, {CardTitle} from 'components/Card';
 import {EmailVerificationModal} from 'components/EmailVerification';
 import FormStepDebug from 'components/FormStepDebug';
 import Loader from 'components/Loader';
+import SummaryProgress from 'components/SummaryProgress';
 import FormStepSaveModal from 'components/modals/FormStepSaveModal';
 import {
  eventTriggeredBySubmitButton,
@@ -830,11 +831,22 @@ const FormStep = ({form, submission, onLogicChecked, onStepSubmitted, onDestroyS
  };
 
  const isLoadingSomething = loading || isNavigating;
+
+ // Summary progress
+ const applicableSteps = submission.steps.filter(step => step.isApplicable === true);
+ const currentSubmissionStepIndex = applicableSteps.indexOf(submissionStep);
+
  return (
  <>
  <Card title={form.name} titleComponent="h1" modifiers={['mobile-header-hidden']}>
  {isLoadingSomething ? <Loader modifiers={['centered']} /> : null}
 
+ {!isLoadingSomething && form.showSummaryProgress && (
+ <SummaryProgress
+ current={currentSubmissionStepIndex + 1}
+ total={applicableSteps.length}
+ />
+ )}
  {!isLoadingSomething && configuration ? (
  <>
  <CardTitle

src/components/SummaryProgress/SummaryProgress.mdx

@@ -0,0 +1,21 @@
+import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks';
+
+import SummaryProgress from '.';
+import * as SummaryProgressStories from './SummaryProgress.stories';
+
+<Meta of={SummaryProgressStories} />
+
+# Summary progress
+
+The summary progress displays a short summary of the steps, including the number of the current step
+and the number of the total steps of the form. The total number of the steps is updated accordingly
+when there are logic rules which may define in a different way the steps through the form
+submission.
+
+## Form start
+
+On initial load, no submission is available yet, and the summary is not visible.
+
+## Props
+
+<ArgTypes of={SummaryProgress} />

src/components/SummaryProgress/SummaryProgress.stories.js

@@ -0,0 +1,15 @@
+import {withRouter} from 'storybook-addon-remix-react-router';
+
+import SummaryProgress from '.';
+
+export default {
+ title: 'Private API / SummaryProgress',
+ component: SummaryProgress,
+ decorators: [withRouter],
+ args: {
+ total: 2,
+ current: 1,
+ },
+};
+
+export const Default = {};

src/components/SummaryProgress/index.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+/**
+ * A single summary progress indicator.
+ *
+ * It shows the short progress summary, indicating the current step number and total amount of steps.
+ */
+export const SummaryProgress = ({current, total}) => {
+ return (
+ <div className="openforms-summary-progress">
+ <FormattedMessage
+ description="Summary progress label"
+ defaultMessage="Step {current} of {total}"
+ values={{
+ current: current,
+ total: total,
+ }}
+ />
+ </div>
+ );
+};
+
+SummaryProgress.propTypes = {
+ current: PropTypes.number.isRequired,
+ total: PropTypes.number.isRequired,
+};
+
+export default SummaryProgress;

src/i18n/compiled/en.json

@@ -1507,6 +1507,24 @@
  "value": "."
  }
  ],
+ "ijV760": [
+ {
+ "type": 0,
+ "value": "Step "
+ },
+ {
+ "type": 1,
+ "value": "current"
+ },
+ {
+ "type": 0,
+ "value": " of "
+ },
+ {
+ "type": 1,
+ "value": "total"
+ }
+ ],
  "iubnaw": [
  {
  "type": 0,

src/i18n/compiled/nl.json

@@ -1511,6 +1511,24 @@
  "value": "."
  }
  ],
+ "ijV760": [
+ {
+ "type": 0,
+ "value": "Step "
+ },
+ {
+ "type": 1,
+ "value": "current"
+ },
+ {
+ "type": 0,
+ "value": " of "
+ },
+ {
+ "type": 1,
+ "value": "total"
+ }
+ ],
  "iubnaw": [
  {
  "type": 0,

src/i18n/messages/en.json

@@ -754,6 +754,11 @@
  "description": "ZOD 'invalid_string' error message, with required include at specific position",
  "originalDefault": "Invalid input: must include \"{includes}\" at one or more positions greater than or equal to {position}."
  },
+ "ijV760": {
+ "defaultMessage": "Step {current} of {total}",
+ "description": "Summary progress label",
+ "originalDefault": "Step {current} of {total}"
+ },
  "iubnaw": {
  "defaultMessage": "The email address where you will receive the resume link.",
  "description": "Form save modal email field help text",

src/i18n/messages/nl.json

@@ -763,6 +763,11 @@
  "description": "ZOD 'invalid_string' error message, with required include at specific position",
  "originalDefault": "Invalid input: must include \"{includes}\" at one or more positions greater than or equal to {position}."
  },
+ "ijV760": {
+ "defaultMessage": "Step {current} of {total}",
+ "description": "Summary progress label",
+ "originalDefault": "Step {current} of {total}"
+ },
  "iubnaw": {
  "defaultMessage": "Het e-mailadres waarop je de link ontvangt om het formulier te hervatten.",
  "description": "Form save modal email field help text",

src/scss/components/_summary-progress.scss

@@ -0,0 +1,11 @@
+@use 'microscope-sass/lib/bem';
+
+.openforms-summary-progress {
+ padding-block-start: var(--of-summary-progress-padding-block-start, 0px);
+ padding-block-end: var(--of-summary-progress-padding-block-end, 20px);
+
+ @include mobile-only {
+ padding-block-start: var(--of-summary-progress-mobile-padding-block-start, 0px);
+ padding-block-end: var(--of-summary-progress-mobile-padding-block-end, 20px);
+ }
+}

src/styles.scss

@@ -49,6 +49,7 @@
 @import './scss/components/fieldset';
 @import './scss/components/loading';
 @import './scss/components/progress-indicator';
+@import './scss/components/summary-progress';
 @import './scss/components/file-upload';
 @import './scss/components/columns';
 @import './scss/components/price';

src/types/Form.js

@@ -25,6 +25,7 @@ const Form = PropTypes.shape({
  url: PropTypes.string.isRequired,
  maintenanceMode: PropTypes.bool.isRequired,
  showProgressIndicator: PropTypes.bool.isRequired,
+ showSummaryProgress: PropTypes.bool.isRequired,
  submissionAllowed: PropTypes.oneOf(['yes', 'no_with_overview', 'no_without_overview']).isRequired,
  appointmentOptions: PropTypes.shape({
  isAppointment: PropTypes.bool.isRequired,