@patternfly/chatbot 1.0.0

package/dist/esm/SourcesCard/SourcesCard.d.ts

@@ -0,0 +1,65 @@
+import type { FunctionComponent } from 'react';
+import { ButtonProps, CardBodyProps, CardFooterProps, CardProps, CardTitleProps, TruncateProps } from '@patternfly/react-core';
+export interface SourcesCardProps extends CardProps {
+    /** Additional classes for the pagination navigation container. */
+    className?: string;
+    /** The layout used to display source cards. Use wrap to display and wrap all sources at once. */
+    layout?: 'paginated' | 'wrap';
+    /** Max width of a source card when the wrap layout is used. Can be any valid CSS width value. */
+    cardMaxWidth?: string;
+    /** Flag indicating if the pagination is disabled. */
+    isDisabled?: boolean;
+    /** @deprecated ofWord has been deprecated. Label for the English word "of." */
+    ofWord?: string;
+    /** Accessible label for the pagination component. */
+    paginationAriaLabel?: string;
+    /** Content rendered inside the paginated card */
+    sources: {
+        /** Title of sources card */
+        title?: string;
+        /** Subtitle of sources card */
+        subtitle?: string;
+        /** Link to source */
+        link: string;
+        /** Body of sources card */
+        body?: React.ReactNode | string;
+        /** Whether link is external */
+        isExternal?: boolean;
+        /** Whether sources card is expandable */
+        hasShowMore?: boolean;
+        /** onClick event applied to the title of the Sources card */
+        onClick?: React.MouseEventHandler<HTMLButtonElement>;
+        /** Any additional props applied to the title of the Sources card  */
+        titleProps?: ButtonProps;
+        /** Custom footer applied to the Sources card */
+        footer?: React.ReactNode;
+        /** Additional props passed to Truncate component */
+        truncateProps?: TruncateProps;
+    }[];
+    /** Label for the English word "source" */
+    sourceWord?: string;
+    /** Plural for sourceWord */
+    sourceWordPlural?: string;
+    /** Accessible label for the button which moves to the next page. */
+    toNextPageAriaLabel?: string;
+    /** Accessible label for the button which moves to the previous page. */
+    toPreviousPageAriaLabel?: string;
+    /** Function called when user clicks to navigate to next page. */
+    onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+    /** Function called when user clicks to navigate to previous page. */
+    onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+    /** Function called when page is changed. */
+    onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+    /** Label for English words "show more" */
+    showMoreWords?: string;
+    /** Label for English words "show less" */
+    showLessWords?: string;
+    /** Additional props passed to card title */
+    cardTitleProps?: CardTitleProps;
+    /** Additional props passed to card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to card footer */
+    cardFooterProps?: CardFooterProps;
+}
+declare const SourcesCard: FunctionComponent<SourcesCardProps>;
+export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.js

@@ -0,0 +1,20 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pluralize } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import SourcesCardBase from '../SourcesCardBase';
+const SourcesCard = (_a) => {
+    var { sources, sourceWord = 'source', sourceWordPlural = 'sources', layout = 'paginated', cardMaxWidth = '400px' } = _a, props = __rest(_a, ["sources", "sourceWord", "sourceWordPlural", "layout", "cardMaxWidth"]);
+    return (_jsxs("div", { className: css('pf-chatbot__source', layout === 'wrap' && 'pf-m-wrap'), children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsx(SourcesCardBase, Object.assign({ sources: sources, layout: layout, cardMaxWidth: cardMaxWidth }, props))] }));
+};
+export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.test.d.ts

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

