@transferwise/components 0.0.0-experimental-751dc12 → 0.0.0-experimental-4341b9c

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

@@ -1,250 +0,0 @@
-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

@@ -1,338 +0,0 @@
-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 { SB_LIST_ITEM_CONTROLS as CONTROLS, SB_LIST_ITEM_MEDIA as MEDIA } from './subcomponents';
-import portraitImage from './images/portrait.svg';
-import landscapeImage from './images/landscape.svg';
-import type { ListItemButtonProps } from '../Button';
-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;
-                }
-              `,
-            }}
-          />
-        )}
-        <Story />
-      </>
-    ),
-  ],
-  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 (
-      <ol className="list-unstyled">
-        {instances.map((itemProps, index) => (
-          <ListItem
-            key={`landscape-${index}`}
-            {...itemProps}
-            media={<ListItem.Image size={size} src={landscapeImage} alt="landscape image" />}
-          />
-        ))}
-        {instances.map((itemProps, index) => (
-          <ListItem
-            key={`portrait-${index}`}
-            {...itemProps}
-            media={<ListItem.Image size={size} src={portraitImage} alt="portrait image" />}
-          />
-        ))}
-      </ol>
-    );
-  },
-};
-
-export const ImageAlignment = ImageAlignmentStory;