@transferwise/components 46.87.1 → 46.88.0

package/src/button/Button.tests.story.tsx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/react';
+import Button from './Button.resolver';
+import { expect, userEvent, within } from '@storybook/test';
+import { storyConfig } from '../test-utils';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button/Tests',
+};
+export default meta;
+
+export const FocusTertiary = storyConfig(
+  {
+    render: () => (
+      <Button v2 priority="tertiary">
+        Focus has underline
+      </Button>
+    ),
+  },
+  {},
+);
+FocusTertiary.play = async ({ canvasElement }) => {
+  await userEvent.tab();
+  const canvas = within(canvasElement);
+  const buttonElement: HTMLButtonElement = canvas.getByRole('button');
+  await expect(buttonElement).toHaveFocus();
+};

package/src/button/Button.tsx

@@ -1,154 +1,125 @@
-import { clsx } from 'clsx';
-import { ElementType, forwardRef, MouseEvent } from 'react';
-import { useIntl } from 'react-intl';
-
-import {
-  Size,
-  ControlType,
-  Priority,
-  ControlTypeAccent,
-  ControlTypeNegative,
-  ControlTypePositive,
-  PriorityPrimary,
-  PrioritySecondary,
-  PriorityTertiary,
-  SizeExtraSmall,
-  SizeSmall,
-  SizeMedium,
-  SizeLarge,
-} from '../common';
+/* eslint-disable react/display-name */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { forwardRef } from 'react';
+import { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';
+import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
+import AvatarLayout from '../avatarLayout';
 import ProcessIndicator from '../processIndicator';
+import { clsx } from 'clsx';
+import { Typography } from '../common';
+import Body from '../body';
 
-import messages from '../i18n/commonMessages/Button.messages';
-import { typeClassMap, priorityClassMap } from './classMap';
-import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
-
-/** @deprecated */
-type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
-
-/** @deprecated */
-type DeprecatedSizes = SizeExtraSmall;
-
-type CommonProps = {
-  block?: boolean;
-  disabled?: boolean;
-  loading?: boolean;
-  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
-  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
-  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
-};
-
-type ButtonProps = CommonProps &
-  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
-    as?: 'button';
-    htmlType?: 'submit' | 'reset' | 'button';
-  };
-
-type AnchorProps = CommonProps &
-  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
-    as?: 'a';
-  };
-
-export type Props = ButtonProps | AnchorProps;
-
-export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-
-const Button = forwardRef<ButtonReferenceType, Props>(
+const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
   (
     {
-      as: component,
-      block = false,
+      as,
       children,
       className,
-      disabled,
+      size = 'lg',
+      href,
+      disabled = false,
+      priority = 'primary',
+      sentiment = 'default',
+      addonStart,
+      addonEnd,
+      // @ts-expect-error NewButtonProps has `type` prop
+      type = 'button',
       loading = false,
-      priority = Priority.PRIMARY,
-      size = Size.MEDIUM,
-      type = ControlType.ACCENT,
-      onClick,
-      ...rest
-    }: Props,
-    reference,
+      block = false,
+      v2,
+      ...props
+    },
+    ref,
   ) => {
-    const intl = useIntl();
-
-    logDeprecationNotices({ size, type });
-
-    const newType = establishNewType(type);
-    const newPriority = establishNewPriority(priority, type);
-
-    const classes = clsx(
-      `btn btn-${size}`,
-      `np-btn np-btn-${size}`,
+    const classNames = clsx(
+      'wds-Button',
       {
-        'btn-loading': loading,
-        'btn-block np-btn-block': block,
-        disabled,
+        [`wds-Button--block`]: block,
+        [`wds-Button--disabled`]: disabled,
+        [`wds-Button--loading`]: loading,
       },
-      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      typeClassMap[newType],
-      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      priorityClassMap[newPriority],
+      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,
+      `wds-Button--${priority}`,
+      `wds-Button--${sentiment}`,
       className,
     );
 
-    function processIndicatorSize() {
-      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
-    }
-
-    const Element = (component as ElementType) ?? 'button';
-    let props;
-
-    if (Element === 'button') {
-      const { htmlType = 'button', ...restProps } = rest as ButtonProps;
-      props = {
-        ...restProps,
-        disabled,
-        'aria-disabled': loading,
-        type: htmlType,
-      };
-    } else {
-      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);
-        }
-      };
+    const contentClassNames = clsx('wds-Button-content', {
+      [`wds-Button-content--loading`]: loading,
+    });
 
