@transferwise/components 0.0.0-experimental-696128b → 0.0.0-experimental-328f2cc

package/src/button/Button.tsx

@@ -1,117 +1,154 @@
-/* eslint-disable react/display-name */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { ElementType, forwardRef, MouseEvent } from 'react';
+import { useIntl } from 'react-intl';
+
 import {
-  AnchorElementProps,
-  ButtonReferenceType,
-  ButtonProps as NewButtonProps,
-} from './Button.types';
-import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
-import AvatarLayout from '../avatarLayout';
+  Size,
+  ControlType,
+  Priority,
+  ControlTypeAccent,
+  ControlTypeNegative,
+  ControlTypePositive,
+  PriorityPrimary,
+  PrioritySecondary,
+  PriorityTertiary,
+  SizeExtraSmall,
+  SizeSmall,
+  SizeMedium,
+  SizeLarge,
+} from '../common';
 import ProcessIndicator from '../processIndicator';
-import { clsx } from 'clsx';
-import { Typography } from '../common';
-import Body from '../body';
 
-const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
+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>(
   (
     {
-      as = 'button',
+      as: component,
+      block = false,
       children,
       className,
-      size = 'lg',
-      href,
-      disabled = false,
-      priority = 'primary',
-      sentiment = 'default',
-      iconStart: IconStart,
-      iconEnd: IconEnd,
-      avatars,
-      // @ts-expect-error NewButtonProps has `type` prop
-      type = 'button',
+      disabled,
       loading = false,
-      block = false,
-      v2,
-      ...props
-    },
-    ref,
+      priority = Priority.PRIMARY,
+      size = Size.MEDIUM,
+      type = ControlType.ACCENT,
+      onClick,
+      ...rest
+    }: Props,
+    reference,
   ) => {
-    const classNames = clsx(
-      'wds-Button',
+    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}`,
       {
-        [`wds-Button--block`]: block,
-        [`wds-Button--disabled`]: disabled,
-        [`wds-Button--loading`]: loading,
+        'btn-loading': loading,
+        'btn-block np-btn-block': block,
+        disabled,
       },
-      `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,
-      `wds-Button--${priority}`,
-      `wds-Button--${sentiment}`,
+      // @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],
       className,
     );
 
-    const contentClassNames = clsx('wds-Button-content', {
-      [`wds-Button-content--loading`]: loading,
-    });
+    function processIndicatorSize() {
+      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
+    }
 
-    const content = (
-      <Body
-        as="span"
-        type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}
-        className={contentClassNames}
-      >
-        {loading && (
-          <ProcessIndicator
-            size={size === 'sm' ? 'xxs' : 'xs'}
-            className="wds-Button-loader"
-            data-testid="button-loader-indicator"
-          />
-        )}
-        <span className="wds-Button-label" aria-hidden={loading}>
-          {size === 'lg' ? (
-            children
-          ) : (
-            <>
-              {size === 'md' && avatars && (
-                <span className="wds-Button-avatars">
-                  <AvatarLayout orientation="horizontal" avatars={avatars} size={24} />
-                </span>
-              )}
-              {!avatars && IconStart && (
-                <IconStart className="wds-Button-icon wds-Button-icon--start" />
-              )}
-              {children}
-              {IconEnd && <IconEnd className="wds-Button-icon wds-Button-icon--end" />}
-            </>
-          )}
-        </span>
-      </Body>
-    );
+    const Element = (component as ElementType) ?? 'button';
+    let props;
 
-    if (href || as === 'a') {
-      return (
-        <PrimitiveAnchor
-          ref={ref as React.Ref<HTMLAnchorElement>}
-          {...(props as any)}
-          href={href}
-          className={classNames}
-          disabled={disabled}
-        >
-          {content}
-        </PrimitiveAnchor>
-      );
+    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);
+        }
+      };
+
     return (
-      <PrimitiveButton
-        ref={ref as React.Ref<HTMLButtonElement>}
-        {...(props as any)}
-        className={classNames}
-        disabled={disabled}
-        loading={loading}
-        type={type}
+      <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']}
       >
-        {content}
-      </PrimitiveButton>
+        {children}
+        {loading && (
+          <ProcessIndicator
+            size={processIndicatorSize()}
+            className="btn-loader"
+            data-testid="ButtonProgressIndicator"
+          />
+        )}
+      </Element>
     );
   },
 );

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

@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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="#"
+  >
+    Send money
+  </a>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;
+
+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"
+  >
+    Send money
+  </button>
+</div>
+`;

package/src/button/index.ts

@@ -1,2 +1,3 @@
-export { default } from './Button.resolver';
-export type { ButtonProps } from './Button.resolver';
+export { default } from './Button';
+
+export type { Props as ButtonProps } from './Button';

package/src/drawer/Drawer.spec.tsx

@@ -0,0 +1,93 @@
+import { render, screen, userEvent, mockMatchMedia } from '../test-utils';
+import { Position } from '../common';
+
+import Drawer from './Drawer';
+
+jest.mock('../common/DOMOperations');
+mockMatchMedia();
+
+describe('Drawer', () => {
+  const renderedComponent = (props: React.ComponentProps<typeof Drawer>) =>
+    render(<Drawer {...props} />);
+
+  const props = {
+    open: true,
+    onClose: jest.fn(),
+    headerTitle: 'Drawer Title',
+    footerContent: <div>Footer Content</div>,
+    children: <p>Drawer Content</p>,
+    className: 'drawer-class',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the Drawer component', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('renders the header title', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+  });
+
+  it('renders the footer content', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Footer Content')).toBeInTheDocument();
+  });
+
+  it('renders the children content', () => {
+    renderedComponent(props);
+    expect(screen.getByText('Drawer Content')).toBeInTheDocument();
+  });
+
+  it('passes through the className prop', () => {
+    renderedComponent({ ...props, className: 'drawer-class' });
+    expect(screen.getByRole('dialog')).toHaveClass('drawer-class');
+  });
+
+  it('calls onClose when the close button is clicked', async () => {
+    renderedComponent(props);
+    await userEvent.click(screen.getByLabelText('Close'));
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose if the dimmer is clicked', async () => {
+    render(<Drawer {...props} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClose if the drawer content is clicked', async () => {
+    render(<Drawer {...props}>Drawer Content</Drawer>);
+    await userEvent.click(screen.getByText('Drawer Content'));
+    expect(props.onClose).not.toHaveBeenCalled();
+  });
+
+  it('does not render the Drawer when open is false', () => {
+    renderedComponent({ ...props, open: false });
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('renders the Drawer with the correct aria-labelledby attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-labelledby');
+  });
+
+  it('renders the Drawer with the correct position', () => {
+    renderedComponent({ ...props, position: Position.LEFT });
+    expect(screen.getByRole('dialog').parentElement).toHaveClass('sliding-panel--open-left');
+  });
+
+  it('renders the Drawer with the correct role attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('role', 'dialog');
+  });
+
+  it('renders the Drawer with the correct aria-modal attribute', () => {
+    renderedComponent(props);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
+  });
+});

package/src/field/Field.story.tsx

@@ -12,7 +12,7 @@ import Info from '../info';
 
 export default {
   component: Field,
-  title: 'Forms/Field',
+  title: 'Field',
   tags: ['autodocs'],
   argTypes: {
     messageIconLabel: {

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -12,7 +12,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         aria-disabled="false"
         aria-label="back to previous step"
         aria-live="off"
-        class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
+        class="wds-Button np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
         style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
         type="button"
       >