[open-formulieren/open-forms#4917] Updated buttons styling

open-formulieren · Mar 7, 2025 · 6adc89f · 6adc89f
1 parent adf8ff7
commit 6adc89f
Show file tree

Hide file tree

Showing 20 changed files with 225 additions and 373 deletions.
diff --git a/src/components/AbortButton/AbortButton.jsx b/src/components/AbortButton/AbortButton.jsx
@@ -1,7 +1,8 @@
+import {LinkButton as UtrechtButtonLink} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import {OFButton} from 'components/Button';
+import FAIcon from 'components/FAIcon';
 import {useAnalyticsToolsConfig} from 'components/analytics/AnalyticsToolConfigProvider';
 import {buildGovMetricUrl} from 'components/analytics/utils';
 import useFormContext from 'hooks/useFormContext';
@@ -50,9 +51,16 @@ const AbortButton = ({isAuthenticated, onDestroySession}) => {
   );
 
   return (
-    <OFButton appearance="primary-action-button" hint="danger" name="abort" onClick={callback}>
-      {message}
-    </OFButton>
+    <>
+      <UtrechtButtonLink
+        name="abort"
+        onClick={callback}
+        className={'utrecht-link-button--openforms'}
+      >
+        <FAIcon icon="xmark" />
+        {message}
+      </UtrechtButtonLink>
+    </>
   );
 };
 

diff --git a/src/components/ButtonsGroup/index.jsx b/src/components/ButtonsGroup/index.jsx
@@ -0,0 +1,89 @@
+// TODO: this can be removed when we upgrade the Utrecht react library. Now it's not possible to use the
+// css rules we need.
+import '@utrecht/button-group-css';
+import {ButtonGroup, LinkButton as UtrechtButtonLink} from '@utrecht/component-library-react';
+import PropTypes from 'prop-types';
+
+import AbortButton from 'components/AbortButton';
+import {OFButton} from 'components/Button';
+import FAIcon from 'components/FAIcon';
+import {Literal} from 'components/Literal';
+import Loader from 'components/Loader';
+import PreviousLink from 'components/PreviousLink';
+import {SUBMISSION_ALLOWED} from 'components/constants';
+
+const ButtonsGroup = ({
+  canSubmitStep,
+  canSubmitForm,
+  canSuspendForm,
+  isLastStep,
+  isCheckingLogic,
+  isAuthenticated,
+  hideAbortButton,
+  onNavigatePrevPage,
+  onFormSave,
+  previousPage,
+  onDestroySession,
+}) => {
+  const showSubmitButton = !(canSubmitForm === SUBMISSION_ALLOWED.noWithoutOverview && isLastStep);
+
+  return (
+    <ButtonGroup className="utrecht-button-group--column" role="group">
+      {showSubmitButton && (
+        <OFButton
+          type="submit"
+          appearance="primary-action-button"
+          name="next"
+          disabled={!canSubmitStep}
+          className="openforms-button-with-icon"
+        >
+          {isCheckingLogic ? (
+            <Loader modifiers={['centered', 'only-child', 'small', 'gray']} />
+          ) : (
+            <>
+              <Literal name="nextText" />
+              <FAIcon icon="arrow-right-long" />
+            </>
+          )}
+        </OFButton>
+      )}
+
+      {previousPage && (
+        <PreviousLink to={previousPage} onClick={onNavigatePrevPage} position="end" />
+      )}
+
+      {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not
+          need to be its own prop */}
+      {canSuspendForm && (
+        <UtrechtButtonLink
+          name="save"
+          onClick={onFormSave}
+          className="utrecht-link-button--openforms"
+        >
+          <FAIcon icon="arrow-right-long" />
+          <Literal name="saveText" />
+        </UtrechtButtonLink>
+      )}
+
+      {!hideAbortButton && (
+        <AbortButton isAuthenticated={isAuthenticated} onDestroySession={onDestroySession} />
+      )}
+    </ButtonGroup>
+  );
+};
+
+ButtonsGroup.propTypes = {
+  canSubmitStep: PropTypes.bool.isRequired,
+  canSubmitForm: PropTypes.string.isRequired,
+  canSuspendForm: PropTypes.bool.isRequired,
+  isLastStep: PropTypes.bool.isRequired,
+  isCheckingLogic: PropTypes.bool.isRequired,
+  isAuthenticated: PropTypes.bool.isRequired,
+  hideAbortButton: PropTypes.bool,
+  onNavigatePrevPage: PropTypes.func,
+  onFormSave: PropTypes.func.isRequired,
+  previousPage: PropTypes.string,
+  onDestroySession: PropTypes.func.isRequired,
+};
+
+export default ButtonsGroup;
diff --git a/src/components/ButtonsToolbar/test.spec.jsx → src/components/ButtonsGroup/test.spec.jsx b/src/components/ButtonsToolbar/test.spec.jsx → src/components/ButtonsGroup/test.spec.jsx
@@ -6,7 +6,7 @@ import {MemoryRouter} from 'react-router';
 import {LiteralsProvider} from 'components/Literal';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 
