@transferwise/components 46.115.1 → 46.116.1

package/build/types/test-utils/window-mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,kBAAkB,SAIjC"}
+{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAMA,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,kBAAkB,SAIjC;AAED,wBAAgB,yBAAyB,SAExC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.115.1",
+  "version": "46.116.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -85,7 +85,7 @@
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.25.2",
-    "@wise/components-theming": "1.8.0",
+    "@wise/components-theming": "1.9.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/alert/Alert.tsx

@@ -147,9 +147,11 @@ export default function Alert({
 
   const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);
   useEffect(() => {
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       setShouldAnnounce(true);
     }, WDS_LIVE_REGION_DELAY_MS);
+
+    return () => clearTimeout(timeoutId);
   }, []);
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -6,7 +6,8 @@ export type CriticalCommsBannerProps = {
   subtitle?: string;
   action?: {
     label: string;
-    href: string;
+    href?: string;
+    onClick?: () => void;
   };
   className?: string;
 };
@@ -17,7 +18,7 @@ function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCom
       <Alert
         title={title}
         message={subtitle}
-        action={{ target: action?.href, text: action?.label }}
+        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}
         className={className}
         type="warning"
       />

package/src/expressiveMoneyInput/ExpressiveMoneyInput.spec.tsx

@@ -0,0 +1,229 @@
+import { screen, render, mockMatchMedia, mockResizeObserver, waitFor } from '../test-utils';
+import { Sentiment } from '../common';
+
+import ExpressiveMoneyInput from './ExpressiveMoneyInput';
+import type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import { Confetti } from '@transferwise/icons';
+
+const defaultProps: ExpressiveMoneyInputProps = {
+  label: 'You send',
+  currency: 'GBP',
+  amount: 1234.56,
+  onAmountChange: jest.fn(),
+};
+
+const currencySelectorOptions = [
+  {
+    title: 'Popular',
+    currencies: [
+      { code: 'USD', label: 'US Dollar', keywords: ['dollar', 'us'] },
+      { code: 'AUD', label: 'Australia Dollar', keywords: ['dollar', 'au'] },
+    ],
+  },
+  {
+    title: 'Others',
+    currencies: [
+      { code: 'GBP', label: 'Pound', keywords: ['british'] },
+      { code: 'EUR', label: 'Euro', keywords: ['euro'] },
+    ],
+  },
+];
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('ExpressiveMoneyInput', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Basic rendering', () => {
+    it('renders with basic props', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} />);
+
+      expect(screen.getByText('You send')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('1,234.56')).toBeInTheDocument();
+    });
+
+    it('renders with custom label', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} label="Amount to transfer" />);
+
+      expect(screen.getByText('Amount to transfer')).toBeInTheDocument();
+    });
+
+    it('renders without label', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} label={undefined} />);
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+      expect(screen.queryByText('You send')).not.toBeInTheDocument();
+    });
+
+    it('renders with different currencies', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} currency="USD" />);
+
+      expect(screen.getByText('USD')).toBeInTheDocument();
+    });
+
+    it('renders with null amount', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} amount={null} />);
+
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveValue('');
+    });
+  });
+
+  describe('Inline prompt', () => {
+    it('renders basic message without sentiment', () => {
+      render(
+        <ExpressiveMoneyInput
+          {...defaultProps}
+          inlinePrompt={{ message: 'This is a basic message' }}
+        />,
+      );
+
+      expect(screen.getByText('This is a basic message')).toBeInTheDocument();
+    });
+
+    it('renders inline prompt with sentiment', () => {
+      render(
+        <ExpressiveMoneyInput
+          {...defaultProps}
+          inlinePrompt={{
+            message: 'Success message',
+            sentiment: Sentiment.POSITIVE,
+          }}
+        />,
+      );
+
+      expect(screen.getByText('Success message')).toBeInTheDocument();
+    });
+
+    it('renders inline prompt with media', () => {
+      render(
+        <ExpressiveMoneyInput
+          {...defaultProps}
+          inlinePrompt={{
+            message: 'Message with icon',
+            sentiment: Sentiment.POSITIVE,
+            media: <Confetti data-testid="test-icon" />,
+          }}
+        />,
+      );
+
+      expect(screen.getByText('Message with icon')).toBeInTheDocument();
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+    });
+
+    it('does not render inline prompt when not provided', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} />);
+
+      expect(document.querySelector('.wds-inline-prompt')).not.toBeInTheDocument();
+    });
+
+    it('animates inline prompt appearance', async () => {
+      const { rerender } = render(<ExpressiveMoneyInput {...defaultProps} />);
+
+      expect(screen.queryByText('New message')).not.toBeInTheDocument();
+
+      rerender(
+        <ExpressiveMoneyInput {...defaultProps} inlinePrompt={{ message: 'New message' }} />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('New message')).toBeInTheDocument();
+      });
+    });
+
+    it('sets correct aria-describedby when inline prompt is present', () => {
+      render(
+        <ExpressiveMoneyInput
+          {...defaultProps}
+          inlinePrompt={{ message: 'Descriptive message' }}
+        />,
+      );
+
+      const group = screen.getByRole('group');
+      expect(group).toHaveAttribute('aria-describedby');
+    });
+  });
+
+  describe('Chevron', () => {
+    it('shows chevron when showChevron is true', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} showChevron />);
+
+      const chevronContainer = document.querySelector('.wds-expressive-money-input-chevron');
+      expect(chevronContainer).toBeInTheDocument();
+    });
+
+    it('hides chevron when showChevron is false', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} showChevron={false} />);
+
+      const chevronContainer = document.querySelector('.wds-expressive-money-input-chevron');
+      expect(chevronContainer).toBeInTheDocument();
+    });
+
+    it('does not show chevron by default', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} />);
+
+      const chevronContainer = document.querySelector('.wds-expressive-money-input-chevron');
+      expect(chevronContainer).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA structure', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} />);
+
+      const group = screen.getByRole('group');
+      const label = screen.getByText('You send');
+      const input = screen.getByRole('textbox');
+
+      expect(group).toHaveAttribute('aria-labelledby');
+      expect(label).toHaveAttribute('for');
+      expect(input).toHaveAttribute('id');
+    });
+
+    it('associates label with input correctly', () => {
+      render(<ExpressiveMoneyInput {...defaultProps} />);
+
+      const label = screen.getByText('You send');
+      const input = screen.getByRole('textbox');
+
+      expect(label).toHaveAttribute('for', input.getAttribute('id'));
+    });
+
+    it('links currency selector to main label', () => {
+      render(
+        <ExpressiveMoneyInput
+          {...defaultProps}
+          currencySelector={{
+            options: currencySelectorOptions,
+            onChange: jest.fn(),
+          }}
+        />,
+      );
+
+      const currencySelector = screen.getByRole('combobox');
+      const mainLabel = screen.getByText('You send');
+
+      expect(currencySelector).toHaveAttribute('aria-describedby', mainLabel.getAttribute('id'));
+    });
+
+    it('describes amount input with currency selector', () => {
+      render(
+        <ExpressiveMoneyInput
+          {...defaultProps}
+          currencySelector={{
+            options: currencySelectorOptions,
+            onChange: jest.fn(),
+          }}
+        />,
+      );
+
+      const input = screen.getByRole('textbox');
+      const currencySelector = screen.getByRole('combobox');
+
+      expect(input).toHaveAttribute('aria-describedby', currencySelector.getAttribute('id'));
+    });
+  });
+});

