@transferwise/components 0.0.0-experimental-db4013c → 0.0.0-experimental-bd6f8cc

package/src/button/Button.tsx

@@ -1,120 +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,
-      addonStart,
-      addonEnd,
-      // @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' && addonStart?.avatars && (
-                <span className="wds-Button-avatars">
-                  <AvatarLayout orientation="horizontal" avatars={addonStart?.avatars} size={24} />
-                </span>
-              )}
-              {!addonStart?.avatars && addonStart?.icon && (
-                <addonStart.icon className="wds-Button-icon wds-Button-icon--start" />
-              )}
-              {children}
-              {addonEnd?.icon && <addonEnd.icon 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 || loading}
-          aria-busy={loading || 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}
+      <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/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

@@ -9,9 +9,10 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
       <button
+        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"
       >

package/src/inputs/SelectInput.story.tsx

@@ -5,7 +5,7 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import Button from '../button';
+import Button from '../button/Button';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import { Field } from '../field/Field';

package/src/label/Label.story.tsx

@@ -3,7 +3,7 @@ import { Label } from './Label';
 
 export default {
   component: Label,
-  title: 'Forms/Label',
+  title: 'Label',
   tags: ['autodocs'],
 };
 

package/src/link/Link.tsx

@@ -1,14 +1,13 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import { PrimitiveAnchor } from '../primitives';
-import type { PrimitiveAnchorProps } from '../primitives';
 
 import { LinkLarge, LinkDefault } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };
+export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
 
 /**
  * Standard Link component with navigate away icon
@@ -25,30 +24,22 @@ const Link = ({
   onClick,
   ...props
 }: Props) => {
-  const { formatMessage } = useIntl();
   const isBlank = target === '_blank';
 
-  const classNames = clsx(
-    'np-link',
-    'd-inline-flex',
-    {
-      [`np-text-${type}`]: type,
-    },
-    className,
-  );
+  const { formatMessage } = useIntl();
 
   return (
-    <PrimitiveAnchor
+    <a
       href={href}
       target={target}
-      className={classNames}
+      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
       aria-label={ariaLabel}
       rel={isBlank ? 'noreferrer' : undefined}
       onClick={onClick}
       {...props}
     >
       {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-    </PrimitiveAnchor>
+    </a>
   );
 };