@transferwise/components 0.0.0-experimental-53c607c → 0.0.0-experimental-b002e6f

package/src/button/Button.story.tsx

@@ -1,314 +1,163 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import Button from './Button.resolver';
-import { Freeze, ArrowRight } from '@transferwise/icons';
+import { userEvent, within, fn } from '@storybook/test';
 
-const withContainer = (Story: any) => (
-  <div style={{ display: 'flex', flexDirection: 'initial', justifyContent: 'center' }}>
-    <Story />
-  </div>
-);
+import { ControlType, Priority } from '../common';
+import { storyConfig } from '../test-utils';
+
+import Button from './Button';
 
-const meta: Meta<typeof Button> = {
+export default {
   component: Button,
   title: 'Actions/Button',
-  argTypes: {
-    as: {
-      type: {
-        name: 'enum',
-        value: ['button', 'a'],
-      },
-    },
-    size: {
-      type: {
-        name: 'enum',
-        value: ['sm', 'md', 'lg'],
-      },
-    },
-    href: {
-      type: {
-        name: 'string',
-      },
-    },
-    priority: {
-      type: {
-        name: 'enum',
-        value: ['primary', 'secondary', 'tertiary', 'minimal'],
-      },
-    },
-    appearance: {
-      type: {
-        name: 'enum',
-        value: ['default', 'negative'],
-      },
-    },
-    iconStart: {
-      control: 'object',
-    },
-    iconEnd: {
-      control: 'object',
-    },
-    avatars: {
-      control: 'object',
-    },
-    htmlType: {
-      table: {
-        disable: true,
-      },
-    },
-    'data-testid': {
-      table: {
-        disable: true,
-      },
-    },
-  },
   args: {
     children: 'Button text',
-    as: 'button',
-    href: undefined,
-    disabled: false,
     loading: false,
-    size: 'md',
-    iconStart: undefined,
-    iconEnd: undefined,
-    priority: 'primary',
-    appearance: 'default',
-    avatars: undefined,
-    useNewButton: true,
     onClick: fn(),
     onBlur: fn(),
     onFocus: fn(),
-    onKeyDown: fn(),
-    onMouseEnter: fn(),
-    onMouseLeave: fn(),
-  },
-  tags: ['autodocs'],
-  decorators: [withContainer],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Basic: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A basic example of the Button component.',
-      },
-    },
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    priority: 'secondary',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button with secondary priority.',
-      },
-    },
-  },
-};
-
-export const Tertiary: Story = {
-  args: {
-    priority: 'tertiary',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button with tertiary priority.',
-      },
-    },
-  },
-};
-
-export const Minimal: Story = {
-  args: {
-    priority: 'minimal',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button with minimal priority.',
-      },
-    },
-  },
-};
-
-export const Negative: Story = {
-  args: {
-    appearance: 'negative',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button with negative appearance.',
-      },
-    },
-  },
-};
-
-export const NegativeSecondary: Story = {
-  args: {
-    appearance: 'negative',
-    priority: 'secondary',
   },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button with negative appearance and secondary priority.',
-      },
-    },
-  },
-};
-
-export const AsAnchor: Story = {
-  args: {
-    as: 'a',
-    href: 'https://wise.com',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button rendered as an anchor element.',
-      },
-    },
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A disabled Button.',
+  argTypes: {
+    as: {
+      type: {
+        name: 'enum',
+        value: ['button', 'a'],
       },
     },
   },
-};
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
 
-export const Loading: Story = {
-  args: {
-    loading: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button in a loading state.',
-      },
-    },
-  },
-};
+type Story = StoryObj<typeof Button>;
 
-export const SizeSmall: Story = {
-  args: {
-    size: 'sm',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A small Button.',
-      },
-    },
-  },
-};
+export const Basic: Story = {};
 
