feat: add props to dialog component to manage button labels and visib…

…ility add the props confirmButtonLabel, cancelButtonLabel, disableConfirmButton and disableCancelButton to the dialog component
nimec01 · Oct 5, 2022 · 0b4e9a0 · 0b4e9a0
1 parent f49c02c
commit 0b4e9a0
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 18 deletions.
diff --git a/docs/api/DialogComponent.md b/docs/api/DialogComponent.md
@@ -53,6 +53,26 @@ Component that shows the dialog.
 - type: string
 - default value: ''
 
+`confirmButtonLabel`: Label for the confirm button
+
+- type: string
+- default value: 'Yes'
+
+`cancelButtonLabel`: Label for the cancel button
+
+- type: string
+- default value: 'Yes'
+
+`disableConfirmButton`: When true, hides the confirm button
+
+- type: bool
+- default value: false
+
+`confirmButtonLabel`: When true, hides the cancel button
+
+- type: bool
+- default value: false
+
 ### Example usage
 
 ```tsx

diff --git a/src/dialog/DialogComponent.tsx b/src/dialog/DialogComponent.tsx
@@ -15,6 +15,10 @@ interface DialogComponentProps {
   cardActionsClassName?: string;
   confirmButtonClassName?: string;
   cancelButtonClassName?: string;
+  confirmButtonLabel?: string;
+  cancelButtonLabel?: string;
+  disableConfirmButton?: boolean;
+  disableCancelButton?: boolean;
 }
 
 export function DialogComponent({
@@ -27,6 +31,10 @@ export function DialogComponent({
   cardActionsClassName,
   confirmButtonClassName,
   cancelButtonClassName,
+  confirmButtonLabel = 'Yes',
+  cancelButtonLabel = 'No',
+  disableConfirmButton = false,
+  disableCancelButton = false,
 }: DialogComponentProps) {
   const { onConfirm, onCancel, state } = useDialog();
 
@@ -92,24 +100,28 @@ export function DialogComponent({
           <div
             className={clsx(!removeDefaultClasses && 'dialog__card__actions', cardActionsClassName)}
           >
-            <button
-              className={clsx(
-                !removeDefaultClasses && 'dialog__button dialog__success',
-                confirmButtonClassName,
-              )}
-              data-dialog-action="resolve"
-            >
-              Yes
-            </button>
-            <button
-              className={clsx(
-                !removeDefaultClasses && 'dialog__button dialog__error',
-                cancelButtonClassName,
-              )}
-              data-dialog-action="reject"
-            >
-              No
-            </button>
+            {!disableConfirmButton && (
+              <button
+                className={clsx(
+                  !removeDefaultClasses && 'dialog__button dialog__success',
+                  confirmButtonClassName,
+                )}
+                data-dialog-action="resolve"
+              >
+                {confirmButtonLabel}
+              </button>
+            )}
+            {!disableCancelButton && (
+              <button
+                className={clsx(
+                  !removeDefaultClasses && 'dialog__button dialog__error',
+                  cancelButtonClassName,
+                )}
+                data-dialog-action="reject"
+              >
+                {cancelButtonLabel}
+              </button>
+            )}
           </div>
         </form>
       </div>

diff --git a/tests/DialogComponentProps.test.tsx b/tests/DialogComponentProps.test.tsx
@@ -154,4 +154,106 @@ describe('DialogComponent Props', () => {
       expect(dialog.querySelector('.custom-cancel-button')).not.toBeNull();
     });
   });
+
+  describe("Prop confirmButtonLabel={'Confirm'}", () => {
+    beforeEach(async () => {
+      const portalElement = document.createElement('div');
+      portalElement.setAttribute('id', 'dialog');
+      portalElement.setAttribute('data-testid', 'dialog');
+
+      render(
+        <DialogProvider>
+          <TestDialog dialogProp="Wanna confirm?" />
+          <DialogComponent confirmButtonLabel={'Confirm'} />
+        </DialogProvider>,
+        {
+          container: document.body.appendChild(portalElement),
+        },
+      );
+
+      await userEvent.click(screen.getByText('Open dialog'));
+    });
+
+    it('should display the confirm button with correct label', () => {
+      const dialog = screen.getByTestId('dialog');
+      expect(dialog.querySelector('.dialog__success')).toBeDefined();
+      expect(dialog.querySelector('.dialog__success')?.innerHTML).toEqual('Confirm');
+    });
+  });
+
+  describe("Prop cancelButtonLabel={'Cancel'}", () => {
+    beforeEach(async () => {
+      const portalElement = document.createElement('div');
+      portalElement.setAttribute('id', 'dialog');
+      portalElement.setAttribute('data-testid', 'dialog');
+
+      render(
+        <DialogProvider>
+          <TestDialog dialogProp="Wanna confirm?" />
+          <DialogComponent cancelButtonLabel={'Cancel'} />
+        </DialogProvider>,
+        {
+          container: document.body.appendChild(portalElement),
+        },
+      );
+
+      await userEvent.click(screen.getByText('Open dialog'));
+    });
+
+    it('should display the cancel button with correct label', () => {
+      const dialog = screen.getByTestId('dialog');
+      expect(dialog.querySelector('.dialog__error')).toBeDefined();
+      expect(dialog.querySelector('.dialog__error')?.innerHTML).toEqual('Cancel');
+    });
+  });
+
+  describe('Prop disableConfirmButton={true}', () => {
+    beforeEach(async () => {
+      const portalElement = document.createElement('div');
+      portalElement.setAttribute('id', 'dialog');
+      portalElement.setAttribute('data-testid', 'dialog');
+
+      render(
+        <DialogProvider>
+          <TestDialog dialogProp="Wanna confirm?" />
+          <DialogComponent disableConfirmButton={true} />
+        </DialogProvider>,
+        {
+          container: document.body.appendChild(portalElement),
+        },
+      );
+
+      await userEvent.click(screen.getByText('Open dialog'));
+    });
+
+    it('should not display the confirm button', () => {
+      const dialog = screen.getByTestId('dialog');
+      expect(dialog.querySelector('.dialog__success')).toBeNull();
+    });
+  });
+
+  describe('Prop disableCancelButton={true}', () => {
+    beforeEach(async () => {
+      const portalElement = document.createElement('div');
+      portalElement.setAttribute('id', 'dialog');
+      portalElement.setAttribute('data-testid', 'dialog');
+
+      render(
+        <DialogProvider>
+          <TestDialog dialogProp="Wanna confirm?" />
+          <DialogComponent disableCancelButton={true} />
+        </DialogProvider>,
+        {
+          container: document.body.appendChild(portalElement),
+        },
+      );
+
+      await userEvent.click(screen.getByText('Open dialog'));
+    });
+
+    it('should not display the confirm button', () => {
+      const dialog = screen.getByTestId('dialog');
+      expect(dialog.querySelector('.dialog__error')).toBeNull();
+    });
+  });
 });