package/dist/esm/SourcesCard/SourcesCard.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SourcesCard from './SourcesCard';
+describe('SourcesCard', () => {
+    it('should render sources correctly if one source is passed in', () => {
+        render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
+        expect(screen.getByText('1 source')).toBeTruthy();
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+    });
+    it('should render sources correctly when there is more than one', () => {
+        render(_jsx(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(screen.getByText('2 sources')).toBeTruthy();
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(screen.getByText('1/2')).toBeTruthy();
+        screen.getByRole('button', { name: /Go to previous page/i });
+        screen.getByRole('button', { name: /Go to next page/i });
+    });
+    it('should render with wrap layout when layout is set to wrap', () => {
+        render(_jsx(SourcesCard, { layout: "wrap", sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' },
+                { title: 'How to make a sandwich', link: '' }
+            ] }));
+        expect(screen.getByText('How to make an apple pie')).toBeVisible();
+        expect(screen.getByText('How to make cookies')).toBeVisible();
+        expect(screen.getByText('How to make a sandwich')).toBeVisible();
+        expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+        expect(screen.queryByText('1/3')).not.toBeInTheDocument();
+    });
+});

package/dist/esm/SourcesCard/index.d.ts

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

package/dist/esm/SourcesCard/index.js

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

package/dist/esm/SourcesCardBase/SourcesCardBase.d.ts

@@ -0,0 +1,61 @@
+import type { FunctionComponent } from 'react';
+import { ButtonProps, CardBodyProps, CardFooterProps, CardProps, CardTitleProps, TruncateProps } from '@patternfly/react-core';
+export interface SourcesCardBaseProps extends CardProps {
+    /** Additional classes for the pagination navigation container. */
+    className?: string;
+    /** The layout used to display source cards. Use wrap to display and wrap all sources at once. */
+    layout?: 'paginated' | 'wrap';
+    /** Flag indicating if the pagination is disabled. */
+    isDisabled?: boolean;
+    /** @deprecated ofWord has been deprecated. Label for the English word "of." */
+    ofWord?: string;
+    /** Accessible label for the pagination component. */
+    paginationAriaLabel?: string;
+    /** Max width of a source card when the wrap layout is used. Can be any valid CSS width value. */
+    cardMaxWidth?: string;
+    /** Content rendered inside the paginated card */
+    sources: {
+        /** Title of sources card */
+        title?: string;
+        /** Subtitle of sources card */
+        subtitle?: string;
+        /** Link to source */
+        link: string;
+        /** Body of sources card */
+        body?: React.ReactNode | string;
+        /** Whether link is external */
+        isExternal?: boolean;
+        /** Whether sources card is expandable */
+        hasShowMore?: boolean;
+        /** onClick event applied to the title of the Sources card */
+        onClick?: React.MouseEventHandler<HTMLButtonElement>;
+        /** Any additional props applied to the title of the Sources card  */
+        titleProps?: ButtonProps;
+        /** Custom footer applied to the Sources card */
+        footer?: React.ReactNode;
+        /** Additional props passed to Truncate component */
+        truncateProps?: TruncateProps;
+    }[];
+    /** Accessible label for the button which moves to the next page. */
+    toNextPageAriaLabel?: string;
+    /** Accessible label for the button which moves to the previous page. */
+    toPreviousPageAriaLabel?: string;
+    /** Function called when user clicks to navigate to next page. */
+    onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+    /** Function called when user clicks to navigate to previous page. */
+    onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+    /** Function called when page is changed. */
+    onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+    /** Label for English words "show more" */
+    showMoreWords?: string;
+    /** Label for English words "show less" */
+    showLessWords?: string;
+    /** Additional props passed to card title */
+    cardTitleProps?: CardTitleProps;
+    /** Additional props passed to card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to card footer */
+    cardFooterProps?: CardFooterProps;
+}
+declare const SourcesCardBase: FunctionComponent<SourcesCardBaseProps>;
+export default SourcesCardBase;

package/dist/esm/SourcesCardBase/SourcesCardBase.js

@@ -0,0 +1,56 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+// Import PatternFly components
+import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, ExpandableSection, ExpandableSectionVariant, Icon, Truncate } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+const SourcesCardBase = (_a) => {
+    var _b;
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact, cardTitleProps, cardBodyProps, cardFooterProps, layout = 'paginated', cardMaxWidth = '400px' } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact", "cardTitleProps", "cardBodyProps", "cardFooterProps", "layout", "cardMaxWidth"]);
+    const [page, setPage] = useState(1);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
+    const handleNewPage = (_evt, newPage) => {
+        setPage(newPage);
+        onSetPage && onSetPage(_evt, newPage);
+    };
+    const renderTitle = (title, index, truncateProps) => {
+        if (title) {
+            return _jsx(Truncate, Object.assign({ content: title }, truncateProps));
+        }
+        return `Source ${index !== undefined ? index + 1 : page}`;
+    };
+    const renderUncontrolledSourceCard = (source, index) => {
+        var _a;
+        return (_jsx("li", { className: "pf-chatbot__sources-list-item", children: _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card", style: { maxWidth: cardMaxWidth } }, props, { children: [_jsx(CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: _jsxs("div", { className: "pf-chatbot__sources-card-title-container", children: [_jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: source.link, icon: source.isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: source.isExternal ? 'noreferrer' : undefined, target: source.isExternal ? '_blank' : undefined, onClick: (_a = source.onClick) !== null && _a !== void 0 ? _a : undefined }, source.titleProps, { children: renderTitle(source.title, index, source.truncateProps) })), source.subtitle && _jsx("span", { className: "pf-chatbot__sources-card-subtitle", children: source.subtitle })] }) })), source.body && (_jsx(CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${source.footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: source.hasShowMore ? (
+                        // prevents extra VO announcements of button text - parent Message has aria-live
+                        _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleTextCollapsed: showMoreWords, toggleTextExpanded: showLessWords, truncateMaxLines: 2, children: source.body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: source.body })) }))), source.footer && (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: source.footer })))] })) }, index));
+    };
+    if (layout === 'wrap') {
+        return (_jsx("div", { className: "pf-chatbot__sources-card-base pf-m-wrap", children: _jsx("ul", { className: "pf-chatbot__sources-list", role: "list", children: sources.map((source, index) => renderUncontrolledSourceCard(source, index)) }) }));
+    }
+    return (_jsx("div", { className: "pf-chatbot__sources-card-base", children: _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: _jsxs("div", { className: "pf-chatbot__sources-card-title-container", children: [_jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title, undefined, sources[page - 1].truncateProps) })), sources[page - 1].subtitle && (_jsx("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && (_jsx(CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: sources[page - 1].hasShowMore ? (
+                    // prevents extra VO announcements of button text - parent Message has aria-live
+                    _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
+                                        const newPage = page >= 1 ? page - 1 : 1;
+                                        onPreviousClick && onPreviousClick(event, newPage);
+                                        handleNewPage(event, newPage);
+                                    }, "aria-label": toPreviousPageAriaLabel, children: _jsx(Icon, { iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" }) }) }) }), _jsxs("span", { "aria-hidden": "true", children: [page, "/", sources.length] }), _jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
+                                        const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
+                                        onNextClick && onNextClick(event, newPage);
+                                        handleNewPage(event, newPage);
+                                    }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))))] })) }));
+};
+export default SourcesCardBase;

