@transferwise/components 46.82.1 → 46.83.1

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -0,0 +1,230 @@
+import { useState } from 'react';
+import { userEvent, within, expect } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react';
+import PrimitiveButton from '..';
+
+const meta = {
+  title: 'Primitives/Button/Tests',
+  component: PrimitiveButton,
+  args: {
+    children: 'Button text',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PrimitiveButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+export const ClickInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+    await expect(button).toHaveTextContent('Clicked!');
+  },
+  render: function Render(args) {
+    const [clicked, setClicked] = useState(false);
+
+    return (
+      <PrimitiveButton {...args} onClick={() => setClicked(true)}>
+        {clicked ? 'Clicked!' : 'Button text'}
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const FocusInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    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) {
+    const [focused, setFocused] = useState(false);
+
+    return (
+      <PrimitiveButton {...args} onFocus={() => setFocused(true)}>
+        {focused ? 'Focused!' : 'Button text'}
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const BlurInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await userEvent.tab();
+    await expect(button).not.toHaveFocus();
+    await expect(button).toHaveTextContent('Blurred!');
+  },
+  render: function Render(args) {
+    const [blurred, setBlurred] = useState(false);
+
+    return (
+      <PrimitiveButton {...args} onBlur={() => setBlurred(true)}>
+        {blurred ? 'Blurred!' : 'Button text'}
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const MouseEnterInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.hover(button);
+    await expect(button).toHaveTextContent('Hovered!');
+  },
+  render: function Render(args) {
+    const [hovered, setHovered] = useState(false);
+
+    return (
+      <PrimitiveButton {...args} onMouseEnter={() => setHovered(true)}>
+        {hovered ? 'Hovered!' : 'Button text'}
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const MouseLeaveInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.unhover(button);
+    await expect(button).toHaveTextContent('Left!');
+  },
+  render: function Render(args) {
+    const [left, setLeft] = useState(false);
+
+    return (
+      <PrimitiveButton {...args} onMouseLeave={() => setLeft(true)}>
+        {left ? 'Left!' : 'Button text'}
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const KeyDownInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.type(button, '{enter}');
+    await expect(button).toHaveTextContent('Key Pressed!');
+  },
+  render: function Render(args) {
+    const [keyPressed, setKeyPressed] = useState(false);
+
+    return (
+      <PrimitiveButton {...args} onKeyDown={() => setKeyPressed(true)}>
+        {keyPressed ? 'Key Pressed!' : 'Button text'}
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const DisabledClickInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+    await expect(button).toHaveTextContent('Button text');
+  },
+  render: function Render(args) {
+    return (
+      <PrimitiveButton {...args} disabled>
+        Button text
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const DisabledFocusInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.tab();
+    await expect(button).not.toHaveFocus();
+  },
+  render: function Render(args) {
+    return (
+      <PrimitiveButton {...args} disabled>
+        Button text
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const DisabledBlurInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.tab();
+    await expect(button).not.toHaveFocus();
+  },
+  render: function Render(args) {
+    return (
+      <PrimitiveButton {...args} disabled>
+        Button text
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const DisabledKeyDownInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.type(button, '{enter}');
+    await expect(button).toHaveTextContent('Button text');
+  },
+  render: function Render(args) {
+    return (
+      <PrimitiveButton {...args} disabled>
+        Button text
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const DisabledMouseEnterInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.hover(button);
+    await expect(button).toHaveTextContent('Button text');
+  },
+  render: function Render(args) {
+    return (
+      <PrimitiveButton {...args} disabled>
+        Button text
+      </PrimitiveButton>
+    );
+  },
+};
+
+export const DisabledMouseLeaveInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.unhover(button);
+    await expect(button).toHaveTextContent('Button text');
+  },
+  render: function Render(args) {
+    return (
+      <PrimitiveButton {...args} disabled>
+        Button text
+      </PrimitiveButton>
+    );
+  },
+};

package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx

@@ -0,0 +1,114 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import PrimitiveButton from '..';
+import messages from '../../../i18n/commonMessages/Button.messages';
+import { render } from '../../../test-utils';
+
+describe('Button', () => {
+  const defaultProps = {
+    children: 'Click me',
+  };
+
+  const renderButton = (
+    props?: Partial<typeof defaultProps>,
+    locale = 'en',
+    localeMessages = messages,
+  ) => {
+    return render(
+      <PrimitiveButton {...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('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');
+  });
+});

package/src/primitives/index.ts

@@ -0,0 +1,14 @@
+export { default as PrimitiveButton } from './PrimitiveButton';
+export { default as PrimitiveAnchor } from './PrimitiveAnchor';
+
+export type { BasePrimitiveProps, StyleProp } from './types';
+export type {
+  PrimitiveButtonProps,
+  PrimitiveButtonAttributes,
+  PrimitiveButtonElementRef,
+} from './PrimitiveButton';
+export type {
+  PrimitiveAnchorProps,
+  PrimitiveAnchorAttributes,
+  PrimitiveAnchorElementRef,
+} from './PrimitiveAnchor';

package/src/primitives/types.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from 'react';
+
+export type BasePrimitiveProps = {
+  /**
+   * Additional CSS classes to apply.
+   */
+  className?: string;
+
+  /**
+   * Unique identifier for the component.
+   */
+  id?: string;
+
+  /**
+   * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+   */
+  testId?: string;
+
+  /**
+   * `data-testid` is strictly controlled through the `testId` prop.
+   * This lets consumers know that this data attribute will not be applied.
+   */
+  'data-testid'?: never;
+
+  /**
+   * Accessible role.
+   */
+  role?: RoleProp['role'];
+};
+
+/**
+ * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+ * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
+ */
+export type StyleProp = Pick<HTMLAttributes<HTMLElement>, 'style'>;
+
+/**
+ * Accessible role.
+ */
+export type RoleProp = Pick<HTMLAttributes<HTMLElement>, 'role'>;

package/src/table/Table.tsx

@@ -41,6 +41,7 @@ const Table = ({
 }: TableProps) => {
   const { formatMessage } = useIntl();
   const { theme } = useTheme();
+  const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);
 
   const getRowLength = () => {
     const columnsLength = data?.headers?.length ?? 0;
@@ -124,9 +125,9 @@ const Table = ({
         >
           <div className="np-table-inner-container">
             <table className="np-table">
-              <thead role={loading ? 'presentation' : undefined}>
+              <thead aria-hidden={isEmptyHeader}>
                 <tr>
-                  {(loading ?? (data?.headers && !data?.headers.length)) ? (
+                  {isEmptyHeader ? (
                     <TableHeader />
                   ) : (
                     data?.headers?.map((headerItem: TableHeaderType, index) => (

package/src/test-utils/index.tsx

@@ -1,5 +1,6 @@
 import { ReactElement, FC } from 'react';
 import { render, renderHook } from '@testing-library/react';
+import { renderToString } from 'react-dom/server';
 import { userEvent } from '@testing-library/user-event';
 
 import { Provider } from '..';

package/build/button/Button.messages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.messages.js","sources":["../../src/button/Button.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  loadingAriaLabel: {\n    id: 'neptune.Button.loadingAriaLabel',\n    defaultMessage: 'loading',\n    description: 'Description of button while loading',\n  },\n});\n"],"names":["defineMessages","loadingAriaLabel","id"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,gBAAgB,EAAE;IAChBC,EAAE,EAAA,iCAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/button/Button.messages.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.messages.mjs","sources":["../../src/button/Button.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  loadingAriaLabel: {\n    id: 'neptune.Button.loadingAriaLabel',\n    defaultMessage: 'loading',\n    description: 'Description of button while loading',\n  },\n});\n"],"names":["defineMessages","loadingAriaLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,gBAAgB,EAAE;IAChBC,EAAE,EAAA,iCAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/types/button/Button.messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.messages.d.ts","sourceRoot":"","sources":["../../../src/button/Button.messages.ts"],"names":[],"mappings":";;;;;;;AAEA,wBAMG"}