@transferwise/components 46.67.2 → 46.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.67.2",
+  "version": "46.68.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/neptune-css": "14.16.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/less-config": "3.1.0",
+    "@transferwise/neptune-css": "14.17.0",
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/button/Button.css

@@ -18,3 +18,6 @@
 .np-btn.np-btn-xs.btn-block > span.btn-loader {
   top: 0;
 }
+.np-btn.disabled[class] {
+  pointer-events: auto;
+}

package/src/button/Button.less

@@ -15,4 +15,10 @@
   &.np-btn-xs.btn-block > span.btn-loader {
     top: 0;
   }
+
+  // we do not want pointer events disabled as that
+  // prevents the custom cursor to be shown
+  &.disabled[class] {
+    pointer-events: auto;
+  }
 }

package/src/button/Button.spec.js

@@ -1,10 +1,10 @@
-/* eslint-disable no-console */
 import { createRef } from 'react';
 
 import { ControlType, Type, Priority, Size } from '../common';
-import { render, cleanup, screen, userEvent } from '../test-utils';
+import { render, screen, userEvent } from '../test-utils';
 
 import Button from '.';
+import messages from './Button.messages';
 
 const { ACCENT, POSITIVE, NEGATIVE } = ControlType;
 const { PAY, LINK, DANGER } = Type;
