@transferwise/components 0.0.0-experimental-75fc27b → 0.0.0-experimental-8a932bb

package/src/button/Button/test/Button.spec.tsx

@@ -0,0 +1,328 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import Button from '..';
+import messages from '../../../i18n/commonMessages/Button.messages';
+import { render } from '../../../test-utils';
+import { Freeze, ArrowRight } from '@transferwise/icons';
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});
+
+describe('Button', () => {
+  const defaultProps = {
+    children: 'Click me',
+  };
+
+  const renderButton = (
+    props?: Partial<typeof defaultProps>,
+    locale = 'en',
+    localeMessages = messages,
+  ) => {
+    return render(
+      <Button {...defaultProps} {...props} />,
+      // @ts-expect-error: props be missing properties from type
+      { locale, messages: localeMessages },
+    );
+  };
+
+  it('renders a button by default', () => {
+    renderButton();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent('Click me');
+  });
+
+  it('applies the correct classes based on props', () => {
+    const props = {
+      ...defaultProps,
+      className: 'custom-class',
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('wds-Button');
+    expect(button).toHaveClass('custom-class');
+  });
+
+  it('disables the button when disabled is true', () => {
+    const props = {
+      ...defaultProps,
+      disabled: true,
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('wds-Button--disabled');
+    expect(button).toBeDisabled();
+  });
+
+  it('calls onClick when button is clicked', async () => {
+    const handleClick = jest.fn();
+    const props = {
+      ...defaultProps,
+      onClick: handleClick,
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    await userEvent.click(button);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onFocus when button is focused', () => {
+    const handleFocus = jest.fn();
+    const props = {
+      ...defaultProps,
+      onFocus: handleFocus,
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    fireEvent.focus(button);
+    expect(handleFocus).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onKeyDown when a key is pressed', async () => {
+    const handleKeyDown = jest.fn();
+    const props = {
+      ...defaultProps,
+      onKeyDown: handleKeyDown,
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    await userEvent.type(button, '{enter}');
+    expect(handleKeyDown).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onBlur when button loses focus', () => {
+    const handleBlur = jest.fn();
+    const props = {
+      ...defaultProps,
+      onBlur: handleBlur,
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    fireEvent.blur(button);
+    expect(handleBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onMouseEnter when mouse enters', async () => {
+    const handleMouseEnter = jest.fn();
+    const props = {
+      ...defaultProps,
+      onMouseEnter: handleMouseEnter,
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    await userEvent.hover(button);
+    expect(handleMouseEnter).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onMouseLeave when mouse leaves', async () => {
+    const handleMouseLeave = jest.fn();
+    const props = {
+      ...defaultProps,
+      onMouseLeave: handleMouseLeave,
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    await userEvent.unhover(button);
+    expect(handleMouseLeave).toHaveBeenCalledTimes(1);
+  });
+
+  it('sets data-testid attribute', () => {
+    const props = {
+      ...defaultProps,
+      testId: 'custom-id',
+    };
+
+    renderButton(props);
+
+    const button = screen.getByTestId('custom-id');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('sets the type attribute to submit', () => {
+    const props = {
+      ...defaultProps,
+      type: 'submit',
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('type', 'submit');
+  });
+
+  it('sets the type attribute to reset', () => {
+    const props = {
+      ...defaultProps,
+      type: 'reset',
+    };
+
+    renderButton(props);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('type', 'reset');
+  });
+
+  it('sets the type attribute to button by default', () => {
+    renderButton();
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+
+  it('displays the aria-label in Spanish when loading', () => {
+    const props = {
+      ...defaultProps,
+      loading: true,
+    };
+
+    const spanishMessages = {
+      ...messages,
+      'neptune.Button.loadingAriaLabel': 'cargando',
+    };
+
+    renderButton(props, 'es', spanishMessages);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'cargando');
+  });
+
+  it('displays with one avatar', () => {
+    const props = {
+      ...defaultProps,
+      avatars: [{ asset: <Freeze /> }],
+    };
+
+    renderButton(props);
+
+    const avatar = screen.getByTestId('freeze-icon');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('displays with one avatar and no left icon', () => {
+    const props = {
+      ...defaultProps,
+      avatars: [{ asset: <Freeze /> }],
+      iconLeft: ArrowRight,
+    };
+
+    renderButton(props);
+
+    const avatar = screen.getByTestId('freeze-icon');
+
+    expect(avatar).toBeInTheDocument();
+    expect(screen.queryByTestId('arrow-left-icon')).not.toBeInTheDocument();
+  });
+
+  it('displays with two avatars', () => {
+    const props = {
+      ...defaultProps,
+      avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
+    };
+
+    renderButton(props);
+
+    const avatars = screen.getAllByTestId('freeze-icon');
+    avatars.forEach((avatar) => {
+      expect(avatar).toBeInTheDocument();
+    });
+  });
+
+  it('displays with avatar and icon', () => {
+    const props = {
+      ...defaultProps,
+      avatars: [{ asset: <Freeze /> }],
+      iconRight: ArrowRight,
+    };
+
+    renderButton(props);
+
+    const iconRight = screen.getByTestId('arrow-right-icon');
+    const avatar = screen.getByTestId('freeze-icon');
+
+    expect(avatar).toBeInTheDocument();
+    expect(iconRight).toHaveClass('wds-Button-icon');
+    expect(iconRight).toHaveClass('wds-Button-icon--right');
+  });
+
+  it('displays with a profile name', () => {
+    const props = {
+      ...defaultProps,
+      avatars: [{ profileName: 'John Doe' }],
+    };
+
+    renderButton(props);
+
+    const avatar = screen.getByText('JD');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('displays with a profile image', () => {
+    const props = {
+      ...defaultProps,
+      avatars: [{ imgSrc: '../avatar-rectangle-fox.webp' }],
+    };
+
+    renderButton(props);
+
+    const avatar = screen.getByRole('presentation');
+    expect(avatar).toHaveAttribute('src', '../avatar-rectangle-fox.webp');
+  });
+
+  it('displays with one icon', () => {
+    const props = {
+      ...defaultProps,
+      iconRight: ArrowRight,
+    };
+
+    renderButton(props);
+
+    const iconRight = screen.getByTestId('arrow-right-icon');
+    expect(iconRight).toHaveClass('wds-Button-icon');
+    expect(iconRight).toHaveClass('wds-Button-icon--right');
+  });
+
+  it('displays with two icons', () => {
+    const props = {
+      ...defaultProps,
+      iconRight: ArrowRight,
+      iconLeft: Freeze,
+    };
+
+    renderButton(props);
+
+    const iconRight = screen.getByTestId('arrow-right-icon');
+    const iconLeft = screen.getByTestId('freeze-icon');
+
+    expect(iconRight).toHaveClass('wds-Button-icon');
+    expect(iconRight).toHaveClass('wds-Button-icon--right');
+    expect(iconLeft).toHaveClass('wds-Button-icon');
+    expect(iconLeft).toHaveClass('wds-Button-icon--left');
+  });
+});

package/src/button/{Button.less → LegacyButton/Button.less}

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
 .np-btn {
   position: relative;

package/src/button/{Button.spec.tsx → LegacyButton/Button.spec.tsx}

@@ -1,10 +1,10 @@
 import { createRef } from 'react';
 
-import { ControlType, Type, Priority, Size } from '../common';
-import { render, screen, userEvent } from '../test-utils';
+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 messages from '../../i18n/commonMessages/Button.messages';
 import { ButtonReferenceType } from './Button';
 
 const { ACCENT, POSITIVE, NEGATIVE } = ControlType;

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

@@ -0,0 +1,224 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within, fn, expect } from '@storybook/test';
+import { useState } from 'react';
+
+import Button from '..';
+
+const withContainer = (Story: any) => (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'initial',
+      justifyContent: 'center',
+      flexFlow: 'column',
+      alignItems: 'center',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button/Legacy',
+  args: {
+    children: 'Button text',
+    loading: false,
+    type: undefined,
+    onClick: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
+    href: 'https://example.com',
+  },
+  argTypes: {
+    as: {
+      control: {
+        type: 'select',
+        options: ['button', 'a'],
+      },
+    },
+    type: {
+      type: {
+        name: 'enum',
+        value: ['accent', 'positive', 'negative'],
+      },
+    },
+    size: {
+      type: {
+        name: 'enum',
+        value: ['xs', 'sm', 'md', 'lg'],
+      },
+    },
+    priority: {
+      type: {
+        name: 'enum',
+        value: ['primary', 'secondary', 'tertiary'],
+      },
+    },
+    appearance: {
+      table: {
+        disable: true,
+      },
+    },
+    iconLeft: {
+      table: {
+        disable: true,
+      },
+    },
+    iconRight: {
+      table: {
+        disable: true,
+      },
+    },
+    avatars: {
+      table: {
+        disable: true,
+      },
+    },
+    'data-testid': {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [withContainer],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {};
+
+export const Secondary: Story = {
+  args: {
+    type: 'accent',
+    priority: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    type: 'accent',
+    priority: 'tertiary',
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    type: 'negative',
+    priority: 'primary',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const Variants: Story = {
+  render: () => {
+    return (
+      <div className="d-flex flex-column p-b-2 align-items-start">
+        <div className="d-flex flex-row p-b-2" style={{ gap: 'var(--size-16)' }}>
+          <Button type="accent" priority="primary">
+            Primary Accent
+          </Button>
+          <Button type="accent" priority="secondary">
+            Secondary Accent
+          </Button>
+          <Button type="accent" priority="tertiary">
+            Tertiary Accent
+          </Button>
+        </div>
+        <div className="d-flex flex-row p-b-2" style={{ gap: 'var(--size-16)' }}>
+          <Button type="positive" priority="primary">
+            Primary Positive
+          </Button>
+          <Button type="positive" priority="secondary">
+            Secondary Accent
+          </Button>
+        </div>
+        <div className="d-flex flex-row flex- p-b-2" style={{ gap: 'var(--size-16)' }}>
+          <Button type="negative" priority="primary">
+            Primary Negative
+          </Button>
+          <Button type="negative" priority="secondary">
+            Secondary Negative
+          </Button>
+        </div>
+        <div className="d-flex flex-row p-b-1" style={{ gap: 'var(--size-16)' }}>
+          <Button type="accent" priority="primary" disabled>
+            Button Disabled
+          </Button>
+          <Button type="accent" priority="secondary" disabled>
+            Button Disabled
+          </Button>
+          <Button type="accent" priority="tertiary" disabled>
+            Button Disabled
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+export const Focused: Story = {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await expect(button).toHaveTextContent('Focused!');
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [focused, setFocused] = useState(false);
+
+    return (
+      <Button {...args} onFocus={() => setFocused(true)}>
+        {focused ? 'Focused!' : 'Button text'}
+      </Button>
+    );
+  },
+};
+
+export const SocialMedia: 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>
+      </>
+    );
+  },
+};

package/src/button/{Button.tsx → LegacyButton/Button.tsx}

@@ -16,10 +16,10 @@ import {
   SizeSmall,
   SizeMedium,
   SizeLarge,
-} from '../common';
-import ProcessIndicator from '../processIndicator';
+} from '../../common';
+import ProcessIndicator from '../../processIndicator';
 
-import messages from '../i18n/commonMessages/Button.messages';
+import messages from '../../i18n/commonMessages/Button.messages';
 import { typeClassMap, priorityClassMap } from './classMap';
 import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
 
@@ -33,20 +33,22 @@ type CommonProps = {
   block?: boolean;
   disabled?: boolean;
   loading?: boolean;
+  /** @deprecated */
   type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
   priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
   size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
+  htmlType?: 'submit' | 'reset' | 'button'; // Add this line
 };
 
-type ButtonProps = CommonProps &
+export type ButtonProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
     as?: 'button';
-    htmlType?: 'submit' | 'reset' | 'button';
   };
 
-type AnchorProps = CommonProps &
+export type AnchorProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
     as?: 'a';
+    href?: string;
   };
 
 export type Props = ButtonProps | AnchorProps;
@@ -68,7 +70,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
       onClick,
       ...rest
     }: Props,
-    reference,
+    ref,
   ) => {
     const intl = useIntl();
 
@@ -132,7 +134,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
 
     return (
       <Element
-        ref={reference}
+        ref={ref as React.Ref<ButtonReferenceType>}
         className={classes}
         onClick={handleClick(onClick)}
         {...props}
@@ -153,4 +155,6 @@ const Button = forwardRef<ButtonReferenceType, Props>(
   },
 );
 
+Button.displayName = 'Button';
+
 export default Button;

package/src/button/{classMap.ts → LegacyButton/classMap.ts}

@@ -1,4 +1,4 @@
-import { ControlType, Priority } from '../common';
+import { ControlType, Priority } from '../../common';
 
 export const typeClassMap = {
   [ControlType.ACCENT]: 'btn-accent',

package/src/button/LegacyButton/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Button';
+
+export type { Props as ButtonProps } from './Button';

package/src/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
-import { ControlType, Priority, Size, Type } from '../../common';
-import { cleanup } from '../../test-utils';
+import { ControlType, Priority, Size, Type } from '../../../common';
+import { cleanup } from '../../../test-utils';
 
 import { establishNewPriority, establishNewType, logDeprecationNotices } from '.';
 

package/src/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.ts

@@ -1,5 +1,5 @@
-import { ControlType, Priority, Size, Type } from '../../common';
-import { logActionRequired, logActionRequiredIf } from '../../utilities';
+import { ControlType, Priority, Size, Type } from '../../../common';
+import { logActionRequired, logActionRequiredIf } from '../../../utilities';
 
 const deprecatedTypeMap: Record<Type, ControlType> = {
   [Type.PRIMARY]: ControlType.ACCENT,

package/src/button/index.ts

@@ -1,3 +1,2 @@
-export { default } from './Button';
-
-export type { Props as ButtonProps } from './Button';
+export { default } from './src';
+export * from './src';