-import ButtonsToolbar from './index';
+import ButtonsGroup from './index';
 
 const LITERALS = {
   nextText: {value: '', resolved: 'Next step'},
@@ -27,7 +27,7 @@ it('Last step of submittable form, button is present', () => {
 
   render(
     <Wrap>
-      <ButtonsToolbar
+      <ButtonsGroup
         canSubmitStep={true}
         canSubmitForm={SUBMISSION_ALLOWED.yes}
         canSuspendForm={true}
@@ -53,7 +53,7 @@ it('Last step of non-submittable form with overview, button is present', () => {
 
   render(
     <Wrap>
-      <ButtonsToolbar
+      <ButtonsGroup
         canSubmitStep={true}
         canSubmitForm={SUBMISSION_ALLOWED.noWithOverview}
         canSuspendForm={true}
@@ -79,7 +79,7 @@ it('Last step of non-submittable form without overview, button is NOT present',
 
   render(
     <Wrap>
-      <ButtonsToolbar
+      <ButtonsGroup
         canSubmitStep={true}
         canSubmitForm={SUBMISSION_ALLOWED.noWithoutOverview}
         canSuspendForm={true}
@@ -105,7 +105,7 @@ it('Non-last step of non-submittable form without overview, button IS present',
 
   render(
     <Wrap>
-      <ButtonsToolbar
+      <ButtonsGroup
         canSubmitStep={true}
         canSubmitForm={SUBMISSION_ALLOWED.noWithoutOverview}
         canSuspendForm={true}
@@ -131,7 +131,7 @@ it('Suspending form allowed, button is present', () => {
 
   render(
     <Wrap>
-      <ButtonsToolbar
+      <ButtonsGroup
         canSubmitStep={true}
         canSubmitForm={SUBMISSION_ALLOWED.yes}
         canSuspendForm={true}
@@ -154,7 +154,7 @@ it('Suspending form not allowed, button is NOT present', () => {
 
   render(
     <Wrap>
-      <ButtonsToolbar
+      <ButtonsGroup
         canSubmitStep={true}
         canSubmitForm={SUBMISSION_ALLOWED.yes}
         canSuspendForm={false}

diff --git a/src/components/ButtonsToolbar/index.jsx b/src/components/ButtonsToolbar/index.jsx
diff --git a/src/components/EmailVerification/EmailVerificationForm.jsx b/src/components/EmailVerification/EmailVerificationForm.jsx
@@ -1,4 +1,4 @@
-import {Link as UtrechtLink} from '@utrecht/component-library-react';
+import {ButtonGroup, Link as UtrechtLink} from '@utrecht/component-library-react';
 import {Formik} from 'formik';
 import PropTypes from 'prop-types';
 import {useContext, useState} from 'react';
@@ -11,7 +11,6 @@ import {post} from 'api';
 import Body from 'components/Body';
 import {DisplayError} from 'components/Errors/ErrorBoundary';
 import ErrorMessage from 'components/Errors/ErrorMessage';
-import {Toolbar, ToolbarList} from 'components/Toolbar';
 import {TextField} from 'components/forms';
 import {ValidationError} from 'errors';
 
@@ -154,19 +153,17 @@ const EmailVerificationForm = ({submissionUrl, componentKey, emailAddress, onVer
               </>
             )}
 
-            <Toolbar modifiers={['bottom', 'reverse']}>
-              <ToolbarList>
-                {mode === 'sendCode' && (
-                  <SendCodeButton
-                    submissionUrl={submissionUrl}
-                    componentKey={componentKey}
-                    emailAddress={emailAddress}
-                    onError={error => setError(error)}
-                  />
-                )}
-                {mode === 'enterCode' && <EnterCodeButton />}
-              </ToolbarList>
-            </Toolbar>
+            <ButtonGroup className="utrecht-button-group--column" role="group">
+              {mode === 'sendCode' && (
+                <SendCodeButton
+                  submissionUrl={submissionUrl}
+                  componentKey={componentKey}
+                  emailAddress={emailAddress}
+                  onError={error => setError(error)}
+                />
+              )}
+              {mode === 'enterCode' && <EnterCodeButton />}
+            </ButtonGroup>
           </Body>
         )
       }

diff --git a/src/components/ExistingSubmissionOptions.jsx b/src/components/ExistingSubmissionOptions.jsx
@@ -1,10 +1,10 @@
+import {ButtonGroup} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 import {useNavigate} from 'react-router';
 
 import AbortButton from 'components/AbortButton';
 import {OFButton} from 'components/Button';
-import {Toolbar, ToolbarList} from 'components/Toolbar';
 import Types from 'types';
 
 const ExistingSubmissionOptions = ({form, onDestroySession, isAuthenticated}) => {
@@ -13,19 +13,17 @@ const ExistingSubmissionOptions = ({form, onDestroySession, isAuthenticated}) =>
   const firstStepRoute = `/stap/${form.steps[0].slug}`;
 
   return (
-    <Toolbar modifiers={['column']}>
-      <ToolbarList>
+    <>
+      <ButtonGroup className="utrecht-button-group--column" role="group">
         <OFButton appearance="primary-action-button" onClick={() => navigate(firstStepRoute)}>
           <FormattedMessage
             defaultMessage="Continue existing submission"
             description="Continue existing submission button label"
           />
         </OFButton>
-      </ToolbarList>
-      <ToolbarList>
         <AbortButton onDestroySession={onDestroySession} isAuthenticated={isAuthenticated} />
-      </ToolbarList>
-    </Toolbar>
+      </ButtonGroup>
+    </>
   );
 };
 

diff --git a/src/components/FormStep/index.jsx b/src/components/FormStep/index.jsx
@@ -32,7 +32,7 @@ import {useImmerReducer} from 'use-immer';
 
 import {ConfigContext, FormioTranslations} from 'Context';
 import {get} from 'api';
-import ButtonsToolbar from 'components/ButtonsToolbar';
+import ButtonsGroup from 'components/ButtonsGroup';
 import Card, {CardTitle} from 'components/Card';
 import {EmailVerificationModal} from 'components/EmailVerification';
 import FormStepDebug from 'components/FormStepDebug';
@@ -823,7 +823,7 @@ const FormStep = () => {
                   }}
                 />
                 {config.debug ? <FormStepDebug data={getCurrentFormData()} /> : null}
-                <ButtonsToolbar
+                <ButtonsGroup
                   canSubmitStep={canSubmit}
                   canSubmitForm={submission.submissionAllowed}
                   canSuspendForm={form.suspensionAllowed}