[OF#4917] Update buttons styling (buttons position)

package.json

@@ -128,6 +128,7 @@
     "@typescript-eslint/parser": "^8.26.0",
     "@utrecht/component-library-react": "1.0.0-alpha.353",
     "@utrecht/components": "^7.4.0",
+    "@utrecht/button-group-react": "1.0.0",
     "@utrecht/design-tokens": "^2.5.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-istanbul": "^3.0.7",

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

src/components/ButtonsGroup/index.jsx

@@ -0,0 +1,87 @@
+import {ButtonGroup} from '@utrecht/button-group-react';
+import {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--distanced" direction="column">
+      {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;

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}

src/components/EditGrid/EditGrid.jsx

@@ -1,4 +1,4 @@
-import {ButtonGroup} from '@utrecht/component-library-react';
+import {ButtonGroup} from '@utrecht/button-group-react';
 import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 

src/components/EditGrid/EditGridButtonGroup.jsx

@@ -1,4 +1,4 @@
-import {ButtonGroup} from '@utrecht/component-library-react';
+import {ButtonGroup} from '@utrecht/button-group-react';
 import PropTypes from 'prop-types';
 
 const EditGridButtonGroup = ({children}) => (

src/components/EmailVerification/EmailVerificationForm.jsx

@@ -1,4 +1,5 @@
 import {TextField} from '@open-formulieren/formio-renderer';
+import {ButtonGroup} from '@utrecht/button-group-react';
 import {Link as UtrechtLink} from '@utrecht/component-library-react';
 import {Formik} from 'formik';
 import PropTypes from 'prop-types';
@@ -12,7 +13,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 {ValidationError} from 'errors';
 
 import EnterCodeButton from './EnterCodeButton';
@@ -154,19 +154,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 direction="column" className="utrecht-button-group--distanced">
+              {mode === 'sendCode' && (
+                <SendCodeButton
+                  submissionUrl={submissionUrl}
+                  componentKey={componentKey}
+                  emailAddress={emailAddress}
+                  onError={error => setError(error)}
+                />
+              )}
+              {mode === 'enterCode' && <EnterCodeButton />}
+            </ButtonGroup>
           </Body>
         )
       }