@patternfly/chatbot 6.3.0-prerelease.21 → 6.3.0-prerelease.22

package/dist/cjs/SourcesCard/SourcesCard.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { CardProps } from '@patternfly/react-core';
+import { ButtonProps, CardProps } from '@patternfly/react-core';
 export interface SourcesCardProps extends CardProps {
     /** Additional classes for the pagination navigation container. */
     className?: string;
@@ -11,11 +11,20 @@ export interface SourcesCardProps extends CardProps {
     paginationAriaLabel?: string;
     /** Content rendered inside the paginated card */
     sources: {
+        /** Title of sources card */
         title?: 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;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -17,6 +17,7 @@ const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
 const SourcesCard = (_a) => {
+    var _b;
     var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
     const [page, setPage] = (0, react_1.useState)(1);
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
@@ -33,7 +34,7 @@ const SourcesCard = (_a) => {
         }
         return `Source ${page}`;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, children: renderTitle(sources[page - 1].title) }) }), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__source", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural) }), (0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? (0, jsx_runtime_1.jsx)(react_icons_1.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) })) }), sources[page - 1].body && ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
                         // prevents extra VO announcements of button text - parent Message has aria-live
                         (0, jsx_runtime_1.jsx)("div", { "aria-live": "off", children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__sources-card-footer", children: (0, jsx_runtime_1.jsxs)("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
                                             const newPage = page >= 1 ? page - 1 : 1;

package/dist/cjs/SourcesCard/SourcesCard.test.js

@@ -174,4 +174,14 @@ describe('SourcesCard', () => {
             ] }));
         expect(react_1.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();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', onClick: spy }] }));
+        yield user_event_1.default.click(react_1.screen.getByRole('link', { name: /How to make an apple pie/i }));
+        expect(spy).toHaveBeenCalled();
+    }));
+    it('should apply titleProps appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
+        expect(react_1.screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
+    });
 });

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

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { CardProps } from '@patternfly/react-core';
+import { ButtonProps, CardProps } from '@patternfly/react-core';
 export interface SourcesCardProps extends CardProps {
     /** Additional classes for the pagination navigation container. */
     className?: string;
@@ -11,11 +11,20 @@ export interface SourcesCardProps extends CardProps {
     paginationAriaLabel?: string;
     /** Content rendered inside the paginated card */
     sources: {
+        /** Title of sources card */
         title?: 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;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;

package/dist/esm/SourcesCard/SourcesCard.js

@@ -15,6 +15,7 @@ import { useState } from 'react';
 import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, ExpandableSection, ExpandableSectionVariant, Icon, pluralize, Truncate } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const SourcesCard = (_a) => {
+    var _b;
     var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
     const [page, setPage] = useState(1);
     const [isExpanded, setIsExpanded] = useState(false);
@@ -31,7 +32,7 @@ const SourcesCard = (_a) => {
         }
         return `Source ${page}`;
     };
-    return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, { className: "pf-chatbot__sources-card-title", children: _jsx(Button, { 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, children: renderTitle(sources[page - 1].title) }) }), sources[page - 1].body && (_jsx(CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
+    return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, { className: "pf-chatbot__sources-card-title", 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) })) }), sources[page - 1].body && (_jsx(CardBody, { className: `pf-chatbot__sources-card-body`, 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.length > 1 && (_jsx(CardFooter, { className: "pf-chatbot__sources-card-footer-container", 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;

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

@@ -169,4 +169,14 @@ describe('SourcesCard', () => {
             ] }));
         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(SourcesCard, { 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(SourcesCard, { 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');
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.21",
+  "version": "6.3.0-prerelease.22",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/SourcesCard/SourcesCard.test.tsx

@@ -242,4 +242,18 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
   });
+
+  it('should call onClick appropriately', async () => {
+    const spy = jest.fn();
+    render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '', onClick: spy }]} />);
+    await userEvent.click(screen.getByRole('link', { name: /How to make an apple pie/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should apply titleProps appropriately', () => {
+    render(
+      <SourcesCard 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');
+  });
 });

package/src/SourcesCard/SourcesCard.tsx

@@ -6,6 +6,7 @@ import { useState } from 'react';
 // Import PatternFly components
 import {
   Button,
+  ButtonProps,
   ButtonVariant,
   Card,
   CardBody,
@@ -31,11 +32,20 @@ export interface SourcesCardProps extends CardProps {
   paginationAriaLabel?: string;
   /** Content rendered inside the paginated card */
   sources: {
+    /** Title of sources card */
     title?: 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;
   }[];
   /** Label for the English word "source" */
   sourceWord?: string;
@@ -107,6 +117,8 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
             isInline
             rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
             target={sources[page - 1].isExternal ? '_blank' : undefined}
+            onClick={sources[page - 1].onClick ?? undefined}
+            {...sources[page - 1].titleProps}
           >
             {renderTitle(sources[page - 1].title)}
           </Button>