@transferwise/components 0.0.0-experimental-da6dbbf → 0.0.0-experimental-4c1cb43

package/src/main.css

@@ -643,141 +643,6 @@ div.critical-comms .critical-comms-body {
   border-radius: 16px 16px 0 0;
   border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }
-.carousel-wrapper {
-  overflow: hidden;
-}
-.carousel {
-  display: flex;
-  align-items: center;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  gap: 16px;
-  gap: var(--size-16);
-  padding: 8px;
-  padding: var(--size-8);
-  margin: 8px;
-  margin: var(--size-8);
-}
-@media (max-width: 767px) {
-  .carousel {
-    gap: 8px;
-    gap: var(--size-8);
-  }
-}
-.carousel__header {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 16px;
-  padding-bottom: var(--size-16);
-}
-.carousel__card,
-.carousel__card:hover,
-.carousel__card:focus,
-.carousel__card:focus-within {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  transition: none !important;
-  box-shadow: none !important;
-}
-.carousel__card {
-  display: block;
-  position: relative;
-  text-align: left;
-  border: none;
-  overflow: hidden;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  border-radius: 32px;
-  border-radius: var(--size-32);
-  scroll-snap-align: center;
-  -webkit-scroll-snap-align: center;
-  transition: all 0.4s !important;
-}
-@media (min-width: 1200px) {
-  .carousel__card {
-    min-width: 280px;
-    width: 280px;
-    height: 280px;
-  }
-}
-@media (max-width: 1199px) {
-  .carousel__card {
-    min-width: 242px;
-    width: 242px;
-    height: 242px;
-  }
-}
-@media (max-width: 767px) {
-  .carousel__card {
-    min-width: 336px;
-    width: 336px;
-    height: 336px;
-    scroll-snap-stop: always;
-  }
-}
-.carousel__card:focus,
-.carousel__card:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width) !important;
-  outline-offset: var(--ring-outline-offset) !important;
-}
-.carousel__card:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.carousel__card:focus {
-  background-color: var(--color-background-neutral-hover);
-}
-.carousel__card-content {
-  height: 100%;
-  font-weight: normal;
-  padding: 24px;
-  padding: var(--size-24);
-}
-.carousel__scroll-button {
-  width: 32px;
-  width: var(--size-32);
-  height: 32px;
-  height: var(--size-32);
-  align-items: center;
-  justify-content: center;
-}
-.carousel__indicators {
-  display: flex;
-  justify-content: center;
-  padding-top: 8px;
-  padding-top: var(--size-8);
-  gap: 8px;
-  gap: var(--size-8);
-}
-.carousel__indicator {
-  width: 12px;
-  width: var(--size-12);
-  height: 12px;
-  height: var(--size-12);
-  border-radius: 8px;
-  border-radius: var(--size-8);
-  background: #c9cbce;
-  background: var(--color-interactive-secondary);
-  border: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  transition: all 0.1s;
-}
-.carousel__indicator:hover {
-  width: 16px;
-  width: var(--size-16);
-}
-.carousel__indicator--selected,
-.carousel__indicator--selected:hover {
-  background: var(--color-interactive-primary);
-  width: 24px;
-  width: var(--size-24);
-}
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
   width: 24px;

package/src/main.less

@@ -5,7 +5,6 @@
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
-@import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";

package/src/modal/Modal.tsx

