Convert Tooltip component to Typescript

packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/CopyButton.test.js.snap

@@ -3,7 +3,7 @@
 exports[`copy button render 1`] = `
 <Tooltip
   appendTo={[Function]}
-  className={null}
+  className=""
   content={
     <div>
       Copy Me

packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.md

@@ -1,6 +1,7 @@
 ---
 title: 'Tooltip'
 cssPrefix: 'pf-c-tooltip'
+typescript: true
 propComponents: ['Tooltip']
 ---
 

packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.test.js → packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import { shallow } from 'enzyme';
-import { Tooltip } from './index';
+import { Tooltip } from './Tooltip';
 import Tippy from '@tippy.js/react';
 
 test('tooltip renders', () => {

packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.js → packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.tsx

@@ -1,72 +1,74 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import Tippy from '@tippy.js/react';
+import { Instance as TippyInstance } from 'tippy.js';
 import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 import { css, getModifier } from '@patternfly/react-styles';
-import TooltipArrow from './TooltipArrow';
-import TooltipContent from './TooltipContent';
+import { TooltipArrow } from './TooltipArrow';
+import { TooltipContent } from './TooltipContent';
 import { KEY_CODES } from '../../helpers/constants';
 import { c_tooltip_MaxWidth as tooltipMaxWidth } from '@patternfly/react-tokens';
 import { tippyStyles } from './styles';
+import { ReactElement } from 'react';
 
 tippyStyles();
 
-export const TooltipPosition = {
-  top: 'top',
-  bottom: 'bottom',
-  left: 'left',
-  right: 'right'
+export enum TooltipPosition {
+  top = 'top',
+  bottom = 'bottom',
+  left = 'left',
+  right = 'right'
 };
 
-const propTypes = {
+export interface TooltipProps {
   /** Tooltip position */
-  position: PropTypes.oneOf(Object.keys(TooltipPosition).map(key => TooltipPosition[key])),
+  position?: 'top' | 'bottom' | 'left' | 'right';
   /** Tooltip trigger: click, mouseenter, focus */
-  trigger: PropTypes.string,
+  trigger?: string;
   /** If true, tries to keep the tooltip in view by flipping it if necessary */
-  enableFlip: PropTypes.bool,
+  enableFlip?: boolean;
   /** Tooltip additional class */
-  className: PropTypes.string,
+  className?: string;
   /** Tooltip content */
-  content: PropTypes.node.isRequired,
+  content: React.ReactNode;
   /** The reference element to which the tooltip is relatively placed to */
-  children: PropTypes.element.isRequired,
+  children: ReactElement<any>;
   /** Delay in ms before the tooltip appears */
-  entryDelay: PropTypes.number,
+  entryDelay?: number;
   /** Delay in ms before the tooltip disappears */
-  exitDelay: PropTypes.number,
+  exitDelay?: number;
   /** The element to append the tooltip to, defaults to body */
-  appendTo: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  appendTo?: Element | ((ref: Element) => Element);
   /** z-index of the tooltip */
-  zIndex: PropTypes.number,
+  zIndex?: number;
   /** Maximum width of the tooltip (default 12.5rem) */
-  maxWidth: PropTypes.string,
+  maxWidth?: string;
   /** If true, displays as an application launcher */
-  isAppLauncher: PropTypes.bool,
-  /** Distance of the tooltip to its target */
-  distance: PropTypes.number
+  isAppLauncher?: boolean;
+  /** Distance of the tooltip to its target, defaults to 15 */
+  distance?: number;
 };
 
-const defaultProps = {
-  position: 'top',
-  trigger: 'mouseenter focus',
-  enableFlip: true,
-  className: null,
-  entryDelay: 500,
-  exitDelay: 500,
-  appendTo: () => document.body,
-  zIndex: 9999,
-  maxWidth: tooltipMaxWidth && tooltipMaxWidth.value,
-  isAppLauncher: false,
-  distance: 15
-};
+export class Tooltip extends React.Component<TooltipProps> {
+  private tip: TippyInstance;
+  static defaultProps = {
+    position: 'top',
+    trigger: 'mouseenter focus',
+    enableFlip: true,
+    className: '',
+    entryDelay: 500,
+    exitDelay: 500,
+    appendTo: () => document.body,
+    zIndex: 9999,
+    maxWidth: tooltipMaxWidth && tooltipMaxWidth.value,
+    isAppLauncher: false,
+    distance: 15
+  };
 
-class Tooltip extends React.Component {
-  storeTippyInstance = tip => {
+  storeTippyInstance = (tip:TippyInstance) => {
     this.tip = tip;
   };
 
-  handleEscKeyClick = event => {
+  handleEscKeyClick = (event: KeyboardEvent) => {
     if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.tip.state.isVisible) {
       this.tip.hide();
     }
@@ -145,8 +147,3 @@ class Tooltip extends React.Component {
     );
   }
 }
-
-Tooltip.propTypes = propTypes;
-Tooltip.defaultProps = defaultProps;
-
-export default Tooltip;

packages/patternfly-4/react-core/src/components/Tooltip/TooltipArrow.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
+import { css } from '@patternfly/react-styles';
+
+export interface TooltipArrowProps extends React.HTMLProps<HTMLDivElement> {
+  /** className */
+  className?: string;
+}
+
+export const TooltipArrow = ({ className, ...props }: TooltipArrowProps) =>
+  <div className={css(styles.tooltipArrow, className)} {...props} />;

packages/patternfly-4/react-core/src/components/Tooltip/TooltipContent.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
+import { css } from '@patternfly/react-styles';
+
+export interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** PopoverContent additional class */
+  className?: string;
+  /** PopoverContent content */
+  children: React.ReactNode;
+}
+
+export const TooltipContent = ({ className, children, ...props }: TooltipContentProps) => (
+  <div className={css(styles.tooltipContent, className)} {...props}>
+    {children}
+  </div>
+);

packages/patternfly-4/react-core/src/components/Tooltip/__snapshots__/Tooltip.test.js.snap → packages/patternfly-4/react-core/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -9,16 +9,12 @@ exports[`tooltip renders 1`] = `
       className="pf-c-tooltip"
       role="tooltip"
     >
