@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/dist/esm/Message/TableMessage/TableMessage.js

@@ -0,0 +1,62 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Table } from '@patternfly/react-table';
+const TableMessage = (_a) => {
+    var _b;
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { className } = props, rest = __rest(props, ["className"]);
+    // This allows us to parse the nested data we get back from the 3rd party Markdown parser
+    // Open to feedback here if there is a better way to do this
+    // This looks for ths and spits them all out so we can filter them later, looking for text values
+    const findHeaders = (array) => {
+        const headers = [];
+        if (!array) {
+            return headers;
+        }
+        const traverse = (items) => {
+            for (const item of items) {
+                if (item.tagName === 'th') {
+                    headers.push(item);
+                }
+                if (item.children) {
+                    traverse(item.children);
+                }
+            }
+        };
+        traverse(array);
+        return headers;
+    };
+    const headers = findHeaders((_b = rest.node) === null || _b === void 0 ? void 0 : _b.children);
+    const headerTextValues = headers.map((header) => { var _a, _b; return (_b = (_a = header === null || header === void 0 ? void 0 : header.children) === null || _a === void 0 ? void 0 : _a.filter((c) => (c === null || c === void 0 ? void 0 : c.type) === 'text')[0]) === null || _b === void 0 ? void 0 : _b.value; });
+    // We are sending these header text values down to child tds by passing them through children, since mobile view for tables expects a dataLabel prop
+    // The data structure does not otherwise know this information at that level
+    // This is somewhat opinionated and may break if 3rd party library changes
+    // See Tr and Tbody for other usage
+    const modifyChildren = (children) => React.Children.map(children, (child) => {
+        if (child && (headerTextValues === null || headerTextValues === void 0 ? void 0 : headerTextValues.length) > 0) {
+            return React.cloneElement(child, { extraHeaders: headerTextValues });
+        }
+        return child;
+    });
+    if (!props['aria-label']) {
+        // eslint-disable-next-line no-console
+        console.warn('For accessibility reasons an aria-label should be specified for the Table via the <Message /> tableProps prop');
+    }
+    return (
+    // gridBreakPoint is so we show mobile-styled-PF table
+    React.createElement(Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: `pf-chatbot__message-table ${className ? className : ''}` }, rest), modifyChildren(children)));
+};
+export default TableMessage;

package/dist/esm/Message/TableMessage/TbodyMessage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TbodyProps } from '@patternfly/react-table';
+declare const TbodyProps: ({ children, ...props }: TbodyProps & ExtraProps & {
+    extraHeaders?: string[];
+}) => React.JSX.Element;
+export default TbodyProps;

package/dist/esm/Message/TableMessage/TbodyMessage.js

@@ -0,0 +1,28 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Tbody } from '@patternfly/react-table';
+const TbodyProps = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    // passthrough so we can place dataLabel on tds
+    const modifyChildren = (children) => {
+        if (children && props.extraHeaders) {
+            return React.Children.map(children, (child) => React.cloneElement(child, { extraHeaders: props.extraHeaders }));
+        }
+        return children;
+    };
+    return React.createElement(Tbody, Object.assign({}, props), modifyChildren(children));
+};
+export default TbodyProps;

package/dist/esm/Message/TableMessage/TdMessage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TdProps } from '@patternfly/react-table';
+declare const TdMessage: ({ children, ...props }: TdProps & ExtraProps) => React.JSX.Element;
+export default TdMessage;

package/dist/esm/Message/TableMessage/TdMessage.js

@@ -0,0 +1,21 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Td } from '@patternfly/react-table';
+const TdMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement(Td, Object.assign({}, props), children);
+};
+export default TdMessage;

package/dist/esm/Message/TableMessage/ThMessage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { ThProps } from '@patternfly/react-table';
+declare const ThMessage: ({ children, ...props }: ThProps & ExtraProps) => React.JSX.Element;
+export default ThMessage;

package/dist/esm/Message/TableMessage/ThMessage.js

@@ -0,0 +1,21 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Th } from '@patternfly/react-table';
+const ThMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement(Th, Object.assign({}, props), children);
+};
+export default ThMessage;

package/dist/esm/Message/TableMessage/TheadMessage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TheadProps } from '@patternfly/react-table';
+declare const TheadMessage: ({ children, ...props }: TheadProps & ExtraProps) => React.JSX.Element;
+export default TheadMessage;

package/dist/esm/Message/TableMessage/TheadMessage.js

@@ -0,0 +1,21 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Thead } from '@patternfly/react-table';
+const TheadMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement(Thead, Object.assign({}, props), children);
+};
+export default TheadMessage;

package/dist/esm/Message/TableMessage/TrMessage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TrProps } from '@patternfly/react-table';
+declare const TrMessage: ({ children, ...props }: TrProps & ExtraProps & {
+    extraHeaders?: string[];
+}) => React.JSX.Element;
+export default TrMessage;

package/dist/esm/Message/TableMessage/TrMessage.js

@@ -0,0 +1,32 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Tr } from '@patternfly/react-table';
+const TrMessage = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    let tdIndex = 0;
+    // passthrough so we can place dataLabel on tds
+    // places column name on correct child
+    const modifyChildren = (children) => React.Children.map(children, (child) => {
+        if (child.type.name === 'td' && props.extraHeaders) {
+            const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+            tdIndex = tdIndex + 1;
+            return clonedChild;
+        }
+        return child;
+    });
+    return React.createElement(Tr, Object.assign({}, props), modifyChildren(children));
+};
+export default TrMessage;

package/dist/esm/Message/TextMessage/TextMessage.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const TextMessage: ({ children, ...props }: JSX.IntrinsicElements["p"] & ExtraProps) => React.JSX.Element;
+import { ContentProps } from '@patternfly/react-core';
+declare const TextMessage: ({ component, children, ...props }: ContentProps & ExtraProps) => React.JSX.Element;
 export default TextMessage;

package/dist/esm/Message/TextMessage/TextMessage.js

@@ -13,10 +13,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { Content, ContentVariants } from '@patternfly/react-core';
+import { Content } from '@patternfly/react-core';
 const TextMessage = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { component, children } = _a, props = __rest(_a, ["component", "children"]);
     return (React.createElement("span", { className: "pf-chatbot__message-text" },
-        React.createElement(Content, Object.assign({ component: ContentVariants.p }, props), children)));
+        React.createElement(Content, Object.assign({ component: component }, props), children)));
 };
 export default TextMessage;

package/dist/esm/Message/UserFeedback/CloseButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonProps } from '@patternfly/react-core';
+export interface CloseButtonProps extends ButtonProps {
+    /** Callback function for when close button is clicked */
+    onClose?: () => void;
+    /** Aria-label for button */
+    ariaLabel?: string;
+}
+declare const CloseButton: React.FunctionComponent<CloseButtonProps>;
+export default CloseButton;

package/dist/esm/Message/UserFeedback/CloseButton.js

@@ -0,0 +1,9 @@
+// ============================================================================
+// Chatbot Main - Messages - Close Button
+// ============================================================================
+import React from 'react';
+// Import PatternFly components
+import { Button } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+const CloseButton = ({ onClose, ariaLabel }) => (React.createElement(Button, { variant: "plain", onClick: onClose, icon: React.createElement(CloseIcon, null), "aria-label": ariaLabel }));
+export default CloseButton;

package/dist/esm/Message/UserFeedback/UserFeedback.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CardProps, LabelGroupProps, OUIAProps } from '@patternfly/react-core';
+import QuickResponse from '../QuickResponse/QuickResponse';
+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;
+}
+declare const UserFeedback: React.FunctionComponent<UserFeedbackProps>;
+export default UserFeedback;

