@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886

package/src/button/Button.tsx

@@ -1,125 +1,154 @@
-/* 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 { 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';
+import ProcessIndicator from '../processIndicator';
+
+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;
+};
 
-const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
+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,
+      as: component,
+      block = false,
       children,
       className,
-      size = 'lg',
-      href,
-      disabled = false,
-      priority = 'primary',
-      sentiment = 'default',
-      addonStart,
-      addonEnd,
-      // @ts-expect-error NewButtonProps has `type` prop
-      type,
+      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' && 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>
-              )}
-
-              {children}
-
-              {addonEnd?.type === 'icon' && addonEnd?.value && (
-                <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>
-                  {addonEnd.value}
-                </span>
-              )}
-            </>
-          )}
-        </span>
-      </Body>
-    );
+    const Element = (component as ElementType) ?? 'button';
+    let props;
 
-    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>
-      );
+    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}
-        href={undefined}
-        target={undefined}
+      <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/circularButton/CircularButton.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 
 import Body from '../body/Body';
-import { typeClassMap, priorityClassMap } from '../button/classMap';
 import { Breakpoint, ControlType, Priority, Typography } from '../common';
 import IconButton, { IconButtonProps } from '../iconButton';
 import { useMedia } from '../common/hooks/useMedia';

package/src/common/action/Action.tsx

@@ -1,9 +1,8 @@
 import { clsx } from 'clsx';
 import Link from '../../link';
 import { Typography } from '../propsValues/typography';
+import ActionButton from '../../actionButton';
 import { Priority } from '../propsValues/control';
-import Button from '../../button';
-import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
 
 export type ActionOptions = {
   'aria-label'?: string;
@@ -14,20 +13,12 @@ export type ActionOptions = {
 };
 
 type Props = {
+  variant?: 'button' | 'action-button';
   action: ActionOptions;
   className?: string;
-  variant?: 'button' | 'action-button';
-  sentiment?: ButtonSentiment;
-  priority?: ButtonPriority;
 };
 
-export function Action({
-  action,
-  className,
-  variant = 'button',
-  sentiment = 'default',
-  priority = Priority.SECONDARY,
-}: Props) {
+export function Action({ action, className, variant = 'button' }: Props) {
   if ('href' in action) {
     return (
       <Link
@@ -43,32 +34,23 @@ export function Action({
     );
   }
 
-  switch (variant) {
-    case 'action-button':
-      return (
-        <Button
-          v2
-          size="sm"
-          sentiment={sentiment}
-          aria-label={action['aria-label']}
-          priority={priority}
-          className={clsx(className)}
-          onClick={action.onClick}
-        >
-          {action.text}
-        </Button>
-      );
-    case 'button':
-    default:
-      return (
-        <button
-          type="button"
-          aria-label={action['aria-label']}
-          className={clsx('btn-unstyled np-text-link-large', className)}
-          onClick={action.onClick}
-        >
-          {action.text}
-        </button>
-      );
-  }
+  return variant === 'button' ? (
+    <button
+      type="button"
+      aria-label={action['aria-label']}
+      className={clsx('btn-unstyled np-text-link-large', className)}
+      onClick={action.onClick}
+    >
+      {action.text}
+    </button>
+  ) : (
+    <ActionButton
+      aria-label={action['aria-label']}
+      priority={Priority.SECONDARY}
+      className={clsx(className)}
+      onClick={action.onClick}
+    >
+      {action.text}
+    </ActionButton>
+  );
 }

package/src/common/propsValues/sentiment.ts

@@ -4,7 +4,6 @@ export enum Sentiment {
   POSITIVE = 'positive',
   WARNING = 'warning',
   PENDING = 'pending',
-  CRITICAL = 'critical',
 
   /**
    * @deprecated