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

package/src/Onboarding/Onboarding.scss

@@ -0,0 +1,101 @@
+.pf-chatbot__onboarding-modal {
+  overflow-x: hidden;
+
+  .pf-chatbot__onboarding--title {
+    margin-block-end: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__onboarding--section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .pf-chatbot__onboarding--modal-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pf-chatbot__onboarding--modal-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .pf-v6-c-content {
+    font-size: var(--pf-t--global--font--size--body--lg);
+  }
+
+  .pf-chatbot__onboarding--header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    max-height: 65%;
+
+    img {
+      max-width: unset;
+      height: 100%;
+    }
+  }
+
+  .pf-chatbot__onboarding--title {
+    font-size: var(--pf-t--global--font--size--heading--h1);
+    font-family: var(--pf-t--global--font--family--heading);
+    font-weight: var(--pf-t--global--font--weight--heading--bold);
+  }
+
+  .pf-chatbot__onboarding--footer {
+    margin-block-start: var(--pf-t--global--spacer--md);
+  }
+
+  // for handling zoom conditions; zoom to 125% or higher to see this
+  @media screen and (max-height: 620px) {
+    .pf-v6-c-modal-box__body {
+      --pf-v6-c-modal-box__body--MinHeight: auto;
+      overflow: visible;
+    }
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--docked.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--docked,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--embedded {
+  .pf-chatbot__onboarding--header {
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__onboarding-modal.pf-chatbot__onboarding-modal--embedded {
+  // override parent modal style
+  height: inherit !important;
+
+  .pf-chatbot__onboarding--title {
+    font-size: var(--pf-t--global--font--size--heading--2xl);
+  }
+}
+
+.pf-chatbot__onboarding-modal.pf-m-compact {
+  .pf-chatbot__onboarding--header {
+    gap: var(--pf-t--global--spacer--md);
+    align-items: flex-start;
+    margin-block-start: var(--pf-t--global--spacer--lg);
+  }
+
+  .pf-chatbot__onboarding--modal-header {
+    --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__onboarding--modal-body {
+    --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+}

package/src/Onboarding/Onboarding.test.tsx

@@ -0,0 +1,148 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import Onboarding from './Onboarding';
+
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+
+const body =
+  'Experience personalized assistance and seamless problem-solving, simplifying your journey with Red Hat every step of the way.';
+
+describe('Onboarding', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render modal correctly', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        ouiaId="Terms"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('heading', { name: /Onboarding/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Continue/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Skip/i })).toBeTruthy();
+    expect(screen.getByText(body)).toBeTruthy();
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+  });
+  it('should handle image and altText props', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        headerImage="./image.png"
+        headerImageAltText="Test image"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+  });
+  it('should handle className prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        className="test"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+    expect(screen.getByRole('dialog')).toHaveClass('test');
+  });
+  it('should handle title prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        title="Updated title"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+    expect(screen.queryByRole('heading', { name: /Onboarding/i })).toBeFalsy();
+  });
+  it('should handle primary button prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        primaryActionBtn="First"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Continue/i })).toBeFalsy();
+  });
+  it('should handle secondary button prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        secondaryActionBtn="Second"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Skip/i })).toBeFalsy();
+  });
+  it('should handle primary button click', async () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+      >
+        {body}
+      </Onboarding>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+    expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).toHaveBeenCalledTimes(1);
+  });
+  it('should handle secondary button click', async () => {
+    render(
+      <Onboarding isModalOpen onSecondaryAction={onSecondaryAction} handleModalToggle={handleModalToggle}>
+        {body}
+      </Onboarding>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Skip/i }));
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).not.toHaveBeenCalled();
+  });
+  it('should handle isCompact prop', () => {
+    render(
+      <Onboarding
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        isCompact={true}
+        headerImage="./image.png"
+        headerImageAltText="Test image"
+      >
+        {body}
+      </Onboarding>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+    expect(screen.queryByRole('img')).toBeFalsy();
+  });
+});

package/src/Onboarding/Onboarding.tsx

@@ -0,0 +1,126 @@
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+export interface OnboardingProps 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 */
+  headerImage?: string;
+  /** Alt text for optional image displayed in header */
+  headerImageAltText?: string;
+  /** Ref applied to modal */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** OuiaID applied to modal */
+  ouiaId?: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+}
+
+export const OnboardingBase: FunctionComponent<OnboardingProps> = ({
+  handleModalToggle,
+  isModalOpen,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn = 'Continue',
+  secondaryActionBtn = 'Skip',
+  title = 'Onboarding',
+  headerImage,
+  headerImageAltText = '',
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  children,
+  innerRef,
+  ouiaId = 'Onboarding',
+  isCompact,
+  ...props
+}: OnboardingProps) => {
+  const handlePrimaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onPrimaryAction && onPrimaryAction(_event);
+  };
+
+  const handleSecondaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    onSecondaryAction(_event);
+  };
+
+  const modal = (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      ouiaId={ouiaId}
+      aria-labelledby="onboarding-title"
+      aria-describedby="onboarding-modal"
+      className={`pf-chatbot__onboarding-modal pf-chatbot__onboarding-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
+      displayMode={displayMode}
+      onClose={handleModalToggle}
+      {...props}
+    >
+      {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
+      <section className={`pf-chatbot__onboarding--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
+        <>
+          <ModalBody className="pf-chatbot__onboarding--modal-body">
+            {!isCompact && headerImage && (
+              <div className="pf-chatbot__onboarding--header">
+                <img src={headerImage} className="pf-chatbot__onboarding--image" alt={headerImageAltText} />
+              </div>
+            )}
+            <div className="pf-chatbot__onboarding--modal-text">
+              <h1 className="pf-chatbot__onboarding--title">{title}</h1>
+              <Content>{children}</Content>
+            </div>
+          </ModalBody>
+          <ModalFooter className="pf-chatbot__onboarding--footer">
+            <Button
+              isBlock
+              key="onboarding-modal-primary"
+              variant="primary"
+              onClick={handlePrimaryAction}
+              form="onboarding-form"
+              size="lg"
+            >
+              {primaryActionBtn}
+            </Button>
+            <Button
+              isBlock
+              key="onboarding-modal-secondary"
+              variant="secondary"
+              onClick={handleSecondaryAction}
+              size="lg"
+            >
+              {secondaryActionBtn}
+            </Button>
+          </ModalFooter>
+        </>
+      </section>
+    </ChatbotModal>
+  );
+
+  return modal;
+};
+
+const Onboarding = forwardRef((props: OnboardingProps, ref: Ref<HTMLDivElement>) => (
+  <OnboardingBase innerRef={ref} {...props} />
+));
+
+export default Onboarding;

