@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

package/src/ChatbotFooter/ChatbotFootnote.tsx

@@ -2,7 +2,9 @@
 // Chatbot Footer - Footnote
 // ============================================================================
 
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
+
+import { useState } from 'react';
 
 // Import Patternfly components
 import { Button, Content, ContentVariants, Flex, PopoverProps } from '@patternfly/react-core';
@@ -14,7 +16,7 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/exte
 // Import Chatbot components
 import ChatbotPopover from '../ChatbotPopover/ChatbotPopover';
 
-export interface ChatbotFootnoteProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotFootnoteProps extends Omit<HTMLProps<HTMLDivElement>, 'popover'> {
   /** Label to show for the footnote */
   label: string;
   /** Config for the popover which opens up when footnote is clicked */
@@ -58,14 +60,14 @@ export interface ChatbotFootnotePopoverLink {
   url: string;
 }
 
-export const ChatbotFootnote: React.FunctionComponent<ChatbotFootnoteProps> = ({
+export const ChatbotFootnote: FunctionComponent<ChatbotFootnoteProps> = ({
   label,
   popover,
   className,
   ...props
 }: ChatbotFootnoteProps) => {
   // Popover visibility state
-  const [isVisible, setIsVisible] = React.useState<boolean>(false);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
 
   // Define popover body content
   const popoverBodyContent = (

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -9,7 +9,7 @@
   grid-template-columns: 1fr auto;
   gap: var(--pf-t--global--spacer--sm);
   position: relative; // this is so focus ring on parent chatbot doesn't include header
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   justify-content: space-between;
   padding: var(--pf-t--global--spacer--lg);
 
@@ -76,7 +76,7 @@
 .pf-chatbot--drawer,
 .pf-chatbot--docked {
   .pf-chatbot__header {
-    background-color: var(--pf-t--chatbot--background);
+    background-color: var(--pf-t--global--background--color--secondary--default);
   }
 }
 
@@ -144,7 +144,7 @@
 .pf-chatbot.pf-m-compact {
   .pf-chatbot__header {
     gap: var(--pf-t--global--spacer--sm);
-    padding: var(--pf-t--global--spacer--sm);
+    padding: var(--pf-t--global--spacer--md);
   }
 
   .pf-chatbot__header .pf-chatbot__title img {

package/src/ChatbotHeader/ChatbotHeader.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotHeader from './ChatbotHeader';
 

package/src/ChatbotHeader/ChatbotHeader.tsx

@@ -1,18 +1,15 @@
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 
 import { Divider } from '@patternfly/react-core';
 
-export interface ChatbotHeaderProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotHeaderProps extends HTMLProps<HTMLDivElement> {
   /** Content to be displayed in the chatbot header */
   children: React.ReactNode;
   /** Custom classname for the header component */
   className?: string;
 }
 
-export const ChatbotHeader: React.FunctionComponent<ChatbotHeaderProps> = ({
-  className,
-  children
-}: ChatbotHeaderProps) => (
+export const ChatbotHeader: FunctionComponent<ChatbotHeaderProps> = ({ className, children }: ChatbotHeaderProps) => (
   <div className="pf-chatbot__header-container">
     <div className={`pf-chatbot__header${className ? ` ${className}` : ''}`}>{children}</div>
     <Divider className="pf-chatbot__header__divider" />

package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotHeaderActions from './ChatbotHeaderActions';
 

package/src/ChatbotHeader/ChatbotHeaderActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface ChatbotHeaderActionsProps {
   /** Content to be displayed in the chatbot header */
@@ -7,7 +7,7 @@ export interface ChatbotHeaderActionsProps {
   className?: string;
 }
 
-export const ChatbotHeaderActions: React.FunctionComponent<ChatbotHeaderActionsProps> = ({
+export const ChatbotHeaderActions: FunctionComponent<ChatbotHeaderActionsProps> = ({
   className,
   children
 }: ChatbotHeaderActionsProps) => <div className={`pf-chatbot__actions ${className || ''}`}>{children}</div>;

package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
 import '@testing-library/jest-dom';

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { CloseIcon } from '@patternfly/react-icons';
@@ -20,7 +21,7 @@ export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
   isCompact?: boolean;
 }
 
-const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+const ChatbotHeaderCloseButtonBase: FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
   className,
   onClick,
   tooltipProps,
@@ -56,8 +57,8 @@ const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseBu
   </div>
 );
 
-export const ChatbotHeaderCloseButton = React.forwardRef(
-  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+export const ChatbotHeaderCloseButton = forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: Ref<HTMLButtonElement>) => (
     <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
   )
 );

package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotHeaderMain from './ChatbotHeaderMain';
 

package/src/ChatbotHeader/ChatbotHeaderMain.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface ChatbotHeaderMainProps {
   /** Custom classname for the header component */
@@ -7,7 +7,7 @@ export interface ChatbotHeaderMainProps {
   children: React.ReactNode;
 }
 
-export const ChatbotHeaderMain: React.FunctionComponent<ChatbotHeaderMainProps> = ({
+export const ChatbotHeaderMain: FunctionComponent<ChatbotHeaderMainProps> = ({
   className,
   children
 }: ChatbotHeaderMainProps) => (

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ChatbotHeaderMenu } from './ChatbotHeaderMenu';
 import '@testing-library/jest-dom';

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -16,10 +17,11 @@ export interface ChatbotHeaderMenuProps extends ButtonProps {
   innerRef?: React.Ref<HTMLButtonElement>;
   /** Content used in tooltip */
   tooltipContent?: string;
+  /** Sets menu to compact styling. */
   isCompact?: boolean;
 }
 
-const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
+const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   className,
   onMenuToggle,
   tooltipProps,
@@ -55,8 +57,6 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   </div>
 );
 
-export const ChatbotHeaderMenu = React.forwardRef(
-  (props: ChatbotHeaderMenuProps, ref: React.Ref<HTMLButtonElement>) => (
-    <ChatbotHeaderMenuBase innerRef={ref} {...props} />
-  )
-);
+export const ChatbotHeaderMenu = forwardRef((props: ChatbotHeaderMenuProps, ref: Ref<HTMLButtonElement>) => (
+  <ChatbotHeaderMenuBase innerRef={ref} {...props} />
+));

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DropdownItem } from '@patternfly/react-core';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
@@ -48,4 +47,13 @@ describe('ChatbotHeaderOptionsDropdown', () => {
     render(<ChatbotHeaderOptionsDropdown isCompact>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
     expect(screen.getByRole('button', { name: 'Chatbot options' })).toHaveClass('pf-m-compact');
   });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderOptionsDropdown isCompact toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Chatbot options/i })).toBeDisabled();
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
 
 import {
   Tooltip,
@@ -7,7 +8,8 @@ import {
   DropdownProps,
   MenuToggle,
   MenuToggleElement,
-  Icon
+  Icon,
+  MenuToggleProps
 } from '@patternfly/react-core';
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -20,21 +22,25 @@ export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, '
   tooltipProps?: TooltipProps;
   /** Aria label for menu toggle */
   menuToggleAriaLabel?: string;
+  /** Sets menu to compact styling. */
   isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
 }
 
-export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
+export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
   className,
   children,
   onSelect,
   tooltipProps,
   menuToggleAriaLabel = 'Chatbot options',
   isCompact,
+  toggleProps,
   ...props
 }: ChatbotHeaderOptionsDropdownProps) => {
-  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content="Chatbot options"
@@ -56,6 +62,7 @@ export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeader
         isExpanded={isOptionsMenuOpen}
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
         size={isCompact ? 'sm' : undefined}
+        {...toggleProps}
       />
     </Tooltip>
   );

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DropdownItem } from '@patternfly/react-core';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
@@ -50,4 +49,13 @@ describe('ChatbotHeaderSelectorDropdown', () => {
     );
     expect(screen.getByRole('button', { name: /Select model/i })).toHaveClass('pf-m-compact');
   });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Select model/i })).toBeDisabled();
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import type { FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
 
-import { Tooltip, TooltipProps, Dropdown, DropdownProps, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import {
+  Tooltip,
+  TooltipProps,
+  Dropdown,
+  DropdownProps,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleProps
+} from '@patternfly/react-core';
 
 export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps, 'toggle'> {
   /** Value of the selected dropdown item */
@@ -15,10 +24,15 @@ export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps,
   menuToggleAriaLabel?: string;
   /** Text displayed in Tooltip wrapping the display mode dropdown */
   tooltipContent?: string;
+  /** Sets menu to compact styling. */
   isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
+  /** Custom width for the dropdown */
+  dropdownWidth?: string;
 }
 
-export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
+export const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
   value,
   className,
   children,
@@ -27,12 +41,14 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
   tooltipContent = 'Select model',
   menuToggleAriaLabel,
   isCompact,
+  toggleProps,
+  dropdownWidth,
   ...props
 }: ChatbotHeaderSelectorDropdownProps) => {
-  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
-  const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Select model');
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
+  const [defaultAriaLabel, setDefaultAriaLabel] = useState('Select model');
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content={tooltipContent}
@@ -49,6 +65,10 @@ export const ChatbotHeaderSelectorDropdown: React.FunctionComponent<ChatbotHeade
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
         size={isCompact ? 'sm' : undefined}
         className={`${isCompact ? 'pf-m-compact' : ''}`}
+        {...toggleProps}
+        style={{
+          width: dropdownWidth
+        }}
       >
         {value}
       </MenuToggle>

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotHeaderTitle from './ChatbotHeaderTitle';

package/src/ChatbotHeader/ChatbotHeaderTitle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 import { SplitItem } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
@@ -22,7 +22,7 @@ export interface ChatbotHeaderTitleProps {
   showOnDefault?: React.ReactNode | string;
 }
 
-export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps> = ({
+export const ChatbotHeaderTitle: FunctionComponent<ChatbotHeaderTitleProps> = ({
   className,
   children,
   displayMode,

package/src/ChatbotModal/ChatbotModal.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotModal from './ChatbotModal';
 import '@testing-library/jest-dom';

package/src/ChatbotModal/ChatbotModal.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Code Modal - Chatbot Modal with Code Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Modal, ModalProps } from '@patternfly/react-core';
@@ -16,7 +16,7 @@ export interface ChatbotModalProps extends Omit<ModalProps, 'ref'> {
   isCompact?: boolean;
 }
 
-export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({
+export const ChatbotModal: FunctionComponent<ChatbotModalProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   className,

package/src/ChatbotPopover/ChatbotPopover.tsx

@@ -1,13 +1,13 @@
 // ============================================================================
 // Chatbot Popover
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import { Popover, PopoverProps } from '@patternfly/react-core';
 
-export const ChatbotPopover: React.FunctionComponent<PopoverProps> = ({ children, className, ...props }) => (
-  <Popover className={`pf-chatbot__popover  ${className ?? ''}`} showClose={false} {...props}>
+export const ChatbotPopover: FunctionComponent<PopoverProps> = ({ children, className, ...props }) => (
+  <Popover className={`pf-chatbot__popover ${className ?? ''}`} showClose={false} {...props}>
     {children}
   </Popover>
 );

package/src/ChatbotToggle/ChatbotToggle.scss

@@ -6,12 +6,12 @@
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
   background-color: var(--pf-t--global--background--color--inverse--default);
-  --pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
   padding: var(--pf-t--global--spacer--md);
 
   &:hover,
   &:focus {
-    background-color: var(--pf-t--chatbot-toggle--background--hover);
+    background-color: var(--pf-t--color--gray--70);
   }
 
   .pf-v6-c-button__icon {

package/src/ChatbotToggle/ChatbotToggle.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/ChatbotToggle/ChatbotToggle.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Toggle
 // ============================================================================
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 
@@ -47,7 +49,7 @@ const ChatIcon = () => (
   </svg>
 );
 
-const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
+const ChatbotToggleBase: FunctionComponent<ChatbotToggleProps> = ({
   tooltipLabel,
   isChatbotVisible,
   onToggleChatbot,
@@ -87,7 +89,7 @@ const ChatbotToggleBase: React.FunctionComponent<ChatbotToggleProps> = ({
   );
 };
 
-const ChatbotToggle = React.forwardRef((props: ChatbotToggleProps, ref: React.Ref<any>) => (
+const ChatbotToggle = forwardRef((props: ChatbotToggleProps, ref: Ref<any>) => (
   <ChatbotToggleBase innerRef={ref} {...props} />
 ));
 

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ChatbotWelcomePrompt from './ChatbotWelcomePrompt';

package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Layout - Chat - Welcome
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 import { Content, ContentVariants, Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 
@@ -28,7 +28,7 @@ export interface WelcomePrompt {
   onClick?: () => void;
 }
 
-export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptProps> = ({
+export const ChatbotWelcomePrompt: FunctionComponent<ChatbotWelcomePromptProps> = ({
   title,
   description,
   prompts,

package/src/CodeModal/CodeModal.test.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CodeModal from './CodeModal';
 
@@ -21,4 +20,32 @@ 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 modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
 });

package/src/CodeModal/CodeModal.tsx

@@ -1,7 +1,8 @@
 // ============================================================================
 // Code Modal - Chatbot Modal with Code Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
+import { useState } from 'react';
 import path from 'path-browserify';
 
 // Import PatternFly components
@@ -42,9 +43,15 @@ 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: React.FunctionComponent<CodeModalProps> = ({
+export const CodeModal: FunctionComponent<CodeModalProps> = ({
   fileName,
   code,
   codeEditorControlClassName: codeEditorClassName,
@@ -60,11 +67,14 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
   title,
   displayMode = ChatbotDisplayMode.default,
   isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   ...props
 }: CodeModalProps) => {
-  const [newCode, setNewCode] = React.useState(code);
+  const [newCode, setNewCode] = useState(code);
 
-  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handlePrimaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     if (!isReadOnly) {
       onPrimaryAction(_event, newCode);
@@ -73,7 +83,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
     }
   };
 
-  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleSecondaryAction = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onSecondaryAction(_event);
   };
@@ -101,8 +111,8 @@ export const CodeModal: React.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} />
@@ -129,7 +139,7 @@ export const CodeModal: React.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>

package/src/Compare/Compare.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Compare from './Compare';