@patternfly/chatbot 2.1.0-prerelease.17

package/src/SourcesCard/SourcesCard.test.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import SourcesCard from './SourcesCard';
+
+describe('SourcesCard', () => {
+  it('should render card', () => {
+    const { container } = render(<SourcesCard sources={[{ link: '' }]} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render card correctly if one source with only a link is passed in', () => {
+    render(<SourcesCard sources={[{ link: '' }]} />);
+    expect(screen.getByText('1 source')).toBeTruthy();
+    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 of 1')).toBeFalsy();
+  });
+
+  it('should render card correctly if one source with a title is passed in', () => {
+    render(<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 card correctly if one source with a body is passed in', () => {
+    render(<SourcesCard sources={[{ link: '', body: 'To make an apple pie, you must first...' }]} />);
+    expect(screen.getByText('1 source')).toBeTruthy();
+    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(
+      <SourcesCard
+        sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
+      />
+    );
+    expect(screen.getByText('1 source')).toBeTruthy();
+    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(
+      <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 of 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', async () => {
+    render(
+      <SourcesCard
+        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 of 2')).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
+    await 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 of 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(
+      <SourcesCard
+        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(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        isDisabled
+      />
+    );
+    expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
+  });
+
+  it('should change ofWord appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        ofWord={'de'}
+      />
+    );
+    expect(screen.getByText('1 de 2')).toBeTruthy();
+  });
+
+  it('should render navigation aria label appropriately', () => {
+    render(
+      <SourcesCard
+        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(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        paginationAriaLabel="Navegación"
+      />
+    );
+    expect(screen.getByRole('navigation', { name: /Navegación/i })).toBeTruthy();
+  });
+
+  it('should change sourceWord appropriately', () => {
+    render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '' }]} sourceWord={'fuente'} />);
+    expect(screen.getByText('1 fuente')).toBeTruthy();
+  });
+
+  it('should sourceWordPlural appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        sourceWordPlural={'fuentes'}
+      />
+    );
+    expect(screen.getByText('2 fuentes')).toBeTruthy();
+  });
+
+  it('should change toNextPageAriaLabel appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        toNextPageAriaLabel="Pase a la siguiente página"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Pase a la siguiente página/i })).toBeTruthy();
+  });
+
+  it('should change toPreviousPageAriaLabel appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        toPreviousPageAriaLabel="Presione para regresar a la página anterior"
+      />
+    );
+    expect(screen.getByRole('button', { name: /Presione para regresar a la página anterior/i })).toBeTruthy();
+  });
+
+  it('should call onNextClick appropriately', async () => {
+    const spy = jest.fn();
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        onNextClick={spy}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should call onPreviousClick appropriately', async () => {
+    const spy = jest.fn();
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        onPreviousClick={spy}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should call onSetPage appropriately', async () => {
+    const spy = jest.fn();
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+        onSetPage={spy}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+});

package/src/SourcesCard/SourcesCard.tsx