-export const SizeLarge: Story = {
-  args: {
-    size: 'lg',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A large Button.',
+export const Focused = storyConfig<Story>(
+  {
+    parameters: {
+      chromatic: {
+        delay: 1000,
       },
     },
-  },
-};
-
-export const DisplayBlock: Story = {
-  args: {
-    block: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button that takes up the full width of its container.',
-      },
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      await userEvent.click(canvas.getByRole('button'));
     },
   },
-};
-
-export const WithIcon: Story = {
-  args: {
-    iconEnd: ArrowRight,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'A Button with an icon on the right. Can also use `iconStart` to place the icon on the left or have both at the same time.',
-      },
-    },
+  {
+    variants: ['dark'],
   },
-};
+);
 
-export const WithAvatars: Story = {
-  args: {
-    avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'A Button with avatars. Will supersed any `iconStart` property and will always render avatars.',
-      },
-    },
-  },
-};
+export const Variants = storyConfig<Story>(
+  {
+    render: (args) => {
+      return (
+        <>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Accent</div>
+            <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>
+            <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>
+            <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>
+            <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>
+        </>
+      );
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
 
-export const WithProfileName: Story = {
-  args: {
-    avatars: [{ profileName: 'John Doe' }],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button with a Profile name.',
-      },
-    },
-  },
-};
+/**
+ * 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 WithProfileImage: Story = {
-  args: {
-    avatars: [{ imgSrc: '../avatar-rectangle-fox.webp' }],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button with a Profile image.',
-      },
-    },
-  },
-};
+export const SocialMedia = storyConfig<Story>(
+  {
+    render: () => {
+      return (
+        <>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-google">
+              Login with Google
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-facebook">
+              Login with Facebook
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-lg btn-facebook">
+              Large Button
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-block btn-facebook">
+              Block Button
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-lg btn-block btn-facebook">
+              Large Block Button
+            </button>
+          </div>
+        </>
+      );
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
 
-export const WithAvatarAndIcon: Story = {
-  args: {
-    avatars: [{ asset: <Freeze /> }],
-    iconEnd: ArrowRight,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A Button with an avatar and an icon.',
-      },
-    },
-  },
-};
+export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
+  variants: ['default', 'dark', 'rtl', 'mobile'],
+});

package/src/button/Button.tsx

@@ -1,109 +1,154 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { forwardRef, useMemo } from 'react';
-import { ButtonProps as NewButtonProps } from './Button.types';
-import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
-import AvatarLayout from '../avatarLayout';
-import ProcessIndicator from '../processIndicator';
 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';
+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<HTMLButtonElement | HTMLAnchorElement, 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 = 'button',
+      as: component,
+      block = false,
       children,
       className,
-      size = 'md',
-      href,
-      disabled = false,
-      priority = 'primary',
-      appearance = 'default',
-      iconStart: IconStart,
-      iconEnd: IconEnd,
-      avatars,
-      type = 'button',
+      disabled,
       loading = false,
-      block = false,
-      ...props
-    },
-    ref,
+      priority = Priority.PRIMARY,
+      size = Size.MEDIUM,
+      type = ControlType.ACCENT,
+      onClick,
+      ...rest
+    }: Props,
+    reference,
   ) => {
-    const sizeClass = useMemo(() => {
-      return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
-    }, [size]);
+    const intl = useIntl();
 
-    const classNames = clsx(
-      'wds-Button',
+    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`]: as === 'a',
-        [`wds-Button--block`]: block,
-        [`wds-Button--disabled`]: disabled,
-        [`wds-Button--loading`]: loading,
-        [`wds-Button--${sizeClass}`]: size,
-        [`wds-Button--${priority}`]: priority,
-        [`wds-Button--${appearance}`]: appearance,
+        'btn-loading': loading,
+        'btn-block np-btn-block': block,
+        disabled,
       },
+      // @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 = (
-      <span className={contentClassNames}>
-        {loading && (
-          <ProcessIndicator
-            size="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>
-      </span>
-    );
+    const Element = (component as ElementType) ?? 'button';
+    let props;
 
-    if (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>
     );
   },
 );