diff --git a/design-tokens b/design-tokens
index 4a9bc7ada..cab0b5337 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit 4a9bc7adaff4a8d07e1838ba4f07a8af8cd3cf49
+Subproject commit cab0b5337b3b1e357ac73b5c9a48fc1fbd450b44
diff --git a/package-lock.json b/package-lock.json
index 0bf4b0693..8c8ead85e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
"@floating-ui/react": "^0.26.9",
"@formio/protected-eval": "^1.2.1",
"@fortawesome/fontawesome-free": "6.4.0",
- "@open-formulieren/design-tokens": "^0.53.0",
+ "@open-formulieren/design-tokens": "^0.54.0",
"@open-formulieren/formiojs": "^4.13.14",
"@open-formulieren/leaflet-tools": "^1.0.0",
"@sentry/react": "^6.13.2",
@@ -156,7 +156,7 @@
},
"design-tokens": {
"name": "@open-formulieren/design-tokens",
- "version": "0.53.0",
+ "version": "0.54.0",
"license": "EUPL-1.2",
"devDependencies": {
"chokidar": "^3.5.3",
diff --git a/package.json b/package.json
index e37b340bd..9c26e2737 100644
--- a/package.json
+++ b/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.53.0",
+ "@open-formulieren/design-tokens": "^0.54.0",
"@open-formulieren/formiojs": "^4.13.14",
"@open-formulieren/leaflet-tools": "^1.0.0",
"@sentry/react": "^6.13.2",
diff --git a/src/components/ButtonsToolbar/index.js b/src/components/ButtonsToolbar/index.js
index 966c06bc5..4b98b7a69 100644
--- a/src/components/ButtonsToolbar/index.js
+++ b/src/components/ButtonsToolbar/index.js
@@ -3,14 +3,13 @@ import React from 'react';
import AbortButton from 'components/AbortButton';
import {OFButton} from 'components/Button';
-import Link from 'components/Link';
-import {Literal, LiteralsProvider} from 'components/Literal';
+import {Literal} from 'components/Literal';
import Loader from 'components/Loader';
+import PreviousLink from 'components/PreviousLink';
import {Toolbar, ToolbarList} from 'components/Toolbar';
import {SUBMISSION_ALLOWED} from 'components/constants';
const ButtonsToolbar = ({
- literals,
canSubmitStep,
canSubmitForm,
canSuspendForm,
@@ -27,58 +26,53 @@ const ButtonsToolbar = ({
return (
<>
-
-
+
+
+ {previousPage && (
+
+ )}
+
+
+ {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not
+ need to be its own prop */}
+ {canSuspendForm && (
+
+
+
+ )}
+ {showSubmitButton && (
+
+ {isCheckingLogic ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+ {!hideAbortButton && (
+
- {previousPage && (
-
-
-
- )}
-
-
- {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not
- need to be its own prop */}
- {canSuspendForm && (
-
-
-
- )}
- {showSubmitButton && (
-
- {isCheckingLogic ? (
-
- ) : (
-
- )}
-
- )}
+
- {!hideAbortButton && (
-
-
-
-
-
- )}
-
+ )}
>
);
};
ButtonsToolbar.propTypes = {
- literals: PropTypes.object,
canSubmitStep: PropTypes.bool.isRequired,
canSubmitForm: PropTypes.string.isRequired,
canSuspendForm: PropTypes.bool.isRequired,
diff --git a/src/components/ButtonsToolbar/test.spec.js b/src/components/ButtonsToolbar/test.spec.js
index ecc020620..eefa0d0e2 100644
--- a/src/components/ButtonsToolbar/test.spec.js
+++ b/src/components/ButtonsToolbar/test.spec.js
@@ -6,6 +6,7 @@ import {act} from 'react-dom/test-utils';
import {IntlProvider} from 'react-intl';
import {MemoryRouter} from 'react-router-dom';
+import {LiteralsProvider} from 'components/Literal';
import {SUBMISSION_ALLOWED} from 'components/constants';
import ButtonsToolbar from './index';
@@ -37,7 +38,9 @@ const LITERALS = {
const Wrap = ({children}) => (
- {children}
+
+ {children}
+
);
@@ -48,7 +51,6 @@ it('Last step of submittable form, button is present', () => {
root.render(
{
root.render(
{
renderTest(
{
renderTest(
step.isApplicable === true);
const currentSubmissionStepIndex = applicableSteps.indexOf(submissionStep);
+ const previousPage = getPreviousPageHref();
return (
- <>
+
{isLoadingSomething ? : null}
+ {previousPage && }
+
{!isLoadingSomething && form.showSummaryProgress && (
{config.debug ? : null}
@@ -937,7 +941,7 @@ const FormStep = ({form, submission, onLogicChecked, onStepSubmitted, onDestroyS
componentKey={emailVerificationModal.componentKey}
emailAddress={emailVerificationModal.emailAddress}
/>
- >
+
);
};
diff --git a/src/components/IntroductionPage/index.js b/src/components/IntroductionPage/index.js
index 55337dca2..af64e0694 100644
--- a/src/components/IntroductionPage/index.js
+++ b/src/components/IntroductionPage/index.js
@@ -6,6 +6,7 @@ import {Navigate} from 'react-router-dom';
import {FormContext} from 'Context';
import Body from 'components/Body';
import Card from 'components/Card';
+import FAIcon from 'components/FAIcon';
import Link from 'components/Link';
const IntroductionPage = () => {
@@ -21,11 +22,17 @@ const IntroductionPage = () => {
dangerouslySetInnerHTML={{__html: introductionPageContent}}
/>
-
+
+
);
diff --git a/src/components/PreviousLink.js b/src/components/PreviousLink.js
new file mode 100644
index 000000000..fa11ee535
--- /dev/null
+++ b/src/components/PreviousLink.js
@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import FAIcon from 'components/FAIcon';
+import Link from 'components/Link';
+import Literal from 'components/Literal';
+
+const VARIANTS = ['start', 'end'];
+
+const PreviousLink = ({to, onClick, position}) => {
+ const className = classNames('openforms-previous-link', {
+ [`openforms-previous-link--${position}`]: position,
+ });
+ return (
+
+
+
+
+ );
+};
+
+PreviousLink.propTypes = {
+ to: PropTypes.string.isRequired,
+ onClick: PropTypes.func,
+ position: PropTypes.oneOf(VARIANTS),
+};
+
+export default PreviousLink;
diff --git a/src/components/appointments/SubmitRow.js b/src/components/appointments/SubmitRow.js
index 62845e907..60d9e3a68 100644
--- a/src/components/appointments/SubmitRow.js
+++ b/src/components/appointments/SubmitRow.js
@@ -3,30 +3,34 @@ import React from 'react';
import {useNavigate} from 'react-router-dom';
import ButtonsToolbar from 'components/ButtonsToolbar';
+import {LiteralsProvider} from 'components/Literal';
import {SUBMISSION_ALLOWED} from 'components/constants';
const SubmitRow = ({canSubmit, nextText, previousText = '', navigateBackTo = ''}) => {
const navigate = useNavigate();
return (
- if authenticated (for prefill), logout must be shown
- isLastStep={false}
- isCheckingLogic={false}
- loginRequired={false}
- hideAbortButton
- previousPage={navigateBackTo ? `../${navigateBackTo}` : ''}
- onFormSave={() => {}}
- onNavigatePrevPage={navigateBackTo ? () => navigate(`../${navigateBackTo}`) : undefined}
- onDestroySession={() => {}}
- />
+ >
+ if authenticated (for prefill), logout must be shown
+ isLastStep={false}
+ isCheckingLogic={false}
+ loginRequired={false}
+ hideAbortButton
+ previousPage={navigateBackTo ? `../${navigateBackTo}` : ''}
+ onFormSave={() => {}}
+ onNavigatePrevPage={navigateBackTo ? () => navigate(`../${navigateBackTo}`) : undefined}
+ onDestroySession={() => {}}
+ />
+
);
};
diff --git a/src/scss/components/_previous-link.scss b/src/scss/components/_previous-link.scss
new file mode 100644
index 000000000..d566ca787
--- /dev/null
+++ b/src/scss/components/_previous-link.scss
@@ -0,0 +1,22 @@
+@use 'microscope-sass/lib/bem';
+
+.openforms-previous-link {
+ flex-direction: row;
+ column-gap: 8px;
+
+ @include bem.modifier('start') {
+ margin-block-end: 20px;
+ // NOTE: usually block elements should not define margins, but this is done deliberately
+ // See https://github.com/open-formulieren/open-forms-sdk/pull/718#discussion_r1791617060 for
+ // more discussion context.
+ display: var(--of-previous-link-display-start, none);
+ }
+
+ @include bem.modifier('end') {
+ display: var(--of-previous-link-display-end, inline-flex);
+ }
+
+ @include bem.element('icon') {
+ display: var(--of-previous-link-icon-display, none);
+ }
+}
diff --git a/src/scss/components/_start-link.scss b/src/scss/components/_start-link.scss
new file mode 100644
index 000000000..01f327d6f
--- /dev/null
+++ b/src/scss/components/_start-link.scss
@@ -0,0 +1,7 @@
+@use 'microscope-sass/lib/bem';
+
+.openforms-start-link {
+ display: inline-flex;
+ flex-direction: row;
+ column-gap: 8px;
+}
diff --git a/src/styles.scss b/src/styles.scss
index 632eacf1f..c81f4777e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -49,6 +49,7 @@
@import './scss/components/fieldset';
@import './scss/components/loading';
@import './scss/components/progress-indicator';
+@import './scss/components/previous-link';
@import './scss/components/summary-progress';
@import './scss/components/file-upload';
@import './scss/components/columns';
@@ -59,6 +60,7 @@
@import './scss/components/co-sign';
@import './scss/components/leaflet-map';
@import './scss/components/signature';
+@import './scss/components/start-link';
@import './scss/components/editgrid';
@import './scss/components/summary';
@import './scss/components/language-selection';