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

package/src/button/Button.less

@@ -1,224 +1,24 @@
-@import './Button.vars.less';
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  word-wrap: break-word;
-  appearance: none;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
+.np-btn {
+  position: relative;
 
-  &:hover {
-    background-color: var(--Button-background-hover);
-  }
-
-  &:active {
-    background-color: var(--Button-background-active);
-  }
-
-  &.wds-Button--disabled,
-  &:disabled {
-    // The declarations below are necessary as design specs for
-    // the button's disabled state have changed. This is to be
-    // further investigated at a later stage.
-    // @see https://transferwise.atlassian.net/browse/DS-7386
-    filter: none;
-    mix-blend-mode: luminosity;
-    opacity: 0.45;
-    cursor: not-allowed;
-
-    &,
-    &:hover,
-    &:active {
-      background-color: var(--Button-background);
-    }
-  }
-
-  // Priority modifiers
-  &--secondary {
-    --Button-background: var(--Button-secondary-background);
-    --Button-background-hover: var(--Button-secondary-background-hover);
-    --Button-background-active: var(--Button-secondary-background-active);
-    --Button-color: var(--Button-secondary-color);
-  }
-
-  &--tertiary {
-    --Button-background: var(--Button-tertiary-background);
-    --Button-background-hover: var(--Button-tertiary-background-hover);
-    --Button-background-active: var(--Button-tertiary-background-active);
-    --Button-color: var(--Button-tertiary-color);
-
-    .wds-Button-icon--end {
-      color: var(--color-interactive-primary);
-    }
-  }
-
-  &--minimal {
-    --Button-background: var(--Button-minimal-background);
-    --Button-background-hover: var(--Button-minimal-background-hover);
-    --Button-background-active: var(--Button-minimal-background-active);
-    --Button-color: var(--Button-minimal-color);
-
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    text-decoration-thickness: 1px;
-  }
-
-  // Negative styles
-  &--negative {
-    &.wds-Button--primary {
-      --Button-background: var(--Button-primary-negative-background);
-      --Button-background-hover: var(--Button-primary-negative-background-hover);
-      --Button-background-active: var(--Button-primary-negative-background-active);
-      --Button-color: var(--Button-primary-negative-color);
-    }
-
-    &.wds-Button--secondary {
-      --Button-background: var(--Button-secondary-negative-background);
-      --Button-background-hover: var(--Button-secondary-negative-background-hover);
-      --Button-background-active: var(--Button-secondary-negative-background-active);
-      --Button-color: var(--Button-secondary-negative-color);
-    }
-  }
-
-  // Size modifiers
-  &--large {
-    padding: var(--Button-large-padding);
-  }
-
-  &--medium {
-    padding: var(--Button-medium-padding);
-
-    &:has(.wds-Button-avatars){
-      padding-inline-start: var(--size-8);
-    }
-
-    &:has(.wds-Button-icon--end){
-      padding-inline-end: var(--size-8);
-    }
-
-    .wds-Button-icon--start{
-      margin-inline-end: var(--Button-label-gap);
-    }
-  }
-
-  &--small {
-    padding: var(--Button-small-padding);
-
-    &:has(.wds-Button-icon--start){
-      padding-inline-start: var(--size-8);
-    }
-
-    &:has(.wds-Button-icon--end){
-      padding-inline-end: var(--size-8);
-    }
-  }
-
-
-
-  // Width modifiers
-  &--block {
-    width: 100%;
-  }
-
-  &-avatars {
-    display: inline-flex;
-
-    .np-avatar-view .np-avatar-view-content {
-      color: var(--Button-color);
-    }
-  }
-
-  // Icon styles
-  &-icon {
-    display: inline-block;
+  &.np-btn-block > span.btn-loader {
+    position: absolute;
+    .left(var(--size-24));
   }
 
-  &-content {
-    position: relative;
-
-    &--loading {
-      .wds-Button-label,
-      .wds-Button-media,
-      .wds-Button-icon {
-        visibility: hidden;
-        opacity: 0;
-      }
-    }
+  &.np-btn-xs > span.btn-loader {
+    background-size: 16px 16px;
   }
 
-  &-label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--Button-label-gap);
-    position: relative;
+  &.np-btn-xs.btn-block > span.btn-loader {
+    top: 0;
   }
 
-  &-loader {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    .process-circle {
-      stroke: var(--Button-color);
-    }
+  // we do not want pointer events disabled as that
+  // prevents the custom cursor to be shown
+  &.disabled[class] {
+    pointer-events: auto;
   }
 }
-
-/* Avatar border transparency */
-/* dark buttons get 20% transparency, light buttons get 12% */
-.wds-Button-avatars {
-  .np-circle {
-    --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
-
-    .wds-Button--secondary.wds-Button--negative &,
-    .wds-Button--secondary &,
-    .wds-Button--tertiary &,
-    .wds-Button--minimal & {
-      .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
-        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
-      }
-    }
-    .wds-Button--primary &,
-    .wds-Button--primary.wds-Button--negative & {
-      .np-theme-personal--dark &,
-      .np-theme-personal--forest-green & {
-        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
-      }
-    }
-    .wds-Button--tertiary &,
-    .wds-Button--minimal & {
-      .np-theme-personal--bright-green & {
-        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
-      }
-    }
-  }
-}
-
-:dir(rtl) {
-  .wds-Button {
-    .tw-icon-chevron-right,
-    .tw-icon-arrow-right,
-    .tw-icon-chevron-left,
-    .tw-icon-arrow-left,
-    .tw-icon-arrow-diagonal-down,
-    .tw-icon-arrow-diagonal-up,
-    .tw-icon-list,
-    .tw-icon-activity {
-      scale: -1 1;
-    }
-  }
-}

package/src/button/Button.spec.tsx

@@ -1,210 +1,246 @@
-import { render, screen } from '../test-utils';
-import Button, { ButtonProps } from './Button.resolver';
+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;
 
 describe('Button', () => {
-  const legacyProps: ButtonProps = {
-    as: 'button',
-    priority: 'primary',
-    size: 'md',
-    type: 'accent',
+  // 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 newProps: ButtonProps = {
-    as: 'button',
-    v2: true,
-    priority: 'primary',
-    size: 'md',
-  };
+  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;
+  });
 
-  const testId = 'new-button';
+  beforeEach(jest.clearAllMocks);
 
-  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');
+  afterAll(() => {
+    // eslint-disable-next-line no-console
+    console.warn = originalWarn;
   });
 
-  it('renders the new Button when v2 is true', () => {
-    render(
-      <Button data-testid={testId} {...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('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('render as HTML anchor', () => {
-    const href = 'https://example.com';
-    const name = 'Button as link';
+  describe('button attributes', () => {
+    it('sets the htmlType if set', () => {
+      render(<Button {...props} htmlType="submit" />);
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+    });
 
-    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('passes through custom classes if set', () => {
+      render(<Button {...props} className="donkeysarethebest" />);
+      expect(screen.getByRole('button')).toHaveClass('donkeysarethebest');
+    });
 
-      it('should render as link if `as="a"` is provided', () => {
-        render(
-          <Button v2 as="a">
-            {name}
-          </Button>,
-        );
-        expect(screen.getByText(name).closest('a')).toBeInTheDocument();
-      });
+    it('passes through aria-label if set', () => {
+      render(<Button {...props} aria-label="unique label" />);
+      const loadingButton = screen.getByLabelText('unique label');
+      expect(loadingButton).toBeInTheDocument();
+    });
+  });
 
-      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);
-      });
+  describe('onClick', () => {
+    it('calls onClick when clicked', async () => {
+      render(<Button {...props} />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(props.onClick).toHaveBeenCalledTimes(1);
+    });
 
-      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('does not call onClick when clicked if disabled', async () => {
+      render(<Button {...props} disabled />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(props.onClick).toHaveBeenCalledTimes(0);
+    });
 
-      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');
-          });
-        });
-      });
+    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);
     });
   });
 
