@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.20

package/src/Message/UserFeedback/CloseButton.tsx

@@ -0,0 +1,21 @@
+// ============================================================================
+// Chatbot Main - Messages - Close Button
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Button, ButtonProps } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+
+export interface CloseButtonProps extends ButtonProps {
+  /** Callback function for when close button is clicked */
+  onClose?: () => void;
+  /** Aria-label for button */
+  ariaLabel?: string;
+}
+
+const CloseButton: React.FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
+  <Button variant="plain" onClick={onClose} icon={<CloseIcon />} aria-label={ariaLabel} />
+);
+
+export default CloseButton;

package/src/Message/UserFeedback/UserFeedback.scss

@@ -0,0 +1,53 @@
+// shared
+.pf-chatbot__feedback-card {
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+  --pf-v6-c-card--BorderWidth: 0;
+  max-width: 27.5rem; // fixme address mobile vs desktop
+}
+
+// complete card
+.pf-chatbot__feedback-complete-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--lg);
+  align-items: center;
+}
+.pf-chatbot__feedback-complete-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card--first-child--PaddingBlockStart: 0;
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: 0;
+}
+.pf-chatbot__feedback-complete-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pf-chatbot__feedback-complete-body {
+  text-align: center;
+}
+.pf-chatbot__feedback-complete-title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--lg);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  line-height: var(--pf-t--global--font--line-height--heading);
+}
+
+// feedback card
+.pf-chatbot__feedback-card-title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--md);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  line-height: var(--pf-t--global--font--line-height--heading);
+}
+
+.pf-chatbot__feedback-card-form {
+  --pf-v6-c-form__group--m-action--MarginBlockStart: 0;
+}
+
+.pf-chatbot__feedback-card-optional {
+  font-weight: initial;
+}

package/src/Message/UserFeedback/UserFeedback.test.tsx

