diff --git a/docs/api/DialogComponent.md b/docs/api/DialogComponent.md index f9e0a83..627509c 100644 --- 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 index ce544cb..3aaf9bb 100644 --- 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({
- - + {!disableConfirmButton && ( + + )} + {!disableCancelButton && ( + + )}
diff --git a/tests/DialogComponentProps.test.tsx b/tests/DialogComponentProps.test.tsx index ad7929a..8f57609 100644 --- 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( + + + + , + { + 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( + + + + , + { + 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( + + + + , + { + 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( + + + + , + { + 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(); + }); + }); });