@patternfly/chatbot 1.0.0

package/src/SourcesCardBase/SourcesCardBase.tsx

@@ -0,0 +1,311 @@
+// ============================================================================
+// 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;
+  /** 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;
+}
+
+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,
+  layout = 'paginated',
+  cardMaxWidth = '400px',
+  ...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, index?: number, truncateProps?: TruncateProps) => {
+    if (title) {
+      return <Truncate content={title} {...truncateProps} />;
+    }
+    return `Source ${index !== undefined ? index + 1 : page}`;
+  };
+
+  const renderUncontrolledSourceCard = (source: SourcesCardBaseProps['sources'][0], index: number) => (
+    <li key={index} className="pf-chatbot__sources-list-item">
+      <Card isCompact={isCompact} className="pf-chatbot__sources-card" style={{ maxWidth: cardMaxWidth }} {...props}>
+        <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
+          <div className="pf-chatbot__sources-card-title-container">
+            <Button
+              component="a"
+              variant={ButtonVariant.link}
+              href={source.link}
+              icon={source.isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+              iconPosition="end"
+              isInline
+              rel={source.isExternal ? 'noreferrer' : undefined}
+              target={source.isExternal ? '_blank' : undefined}
+              onClick={source.onClick ?? undefined}
+              {...source.titleProps}
+            >
+              {renderTitle(source.title, index, source.truncateProps)}
+            </Button>
+            {source.subtitle && <span className="pf-chatbot__sources-card-subtitle">{source.subtitle}</span>}
+          </div>
+        </CardTitle>
+        {source.body && (
+          <CardBody
+            className={`pf-chatbot__sources-card-body ${source.footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
+            {...cardBodyProps}
+          >
+            {source.hasShowMore ? (
+              // prevents extra VO announcements of button text - parent Message has aria-live
+              <div aria-live="off">
+                <ExpandableSection
+                  variant={ExpandableSectionVariant.truncate}
+                  toggleTextCollapsed={showMoreWords}
+                  toggleTextExpanded={showLessWords}
+                  truncateMaxLines={2}
+                >
+                  {source.body}
+                </ExpandableSection>
+              </div>
+            ) : (
+              <div className="pf-chatbot__sources-card-body-text">{source.body}</div>
+            )}
+          </CardBody>
+        )}
+        {source.footer && (
+          <CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
+            {source.footer}
+          </CardFooter>
+        )}
+      </Card>
+    </li>
+  );
+
+  if (layout === 'wrap') {
+    return (
+      <div className="pf-chatbot__sources-card-base pf-m-wrap">
+        <ul className="pf-chatbot__sources-list" role="list">
+          {sources.map((source, index) => renderUncontrolledSourceCard(source, index))}
+        </ul>
+      </div>
+    );
+  }
+
+  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, undefined, 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';

package/src/TermsOfUse/TermsOfUse.scss

@@ -0,0 +1,86 @@
+.pf-chatbot__terms-of-use-modal {
+  .pf-v6-c-content {
+    font-size: var(--pf-t--global--font--size--body--lg);
+
+    h2 {
+      font-size: var(--pf-t--global--icon--size--font--heading--h2);
+      font-family: var(--pf-t--global--font--family--heading);
+      margin-bottom: var(--pf-t--global--spacer--md);
+      margin-top: var(--pf-t--global--spacer--md);
+      font-weight: var(--pf-t--global--font--weight--heading--default);
+    }
+    h2:first-of-type {
+      margin-top: 0;
+    }
+  }
+
+  .pf-chatbot__terms-of-use--header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--pf-t--global--spacer--xl);
+    margin-block-start: var(--pf-t--global--spacer--xl);
+  }
+
+  .pf-chatbot__terms-of-use--title {
+    font-size: var(--pf-t--global--font--size--heading--h1);
+    font-family: var(--pf-t--global--font--family--heading);
+    font-weight: var(--pf-t--global--font--weight--heading--bold);
+  }
+
+  .pf-chatbot__terms-of-use--footer {
+    margin-block-start: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__terms-of-use--section {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+
+  // for handling zoom conditions; zoom to 125% or higher to see this
+  @media screen and (max-height: 620px) {
+    .pf-v6-c-modal-box__body {
+      --pf-v6-c-modal-box__body--MinHeight: auto;
+      overflow: visible;
+    }
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded {
+  // override parent modal style
+  height: inherit !important;
+
+  .pf-v6-c-content {
+    h2 {
+      font-size: var(--pf-t--global--icon--size--font--heading--h1);
+    }
+  }
+
+  .pf-chatbot__terms-of-use--title {
+    font-size: var(--pf-t--global--font--size--heading--2xl);
+  }
+}
+
+.pf-chatbot__terms-of-use-modal.pf-m-compact {
+  .pf-chatbot__terms-of-use--header {
+    gap: var(--pf-t--global--spacer--md);
+    align-items: flex-start;
+    margin-block-start: var(--pf-t--global--spacer--lg);
+  }
+
+  .pf-chatbot__terms-of-use--modal-header {
+    --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__terms-of-use--modal-body {
+    --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+}

package/src/TermsOfUse/TermsOfUse.test.tsx

@@ -0,0 +1,137 @@
+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 = (
+  <Content>
+    <h1>Heading 1</h1>
+    <p>Legal text</p>
+  </Content>
+);
+describe('TermsOfUse', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render modal correctly', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        ouiaId="Terms"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    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(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        image="./image.png"
+        altText="Test image"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+  });
+  it('should handle className prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        className="test"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    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(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        title="Updated title"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    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(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        primaryActionBtn="First"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
+  });
+  it('should handle secondary button prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        secondaryActionBtn="Second"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
+  });
+  it('should handle primary button click', async () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+      >
+        {body}
+      </TermsOfUse>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Accept/i }));
+    expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).toHaveBeenCalledTimes(1);
+  });
+  it('should handle secondary button click', async () => {
+    render(
+      <TermsOfUse isModalOpen onSecondaryAction={onSecondaryAction} handleModalToggle={handleModalToggle}>
+        {body}
+      </TermsOfUse>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Decline/i }));
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).not.toHaveBeenCalled();
+  });
+});

package/src/TermsOfUse/TermsOfUse.tsx

@@ -0,0 +1,123 @@
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+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 const TermsOfUseBase: FunctionComponent<TermsOfUseProps> = ({
+  handleModalToggle,
+  isModalOpen,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn = 'Accept',
+  secondaryActionBtn = 'Decline',
+  title = 'Terms of use',
+  image,
+  altText,
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  children,
+  innerRef,
+  ouiaId = 'TermsOfUse',
+  isCompact,
+  ...props
+}: TermsOfUseProps) => {
+  const handlePrimaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onPrimaryAction && onPrimaryAction(_event);
+  };
+
+  const handleSecondaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    onSecondaryAction(_event);
+  };
+
+  const modal = (
+    <ChatbotModal
+      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}
+    >
+      {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
+      <section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
+        <ModalHeader className="pf-chatbot__terms-of-use--modal-header">
+          <div className="pf-chatbot__terms-of-use--header">
+            {!isCompact && image && altText && (
+              <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />
+            )}
+            <h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
+          </div>
+        </ModalHeader>
+        <ModalBody className="pf-chatbot__terms-of-use--modal-body">
+          <Content>{children}</Content>
+        </ModalBody>
+        <ModalFooter className="pf-chatbot__terms-of-use--footer">
+          <Button
+            isBlock
+            key="terms-of-use-modal-primary"
+            variant="primary"
+            onClick={handlePrimaryAction}
+            form="terms-of-use-form"
+            size="lg"
+          >
+            {primaryActionBtn}
+          </Button>
+          <Button
+            isBlock
+            key="terms-of-use-modal-secondary"
+            variant="secondary"
+            onClick={handleSecondaryAction}
+            size="lg"
+          >
+            {secondaryActionBtn}
+          </Button>
+        </ModalFooter>
+      </section>
+    </ChatbotModal>
+  );
+
+  return modal;
+};
+
+const TermsOfUse = forwardRef((props: TermsOfUseProps, ref: Ref<HTMLDivElement>) => (
+  <TermsOfUseBase innerRef={ref} {...props} />
+));
+
+export default TermsOfUse;

package/src/TermsOfUse/index.ts

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