@@ -1,6 +1,5 @@
-import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
-import { ReactNode, useRef } from 'react';
+import { ReactNode, useId, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {

package/src/processIndicator/ProcessIndicator.rtl.spec.tsx

@@ -0,0 +1,45 @@
+import { act } from 'react';
+
+import { render, screen } from '../test-utils';
+import ProcessIndicator, { ProcessIndicatorProps } from './ProcessIndicator';
+
+describe('ProcessIndicator', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
+  });
+
+  it('supports transitioning between states', async () => {
+    const handleAnimationCompleted = jest.fn();
+    const initialProps = {
+      'data-testid': 'process-indicator',
+      onAnimationCompleted: handleAnimationCompleted,
+    } satisfies ProcessIndicatorProps;
+    const view = render(<ProcessIndicator {...initialProps} />);
+
+    expect(screen.getByTestId('process-indicator')).not.toHaveClass('process-success');
+    expect(screen.getByTestId('process-indicator')).not.toHaveClass('process-xl');
+
+    const updatedProps = {
+      status: 'succeeded',
+      size: 'xl',
+    } satisfies ProcessIndicatorProps;
+    view.rerender(<ProcessIndicator {...initialProps} {...updatedProps} />);
+    await act(async () => {
+      await jest.runOnlyPendingTimersAsync();
+    });
+
+    expect(screen.getByTestId('process-indicator')).toHaveClass('process-success');
+    expect(screen.getByTestId('process-indicator')).toHaveClass('process-xl');
+    expect(handleAnimationCompleted).not.toHaveBeenCalled();
+
+    await jest.runOnlyPendingTimersAsync();
+
+    expect(handleAnimationCompleted).toHaveBeenCalledWith(updatedProps.status);
+    expect(handleAnimationCompleted).toHaveBeenCalledTimes(1);
+  });
+});

package/src/processIndicator/ProcessIndicator.tsx

@@ -0,0 +1,110 @@
+import classNames from 'classnames';
+import { Component } from 'react';
+
+import { Status, Size } from '../common';
+
+const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
+
+const ANIMATION_DURATION_IN_MS = 1500;
+
+type ProcessIndicatorStatus =
+  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;
+
+export interface ProcessIndicatorProps {
+  status?: ProcessIndicatorStatus;
+  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;
+  className?: string;
+  'data-testid'?: string;
+  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;
+}
+
+type ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;
+
+export default class ProcessIndicator extends Component<
+  ProcessIndicatorProps,
+  ProcessIndicatorState
+> {
+  declare props: ProcessIndicatorProps &
+    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;
+
+  static defaultProps = {
+    status: 'processing',
+    size: 'sm',
+  } satisfies Partial<ProcessIndicatorProps>;
+
+  interval = 0;
+  timeout = 0;
+
+  constructor(props: ProcessIndicator['props']) {
+    super(props);
+    this.state = {
+      status: props.status,
+      size: props.size,
+    };
+  }
+
+  /**
+   * Create interval for animation duration (1500ms)
+   * Update state only at the end of every interval
+   * (end of animation loop) if props changed before end of animation
+   */
+  componentDidMount() {
+    this.interval = window.setInterval(() => {
+      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;
+      const { status: currentStatus, size: currentSize } = this.state;
+
+      if (currentStatus !== targetStatus) {
+        this.setState({ status: targetStatus }, () => {
+          if (onAnimationCompleted) {
+            this.timeout = window.setTimeout(() => {
+              onAnimationCompleted(targetStatus);
+            }, ANIMATION_DURATION_IN_MS);
+          }
+        });
+      }
+
+      if (currentSize !== targetSize) {
+        this.setState({ size: targetSize });
+      }
+    }, ANIMATION_DURATION_IN_MS);
+  }
+
+  /**
+   * Only trigger render if comopnent's state got
+   * updated from interval callback
+   */
+  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {
+    const isSameStatus = nextProps.status === nextState.status;
+    const isSameSize = nextProps.size === nextState.size;
+
+    return isSameStatus && isSameSize;
+  }
+
+  // Clear interval before destroying component
+  componentWillUnmount() {
+    window.clearInterval(this.interval);
+    window.clearTimeout(this.timeout);
+  }
+
+  render() {
+    const { className, 'data-testid': dataTestId } = this.props;
+    const { size, status } = this.state;
+    const classes = classNames(`process process-${size}`, className, {
+      [`process-danger`]: status === Status.FAILED,
+      [`process-stopped`]: status === Status.HIDDEN,
+      [`process-success`]: status === Status.SUCCEEDED,
+    });
+
+    return (
+      <span className={classes} data-testid={dataTestId}>
+        <span className="process-icon-container">
+          <span className="process-icon-horizontal" />
+          <span className="process-icon-vertical" />
+        </span>
+        <svg xmlns="http://www.w3.org/2000/svg">
+          <circle className="process-circle" cx="50%" cy="50%" r={radius[size]} fillOpacity="0.0" />
+        </svg>
+      </span>
+    );
+  }
+}

