@patternfly/chatbot 6.3.0-prerelease.13 → 6.3.0-prerelease.14

package/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { PreviewAttachment } from './PreviewAttachment';
 
 describe('PreviewAttachment', () => {
@@ -48,4 +48,46 @@ describe('PreviewAttachment', () => {
 
     expect(onDismiss).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Edit"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    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 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/PreviewAttachment/PreviewAttachment.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Preview Attachment - Chatbot Code Snippet Viewer
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
 import CodeModal from '../CodeModal';
 import { ChatbotDisplayMode } from '../Chatbot';
 
@@ -24,9 +24,19 @@ export interface PreviewAttachmentProps {
   displayMode?: ChatbotDisplayMode;
   /** Sets modal to compact styling. */
   isCompact?: boolean;
+  /** Primary action button text */
+  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: React.FunctionComponent<PreviewAttachmentProps> = ({
+export const PreviewAttachment: FunctionComponent<PreviewAttachmentProps> = ({
   fileName,
   code,
   handleModalToggle,
@@ -34,15 +44,20 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
   onDismiss = undefined,
   onEdit,
   title = 'Preview attachment',
+  primaryActionButtonText = 'Edit',
+  secondaryActionButtonText = 'Dismiss',
   displayMode = ChatbotDisplayMode.default,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
   isCompact
 }: PreviewAttachmentProps) => {
-  const handleEdit = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleEdit = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onEdit(_event);
   };
 
-  const handleDismiss = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleDismiss = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onDismiss && onDismiss(_event);
   };
@@ -58,12 +73,15 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
       isModalOpen={isModalOpen}
       onPrimaryAction={handleEdit}
       onSecondaryAction={handleDismiss}
-      primaryActionBtn="Edit"
-      secondaryActionBtn="Dismiss"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       isReadOnly
       displayMode={displayMode}
       isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };

package/src/ResponseActions/ResponseActionButton.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/ResponseActions/ResponseActionButton.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 
 export interface ResponseActionButtonProps extends ButtonProps {
@@ -26,7 +27,7 @@ export interface ResponseActionButtonProps extends ButtonProps {
   innerRef?: React.Ref<HTMLButtonElement>;
 }
 
-export const ResponseActionButtonBase: React.FunctionComponent<ResponseActionButtonProps> = ({
+export const ResponseActionButtonBase: FunctionComponent<ResponseActionButtonProps> = ({
   ariaLabel,
   clickedAriaLabel = ariaLabel,
   className,
@@ -80,7 +81,7 @@ export const ResponseActionButtonBase: React.FunctionComponent<ResponseActionBut
   );
 };
 
-const ResponseActionButton = React.forwardRef((props: ResponseActionButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+const ResponseActionButton = forwardRef((props: ResponseActionButtonProps, ref: Ref<HTMLButtonElement>) => (
   <ResponseActionButtonBase innerRef={ref} {...props} />
 ));
 

package/src/ResponseActions/ResponseActions.test.tsx

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

package/src/ResponseActions/ResponseActions.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   ExternalLinkAltIcon,
   VolumeUpIcon,
@@ -50,12 +51,12 @@ export interface ResponseActionProps {
   };
 }
 
-export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({ actions }) => {
-  const [activeButton, setActiveButton] = React.useState<string>();
+export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
+  const [activeButton, setActiveButton] = useState<string>();
   const { positive, negative, copy, share, listen, ...additionalActions } = actions;
-  const responseActions = React.useRef<HTMLDivElement>(null);
+  const responseActions = useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleClickOutside = (e) => {
       if (responseActions.current && !responseActions.current.contains(e.target)) {
         setActiveButton(undefined);
@@ -69,9 +70,9 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
   }, []);
 
   const handleClick = (
-    e: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent,
+    e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
     id: string,
-    onClick?: (event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
+    onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
     setActiveButton(id);
     onClick && onClick(e);

package/src/Settings/SettingsForm.test.tsx

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

package/src/Settings/SettingsForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface SettingsFormProps {
   /** Class applied to form container */
@@ -9,12 +9,7 @@ export interface SettingsFormProps {
   isCompact?: boolean;
 }
 
-export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({
-  className,
-  fields = [],
-  isCompact,
-  ...props
-}) => (
+export const SettingsForm: FunctionComponent<SettingsFormProps> = ({ className, fields = [], isCompact, ...props }) => (
   <div
     className={`pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}`}
     {...props}

package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
 
 export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivElement> {
@@ -10,7 +10,7 @@ export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivEleme
   type?: string;
 }
 
-export const SourceDetailsMenuItem: React.FunctionComponent<SourceDetailsMenuItemProps> = ({
+export const SourceDetailsMenuItem: FunctionComponent<SourceDetailsMenuItemProps> = ({
   icon,
   name,
   type,

package/src/SourcesCard/SourcesCard.test.tsx

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

package/src/SourcesCard/SourcesCard.tsx

@@ -1,8 +1,8 @@
 // ============================================================================
 // Chatbot Main - Messages - Sources Card
 // ============================================================================
-import React from 'react';
-
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useState } from 'react';
 // Import PatternFly components
 import {
   Button,
@@ -57,7 +57,7 @@ export interface SourcesCardProps extends CardProps {
   showLessWords?: string;
 }
 
-const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
+const SourcesCard: FunctionComponent<SourcesCardProps> = ({
   className,
   isDisabled,
   paginationAriaLabel = 'Pagination',
@@ -74,14 +74,14 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   isCompact,
   ...props
 }: SourcesCardProps) => {
-  const [page, setPage] = React.useState(1);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [page, setPage] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+  const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
-  const handleNewPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
     onSetPage && onSetPage(_evt, newPage);
   };

package/src/TermsOfUse/TermsOfUse.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/TermsOfUse/TermsOfUse.tsx

@@ -1,7 +1,8 @@
 // ============================================================================
 // Terms of Use Modal - Chatbot Modal Extension
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
 import { Button, Content, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
@@ -37,7 +38,7 @@ export interface TermsOfUseProps extends ModalProps {
   isCompact?: boolean;
 }
 
-export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
+export const TermsOfUseBase: FunctionComponent<TermsOfUseProps> = ({
   handleModalToggle,
   isModalOpen,
   onPrimaryAction,
@@ -55,12 +56,12 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
   isCompact,
   ...props
 }: TermsOfUseProps) => {
-  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handlePrimaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onPrimaryAction && onPrimaryAction(_event);
   };
 
-  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleSecondaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     onSecondaryAction(_event);
   };
 
@@ -115,7 +116,7 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
   return modal;
 };
 
-const TermsOfUse = React.forwardRef((props: TermsOfUseProps, ref: React.Ref<HTMLDivElement>) => (
+const TermsOfUse = forwardRef((props: TermsOfUseProps, ref: Ref<HTMLDivElement>) => (
   <TermsOfUseBase innerRef={ref} {...props} />
 ));
 

package/tsconfig.cjs.json

@@ -5,4 +5,3 @@
     "module": "commonjs"
   }
 }
-  

package/tsconfig.json

@@ -9,7 +9,7 @@
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */
@@ -26,7 +26,7 @@
 
     /* Strict Type-Checking Options */
     "strict": true /* Enable all strict type-checking options. */,
-    "noImplicitAny": false,                       /* Raise error on expressions and declarations with an implied 'any' type. */
+    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
     // "strictNullChecks": true,                    /* Enable strict null checks. */
     // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
     // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
@@ -69,5 +69,5 @@
     "skipLibCheck": true /* Skip type checking of declaration files. */,
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   },
-  "include": ["./src/*", "./src/**/*", "./cypress/**/*"],
+  "include": ["./src/*", "./src/**/*", "./cypress/**/*"]
 }