-  it('does not set type when type is in LegacyButtonType', () => {
-    const legacyTypeProps: ButtonProps = {
-      ...newProps,
-      // @ts-expect-error here we intentionally set wrong value to test `type` attr in DOM
-      type: 'accent',
-    };
-    render(
-      <Button data-testid={testId} {...legacyTypeProps}>
-        Button Type
-      </Button>,
-    );
-    const button = screen.getByTestId('new-button');
-    expect(button).toBeInTheDocument();
-    expect(button).not.toHaveAttribute('type');
+  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);
+    });
   });
 
-  it('sets type when type is not in LegacyButtonType', () => {
-    const buttonTypeProps: ButtonProps = {
-      ...newProps,
-      type: 'submit',
-    };
-    render(
-      <Button data-testid={testId} {...buttonTypeProps}>
-        Submit Button
-      </Button>,
-    );
-    const button = screen.getByTestId('new-button');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('type', 'submit');
+  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();
+    });
+
+    it('renders large buttons', () => {
+      expect(render(<Button {...props} size={LARGE} />).container).toMatchSnapshot();
+    });
+  });
+
+  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();
+    });
+  });
+
+  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(),
+      );
+    });
+
+    it('renders tertiary buttons', () => {
+      expect(
+        render(<Button {...props} priority={TERTIARY} type={ACCENT} />).container,
+      ).toMatchSnapshot();
+    });
+
+    it('defaults tertiary buttons to secondary for positive buttons', () => {
+      [POSITIVE, NEGATIVE].forEach((type) =>
+        expect(
+          render(<Button {...props} priority={TERTIARY} type={type} />).container,
+        ).toMatchSnapshot(),
+      );
+    });
+  });
+
+  describe('other states', () => {
+    it('renders as loading if `loading` is true', () => {
+      render(<Button {...props} loading />);
+      const button = screen.queryByRole('button', {
+        name: messages.loadingAriaLabel.defaultMessage,
+      });
+      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');
+    });
+
+    it('renders as block if block is true', () => {
+      expect(render(<Button {...props} block />).container).toMatchSnapshot();
+    });
+  });
+
+  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('renders link as accent buttons with priority tertiary and logs a warning', () => {
+      expect(render(<Button {...props} type={LINK} />).container).toMatchSnapshot();
+    });
   });
 });