add custom classname property for modal header, body and footer

Author: karthikjeeyar

packages/module/src/AttachmentEdit/AttachmentEdit.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import AttachmentEdit, { AttachmentEditProps } from './AttachmentEdit';
 
 describe('AttachmentEdit', () => {
@@ -69,4 +70,29 @@ describe('AttachmentEdit', () => {
     screen.getByText('Save');
     screen.getByText('Close');
   });
+
+  it('should render AttachmentEdit with custom classNames', async () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></AttachmentEdit>
+    );
+
+    const modalHeader = document.querySelector('header.custom-header-class');
+    expect(modalHeader).toBeInTheDocument();
+    const modalBody = document.querySelector('.custom-body-class');
+    expect(modalBody).toBeInTheDocument();
+    const modalfooter = document.querySelector('.custom-footer-class');
+    expect(modalfooter).toBeInTheDocument();
+  });
 });

packages/module/src/AttachmentEdit/AttachmentEdit.tsx

@@ -28,6 +28,12 @@ export interface AttachmentEditProps {
   primaryActionButtonText?: string;
   /** Secondary action button text */
   secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
 export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
@@ -40,6 +46,9 @@ export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
   title = 'Edit attachment',
   displayMode = ChatbotDisplayMode.default,
   isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   primaryActionButtonText = 'Save',
   secondaryActionButtonText = 'Cancel'
 }: AttachmentEditProps) => {
@@ -66,6 +75,9 @@ export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
       title={title}
       displayMode={displayMode}
       isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };

packages/module/src/CodeModal/CodeModal.test.tsx

@@ -20,4 +20,31 @@ describe('ChatbotModal', () => {
     );
     expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
   });
+
+  it('should render CodeModal with custom classNames', async () => {
+    render(
+      <CodeModal
+        isCompact
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        handleModalToggle={jest.fn()}
+        onPrimaryAction={jest.fn()}
+        onSecondaryAction={jest.fn()}
+        title="Preview attachment"
+        primaryActionBtn="Submit"
+        secondaryActionBtn="Cancel"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></CodeModal>
+    );
+
+    const modalHeader = document.querySelector('header.custom-header-class');
+    expect(modalHeader).toBeInTheDocument();
+    const modalBody = document.querySelector('.custom-body-class');
+    expect(modalBody).toBeInTheDocument();
+    const modalfooter = document.querySelector('.custom-footer-class');
+    expect(modalfooter).toBeInTheDocument();
+  });
 });

packages/module/src/CodeModal/CodeModal.tsx

@@ -43,6 +43,12 @@ export interface CodeModalProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
 export const CodeModal: FunctionComponent<CodeModalProps> = ({
@@ -61,6 +67,9 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   title,
   displayMode = ChatbotDisplayMode.default,
   isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = useState(code);
@@ -102,8 +111,8 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
       displayMode={displayMode}
       isCompact={isCompact}
     >
-      <ModalHeader title={title} labelId="code-modal-title" />
-      <ModalBody id="code-modal-body">
+      <ModalHeader className={modalHeaderClassName} title={title} labelId="code-modal-title" />
+      <ModalBody className={modalBodyClassName} id="code-modal-body">
         <Stack className="pf-chatbot__code-modal-body">
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
@@ -130,7 +139,7 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
           </StackItem>
         </Stack>
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter className={modalFooterClassName}>
         <Button isBlock key="code-modal-primary" variant="primary" onClick={handlePrimaryAction} form="code-modal-form">
           {primaryActionBtn}
         </Button>

packages/module/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { PreviewAttachment } from './PreviewAttachment';
 
 describe('PreviewAttachment', () => {
@@ -64,4 +65,28 @@ describe('PreviewAttachment', () => {
     screen.getByText('Edit');
     screen.getByText('Close');
   });
+
+  it('should render PreviewAttachment with custom classNames', async () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></PreviewAttachment>
+    );
+
+    const modalHeader = document.querySelector('header.custom-header-class');
+    expect(modalHeader).toBeInTheDocument();
+    const modalBody = document.querySelector('.custom-body-class');
+    expect(modalBody).toBeInTheDocument();
+    const modalfooter = document.querySelector('.custom-footer-class');
+    expect(modalfooter).toBeInTheDocument();
+  });
 });

packages/module/src/PreviewAttachment/PreviewAttachment.tsx

@@ -28,6 +28,12 @@ export interface PreviewAttachmentProps {
   primaryActionButtonText?: string;
   /** Secondary action button text */
   secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
 export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
@@ -41,6 +47,9 @@ export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
   primaryActionButtonText = 'Edit',
   secondaryActionButtonText = 'Dismiss',
   displayMode = ChatbotDisplayMode.default,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   isCompact
 }: PreviewAttachmentProps) => {
   const handleEdit = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
@@ -70,6 +79,9 @@ export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
       isReadOnly
       displayMode={displayMode}
       isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };