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

package/dist/cjs/Message/Message.test.js

@@ -17,6 +17,8 @@ const react_2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const Message_1 = __importDefault(require("./Message"));
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const monitor_sampleapp_quickstart_1 = require("./QuickStarts/monitor-sampleapp-quickstart");
+const monitor_sampleapp_quickstart_with_image_1 = require("./QuickStarts/monitor-sampleapp-quickstart-with-image");
 const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
@@ -60,6 +62,81 @@ spec:
   url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
 `;
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+const HEADING = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+const BLOCK_QUOTES = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+const TABLE = `
+
+ | Column 1 | Column 2 |
+ |-|-|
+ | Cell 1 | Cell 2 |
+ | Cell 3 | Cell 4 |
+
+ `;
+const ONE_COLUMN_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+ | Cell 2 |
+
+ `;
+const ONE_CELL_TABLE = `
+
+ | Column 1 |
+ |-|
+ | Cell 1 | 
+
+ `;
+const HEADERLESS_TABLE = `
+
+ | |
+ |-|
+ | Cell 1 | 
+
+ `;
+const CHILDLESS_TABLE = `
+
+ | Column 1 |
+ |-|
+ | | 
+
+ `;
+const EMPTY_TABLE = `
+
+ | |
+ |-|
+ | | 
+
+ `;
 const checkListItemsRendered = () => {
     const items = ['Item 1', 'Item 2', 'Item 3'];
     expect(react_2.screen.getAllByRole('listitem')).toHaveLength(3);
@@ -280,6 +357,12 @@ describe('Message', () => {
         expect(react_2.screen.getByText('Here is an ordered list:')).toBeTruthy();
         checkListItemsRendered();
     });
+    it('should render ordered lists correctly if there is interstitial content', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
+        checkListItemsRendered();
+        const list = react_2.screen.getAllByRole('list')[1];
+        expect(list).toHaveAttribute('start', '3');
+    });
     it('should render inline code', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
         expect(react_2.screen.getByText(/() => void/i)).toBeTruthy();
@@ -289,12 +372,16 @@ describe('Message', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
         expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
         expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-        expect(react_2.screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
+        expect(react_2.screen.getByText(/apiVersion:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
         expect(react_2.screen.getByText(/metadata:/i)).toBeTruthy();
-        expect(react_2.screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/name:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
         expect(react_2.screen.getByText(/spec/i)).toBeTruthy();
         expect(react_2.screen.getByText(/connectionConfig:/i)).toBeTruthy();
-        expect(react_2.screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/url:/i)).toBeTruthy();
+        expect(react_2.screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
     });
     it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
         // need explicit setup since RTL stubs clipboard if you do this
@@ -332,4 +419,97 @@ describe('Message', () => {
         expect(react_2.screen.getByRole('img')).toHaveClass('test');
         expect(react_2.screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
     });
+    it('should handle QuickStart tile correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart,
+                onSelectQuickStart: (id) => alert(id)
+            } }));
+        expect(react_2.screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Start' })).toBeTruthy();
+    });
+    it('should handle click on QuickStart tile correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart,
+                onSelectQuickStart: (id) => spy(id)
+            } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Monitoring your sample application' }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.metadata.name);
+    }));
+    it('should handle QuickStart tile with image correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
+                quickStart: monitor_sampleapp_quickstart_with_image_1.monitorSampleAppQuickStartWithImage,
+                onSelectQuickStart: (id) => spy(id)
+            } }));
+        expect(react_2.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
+    }));
+    it('should handle block quote correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
+        expect(react_2.screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+        expect(react_2.screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+        expect(react_2.screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+    });
+    it('should handle heading correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADING }));
+        expect(react_2.screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+    });
+    it('should render table correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Column 1 Column 2/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('cell', { name: /Cell 3/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('cell', { name: /Cell 4/i })).toBeTruthy();
+    });
+    it('should render table data labels correctly for mobile breakpoint', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Cell 1 Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+        expect(react_2.screen.getByRole('row', { name: /Cell 3 Cell 4/i })).toHaveAttribute('extraHeaders', 'Column 1,Column 2');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 2');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 3/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 4/i })).toHaveAttribute('data-label', 'Column 2');
+    });
+    it('should render table data labels correctly for mobile breakpoint for one column table', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_COLUMN_TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(react_2.screen.getByRole('row', { name: /Cell 2/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 2/i })).toHaveAttribute('data-label', 'Column 1');
+    });
+    it('should render table data labels correctly for mobile breakpoint for one cell table', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: ONE_CELL_TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', 'Column 1');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).toHaveAttribute('data-label', 'Column 1');
+    });
+    it('should render table data labels correctly for mobile breakpoint for headerless', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: HEADERLESS_TABLE }));
+        expect(react_2.screen.getByRole('row', { name: /Cell 1/i })).toHaveAttribute('extraHeaders', '');
+        expect(react_2.screen.getByRole('cell', { name: /Cell 1/i })).not.toHaveAttribute('data-label');
+    });
+    it('should render table data labels correctly for mobile breakpoint for childless', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CHILDLESS_TABLE }));
+        expect(react_2.screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', 'Column 1');
+    });
+    it('should render table data labels correctly for mobile breakpoint for empty', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: EMPTY_TABLE }));
+        expect(react_2.screen.getByRole('cell')).not.toHaveAttribute('extraHeaders', '');
+    });
+    it('should render custom table aria label correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
+        expect(react_2.screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
+    });
 });

package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+    content: string;
+    id: string;
+    onClick?: () => void;
+}
+export interface QuickResponseProps {
+    /** Props for quick responses */
+    quickResponses: QuickResponse[];
+    /** Props for quick responses container */
+    quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    /** Callback when a response is clicked; used in feedback cards */
+    onSelect?: (id: string) => void;
+}
+export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
+export default QuickResponse;

package/dist/cjs/Message/QuickResponse/QuickResponse.js

@@ -0,0 +1,34 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickResponse = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
+    const [selectedQuickResponse, setSelectedQuickResponse] = react_1.default.useState();
+    const handleQuickResponseClick = (id, onClick) => {
+        setSelectedQuickResponse(id);
+        onClick && onClick();
+        onSelect && onSelect(id);
+    };
+    return (react_1.default.createElement(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
+        var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
+        return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}` }, props), content));
+    })));
+};
+exports.QuickResponse = QuickResponse;
+exports.default = exports.QuickResponse;

package/dist/cjs/Message/QuickStarts/FallbackImg.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface FallbackImgProps {
+    /** Image source */
+    src: string;
+    /** Alt text for image */
+    alt?: string;
+    /** ClassName applied to image */
+    className?: string;
+    /** Fallback */
+    fallback?: React.ReactNode;
+}
+declare const FallbackImg: React.FC<FallbackImgProps>;
+export default FallbackImg;

package/dist/cjs/Message/QuickStarts/FallbackImg.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const FallbackImg = ({ src, alt, className, fallback }) => {
+    const [isSrcValid, setIsSrcValid] = React.useState(true);
+    if (src && isSrcValid) {
+        return React.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+    }
+    return React.createElement(React.Fragment, null, fallback);
+};
+exports.default = FallbackImg;

package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { QuickStart, QuickstartAction } from './types';
+export declare const camelize: (str: string) => string;
+export interface QuickStartTileProps {
+    /** ClassName applied to the card */
+    className?: string;
+    /** The quickstart object triggered by this tile */
+    quickStart: QuickStart;
+    /** Event handler attached to the tile */
+    onClick?: () => void;
+    /** Action config for button rendered next to title */
+    action?: QuickstartAction;
+    /** Callback that returns active quick start value when clicked */
+    onSelectQuickStart: (id?: string) => void;
+    /** Label for the English word "minute". */
+    minuteWord?: string;
+    /** Label for the English word "minutes". */
+    minuteWordPlural?: string;
+    /** Label for the English word "Prerequisite" */
+    prerequisiteWord?: string;
+    /** Label for the English word "Prerequisites" */
+    prerequisiteWordPlural?: string;
+    /** Aria-label for the quick start description button */
+    quickStartButtonAriaLabel?: string;
+}
+declare const QuickStartTile: React.FC<QuickStartTileProps>;
+export default QuickStartTile;

package/dist/cjs/Message/QuickStarts/QuickStartTile.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.camelize = void 0;
+const React = __importStar(require("react"));
+const rocket_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/rocket-icon"));
+const outlined_bookmark_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon"));
+const react_core_1 = require("@patternfly/react-core");
+const outlined_clock_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-clock-icon"));
+const QuickStartTileHeader_1 = __importDefault(require("./QuickStartTileHeader"));
+const QuickStartTileDescription_1 = __importDefault(require("./QuickStartTileDescription"));
+const FallbackImg_1 = __importDefault(require("./FallbackImg"));
+const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+    if (+match === 0) {
+        return '';
+    } // or if (/\s+/.test(match)) for white spaces
+    return index === 0 ? match.toLowerCase() : match.toUpperCase();
+});
+exports.camelize = camelize;
+const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action }) => {
+    const { metadata: { name: id }, spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } } = quickStart;
+    let quickStartIcon;
+    if (typeof icon === 'object') {
+        quickStartIcon = React.createElement(react_core_1.Icon, { size: "2xl" }, icon);
+    }
+    else {
+        quickStartIcon = (React.createElement(react_core_1.Icon, { size: "2xl" },
+            React.createElement(FallbackImg_1.default, { src: icon, alt: "", className: "pfext-catalog-item-icon__img", fallback: React.createElement(rocket_icon_1.default, null) })));
+    }
+    const onSelect = () => {
+        if (!link) {
+            onSelectQuickStart(id);
+        }
+        else {
+            window.open(link.href, '_blank', 'noopener,noreferrer');
+        }
+        onClick && onClick();
+    };
+    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || outlined_bookmark_icon_1.default;
+    const additionalAction = action ? (React.createElement(react_core_1.Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
+    return (React.createElement(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}` },
+        React.createElement(react_core_1.CardHeader, Object.assign({}, (action && {
+            actions: { actions: additionalAction }
+        })), quickStartIcon),
+        React.createElement(react_core_1.CardTitle, null,
+            React.createElement(QuickStartTileHeader_1.default, { name: displayName, onSelect: onSelect, quickStartId: id })),
+        React.createElement(react_core_1.CardBody, null,
+            React.createElement(react_core_1.Stack, { hasGutter: true },
+                React.createElement(react_core_1.Flex, { spaceItems: { default: 'spaceItemsSm' } },
+                    type && React.createElement(react_core_1.Label, { color: type.color }, type.text),
+                    durationMinutes && (React.createElement(react_core_1.Label, { variant: "outline", "data-test": "duration", icon: React.createElement(outlined_clock_icon_1.default, null) }, (0, react_core_1.pluralize)(durationMinutes, minuteWord, minuteWordPlural)))),
+                React.createElement(QuickStartTileDescription_1.default, { description: description, prerequisites: prerequisites, prerequisiteWord: prerequisiteWord, prerequisiteWordPlural: prerequisiteWordPlural, quickStartButtonAriaLabel: quickStartButtonAriaLabel }))),
+        React.createElement(react_core_1.CardFooter, null,
+            React.createElement(react_core_1.Button, { variant: "link", isInline: true, onClick: onSelect },
+                React.createElement("span", { className: "pf-v6-c-button__text" }, "Start")))));
+};
+exports.default = QuickStartTile;

package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface QuickStartTileDescriptionProps {
+    /** QuickStart description */
+    description: string;
+    /** QuickStart prerequisites */
+    prerequisites?: string[];
+    /** Label for the English word "Prerequisite" */
+    prerequisiteWord?: string;
+    /** Label for the English word "Prerequisites" */
+    prerequisiteWordPlural?: string;
+    /** Aria-label for the quick start button */
+    quickStartButtonAriaLabel?: string;
+}
+/** This function is a helper for pluralizing strings stolen from React.
+ *
+ * @param {number} i The quantity of the string you want to pluralize
+ * @param {string} singular The singular version of the string
+ * @param {string} plural The change to the string that should occur if the quantity is not equal to 1.
+ *                 Defaults to adding an 's'.
+ */
+export declare function pluralizeWord(i: number, singular: string, plural?: string): string;
+declare const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps>;
+export default QuickStartTileDescription;

package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluralizeWord = pluralizeWord;
+const React = __importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const info_circle_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/info-circle-icon"));
+/** This function is a helper for pluralizing strings stolen from React.
+ *
+ * @param {number} i The quantity of the string you want to pluralize
+ * @param {string} singular The singular version of the string
+ * @param {string} plural The change to the string that should occur if the quantity is not equal to 1.
+ *                 Defaults to adding an 's'.
+ */
+function pluralizeWord(i, singular, plural) {
+    if (!plural) {
+        plural = `${singular}s`;
+    }
+    return `${i === 1 ? singular : plural}`;
+}
+const QuickStartTileDescription = ({ description, prerequisites, prerequisiteWord = 'Prerequisite', prerequisiteWordPlural = 'Prerequisites', quickStartButtonAriaLabel = 'Show prerequisites' }) => {
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const buttonRef = React.useRef(null);
+    const pluralizedPrereq = pluralizeWord((prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) || 0, prerequisiteWord, prerequisiteWordPlural);
+    return (React.createElement(React.Fragment, null,
+        description,
+        prereqs && prereqs.length > 0 && (React.createElement(react_core_1.Flex, { spaceItems: { default: 'spaceItemsSm' } },
+            React.createElement("h5", null, (0, react_core_1.pluralize)(prereqs.length, prerequisiteWord, prerequisiteWordPlural)),
+            React.createElement(react_core_1.Button, { variant: "link", isInline: true, "data-testid": "qs-card-prereqs", ref: buttonRef, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, "aria-label": quickStartButtonAriaLabel },
+                React.createElement(info_circle_icon_1.default, null)),
+            React.createElement(react_core_1.Popover, { "aria-label": pluralizedPrereq, headerContent: pluralizedPrereq, triggerRef: buttonRef, bodyContent: React.createElement("div", null,
+                    React.createElement("ul", { "aria-label": pluralizedPrereq }, prereqs.map((prerequisite, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    React.createElement("li", { key: index }, prerequisite))))) })))));
+};
+exports.default = QuickStartTileDescription;

package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.d.ts

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

package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const monitor_sampleapp_quickstart_1 = require("./monitor-sampleapp-quickstart");
+const QuickStartTileDescription_1 = __importStar(require("./QuickStartTileDescription"));
+describe('pluralizeWord function', () => {
+    it('should render no plural correctly', () => {
+        expect((0, QuickStartTileDescription_1.pluralizeWord)(2, 'pizza')).toBe('pizzas');
+    });
+});
+describe('QuickStart tile description', () => {
+    it('should render no prereqs correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description }));
+        expect(react_2.screen.queryByRole('heading')).toBeFalsy();
+    });
+    it('should render singular prereq correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [`You completed the "Getting started with a sample" quick start.`] }));
+        expect(react_2.screen.getByRole('heading', { name: /1 Prerequisite/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Show prerequisite/i })).toBeTruthy();
+    });
+    it('should render plural prereq correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [
+                `You completed the "Getting started with a sample" quick start.`,
+                `You completed the app quick start`
+            ] }));
+        expect(react_2.screen.getByRole('heading', { name: /2 Prerequisites/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Show prerequisites/i })).toBeTruthy();
+    });
+    it('should be able to click prereqs link', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(QuickStartTileDescription_1.default, { description: monitor_sampleapp_quickstart_1.monitorSampleAppQuickStart.spec.description, prerequisites: [`You completed the "Getting started with a sample" quick start.`] }));
+        const button = react_2.screen.getByRole('button', { name: /Show prerequisites/i });
+        expect(react_2.screen.queryByRole('dialog', { name: /Prerequisite/i })).toBeFalsy();
+        yield user_event_1.default.click(button);
+        expect(react_2.screen.getByRole('dialog', { name: /Prerequisite/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Close/i })).toBeTruthy();
+        expect(react_2.screen.getByText(/You completed the "Getting started with a sample" quick start./i)).toBeTruthy();
+    }));
+});

package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface QuickStartTileHeaderProps {
+    /** Name for the header */
+    name: string;
+    /** Id for the QuickStart */
+    quickStartId?: string;
+    /** Callback for when the name of the QuickStart is clicked */
+    onSelect: (e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>) => void;
+}
+declare const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps>;
+export default QuickStartTileHeader;