From 9ebb6ef9c9dcd54d7b413d215224532f1e3eab50 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Wed, 2 Oct 2024 12:51:52 +0200 Subject: [PATCH 1/4] :sparkles: [open-formulieren/open-forms#4544] Configurable form 'previous' button --- src/components/ButtonsToolbar/index.js | 6 ++--- src/components/FormStep/index.js | 11 ++++++--- src/components/IntroductionPage/index.js | 16 +++++++----- src/components/PreviousLink.js | 31 ++++++++++++++++++++++++ src/scss/components/_previous-link.scss | 17 +++++++++++++ src/scss/components/_start-link.scss | 7 ++++++ src/styles.scss | 2 ++ 7 files changed, 77 insertions(+), 13 deletions(-) create mode 100644 src/components/PreviousLink.js create mode 100644 src/scss/components/_previous-link.scss create mode 100644 src/scss/components/_start-link.scss diff --git a/src/components/ButtonsToolbar/index.js b/src/components/ButtonsToolbar/index.js index 966c06bc5..3b2f07efa 100644 --- a/src/components/ButtonsToolbar/index.js +++ b/src/components/ButtonsToolbar/index.js @@ -3,9 +3,9 @@ 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 Loader from 'components/Loader'; +import PreviousLink from 'components/PreviousLink'; import {Toolbar, ToolbarList} from 'components/Toolbar'; import {SUBMISSION_ALLOWED} from 'components/constants'; @@ -31,9 +31,7 @@ const ButtonsToolbar = ({ {previousPage && ( - - - + )} diff --git a/src/components/FormStep/index.js b/src/components/FormStep/index.js index 381ba72a9..25b32a387 100644 --- a/src/components/FormStep/index.js +++ b/src/components/FormStep/index.js @@ -39,7 +39,9 @@ import ButtonsToolbar from 'components/ButtonsToolbar'; import Card, {CardTitle} from 'components/Card'; import {EmailVerificationModal} from 'components/EmailVerification'; import FormStepDebug from 'components/FormStepDebug'; +import {LiteralsProvider} from 'components/Literal'; import Loader from 'components/Loader'; +import PreviousLink from 'components/PreviousLink'; import SummaryProgress from 'components/SummaryProgress'; import FormStepSaveModal from 'components/modals/FormStepSaveModal'; import { @@ -838,11 +840,14 @@ const FormStep = ({form, submission, onLogicChecked, onStepSubmitted, onDestroyS const applicableSteps = submission.steps.filter(step => step.isApplicable === true); const currentSubmissionStepIndex = applicableSteps.indexOf(submissionStep); + const previousPage = getPreviousPageHref(); return ( - <> + {isLoadingSomething ? : null} + {previousPage && } + {!isLoadingSomething && form.showSummaryProgress && ( @@ -937,7 +942,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..504eb9b87 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,12 +22,15 @@ const IntroductionPage = () => { dangerouslySetInnerHTML={{__html: introductionPageContent}} /> - - - + + + + + + ); }; diff --git a/src/components/PreviousLink.js b/src/components/PreviousLink.js new file mode 100644 index 000000000..1d81dbea3 --- /dev/null +++ b/src/components/PreviousLink.js @@ -0,0 +1,31 @@ +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, + onClick: PropTypes.func, + position: PropTypes.oneOf(VARIANTS), +}; + +export default PreviousLink; diff --git a/src/scss/components/_previous-link.scss b/src/scss/components/_previous-link.scss new file mode 100644 index 000000000..c258aa070 --- /dev/null +++ b/src/scss/components/_previous-link.scss @@ -0,0 +1,17 @@ +@use 'microscope-sass/lib/bem'; + +.openforms-previous-link { + @include bem.modifier('start') { + margin-block-end: 20px; + display: var(--of-previous-link-display-start, none); + } + + @include bem.modifier('end') { + display: var(--of-previous-link-display-end, inline); + } + + @include bem.element('icon') { + display: var(--of-previous-link-icon-display, none); + margin-inline-end: 10px; + } +} diff --git a/src/scss/components/_start-link.scss b/src/scss/components/_start-link.scss new file mode 100644 index 000000000..7b76d1393 --- /dev/null +++ b/src/scss/components/_start-link.scss @@ -0,0 +1,7 @@ +@use 'microscope-sass/lib/bem'; + +.openforms-start-link { + @include bem.element('icon') { + margin-inline-start: 10px; + } +} 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'; From 72ca3c3690302cc84d65cceb0b0131e3677b7bdb Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Tue, 8 Oct 2024 12:13:31 +0200 Subject: [PATCH 2/4] :arrow_up: [open-formulieren/open-forms#4544] Bump to design tokens 0.54.0 --- design-tokens | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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", From 629df27adf8a7ffe0f38c3cad0d74ae644233d99 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Wed, 9 Oct 2024 10:06:08 +0200 Subject: [PATCH 3/4] :lipstick: [open-formulieren/open-forms#4544] Review styling updates --- src/components/IntroductionPage/index.js | 21 ++++++++++++--------- src/components/PreviousLink.js | 12 +++++------- src/scss/components/_previous-link.scss | 9 +++++++-- src/scss/components/_start-link.scss | 6 +++--- 4 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/components/IntroductionPage/index.js b/src/components/IntroductionPage/index.js index 504eb9b87..af64e0694 100644 --- a/src/components/IntroductionPage/index.js +++ b/src/components/IntroductionPage/index.js @@ -22,15 +22,18 @@ const IntroductionPage = () => { dangerouslySetInnerHTML={{__html: introductionPageContent}} /> - - - - - - + + + + ); }; diff --git a/src/components/PreviousLink.js b/src/components/PreviousLink.js index 1d81dbea3..fa11ee535 100644 --- a/src/components/PreviousLink.js +++ b/src/components/PreviousLink.js @@ -13,17 +13,15 @@ const PreviousLink = ({to, onClick, position}) => { [`openforms-previous-link--${position}`]: position, }); return ( - - - - - - + + + + ); }; PreviousLink.propTypes = { - to: PropTypes.string, + to: PropTypes.string.isRequired, onClick: PropTypes.func, position: PropTypes.oneOf(VARIANTS), }; diff --git a/src/scss/components/_previous-link.scss b/src/scss/components/_previous-link.scss index c258aa070..d566ca787 100644 --- a/src/scss/components/_previous-link.scss +++ b/src/scss/components/_previous-link.scss @@ -1,17 +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); + display: var(--of-previous-link-display-end, inline-flex); } @include bem.element('icon') { display: var(--of-previous-link-icon-display, none); - margin-inline-end: 10px; } } diff --git a/src/scss/components/_start-link.scss b/src/scss/components/_start-link.scss index 7b76d1393..01f327d6f 100644 --- a/src/scss/components/_start-link.scss +++ b/src/scss/components/_start-link.scss @@ -1,7 +1,7 @@ @use 'microscope-sass/lib/bem'; .openforms-start-link { - @include bem.element('icon') { - margin-inline-start: 10px; - } + display: inline-flex; + flex-direction: row; + column-gap: 8px; } From 11ab95f16a3f5b183faef5c838f42bc90a5d9245 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Wed, 9 Oct 2024 10:24:26 +0200 Subject: [PATCH 4/4] :fire: [open-formulieren/open-forms#4544] Removed LiteralsProvider from ButtonsToolbar Removed literals property from ButtonsToolbar, and moved LiteralsProvider from ButtonsToolbar to SubmitRow --- src/components/ButtonsToolbar/index.js | 84 +++++++++++----------- src/components/ButtonsToolbar/test.spec.js | 11 ++- src/components/FormStep/index.js | 1 - src/components/appointments/SubmitRow.js | 32 +++++---- 4 files changed, 62 insertions(+), 66 deletions(-) diff --git a/src/components/ButtonsToolbar/index.js b/src/components/ButtonsToolbar/index.js index 3b2f07efa..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 {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,56 +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( {config.debug ? : null} { 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={() => {}} + /> + ); };