From 0e2f956313d112cac9bad8a9b539b7519e56f255 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Fri, 13 Oct 2023 16:38:38 +0200
Subject: [PATCH] :construction: [#462] Replace usage of OF Button component
 with Utrecht button components

---
 src/components/ButtonsToolbar/index.js        | 27 ++++++++++++++-----
 .../LanguageSelectionDisplay.js               | 10 +++----
 src/components/LoginButton/index.js           | 13 +++++----
 src/components/SummaryConfirmation/index.js   | 15 ++++++-----
 src/formio/components/Button.js               |  6 +----
 src/formio/templates/editGrid.ejs             |  6 ++---
 src/formio/templates/editGridRow.ejs          |  4 +--
 src/formio/templates/file.ejs                 |  2 +-
 src/formio/templates/multiValueRow.ejs        |  2 +-
 src/formio/templates/multiValueTable.ejs      |  2 +-
 10 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/components/ButtonsToolbar/index.js b/src/components/ButtonsToolbar/index.js
index 59597cbb2..e11b4fe4b 100644
--- a/src/components/ButtonsToolbar/index.js
+++ b/src/components/ButtonsToolbar/index.js
@@ -1,7 +1,10 @@
+import {
+  Button as UtrechtButton,
+  LinkButton as UtrechtLinkButton,
+} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Button from 'components/Button';
 import {Literal, LiteralsProvider} from 'components/Literal';
 import Loader from 'components/Loader';
 import LogoutButton from 'components/LogoutButton';
@@ -28,27 +31,37 @@ const ButtonsToolbar = ({
         <Toolbar modifiers={['mobile-reverse-order', 'bottom']}>
           <ToolbarList>
             {onNavigatePrevPage && (
-              <Button variant="anchor" onClick={onNavigatePrevPage}>
+              <UtrechtLinkButton onClick={onNavigatePrevPage} appearance="subtle-button">
                 <Literal name="previousText" />
-              </Button>
+              </UtrechtLinkButton>
             )}
           </ToolbarList>
           <ToolbarList>
             {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not
             need to be its own prop */}
             {canSuspendForm && (
-              <Button type="button" variant="secondary" name="save" onClick={onFormSave}>
+              <UtrechtButton
+                type="button"
+                appearance="secondary-action-button"
+                name="save"
+                onClick={onFormSave}
+              >
                 <Literal name="saveText" />
-              </Button>
+              </UtrechtButton>
             )}
             {showSubmitButton && (
-              <Button type="submit" variant="primary" name="next" disabled={!canSubmitStep}>
+              <UtrechtButton
+                type="submit"
+                appearance="primary-action-button"
+                name="next"
+                disabled={!canSubmitStep}
+              >
                 {isCheckingLogic ? (
                   <Loader modifiers={['centered', 'only-child', 'small']} />
                 ) : (
                   <Literal name="nextText" />
                 )}
-              </Button>
+              </UtrechtButton>
             )}
           </ToolbarList>
         </Toolbar>
diff --git a/src/components/LanguageSelection/LanguageSelectionDisplay.js b/src/components/LanguageSelection/LanguageSelectionDisplay.js
index 6093fae58..68d997290 100644
--- a/src/components/LanguageSelection/LanguageSelectionDisplay.js
+++ b/src/components/LanguageSelection/LanguageSelectionDisplay.js
@@ -1,9 +1,7 @@
-import {ButtonGroup, Heading} from '@utrecht/component-library-react';
+import {ButtonGroup, Heading, LinkButton} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import {Fragment} from 'react';
 
-import Button from 'components/Button';
-
 const Spacer = () => <span aria-hidden="true">{'|'}</span>;
 
 const LanguageSelectionDisplay = ({heading, headingLevel, headingId, items, onLanguageChange}) => (
@@ -14,9 +12,7 @@ const LanguageSelectionDisplay = ({heading, headingLevel, headingId, items, onLa
     <ButtonGroup>
       {items.map(({current, label, lang, textContent}, i, a) => (
         <Fragment key={lang}>
-          <Button
-            variant="anchor"
-            component="button"
+          <LinkButton
             pressed={current}
             lang={lang}
             aria-label={label}
@@ -24,7 +20,7 @@ const LanguageSelectionDisplay = ({heading, headingLevel, headingId, items, onLa
             inline
           >
             {textContent}
-          </Button>
+          </LinkButton>
           {i + 1 < a.length ? <Spacer /> : null}
         </Fragment>
       ))}
diff --git a/src/components/LoginButton/index.js b/src/components/LoginButton/index.js
index ca2890d59..29f5e05f0 100644
--- a/src/components/LoginButton/index.js
+++ b/src/components/LoginButton/index.js
@@ -1,6 +1,9 @@
+import {
+  Button as UtrechtButton,
+  ButtonLink as UtrechtButtonLink,
+} from '@utrecht/component-library-react';
 import React from 'react';
 
-import Button from 'components/Button';
 import FormattedLoginOption from 'types/FormattedLoginOption';
 import {getBEMClassName} from 'utils';
 
@@ -9,19 +12,19 @@ import LoginButtonIcon from './LoginButtonIcon';
 const LoginButton = ({option, ...extra}) => {
   let url = option.url;
   let extraProps = {...extra};
-  let component = 'a';
+  let ButtonComponent = UtrechtButtonLink;
 
   if (!url) {
     url = '#';
     extraProps = {...extraProps, type: 'submit'};
-    component = 'button';
+    ButtonComponent = UtrechtButton;
   }
 
   return (
     <div className={getBEMClassName('login-button')}>
-      <Button variant="primary" component={component} href={url} {...extraProps}>
+      <ButtonComponent href={url} appearance="primary-action-button" {...extraProps}>
         {option.label}
-      </Button>
+      </ButtonComponent>
       <LoginButtonIcon identifier={option.identifier} logo={option.logo} />
     </div>
   );
diff --git a/src/components/SummaryConfirmation/index.js b/src/components/SummaryConfirmation/index.js
index 02494c4ad..00145be60 100644
--- a/src/components/SummaryConfirmation/index.js
+++ b/src/components/SummaryConfirmation/index.js
@@ -1,8 +1,11 @@
+import {
+  Button as UtrechtButton,
+  LinkButton as UtrechtLinkButton,
+} from '@utrecht/component-library-react';
 import {useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
 import React, {useState} from 'react';
 
-import Button from 'components/Button';
 import {Literal} from 'components/Literal';
 import StatementCheckboxes from 'components/StatementCheckboxes';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
@@ -36,22 +39,22 @@ const SummaryConfirmation = ({submissionAllowed, onPrevPage}) => {
       <Toolbar modifiers={['mobile-reverse-order', 'bottom']}>
         <ToolbarList>
           {!!onPrevPage && (
-            <Button variant="anchor" component="a" onClick={onPrevPage}>
+            <UtrechtLinkButton onClick={onPrevPage} appearance="subtle-button">
               <Literal name="previousText" />
-            </Button>
+            </UtrechtLinkButton>
           )}
         </ToolbarList>
         <ToolbarList>
           {canSubmit ? (
-            <Button
+            <UtrechtButton
               type="submit"
-              variant="primary"
+              appearance="primary-action-button"
               name="confirm"
               disabled={submitDisabled}
               onDisabledClick={() => setShowStatementWarnings(true)}
             >
               <Literal name="confirmText" />
-            </Button>
+            </UtrechtButton>
           ) : null}
         </ToolbarList>
       </Toolbar>
diff --git a/src/formio/components/Button.js b/src/formio/components/Button.js
index 29f5cdfc6..86862e814 100644
--- a/src/formio/components/Button.js
+++ b/src/formio/components/Button.js
@@ -1,7 +1,5 @@
 import {Formio} from 'react-formio';
 
-import {applyPrefix} from '../utils';
-
 /**
  * Extend the default button field to modify it to our needs.
  */
@@ -9,9 +7,7 @@ class Button extends Formio.Components.components.button {
   get inputInfo() {
     const info = super.inputInfo;
     // change the default CSS classes
-    info.attr.class = [applyPrefix('button'), 'utrecht-button', 'utrecht-button--html-button'].join(
-      ' '
-    );
+    info.attr.class = ['utrecht-button'].join(' ');
     return info;
   }
 }
diff --git a/src/formio/templates/editGrid.ejs b/src/formio/templates/editGrid.ejs
index 12a770e2d..1a9903848 100644
--- a/src/formio/templates/editGrid.ejs
+++ b/src/formio/templates/editGrid.ejs
@@ -11,11 +11,11 @@
           <div class="{{ctx.ofPrefix}}editgrid__group-actions {{ctx.ofPrefix}}toolbar {{ctx.ofPrefix}}toolbar--reverse">
               <ul class="{{ctx.ofPrefix}}toolbar__list">
               <li class="{{ctx.ofPrefix}}toolbar__list-item">
-                <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+                <button class="utrecht-button utrecht-button--primary-action" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
               </li>
               {% if (ctx.component.removeRow) { %}
                   <li class="{{ctx.ofPrefix}}toolbar__list-item">
-              <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--danger utrecht-button utrecht-button--html-button utrecht-button--secondary-action utrecht-button--danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+              <button class="utrecht-button utrecht-button--secondary-action utrecht-button--danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
                   </li>
               {% } %}
               </ul>
@@ -34,7 +34,7 @@
 
   {% if (!ctx.readOnly && ctx.hasAddButton) { %}
   <div class="{{ctx.ofPrefix}}editgrid__add-button">
-    <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="{{ctx.ref.addRow}}">
+    <button class="utrecht-button utrecht-button--primary-action" ref="{{ctx.ref.addRow}}">
       <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
     </button>
   </div>
diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs
index f2ff77e34..fd15ebba4 100644
--- a/src/formio/templates/editGridRow.ejs
+++ b/src/formio/templates/editGridRow.ejs
@@ -9,10 +9,10 @@
     <div class="{{ctx.ofPrefix}}toolbar {{ctx.ofPrefix}}toolbar--reverse">
         <ul class="{{ctx.ofPrefix}}toolbar__list">
             <li class="{{ctx.ofPrefix}}toolbar__list-item">
-                <button class="{{ctx.ofPrefix}}button editRow"><i class="{{ ctx.iconClass('edit') }}"></i></button>
+                <button class="utrecht-button editRow"><i class="{{ ctx.iconClass('edit') }}"></i></button>
             </li>
             <li class="{{ctx.ofPrefix}}toolbar__list-item">
-                <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--danger removeRow"><i class="{{ ctx.iconClass('trash-can') }}"></i></button>
+                <button class="utrecht-button utrecht-button--secondary-action utrecht-button--danger removeRow"><i class="{{ ctx.iconClass('trash-can') }}"></i></button>
             </li>
         </ul>
     </div>
diff --git a/src/formio/templates/file.ejs b/src/formio/templates/file.ejs
index 3ec3648d4..5642a1574 100644
--- a/src/formio/templates/file.ejs
+++ b/src/formio/templates/file.ejs
@@ -18,7 +18,7 @@
         <div class="row">
           {% if (!ctx.disabled) { %}
             <div class="col-md-1">
-              <button type="button" class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--icon-only {{ctx.ofPrefix}}button--danger" ref="removeLink" title="{{ctx.t('Remove')}}">
+              <button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" ref="removeLink" title="{{ctx.t('Remove')}}">
                 <i class="{{ctx.iconClass('trash-can')}}"></i>
               </button>
             </div>
diff --git a/src/formio/templates/multiValueRow.ejs b/src/formio/templates/multiValueRow.ejs
index e00a77679..b8e58b3d3 100644
--- a/src/formio/templates/multiValueRow.ejs
+++ b/src/formio/templates/multiValueRow.ejs
@@ -4,7 +4,7 @@
   </td>
   {% if (!ctx.disabled) { %}
   <td class="{{ctx.ofPrefix}}multi-value-row__remove">
-    <button type="button" class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--icon-only {{ctx.ofPrefix}}button--danger" title="{{ctx.t('Remove')}}" ref="removeRow">
+    <button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" title="{{ctx.t('Remove')}}" ref="removeRow">
       <i class="{{ctx.iconClass('trash-can')}}"></i>
     </button>
   </td>
diff --git a/src/formio/templates/multiValueTable.ejs b/src/formio/templates/multiValueTable.ejs
index f73d48aad..9a35f681a 100644
--- a/src/formio/templates/multiValueTable.ejs
+++ b/src/formio/templates/multiValueTable.ejs
@@ -4,7 +4,7 @@
   {% if (!ctx.disabled) {%}
     <tr>
       <td colspan="2">
-        <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="addButton">
+        <button class="utrecht-button utrecht-button--primary-action" ref="addButton">
           <i class="{{ctx.iconClass('plus')}}"></i>
           <div class="{{ctx.ofPrefix}}multi-value-table__button-label">{{ctx.t(ctx.addAnother, {_userInput: true})}}</div>
         </button>