@transferwise/components 0.0.0-experimental-e295338 → 0.0.0-experimental-424b5be

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

@@ -0,0 +1,314 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import Button from '../../src';
+import { Freeze, ArrowRight } from '@transferwise/icons';
+
+const withContainer = (Story: any) => (
+  <div style={{ display: 'flex', flexDirection: 'initial', justifyContent: 'center' }}>
+    <Story />
+  </div>
+);
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button',
+  argTypes: {
+    as: {
+      type: {
+        name: 'enum',
+        value: ['button', 'a'],
+      },
+    },
+    size: {
+      type: {
+        name: 'enum',
+        value: ['sm', 'md', 'lg'],
+      },
+    },
+    href: {
+      type: {
+        name: 'string',
+      },
+    },
+    priority: {
+      type: {
+        name: 'enum',
+        value: ['primary', 'secondary', 'tertiary', 'minimal'],
+      },
+    },
+    appearance: {
+      type: {
+        name: 'enum',
+        value: ['default', 'negative'],
+      },
+    },
+    iconLeft: {
+      control: 'object',
+    },
+    iconRight: {
+      control: 'object',
+    },
+    avatars: {
+      control: 'object',
+    },
+    htmlType: {
+      table: {
+        disable: true,
+      },
+    },
+    'data-testid': {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    children: 'Button text',
+    as: 'button',
+    href: undefined,
+    disabled: false,
+    loading: false,
+    size: 'md',
+    iconLeft: undefined,
+    iconRight: undefined,
+    priority: 'primary',
+    appearance: 'default',
+    avatars: undefined,
+    useNewButton: true,
+    onClick: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
+    onKeyDown: fn(),
+    onMouseEnter: fn(),
+    onMouseLeave: fn(),
+  },
+  tags: ['autodocs'],
+  decorators: [withContainer],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A basic example of the Button component.',
+      },
+    },
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    priority: 'secondary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with secondary priority.',
+      },
+    },
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    priority: 'tertiary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with tertiary priority.',
+      },
+    },
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    priority: 'minimal',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with minimal priority.',
+      },
+    },
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    appearance: 'negative',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with negative appearance.',
+      },
+    },
+  },
+};
+
+export const NegativeSecondary: Story = {
+  args: {
+    appearance: 'negative',
+    priority: 'secondary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with negative appearance and secondary priority.',
+      },
+    },
+  },
+};
+
+export const AsAnchor: Story = {
+  args: {
+    as: 'a',
+    href: 'https://wise.com',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button rendered as an anchor element.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A disabled Button.',
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button in a loading state.',
+      },
+    },
+  },
+};
+
+export const SizeSmall: Story = {
+  args: {
+    size: 'sm',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A small Button.',
+      },
+    },
+  },
+};
+
+export const SizeLarge: Story = {
+  args: {
+    size: 'lg',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A large Button.',
+      },
+    },
+  },
+};
+
+export const DisplayBlock: Story = {
+  args: {
+    block: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button that takes up the full width of its container.',
+      },
+    },
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    iconRight: ArrowRight,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A Button with an icon on the right. Can also use `iconLeft` to place the icon on the left or have both at the same time.',
+      },
+    },
+  },
+};
+
+export const WithAvatars: Story = {
+  args: {
+    avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A Button with avatars. Will supersed any `iconLeft` property and will always render avatars.',
+      },
+    },
+  },
+};
+
+export const WithProfileName: Story = {
+  args: {
+    avatars: [{ profileName: 'John Doe' }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with a Profile name.',
+      },
+    },
+  },
+};
+
+export const WithProfileImage: Story = {
+  args: {
+    avatars: [{ imgSrc: '../avatar-rectangle-fox.webp' }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with a Profile image.',
+      },
+    },
+  },
+};
+
+export const WithAvatarAndIcon: Story = {
+  args: {
+    avatars: [{ asset: <Freeze /> }],
+    iconRight: ArrowRight,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with an avatar and an icon.',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,288 @@
+import { useState } from 'react';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react';
+import Button from '../../src';
+import { Freeze } from '@transferwise/icons';
+
+const meta = {
+  title: 'Actions/Button/Tests',
+  component: Button,
+  args: {
+    children: 'Button text',
+    as: 'button',
+  },
+} satisfies Meta<typeof Button>;
+
+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, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Click the button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text changes to "Clicked!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Clicked!'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [clicked, setClicked] = useState(false);
+
+    return (
+      <Button {...args} onClick={() => setClicked(true)}>
+        {clicked ? 'Clicked!' : 'Button text'}
+      </Button>
+    );
+  },
+};
+
+export const FocusInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus and text changes to "Focused!"', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+      await waitFor(async () => 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 BlurInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+    });
+
+    await step('Tab away from the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button loses focus and text changes to "Blurred!"', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Blurred!'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [blurred, setBlurred] = useState(false);
+
+    return (
+      <Button {...args} onBlur={() => setBlurred(true)}>
+        {blurred ? 'Blurred!' : 'Button text'}
+      </Button>
+    );
+  },
+};
+
+export const MouseEnterInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text changes to "Hovered!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Hovered!'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [hovered, setHovered] = useState(false);
+
+    return (
+      <Button {...args} onMouseEnter={() => setHovered(true)}>
+        {hovered ? 'Hovered!' : 'Button text'}
+      </Button>
+    );
+  },
+};
+
+export const MouseLeaveInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Unhover the button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text changes to "Left!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Left!'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [left, setLeft] = useState(false);
+
+    return (
+      <Button {...args} onMouseLeave={() => setLeft(true)}>
+        {left ? 'Left!' : 'Button text'}
+      </Button>
+    );
+  },
+};
+
+export const KeyDownInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Press Enter key on the button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text changes to "Key Pressed!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Key Pressed!'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [keyPressed, setKeyPressed] = useState(false);
+
+    return (
+      <Button {...args} onKeyDown={() => setKeyPressed(true)}>
+        {keyPressed ? 'Key Pressed!' : 'Button text'}
+      </Button>
+    );
+  },
+};
+export const DisabledClickInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Click the disabled button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    return <Button {...args} disabled />;
+  },
+};
+
+export const DisabledFocusInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    return <Button {...args} disabled />;
+  },
+};
+
+export const DisabledBlurInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    return <Button {...args} disabled />;
+  },
+};
+
+export const DisabledKeyDownInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Press Enter key on the disabled button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    return <Button {...args} disabled />;
+  },
+};
+
+export const DisabledMouseEnterInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Hover over the disabled button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    return <Button {...args} disabled />;
+  },
+};
+
+export const DisabledMouseLeaveInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    await step('Unhover the disabled button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    return <Button {...args} disabled />;
+  },
+};