@transferwise/components 0.0.0-experimental-696128b → 0.0.0-experimental-328f2cc

package/build/types/button/LegacyButton.d.ts

@@ -1,30 +0,0 @@
-import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../common';
-import { ButtonReferenceType } from './Button.types';
-/** @deprecated */
-type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
-/** @deprecated */
-type DeprecatedSizes = SizeExtraSmall;
-type CommonProps = {
-    v2?: false;
-    block?: boolean;
-    disabled?: boolean;
-    loading?: boolean;
-    type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
-    priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
-    size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
-    htmlType?: 'submit' | 'reset' | 'button';
-};
-type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
-    as?: 'button';
-};
-type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
-    as?: 'a';
-    href?: string;
-};
-export type LegacyButtonProps = ButtonProps | AnchorProps;
-/**
- * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
- */
-declare const LegacyButton: import("react").ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<AnchorProps, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
-export default LegacyButton;
-//# sourceMappingURL=LegacyButton.d.ts.map

package/build/types/button/LegacyButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegacyButton.d.ts","sourceRoot":"","sources":["../../../src/button/LegacyButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAMnB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;IAC5D,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEJ,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D;;GAEG;AACH,QAAA,MAAM,YAAY,uJAkGjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/src/button/Button.resolver.tsx

@@ -1,73 +0,0 @@
-import { forwardRef } from 'react';
-import LegacyButton, { LegacyButtonProps } from './LegacyButton';
-import { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';
-import NewButton from './Button';
-
-export type ButtonProps = LegacyButtonProps | NewButtonProps;
-
-const mapProps = (props: LegacyButtonProps): NewButtonProps => {
-  const { priority, size, type, ...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: LegacyButtonProps['type'][] = [
-    '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) ? type : props.htmlType || null,
-    v2: true,
-  } as NewButtonProps;
-};
-
-const Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {
-  if (v2) {
-    const mappedProps = mapProps(props as LegacyButtonProps);
-    return <NewButton {...mappedProps} ref={ref} />;
-  }
-
-  return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;
-});
-
-Button.displayName = 'Button';
-
-export default Button;

package/src/button/Button.tests.story.tsx

@@ -1,27 +0,0 @@
-import { Meta } from '@storybook/react';
-import Button from './Button.resolver';
-import { expect, userEvent, within } from '@storybook/test';
-import { storyConfig } from '../test-utils';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  title: 'Actions/Button/Tests',
-};
-export default meta;
-
-export const FocusMinimal = storyConfig(
-  {
-    render: () => (
-      <Button v2 priority="minimal">
-        Focus has underline
-      </Button>
-    ),
-  },
-  {},
-);
-FocusMinimal.play = async ({ canvasElement }) => {
-  await userEvent.tab();
-  const canvas = within(canvasElement);
-  const buttonElement: HTMLButtonElement = canvas.getByRole('button');
-  await expect(buttonElement).toHaveFocus();
-};

package/src/button/Button.types.ts

@@ -1,74 +0,0 @@
-import { ReactNode } from 'react';
-import type { PrimitiveButtonProps, PrimitiveAnchorProps } from '../primitives';
-import type { AvatarLayoutProps } from '../avatarLayout';
-
-export type ButtonSentiment = 'default' | 'negative';
-export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-
-/**
- * Common properties for the Button component.
- */
-export interface CommonProps {
-  v2: true;
-
-  /**
-   * The HTML element to render
-   * @default 'button'
-   **/
-  as?: 'button' | 'a';
-
-  /** Additional class name(s) to apply to the button */
-  className?: string;
-
-  /**
-   * @default false
-   **/
-  disabled?: boolean;
-
-  href?: string;
-
-  /**
-   * @default false
-   * */
-  loading?: boolean;
-
-  /** Whether the button should take up the full width of its container */
-  block?: boolean;
-
-  /**
-   * Size of the button
-   * @default lg
-   * */
-  size?: ButtonSize;
-
-  /**
-   * Priority of the button
-   * @default "primary"
-   */
-  priority?: ButtonPriority;
-
-  /**
-   * Sentiment of the button
-   * @default default
-   */
-  sentiment?: ButtonSentiment;
-
-  /** Icon to be displayed on the left side of the button */
-  iconStart?: React.ElementType;
-
-  /** Icon to be displayed on the right side of the button */
-  iconEnd?: React.ElementType;
-
-  /** Media to be displayed on the left side of the button */
-  avatars?: AvatarLayoutProps['avatars'];
-
-  /** Content to be displayed inside the button */
-  children?: ReactNode;
-}
-
-export type ButtonElementProps = PrimitiveButtonProps & CommonProps;
-export type AnchorElementProps = PrimitiveAnchorProps & CommonProps;
-
-export type ButtonProps = ButtonElementProps | AnchorElementProps;