@@ -0,0 +1,159 @@
+// ============================================================================
+// Chatbot Main - Messages - Sources Card
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import {
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardFooter,
+  CardProps,
+  CardTitle,
+  Icon,
+  pluralize,
+  Truncate
+} from '@patternfly/react-core';
+
+export interface SourcesCardProps extends CardProps {
+  /** Additional classes for the pagination navigation container. */
+  className?: string;
+  /** Flag indicating if the pagination is disabled. */
+  isDisabled?: boolean;
+  /** Label for the English word "of". */
+  ofWord?: string;
+  /** Accessible label for the pagination component. */
+  paginationAriaLabel?: string;
+  /** Content rendered inside the paginated card */
+  sources: { title?: string; link: string; body?: React.ReactNode | string }[];
+  /** 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;
+}
+
+const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
+  className,
+  isDisabled,
+  ofWord = 'of',
+  paginationAriaLabel = 'Pagination',
+  sources,
+  sourceWord = 'source',
+  sourceWordPlural = 'sources',
+  toNextPageAriaLabel = 'Go to next page',
+  toPreviousPageAriaLabel = 'Go to previous page',
+  onNextClick,
+  onPreviousClick,
+  onSetPage,
+  ...props
+}: SourcesCardProps) => {
+  const [page, setPage] = React.useState(1);
+
+  const handleNewPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+    onSetPage && onSetPage(_evt, newPage);
+  };
+
+  const renderTitle = (title?: string) => {
+    if (title) {
+      return <Truncate content={title} />;
+    }
+    return `Source ${page}`;
+  };
+
+  return (
+    <div className="pf-chatbot__source">
+      <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
+      <Card className="pf-chatbot__sources-card" {...props}>
+        <CardTitle className="pf-chatbot__sources-card-title">
+          <a href={sources[page - 1].link}>{renderTitle(sources[page - 1].title)}</a>
+        </CardTitle>
+        {sources[page - 1].body && (
+          <CardBody
+            className={`pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}`}
+          >
+            {sources[page - 1].body}
+          </CardBody>
+        )}
+        {sources.length > 1 && (
+          <CardFooter className="pf-chatbot__sources-card-footer-container">
+            <div className="pf-chatbot__sources-card-footer">
+              <nav className={`pf-chatbot__sources-card-footer-buttons ${className}`} aria-label={paginationAriaLabel}>
+                <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}
+                >
+                  <Icon iconSize="lg">
+                    {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                    <svg
+                      className="pf-v6-svg"
+                      viewBox="0 0 280 500"
+                      fill="currentColor"
+                      aria-hidden="true"
+                      role="img"
+                      width="1em"
+                      height="1em"
+                    >
+                      <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"></path>
+                    </svg>
+                  </Icon>
+                </Button>
+                <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);
+                  }}
+                >
+                  <Icon isInline iconSize="lg">
+                    {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                    <svg
+                      className="pf-v6-svg"
+                      viewBox="0 0 180 500"
+                      fill="currentColor"
+                      aria-hidden="true"
+                      role="img"
+                      width="1em"
+                      height="1em"
+                    >
+                      <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"></path>
+                    </svg>
+                  </Icon>
+                </Button>
+              </nav>
+
+              <span aria-hidden="true">
+                {page} {ofWord} {sources.length}
+              </span>
+            </div>
+          </CardFooter>
+        )}
+      </Card>
+    </div>
+  );
+};
+
+export default SourcesCard;

package/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SourcesCard should render card 1`] = `
+<div>
+  <div
+    class="pf-chatbot__source"
+  >
+    <span>
+      1 source
+    </span>
+    <div
+      class="pf-v6-c-card pf-chatbot__sources-card"
+      data-ouia-component-id="OUIA-Generated-Card-1"
+      data-ouia-component-type="PF6/Card"
+      data-ouia-safe="true"
+      id=""
+    >
+      <div
+        class="pf-v6-c-card__title"
+      >
+        <div
+          class="pf-v6-c-card__title-text pf-chatbot__sources-card-title"
+        >
+          <a
+            href=""
+          >
+            Source 1
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/SourcesCard/index.ts

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

package/src/index.ts

@@ -0,0 +1,73 @@
+// this file is autogenerated by generate-index.js, modifying it manually will have no effect
+
+export { default as AttachmentEdit } from './AttachmentEdit';
+export * from './AttachmentEdit';
+
+export { default as AttachMenu } from './AttachMenu';
+export * from './AttachMenu';
+
+export { default as Chatbot } from './Chatbot';
+export * from './Chatbot';
+
+export { default as ChatbotAlert } from './ChatbotAlert';
+export * from './ChatbotAlert';
+
+export { default as ChatbotContent } from './ChatbotContent';
+export * from './ChatbotContent';
+
+export { default as ChatbotConversationHistoryNav } from './ChatbotConversationHistoryNav';
+export * from './ChatbotConversationHistoryNav';
+
+export { default as ChatbotFooter } from './ChatbotFooter';
+export * from './ChatbotFooter';
+
+export { default as ChatbotHeader } from './ChatbotHeader';
+export * from './ChatbotHeader';
+
+export { default as ChatbotModal } from './ChatbotModal';
+export * from './ChatbotModal';
+
+export { default as ChatbotPopover } from './ChatbotPopover';
+export * from './ChatbotPopover';
+
+export { default as ChatbotToggle } from './ChatbotToggle';
+export * from './ChatbotToggle';
+
+export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
+export * from './ChatbotWelcomePrompt';
+
+export { default as CodeModal } from './CodeModal';
+export * from './CodeModal';
+
+export { default as FileDetails } from './FileDetails';
+export * from './FileDetails';
+
+export { default as FileDetailsLabel } from './FileDetailsLabel';
+export * from './FileDetailsLabel';
+
+export { default as FileDropZone } from './FileDropZone';
+export * from './FileDropZone';
+
+export { default as LoadingMessage } from './LoadingMessage';
+export * from './LoadingMessage';
+
+export { default as Message } from './Message';
+export * from './Message';
+
+export { default as MessageBar } from './MessageBar';
+export * from './MessageBar';
+
+export { default as MessageBox } from './MessageBox';
+export * from './MessageBox';
+
+export { default as PreviewAttachment } from './PreviewAttachment';
+export * from './PreviewAttachment';
+
+export { default as ResponseActions } from './ResponseActions';
+export * from './ResponseActions';
+
+export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
+export * from './SourceDetailsMenuItem';
+
+export { default as SourcesCard } from './SourcesCard';
+export * from './SourcesCard';

package/src/main.scss

@@ -0,0 +1,89 @@
+@import './AttachMenu/AttachMenu';
+@import './Chatbot/Chatbot';
+@import './ChatbotAlert/ChatbotAlert';
+@import './ChatbotContent/ChatbotContent';
+@import './ChatbotConversationHistoryNav/ChatbotConversationHistoryNav';
+@import './ChatbotFooter/ChatbotFooter';
+@import './ChatbotHeader/ChatbotHeader';
+@import './ChatbotModal/ChatbotModal';
+@import './ChatbotPopover/ChatbotPopover';
+@import './ChatbotToggle/ChatbotToggle';
+@import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
+@import './CodeModal/CodeModal';
+@import './FileDetails/FileDetails';
+@import './FileDetailsLabel/FileDetailsLabel';
+@import './FileDropZone/FileDropZone';
+@import './Message/Message';
+@import './Message/CodeBlockMessage/CodeBlockMessage';
+@import './Message/TextMessage/TextMessage';
+@import './Message/ListMessage/ListMessage';
+@import './Message/MessageLoading';
+@import './MessageBar/MessageBar';
+@import './MessageBox/MessageBox';
+@import './MessageBox/JumpButton';
+@import './ResponseActions/ResponseActions';
+@import './SourcesCard/SourcesCard.scss';
+@import './SourceDetailsMenuItem/SourceDetailsMenuItem';
+
+:where(:root) {
+  // ============================================================================
+  // Chatbot Custom Default Tokens
+  // ============================================================================
+
+  --pf-t--chatbot--heading--font-family: var(
+    --pf-v6-c-content--heading--FontFamily,
+    redhatdisplayvf,
+    redhatdisplay,
+    helvetica,
+    arial,
+    sans-serif
+  );
+
+  --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
+  --pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
+
+  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
+
+  --pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+
+  --pf-t--chatbot--blue-icon--background--color--hover: rgba(
+    185,
+    218,
+    252,
+    0.25
+  ); // --pf-t--global--color--nonstatus--blue--default @ 25%
+  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
+
+  // ============================================================================
+  // Chatbot Default tokens using PF semantic tokens
+  // ============================================================================
+  --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
+
+  --pf-t--chatbot--font-size: var(--pf-t--global--font--size--md);
+  --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
+  --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
+
+  --pf-t--chatbot--icon--fill: var(--pf-t--global--icon--color--subtle);
+  --pf-t--chatbot--icon--fill--hover: var(--pf-t--global--icon--color--regular);
+  --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
+
+  --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
+}
+
+// ============================================================================
+// Chatbot Custom Dark Theme Tokens
+// ============================================================================
+:where(.pf-v6-theme-dark) {
+  --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
+  --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
+
+  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
+
+  --pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
+  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
+}
+
+.ws-full-page-utils {
+  left: 0 !important;
+  right: auto !important;
+}

package/tsconfig.cjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/cjs",
+    "module": "commonjs"
+  }
+}
+