@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,355 @@
+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.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 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();
+  });
+  it('should handle isCompact', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        data-testid="card"
+        isCompact
+      />
+    );
+    expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+  });
+  it('should pass buttonProps to submit button', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        submitButtonProps={{ variant: 'secondary', isDisabled: true }}
+      />
+    );
+    const submitButton = screen.getByRole('button', { name: /Submit/i });
+    expect(submitButton).toHaveClass('pf-v6-c-button pf-m-secondary');
+    expect(submitButton).toBeDisabled();
+  });
+  it('should pass cardHeaderProps to card header', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        cardHeaderProps={{ 'data-testid': 'card-header', className: 'custom-header' } as any}
+      />
+    );
+    const cardHeader = screen.getByTestId('card-header');
+    expect(cardHeader).toHaveClass('custom-header');
+  });
+  it('should pass cardBodyProps to card body', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        cardBodyProps={{ 'data-testid': 'card-body', className: 'custom-body' } as any}
+      />
+    );
+    const cardBody = screen.getByTestId('card-body');
+    expect(cardBody).toHaveClass('custom-body');
+  });
+  it('should pass headingLevelProps to title heading', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        headingLevelProps={{ className: 'custom-heading', id: 'feedback-title' }}
+      />
+    );
+    const heading = screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i });
+    expect(heading).toHaveClass('custom-heading');
+    expect(heading).toHaveAttribute('id', 'feedback-title');
+  });
+
+  it('should pass formProps to form', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        formProps={{ 'data-testid': 'feedback-form', className: 'custom-form' } as any}
+      />
+    );
+    const form = screen.getByTestId('feedback-form');
+    expect(form).toHaveClass('custom-form');
+  });
+  it('should pass textAreaProps to text area when hasTextArea is true', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        hasTextArea
+        textAreaProps={{ 'data-testid': 'custom-textarea', rows: 5 } as any}
+      />
+    );
+    const textArea = screen.getByTestId('custom-textarea');
+    expect(textArea).toHaveAttribute('rows', '5');
+    expect(textArea).toHaveAttribute('data-testid', 'custom-textarea');
+  });
+  it('should pass actionGroupProps to action group', () => {
+    render(
+      <UserFeedback
+        timestamp="12/12/12"
+        onClose={jest.fn}
+        onSubmit={jest.fn}
+        quickResponses={MOCK_RESPONSES}
+        actionGroupProps={{ 'data-testid': 'action-group', className: 'custom-actions' } as any}
+      />
+    );
+    const actionGroup = screen.getByTestId('action-group');
+    expect(actionGroup).toHaveClass('custom-actions');
+  });
+  it('should render children', () => {
+    render(
+      <UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES}>
+        <div data-testid="custom-content">Custom feedback content</div>
+        <p>Additional paragraph</p>
+      </UserFeedback>
+    );
+    expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+    expect(screen.getByText('Custom feedback content')).toBeInTheDocument();
+    expect(screen.getByText('Additional paragraph')).toBeInTheDocument();
+  });
+});

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -0,0 +1,177 @@
+// ============================================================================
+// Chatbot Main - Messages - Feedback Card
+// ============================================================================
+import type { FunctionComponent } from 'react';
+
+import { useState, useRef, useEffect } from 'react';
+
+// Import PatternFly components
+import {
+  ActionGroup,
+  ActionGroupProps,
+  Button,
+  ButtonProps,
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardHeader,
+  CardHeaderProps,
+  CardProps,
+  Form,
+  FormProps,
+  LabelGroupProps,
+  OUIAProps,
+  TextArea,
+  TextAreaProps
+} 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;
+  /** @deprecated Cancel button has been deprecated. Use the close button instead. 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;
+  /** Additional props passed to submit button */
+  submitButtonProps?: ButtonProps;
+  /** Additional props passed to card header */
+  cardHeaderProps?: CardHeaderProps;
+  /** Additional props passed to card body */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props passed to title heading */
+  headingLevelProps?: React.HTMLAttributes<HTMLHeadingElement>;
+  /** Additional props passed to form */
+  formProps?: FormProps;
+  /** Additional props passed to text area */
+  textAreaProps?: TextAreaProps;
+  /** Additional props passed to action group */
+  actionGroupProps?: ActionGroupProps;
+  /** Optional privacy statement text displayed under text area */
+  privacyStatement?: string;
+}
+
+export const UserFeedback: 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,
+  isCompact,
+  children,
+  cardHeaderProps,
+  cardBodyProps,
+  headingLevelProps,
+  formProps,
+  textAreaProps,
+  actionGroupProps,
+  submitButtonProps,
+  privacyStatement,
+  ...props
+}: UserFeedbackProps) => {
+  const [selectedResponse, setSelectedResponse] = useState<string>();
+  const [value, setValue] = useState('');
+  const divRef = useRef<HTMLDivElement>(null);
+
+  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 isCompact={isCompact} className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
+        <CardHeader
+          actions={{
+            actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
+          }}
+          {...cardHeaderProps}
+        >
+          <HeadingLevel className="pf-chatbot__feedback-card-title" {...headingLevelProps}>
+            {title}
+          </HeadingLevel>
+        </CardHeader>
+        <CardBody {...cardBodyProps}>
+          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`} {...formProps}>
+            {quickResponses && (
+              <QuickResponse
+                quickResponses={quickResponses}
+                quickResponseContainerProps={quickResponseContainerProps}
+                onSelect={(id) => setSelectedResponse(id)}
+                isCompact={isCompact}
+              />
+            )}
+            {hasTextArea && (
+              <>
+                <TextArea
+                  value={value}
+                  onChange={(_event, value) => {
+                    setValue(value);
+                    onTextAreaChange && onTextAreaChange(_event, value);
+                  }}
+                  placeholder={textAreaPlaceholder}
+                  aria-label={textAreaAriaLabel}
+                  resizeOrientation="vertical"
+                  {...textAreaProps}
+                />
+              </>
+            )}
+            {privacyStatement && <div className="pf-chatbot__feedback-card-privacy">{privacyStatement}</div>}
+            {children}
+            <ActionGroup {...actionGroupProps}>
+              <Button
+                onClick={() => onSubmit(selectedResponse, value)}
+                size={isCompact ? 'sm' : undefined}
+                {...submitButtonProps}
+              >
+                {submitWord}
+              </Button>
+            </ActionGroup>
+          </Form>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default UserFeedback;