From bd7ec2353cdd2d57c3e166b52ac8ed96bbd56dd5 Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Tue, 26 Sep 2023 11:28:38 -0400
Subject: [PATCH 1/5] feat(LongTextTooltip): Added LongTextTooltip component.

---
 .../LongTextTooltip/LongTextTooltip.md        |  17 +
 .../LongTextTooltipExample.tsx                |  10 +
 .../LongTextTooltip/LongTextTooltip.test.tsx  |  39 ++
 .../src/LongTextTooltip/LongTextTooltip.tsx   |  33 ++
 .../LongTextTooltip.test.tsx.snap             | 557 ++++++++++++++++++
 packages/module/src/LongTextTooltip/index.ts  |   3 +
 packages/module/src/index.ts                  |   3 +
 7 files changed, 662 insertions(+)
 create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
 create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx
 create mode 100644 packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx
 create mode 100644 packages/module/src/LongTextTooltip/LongTextTooltip.tsx
 create mode 100644 packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap
 create mode 100644 packages/module/src/LongTextTooltip/index.ts

diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
new file mode 100644
index 00000000..3bc3c48b
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
@@ -0,0 +1,17 @@
+---
+section: extensions
+subsection: Component groups
+id: LongTextTooltip
+source: react
+propComponents: ['LongTextTooltip']
+---
+
+import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
+
+## Component usage
+
+### LongTextTooltip component
+
+```js file="./LongTextTooltipExample.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx
new file mode 100644
index 00000000..e3a67691
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { TooltipPosition } from '@patternfly/react-core';
+import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
+
+export const LongTextTooltipExample: React.FunctionComponent = () => (
+  <LongTextTooltip
+    content="This is a very long tooltip that will be truncated to fit the screen. It will also have a max width of 400px."
+    maxLength={40}
+    tooltipPosition={TooltipPosition.bottom}/>
+)
diff --git a/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx b/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx
new file mode 100644
index 00000000..cef05968
--- /dev/null
+++ b/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import LongTextTooltip from './LongTextTooltip';
+import { render } from '@testing-library/react';
+import { TooltipPosition } from '@patternfly/react-core';
+
+describe('LongTextTooltip component', () => {
+  it('should render', () => {
+    expect(render(<LongTextTooltip />)).toMatchSnapshot();
+  });
+
+  it('should render content', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" />)).toMatchSnapshot();
+  });
+
+  it('should render content with maxLength', () => {
+    expect(
+      render(<LongTextTooltip content="Lorem Impsum" maxLength={50} />)).toMatchSnapshot();
+  });
+
+  it('should render content with maxLength shorter than content', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" maxLength={1} />)).toMatchSnapshot();
+  });
+
+  it('should render tooltip in a different spot', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" tooltipPosition={TooltipPosition.bottom}/>)).toMatchSnapshot();
+  });
+
+  it('should render tooltip in a different spot', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" tooltipPosition={TooltipPosition.left} />)).toMatchSnapshot();
+  });
+
+  it('should render tooltip in a different spot', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" tooltipPosition={TooltipPosition.right} />)).toMatchSnapshot();
+  });
+
+  it('should render content tooltip in a different spot with different width', () => {
+    expect(render(<LongTextTooltip content="Lorem Impsum" tooltipPosition={TooltipPosition.left} tooltipMaxWidth="10vw" />)).toMatchSnapshot();
+  });
+});
diff --git a/packages/module/src/LongTextTooltip/LongTextTooltip.tsx b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
new file mode 100644
index 00000000..f91c4ffe
--- /dev/null
+++ b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
@@ -0,0 +1,33 @@
+import { Tooltip, TooltipPosition, TooltipProps } from '@patternfly/react-core';
+import React from 'react';
+
+export interface LongTextTooltipProps extends Omit<TooltipProps, 'content'> {
+  /** Content to display in the tool tip */
+  content?: string;
+  /** Maximum length of the content being displayed in pixels */
+  maxLength?: number;
+  /** Position of the tooltip */
+  tooltipPosition?: TooltipPosition;
+  /** Maximum width of the tooltip */
+  tooltipMaxWidth?: string;
+}
+
+const LongTextTooltip: React.FC<LongTextTooltipProps> = ({
+  content = '',
+  maxLength = Infinity,
+  tooltipMaxWidth = '50vw',
+  tooltipPosition = TooltipPosition.top,
+  ...rest
+}) => {
+  const truncate = (str: string, max: number) => (str.length > max ? str.substr(0, max - 1) + '…' : str);
+
+  return content.length > maxLength ? (
+    <Tooltip maxWidth={tooltipMaxWidth} position={tooltipPosition} content={<div>{content}</div>} {...rest}>
+      <div>{truncate(content, maxLength)}</div>
+    </Tooltip>
+  ) : (
+    <span>{content}</span>
+  );
+};
+
+export default LongTextTooltip;
diff --git a/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap b/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap
new file mode 100644
index 00000000..cb3cb2a7
--- /dev/null
+++ b/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap
@@ -0,0 +1,557 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LongTextTooltip component should render 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span />
+    </div>
+  </body>,
+  "container": <div>
+    <span />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`LongTextTooltip component should render content 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span>
+        Lorem Impsum
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span>
+      Lorem Impsum
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`LongTextTooltip component should render content tooltip in a different spot with different width 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span>
+        Lorem Impsum
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span>
+      Lorem Impsum
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`LongTextTooltip component should render content with maxLength 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span>
+        Lorem Impsum
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span>
+      Lorem Impsum
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`LongTextTooltip component should render content with maxLength shorter than content 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        style="display: contents;"
+      >
+        <div>
+          …
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="display: contents;"
+    >
+      <div>
+        …
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`LongTextTooltip component should render tooltip in a different spot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span>
+        Lorem Impsum
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span>
+      Lorem Impsum
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`LongTextTooltip component should render tooltip in a different spot 2`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span>
+        Lorem Impsum
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span>
+      Lorem Impsum
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`LongTextTooltip component should render tooltip in a different spot 3`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span>
+        Lorem Impsum
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span>
+      Lorem Impsum
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/packages/module/src/LongTextTooltip/index.ts b/packages/module/src/LongTextTooltip/index.ts
new file mode 100644
index 00000000..44dd09bb
--- /dev/null
+++ b/packages/module/src/LongTextTooltip/index.ts
@@ -0,0 +1,3 @@
+export { default } from './LongTextTooltip';
+export { default as LongTextTooltip } from './LongTextTooltip';
+export * from './LongTextTooltip';
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
index 9de0907a..b0f65d56 100644
--- a/packages/module/src/index.ts
+++ b/packages/module/src/index.ts
@@ -24,5 +24,8 @@ export * from './ErrorState';
 export { default as HorizontalNav } from './HorizontalNav';
 export * from './HorizontalNav';
 
