@transferwise/components 0.0.0-experimental-29d0f94 → 0.0.0-experimental-4b1de0a

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,353 @@
+import { Fragment } from 'react';
+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 { lorem10, lorem20, lorem5 } from '../../test-utils';
+import portraitImage from '../../test-utils/assets/placeholder-landscape.svg';
+import landscapeImage from '../../test-utils/assets/placeholder-portrait.svg';
+import { SB_LIST_ITEM_CONTROLS as CONTROLS, SB_LIST_ITEM_MEDIA as MEDIA } from './subcomponents';
+import { ListItemMediaSize } from '../ListItemContext';
+
+const withSizedContainer = (width: number) => (Story: any) => (
+  <ol
+    className="list-unstyled"
+    style={{
+      width,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 16,
+    }}
+  >
+    <Story />
+  </ol>
+);
+
+export default {
+  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)],
+};
+
+export const GapsBetweenItems: Story = {
+  render: () => {
+    const props = {
+      title: lorem5,
+      subtitle: lorem10,
+      media: MEDIA.image,
+      control: CONTROLS.switch,
+    };
+    return (
+      <ol className="list-unstyled">
+        <ListItem {...props} />
+        <ListItem {...props} spotlight="active" />
+        <ListItem {...props} spotlight="inactive" />
+        <ListItem {...props} />
+      </ol>
+    );
+  },
+};
+
+type PreviewStoryArgs = ItemProps & {
+  previewImageSize: ListItemMediaSize;
+  previewWithLineGuides: boolean;
+  previewPrompt: boolean | ItemProps['prompt'];
+};
+
+const previewArgGroup = {
+  category: 'Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const previewArgTypes = {
+  previewImageSize: {
+    options: [32, 40, 48, 56, 72],
+    control: {
+      type: 'inline-radio',
+    },
+    name: 'Preview with image size',
+    table: previewArgGroup,
+  },
+  previewWithLineGuides: {
+    control: {
+      type: 'boolean',
+    },
+    name: 'Preview with line guides',
+    table: previewArgGroup,
+  },
+  previewPrompt: {
+    control: {
+      type: 'boolean',
+    },
+    mapping: {
+      true: <ListItem.Prompt sentiment="positive">This is a prompt</ListItem.Prompt>,
+      false: null,
+    },
+    name: 'Preview with `prompt`',
+    table: previewArgGroup,
+  },
+} as const;
+
+const getPropsForPreview = (args: PreviewStoryArgs) => {
+  const { previewImageSize, previewWithLineGuides, previewPrompt, ...props } = args as {
+    previewImageSize: ListItemMediaSize;
+    previewWithLineGuides: boolean;
+    previewPrompt: boolean | ItemProps['prompt'];
+    title: ItemProps['title'];
+    subtitle: ItemProps['subtitle'];
+    [key: string]: any;
+  };
+
+  return [
+    {
+      ...props,
+      prompt: previewPrompt,
+    },
+    {
+      previewImageSize,
+      previewWithLineGuides,
+    },
+  ] as const;
+};
+
+// Create a completely untyped story object
+const ImageAlignmentStory: StoryObj<PreviewStoryArgs> = {
+  parameters: {
+    controls: { disable: false },
+  },
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    previewImageSize: 48,
+    previewWithLineGuides: true,
+    previewPrompt: false,
+  },
+  argTypes: previewArgTypes,
+  decorators: [
+    (Story: any, { args }: { args: PreviewStoryArgs }) => (
+      <>
+        {args.previewWithLineGuides && (
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `
+                .wds-list-item-media-image-wrapper::before{
+                  content: '';
+                  border: 1px dashed blue;
+                  position: absolute;
+                  width: ${args.previewImageSize}px;
+                  height: ${args.previewImageSize}px;
+                }
+                .wds-list-item-media-image-wrapper::after {
+                  content: '';
+                  border: 1px dashed red;
+                  position: absolute;
+                  left: 0;
+                  width: 100%;
+                  height: ${args.previewImageSize}px;
+                }
+              `,
+            }}
+          />
+        )}
+        <ol
+          className="list-unstyled"
+          style={{ display: 'grid', gridTemplateColumns: '340px 400px', gap: '16px' }}
+        >
+          <Story />
+        </ol>
+      </>
+    ),
+  ],
+  render: (args: PreviewStoryArgs) => {
+    const [{ title, subtitle, ...props }, previewProps] = getPropsForPreview(args);
+
+    const additionalInfo = <ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>;
+    const control = CONTROLS.button;
+    const size = previewProps.previewImageSize;
+
+    const instances = [
+      { title, ...props },
+      { title, subtitle, ...props },
+      { title, subtitle, additionalInfo, ...props },
+      { title, control, ...props },
+      { title, subtitle, control, ...props },
+      { title, subtitle, additionalInfo, control, ...props },
+    ] as const;
+
+    return (
+      <>
+        {instances.map((itemProps, index) => (
+          <Fragment key={`landscape-${index}`}>
+            <ListItem
+              {...itemProps}
+              media={<ListItem.Image size={size} src={landscapeImage} alt="landscape image" />}
+            />
+            <ListItem
+              {...itemProps}
+              media={<ListItem.Image size={size} src={landscapeImage} alt="landscape image" />}
+            />
+          </Fragment>
+        ))}
+        {instances.map((itemProps, index) => (
+          <Fragment key={`portrait-${index}`}>
+            <ListItem
+              {...itemProps}
+              media={<ListItem.Image size={size} src={portraitImage} alt="portrait image" />}
+            />
+            <ListItem
+              {...itemProps}
+              media={<ListItem.Image size={size} src={portraitImage} alt="portrait image" />}
+            />
+          </Fragment>
+        ))}
+      </>
+    );
+  },
+};
+
+export const ImageAlignment = ImageAlignmentStory;