@transferwise/components 0.0.0-experimental-3868cf1 → 0.0.0-experimental-69a95e1

package/src/button/Button.resolver.tsx

@@ -0,0 +1,134 @@
+import { forwardRef } from 'react';
+import LegacyButton, {
+  AnchorProps as LegacyAnchorProps,
+  ButtonProps as LegacyButtonProps,
+} from './LegacyButton';
+import { ButtonProps as NewButtonProps } from './Button.types';
+import NewButton from './Button';
+
+type LegacyButtonType =
+  | 'accent'
+  | 'negative'
+  | 'positive'
+  | 'primary'
+  | 'pay'
+  | 'secondary'
+  | 'danger'
+  | 'link'
+  | null
+  | undefined;
+
+type NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;
+
+type CommonButtonProps = {
+  href?: string;
+  target?: string;
+  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+};
+
+export type ButtonProps =
+  | (Omit<LegacyButtonProps, 'ref'> &
+      CommonButtonProps & {
+        priority?: LegacyButtonProps['priority'];
+        type?: LegacyButtonType;
+        htmlType?: string;
+        v2?: false;
+      })
+  | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &
+      CommonButtonProps & {
+        priority?: NewButtonProps['priority'];
+        type?: NewButtonType;
+        v2: true;
+      });
+
+const mapProps = (props: LegacyButtonProps): NewButtonProps => {
+  const { priority, size, type, as, ...newProps } = props;
+
+  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {
+    accent: {
+      primary: 'primary',
+      secondary: 'tertiary',
+      tertiary: 'minimal',
+    },
+    positive: {
+      primary: 'primary',
+      secondary: 'tertiary',
+      tertiary: 'tertiary',
+    },
+    negative: {
+      primary: 'primary',
+      secondary: 'secondary',
+      tertiary: 'secondary',
+    },
+  };
+
+  const mappedPriority =
+    type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;
+  const mappedSentiment = type === 'negative' ? 'negative' : undefined;
+
+  const legacyButtonTypes: LegacyButtonType[] = [
+    'accent',
+    'negative',
+    'positive',
+    'primary',
+    'pay',
+    'secondary',
+    'danger',
+    'link',
+  ];
+
+  const resolveSize = () => {
+    if (size) {
+      return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;
+    }
+
+    return size;
+  };
+
+  return {
+    ...newProps,
+    size: resolveSize(),
+    priority: mappedPriority,
+    sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),
+    type:
+      type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,
+    v2: undefined,
+  } as NewButtonProps;
+};
+
+const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
+  const { v2 = false, as, ...rest } = props;
+
+  if (v2) {
+    const mappedProps = mapProps(props as LegacyButtonProps);
+    return (
+      <NewButton
+        {...mappedProps}
+        ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}
+        as={as}
+      />
+    );
+  }
+
+  if (as === 'a') {
+    return (
+      <LegacyButton
+        {...(rest as LegacyAnchorProps)}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        as="a"
+      />
+    );
+  }
+
+  return (
+    <LegacyButton
+      {...(rest as LegacyButtonProps)}
+      ref={ref as React.Ref<HTMLButtonElement>}
+      as="button"
+    />
+  );
+});
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/button/Button.spec.tsx

