@transferwise/components 0.0.0-experimental-2242f8a → 0.0.0-experimental-5759f4d

package/src/listItem/_stories/ListItem.focus.test.story.tsx

@@ -0,0 +1,250 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import Link from '../../link';
+import { ListItem, Props as ItemProps } from '../ListItem';
+import { expect, userEvent, within, waitFor } from 'storybook/test';
+
+const waitForFocus = async (assertion: () => Promise<void>, timeout = 3000) => {
+  await waitFor(assertion, { timeout });
+};
+
+const waitForListItem = async (canvas: ReturnType<typeof within>, timeout = 3000) => {
+  await waitFor(
+    async () => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+      await expect(canvas.getByRole('listitem')).toBeInTheDocument();
+    },
+    { timeout },
+  );
+};
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/focus',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ItemProps>;
+type Story = StoryObj<ItemProps>;
+
+const title = {
+  full: 'Fully interactive',
+  partial: 'Partially interactive',
+};
+
+const subtitle = {
+  full: 'Whole item should be focusable, control should not.',
+  partial: 'Only control should be focusable, not whole item.',
+};
+
+const additionalInfo = {
+  static: (
+    <ListItem.AdditionalInfo>
+      Fully interactive ListItems don&apos;t allow any nested interactive elements like links or
+      buttons within AdditionalInfo.
+    </ListItem.AdditionalInfo>
+  ),
+  interactive: (
+    <ListItem.AdditionalInfo
+      action={{ label: 'appended to the end.', href: 'https://wise.com', target: '_blank' }}
+    >
+      This additional info has a focusable link
+    </ListItem.AdditionalInfo>
+  ),
+};
+
+const prompt = {
+  static: <ListItem.Prompt sentiment="positive">Non-interactive prompt.</ListItem.Prompt>,
+  interactive: (
+    <ListItem.Prompt sentiment="positive">
+      This prompt has a{' '}
+      <Link href="https://wise.com" target="_blank" rel="noreferrer">
+        single interactive element
+      </Link>{' '}
+      that spreads across the whole prompt area.
+    </ListItem.Prompt>
+  ),
+};
+
+const button = {
+  full: (
+    <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
+      Click me
+    </ListItem.Button>
+  ),
+  partial: (
+    <ListItem.Button partiallyInteractive priority="secondary-neutral" onClick={() => {}}>
+      Click me
+    </ListItem.Button>
+  ),
+};
+
+export const FullyInteractive: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+  },
+  render: () => (
+    <ListItem
+      title={title.full}
+      subtitle={subtitle.full}
+      additionalInfo={additionalInfo.static}
+      control={button.full}
+      prompt={prompt.static}
+    />
+  ),
+};
+
+export const FullyInteractiveFocusedOnPrompt: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('link', { name: /^single interactive element/ })).toHaveFocus();
+    });
+  },
+  render: () => (
+    <ListItem
+      title={title.full}
+      subtitle={subtitle.full}
+      additionalInfo={additionalInfo.static}
+      control={button.full}
+      prompt={prompt.interactive}
+    />
+  ),
+};
+
+export const PartiallyInteractiveFocusedOnControl: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+  },
+  render: () => (
+    <ListItem
+      title={title.partial}
+      subtitle={subtitle.partial}
+      additionalInfo={additionalInfo.interactive}
+      control={button.partial}
+      prompt={prompt.interactive}
+    />
+  ),
+};
+
+export const PartiallyInteractiveFocusedOnAdditionInfo: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('link', { name: /^appended to the end/ })).toHaveFocus();
+    });
+  },
+  render: () => (
+    <ListItem
+      title={title.partial}
+      subtitle={subtitle.partial}
+      additionalInfo={additionalInfo.interactive}
+      control={button.partial}
+      prompt={prompt.interactive}
+    />
+  ),
+};
+
+export const PartiallyInteractiveFocusedOnPrompt: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('link', { name: /^appended to the end/ })).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('link', { name: /^single interactive element/ })).toHaveFocus();
+    });
+  },
+  render: () => (
+    <ListItem
+      title={title.partial}
+      subtitle={subtitle.partial}
+      additionalInfo={additionalInfo.interactive}
+      control={button.partial}
+      prompt={prompt.interactive}
+    />
+  ),
+};
+
+export const FullyInteractiveDisabled: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).not.toHaveFocus();
+    });
+  },
+  render: () => (
+    <ListItem
+      disabled
+      title={title.full}
+      subtitle={subtitle.full}
+      additionalInfo={additionalInfo.static}
+      control={button.full}
+      prompt={prompt.static}
+    />
+  ),
+};
+
+export const PartiallyInteractiveDisabled: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForListItem(canvas);
+
+    await userEvent.tab();
+    await waitForFocus(async () => {
+      await expect(canvas.getByRole('button')).not.toHaveFocus();
+    });
+  },
+  render: () => (
+    <ListItem
+      disabled
+      title={title.partial}
+      subtitle={subtitle.partial}
+      additionalInfo={additionalInfo.interactive}
+      control={button.partial}
+      prompt={prompt.interactive}
+    />
+  ),
+};

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -0,0 +1,169 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Bank, FastFlag, MultiCurrency, Receipt, Savings } from '@transferwise/icons';
+import Link from '../../link';
+import { ListItem, Props as ItemProps } from '../ListItem';
+import { lorem5 } from '../../test-utils';
+
+const withSizedContainer = (width: number) => (Story: any) => (
+  <ol
+    className="list-unstyled"
+    style={{
+      width,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 16,
+    }}
+  >
+    <Story />
+  </ol>
+);
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/layout',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ItemProps>;
+type Story = StoryObj<ItemProps>;
+
+const variants = [
+  <ListItem
+    key="button"
+    title="Button only"
+    control={
+      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
+        Click me
+      </ListItem.Button>
+    }
+  />,
+  <ListItem
+    key="media"
+    title="With media"
+    subtitle="Short subtitle"
+    additionalInfo={<ListItem.AdditionalInfo>{lorem5}</ListItem.AdditionalInfo>}
+    media={
+      <ListItem.AvatarView>
+        <FastFlag />
+      </ListItem.AvatarView>
+    }
+  />,
+  <ListItem key="value" title="With value" valueTitle="100 GBP" valueSubtitle="100 USD" />,
+  <ListItem
+    key="prompt"
+    title="With prompt"
+    prompt={
+      <ListItem.Prompt sentiment="positive">
+        This is a prompt with <Link href="https://wise.com">a link</Link>.
+      </ListItem.Prompt>
+    }
+  />,
+  <ListItem
+    key="button-media"
+    title="Button + media"
+    media={
+      <ListItem.AvatarView>
+        <MultiCurrency />
+      </ListItem.AvatarView>
+    }
+    control={
+      <ListItem.Button priority="primary" onClick={() => {}}>
+        Action
+      </ListItem.Button>
+    }
+  />,
+  <ListItem
+    key="button-value"
+    title="Button + value"
+    valueTitle="42 EUR"
+    control={
+      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
+        Pay
+      </ListItem.Button>
+    }
+  />,
+  <ListItem
+    key="media-value"
+    valueColumnWidth={80}
+    title="Media + value"
+    subtitle="this column is 20% wide"
+    media={
+      <ListItem.AvatarView>
+        <Bank />
+      </ListItem.AvatarView>
+    }
+    valueTitle="1,000 USD"
+  />,
+  <ListItem
+    key="prompt-value"
+    title="Prompt + value"
+    valueTitle="10 GBP"
+    prompt={<ListItem.Prompt sentiment="warning">Warning prompt!</ListItem.Prompt>}
+  />,
+  <ListItem
+    key="media-prompt"
+    title="Media + prompt"
+    media={
+      <ListItem.AvatarView>
+        <Receipt />
+      </ListItem.AvatarView>
+    }
+    prompt={<ListItem.Prompt sentiment="positive">Discount available!</ListItem.Prompt>}
+  />,
+  <ListItem
+    key="most"
+    title="Everything but button"
+    subtitle="No control"
+    media={
+      <ListItem.AvatarView>
+        <Savings />
+      </ListItem.AvatarView>
+    }
+    valueTitle="999 GBP"
+    prompt={
+      <ListItem.Prompt sentiment="positive">
+        <Link href="https://wise.com">See details</Link>
+      </ListItem.Prompt>
+    }
+  />,
+  <ListItem
+    key="all"
+    title="All together"
+    subtitle="Everything in one"
+    media={
+      <ListItem.AvatarView>
+        <Savings />
+      </ListItem.AvatarView>
+    }
+    valueTitle="999 GBP"
+    prompt={
+      <ListItem.Prompt sentiment="positive">
+        <Link href="https://wise.com">See details</Link>
+      </ListItem.Prompt>
+    }
+    control={
+      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
+        Go
+      </ListItem.Button>
+    }
+  />,
+];
+
+export const Under320: Story = {
+  render: () => <>{variants}</>,
+  decorators: [withSizedContainer(320)],
+};
+
+export const Between321And399: Story = {
+  render: () => <>{variants}</>,
+  decorators: [withSizedContainer(360)],
+};
+
+export const Over400: Story = {
+  render: () => <>{variants}</>,
+  decorators: [withSizedContainer(400)],
+};