@transferwise/components 0.0.0-experimental-47ae02a → 0.0.0-experimental-da6dbbf

package/src/processIndicator/ProcessIndicator.js

@@ -0,0 +1,117 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+
+import { Status, Size } from '../common';
+
+const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
+export const ANIMATION_DURATION_IN_MS = 1500;
+
+class ProcessIndicator extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: props.status,
+      size: props.size,
+    };
+    this.interval = null;
+    this.timeout = null;
+  }
+
+  /**
+   * 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 = setInterval(() => {
+      const statusFromState = this.state.status;
+      const sizeFromState = this.state.size;
+
+      const statusFromProps = this.props.status;
+      const sizeFromProps = this.props.size;
+
+      if (statusFromState !== statusFromProps) {
+        this.setState({ status: statusFromProps }, this.runCallBack(statusFromProps));
+      }
+
+      if (sizeFromState !== sizeFromProps) {
+        this.setState({ size: sizeFromProps });
+      }
+    }, ANIMATION_DURATION_IN_MS);
+  }
+
+  /**
+   * Only trigger render if comopnent's state got
+   * updated from interval callback
+   *
+   * @param nextProps
+   * @param nextState
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    const isSameStatus = nextProps.status === nextState.status;
+    const isSameSize = nextProps.size === nextState.size;
+
+    return isSameStatus && isSameSize;
+  }
+
+  // Clear interval before destroying component
+  componentWillUnmount() {
+    clearInterval(this.interval);
+    clearTimeout(this.timeout);
+  }
+
+  runCallBack = (statusFromProps) => {
+    const { onAnimationCompleted } = this.props;
+    if (onAnimationCompleted) {
+      this.timeouts = setTimeout(() => {
+        onAnimationCompleted(statusFromProps);
+      }, ANIMATION_DURATION_IN_MS);
+    }
+  };
+
+  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[this.state.size]}
+            fillOpacity="0.0"
+          />
+        </svg>
+      </span>
+    );
+  }
+}
+ProcessIndicator.propTypes = {
+  status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
+  size: PropTypes.oneOf(['xxs', 'xs', 'sm', 'xl']),
+  onAnimationCompleted: PropTypes.func,
+  className: PropTypes.string,
+  'data-testid': PropTypes.string,
+};
+
+ProcessIndicator.defaultProps = {
+  status: Status.PROCESSING,
+  size: Size.SMALL,
+  onAnimationCompleted: null,
+  className: undefined,
+  'data-testid': null,
+};
+
+export default ProcessIndicator;

package/src/processIndicator/ProcessIndicator.spec.js

@@ -0,0 +1,101 @@
+import { mount } from 'enzyme';
+
+import { Status, Size } from '../common';
+
+import ProcessIndicator from '.';
+
+describe('processIndicator', () => {
+  let wrapper;
+  const ANIMATION_DURATION = 1500;
+  const props = {
+    status: Status.PROCESSING,
+    size: Size.Small,
+    onAnimationCompleted: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    wrapper = mount(<ProcessIndicator {...props} />);
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+  });
+
+  it('has right classes when rendered with provided props', () => {
+    expect(wrapper.find('.process')).toHaveLength(1);
+    expect(wrapper.find('.process-sm')).toHaveLength(1);
+
+    expect(wrapper.find('.process-lg')).toHaveLength(0);
+    expect(wrapper.find('.process-xs')).toHaveLength(0);
+    expect(wrapper.find('.process-danger')).toHaveLength(0);
+    expect(wrapper.find('.process-stopped')).toHaveLength(0);
+    expect(wrapper.find('.process-success')).toHaveLength(0);
+  });
+
+  it('updates component state with delay on props change to create smooth transition between CSS animations', () => {
+    expect(wrapper.state().status).toBe('processing');
+
+    wrapper.setProps({ status: 'succeeded' });
+    expect(wrapper.props().status).toBe('succeeded');
+    expect(wrapper.state().status).toBe('processing');
+
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+
+    expect(wrapper.state().status).toBe('succeeded');
+  });
+
+  it('updates size classes with delay', () => {
+    expect(wrapper.find('.process-sm')).toHaveLength(1);
+    wrapper.setProps({ size: 'xl' });
+    expect(wrapper.find('.process-xl')).toHaveLength(0);
+
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+
+    expect(wrapper.find('.process-xs')).toHaveLength(0);
+    expect(wrapper.find('.process-sm')).toHaveLength(0);
+    expect(wrapper.find('.process-xl')).toHaveLength(1);
+  });
+
+  it('properly updates status classes with delay', () => {
+    wrapper.setProps({ status: 'succeeded' });
+    expect(wrapper.find('.process-success')).toHaveLength(0);
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+    expect(wrapper.find('.process-success')).toHaveLength(1);
+    expect(wrapper.find('.process-danger')).toHaveLength(0);
+    expect(wrapper.find('.process-stopped')).toHaveLength(0);
+
+    wrapper.setProps({ status: 'failed' });
+    expect(wrapper.find('.process-danger')).toHaveLength(0);
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+    expect(wrapper.find('.process-success')).toHaveLength(0);
+    expect(wrapper.find('.process-danger')).toHaveLength(1);
+    expect(wrapper.find('.process-stopped')).toHaveLength(0);
+
+    wrapper.setProps({ status: 'hidden' });
+    expect(wrapper.find('.process-stopped')).toHaveLength(0);
+    jest.advanceTimersByTime(ANIMATION_DURATION);
+    wrapper.update();
+    expect(wrapper.find('.process-success')).toHaveLength(0);
+    expect(wrapper.find('.process-danger')).toHaveLength(0);
+    expect(wrapper.find('.process-stopped')).toHaveLength(1);
+  });
+
+  it('calls onAnimationCompleted with Delay', () => {
+    expect(props.onAnimationCompleted).not.toHaveBeenCalled();
+    wrapper.setProps({ status: Status.FAILED });
+    expect(props.onAnimationCompleted).not.toHaveBeenCalled();
+    jest.advanceTimersByTime(ANIMATION_DURATION * 2);
+    expect(props.onAnimationCompleted).toHaveBeenCalledWith(Status.FAILED);
+    wrapper.setProps({ status: Status.SUCCEEDED });
+    jest.advanceTimersByTime(ANIMATION_DURATION * 2);
+    expect(props.onAnimationCompleted).toHaveBeenCalledWith(Status.SUCCEEDED);
+  });
+});

package/src/promoCard/PromoCard.story.tsx

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

package/src/promoCard/PromoCard.tsx

@@ -1,18 +1,19 @@
+import { useId } from '@radix-ui/react-id';
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';
+import React, { forwardRef, type FunctionComponent, useEffect, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
-import Card, { CardProps } from '../common/card';
+import Card, { type CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
 import Title from '../title';
 
 import { usePromoCardContext } from './PromoCardContext';
-import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
+import PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';
 
-export type ReferenceType = React.Ref<HTMLInputElement>;
+export type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;
 export type RelatedTypes =
   | ''
   | 'alternate'
@@ -67,6 +68,9 @@ 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;
 
@@ -75,6 +79,8 @@ 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'> {
@@ -90,6 +96,14 @@ 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).
@@ -104,7 +118,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   isChecked?: never;
   tabIndex?: never;
   type?: never;
-  reference?: never;
+  ref?: ReferenceType;
   value?: never;
 }
 
@@ -119,7 +133,7 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   tabIndex?: number;
 
   /** Optional property to provide component Ref */