+export { default as LongTextTooltip } from './LongTextTooltip';
+export * from './LongTextTooltip';
+
 export { default as NotAuthorized } from './NotAuthorized';
 export * from './NotAuthorized';

From c1efad3dd95ddf4ee92a1db4187d70d3b33d49c2 Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Tue, 26 Sep 2023 11:35:04 -0400
Subject: [PATCH 2/5] fixed issue with props in documentation.

---
 packages/module/src/LongTextTooltip/LongTextTooltip.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/module/src/LongTextTooltip/LongTextTooltip.tsx b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
index f91c4ffe..64d2819a 100644
--- a/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
+++ b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
@@ -2,7 +2,7 @@ import { Tooltip, TooltipPosition, TooltipProps } from '@patternfly/react-core';
 import React from 'react';
 
 export interface LongTextTooltipProps extends Omit<TooltipProps, 'content'> {
-  /** Content to display in the tool tip */
+  /** Content to display */
   content?: string;
   /** Maximum length of the content being displayed in pixels */
   maxLength?: number;
@@ -18,7 +18,7 @@ const LongTextTooltip: React.FC<LongTextTooltipProps> = ({
   tooltipMaxWidth = '50vw',
   tooltipPosition = TooltipPosition.top,
   ...rest
-}) => {
+}: LongTextTooltipProps) => {
   const truncate = (str: string, max: number) => (str.length > max ? str.substr(0, max - 1) + '…' : str);
 
   return content.length > maxLength ? (

From 99fba75ad54cf3a6b25f4625c344c61d7bc80e77 Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Tue, 3 Oct 2023 10:02:45 -0400
Subject: [PATCH 3/5] Updated with review comments.

---
 .../examples/LongTextTooltip/LongTextTooltip.md             | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
index 3bc3c48b..1861d2c8 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
@@ -8,10 +8,14 @@ propComponents: ['LongTextTooltip']
 
 import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
 
-## Component usage
+The **long text tooltip** component is a tooltip that can be used to display long text to users. It uses the `Tooltip` component to display the truncated text passed in as `content`. It uses  `maxLength` prop to control the size of the content, and the `Tooltip` component to display the rest of the content.
+
+## Examples
 
 ### LongTextTooltip component
 
+To provide users with long text, a basic long text tooltip should contain an appropriate and informative `content` and `maxLength`.  Additionally you can pass in a `tooltipPosition` to control the position of the tooltip, and `tooltipMaxWidth` to control the tool tip width.
+
 ```js file="./LongTextTooltipExample.tsx"
 
 ```

From 79c91f3b9df3b597ff6cddede6f9e00f4a6d3b9a Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Tue, 3 Oct 2023 10:14:09 -0400
Subject: [PATCH 4/5] Removed name export

---
 packages/module/src/LongTextTooltip/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/module/src/LongTextTooltip/index.ts b/packages/module/src/LongTextTooltip/index.ts
index 44dd09bb..e86c7e52 100644
--- a/packages/module/src/LongTextTooltip/index.ts
+++ b/packages/module/src/LongTextTooltip/index.ts
@@ -1,3 +1,2 @@
 export { default } from './LongTextTooltip';
-export { default as LongTextTooltip } from './LongTextTooltip';
 export * from './LongTextTooltip';

From 6ad53a60b287053164eae4d70ad87921a334a958 Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Tue, 3 Oct 2023 10:21:48 -0400
Subject: [PATCH 5/5] Update
 packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md

Co-authored-by: Filip Hlavac <50696716+fhlavac@users.noreply.github.com>
---
 .../examples/LongTextTooltip/LongTextTooltip.md                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
index 1861d2c8..3b97f8bd 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
@@ -1,7 +1,7 @@
 ---
 section: extensions
 subsection: Component groups
-id: LongTextTooltip
+id: Long text tooltip
 source: react
 propComponents: ['LongTextTooltip']
 ---