[ARGG-1157][BpkTooltip]: Migrate tooltip to floating-ui

examples/bpk-component-tooltip/examples.js → examples/bpk-component-tooltip/examples.tsx

@@ -16,13 +16,7 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import { useRef, forwardRef } from 'react';
-
-import {
-  colorMonteverde,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { useRef } from 'react';
 
 import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text';
 import BpkTooltip, {
@@ -41,11 +35,6 @@ const Heading = withDefaultProps(BpkText, {
   tagName: 'h4',
 });
 
-const HeadingComponent = forwardRef((props: { children: Node }, ref) => (
-  <div ref={ref}>
-    <Heading>{props.children}</Heading>
-  </div>
-));
 
 const DefaultExample = () => {
   const target = useRef(null);
@@ -55,7 +44,7 @@ const DefaultExample = () => {
       <BpkTooltip
         ariaLabel="Montréal-Trudeau International Airport"
         id="my-tooltip"
-        target={<HeadingComponent ref={target}>YUL</HeadingComponent>}
+        target={<div ref={target}><Heading>YUL</Heading></div>}
       >
         Montréal-Trudeau International Airport
       </BpkTooltip>
@@ -72,7 +61,7 @@ const DarkExample = () => {
         ariaLabel="Edinburgh Airport"
         type={TOOLTIP_TYPES.dark}
         id="my-tooltip"
-        target={<HeadingComponent ref={target}>EDI</HeadingComponent>}
+        target={<div ref={target}><Heading>EDI</Heading></div>}
       >
         Edinburgh Airport
       </BpkTooltip>
@@ -88,7 +77,7 @@ const SideExample = () => {
       <BpkTooltip
         ariaLabel="Julius Nyerere International Airport, Dar es Salaam"
         id="my-tooltip"
-        target={<HeadingComponent ref={target}>DAR</HeadingComponent>}
+        target={<div ref={target}><Heading>DAR</Heading></div>}
         placement="right"
       >
         Julius Nyerere International Airport, Dar es Salaam
@@ -105,13 +94,12 @@ const NoPaddingExample = () => {
       <BpkTooltip
         ariaLabel="Singapore Changi Airport"
         id="my-tooltip"
-        target={<HeadingComponent ref={target}>SIN</HeadingComponent>}
+        target={<div ref={target}><Heading>SIN</Heading></div>}
         padded={false}
       >
         <div
           style={{
             borderBottomWidth: '5px',
-            borderBottomColor: colorMonteverde,
             borderBottomStyle: 'solid',
             padding: '.25rem',
           }}
@@ -148,66 +136,19 @@ const LinkExample = () => {
   );
 };
 
-const PopperModifiersExample = () => {
-  const target = useRef(null);
-
-  return (
-    <div style={wrapperStyle}>
-      <BpkTooltip
-        ariaLabel="Berlin Brandenburg Airport"
-        id="my-tooltip"
-        target={<HeadingComponent ref={target}>BER</HeadingComponent>}
-        popperModifiers={[
-          {
-            name: 'flip',
-            options: { enabled: false },
-          },
-        ]}
-      >
-        Berlin Brandenburg Airport
-      </BpkTooltip>
-    </div>
-  );
-};
 
-const FocusExample = () => {
-  const targetRef1 = useRef(null);
-  const targetRef2 = useRef(null);
-  const targetRef3 = useRef(null);
-  const targetRef5 = useRef(null);
+const VisualTestExample = () => {
+  const target = useRef(null);
 
   return (
     <div style={wrapperStyle}>
       <BpkTooltip
-        ariaLabel="Should be focused on first"
-        id="my-tooltip"
-        target={<HeadingComponent ref={targetRef1}>One</HeadingComponent>}
-      >
-        Should be focused on first
-      </BpkTooltip>
-      <BpkTooltip
-        ariaLabel="Should be focused on second"
-        id="my-tooltip"
-        target={<HeadingComponent ref={targetRef2}>Two</HeadingComponent>}
-      >
-        Should be focused on second
-      </BpkTooltip>
-      <BpkTooltip
-        ariaLabel="Should be focused on third"
-        id="my-tooltip"
-        target={<HeadingComponent ref={targetRef3}>Three</HeadingComponent>}
-      >
-        Should be focused on third
-      </BpkTooltip>
-      <button type="button" onClick={() => {}}>
-        Four
-      </button>
-      <BpkTooltip
-        ariaLabel="Should be focused on fifth"
+        ariaLabel="Montréal-Trudeau International Airport"
         id="my-tooltip"
-        target={<HeadingComponent ref={targetRef5}>Five</HeadingComponent>}
+        target={<div ref={target}><Heading>YUL</Heading></div>}
+        isOpen
       >
-        Should be focused on fifth
+        Montréal-Trudeau International Airport
       </BpkTooltip>
     </div>
   );
@@ -219,6 +160,5 @@ export {
   SideExample,
   NoPaddingExample,
   LinkExample,
-  PopperModifiersExample,
-  FocusExample,
+  VisualTestExample,
 };

examples/bpk-component-tooltip/stories.js → examples/bpk-component-tooltip/stories.tsx

@@ -16,17 +16,15 @@
  * limitations under the License.
  */
 
-
-import BpkTooltip from '../../packages/bpk-component-tooltip/src/BpkTooltipPortal';
+import BpkTooltip from '../../packages/bpk-component-tooltip/src/BpkTooltip';
 
 import {
   DefaultExample,
   DarkExample,
   SideExample,
   NoPaddingExample,
   LinkExample,
-  PopperModifiersExample,
-  FocusExample,
+  VisualTestExample,
 } from './examples';
 
 export default {
@@ -37,11 +35,26 @@ export default {
 export const Default = DefaultExample;
 export const Dark = DarkExample;
 export const OnTheSide = SideExample;
-
 export const WithoutPadding = NoPaddingExample;
-
 export const OnALink = LinkExample;
 
-export const PopperModifiers = PopperModifiersExample;
-
-export const Focus = FocusExample;
+const VisualExample = VisualTestExample;
+export const VisualTest = {
+  render: VisualExample,
+  parameters: {
+    percy: {
+      waitForTimeout: 10000
+    }
+  }
+};
+export const VisualTestWithZoom = {
+  render: VisualExample,
+  args: {
+    zoomEnabled: true,
+  },
+  parameters: {
+    percy: {
+      waitForTimeout: 10000
+    }
+  }
+};

packages/bpk-component-tooltip/index.ts

@@ -16,12 +16,12 @@
  * limitations under the License.
  */
 
-import BpkTooltipPortal from './src/BpkTooltipPortal';
+import BpkTooltip from './src/BpkTooltip';
 import { TOOLTIP_TYPES } from './src/constants';
 
-import type { Props } from './src/BpkTooltipPortal';
+import type { Props } from './src/BpkTooltip';
 
-export type BpkTooltipPortalProps = Props;
+export type BpkTooltipProps = Props;
 
-export default BpkTooltipPortal;
+export default BpkTooltip;
 export { TOOLTIP_TYPES };

packages/bpk-component-tooltip/src/BpkTooltip-test.tsx

@@ -16,47 +16,74 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 
 import BpkTooltip from './BpkTooltip';
 import { TOOLTIP_TYPES } from './constants';
 
 describe('BpkTooltip', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <BpkTooltip id="my-popover">My tooltip content</BpkTooltip>,
-    );
 
-    expect(asFragment()).toMatchSnapshot();
-  });
+  it('should render correctly', () => {
+    const target = <span>My tooltip target</span>;
 
-  it('should render correctly with type=dark', () => {
-    const { asFragment } = render(
-      <BpkTooltip type={TOOLTIP_TYPES.dark} id="my-popover">
+    render(
+      <BpkTooltip
+        id="my-popover"
+        target={target}
+        ariaLabel="My tooltip content"
+        isOpen
+      >
         My tooltip content
       </BpkTooltip>,
     );
 
-    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByText('My tooltip content')).toBeVisible();
   });
 
-  it('should render correctly with "padded" attribute equal to false', () => {
-    const { asFragment } = render(
-      <BpkTooltip id="my-tooltip" padded={false}>
+  it('should render correctly with type=dark', async () => {
+    const target = <span>My tooltip target</span>;
+
+    render(
+      <BpkTooltip
+        id="my-popover"
+        type={TOOLTIP_TYPES.dark}
+        ariaLabel="My tooltip content"
+        target={target}
+        isOpen
+      >
         My tooltip content
       </BpkTooltip>,
     );
 
-    expect(asFragment()).toMatchSnapshot();
+    await act(async () => {
+      await userEvent.hover(screen.getByText('My tooltip target'));
+    });
+    expect(screen.getByText('My tooltip content')).toBeVisible();
+    expect(screen.getByText('My tooltip content').className).toContain('bpk-tooltip__inner--dark');
   });
 
-  it('should render correctly with "className" attribute', () => {
-    const { asFragment } = render(
-      <BpkTooltip id="my-tooltip" className="my-custom-class">
+  it('should render correctly with "padded" attribute equal to false', async () => {
+    const target = <span>My tooltip target</span>;
+
+    render(
+      <BpkTooltip
+        id="my-popover"
+        ariaLabel="My tooltip content"
+        target={target}
+        padded={false}
+        isOpen
+      >
         My tooltip content
       </BpkTooltip>,
     );
 
-    expect(asFragment()).toMatchSnapshot();
+    await act(async () => {
+      await userEvent.hover(screen.getByText('My tooltip target'));
+    });
+
+    expect(screen.getByText('My tooltip content')).toBeVisible();
+    expect(screen.getByText('My tooltip content').className).not.toContain('bpk-tooltip__inner--padded');
   });
 });