package/src/Onboarding/index.ts

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

package/src/ResponseActions/ResponseActions.scss

@@ -16,12 +16,23 @@
       --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
     }
     &:focus {
-      --pf-v6-c-button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
       --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+      --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
     }
   }
 }
 
+.pf-chatbot__response-actions-groups {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  gap: var(--pf-t--global--spacer--xs);
+
+  .pf-chatbot__response-actions {
+    display: flex;
+  }
+}
+
 .pf-v6-c-button.pf-chatbot__button--response-action-clicked.pf-v6-c-button.pf-m-plain.pf-m-small {
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
   --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);

package/src/ResponseActions/ResponseActions.test.tsx

@@ -6,8 +6,8 @@ import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons'
 import Message from '../Message';
 
 const ALL_ACTIONS = [
-  { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
-  { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
+  { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
+  { type: 'negative', label: 'Bad response', clickedLabel: 'Bad response recorded' },
   { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
   { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
   { type: 'share', label: 'Share', clickedLabel: 'Shared' },
@@ -81,7 +81,7 @@ describe('ResponseActions', () => {
       expect(button).toBeTruthy();
     });
     await userEvent.click(goodBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     let unclickedButtons = buttons.filter((button) => button !== goodBtn);
@@ -89,7 +89,7 @@ describe('ResponseActions', () => {
       expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     });
     await userEvent.click(badBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Bad response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     unclickedButtons = buttons.filter((button) => button !== badBtn);
@@ -117,13 +117,13 @@ describe('ResponseActions', () => {
     expect(badBtn).toBeTruthy();
 
     await userEvent.click(goodBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
 
     await userEvent.click(badBtn);
-    expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Bad response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
@@ -238,30 +238,30 @@ describe('ResponseActions', () => {
   });
 
   it('should be able to call onClick correctly', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label }) => {
+    for (const { type, label } of ALL_ACTIONS) {
       const spy = jest.fn();
       render(<ResponseActions actions={{ [type]: { onClick: spy } }} />);
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(spy).toHaveBeenCalledTimes(1);
-    });
+    }
   });
 
   it('should swap clicked and non-clicked aria labels on click', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+    for (const { type, label, clickedLabel } of ALL_ACTIONS) {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
       expect(screen.getByRole('button', { name: label })).toBeTruthy();
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
-    });
+    }
   });
 
   it('should swap clicked and non-clicked tooltips on click', async () => {
-    ALL_ACTIONS.forEach(async ({ type, label, clickedLabel }) => {
+    for (const { type, label, clickedLabel } of ALL_ACTIONS) {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
       expect(screen.getByRole('button', { name: label })).toBeTruthy();
       await userEvent.click(screen.getByRole('button', { name: label }));
       expect(screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
-    });
+    }
   });
 
   it('should be able to change aria labels', () => {
@@ -322,4 +322,103 @@ describe('ResponseActions', () => {
       expect(screen.getByTestId(action[key])).toBeTruthy();
     });
   });
+
+  // we are testing for the reverse case already above
+  it('should not deselect when clicking outside when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+
+    await userEvent.click(goodBtn);
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+
+    await userEvent.click(screen.getByText('Test content'));
+
+    expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
+      'pf-chatbot__button--response-action-clicked'
+    );
+  });
+
+  it('should switch selection to another button when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+    const badBtn = screen.getByRole('button', { name: 'Bad response' });
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(badBtn);
+    expect(badBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should toggle off when clicking the same button when persistActionSelection is true', async () => {
+    render(
+      <Message
+        name="Bot"
+        role="bot"
+        avatar=""
+        content="Test content"
+        actions={{
+          positive: {},
+          negative: {}
+        }}
+        persistActionSelection
+      />
+    );
+    const goodBtn = screen.getByRole('button', { name: 'Good response' });
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(goodBtn);
+    expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should work with custom actions when persistActionSelection is true', async () => {
+    const actions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn() },
+      negative: { 'data-testid': 'negative', onClick: jest.fn() },
+      custom: {
+        'data-testid': 'custom',
+        onClick: jest.fn(),
+        ariaLabel: 'Custom',
+        tooltipContent: 'Custom action',
+        icon: <DownloadIcon />
+      }
+    };
+    render(<ResponseActions actions={actions} persistActionSelection />);
+
+    const customBtn = screen.getByTestId('custom');
+    await userEvent.click(customBtn);
+    expect(customBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(customBtn);
+    expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
 });