package/src/promoCard/PromoCard.story.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { StarFill } from '@transferwise/icons';
 
-import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';
+import PromoCard, { PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,

package/src/promoCard/PromoCard.tsx

@@ -1,19 +1,18 @@
-import { useId } from '@radix-ui/react-id';
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, type FunctionComponent, useEffect, useState } from 'react';
+import React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
-import Card, { type CardProps } from '../common/card';
+import Card, { CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
 import Title from '../title';
 
 import { usePromoCardContext } from './PromoCardContext';
-import PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';
+import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
 
-export type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;
+export type ReferenceType = React.Ref<HTMLInputElement>;
 export type RelatedTypes =
   | ''
   | 'alternate'
@@ -68,9 +67,6 @@ export interface PromoCardCommonProps {
   /** Specify an onClick event handler */
   onClick?: () => void;
 
-  /** Specify an onKeyDown event handler */
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-
   /** Optional prop to specify the ID used for testing */
   testId?: string;
 
@@ -79,8 +75,6 @@ export interface PromoCardCommonProps {
 
   /** Set to false to use body font style for the title   */
   useDisplayFont?: boolean;
-
-  ref?: ReferenceType;
 }
 
 export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
@@ -96,14 +90,6 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   /** Optionally specify the language of the linked URL */
   hrefLang?: string;
 
-  /** Optional property that can be pass a ref for the anchor. */
-  anchorRef?: React.Ref<HTMLAnchorElement>;
-
-  /**
-   * Optional prop to specify the ID of the anchor element which can be useful when using a ref.
-   */
-  anchorId?: string;
-
   /**
    * Relationship between the PromoCard href URL and the current page. See
    * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
@@ -118,7 +104,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   isChecked?: never;
   tabIndex?: never;
   type?: never;
-  ref?: ReferenceType;
+  reference?: never;
   value?: never;
 }
 
@@ -133,7 +119,7 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   tabIndex?: number;
 
   /** Optional property to provide component Ref */
-  ref?: ReferenceType;
+  reference?: ReferenceType;
 
   /** Optional prop to specify the input type of the PromoCard  */
   type?: 'checkbox' | 'radio';
@@ -144,8 +130,6 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   /** Only applies to <a />s */
   download?: never;
   href?: never;
-  anchorRef?: never;
-  anchorId?: never;
   hrefLang?: never;
   rel?: never;
   target?: never;
@@ -217,7 +201,6 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       isChecked,
       isDisabled,
       onClick,
-      onKeyDown,
       rel,
       tabIndex,
       target,
@@ -227,11 +210,9 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       value,
       isSmall,
       useDisplayFont = true,
-      anchorRef,
-      anchorId,
       ...props
     },
-    ref: ReferenceType,
+    reference,
   ) => {
     // Set the `checked` state to the value of `defaultChecked` if it is truthy,
     // or the value of `isChecked` if it is truthy, or `false` if neither
@@ -294,8 +275,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       id: componentId,
       isDisabled: isDisabled || contextIsDisabled,
       onClick,
-      onKeyDown,
-      ref,
+      ref: reference,
       'data-testid': testId,
       isSmall,
     };
@@ -310,8 +290,6 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             hrefLang,
             rel,
             target,
-            ref: anchorRef,
-            id: anchorId,
           }
         : {};
 
@@ -332,7 +310,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
                 handleClick();
               }
             },
