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

package.json

@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.27.5",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@open-formulieren/design-tokens": "^0.57.0",
+    "@open-formulieren/design-tokens": "^0.58.0",
     "@open-formulieren/formio-renderer": "^0.3.0",
     "@open-formulieren/formiojs": "^4.13.14",
     "@open-formulieren/leaflet-tools": "^1.0.0",
@@ -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/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>
         )
       }

src/components/ExistingSubmissionOptions.jsx

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

src/components/FormNavigation/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 FormNavigation = ({
+  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="circle-pause" />
+          <Literal name="saveText" />
+        </UtrechtButtonLink>
+      )}
+
+      {!hideAbortButton && (
+        <AbortButton isAuthenticated={isAuthenticated} onDestroySession={onDestroySession} />
+      )}
+    </ButtonGroup>
+  );
+};
+
+FormNavigation.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 FormNavigation;