-      <TooltipArrow
-        className={null}
-      />
-      <TooltipContent
-        className={null}
-      >
+      <Unknown />
+      <Unknown>
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
         </div>
-      </TooltipContent>
+      </Unknown>
     </div>
   }
   delay={

packages/patternfly-4/react-core/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip, TooltipPosition } from './Tooltip';

packages/patternfly-4/react-integration/cypress/integration/tooltip.spec.ts

@@ -0,0 +1,16 @@
+describe('Tooltip Demo Test', () => {
+  it('Navigate to tooltip section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#tooltip-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/tooltip-demo-nav-link')
+  });
+
+  it('Display Tooltip', () => {
+    cy.get('div[id="tooltipTarget"]').then((tooltipLink: JQuery<HTMLDivElement>) => {
+      cy.get('.tippy-popper').should('not.exist');
+      cy.wrap(tooltipLink).trigger('mouseenter')
+          .get('.tippy-popper').should('exist')
+          .get('.tippy-popper').contains('World');
+    });
+  });
+});

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TooltipDemo/TooltipDemo.tsx

@@ -1,16 +1,16 @@
-import { Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Tooltip } from '@patternfly/react-core';
 import React, { Component } from 'react';
 
-const myProps: TooltipProps = {
-  content: <div>World</div>,
-  children: <div>Hello</div>
-};
-
 export class TooltipDemo extends Component {
+  myTooltipProps = {
+    content: <div>World</div>,
+    children: <div id="tooltipTarget">Hello</div>
+  };
+
   render() {
     return (
-      <Tooltip content={myProps.content}>
-        {myProps.children}
+      <Tooltip content={this.myTooltipProps.content}>
+        {this.myTooltipProps.children}
       </Tooltip>
     );
   };