-    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']}
+    const content = (
+      <Body
+        as="span"
+        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}
+        className={contentClassNames}
       >
-        {children}
         {loading && (
           <ProcessIndicator
-            size={processIndicatorSize()}
-            className="btn-loader"
-            data-testid="ButtonProgressIndicator"
+            size={size === 'sm' ? 'xxs' : 'xs'}
+            className="wds-Button-loader"
+            data-testid="button-loader-indicator"
           />
         )}
-      </Element>
+        <span className="wds-Button-label" aria-hidden={loading}>
+          {size === 'lg' ? (
+            <span className="wds-Button-labelText">{children}</span>
+          ) : (
+            <>
+              {size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (
+                <span className="wds-Button-avatars">
+                  <AvatarLayout orientation="horizontal" avatars={addonStart?.value} size={24} />
+                </span>
+              )}
+
+              {addonStart?.type === 'icon' && addonStart.value && (
+                <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>
+                  {addonStart.value}
+                </span>
+              )}
+
+              <span className="wds-Button-labelText">{children}</span>
+
+              {addonEnd?.type === 'icon' && addonEnd?.value && (
+                <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>
+                  {addonEnd.value}
+                </span>
+              )}
+            </>
+          )}
+        </span>
+      </Body>
+    );
+
+    if ((href && as !== 'button') || as === 'a') {
+      return (
+        <PrimitiveAnchor
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          {...(props as any)}
+          href={href}
+          className={classNames}
+          disabled={disabled || loading}
+          aria-busy={loading || undefined}
+          type={undefined}
+        >
+          {content}
+        </PrimitiveAnchor>
+      );
+    }
+
+    return (
+      <PrimitiveButton
+        ref={ref as React.Ref<HTMLButtonElement>}
+        {...(props as any)}
+        className={classNames}
+        disabled={disabled}
+        loading={loading}
+        type={type}
+        href={undefined}
+        target={undefined}
+      >
+        {content}
+      </PrimitiveButton>
     );
   },
 );

package/src/button/Button.types.ts

@@ -0,0 +1,92 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import type { AvatarLayoutProps } from '../avatarLayout';
+
+export type ButtonSentiment = 'default' | 'negative';
+export type ButtonPriority = 'primary' | 'secondary' | 'secondary-neutral' | 'tertiary';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
+type ButtonAddonIcon = {
+  type: 'icon';
+  value: ReactNode;
+};
+type ButtonAddonAvatar = {
+  type: 'avatar';
+  value: AvatarLayoutProps['avatars'];
+};
+type ButtonAddonStart = ButtonAddonIcon | ButtonAddonAvatar;
+type ButtonAddonEnd = ButtonAddonIcon;
+
+/**
+ * Common properties for the Button component.
+ */
+export interface CommonProps {
+  /**
+   * If set, toggles the new Button API
+   * @default false
+   * */
+  v2: true;
+
+  /**
+   * The HTML element to render. Takes precedence over `href` prop.
+   * @default undefined
+   **/
+  as?: 'button' | 'a';
+
+  /** @default false **/
+  disabled?: boolean;
+
+  /** If set, the component will render as an HTML anchor. */
+  href?: string;
+
+  /**
+   * The `target` attribute for HTML anchor.
+   * If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
+   */
+  target?: string;
+
+  /** @default false */
+  loading?: boolean;
+
+  /** Makes the button take up the full width of its container */
+  block?: boolean;
+
+  /**
+   * Sets the size of the button
+   * @default lg
+   * */
+  size?: ButtonSize;
+
+  /**
+   * Sets a visual hierarchy amongst the buttons displayed on the screen
+   * @default 'primary'
+   */
+  priority?: ButtonPriority;
+
+  /**
+   * Emphasises the nature of the button's action
+   * @default default
+   */
+  sentiment?: ButtonSentiment;
+
+  /** Accessory to be displayed before the label. Not supported by the `lg` size. */
+  addonStart?: ButtonAddonStart;
+
+  /** Accessory to be displayed after the label. Not supported by the `lg` size. */
+  addonEnd?: ButtonAddonEnd;
+
+  className?: string;
+  children?: ReactNode;
+}
+
+export type ButtonElementProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'disabled' | 'className'
+> &
+  CommonProps;
+export type AnchorElementProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'type' | 'disabled' | 'href' | 'className'
+> &
+  CommonProps;
+
+export type ButtonProps = ButtonElementProps | AnchorElementProps;