-  reference?: ReferenceType;
+  ref?: ReferenceType;
 
   /** Optional prop to specify the input type of the PromoCard  */
   type?: 'checkbox' | 'radio';
@@ -130,6 +144,8 @@ 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;
@@ -201,6 +217,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       isChecked,
       isDisabled,
       onClick,
+      onKeyDown,
       rel,
       tabIndex,
       target,
@@ -210,9 +227,11 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       value,
       isSmall,
       useDisplayFont = true,
+      anchorRef,
+      anchorId,
       ...props
     },
-    reference,
+    ref: ReferenceType,
   ) => {
     // 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
@@ -275,7 +294,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       id: componentId,
       isDisabled: isDisabled || contextIsDisabled,
       onClick,
-      ref: reference,
+      onKeyDown,
+      ref,
       'data-testid': testId,
       isSmall,
     };
@@ -290,6 +310,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             hrefLang,
             rel,
             target,
+            ref: anchorRef,
+            id: anchorId,
           }
         : {};
 
@@ -310,7 +332,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
                 handleClick();
               }
             },
-            ref: reference,
+            ref,
             tabIndex: 0,
           }
         : {};

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

@@ -29,6 +29,7 @@ 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,7 +4,6 @@ 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;
@@ -79,9 +78,7 @@ describe('Snackbar', () => {
     expect(snackbar().text()).toContain(props.text);
     expect(snackbar()).toHaveLength(1);
 
-    await act(async () => {
-      await jest.advanceTimersByTimeAsync(timeout + CSS_TRANSITION_DURATION + 500);
-    });
+    jest.advanceTimersByTime(timeout + CSS_TRANSITION_DURATION + 500);
 
     expect(snackbar().text()).not.toContain(props.text);
   });