@@ -1,246 +1,197 @@
-import { createRef } from 'react';
-
-import { ControlType, Type, Priority, Size } from '../common';
-import { render, screen, userEvent } from '../test-utils';
-
-import Button from '.';
-import messages from '../i18n/commonMessages/Button.messages';
-import { ButtonReferenceType } from './Button';
-
-const { ACCENT, POSITIVE, NEGATIVE } = ControlType;
-const { PAY, LINK, DANGER } = Type;
-const { PRIMARY, SECONDARY, TERTIARY } = Priority;
-const { SMALL, MEDIUM, LARGE } = Size;
+import { render, screen } from '../test-utils';
+import Button, { ButtonProps } from './Button.resolver';
 
 describe('Button', () => {
-  // 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',
+  const legacyProps: ButtonProps = {
+    as: 'button',
+    priority: 'primary',
+    size: 'md',
+    type: 'accent',
   };
 
-  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(<Button {...props} />);
-      expect(screen.getByText(props.children)).toBeInTheDocument();
-    });
-
-    it('set `ref` to be true on Button', () => {
-      const reference = createRef<ButtonReferenceType>();
-
-      expect(reference.current).toBeFalsy();
-      render(<Button ref={reference}>Click me!</Button>);
-      expect(reference.current).toBeTruthy();
-    });
-
-    it('is not disabled', () => {
-      render(<Button {...props} />);
-      expect(screen.getByRole('button')).toBeEnabled();
-    });
-
-    it('renders a medium button of type accent and priority primary', () => {
-      expect(render(<Button {...props} />).container).toMatchSnapshot();
-    });
-
-    it('renders an anchor tag with button styles of type accent and priority primary', () => {
-      expect(render(<Button {...props} as="a" href="#" />).container).toMatchSnapshot();
-    });
-  });
-
-  describe('button attributes', () => {
-    it('sets the htmlType if set', () => {
-      render(<Button {...props} htmlType="submit" />);
-      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
-    });
-
-    it('passes through custom classes if set', () => {
-      render(<Button {...props} className="donkeysarethebest" />);
-      expect(screen.getByRole('button')).toHaveClass('donkeysarethebest');
-    });
-
-    it('passes through aria-label if set', () => {
-      render(<Button {...props} aria-label="unique label" />);
-      const loadingButton = screen.getByLabelText('unique label');
-      expect(loadingButton).toBeInTheDocument();
-    });
-  });
-
-  describe('onClick', () => {
-    it('calls onClick when clicked', async () => {
-      render(<Button {...props} />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not call onClick when clicked if disabled', async () => {
-      render(<Button {...props} disabled />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(0);
-    });
-
-    it('does not call onClick when clicked if loading', async () => {
-      render(<Button {...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(<Button {...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(<Button {...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(<Button {...props} loading />);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('sizes', () => {
-    it('renders small buttons', () => {
-      expect(render(<Button {...props} size={SMALL} />).container).toMatchSnapshot();
-    });
-
-    it('renders medium buttons', () => {
-      expect(render(<Button {...props} size={MEDIUM} />).container).toMatchSnapshot();
-    });
+  const newProps: ButtonProps = {
+    as: 'button',
+    v2: true,
+    priority: 'primary',
+    size: 'md',
+    type: 'accent',
+    testId: 'new-button',
+  };
 
-    it('renders large buttons', () => {
-      expect(render(<Button {...props} size={LARGE} />).container).toMatchSnapshot();
-    });
+  it('renders LegacyButton when v2 is false', () => {
+    render(<Button {...legacyProps}>Legacy Button</Button>);
+    const button = screen.getByText('Legacy Button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('btn btn-md np-btn np-btn-md btn-accent btn-priority-1');
   });
 
-  describe('types', () => {
-    it('renders accent buttons', () => {
-      expect(render(<Button {...props} type={ACCENT} />).container).toMatchSnapshot();
-    });
-
-    it('renders positive buttons', () => {
-      expect(render(<Button {...props} type={POSITIVE} />).container).toMatchSnapshot();
-    });
-
-    it('renders negative buttons', () => {
-      expect(render(<Button {...props} type={NEGATIVE} />).container).toMatchSnapshot();
-    });
+  it('renders the new Button when v2 is true', () => {
+    render(<Button {...newProps}>New Button</Button>);
+    const button = screen.getByTestId('new-button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('wds-Button wds-Button--medium wds-Button--primary');
   });
 
-  describe('priorities', () => {
-    it('renders primary buttons', () => {
-      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<Button {...props} priority={PRIMARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
-
-    it('renders secondary buttons', () => {
-      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<Button {...props} priority={SECONDARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
+  describe('render as HTML anchor', () => {
+    const href = 'https://example.com';
+    const name = 'Button as link';
 
-    it('renders tertiary buttons', () => {
-      expect(
-        render(<Button {...props} priority={TERTIARY} type={ACCENT} />).container,
-      ).toMatchSnapshot();
-    });
+    describe('v2', () => {
+      it('should render as button by default', () => {
+        render(<Button v2>{name}</Button>);
+        expect(screen.getByRole('button', { name })).toBeInTheDocument();
+      });
+      it('should render as link if href is provided', () => {
+        render(
+          <Button v2 href={href}>
+            {name}
+          </Button>,
+        );
+        expect(screen.getByRole('link', { name })).toHaveAttribute('href', href);
+      });
 
-    it('defaults tertiary buttons to secondary for positive buttons', () => {
-      [POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<Button {...props} priority={TERTIARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
-  });
+      it('should render as link if `as="a"` is provided', () => {
+        render(
+          <Button v2 as="a">
+            {name}
+          </Button>,
+        );
+        expect(screen.getByText(name).closest('a')).toBeInTheDocument();
+      });
 
-  describe('other states', () => {
-    it('renders as loading if `loading` is true', () => {
-      render(<Button {...props} loading />);
-      const button = screen.queryByRole('button', {
-        name: messages.loadingAriaLabel.defaultMessage,
+      it('should render as link if href is set and `as="button"`', () => {
+        render(
+          <Button v2 href={href} as="button">
+            {name}
+          </Button>,
+        );
+        expect(screen.getByRole('link', { name })).toHaveAttribute('href', href);
       });
-      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(<Button {...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');
-    });
+      describe('disabled mode', () => {
+        describe('button', () => {
+          it('should not be disabled by default', () => {
+            render(<Button v2>{name}</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect disabled mode and set it only via the `disabled` attribute', () => {
+            render(
+              <Button v2 disabled>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('button');
+            expect(button).toBeDisabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+        });
+
+        describe('anchor', () => {
+          it('should not be disabled by default', () => {
+            render(
+              <Button v2 href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect disabled mode', () => {
+            render(
+              <Button v2 href="wise.com" disabled>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toHaveAttribute('aria-disabled');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('href');
+          });
+        });
+      });
 
-    it('renders as block if block is true', () => {
-      expect(render(<Button {...props} block />).container).toMatchSnapshot();
+      describe('loading mode', () => {
+        describe('button', () => {
+          it('should not be loading by default', () => {
+            render(<Button v2>{name}</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-busy');
+          });
+
+          it('should respect loading mode', () => {
+            render(
+              <Button v2 loading>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('button');
+            expect(button).toHaveAttribute('aria-busy');
+            // the `disabled` attribute is not set to keep the button
+            // focusable but aria attribute is defined to make it
+            // announced properly by the assistive tech
+            expect(button).toBeEnabled();
+            expect(button).toHaveAttribute('aria-disabled');
+          });
+        });
+
+        describe('anchor', () => {
+          it('should not be loading by default', () => {
+            render(
+              <Button v2 href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-busy');
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect loading mode', () => {
+            render(
+              <Button v2 loading href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toHaveAttribute('aria-busy');
+            // the `disabled` attribute is not set to keep the button
+            // focusable but aria attribute is defined to make it
+            // announced properly by the assistive tech
+            expect(button).toBeEnabled();
+            expect(button).toHaveAttribute('aria-disabled');
+            expect(button).not.toHaveAttribute('href');
+          });
+        });
+      });
     });
   });
 
-  describe('deprecated types', () => {
-    it('renders primary as accent buttons and logs a warning', () => {
-      expect(render(<Button {...props} type={PRIMARY} />).container).toMatchSnapshot();
-      expect(mockedWarn).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders pay as positive buttons and logs a warning', () => {
-      expect(render(<Button {...props} type={PAY} />).container).toMatchSnapshot();
-      expect(mockedWarn).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders danger as negative buttons with priority secondary and logs a warning', () => {
-      expect(render(<Button {...props} type={DANGER} />).container).toMatchSnapshot();
-      expect(mockedWarn).toHaveBeenCalledTimes(1);
-    });
+  it('does not set type when type is in LegacyButtonType', () => {
+    const legacyTypeProps: ButtonProps = {
+      ...newProps,
+      type: 'accent',
+    };
+    render(<Button {...legacyTypeProps}>Button Type</Button>);
+    const button = screen.getByTestId('new-button');
+    expect(button).toBeInTheDocument();
+    expect(button).not.toHaveAttribute('type');
+  });
 
-    it('renders link as accent buttons with priority tertiary and logs a warning', () => {
-      expect(render(<Button {...props} type={LINK} />).container).toMatchSnapshot();
-    });
+  it('sets type when type is not in LegacyButtonType', () => {
+    const buttonTypeProps: ButtonProps = {
+      ...newProps,
+      type: 'submit',
+    };
+    render(<Button {...buttonTypeProps}>Submit Button</Button>);
+    const button = screen.getByTestId('new-button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'submit');
   });
 });