package/src/button/Button.vars.css

@@ -0,0 +1,46 @@
+.wds-Button {
+  --Button-background: var(--color-interactive-accent);
+  --Button-background-hover: var(--color-interactive-accent-hover);
+  --Button-background-active: var(--color-interactive-accent-active);
+  --Button-color: var(--color-interactive-control);
+  --Button-border-radius: var(--radius-full);
+  --Button-label-gap: var(--size-4);
+  --Button-large-padding: var(--size-12) var(--size-16);
+  --Button-medium-padding: var(--size-8) var(--size-12);
+  --Button-small-padding: var(--size-5) var(--size-12);
+  --Button-avatar-border-color: var(--color-border-neutral);
+  --Button-transition-duration: 150ms;
+  --Button-transition-easing: ease-in-out;
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
+  --Button-secondary-background-active: var(--color-interactive-neutral-active);
+  --Button-secondary-color: var(--color-interactive-primary);
+  --Button-secondary-neutral-background: var(--color-background-neutral);
+  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
+  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
+  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-tertiary-background: transparent;
+  --Button-tertiary-background-hover: var(--color-background-screen-hover);
+  --Button-tertiary-background-active: var(--color-background-screen-active);
+  --Button-tertiary-color: var(--color-interactive-primary);
+  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-primary-negative-color: var(--color-contrast-overlay);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
+  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
+}
+.np-theme-personal--bright-green .wds-Button {
+  --Button-primary-negative-color: var(--color-white);
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-white);
+}
+.np-theme-personal--forest-green .wds-Button {
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-secondary-negative-color: var(--color-contrast-overlay);
+}

package/src/button/Button.vars.less

@@ -0,0 +1,59 @@
+.wds-Button {
+  --Button-background: var(--color-interactive-accent);
+  --Button-background-hover: var(--color-interactive-accent-hover);
+  --Button-background-active: var(--color-interactive-accent-active);
+  --Button-color: var(--color-interactive-control);
+  --Button-border-radius: var(--radius-full);
+  --Button-label-gap: var(--size-4);
+
+  --Button-large-padding: var(--size-12) var(--size-16);
+  --Button-medium-padding: var(--size-8) var(--size-12);
+  --Button-small-padding: var(--size-5) var(--size-12);
+
+  --Button-avatar-border-color: var(--color-border-neutral);
+  --Button-transition-duration: 150ms;
+  --Button-transition-easing: ease-in-out;
+
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
+  --Button-secondary-background-active: var(--color-interactive-neutral-active);
+  --Button-secondary-color: var(--color-interactive-primary);
+
+  --Button-secondary-neutral-background: var(--color-background-neutral);
+  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
+  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
+  --Button-secondary-neutral-color: var(--color-content-primary);
+
+  --Button-tertiary-background: transparent;
+  --Button-tertiary-background-hover: var(--color-background-screen-hover);
+  --Button-tertiary-background-active: var(--color-background-screen-active);
+  --Button-tertiary-color: var(--color-interactive-primary);
+
+  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-primary-negative-color: var(--color-contrast-overlay);
+
+  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
+  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
+
+
+  .np-theme-personal--bright-green & {
+    --Button-primary-negative-color: var(--color-white);
+    --Button-secondary-color: var(--color-interactive-control);
+    --Button-secondary-negative-color: var(--color-white);
+  }
+
+
+  .np-theme-personal--forest-green & {
+    --Button-secondary-background: var(--color-interactive-neutral);
+    --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
+    --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+    --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
+    --Button-secondary-negative-color: var(--color-contrast-overlay);
+  }
+}
+
+