-            ref,
+            ref: reference,
             tabIndex: 0,
           }
         : {};

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -29,7 +29,6 @@ exports[`Radio shows the avatar when supplied 1`] = `
         class="np-text-body-large np-radio__text"
       >
         This is a label
-        
       </span>
       <span
         class="np-radio__avatar m-l-auto"

package/src/snackbar/Snackbar.spec.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import SnackbarAppendingToBody, { Snackbar, CSS_TRANSITION_DURATION } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
 import SnackbarProvider from './SnackbarProvider';
+import { act } from 'react';
 
 describe('Snackbar', () => {
   const timeout = 1000;
@@ -78,7 +79,9 @@ describe('Snackbar', () => {
     expect(snackbar().text()).toContain(props.text);
     expect(snackbar()).toHaveLength(1);
 
-    jest.advanceTimersByTime(timeout + CSS_TRANSITION_DURATION + 500);
+    await act(async () => {
+      await jest.advanceTimersByTimeAsync(timeout + CSS_TRANSITION_DURATION + 500);
+    });
 
     expect(snackbar().text()).not.toContain(props.text);
   });

package/src/snackbar/Snackbar.story.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { number } from '@storybook/addon-knobs';
 import { StoryContext } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { userEvent, waitFor, within } from '@storybook/test';
 import { Mobile, Theme, Switch, Bulb, Info, Coins } from '@transferwise/icons';
 
 import Button from '../button';
@@ -123,5 +123,7 @@ export const basic = () => {
 
 basic.play = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('button'));
+  await waitFor(async () => {
+    await userEvent.click(canvas.getByRole('button'));
+  });
 };

package/src/tabs/Tabs.spec.js

@@ -1,5 +1,6 @@
 import { Spring } from '@react-spring/web';
 import { mount } from 'enzyme';
+import { act } from 'react';
 
 import { Size, Width } from '../common';
 
@@ -8,8 +9,6 @@ import TabPanel from './TabPanel';
 import Tabs from './Tabs';
 import { getElasticDragDifference } from './utils';
 
-jest.useFakeTimers();
-
 jest.mock('@react-spring/web', () => ({
   animated: {
     div: ({ children, style }) => (
@@ -37,6 +36,7 @@ describe('Tabs', () => {
   let props;
 
   beforeEach(() => {
+    jest.useFakeTimers();
     props = {
       animatePanelsOnClick: true,
       tabs: generateTabs(),
@@ -57,6 +57,11 @@ describe('Tabs', () => {
     jest.clearAllMocks();
   });
 
+  afterEach(async () => {
+    await jest.runOnlyPendingTimersAsync();
+    jest.useRealTimers();
+  });
+
   it('renders with right props', () => {
     expect(component.find(Tabs)).toHaveLength(1);
     expect(component.find(Tabs).props()).toStrictEqual({ ...props });
@@ -172,11 +177,13 @@ describe('Tabs', () => {
     expect(component.find(Tab)).toHaveLength(props.tabs.length);
   });
 
-  it('does not animate when a tab before the selected tab goes from disabled to enabled', () => {
+  it('does not animate when a tab before the selected tab goes from disabled to enabled', async () => {
     component.setProps({ selected: 2 });
     expect(component.state('isAnimating')).toBe(true);
 
-    triggerSpringOnRest();
+    await act(async () => {
+      await jest.runOnlyPendingTimersAsync();
+    });
     expect(component.state('isAnimating')).toBe(false);
 
     component.setProps({ tabs: generateTabs([false, false, false]) });
@@ -248,14 +255,16 @@ describe('Tabs', () => {
       ${5}     | ${Width.AUTO}  | ${'240px'}     | ${'-900px'}
     `(
       'when selecting tab number %selected when headerWidth is set to %headerWidth',
-      ({ selected, headerWidth, lineTranslateX, sliderTranslateX }) => {
+      async ({ selected, headerWidth, lineTranslateX, sliderTranslateX }) => {
         component.setProps({ headerWidth });
 
         const getLineStyles = () => getComputedStyle(component.find('.tabs__line').getDOMNode());
         const getSliderStyles = () =>
           getComputedStyle(component.find('.tabs__slider').getDOMNode());
 
-        component.setProps({ selected });
+        await act(async () => {
+          component.setProps({ selected });
+        });
 
         expect(component.state('isAnimating')).toBe(true);
         expect(getLineStyles().getPropertyValue('transform')).toBe(`translateX(${lineTranslateX})`);
@@ -263,7 +272,9 @@ describe('Tabs', () => {
           `translateX(${sliderTranslateX})`,
         );
 
-        triggerSpringOnRest();
+        await act(async () => {
+          await jest.runOnlyPendingTimersAsync();
+        });
 
         expect(component.state('isAnimating')).toBe(false);
         expect(getLineStyles().getPropertyValue('transform')).toBe(`translateX(${lineTranslateX})`);
@@ -276,15 +287,11 @@ describe('Tabs', () => {
 
       const getLineStyles = () => getComputedStyle(component.find('.tabs__line').getDOMNode());
 
-      triggerSpringOnRest();
-
       expect(getLineStyles().getPropertyValue('transform')).toBe(`translateX(60px)`);
       expect(component.state('fullWidthTabs')).toBeFalsy();
 
       component.setProps({ tabs: generateTabs([false, true, false, false, false, false, false]) });
 
-      triggerSpringOnRest();
-
       expect(getLineStyles().getPropertyValue('transform')).toBe(`translateX(100%)`);
       expect(component.state('fullWidthTabs')).toBeTruthy();
     });
@@ -319,41 +326,57 @@ describe('Tabs', () => {
       });
     });
 
-    it('displays all tabs when animating', () => {
-      component.setState({ isAnimating: true });
+    it('displays all tabs when animating', async () => {
+      await act(async () => {
+        component.setState({ isAnimating: true });
+      });
 
       component.find(TabPanel).forEach((tab) => {
         expect(tab.prop('style').display).toBe('block');
       });
     });
 
-    it('displays all tabs when swiping', () => {
-      component.setState({ isSwiping: true });
+    it('displays all tabs when swiping', async () => {
+      await act(async () => {
+        component.setState({ isSwiping: true });
+      });
 
       component.find(TabPanel).forEach((tab) => {
         expect(tab.prop('style').display).toBe('block');
       });
     });
 
-    it('has `overflow: hidden` on the parent when animating/swiping', () => {
-      component.setState({ isSwiping: false, isAnimating: false });
+    it('has `overflow: hidden` on the parent when animating/swiping', async () => {
+      await act(async () => {
+        component.setState({ isSwiping: false, isAnimating: false });
+      });
       expect(getPanelContainerOverflow(component)).toBe('visible');
 
-      component.setState({ isSwiping: true });
+      await act(async () => {
+        component.setState({ isSwiping: true });
+      });
       expect(getPanelContainerOverflow(component)).toBe('hidden');
 
-      component.setState({ isSwiping: false, isAnimating: true });
+      await act(async () => {
+        component.setState({ isSwiping: false, isAnimating: true });
+      });
       expect(getPanelContainerOverflow(component)).toBe('hidden');
     });
 
-    it('sets the panel width according to if animating/swiping', () => {
-      component.setState({ isSwiping: false, isAnimating: false });
+    it('sets the panel width according to if animating/swiping', async () => {
+      await act(async () => {
+        component.setState({ isSwiping: false, isAnimating: false });
+      });
       expect(getPanelWidth(component)).toBe('100%');
 
-      component.setState({ isSwiping: true });
+      await act(async () => {
+        component.setState({ isSwiping: true });
+      });
       expect(getPanelWidth(component)).toBe('300px');
 
-      component.setState({ isSwiping: false, isAnimating: true });
+      await act(async () => {
+        component.setState({ isSwiping: false, isAnimating: true });
+      });
       expect(getPanelWidth(component)).toBe('300px');
     });
   });
@@ -373,10 +396,6 @@ function createClientXY(x, y) {
   return { clientX: x, clientY: y };
 }
 
-function triggerSpringOnRest() {
-  jest.runAllTimers();
-}
-
 function getPanelContainerOverflow(component) {
   return component.find('.tabs__panel-container').prop('style').overflow;
 }