@transferwise/components 0.0.0-experimental-88c518c → 0.0.0-experimental-656d955

package/src/stepper/Stepper.css

@@ -1 +1 @@
-.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}
+.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:inline-block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}

package/src/stepper/Stepper.less

@@ -68,7 +68,7 @@
   }
 
   & .tw-tooltip-container {
-    display: block;
+    display: inline-block;
   }
 }
 

package/src/tooltip/Tooltip.css

@@ -1 +1 @@
-.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}
+.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-tooltip,.np-tooltip .tooltip-inner{visibility:hidden}.np-tooltip--open,.np-tooltip--open .tooltip-inner{visibility:initial}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}

package/src/tooltip/Tooltip.less

@@ -34,6 +34,19 @@
 
 .np-tooltip {
   z-index: @zindex-tooltip;
+  visibility: hidden;
+
+  .tooltip-inner {
+    visibility: hidden;
+  }
+
+  &--open {
+    visibility: initial;
+
+    .tooltip-inner {
+      visibility: initial;
+    }
+  }
 }
 
 .np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner {

package/src/tooltip/Tooltip.spec.tsx

@@ -1,48 +1,116 @@
-import { render, screen, fireEvent, userEvent } from '../test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 
 import Tooltip from '.';
 
-describe('Tooltip', () => {
-  const anchor = <span>Hover over me!</span>;
+describe('Tooltip Component', () => {
+  it('renders an empty list when no items are passed', () => {
+    expect(
+      render(
+        <Tooltip label="Test Tooltip">
+          <span>Hover me</span>
+        </Tooltip>,
+      ).container,
+    ).toMatchSnapshot();
+  });
+
+  it('initially is hidden (test with toBeInTheDocument)', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Hover me</span>
+      </Tooltip>,
+    );
+    const tooltip = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveAttribute('aria-hidden', 'true');
+  });
 
-  it('wraps anchor as a children and renders it', () => {
-    render(<Tooltip label="Tooltip">{anchor}</Tooltip>);
+  it('should render the tooltip label when closed', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Hover me</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Hover me');
+    const tooltip = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltip).toHaveAttribute('aria-hidden', 'true');
 
-    expect(screen.getByText('Hover over me!')).toBeInTheDocument();
+    userEvent.hover(triggerElement);
+    expect(tooltip).toHaveAttribute('aria-hidden', 'false');
   });
 
-  it('appears onMouseOver', () => {
-    const tooltipLabel = 'Tooltip';
-    render(<Tooltip label={tooltipLabel}>{anchor}</Tooltip>);
-    expect(screen.queryByText(tooltipLabel)).not.toBeInTheDocument();
+  it('should display the tooltip on mouse hover', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Hover over me!</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Hover over me!');
 
-    userEvent.hover(screen.getByText('Hover over me!'));
-    expect(screen.getByText(tooltipLabel)).toBeInTheDocument();
+    userEvent.hover(triggerElement);
+
+    const tooltipElement = screen.queryByText('Test Tooltip');
+    expect(tooltipElement).toBeVisible();
   });
 
-  it('hides onMouseOut', () => {
-    const tooltipLabel = 'Tooltip';
-    render(<Tooltip label={tooltipLabel}>{anchor}</Tooltip>);
+  it('should hide the tooltip on mouse out', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Hover me</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Hover me');
+
+    userEvent.hover(triggerElement);
+    let tooltipElement = screen.getByText('Test Tooltip');
+    expect(tooltipElement).toBeVisible();
 
-    userEvent.hover(screen.getByText('Hover over me!'));
-    expect(screen.getByText(tooltipLabel)).toBeInTheDocument();
-    userEvent.unhover(screen.getByText('Hover over me!'));
+    userEvent.unhover(triggerElement);
+    tooltipElement = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('appears onFocus', () => {
-    const tooltipLabel = 'Tooltip';
-    render(<Tooltip label={tooltipLabel}>{anchor}</Tooltip>);
-    expect(screen.queryByText(tooltipLabel)).not.toBeInTheDocument();
+  it('should display the tooltip on focus', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Focus me</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Focus me');
+
+    userEvent.tab();
+    const tooltipElement = screen.getByText('Test Tooltip');
+    expect(tooltipElement).toBeVisible();
+  });
+
+  it('should hide the tooltip on blur', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <span>Focus me</span>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Focus me');
+
+    userEvent.tab();
+    let tooltipElement = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltipElement).toBeVisible();
 
-    fireEvent.focus(screen.getByText('Hover over me!'));
-    expect(screen.getByText(tooltipLabel)).toBeInTheDocument();
+    userEvent.tab({ shift: true }); // Blur the element
+    tooltipElement = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('hides onBlur', () => {
-    const tooltipLabel = 'Tooltip';
-    render(<Tooltip label={tooltipLabel}>{anchor}</Tooltip>);
+  it('should display the tooltip when the "children" prop is a React element', () => {
+    render(
+      <Tooltip label="Test Tooltip">
+        <button type="button">Click me</button>
+      </Tooltip>,
+    );
+    const triggerElement = screen.getByText('Click me');
 
-    fireEvent.blur(screen.getByText('Hover over me!'));
-    expect(screen.queryByText(tooltipLabel)).not.toBeInTheDocument();
+    userEvent.hover(triggerElement);
+    const tooltipElement = screen.getByRole('tooltip', { hidden: true });
+    expect(tooltipElement).toBeVisible();
   });
 });

package/src/tooltip/Tooltip.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import {
   cloneElement,
@@ -22,6 +23,7 @@ import {
 type Props = PropsWithChildren<{
   position?: PositionTop | PositionRight | PositionBottom | PositionLeft;
   label: ReactNode;
+  id?: string;
 }> &
   CommonProps;
 
@@ -29,6 +31,7 @@ const Tooltip = ({
   position = Position.TOP,
   children = undefined,
   label,
+  id,
   className,
 }: Props): ReactElement => {
   const [open, setOpen] = useState(false);
@@ -36,6 +39,8 @@ const Tooltip = ({
   const [arrowElement, setArrowElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
 
+  const fallbackId = useId();
+  const tooltipId = id ?? fallbackId;
   const modifiers = [];
 
   modifiers.push({
@@ -71,46 +76,34 @@ const Tooltip = ({
 
   return (
     <>
-      <span ref={anchorReference} className="d-inline-block">
+      <span
+        ref={anchorReference}
+        className="tw-tooltip-container"
+        onMouseOver={() => setOpen(true)}
+        onFocus={() => setOpen(true)}
+        onMouseOut={() => setOpen(false)}
+        onBlur={() => setOpen(false)}
+      >
         {children
           ? cloneElement(children as ReactElement, {
-              /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-              onMouseOver: () => {
-                if ((children as ReactElement)?.props?.onMouseOver) {
-                  (children as ReactElement)?.props?.onMouseOver();
-                }
-                setOpen(true);
-              },
-              onFocus: () => {
-                if ((children as ReactElement)?.props?.onFocus) {
-                  (children as ReactElement).props.onFocus();
-                }
-                setOpen(true);
-              },
-              onMouseOut: () => {
-                if ((children as ReactElement)?.props?.onMouseOver) {
-                  (children as ReactElement).props.onMouseOver();
-                }
-                setOpen(false);
-              },
-              onBlur: () => {
-                if ((children as ReactElement)?.props?.onBlur) {
-                  (children as ReactElement).props.onBlur();
-                }
-                setOpen(false);
-              },
-              /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+              'aria-describedby': `${tooltipId}-tooltip`,
             })
           : null}
-      </span>
-      {open ? (
         <div
           // @ts-expect-error
           ref={setPopperElement}
-          className={classNames('np-tooltip', 'np-panel', 'np-panel--open', 'bg-screen', className)}
+          className={classNames(
+            'np-tooltip',
+            'np-panel',
+            open ? `np-panel--open np-tooltip--open` : null,
+            className,
+          )}
           // eslint-disable-next-line react/forbid-dom-props
           style={{ ...styles.popper }}
           {...attributes.popper}
+          aria-hidden={!open}
+          role="tooltip"
+          id={`${tooltipId}-tooltip`}
         >
           <div className="np-panel__content tooltip-inner">
             {label}
@@ -123,7 +116,7 @@ const Tooltip = ({
             />
           </div>
         </div>
-      ) : null}
+      </span>
     </>
   );
 };

package/src/tooltip/__snapshots__/Tooltip.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip Component renders an empty list when no items are passed 1`] = `
+<div>
+  <span
+    class="tw-tooltip-container"
+  >
+    <span
+      aria-describedby="radix-0-tooltip"
+    >
+      Hover me
+    </span>
+    <div
+      aria-hidden="true"
+      class="np-tooltip np-panel"
+      id="radix-0-tooltip"
+      role="tooltip"
+      style="position: absolute; left: 0px; top: 0px;"
+    >
+      <div
+        class="np-panel__content tooltip-inner"
+      >
+        Test Tooltip
+        <div
+          class="np-panel__arrow"
+        />
+      </div>
+    </div>
+  </span>
+</div>
+`;