@patternfly/chatbot 6.4.0-prerelease.23 → 6.4.0-prerelease.24

package/src/SourcesCard/SourcesCard.tsx

@@ -1,29 +1,18 @@
 // ============================================================================
 // Chatbot Main - Messages - Sources Card
 // ============================================================================
-import type { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { useState } from 'react';
+import type { FunctionComponent } from 'react';
 // Import PatternFly components
 import {
-  Button,
   ButtonProps,
-  ButtonVariant,
-  Card,
-  CardBody,
   CardBodyProps,
-  CardFooter,
   CardFooterProps,
   CardProps,
-  CardTitle,
   CardTitleProps,
-  ExpandableSection,
-  ExpandableSectionVariant,
-  Icon,
   pluralize,
-  Truncate,
   TruncateProps
 } from '@patternfly/react-core';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import SourcesCardBase from '../SourcesCardBase';
 
 export interface SourcesCardProps extends CardProps {
   /** Additional classes for the pagination navigation container. */
@@ -84,167 +73,15 @@ export interface SourcesCardProps extends CardProps {
 }
 
 const SourcesCard: FunctionComponent<SourcesCardProps> = ({
-  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,
-  cardTitleProps,
-  cardBodyProps,
-  cardFooterProps,
   ...props
-}: SourcesCardProps) => {
-  const [page, setPage] = useState(1);
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
-    setIsExpanded(isExpanded);
-  };
-
-  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
-    setPage(newPage);
-    onSetPage && onSetPage(_evt, newPage);
-  };
-
-  const renderTitle = (title?: string, truncateProps?: TruncateProps) => {
-    if (title) {
-      return <Truncate content={title} {...truncateProps} />;
-    }
-    return `Source ${page}`;
-  };
-
-  return (
-    <div className="pf-chatbot__source">
-      <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
-      <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
-        <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
-          <div className="pf-chatbot__sources-card-title-container">
-            <Button
-              component="a"
-              variant={ButtonVariant.link}
-              href={sources[page - 1].link}
-              icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
-              iconPosition="end"
-              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, sources[page - 1].truncateProps)}
-            </Button>
-            {sources[page - 1].subtitle && (
-              <span className="pf-chatbot__sources-card-subtitle">{sources[page - 1].subtitle}</span>
-            )}
-          </div>
-        </CardTitle>
-        {sources[page - 1].body && (
-          <CardBody
-            className={`pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
-            {...cardBodyProps}
-          >
-            {sources[page - 1].hasShowMore ? (
-              // prevents extra VO announcements of button text - parent Message has aria-live
-              <div aria-live="off">
-                <ExpandableSection
-                  variant={ExpandableSectionVariant.truncate}
-                  toggleText={isExpanded ? showLessWords : showMoreWords}
-                  onToggle={onToggle}
-                  isExpanded={isExpanded}
-                  truncateMaxLines={2}
-                >
-                  {sources[page - 1].body}
-                </ExpandableSection>
-              </div>
-            ) : (
-              <div className="pf-chatbot__sources-card-body-text">{sources[page - 1].body}</div>
-            )}
-          </CardBody>
-        )}
-        {sources[page - 1].footer ? (
-          <CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
-            {sources[page - 1].footer}
-          </CardFooter>
-        ) : (
-          sources.length > 1 && (
-            <CardFooter className="pf-chatbot__sources-card-footer-container" {...cardFooterProps}>
-              <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>
-                  <span aria-hidden="true">
-                    {page}/{sources.length}
-                  </span>
-                  <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>
-              </div>
-            </CardFooter>
-          )
-        )}
-      </Card>
-    </div>
-  );
-};
+}: SourcesCardProps) => (
+  <div className="pf-chatbot__source">
+    <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
+    <SourcesCardBase sources={sources} {...props} />
+  </div>
+);
 
 export default SourcesCard;

package/src/SourcesCardBase/SourcesCardBase.test.tsx

@@ -0,0 +1,236 @@
+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');
+  });
+});

package/src/SourcesCardBase/SourcesCardBase.tsx

@@ -0,0 +1,242 @@
+// ============================================================================
+// Chatbot Main - Messages - Sources Card
+// ============================================================================
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useState } from 'react';
+// Import PatternFly components
+import {
+  Button,
+  ButtonProps,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardFooter,
+  CardFooterProps,
+  CardProps,
+  CardTitle,
+  CardTitleProps,
+  ExpandableSection,
+  ExpandableSectionVariant,
+  Icon,
+  Truncate,
+  TruncateProps
+} from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+
+export interface SourcesCardBaseProps extends CardProps {
+  /** Additional classes for the pagination navigation container. */
+  className?: 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;
+  }[];
+  /** 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 SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
+  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,
+  ...props
+}: SourcesCardBaseProps) => {
+  const [page, setPage] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+    onSetPage && onSetPage(_evt, newPage);
+  };
+
+  const renderTitle = (title?: string, truncateProps?: TruncateProps) => {
+    if (title) {
+      return <Truncate content={title} {...truncateProps} />;
+    }
+    return `Source ${page}`;
+  };
+
+  return (
+    <div className="pf-chatbot__sources-card-base">
+      <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
+        <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
+          <div className="pf-chatbot__sources-card-title-container">
+            <Button
+              component="a"
+              variant={ButtonVariant.link}
+              href={sources[page - 1].link}
+              icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+              iconPosition="end"
+              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, sources[page - 1].truncateProps)}
+            </Button>
+            {sources[page - 1].subtitle && (
+              <span className="pf-chatbot__sources-card-subtitle">{sources[page - 1].subtitle}</span>
+            )}
+          </div>
+        </CardTitle>
+        {sources[page - 1].body && (
+          <CardBody
+            className={`pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
+            {...cardBodyProps}
+          >
+            {sources[page - 1].hasShowMore ? (
+              // prevents extra VO announcements of button text - parent Message has aria-live
+              <div aria-live="off">
+                <ExpandableSection
+                  variant={ExpandableSectionVariant.truncate}
+                  toggleText={isExpanded ? showLessWords : showMoreWords}
+                  onToggle={onToggle}
+                  isExpanded={isExpanded}
+                  truncateMaxLines={2}
+                >
+                  {sources[page - 1].body}
+                </ExpandableSection>
+              </div>
+            ) : (
+              <div className="pf-chatbot__sources-card-body-text">{sources[page - 1].body}</div>
+            )}
+          </CardBody>
+        )}
+        {sources[page - 1].footer ? (
+          <CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
+            {sources[page - 1].footer}
+          </CardFooter>
+        ) : (
+          sources.length > 1 && (
+            <CardFooter className="pf-chatbot__sources-card-footer-container" {...cardFooterProps}>
+              <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>
+                  <span aria-hidden="true">
+                    {page}/{sources.length}
+                  </span>
+                  <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>
+              </div>
+            </CardFooter>
+          )
+        )}
+      </Card>
+    </div>
+  );
+};
+
+export default SourcesCardBase;

package/src/SourcesCardBase/index.ts

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