package/src/button/Button.vars.css

@@ -1,39 +0,0 @@
-.wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-}
-.np-theme-personal--bright-green .wds-Button {
-  --color-contrast: #FFFFFF;
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-contrast);
-}

package/src/button/Button.vars.less

@@ -1,50 +0,0 @@
-.wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  // 5px is required by design
-  --Button-small-padding: calc(var(--size-10) * .5) var(--size-12);
-
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast);
-
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-}
-
-.np-theme-personal--bright-green {
-  .wds-Button {
-    --color-contrast: #FFFFFF;
-    --Button-secondary-color: var(--color-interactive-control);
-    --Button-secondary-negative-color: var(--color-contrast);
-  }
-}

package/src/button/LegacyButton.css

@@ -1,23 +0,0 @@
-.np-btn {
-  position: relative;
-}
-.np-btn.np-btn-block > span.btn-loader {
-  position: absolute;
-  left: 24px;
-  left: var(--size-24);
-}
-[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  right: 24px;
-  right: var(--size-24);
-  left: auto;
-  left: initial;
-}
-.np-btn.np-btn-xs > span.btn-loader {
-  background-size: 16px 16px;
-}
-.np-btn.np-btn-xs.btn-block > span.btn-loader {
-  top: 0;
-}
-.np-btn.disabled[class] {
-  pointer-events: auto;
-}

package/src/button/LegacyButton.less

@@ -1,24 +0,0 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-
-.np-btn {
-  position: relative;
-
-  &.np-btn-block > span.btn-loader {
-    position: absolute;
-    .left(var(--size-24));
-  }
-
-  &.np-btn-xs > span.btn-loader {
-    background-size: 16px 16px;
-  }
-
-  &.np-btn-xs.btn-block > span.btn-loader {
-    top: 0;
-  }
-
-  // we do not want pointer events disabled as that
-  // prevents the custom cursor to be shown
-  &.disabled[class] {
-    pointer-events: auto;
-  }
-}

package/src/button/LegacyButton.spec.tsx

@@ -1,147 +0,0 @@
-import { createRef } from 'react';
-
-import { render, screen, userEvent } from '../test-utils';
-
-import LegacyButton from './LegacyButton';
-import messages from '../i18n/commonMessages/Button.messages';
-import { ButtonReferenceType } from './Button.types';
-
-describe('LegacyButton', () => {
-  // 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',
-  };
-
-  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(<LegacyButton {...props} />);
-      expect(screen.getByText(props.children)).toBeInTheDocument();
-    });
-
-    it('set `ref` to be true on Button', () => {
-      const reference = createRef<ButtonReferenceType>();
-
-      expect(reference.current).toBeFalsy();
-      render(<LegacyButton ref={reference}>Click me!</LegacyButton>);
-      expect(reference.current).toBeTruthy();
-    });
-
-    it('is not disabled', () => {
-      render(<LegacyButton {...props} />);
-      expect(screen.getByRole('button')).toBeEnabled();
-    });
-  });
-
-  describe('button attributes', () => {
-    it('sets the htmlType if set', () => {
-      render(<LegacyButton {...props} htmlType="submit" />);
-      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
-    });
-
-    it('passes through custom classes if set', () => {
-      render(<LegacyButton {...props} className="donkeysarethebest" />);
-      expect(screen.getByRole('button')).toHaveClass('donkeysarethebest');
-    });
-
-    it('passes through aria-label if set', () => {
-      render(<LegacyButton {...props} aria-label="unique label" />);
-      const loadingButton = screen.getByLabelText('unique label');
-      expect(loadingButton).toBeInTheDocument();
-    });
-  });
-
-  describe('onClick', () => {
-    it('calls onClick when clicked', async () => {
-      render(<LegacyButton {...props} />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not call onClick when clicked if disabled', async () => {
-      render(<LegacyButton {...props} disabled />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(0);
-    });
-
-    it('does not call onClick when clicked if loading', async () => {
-      render(<LegacyButton {...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(<LegacyButton {...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(<LegacyButton {...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(<LegacyButton {...props} loading />);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('other states', () => {
-    it('renders as loading if `loading` is true', () => {
-      render(<LegacyButton {...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(<LegacyButton {...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');
-    });
-  });
-});