@@ -0,0 +1,257 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import UserFeedback from './UserFeedback';
+
+const MOCK_RESPONSES = [
+  { id: '1', content: 'Helpful information', onClick: () => alert('Clicked helpful information') },
+  { id: '2', content: 'Easy to understand', onClick: () => alert('Clicked easy to understand') },
+  { id: '3', content: 'Resolved my issue', onClick: () => alert('Clicked resolved my issue') }
+];
+
+describe('UserFeedback', () => {
+  it('should render correctly', () => {
+    render(<UserFeedback onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} timestamp="12/12/12" />);
+    expect(screen.getByRole('heading', { name: /Why did you choose this rating?/i })).toBeTruthy();
+    expect(screen.getByRole('list', { name: 'Quick feedback for message received at 12/12/12' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Helpful information/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Easy to understand/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Resolved my issue/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+    expect(screen.queryByRole('textbox', { name: /Provide optional additional feedback/i })).toBeFalsy();
+  });
+  it('should render different title correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        title="Thanks! Why?"
+      />
+    );
+    expect(screen.getByText('Thanks! Why?')).toBeTruthy();
+  });
+  it('should render different submit button text correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        submitWord="Give feedback"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Give feedback/i })).toBeTruthy();
+  });
+  it('should render text area correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toBeTruthy();
+  });
+  it('should call onTextAreaChange correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        onTextAreaChange={spy}
+      />
+    );
+    const textbox = screen.getByRole('textbox', { name: /Provide optional additional feedback/i });
+    await userEvent.type(textbox, 'test');
+    expect(spy).toHaveBeenCalledTimes(4);
+  });
+  it('should render different placeholder correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaPlaceholder="Provide any other information"
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toHaveAttribute(
+      'placeholder',
+      'Provide any other information'
+    );
+  });
+  it('should render different text area label correctly', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaAriaLabel="Provide more details"
+      />
+    );
+    expect(screen.getByRole('textbox', { name: /Provide more details/i })).toBeTruthy();
+  });
+  it('should handle onClose correctly when close button is clicked', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} onClose={spy} timestamp="12/12/12" />);
+    const closeButton = screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
+    expect(closeButton).toBeTruthy();
+    await userEvent.click(closeButton);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to change close button aria label', () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        onClose={spy}
+        closeButtonAriaLabel="Ima button"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
+  });
+  it('should handle onClose correctly when cancel button is clicked', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} onClose={spy} timestamp="12/12/12" />);
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    expect(cancelButton).toBeTruthy();
+    await userEvent.click(cancelButton);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should change cancel word correctly', () => {
+    render(
+      <UserFeedback
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        onClose={jest.fn}
+        cancelWord="Exit"
+        timestamp="12/12/12"
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Exit' })).toBeTruthy();
+  });
+  it('should handle className', async () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        className="test"
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card')).toHaveClass('test');
+  });
+  it('should apply id', async () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        id="test"
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
+  });
+  it('should handle submit correctly when nothing is selected', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} />);
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(undefined, '');
+  });
+  it('should handle submit correctly when item is selected', async () => {
+    const spy = jest.fn();
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} />);
+    await userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('2', '');
+  });
+  it('should handle submit correctly when there is just text input', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} hasTextArea />
+    );
+    await userEvent.type(
+      screen.getByRole('textbox', { name: /Provide optional additional feedback/i }),
+      'What a great experience!'
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(undefined, 'What a great experience!');
+  });
+  it('should handle submit correctly when item is selected and there is text input', async () => {
+    const spy = jest.fn();
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} hasTextArea />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
+    await userEvent.type(
+      screen.getByRole('textbox', { name: /Provide optional additional feedback/i }),
+      'What a great experience!'
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('2', 'What a great experience!');
+  });
+  it('should default title heading level to h1', () => {
+    render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} />);
+    expect(screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i })).toBeTruthy();
+  });
+  it('should be able to change title heading level', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        headingLevel="h6"
+      />
+    );
+    expect(screen.getByRole('heading', { level: 6, name: /Why did you choose this rating?/i })).toBeTruthy();
+  });
+  it('should focus on load by default', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).toHaveFocus();
+  });
+  it('should not focus on load if focusOnLoad = false', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+        focusOnLoad={false}
+      />
+    );
+    expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
+  });
+});

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -0,0 +1,132 @@
+// ============================================================================
+// Chatbot Main - Messages - Feedback Card
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import {
+  ActionGroup,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  CardProps,
+  Form,
+  LabelGroupProps,
+  OUIAProps,
+  TextArea
+} from '@patternfly/react-core';
+import QuickResponse from '../QuickResponse/QuickResponse';
+import CloseButton from './CloseButton';
+
+export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProps {
+  /** Additional classes for the pagination navigation container. */
+  className?: string;
+  /** Quick responses a user can select */
+  quickResponses?: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Whether form includes text area */
+  hasTextArea?: boolean;
+  /** Placeholder of text area */
+  textAreaPlaceholder?: string;
+  /** Aria label for text area */
+  textAreaAriaLabel?: string;
+  /** Callback function for when text area changes */
+  onTextAreaChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+  /** Callback function for when form is submitted */
+  onSubmit: (selectedResponse?: string, additionalFeedback?: string) => void;
+  /** Callback function for when close button is clicked */
+  onClose: () => void;
+  /** Aria label for close button */
+  closeButtonAriaLabel?: string;
+  /** Label for the English word "Submit." */
+  submitWord?: string;
+  /** Label for the English word "Cancel." */
+  cancelWord?: string;
+  /** Uniquely identifies the card. */
+  id?: string;
+  /** The heading level to use, default is h1 */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Whether to focus card on load */
+  focusOnLoad?: boolean;
+  /** Timestamp passed in by Message for more context in aria announcements */
+  timestamp?: string;
+}
+
+const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
+  className,
+  timestamp,
+  title = 'Why did you choose this rating?',
+  hasTextArea,
+  textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`,
+  textAreaPlaceholder = 'Provide optional additional feedback',
+  onTextAreaChange,
+  submitWord = 'Submit',
+  quickResponses,
+  quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` },
+  onSubmit,
+  onClose,
+  closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`,
+  id,
+  headingLevel: HeadingLevel = 'h1',
+  focusOnLoad = true,
+  cancelWord = 'Cancel',
+  ...props
+}: UserFeedbackProps) => {
+  const [selectedResponse, setSelectedResponse] = React.useState<string>();
+  const [value, setValue] = React.useState('');
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (focusOnLoad) {
+      divRef.current?.focus();
+    }
+  }, []);
+
+  return (
+    /* card does not have ref forwarding; hence wrapper div */
+    <div ref={divRef} id={id} tabIndex={0} aria-label={title}>
+      <Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+        <CardHeader
+          actions={{
+            actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
+          }}
+        >
+          <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
+        </CardHeader>
+        <CardBody>
+          <Form className="pf-chatbot__feedback-card-form">
+            {quickResponses && (
+              <QuickResponse
+                quickResponses={quickResponses}
+                quickResponseContainerProps={quickResponseContainerProps}
+                onSelect={(id) => setSelectedResponse(id)}
+              />
+            )}
+            {hasTextArea && (
+              <TextArea
+                value={value}
+                onChange={(_event, value) => {
+                  setValue(value);
+                  onTextAreaChange && onTextAreaChange(_event, value);
+                }}
+                placeholder={textAreaPlaceholder}
+                aria-label={textAreaAriaLabel}
+                resizeOrientation="vertical"
+              />
+            )}
+            <ActionGroup>
+              <Button onClick={() => onSubmit(selectedResponse, value)}>{submitWord}</Button>
+              <Button variant="link" onClick={onClose}>
+                {cancelWord}
+              </Button>
+            </ActionGroup>
+          </Form>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default UserFeedback;