package/dist/esm/SourcesCardBase/SourcesCardBase.test.d.ts

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

package/dist/esm/SourcesCardBase/SourcesCardBase.test.js

@@ -0,0 +1,194 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import SourcesCardBase from './SourcesCardBase';
+describe('SourcesCardBase', () => {
+    it('should render card correctly if one source with only a link is passed in', () => {
+        render(_jsx(SourcesCardBase, { sources: [{ link: '' }] }));
+        expect(screen.getByText('Source 1')).toBeTruthy();
+        // no buttons or navigation when there is only 1 source
+        expect(screen.queryByRole('button')).toBeFalsy();
+        expect(screen.queryByText('1/1')).toBeFalsy();
+    });
+    it('should render card correctly if one source with a title is passed in', () => {
+        render(_jsx(SourcesCardBase, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+    });
+    it('should render card correctly if one source with a body is passed in', () => {
+        render(_jsx(SourcesCardBase, { sources: [{ link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
+    });
+    it('should render card correctly if one source with a title and body is passed in', () => {
+        render(_jsx(SourcesCardBase, { sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(screen.getByText('To make an apple pie, you must first...')).toBeTruthy();
+    });
+    it('should render multiple cards correctly', () => {
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(screen.getByText('1/2')).toBeTruthy();
+        screen.getByRole('button', { name: /Go to previous page/i });
+        screen.getByRole('button', { name: /Go to next page/i });
+    });
+    it('should navigate between cards correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+        expect(screen.getByText('1/2')).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
+        yield userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+        expect(screen.queryByText('How to make an apple pie')).toBeFalsy();
+        expect(screen.getByText('How to make cookies')).toBeTruthy();
+        expect(screen.getByText('2/2')).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
+        expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
+    }));
+    it('should apply className appropriately', () => {
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], className: "test" }));
+        const element = screen.getByRole('navigation');
+        expect(element).toHaveClass('test');
+    });
+    it('should disable pagination appropriately', () => {
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], isDisabled: true }));
+        expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
+        expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
+    });
+    it('should render navigation aria label appropriately', () => {
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(screen.getByRole('navigation', { name: /Pagination/i })).toBeTruthy();
+    });
+    it('should change paginationAriaLabel appropriately', () => {
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], paginationAriaLabel: "Navegaci\u00F3n" }));
+        expect(screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
+    });
+    it('should change toNextPageAriaLabel appropriately', () => {
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], toNextPageAriaLabel: "Pase a la siguiente p\u00E1gina" }));
+        expect(screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
+    });
+    it('should change toPreviousPageAriaLabel appropriately', () => {
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], toPreviousPageAriaLabel: "Presione para regresar a la p\u00E1gina anterior" }));
+        expect(screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy();
+    });
+    it('should call onNextClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], onNextClick: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+        expect(spy).toHaveBeenCalled();
+    }));
+    it('should call onPreviousClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], onPreviousClick: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+        yield userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
+        expect(spy).toHaveBeenCalled();
+    }));
+    it('should call onSetPage appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(SourcesCardBase, { sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], onSetPage: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+        yield userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
+        expect(spy).toHaveBeenCalledTimes(2);
+    }));
+    it('should handle showMore appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(SourcesCardBase, { sources: [
+                {
+                    title: 'Getting started with Red Hat OpenShift',
+                    link: '#',
+                    body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+                    hasShowMore: true
+                },
+                {
+                    title: 'Azure Red Hat OpenShift documentation',
+                    link: '#',
+                    body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+                },
+                {
+                    title: 'OKD Documentation: Home',
+                    link: '#',
+                    body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
+                }
+            ] }));
+        expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
+    }));
+    it('should call onClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(SourcesCardBase, { sources: [{ title: 'How to make an apple pie', link: '', onClick: spy }] }));
+        yield userEvent.click(screen.getByRole('link', { name: /How to make an apple pie/i }));
+        expect(spy).toHaveBeenCalled();
+    }));
+    it('should apply titleProps appropriately', () => {
+        render(_jsx(SourcesCardBase, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
+        expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
+    });
+    it('should render with wrap layout when layout prop is set to wrap', () => {
+        render(_jsx(SourcesCardBase, { layout: "wrap", sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' },
+                { title: 'How to make a sandwich', link: '' }
+            ] }));
+        expect(screen.getByText('How to make an apple pie')).toBeVisible();
+        expect(screen.getByText('How to make cookies')).toBeVisible();
+        expect(screen.getByText('How to make a sandwich')).toBeVisible();
+        expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+        expect(screen.queryByText('1/3')).not.toBeInTheDocument();
+    });
+    it('should apply default cardMaxWidth when using wrap layout', () => {
+        render(_jsx(SourcesCardBase, { layout: "wrap", sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        const firstCard = screen.getByText('How to make an apple pie').closest('.pf-chatbot__sources-card');
+        expect(firstCard).toHaveStyle({ maxWidth: '400px' });
+    });
+    it('should apply custom cardMaxWidth when using wrap layout', () => {
+        render(_jsx(SourcesCardBase, { layout: "wrap", sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ], cardMaxWidth: "500px" }));
+        const firstCard = screen.getByText('How to make an apple pie').closest('.pf-chatbot__sources-card');
+        expect(firstCard).toHaveStyle({ maxWidth: '500px' });
+    });
+});

package/dist/esm/SourcesCardBase/index.d.ts

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

package/dist/esm/SourcesCardBase/index.js

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

package/dist/esm/TermsOfUse/TermsOfUse.d.ts

@@ -0,0 +1,36 @@
+import type { FunctionComponent } from 'react';
+import { ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface TermsOfUseProps extends ModalProps {
+    /** Class applied to modal */
+    className?: string;
+    /** Action assigned to primary modal button */
+    onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Action assigned to secondary modal button */
+    onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Name of primary modal button */
+    primaryActionBtn?: string;
+    /** Name of secondary modal button */
+    secondaryActionBtn?: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** Optional image displayed in header */
+    image?: string;
+    /** Alt text for optional image displayed in header */
+    altText?: string;
+    /** Ref applied to modal */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** OuiaID applied to modal */
+    ouiaId?: string;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
+}
+export declare const TermsOfUseBase: FunctionComponent<TermsOfUseProps>;
+declare const TermsOfUse: import("react").ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default TermsOfUse;

package/dist/esm/TermsOfUse/TermsOfUse.js

@@ -0,0 +1,30 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+export const TermsOfUseBase = (_a) => {
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse', isCompact } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId", "isCompact"]);
+    const handlePrimaryAction = (_event) => {
+        handleModalToggle(_event);
+        onPrimaryAction && onPrimaryAction(_event);
+    };
+    const handleSecondaryAction = (_event) => {
+        onSecondaryAction(_event);
+    };
+    const modal = (_jsx(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode }, props, { children: _jsxs("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef, children: [_jsx(ModalHeader, { className: "pf-chatbot__terms-of-use--modal-header", children: _jsxs("div", { className: "pf-chatbot__terms-of-use--header", children: [!isCompact && image && altText && (_jsx("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText })), _jsx("h1", { className: "pf-chatbot__terms-of-use--title", children: title })] }) }), _jsx(ModalBody, { className: "pf-chatbot__terms-of-use--modal-body", children: _jsx(Content, { children: children }) }), _jsxs(ModalFooter, { className: "pf-chatbot__terms-of-use--footer", children: [_jsx(Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg", children: primaryActionBtn }, "terms-of-use-modal-primary"), _jsx(Button, { isBlock: true, variant: "secondary", onClick: handleSecondaryAction, size: "lg", children: secondaryActionBtn }, "terms-of-use-modal-secondary")] })] }) })));
+    return modal;
+};
+const TermsOfUse = forwardRef((props, ref) => (_jsx(TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
+export default TermsOfUse;

package/dist/esm/TermsOfUse/TermsOfUse.test.d.ts

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

package/dist/esm/TermsOfUse/TermsOfUse.test.js

@@ -0,0 +1,72 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import TermsOfUse from './TermsOfUse';
+import { Content } from '@patternfly/react-core';
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+const body = (_jsxs(Content, { children: [_jsx("h1", { children: "Heading 1" }), _jsx("p", { children: "Legal text" })] }));
+describe('TermsOfUse', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render modal correctly', () => {
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms", children: body }));
+        expect(screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+        expect(screen.getByText(/Legal text/i)).toBeTruthy();
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+    });
+    it('should handle image and altText props', () => {
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, image: "./image.png", altText: "Test image", children: body }));
+        expect(screen.getByRole('img')).toBeTruthy();
+        expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+    });
+    it('should handle className prop', () => {
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test", children: body }));
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+        expect(screen.getByRole('dialog')).toHaveClass('test');
+    });
+    it('should handle title prop', () => {
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title", children: body }));
+        expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+        expect(screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
+    });
+    it('should handle primary button prop', () => {
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First", children: body }));
+        expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
+    });
+    it('should handle secondary button prop', () => {
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second", children: body }));
+        expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
+    });
+    it('should handle primary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(TermsOfUse, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield userEvent.click(screen.getByRole('button', { name: /Accept/i }));
+        expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle secondary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield userEvent.click(screen.getByRole('button', { name: /Decline/i }));
+        expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).not.toHaveBeenCalled();
+    }));
+});

package/dist/esm/TermsOfUse/index.d.ts

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

package/dist/esm/TermsOfUse/index.js

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