@@ -12,51 +12,50 @@ const { PRIMARY, SECONDARY, TERTIARY } = Priority;
 const { SMALL, MEDIUM, LARGE } = Size;
 
 describe('Button', () => {
+  // eslint-disable-next-line no-console
+  const originalWarn = console.warn;
+  let mockedWarn;
+
   const props = {
     onClick: jest.fn(),
+    onFocus: jest.fn(),
+    onBlur: jest.fn(),
     children: 'Send money',
   };
 
-  const origWarn = console.warn;
-  let mockedWarn;
-
   beforeAll(() => {
-    mockedWarn = jest.fn();
+    mockedWarn = jest.fn().mockImplementation((args) => {
+      if (typeof args !== 'string' || !args.startsWith('Button has deprecated the')) {
+        originalWarn(args);
+      }
+    });
+    // eslint-disable-next-line no-console
     console.warn = mockedWarn;
   });
 
-  afterEach(() => {
-    cleanup();
-    jest.clearAllMocks();
-  });
+  beforeEach(jest.clearAllMocks);
 
   afterAll(() => {
-    console.warn = origWarn;
+    // eslint-disable-next-line no-console
+    console.warn = originalWarn;
   });
 
   describe('by default', () => {
-    beforeEach(() => {
-      render(<Button {...props} />);
-    });
-
     it('renders the text', () => {
-      expect(screen.getByText('Send money')).toBeInTheDocument();
+      render(<Button {...props} />);
+      expect(screen.getByText(props.children)).toBeInTheDocument();
     });
 
     it('set `ref` to be true on Button', () => {
       const reference = createRef();
-      const props = {
-        ref: reference,
-      };
 
       expect(reference.current).toBeFalsy();
-
-      render(<Button {...props}>Click me!</Button>);
-
+      render(<Button ref={reference}>Click me!</Button>);
       expect(reference.current).toBeTruthy();
     });
 
     it('is not disabled', () => {
+      render(<Button {...props} />);
       expect(screen.getByRole('button')).toBeEnabled();
     });
 
@@ -70,19 +69,14 @@ describe('Button', () => {
   });
 
   describe('button attributes', () => {
-    it('disables the button if disabled', () => {
-      render(<Button {...props} disabled />);
-      expect(screen.getByRole('button')).toBeDisabled();
-    });
-
     it('sets the htmlType if set', () => {
       render(<Button {...props} htmlType="submit" />);
       expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
     });
 
     it('passes through custom classes if set', () => {
-      render(<Button {...props} className="catsarethebest" />);
-      expect(screen.getByRole('button')).toHaveClass('catsarethebest');
+      render(<Button {...props} className="donkeysarethebest" />);
+      expect(screen.getByRole('button')).toHaveClass('donkeysarethebest');
     });
 
     it('passes through aria-label if set', () => {
@@ -94,17 +88,47 @@ describe('Button', () => {
 
   describe('onClick', () => {
     it('calls onClick when clicked', async () => {
-      const onClick = jest.fn();
-      render(<Button {...props} onClick={onClick} />);
+      render(<Button {...props} />);
       await userEvent.click(screen.getByRole('button'));
-      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(props.onClick).toHaveBeenCalledTimes(1);
     });
 
     it('does not call onClick when clicked if disabled', async () => {
-      const onClick = jest.fn();
-      render(<Button {...props} disabled onClick={onClick} />);
+      render(<Button {...props} disabled />);
       await userEvent.click(screen.getByRole('button'));
-      expect(onClick).toHaveBeenCalledTimes(0);
+      expect(props.onClick).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not call onClick when clicked if loading', async () => {
+      render(<Button {...props} loading />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(props.onClick).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('onFocus and onBlur', () => {
+    it('calls both handlers by default', async () => {
+      render(<Button {...props} />);
+      await userEvent.tab();
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+      await userEvent.tab();
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call either handler if disabled', async () => {
+      render(<Button {...props} disabled />);
+      await userEvent.tab();
+      expect(props.onFocus).not.toHaveBeenCalled();
+      await userEvent.tab();
+      expect(props.onFocus).not.toHaveBeenCalled();
+    });
+
+    it('calls both handlers if loading', async () => {
+      render(<Button {...props} loading />);
+      await userEvent.tab();
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+      await userEvent.tab();
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -168,17 +192,29 @@ describe('Button', () => {
     });
   });
 
-  describe('alternative states', () => {
-    it('renders as loading if loading is true', () => {
-      const { container } = render(<Button {...props} loading />);
-      expect(container.querySelector('.btn-loader')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'loading' })).toBeInTheDocument();
-    });
-
-    it('loading button has aria-label of loading', () => {
+  describe('other states', () => {
+    it('renders as loading if `loading` is true', () => {
       render(<Button {...props} loading />);
-      const loadingButton = screen.getByLabelText('loading');
-      expect(loadingButton).toBeInTheDocument();
+      const button = screen.queryByRole('button', {
+        name: messages.loadingAriaLabel.defaultMessage,
+      });
+      expect(button).toBeInTheDocument();
+      expect(button).toBeEnabled();
+      expect(button).toHaveClass('btn-loading');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toHaveAttribute('aria-busy', 'true');
+      expect(button).toHaveAttribute('aria-live', 'polite');
+      expect(screen.getByTestId('ButtonProgressIndicator')).toBeInTheDocument();
+    });
+
+    it('disables the button', () => {
+      render(<Button {...props} disabled />);
+      const button = screen.queryByRole('button');
+      expect(button).toBeDisabled();
+      expect(button).toHaveClass('disabled');
+      expect(button).toHaveAttribute('aria-disabled', 'false');
+      expect(button).toHaveAttribute('aria-busy', 'false');
+      expect(button).toHaveAttribute('aria-live', 'off');
     });
 
     it('renders as block if block is true', () => {

package/src/button/Button.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { userEvent, within, fn } from '@storybook/test';
 
 import { ControlType, Priority } from '../common';
 import { storyConfig } from '../test-utils';
@@ -11,6 +11,10 @@ export default {
   title: 'Actions/Button',
   args: {
     children: 'Button text',
+    loading: false,
+    onClick: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
   },
   argTypes: {
     as: {
@@ -46,39 +50,38 @@ export const Focused = storyConfig<Story>(
 
 export const Variants = storyConfig<Story>(
   {
-    args: {
-      className: 'm-r-2',
-    },
     render: (args) => {
       return (
         <>
           <div className="m-b-2">
             <div className="title-4 m-b-1">Accent</div>
-            <Button {...args} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
-            <Button {...args} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
-            <Button {...args} priority={Priority.TERTIARY} type={ControlType.ACCENT} />
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
+              <Button {...args} priority={Priority.TERTIARY} type={ControlType.ACCENT} />
+            </div>
           </div>
           <div className="m-b-2">
             <div className="title-4 m-b-1">Positive</div>
-            <Button {...args} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
-            <Button {...args} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
+            </div>
           </div>
           <div className="m-b-2">
             <div className="title-4 m-b-1">Negative</div>
-            <Button {...args} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
-            <Button {...args} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+            </div>
           </div>
           <div className="m-b-2">
             <div className="title-4 m-b-1">Disabled</div>
-            <Button {...args} priority={Priority.PRIMARY} disabled />
-            <Button {...args} priority={Priority.SECONDARY} disabled />
-            <Button {...args} priority={Priority.TERTIARY} disabled />
-          </div>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Loading</div>
-            <Button {...args} priority={Priority.PRIMARY} loading />
-            <Button {...args} priority={Priority.SECONDARY} loading />
-            <Button {...args} priority={Priority.TERTIARY} loading />
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} disabled />
+              <Button {...args} priority={Priority.SECONDARY} disabled />
+              <Button {...args} priority={Priority.TERTIARY} disabled />
+            </div>
           </div>
         </>
       );
@@ -87,6 +90,37 @@ export const Variants = storyConfig<Story>(
   { variants: ['default', 'dark', 'rtl'] },
 );
 
+/**
+ * The purpose of the `loading` mode is to convey a message to the
+ * user that some asynchronous process has been triggered, likely
+ * in response to their previous action.
+ *
+ * Although it carries some similarities with the `disabled` mode
+ * (users cannot activate a loading button), it's not hidden from
+ * the keyboard and assistive tech users (users can focus on it,
+ * and it's announced by screen readers), and is also much more
+ * accessible to sighted users due to its default, high contrast.
+ */
+export const Loading = storyConfig<Story>(
+  {
+    render: (args) => {
+      return (
+        <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+          <Button {...args} loading priority={Priority.PRIMARY} />
+          <Button {...args} loading priority={Priority.SECONDARY} />
+          <Button {...args} loading priority={Priority.TERTIARY} />
+          <Button {...args} loading priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
+          <Button {...args} loading priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+        </div>
+      );
+    },
+    args: {
+      loading: true,
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
+
 export const SocialMedia = storyConfig<Story>(
   {
     render: () => {

package/src/button/Button.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';
+import { ElementType, forwardRef, MouseEvent } from 'react';
 import { useIntl } from 'react-intl';
 
 import {
@@ -65,6 +65,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
       priority = Priority.PRIMARY,
       size = Size.MEDIUM,
       type = ControlType.ACCENT,
+      onClick,
       ...rest
     }: Props,
     reference,
@@ -85,9 +86,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
       {
         'btn-loading': loading,
         'btn-block np-btn-block': block,
-      },
-      {
-        disabled: disabled || loading,
+        disabled,
       },
       // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -109,23 +108,49 @@ const Button = forwardRef<ButtonReferenceType, Props>(
       const { htmlType = 'button', ...restProps } = rest as ButtonProps;
       props = {
         ...restProps,
-        disabled: disabled || loading,
+        disabled,
+        'aria-disabled': loading,
         type: htmlType,
       };
     } else {
-      props = { ...rest } as AnchorProps;
+      props = {
+        ...rest,
+        'aria-disabled': loading,
+      } as AnchorProps;
     }
 
+    /**
+     * Ensures that the button cannot be activated in loading or disabled mode,
+     * when `aria-disabled` might be used over the `disabled` HTML attribute
+     */
+    const handleClick =
+      (handler: Props['onClick']) =>
+      (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {
+        if (disabled || loading) {
+          event.preventDefault();
+        } else if (typeof handler === 'function') {
+          handler(event);
+        }
+      };
+
     return (
       <Element
         ref={reference}
         className={classes}
+        onClick={handleClick(onClick)}
         {...props}
         aria-live={loading ? 'polite' : 'off'}
+        aria-busy={loading}
         aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}
       >
         {children}
-        {loading && <ProcessIndicator size={processIndicatorSize()} className="btn-loader" />}
+        {loading && (
+          <ProcessIndicator
+            size={processIndicatorSize()}
+            className="btn-loader"
+            data-testid="ButtonProgressIndicator"
+          />
+        )}
       </Element>
     );
   },

package/src/button/__snapshots__/Button.spec.js.snap

@@ -1,20 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button alternative states renders as block if block is true 1`] = `
-<div>
-  <button
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-block np-btn-block btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
 exports[`Button by default renders a medium button of type accent and priority primary 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -27,6 +17,8 @@ exports[`Button by default renders a medium button of type accent and priority p
 exports[`Button by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
 <div>
   <a
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     href="#"
@@ -39,6 +31,8 @@ exports[`Button by default renders an anchor tag with button styles of type acce
 exports[`Button deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
@@ -51,6 +45,8 @@ exports[`Button deprecated types renders danger as negative buttons with priorit
 exports[`Button deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
     type="button"
@@ -63,6 +59,8 @@ exports[`Button deprecated types renders link as accent buttons with priority te
 exports[`Button deprecated types renders pay as positive buttons and logs a warning 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
@@ -75,6 +73,8 @@ exports[`Button deprecated types renders pay as positive buttons and logs a warn
 exports[`Button deprecated types renders primary as accent buttons and logs a warning 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -84,9 +84,25 @@ exports[`Button deprecated types renders primary as accent buttons and logs a wa
 </div>
 `;
 
+exports[`Button other states renders as block if block is true 1`] = `
+<div>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-live="off"
+    class="btn btn-md np-btn np-btn-md btn-block np-btn-block btn-accent btn-priority-1"
+    type="button"
+  >
+    Send money
+  </button>
+</div>
+`;
+
 exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
     type="button"
@@ -99,6 +115,8 @@ exports[`Button priorities defaults tertiary buttons to secondary for positive b
 exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
@@ -111,6 +129,8 @@ exports[`Button priorities defaults tertiary buttons to secondary for positive b
 exports[`Button priorities renders primary buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -123,6 +143,8 @@ exports[`Button priorities renders primary buttons 1`] = `
 exports[`Button priorities renders primary buttons 2`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
@@ -135,6 +157,8 @@ exports[`Button priorities renders primary buttons 2`] = `
 exports[`Button priorities renders primary buttons 3`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
     type="button"
@@ -147,6 +171,8 @@ exports[`Button priorities renders primary buttons 3`] = `
 exports[`Button priorities renders secondary buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-2"
     type="button"
@@ -159,6 +185,8 @@ exports[`Button priorities renders secondary buttons 1`] = `
 exports[`Button priorities renders secondary buttons 2`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
     type="button"
@@ -171,6 +199,8 @@ exports[`Button priorities renders secondary buttons 2`] = `
 exports[`Button priorities renders secondary buttons 3`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
@@ -183,6 +213,8 @@ exports[`Button priorities renders secondary buttons 3`] = `
 exports[`Button priorities renders tertiary buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
     type="button"
@@ -195,6 +227,8 @@ exports[`Button priorities renders tertiary buttons 1`] = `
 exports[`Button sizes renders large buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-lg np-btn np-btn-lg btn-accent btn-priority-1"
     type="button"
@@ -207,6 +241,8 @@ exports[`Button sizes renders large buttons 1`] = `
 exports[`Button sizes renders medium buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -219,6 +255,8 @@ exports[`Button sizes renders medium buttons 1`] = `
 exports[`Button sizes renders small buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-sm np-btn np-btn-sm btn-accent btn-priority-1"
     type="button"
@@ -231,6 +269,8 @@ exports[`Button sizes renders small buttons 1`] = `
 exports[`Button types renders accent buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -243,6 +283,8 @@ exports[`Button types renders accent buttons 1`] = `
 exports[`Button types renders negative buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
     type="button"
@@ -255,6 +297,8 @@ exports[`Button types renders negative buttons 1`] = `
 exports[`Button types renders positive buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"