@patternfly/chatbot 1.0.0

package/src/SourcesCard/SourcesCard.scss

@@ -0,0 +1,116 @@
+.pf-chatbot__source,
+.pf-chatbot__sources-card-base {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--sm);
+  padding-block-start: var(--pf-t--global--spacer--sm);
+
+  &:not(.pf-m-wrap) {
+    max-width: 22.5rem;
+  }
+}
+
+.pf-chatbot__sources-card-base {
+  a {
+    color: var(--pf-t--global--text--color--link--default) !important;
+    -webkit-text-decoration: var(--pf-t--global--text-decoration--link--line--default) !important;
+    text-decoration: var(--pf-t--global--text-decoration--link--line--default) !important;
+  }
+}
+
+.pf-chatbot__sources-card-base.pf-m-wrap {
+  .pf-chatbot__sources-list {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    gap: var(--pf-t--global--spacer--xs);
+  }
+}
+
+.pf-chatbot__sources-card {
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+}
+
+.pf-chatbot__compact-sources-card-body {
+  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__sources-card-subtitle,
+.pf-chatbot__sources-card-subtle {
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+}
+
+.pf-chatbot__sources-card-body-text {
+  display: block;
+  display: -webkit-box;
+  height: 2.8125rem;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pf-chatbot__sources-card-title-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__sources-card-footer-container {
+  border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+  padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)
+    var(--pf-t--global--spacer--sm) !important;
+  .pf-chatbot__sources-card-footer {
+    display: flex;
+    align-items: center;
+
+    &-buttons {
+      display: flex;
+      gap: var(--pf-t--global--spacer--xs);
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+
+      .pf-v6-c-button {
+        border-radius: var(--pf-t--global--border--radius--pill);
+        padding: var(--pf-t--global--spacer--sm);
+        width: 2.31rem;
+        height: 2.31rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      button:disabled,
+      button[disabled] {
+        .pf-v6-c-icon__content {
+          color: var(--pf-t--global--icon--color--disabled);
+        }
+      }
+      .pf-v6-c-button__text {
+        display: flex;
+        align-items: center;
+      }
+      // Interactive states
+      .pf-v6-c-button:hover,
+      .pf-v6-c-button:focus {
+        .pf-v6-c-button__icon {
+          color: var(--pf-t--global--icon--color--regular);
+        }
+      }
+      .pf-v6-c-button__icon {
+        color: var(--pf-t--global--icon--color--subtle);
+      }
+    }
+  }
+}
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__sources-card {
+  .pf-v6-c-card__footer.pf-chatbot__sources-card-footer-container {
+    border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs)
+      var(--pf-t--global--spacer--xs) !important;
+  }
+}

package/src/SourcesCard/SourcesCard.test.tsx

@@ -0,0 +1,47 @@
+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(<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(
+      <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(
+      <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/src/SourcesCard/SourcesCard.tsx

@@ -0,0 +1,93 @@
+// ============================================================================
+// Chatbot Main - Messages - Sources Card
+// ============================================================================
+import type { FunctionComponent } from 'react';
+import {
+  ButtonProps,
+  CardBodyProps,
+  CardFooterProps,
+  CardProps,
+  CardTitleProps,
+  pluralize,
+  TruncateProps
+} from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import SourcesCardBase from '../SourcesCardBase';
+
+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;
+}
+
+const SourcesCard: FunctionComponent<SourcesCardProps> = ({
+  sources,
+  sourceWord = 'source',
+  sourceWordPlural = 'sources',
+  layout = 'paginated',
+  cardMaxWidth = '400px',
+  ...props
+}: SourcesCardProps) => (
+  <div className={css('pf-chatbot__source', layout === 'wrap' && 'pf-m-wrap')}>
+    <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
+    <SourcesCardBase sources={sources} layout={layout} cardMaxWidth={cardMaxWidth} {...props} />
+  </div>
+);
+
+export default SourcesCard;

package/src/SourcesCard/index.ts

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

package/src/SourcesCardBase/SourcesCardBase.test.tsx

@@ -0,0 +1,285 @@
+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(<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(<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(<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(
+      <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(
+      <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', async () => {
+    render(
+      <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();
+    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/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(
+      <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(
+      <SourcesCardBase
+        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 render navigation aria label appropriately', () => {
+    render(
+      <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(
+      <SourcesCardBase
+        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 toNextPageAriaLabel appropriately', () => {
+    render(
+      <SourcesCardBase
+        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(
+      <SourcesCardBase
+        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(
+      <SourcesCardBase
+        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(
+      <SourcesCardBase
+        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(
+      <SourcesCardBase
+        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);
+  });
+
+  it('should handle showMore appropriately', async () => {
+    render(
+      <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', async () => {
+    const spy = jest.fn();
+    render(<SourcesCardBase 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(
+      <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(
+      <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(
+      <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(
+      <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' });
+  });
+});