@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.30

package/src/TermsOfUse/TermsOfUse.test.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import TermsOfUse from './TermsOfUse';
+import { Content } from '@patternfly/react-core';
+
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+
+const body = (
+  <Content>
+    <h1>Heading 1</h1>
+    <p>Legal text</p>
+  </Content>
+);
+describe('TermsOfUse', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render modal correctly', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        ouiaId="Terms"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+    expect(screen.getByText(/Legal text/i)).toBeTruthy();
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+  });
+  it('should handle image and altText props', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        image="./image.png"
+        altText="Test image"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+  });
+  it('should handle className prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        className="test"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+    expect(screen.getByRole('dialog')).toHaveClass('test');
+  });
+  it('should handle title prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        title="Updated title"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+    expect(screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
+  });
+  it('should handle primary button prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        primaryActionBtn="First"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
+  });
+  it('should handle secondary button prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        secondaryActionBtn="Second"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
+  });
+  it('should handle primary button click', async () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+      >
+        {body}
+      </TermsOfUse>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Accept/i }));
+    expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).toHaveBeenCalledTimes(1);
+  });
+  it('should handle secondary button click', async () => {
+    render(
+      <TermsOfUse isModalOpen onSecondaryAction={onSecondaryAction} handleModalToggle={handleModalToggle}>
+        {body}
+      </TermsOfUse>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Decline/i }));
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).not.toHaveBeenCalled();
+  });
+});

package/src/TermsOfUse/TermsOfUse.tsx

@@ -0,0 +1,117 @@
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import React from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+export interface TermsOfUseProps extends ModalProps {
+  /** Class applied to modal */
+  className?: string;
+  /** Action assigned to primary modal button */
+  onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Action assigned to secondary modal button */
+  onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Name of primary modal button */
+  primaryActionBtn?: string;
+  /** Name of secondary modal button */
+  secondaryActionBtn?: string;
+  /** Function that handles modal toggle */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Optional image displayed in header */
+  image?: string;
+  /** Alt text for optional image displayed in header */
+  altText?: string;
+  /** Ref applied to modal */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** OuiaID applied to modal */
+  ouiaId?: string;
+}
+
+export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
+  handleModalToggle,
+  isModalOpen,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn = 'Accept',
+  secondaryActionBtn = 'Decline',
+  title = 'Terms of use',
+  image,
+  altText,
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  children,
+  innerRef,
+  ouiaId = 'TermsOfUse',
+  ...props
+}: TermsOfUseProps) => {
+  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onPrimaryAction && onPrimaryAction(_event);
+  };
+
+  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    onSecondaryAction(_event);
+  };
+
+  const modal = (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      ouiaId={ouiaId}
+      aria-labelledby="terms-of-use-title"
+      aria-describedby="terms-of-use-modal"
+      className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`}
+      displayMode={displayMode}
+      {...props}
+    >
+      {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
+      <section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
+        <ModalHeader>
+          <div className="pf-chatbot__terms-of-use--header">
+            {image && altText && <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />}
+            <h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <Content>{children}</Content>
+        </ModalBody>
+        <ModalFooter className="pf-chatbot__terms-of-use--footer">
+          <Button
+            isBlock
+            key="terms-of-use-modal-primary"
+            variant="primary"
+            onClick={handlePrimaryAction}
+            form="terms-of-use-form"
+            size="lg"
+          >
+            {primaryActionBtn}
+          </Button>
+          <Button
+            isBlock
+            key="terms-of-use-modal-secondary"
+            variant="secondary"
+            onClick={handleSecondaryAction}
+            size="lg"
+          >
+            {secondaryActionBtn}
+          </Button>
+        </ModalFooter>
+      </section>
+    </ChatbotModal>
+  );
+
+  return modal;
+};
+
+const TermsOfUse = React.forwardRef((props: TermsOfUseProps, ref: React.Ref<HTMLDivElement>) => (
+  <TermsOfUseBase innerRef={ref} {...props} />
+));
+
+export default TermsOfUse;

package/src/TermsOfUse/index.ts

@@ -0,0 +1,3 @@
+export { default } from './TermsOfUse';
+
+export * from './TermsOfUse';

package/src/__mocks__/rehype-external-links.ts

@@ -0,0 +1,3 @@
+const rehypeExternalLinks = jest.fn((children) => children);
+
+export default rehypeExternalLinks;

package/src/__mocks__/rehype-sanitize.ts

@@ -0,0 +1,3 @@
+const rehypeSanitize = jest.fn(() => null);
+
+export default rehypeSanitize;

package/src/__mocks__/rehype-unwrap-images.tsx

@@ -0,0 +1,3 @@
+const rehypeUnwrapImages = jest.fn(() => null);
+
+export default rehypeUnwrapImages;

package/src/index.ts

@@ -39,6 +39,9 @@ export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
 
+export { default as Compare } from './Compare';
+export * from './Compare';
+
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 
@@ -66,8 +69,14 @@ export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
 
+export { default as Settings } from './Settings';
+export * from './Settings';
+
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 
 export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
+
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';

package/src/main.scss

@@ -10,20 +10,28 @@
 @import './ChatbotToggle/ChatbotToggle';
 @import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
 @import './CodeModal/CodeModal';
+@import './Compare/Compare';
 @import './FileDetails/FileDetails';
 @import './FileDetailsLabel/FileDetailsLabel';
 @import './FileDropZone/FileDropZone';
 @import './Message/Message';
 @import './Message/CodeBlockMessage/CodeBlockMessage';
+@import './Message/ImageMessage/ImageMessage';
 @import './Message/TextMessage/TextMessage';
 @import './Message/ListMessage/ListMessage';
+@import './Message/TableMessage/TableMessage';
 @import './Message/MessageLoading';
+@import './Message/QuickStarts/QuickStartTile';
+@import './Message/QuickResponse/QuickResponse';
+@import './Message/UserFeedback/UserFeedback';
 @import './MessageBar/MessageBar';
 @import './MessageBox/MessageBox';
 @import './MessageBox/JumpButton';
 @import './ResponseActions/ResponseActions';
+@import './Settings/Settings';
 @import './SourcesCard/SourcesCard.scss';
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
+@import './TermsOfUse/TermsOfUse';
 
 :where(:root) {
   // ============================================================================
@@ -44,8 +52,6 @@
 
   --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
 
-  --pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-
   --pf-t--chatbot--blue-icon--background--color--hover: rgba(
     146,
     197,
@@ -58,13 +64,9 @@
   // Chatbot Default tokens using PF semantic tokens
   // ============================================================================
   --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
-
-  --pf-t--chatbot--font-size: var(--pf-t--global--font--size--md);
   --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
   --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
 
-  --pf-t--chatbot--icon--fill: var(--pf-t--global--icon--color--subtle);
-  --pf-t--chatbot--icon--fill--hover: var(--pf-t--global--icon--color--regular);
   --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
 
   --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);