chore: Button styles (#4319)

* update button styles --------- Co-authored-by: Dave Samojlenko <[email protected]>
cds-snc · Oct 3, 2024 · 015093f · 015093f
1 parent 3d8284f
commit 015093f
Show file tree

Hide file tree

Showing 27 changed files with 92 additions and 297 deletions.
diff --git a/app/(gcforms)/[locale]/(app administration)/admin/(no nav)/buttons/page.tsx b/app/(gcforms)/[locale]/(app administration)/admin/(no nav)/buttons/page.tsx
@@ -0,0 +1,15 @@
+import { Button } from "@clientComponents/globals";
+
+export default async function Page() {
+  return (
+    <>
+      <h3 className="mb-4">Button component preview</h3>
+      <div className="flex space-x-4">
+        <Button theme="primary">Submit</Button>
+        <Button theme="secondary">Cancel</Button>
+        <Button theme="destructive">Delete</Button>
+        <Button theme="disabled">Disabled</Button>
+      </div>
+    </>
+  );
+}
diff --git a/app/(gcforms)/[locale]/(app administration)/admin/(no nav)/page.tsx b/app/(gcforms)/[locale]/(app administration)/admin/(no nav)/page.tsx
@@ -69,6 +69,11 @@ export default async function Page({ params: { locale } }: { params: { locale: s
                 <a href={`/${locale}/admin/typography`}>{t("typography")}</a>
               </Link>
             </li>
+            <li>
+              <Link href={`/${locale}/admin/buttons`} legacyBehavior>
+                <a href={`/${locale}/admin/buttons`}>{t("buttons")}</a>
+              </Link>
+            </li>
             <li>
               <Link href={`/${locale}/admin/upload`} legacyBehavior>
                 <a href={`/${locale}/admin/upload`}>{t("upload")}</a>

diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/preview/BackButton.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/preview/BackButton.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { useGCFormsContext } from "@lib/hooks/useGCFormContext";
-import { Button } from "@clientComponents/forms";
+import { Button } from "@clientComponents/globals";
 import { Language } from "@lib/types/form-builder-types";
 
 // Must be placed withing context of the GCFormsContext.Provider
@@ -9,8 +9,8 @@ export const BackButton = ({ language, onClick }: { language: Language; onClick?
   const { setGroup, previousGroup } = useGCFormsContext();
   return (
     <Button
-      type="button"
-      secondary={true}
+      theme="secondary"
+      className="mr-4"
       onClick={() => {
         setGroup(previousGroup);
         onClick && onClick();

diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/preview/Preview.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/preview/Preview.tsx
@@ -6,7 +6,8 @@ import Markdown from "markdown-to-jsx";
 import { PreviewNavigation } from "./PreviewNavigation";
 import { getRenderedForm } from "@lib/formBuilder";
 import { FormProperties, PublicFormRecord } from "@lib/types";
-import { Button, RichText, ClosedPage } from "@clientComponents/forms";
+import { RichText, ClosedPage } from "@clientComponents/forms";
+import { Button } from "@clientComponents/globals";
 import { NextButton } from "@clientComponents/forms/NextButton/NextButton";
 
 import {
@@ -82,11 +83,6 @@ export const Preview = ({
     setSent(null);
   };
 
-  const preventSubmit = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.preventDefault();
-    return false;
-  };
-
   const responsesLink = `/${i18n.language}/form-builder/${id}/responses/new`;
   const settingsLink = `/${i18n.language}/form-builder/${id}/settings`;
 
@@ -221,7 +217,7 @@ export const Preview = ({
                                     className="mb-4"
                                     onClick={(e) => {
                                       if (disableSubmit) {
-                                        return preventSubmit(e);
+                                        e.preventDefault();
                                       }
                                     }}
                                   >

diff --git a/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Alert.tsx b/app/(gcforms)/[locale]/(user authentication)/components/client/forms/Alert.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import classnames from "classnames";
 import { useTranslation } from "@i18n/client";
+import { Button } from "@clientComponents/globals";
 
 export enum ErrorStatus {
   SUCCESS,
@@ -67,14 +68,15 @@ export const Alert = ({
       role="alert"
     >
       {dismissible ? (
-        <button
+        <Button
           id="dismissButton"
           aria-label={t("alert.dismissAlert")}
-          className="gc-button gc-button--icon gc-button--secondary float-right"
+          className="float-right"
+          theme="secondary"
           onClick={onDismiss}
         >
           x
-        </button>
+        </Button>
       ) : null}
       <div className="gc-alert__body">
         {heading && <h2>{heading}</h2>}

diff --git a/components/clientComponents/admin/FormAccess/FormAccess.tsx b/components/clientComponents/admin/FormAccess/FormAccess.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Button } from "@clientComponents/forms";
+import { Button } from "@clientComponents/globals";
 import { logMessage } from "@lib/logger";
 import Loader from "@clientComponents/globals/Loader";
 import axios from "axios";
@@ -155,7 +155,7 @@ const FormAccess = (props: FormAccessProps): React.ReactElement => {
               defaultValue={newEmail}
               aria-label={t("settings.formAccess.addEmailAriaLabel")}
             />
-            <Button type="submit" disabled={newEmail === ""} testid="add-email">
+            <Button type="submit" disabled={newEmail === ""} dataTestId="add-email">
               {t("settings.formAccess.addEmailButton")}
             </Button>
           </form>

diff --git a/components/clientComponents/admin/JsonUpload/JsonUpload.tsx b/components/clientComponents/admin/JsonUpload/JsonUpload.tsx
@@ -9,6 +9,7 @@ import { logMessage } from "@lib/logger";
 import { useRefresh } from "@lib/hooks/useRefresh";
 import { safeJSONParse } from "@lib/utils";
 import { toast } from "@formBuilder/components/shared";
+import { Button } from "@clientComponents/globals";
 
 interface JSONUploadProps {
   form?: FormRecord;
@@ -125,9 +126,9 @@ export const JSONUpload = (props: JSONUploadProps): React.ReactElement => {
                 aria-label={t("upload.jsonConfigAriaLabel")}
               />
               <div>
-                <button type="submit" className="gc-button mt-10" data-testid="upload">
+                <Button type="submit" className="mt-10" data-testid="upload">
                   {t("upload.submit")}
-                </button>
+                </Button>
                 {submitStatus && (
                   <span id="submitStatus" data-testid="submitStatus">
                     {submitStatus}

diff --git a/components/clientComponents/admin/TemplateDelete/Settings.tsx b/components/clientComponents/admin/TemplateDelete/Settings.tsx
@@ -2,7 +2,8 @@
 import React from "react";
 import JSONUpload from "@clientComponents/admin/JsonUpload/JsonUpload";
 import { useTranslation } from "@i18n/client";
-import { DeleteButton, Label } from "@clientComponents/forms";
+import { Label } from "@clientComponents/forms";
+import { Button } from "@clientComponents/globals";
 import { useSearchParams } from "next/navigation";
 import axios from "axios";
 import { logMessage } from "@lib/logger";
@@ -11,6 +12,7 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import FormAccess from "@clientComponents/admin/FormAccess/FormAccess";
 import { getLocalizedProperty } from "@lib/utils";
+import { redirect } from "next/navigation";
 
 interface FormSettingsProps {
   form: FormRecord;
@@ -70,10 +72,12 @@ const FormSettings = (props: FormSettingsProps): React.ReactElement => {
           <JSONUpload form={formRecord} />
           <br />
           <div>
-            <DeleteButton
-              action={handleDelete}
-              data={formRecord.id}
-              redirect={`/admin/view-templates`}
+            <Button
+              theme="destructive"
+              onClick={() => {
+                handleDelete(formRecord.id);
+                redirect("/admin/view-templates");
+              }}
             />
           </div>
         </TabPanel>

diff --git a/components/clientComponents/forms/Alert/Alert.tsx b/components/clientComponents/forms/Alert/Alert.tsx
@@ -2,6 +2,7 @@
 import React, { useEffect, useRef } from "react";
 import classnames from "classnames";
 import { useTranslation } from "@i18n/client";
+import { Button } from "@clientComponents/globals";
 
 export enum ErrorStatus {
   SUCCESS,
@@ -68,14 +69,15 @@ export const Alert = ({
       role="alert"
     >
       {dismissible ? (
-        <button
+        <Button
           id="dismissButton"
           aria-label={t("alert.dismissAlert")}
-          className="gc-button gc-button--icon gc-button--secondary float-right"
+          theme="icon"
+          className="float-right"
           onClick={onDismiss}
         >
           x
-        </button>
+        </Button>
       ) : null}
       <div className="gc-alert__body">
         {heading && <h2>{heading}</h2>}

diff --git a/components/clientComponents/forms/Button/Button.test.js b/components/clientComponents/forms/Button/Button.test.js
diff --git a/components/clientComponents/forms/Button/Button.tsx b/components/clientComponents/forms/Button/Button.tsx
diff --git a/components/clientComponents/forms/Button/DeleteButton.tsx b/components/clientComponents/forms/Button/DeleteButton.tsx
diff --git a/components/clientComponents/forms/DynamicRow/DynamicRow.tsx b/components/clientComponents/forms/DynamicRow/DynamicRow.tsx
@@ -4,7 +4,8 @@ import classnames from "classnames";
 import { useField } from "formik";
 import { GenerateElement } from "@lib/formBuilder";
 import { FormElement } from "@lib/types";
-import { Button, Description } from "@clientComponents/forms";
+import { Description } from "@clientComponents/forms";
+import { Button } from "@clientComponents/globals";
 import { useTranslation } from "@i18n/client";
 
 interface DynamicGroupProps {
@@ -139,23 +140,22 @@ export const DynamicGroup = (props: DynamicGroupProps): React.ReactElement => {
               name={`${field.name}.${index}`}
               lang={lang}
             />
-            <div>
+            <div className="mb-4">
               {!hasReachedMaxNumberOfRows && index === rows.length - 1 && (
                 <Button
-                  type="button"
-                  secondary={true}
+                  theme="secondary"
+                  className="mr-4"
                   onClick={addRow}
-                  testid={`add-row-button-${field.name}`}
+                  dataTestId={`add-row-button-${field.name}`}
                 >
                   {`${addButtonLabel}`}
                 </Button>
               )}
               {rows.length > 1 && (
                 <Button
-                  type="button"
-                  destructive={true}
+                  theme="destructive"
                   onClick={() => deleteRow(index)}
-                  testid={`delete-row-button-${field.name}.${index}`}
+                  dataTestId={`delete-row-button-${field.name}.${index}`}
                 >
                   {`${deleteButtonLabel} ${index + 1}`}
                 </Button>