♻️ [#462] Replace other references to our button

open-formulieren · Oct 13, 2023 · f002ac4 · f002ac4
1 parent 6a3fd4e
commit f002ac4
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 39 deletions.
diff --git a/src/components/ExistingSubmissionOptions.js b/src/components/ExistingSubmissionOptions.js
@@ -1,9 +1,9 @@
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useNavigate} from 'react-router-dom';
 
-import Button from 'components/Button';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import Types from 'types';
 
@@ -15,20 +15,20 @@ const ExistingSubmissionOptions = ({form, onFormAbort}) => {
   return (
     <Toolbar modifiers={['column']}>
       <ToolbarList>
-        <Button variant="primary" onClick={() => navigate(firstStepRoute)}>
+        <UtrechtButton appearance="primary-action-button" onClick={() => navigate(firstStepRoute)}>
           <FormattedMessage
             defaultMessage="Continue existing submission"
             description="Continue existing submission button label"
           />
-        </Button>
+        </UtrechtButton>
       </ToolbarList>
       <ToolbarList>
-        <Button variant="danger" onClick={onFormAbort}>
+        <UtrechtButton appearance="primary-action-button" hint="danger" onClick={onFormAbort}>
           <FormattedMessage
             defaultMessage="Abort existing submission"
             description="Abort existing submission button label"
           />
-        </Button>
+        </UtrechtButton>
       </ToolbarList>
     </Toolbar>
   );

diff --git a/src/components/LogoutButton.js b/src/components/LogoutButton.js
@@ -1,17 +1,17 @@
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Button from 'components/Button';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 
 const LogoutButton = ({onLogout}) => {
   return (
     <Toolbar modifiers={['bottom', 'reverse']}>
       <ToolbarList>
-        <Button variant="danger" onClick={onLogout}>
+        <UtrechtButton appearance="primary-action-button" hint="danger" onClick={onLogout}>
           <FormattedMessage description="Log out button text" defaultMessage="Log out" />
-        </Button>
+        </UtrechtButton>
       </ToolbarList>
     </Toolbar>
   );

diff --git a/src/components/PaymentForm.js b/src/components/PaymentForm.js
@@ -1,9 +1,8 @@
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React, {useEffect, useRef} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Button from 'components/Button';
-
 const AUTOSUBMIT_AFTER = 5000;
 
 /**
@@ -31,9 +30,9 @@ const PaymentForm = ({method, url, data, autoSubmit = true}) => {
   return (
     <form ref={formRef} method={method} action={url}>
       {dataFields}
-      <Button type="submit" variant="primary">
+      <UtrechtButton type="submit" appearance="primary-action-button">
         <FormattedMessage description="Start payment button" defaultMessage="Pay now" />
-      </Button>
+      </UtrechtButton>
     </form>
   );
 };

diff --git a/src/components/Sessions/RequireSession.js b/src/components/Sessions/RequireSession.js
@@ -1,11 +1,11 @@
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React, {useContext, useEffect, useState} from 'react';
 import {FormattedMessage, FormattedRelativeTime} from 'react-intl';
 import {useTimeout, useTimeoutFn} from 'react-use';
 
 import {ConfigContext} from 'Context';
 import {apiCall} from 'api';
-import Button from 'components/Button';
 import Card from 'components/Card';
 import ErrorMessage from 'components/ErrorMessage';
 import Link from 'components/Link';
@@ -148,9 +148,9 @@ const ExpiryModal = ({showWarning, secondsToExpiry, setWarningDismissed}) => {
       </ErrorMessage>
       <Toolbar modifiers={['bottom', 'reverse']}>
         <ToolbarList>
-          <Button
+          <UtrechtButton
             type="submit"
-            variant="primary"
+            appearance="primary-action-button"
             onClick={async event => {
               event.preventDefault();
               await apiCall(`${baseUrl}ping`);
@@ -160,7 +160,7 @@ const ExpiryModal = ({showWarning, secondsToExpiry, setWarningDismissed}) => {
               description="Extend session button (in modal)"
               defaultMessage="Extend"
             />
-          </Button>
+          </UtrechtButton>
         </ToolbarList>
       </Toolbar>
     </Modal>

diff --git a/src/components/SubmissionConfirmation.js b/src/components/SubmissionConfirmation.js
@@ -1,3 +1,4 @@
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
@@ -6,7 +7,6 @@ import {useAsync} from 'react-use';
 import {post} from 'api';
 import Anchor from 'components/Anchor';
 import Body from 'components/Body';
-import Button from 'components/Button';
 import Card from 'components/Card';
 import ErrorBoundary from 'components/ErrorBoundary';
 import FAIcon from 'components/FAIcon';
@@ -175,12 +175,12 @@ const SubmissionConfirmation = ({statusUrl, onFailure, onConfirmed, donwloadPDFT
           <Toolbar modifiers={['reverse']}>
             <ToolbarList>
               <Anchor href={mainWebsiteUrl} rel="noopener noreferrer">
-                <Button type="button" variant="primary">
+                <UtrechtButton appearance="primary-action-button">
                   <FormattedMessage
                     description="Back to main website link title"
                     defaultMessage="Return to main website"
                   />
-                </Button>
+                </UtrechtButton>
               </Anchor>
             </ToolbarList>
           </Toolbar>

diff --git a/src/components/appointments/cancel/CancelAppointment.js b/src/components/appointments/cancel/CancelAppointment.js
@@ -1,3 +1,4 @@
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import {Formik} from 'formik';
 import React, {useContext, useState} from 'react';
 import {FormattedDate, FormattedMessage} from 'react-intl';
@@ -6,7 +7,6 @@ import {useNavigate} from 'react-router-dom';
 import {ConfigContext} from 'Context';
 import {post} from 'api';
 import Body from 'components/Body';
-import Button from 'components/Button';
 import Card from 'components/Card';
 import ErrorMessage from 'components/ErrorMessage';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
@@ -124,12 +124,12 @@ out your email address for verification purposes.`}
 
             <Toolbar modifiers={['bottom', 'reverse']}>
               <ToolbarList>
-                <Button type="submit" variant="primary">
+                <UtrechtButton type="submit" appearance="primary-action-button">
                   <FormattedMessage
                     description="Cancel appointment submit button"
                     defaultMessage="Cancel appointment"
                   />
-                </Button>
+                </UtrechtButton>
               </ToolbarList>
             </Toolbar>
           </Body>

diff --git a/src/components/appointments/steps/ChooseProductStep.js b/src/components/appointments/steps/ChooseProductStep.js
@@ -1,3 +1,4 @@
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import {FieldArray, Form, Formik} from 'formik';
 import produce from 'immer';
 import PropTypes from 'prop-types';
@@ -8,7 +9,6 @@ import {useNavigate} from 'react-router-dom';
 import {z} from 'zod';
 import {toFormikValidationSchema} from 'zod-formik-adapter';
 
-import Button from 'components/Button';
 import {CardTitle} from 'components/Card';
 import FAIcon from 'components/FAIcon';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
@@ -79,17 +79,16 @@ const ChooseProductStepFields = ({values: {products = []}, validateForm}) => {
 
             {supportsMultipleProducts && (
               <div className={getBEMClassName('editgrid__add-button')}>
-                <Button
-                  type="button"
-                  variant="primary"
+                <UtrechtButton
+                  appearance="primary-action-button"
                   onClick={withValidate(() => arrayHelpers.push({productId: '', amount: 1}))}
                 >
                   <FAIcon icon="plus" />
                   <FormattedMessage
                     description="Appointments: add additional product/service button text"
                     defaultMessage="Add another product"
                   />
-                </Button>
+                </UtrechtButton>
               </div>
             )}
           </div>
@@ -134,12 +133,12 @@ const ProductWrapper = ({index, numProducts, onRemove, children}) => {
       {numProducts > 1 && (
         <Toolbar modifiers={['reverse']}>
           <ToolbarList>
-            <Button type="button" variant="danger" onClick={onRemove}>
+            <UtrechtButton appearance="primary-action-button" hint="danger" onClick={onRemove}>
               <FormattedMessage
                 description="Appointments: remove product/service button text"
                 defaultMessage="Remove"
               />
-            </Button>
+            </UtrechtButton>
           </ToolbarList>
         </Toolbar>
       )}

diff --git a/src/components/modals/FormStepSaveModal.js b/src/components/modals/FormStepSaveModal.js
@@ -1,6 +1,7 @@
 /**
  * Display a modal to allow the user to save the form step in it's current state.
  */
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import {Formik} from 'formik';
 import PropTypes from 'prop-types';
 import React, {useContext} from 'react';
@@ -10,7 +11,6 @@ import {useImmerReducer} from 'use-immer';
 import {ConfigContext} from 'Context';
 import {destroy, post} from 'api';
 import Body from 'components/Body';
-import Button from 'components/Button';
 import ErrorMessage from 'components/ErrorMessage';
 import Loader from 'components/Loader';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
@@ -158,12 +158,12 @@ const FormStepSaveModal = ({
 
             <Toolbar modifiers={['bottom', 'reverse']}>
               <ToolbarList>
-                <Button type="submit" variant="primary" disabled={isSaving}>
+                <UtrechtButton type="submit" appearance="primary-action-button" disabled={isSaving}>
                   <FormattedMessage
                     description="Form save modal submit button"
                     defaultMessage="Continue later"
                   />
-                </Button>
+                </UtrechtButton>
               </ToolbarList>
             </Toolbar>
           </Body>

diff --git a/src/components/modals/FormStepSaveModal.stories.js b/src/components/modals/FormStepSaveModal.stories.js
@@ -1,10 +1,10 @@
 import {useArgs} from '@storybook/client-api';
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import {rest} from 'msw';
 import React from 'react';
 
 import {BASE_URL} from 'api-mocks';
-import Button from 'components/Button';
-import {ConfigDecorator, DeprecatedRouterDecorator} from 'story-utils/decorators';
+import {ConfigDecorator} from 'story-utils/decorators';
 
 import {default as FormStepSaveModalComponent} from './FormStepSaveModal';
 
@@ -49,9 +49,12 @@ export const FormStepSaveModal = {
     const [_, updateArgs] = useArgs();
     return (
       <>
-        <Button variant="primary" onClick={() => updateArgs({isOpen: true})}>
+        <UtrechtButton
+          appearance="primary-action-button"
+          onClick={() => updateArgs({isOpen: true})}
+        >
           Open Modal
-        </Button>
+        </UtrechtButton>
         <FormStepSaveModalComponent
           isOpen={isOpen}
           closeModal={() => {

diff --git a/src/i18n-zod.stories.js b/src/i18n-zod.stories.js
@@ -1,10 +1,10 @@
 import {userEvent, within} from '@storybook/testing-library';
+import {Button as UtrechtButton} from '@utrecht/component-library-react';
 import {Form, Formik} from 'formik';
 import {useIntl} from 'react-intl';
 import {z} from 'zod';
 import {toFormikValidationSchema} from 'zod-formik-adapter';
 
-import Button from 'components/Button';
 import {EmailField, TextField} from 'components/forms';
 import useZodErrorMap from 'hooks/useZodErrorMap';
 
@@ -106,9 +106,9 @@ const AccessibleErrorsExample = ({onSubmit}) => {
           className="openforms-form-control"
           style={{display: 'flex', justifyContent: 'flex-end'}}
         >
-          <Button type="submit" variant="primary">
+          <UtrechtButton type="submit" appearance="primary-action-button">
             Submit
-          </Button>
+          </UtrechtButton>
         </div>
       </Form>
     </Formik>