package/src/expressiveMoneyInput/amountInput/AmountInput.spec.tsx

@@ -0,0 +1,282 @@
+import { userEvent, fireEvent, render, screen, waitFor } from '../../test-utils';
+
+import { AmountInput } from './AmountInput';
+
+describe('AmountInput', () => {
+  // TODO: "allows to delete the thousands separator and the preceding digit" test is flaky
+  jest.retryTimes(3, { logErrorsBeforeRetry: true });
+
+  it('formats the passed in value', () => {
+    const onChange = jest.fn();
+    const { rerender } = render(
+      <AmountInput id="foo" currency="GBP" amount={123456.78} onChange={onChange} />,
+    );
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    expect(input).toHaveValue('123,456.78');
+    expect(onChange).not.toHaveBeenCalled();
+
+    rerender(<AmountInput id="foo" currency="GBP" amount={4} onChange={onChange} />);
+    expect(input).toHaveValue('4');
+    expect(onChange).not.toHaveBeenCalled();
+
+    rerender(<AmountInput id="foo" currency="GBP" amount={null} onChange={onChange} />);
+    expect(input).toHaveValue('');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('formats the value while the user is typing', async () => {
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    expect(onChange).not.toHaveBeenCalled();
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    await userEvent.type(input, '123');
+    expect(input).toHaveValue('123');
+    expect(onChange).toHaveBeenLastCalledWith(123);
+
+    await userEvent.type(input, '4');
+    expect(input).toHaveValue('1,234');
+    expect(onChange).toHaveBeenLastCalledWith(1234);
+
+    onChange.mockClear();
+    expect(onChange).not.toHaveBeenCalled();
+    await userEvent.type(input, '.');
+    expect(input).toHaveValue('1,234.');
+    expect(onChange).not.toHaveBeenCalled();
+
+    await userEvent.type(input, '5');
+    expect(input).toHaveValue('1,234.5');
+    expect(onChange).toHaveBeenLastCalledWith(1234.5);
+
+    await userEvent.type(input, '6');
+    expect(input).toHaveValue('1,234.56');
+    expect(onChange).toHaveBeenLastCalledWith(1234.56);
+
+    await userEvent.type(input, '{backspace}');
+    expect(input).toHaveValue('1,234.5');
+    expect(onChange).toHaveBeenLastCalledWith(1234.5);
+
+    onChange.mockClear();
+    fireEvent.blur(input);
+    expect(input).toHaveValue('1,234.50');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('allows to delete the thousands separator and the preceding digit', async () => {
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    await userEvent.type(input, '1234');
+    expect(input).toHaveValue('1,234');
+    expect(onChange).toHaveBeenLastCalledWith(1234);
+
+    await userEvent.type(input, '{backspace}', {
+      initialSelectionStart: 2,
+    });
+    expect(input).toHaveValue('234');
+    expect(onChange).toHaveBeenLastCalledWith(234);
+
+    await waitFor(() => {
+      expect(input.selectionStart).toBe(0);
+    });
+  });
+
+  it('allows to paste poorly formatted values', async () => {
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    await userEvent.click(input);
+    await userEvent.paste('1234.5678');
+    expect(input).toHaveValue('1,234.56');
+    expect(onChange).toHaveBeenLastCalledWith(1234.56);
+  });
+
+  it('allows to paste values', async () => {
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    await userEvent.click(input);
+    await userEvent.paste('1000');
+    expect(input).toHaveValue('1,000');
+    expect(onChange).toHaveBeenLastCalledWith(1000);
+  });
+
+  it('only allows specific characters to be entered', async () => {
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    await userEvent.type(input, 'abc');
+    expect(input).toHaveValue('');
+    expect(onChange).not.toHaveBeenCalled();
+
+    await userEvent.type(input, '123');
+    expect(input).toHaveValue('123');
+    expect(onChange).toHaveBeenLastCalledWith(123);
+
+    await userEvent.type(input, 'def');
+    expect(input).toHaveValue('123');
+    expect(onChange).toHaveBeenLastCalledWith(123);
+
+    await userEvent.type(input, '{backspace}');
+    expect(input).toHaveValue('12');
+    expect(onChange).toHaveBeenLastCalledWith(12);
+  });
+
+  it('does not allow to enter too many decimals', async () => {
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    await userEvent.type(input, '123.45');
+    expect(input).toHaveValue('123.45');
+    expect(onChange).toHaveBeenLastCalledWith(123.45);
+    onChange.mockClear();
+
+    await userEvent.type(input, '6');
+    expect(input).toHaveValue('123.45');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('does not allow to enter too many decimal separators', async () => {
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    await userEvent.type(input, '123.');
+    expect(input).toHaveValue('123.');
+    expect(onChange).toHaveBeenLastCalledWith(123);
+    onChange.mockClear();
+
+    await userEvent.type(input, '.');
+    expect(input).toHaveValue('123.');
+    expect(onChange).not.toHaveBeenCalled();
+
+    await userEvent.type(input, '45');
+    expect(input).toHaveValue('123.45');
+    expect(onChange).toHaveBeenLastCalledWith(123.45);
+    onChange.mockClear();
+
+    await userEvent.type(input, '.');
+    expect(input).toHaveValue('123.45');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('maintains cursor position after formatting', async () => {
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    await userEvent.type(input, '1234567');
+    expect(input).toHaveValue('1,234,567');
+    expect(onChange).toHaveBeenLastCalledWith(1234567);
+    expect(input.selectionStart).toBe(9);
+
+    await userEvent.type(input, '9', {
+      initialSelectionStart: 4, // Place the cursor between "3" and "4"
+    });
+    expect(input).toHaveValue('12,394,567');
+    expect(onChange).toHaveBeenLastCalledWith(12394567);
+
+    await waitFor(() => {
+      expect(input.selectionStart).toBe(5);
+    });
+  });
+
+  it('adds decimal placeholders when the user stars typing decimals', async () => {
+    const onChange = jest.fn();
+    const { container } = render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    await userEvent.type(input, '1234.');
+    expect(input).toHaveValue('1,234.');
+
+    expect(getInputAndAddonContents(container)).toBe('1,234.00');
+
+    await userEvent.type(input, '5');
+    expect(input).toHaveValue('1,234.5');
+    expect(getInputAndAddonContents(container)).toBe('1,234.50');
+
+    await userEvent.type(input, '6');
+    expect(input).toHaveValue('1,234.56');
+    expect(getInputAndAddonContents(container)).toBe('1,234.56');
+  });
+
+  it('adds decimal placeholders when the user stars typing decimals in Spansh', async () => {
+    const onChange = jest.fn();
+    const { container } = render(<AmountInput id="foo" currency="GBP" onChange={onChange} />, {
+      locale: 'es',
+    });
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    await userEvent.type(input, '1234,');
+    expect(input).toHaveValue('1234,');
+
+    expect(getInputAndAddonContents(container)).toBe('1234,00');
+
+    await userEvent.type(input, '5');
+    expect(input).toHaveValue('1234,5');
+    expect(getInputAndAddonContents(container)).toBe('1234,50');
+
+    await userEvent.type(input, '6');
+    expect(input).toHaveValue('1234,56');
+    expect(getInputAndAddonContents(container)).toBe('1234,56');
+  });
+
+  it('adds decimal placeholders when the input is blurred', async () => {
+    const onChange = jest.fn();
+    const { container } = render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    await userEvent.type(input, '1234');
+    expect(input).toHaveValue('1,234');
+
+    fireEvent.blur(input);
+    expect(getInputAndAddonContents(container)).toBe('1,234.00');
+  });
+
+  it('adds decimal placeholders when the input is blurred in Spanish', async () => {
+    const onChange = jest.fn();
+    const { container } = render(<AmountInput id="foo" currency="GBP" onChange={onChange} />, {
+      locale: 'es',
+    });
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    await userEvent.type(input, '1234');
+    expect(input).toHaveValue('1234');
+
+    fireEvent.blur(input);
+    expect(getInputAndAddonContents(container)).toBe('1234,00');
+  });
+
+  it('does not allow to enter an amount greater than the maximum', async () => {
+    const maxAmount = Number.MAX_SAFE_INTEGER - 1;
+    const onChange = jest.fn();
+    render(<AmountInput id="foo" currency="GBP" onChange={onChange} />);
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+
+    await userEvent.type(input, String(maxAmount));
+    expect(input).toHaveValue('9,007,199,254,740,990');
+    expect(onChange).toHaveBeenLastCalledWith(maxAmount);
+
+    onChange.mockClear();
+    await userEvent.type(input, '1');
+    expect(input).toHaveValue('9,007,199,254,740,990');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+const getInputAndAddonContents = (container: HTMLElement) => {
+  const input = screen.getByRole<HTMLInputElement>('textbox');
+  return `${input.value}${container.textContent}`;
+};