Merge pull request #41 from dlabaj/longtexttooltip

feat(LongTextTooltip): Added LongTextTooltip component.

packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md

@@ -0,0 +1,21 @@
+---
+section: extensions
+subsection: Component groups
+id: Long text tooltip
+source: react
+propComponents: ['LongTextTooltip']
+---
+
+import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
+
+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"
+
+```

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}/>
+)

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();
+  });
+});

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 */
+  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
+}: LongTextTooltipProps) => {
+  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;