package/src/button/LegacyButton.css

@@ -0,0 +1,23 @@
+.np-btn {
+  position: relative;
+}
+.np-btn.np-btn-block > span.btn-loader {
+  position: absolute;
+  left: 24px;
+  left: var(--size-24);
+}
+[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
+  right: 24px;
+  right: var(--size-24);
+  left: auto;
+  left: initial;
+}
+.np-btn.np-btn-xs > span.btn-loader {
+  background-size: 16px 16px;
+}
+.np-btn.np-btn-xs.btn-block > span.btn-loader {
+  top: 0;
+}
+.np-btn.disabled[class] {
+  pointer-events: auto;
+}

package/src/button/LegacyButton.less

@@ -0,0 +1,24 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+
+.np-btn {
+  position: relative;
+
+  &.np-btn-block > span.btn-loader {
+    position: absolute;
+    .left(var(--size-24));
+  }
+
+  &.np-btn-xs > span.btn-loader {
+    background-size: 16px 16px;
+  }
+
+  &.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/LegacyButton.spec.tsx

@@ -0,0 +1,147 @@
+import { createRef } from 'react';
+
+import { render, screen, userEvent } from '../test-utils';
+
+import LegacyButton from './LegacyButton';
+import messages from '../i18n/commonMessages/Button.messages';
+import { ButtonReferenceType } from './Button.types';
+
+describe('LegacyButton', () => {
+  // eslint-disable-next-line no-console
+  const originalWarn = console.warn;
+  let mockedWarn: typeof originalWarn;
+
+  const props = {
+    onClick: jest.fn(),
+    onFocus: jest.fn(),
+    onBlur: jest.fn(),
+    children: 'Send money',
+  };
+
+  beforeAll(() => {
+    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;
+  });
+
+  beforeEach(jest.clearAllMocks);
+
+  afterAll(() => {
+    // eslint-disable-next-line no-console
+    console.warn = originalWarn;
+  });
+
+  describe('by default', () => {
+    it('renders the text', () => {
+      render(<LegacyButton {...props} />);
+      expect(screen.getByText(props.children)).toBeInTheDocument();
+    });
+
+    it('set `ref` to be true on Button', () => {
+      const reference = createRef<ButtonReferenceType>();
+
+      expect(reference.current).toBeFalsy();
+      render(<LegacyButton ref={reference}>Click me!</LegacyButton>);
+      expect(reference.current).toBeTruthy();
+    });
+
+    it('is not disabled', () => {
+      render(<LegacyButton {...props} />);
+      expect(screen.getByRole('button')).toBeEnabled();
+    });
+  });
+
+  describe('button attributes', () => {
+    it('sets the htmlType if set', () => {
+      render(<LegacyButton {...props} htmlType="submit" />);
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+    });
+
+    it('passes through custom classes if set', () => {
+      render(<LegacyButton {...props} className="donkeysarethebest" />);
+      expect(screen.getByRole('button')).toHaveClass('donkeysarethebest');
+    });
+
+    it('passes through aria-label if set', () => {
+      render(<LegacyButton {...props} aria-label="unique label" />);
+      const loadingButton = screen.getByLabelText('unique label');
+      expect(loadingButton).toBeInTheDocument();
+    });
+  });
+
+  describe('onClick', () => {
+    it('calls onClick when clicked', async () => {
+      render(<LegacyButton {...props} />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(props.onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when clicked if disabled', async () => {
+      render(<LegacyButton {...props} disabled />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(props.onClick).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not call onClick when clicked if loading', async () => {
+      render(<LegacyButton {...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(<LegacyButton {...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(<LegacyButton {...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(<LegacyButton {...props} loading />);
+      await userEvent.tab();
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+      await userEvent.tab();
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('other states', () => {
+    it('renders as loading if `loading` is true', () => {
+      render(<LegacyButton {...props} loading />);
+      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(<LegacyButton {...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');
+    });
+  });
+});