package/src/tabs/Tabs.spec.js

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

package/src/test-utils/index.js

@@ -1,4 +1,5 @@
-import { render, renderHook } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import userEvent from '@testing-library/user-event';
 
 import { Provider } from '..';
@@ -29,8 +30,9 @@ function customRenderHook(callback, { locale = DEFAULT_LOCALE, messages = en } =
   });
 }
 
-export * from '@testing-library/react';
-export * from './fake-data';
-export * from './story-config';
 export * from './window-mock';
-export { customRender as render, customRenderHook as renderHook, userEvent };
+export * from './story-config';
+export * from './fake-data';
+export * from '@testing-library/react';
+export { userEvent };
+export { customRender as render, customRenderHook as renderHook };

package/src/test-utils/jest.setup.js

@@ -1,23 +1,17 @@
-const { default: Adapter } = require('@cfaester/enzyme-adapter-react-18');
+const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
 const Enzyme = require('enzyme');
-const util = require('node:util');
 
 global.fetch = require('jest-fetch-mock');
-
 Enzyme.configure({ adapter: new Adapter() });
 
 global.requestAnimationFrame = (callback) => callback();
 
-Object.defineProperty(global, 'TextEncoder', {
-  value: util.TextEncoder,
-});
-
 // https://github.com/esphen/jest-prop-type-error/blob/master/index.js
 // This mock will make tests fail when props error occurs.
 const { error, warn } = console;
 // eslint-disable-next-line no-console
 console.error = (message, ...args) => {
-  if (/(Invalid prop|Failed prop type)/i.test(message)) {
+  if (/(Invalid prop|Failed prop type)/gi.test(message)) {
     throw new Error(message);
   }
 
@@ -26,7 +20,7 @@ console.error = (message, ...args) => {
 
 // eslint-disable-next-line no-console
 console.warn = (message, ...args) => {
-  if (/(Call to useTheme outside a ThemeProvider)/i.test(message)) {
+  if (/(Call to useTheme outside a ThemeProvider)/gi.test(message)) {
     return;
   }
 

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx

@@ -1,8 +1,7 @@
 import { TextArea, type TextAreaProps } from '../inputs/TextArea';
 import WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';
 
-export interface TextareaWithDisplayFormatProps
-  extends Omit<WithDisplayFormatProps<TextAreaProps>, 'render'> {}
+export interface TextareaWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}
 
 const TextareaWithDisplayFormat = (props: TextareaWithDisplayFormatProps) => (
   <WithDisplayFormat<TextAreaProps>