frontend: ConfirmDialog: Add update to confirm dialog story

Signed-off-by: Vincent T <[email protected]>

Author: vyncent-t

frontend/src/components/common/ConfirmDialog.stories.tsx

@@ -26,3 +26,19 @@ ConfirmDialogClosed.args = {
   title: 'A fine title',
   description: 'A really good description.',
 };
+
+export const ConfirmDialogWithCheckbox = Template.bind({});
+ConfirmDialogWithCheckbox.args = {
+  open: true,
+  title: 'A fine title',
+  description: 'A really good description, only now we are using a checkbox.',
+  checkboxDescription: 'Click the checkbox.',
+};
+
+export const ConfirmDialogWithCheckboxClosed = Template.bind({});
+ConfirmDialogWithCheckboxClosed.args = {
+  open: false,
+  title: 'A fine title',
+  description: 'A really good description, only now we are using a checkbox.',
+  checkboxDescription: 'Click the checkbox.',
+};

frontend/src/components/common/ConfirmDialog.tsx

@@ -10,8 +10,18 @@ import { useTranslation } from 'react-i18next';
 import { DialogTitle } from './Dialog';
 
 export interface ConfirmDialogProps extends MuiDialogProps {
+  /**
+   * Title of the dialog box
+   */
   title: string;
+  /**
+   * Description of the dialog box
+   */
   description: string | React.ReactNode;
+  /*
+   * Description of the checkbox
+   * Note: If this is provided, an additional description will be rendered under the original and will require the checkbox to continue action.
+   */
   checkboxDescription?: string;
   onConfirm: () => void;
   handleClose: () => void;