package/dist/esm/Message/UserFeedback/UserFeedback.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// ============================================================================
+// Chatbot Main - Messages - Feedback Card
+// ============================================================================
+import React from 'react';
+// Import PatternFly components
+import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from '@patternfly/react-core';
+import QuickResponse from '../QuickResponse/QuickResponse';
+import CloseButton from './CloseButton';
+const UserFeedback = (_a) => {
+    var { 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 } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad"]);
+    const [selectedResponse, setSelectedResponse] = React.useState();
+    const [value, setValue] = React.useState('');
+    const divRef = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (focusOnLoad) {
+            (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, []);
+    return (
+    /* card does not have ref forwarding; hence wrapper div */
+    React.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
+        React.createElement(Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
+            React.createElement(CardHeader, { actions: {
+                    actions: React.createElement(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
+                } },
+                React.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
+            React.createElement(CardBody, null,
+                React.createElement(Form, { className: "pf-chatbot__feedback-card-form" },
+                    quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id) })),
+                    hasTextArea && (React.createElement(TextArea, { value: value, onChange: (_event, value) => {
+                            setValue(value);
+                            onTextAreaChange && onTextAreaChange(_event, value);
+                        }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" })),
+                    React.createElement(ActionGroup, null,
+                        React.createElement(Button, { onClick: () => onSubmit(selectedResponse, value) }, submitWord)))))));
+};
+export default UserFeedback;

package/dist/esm/Message/UserFeedback/UserFeedback.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/Message/UserFeedback/UserFeedback.test.js

@@ -0,0 +1,128 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toBeTruthy();
+    });
+    it('should call onTextAreaChange correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, onTextAreaChange: spy }));
+        const textbox = screen.getByRole('textbox', { name: /Provide optional additional feedback/i });
+        yield userEvent.type(textbox, 'test');
+        expect(spy).toHaveBeenCalledTimes(4);
+    }));
+    it('should render different placeholder correctly', () => {
+        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, 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(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaAriaLabel: "Provide more details" }));
+        expect(screen.getByRole('textbox', { name: /Provide more details/i })).toBeTruthy();
+    });
+    it('should handle onClose correctly when close button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(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();
+        yield userEvent.click(closeButton);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to change close button aria label', () => {
+        const spy = jest.fn();
+        render(React.createElement(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES }));
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES }));
+        yield userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        yield userEvent.type(screen.getByRole('textbox', { name: /Provide optional additional feedback/i }), 'What a great experience!');
+        yield 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', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: spy, quickResponses: MOCK_RESPONSES, hasTextArea: true }));
+        yield userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
+        yield userEvent.type(screen.getByRole('textbox', { name: /Provide optional additional feedback/i }), 'What a great experience!');
+        yield 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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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/dist/esm/Message/UserFeedback/UserFeedbackComplete.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CardProps, OUIAProps } from '@patternfly/react-core';
+export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAProps {
+    /** Additional classes for the pagination navigation container. */
+    className?: string;
+    /** Substitute for the English phrase "Thank you". */
+    title?: string;
+    /** Substitute for the English phrase "You have successfully sent your feedback! Thank you for responding." */
+    body?: string | React.ReactNode;
+    /** Callback function for when close button is clicked */
+    onClose?: () => void;
+    /** Aria label for close button */
+    closeButtonAriaLabel?: string;
+    /** Function to be executed on timeout. Relevant when the timeout prop is set. */
+    onTimeout?: () => void;
+    /** If set to true, the timeout is 8000 milliseconds. If a number is provided, card will
+     * be dismissed after that amount of time in milliseconds.
+     */
+    timeout?: number | boolean;
+    /** If the user hovers over the card and `timeout` expires, this is how long to wait
+     * before finally dismissing the alert.
+     */
+    timeoutAnimation?: number;
+    /** Callback for when mouse hovers over card */
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Callback for when mouse stops hovering over card */
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Value to overwrite the randomly generated data-ouia-component-id.*/
+    ouiaId?: number | string;
+    /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+    ouiaSafe?: boolean;
+    /** Flag to indicate if the card is in a live region. */
+    isLiveRegion?: boolean;
+    /** Uniquely identifies the completion card. */
+    id?: string;
+    /** Whether to focus card on load */
+    focusOnLoad?: boolean;
+    /** Timestamp passed in by Message for more context in aria announcements */
+    timestamp?: string;
+}
+declare const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps>;
+export default UserFeedbackComplete;