@transferwise/components 46.103.1 → 46.105.0

package/src/iconButton/iconButton.spec.tsx

@@ -0,0 +1,31 @@
+import IconButton from './IconButton';
+import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import { Edit } from '@transferwise/icons';
+
+mockMatchMedia();
+
+describe('IconButton', () => {
+  describe('onClick', () => {
+    it('should respect onClick if rendered as HTML button', async () => {
+      const handleClick = jest.fn();
+      render(
+        <IconButton onClick={handleClick}>
+          <Edit />
+        </IconButton>,
+      );
+      await userEvent.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should respect onClick if rendered as HTML anchor', async () => {
+      const handleClick = jest.fn();
+      render(
+        <IconButton href="#target" onClick={handleClick}>
+          <Edit />
+        </IconButton>,
+      );
+      await userEvent.click(screen.getByRole('link'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/index.ts

@@ -31,6 +31,7 @@ export type { DefinitionListProps, DefinitionListDefinition } from './definition
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
 export type { DividerProps } from './divider';
+export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
@@ -108,6 +109,20 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
+export type {
+  ListItemProps,
+  ListItemSwitchProps,
+  ListItemRadioProps,
+  ListItemPromptProps,
+  ListItemNavigationProps,
+  ListItemImageProps,
+  ListItemIconButtonProps,
+  ListItemAdditionalInfoProps,
+  ListItemButtonProps,
+  ListItemCheckboxProps,
+  ListItemAvatarLayoutProps,
+  ListItemAvatarViewProps,
+} from './listItem';
 export type { ListProps } from './list';
 
 /**
@@ -210,6 +225,7 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
+export { default as ListItem } from './listItem';
 export { default as List } from './list';
 
 /**

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -10,7 +10,7 @@ import LegacyListItem from '.';
 
 export default {
   component: LegacyListItem,
-  title: 'Other/LegacyListItem',
+  title: 'Content/LegacyListItem',
 };
 
 const Template = ({

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -6,7 +6,8 @@ import List from '../list';
 
 export default {
   component: LegacyListItem,
-  title: 'Other/LegacyListItem/tests',
+  tags: ['!autodocs'],
+  title: 'Content/LegacyListItem/tests',
 };
 
 export const LongText = () => {

package/src/list/List.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import LegacyListItem from '../legacylistItem';
+import ListItem from '../listItem';
 import List from './List';
 
 export default {
@@ -13,8 +13,18 @@ type Story = StoryObj<typeof List>;
 export const Basic: Story = {
   render: (args) => (
     <List {...args}>
-      <LegacyListItem title="First item" value="This is the first item." />
-      <LegacyListItem title="Second item" value="This is the second item." />
+      <ListItem
+        as={args.as === 'div' ? 'div' : undefined}
+        title="First item"
+        subtitle="This is the first item."
+        media={<ListItem.AvatarView />}
+      />
+      <ListItem
+        as={args.as === 'div' ? 'div' : undefined}
+        title="Second item"
+        subtitle="This is the second item."
+        media={<ListItem.AvatarView />}
+      />
     </List>
   ),
 };

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.spec.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '../../test-utils';
+import { ListItem, type ListItemProps } from '../ListItem';
+
+describe('ListItem.AdditionalInfo', () => {
+  const renderWithInfo = (info: ListItemProps['additionalInfo']) =>
+    render(<ListItem title="Test title" subtitle="Test subtitle" additionalInfo={info} />);
+
+  it('renders children content', () => {
+    renderWithInfo(
+      <ListItem.AdditionalInfo>Additional information content</ListItem.AdditionalInfo>,
+    );
+    expect(screen.getByText('Additional information content')).toBeInTheDocument();
+  });
+
+  it('renders action button when onClick provided', () => {
+    const handleActionClick = jest.fn();
+    renderWithInfo(
+      <ListItem.AdditionalInfo action={{ label: 'Learn more', onClick: handleActionClick }}>
+        Additional info
+      </ListItem.AdditionalInfo>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Learn more' })).toBeInTheDocument();
+  });
+
+  it('renders action link with href when provided', () => {
+    renderWithInfo(
+      <ListItem.AdditionalInfo action={{ label: 'Learn more', href: '/learn' }}>
+        Additional info
+      </ListItem.AdditionalInfo>,
+    );
+
+    const actionLink = screen.getByRole('link', { name: 'Learn more' });
+    expect(actionLink).toBeInTheDocument();
+    expect(actionLink).toHaveAttribute('href', '/learn');
+  });
+
+  it('renders action link with target when provided', () => {
+    renderWithInfo(
+      <ListItem.AdditionalInfo action={{ label: 'Learn more', href: '/learn', target: '_blank' }}>
+        Additional info
+      </ListItem.AdditionalInfo>,
+    );
+
+    const actionLink = screen.getByRole('link', { name: 'Learn more (opens in new tab)' });
+    expect(actionLink).toBeInTheDocument();
+    expect(actionLink).toHaveAttribute('target', '_blank');
+  });
+
+  it('does not render action when not provided', () => {
+    renderWithInfo(<ListItem.AdditionalInfo>Additional info only</ListItem.AdditionalInfo>);
+
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx

@@ -0,0 +1,198 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { action } from 'storybook/actions';
+import { lorem20 } from '../../test-utils';
+import List from '../../list';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../_stories/subcomponents';
+import { disableControls } from '../_stories/helpers';
+import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
+
+/**
+ * Use additional information to add extra details that help make the information clearer for users. Use additional information only after you've used the subtitle.
+ *
+ * Refer to the [design documentation](https://wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
+ */
+export default {
+  component: ListItem.AdditionalInfo,
+  title: 'Content/ListItem/ListItem.AdditionalInfo',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    children: lorem20,
+  },
+  argTypes: {
+    children: {
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    action: {
+      table: {
+        type: { summary: `{ label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>` },
+      },
+    },
+  },
+} satisfies Meta<ListItemAdditionalInfoProps>;
+
+type Story = StoryObj<ListItemAdditionalInfoProps>;
+
+/**
+ * Convenience controls for previewing rich markup,
+ * not otherwise possible via Storybook
+ */
+type PreviewStoryArgs = ListItemAdditionalInfoProps & {
+  previewAction?: string | ListItemAdditionalInfoProps['action'];
+};
+
+const previewArgGroup = {
+  category: 'Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const previewArgTypes = {
+  previewAction: {
+    name: 'Preview `action`',
+    control: 'radio',
+    options: ['unset (undefined)', 'link', 'button'],
+    mapping: {
+      'unset (undefined)': undefined,
+      link: {
+        label: 'Details about the subject.',
+        href: 'https://wise.com',
+        target: '_blank',
+      },
+      button: {
+        label: 'Details about the subject.',
+        onClick: fn(),
+      },
+    },
+    table: previewArgGroup,
+  },
+} as const;
+
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  tags: ['!autodocs'],
+  argTypes: previewArgTypes,
+  args: {
+    children: lorem20,
+    previewAction: 'link',
+  },
+  render: (args: PreviewStoryArgs) => {
+    const { previewAction, ...props } = args as {
+      previewAction: ListItemAdditionalInfoProps['action'];
+      props: ListItemAdditionalInfoProps;
+    };
+
+    return (
+      <List>
+        <ListItem
+          title="List item title"
+          subtitle="Subtitle goes here"
+          media={MEDIA.avatarSingle}
+          control={CONTROLS.partialButton}
+          additionalInfo={<ListItem.AdditionalInfo {...props} action={previewAction} />}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * Fully interactive ListItems do not allow for any nested links or inline buttons as that would fail accessibility compliance.
+ *
+ * Non-interactive or partially-interactive ListItems allow appending a single link or inline button via `action` prop. The restriction has been introduced to ensure that the ListItem remains accessible and adheres to the vendors' best practices for mobile platforms.
+ */
+export const Interactivity: Story = {
+  args: {
+    action: {
+      label: 'Details about the subject.',
+      href: 'https://wise.com',
+      target: '_blank',
+    },
+  },
+  argTypes: disableControls()(['action']),
+  render: (args: ListItemAdditionalInfoProps) => {
+    return (
+      <List>
+        <ListItem
+          title="Fully interactive ListItem"
+          subtitle="Subtitle goes here"
+          media={MEDIA.avatarSingle}
+          control={CONTROLS.button}
+          additionalInfo={<ListItem.AdditionalInfo {...args} action={undefined} />}
+        />
+
+        <ListItem
+          title="Partially interactive ListItem"
+          subtitle="Subtitle goes here"
+          media={MEDIA.avatarSingle}
+          control={CONTROLS.partialButton}
+          additionalInfo={<ListItem.AdditionalInfo {...args} />}
+        />
+
+        <ListItem
+          title="Non-interactive ListItem"
+          subtitle="Subtitle goes here"
+          media={MEDIA.avatarSingle}
+          additionalInfo={<ListItem.AdditionalInfo {...args} />}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * Interactive `ListItem.AdditionalInfo` allows for 2 types of actions: a link or a button.
+ */
+export const Actions: Story = {
+  argTypes: disableControls()(['action']),
+  render: (args: ListItemAdditionalInfoProps) => {
+    return (
+      <List>
+        <ListItem
+          title="Partially interactive ListItem"
+          subtitle="Subtitle goes here"
+          media={MEDIA.avatarSingle}
+          control={CONTROLS.partialButton}
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              {...args}
+              action={{
+                label: 'I am a link.',
+                href: 'https://wise.com',
+                target: '_blank',
+              }}
+            />
+          }
+        />
+
+        <ListItem
+          title="Partially interactive ListItem"
+          subtitle="Subtitle goes here"
+          media={MEDIA.avatarSingle}
+          control={CONTROLS.partialButton}
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              {...args}
+              action={{
+                label: 'I am a button.',
+                onClick: () => {
+                  action('Button clicked')();
+                },
+              }}
+            />
+          }
+        />
+      </List>
+    );
+  },
+};

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren, useContext } from 'react';
+import { ListItemContext, type ListItemContextData } from '../ListItemContext';
+import Body from '../../body';
+import Link, { type LinkProps } from '../../link';
+import { Typography } from '../../common';
+
+export type ListItemAdditionalInfoProps = PropsWithChildren<{
+  /**
+   * Props object to be passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs) component.
+   */
+  action?: { label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>;
+}>;
+
+export const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {
+  const { ids } = useContext<ListItemContextData>(ListItemContext);
+
+  return (
+    <Body
+      type={Typography.BODY_DEFAULT}
+      id={ids.additionalInfo}
+      className="wds-list-item-additional-info"
+    >
+      {children}
+      {action ? (
+        <>
+          {' '}
+          <Link href={action.href} target={action.target} onClick={action.onClick}>
+            {action.label}
+          </Link>
+        </>
+      ) : null}
+    </Body>
+  );
+};
+
+AdditionalInfo.displayName = 'ListItem.AdditionalInfo';

package/src/listItem/AdditionalInfo/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
+export { AdditionalInfo } from './ListItemAdditionalInfo';

package/src/listItem/AvatarLayout/ListItemAvatarLayout.spec.tsx

@@ -0,0 +1,59 @@
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import { ListItem, type ListItemProps } from '../ListItem';
+
+mockMatchMedia();
+
+const avatars = [
+  { imgSrc: 'avatar1.jpg', profileName: 'User 1' },
+  { imgSrc: 'avatar2.jpg', profileName: 'User 2' },
+];
+
+const renderWithMedia = (media: ListItemProps['media']) =>
+  render(<ListItem title="Test Title" media={media} />);
+
+describe('ListItem.AvatarLayout', () => {
+  it('applies custom className alongside default class', () => {
+    renderWithMedia(
+      <ListItem.AvatarLayout
+        className="custom-class"
+        role="group"
+        aria-label="Custom avatar group"
+        avatars={avatars}
+      />,
+    );
+
+    expect(screen.getByRole('group', { name: 'Custom avatar group' })).toHaveClass('custom-class');
+  });
+
+  it('renders both avatars', () => {
+    renderWithMedia(<ListItem.AvatarLayout avatars={avatars} />);
+
+    const images = screen.getAllByRole('presentation');
+    expect(images).toHaveLength(avatars.length);
+    expect(images[0]).toHaveAttribute('src', avatars[0].imgSrc);
+    expect(images[1]).toHaveAttribute('src', avatars[1].imgSrc);
+  });
+
+  it('renders with single avatar', () => {
+    renderWithMedia(<ListItem.AvatarLayout avatars={[avatars[0]]} />);
+    expect(screen.getByRole('presentation')).toHaveAttribute('src', avatars[0].imgSrc);
+  });
+
+  it('handles empty avatars array', () => {
+    renderWithMedia(<ListItem.AvatarLayout avatars={[]} />);
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('supports accessibility props', () => {
+    renderWithMedia(<ListItem.AvatarLayout aria-label="User avatars" avatars={avatars} />);
+    expect(screen.getByLabelText('User avatars')).toBeInTheDocument();
+  });
+
+  it('passes through role', () => {
+    renderWithMedia(
+      <ListItem.AvatarLayout role="group" aria-label="Avatar group" avatars={avatars} />,
+    );
+
+    expect(screen.getByRole('group', { name: 'Avatar group' })).toBeInTheDocument();
+  });
+});

package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx

@@ -0,0 +1,124 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Flag } from '@wise/art';
+import { lorem10 } from '../../test-utils';
+import { ListItem } from '../ListItem';
+import List from '../../list';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+} from '../_stories/subcomponents';
+import { disableControls } from '../_stories/helpers';
+import type { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';
+
+export default {
+  component: ListItem.AvatarLayout,
+  title: 'Content/ListItem/ListItem.AvatarLayout',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    avatars: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="eur" /> }],
+    orientation: 'horizontal',
+    size: 48,
+  },
+  argTypes: {
+    avatars: {
+      description: 'Array of avatar objects with asset and optional styling properties',
+      table: {
+        type: { summary: 'SingleAvatarType[]' },
+      },
+    },
+    orientation: {
+      control: 'inline-radio',
+      options: ['horizontal', 'diagonal'],
+      description: 'Layout orientation for multiple avatars',
+    },
+    size: {
+      control: 'select',
+      options: [32, 40, 48, 56, 72],
+      description: 'Size of the avatar layout',
+    },
+  },
+} satisfies Meta<ListItemAvatarLayoutProps>;
+
+type Story = StoryObj<ListItemAvatarLayoutProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ListItemAvatarLayoutProps) => {
+    return (
+      <List>
+        <ListItem
+          title="Transfer from GBP to EUR"
+          subtitle="Currency exchange"
+          media={<ListItem.AvatarLayout {...args} />}
+          control={CONTROLS.iconButton}
+          additionalInfo={INFO.nonInteractive}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * AvatarLayout supports two orientations: horizontal (default) and diagonal. <br />
+ * Please refer to the [design documentation](https://wise.design/components/avatar#double) for more details.
+ */
+export const Orientations: Story = {
+  argTypes: disableControls()(['orientation']),
+  render: (args) => {
+    return (
+      <List>
+        <ListItem
+          title="Horizontal orientation"
+          subtitle={lorem10}
+          media={<ListItem.AvatarLayout {...args} orientation="horizontal" />}
+          control={CONTROLS.iconButton}
+        />
+
+        <ListItem
+          title="Diagonal orientation"
+          subtitle={lorem10}
+          media={<ListItem.AvatarLayout {...args} orientation="diagonal" />}
+          control={CONTROLS.iconButton}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * AvatarLayout supports various sizes to fit different list item contexts.
+ */
+export const Sizes: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  argTypes: disableControls()(['size', 'orientation']),
+  render: (args) => {
+    const sizes = [32, 40, 48, 56, 72] as const;
+    const orientations = ['horizontal', 'diagonal'] as const;
+
+    return (
+      <List>
+        {orientations.map((orientation) =>
+          sizes.map((size) => (
+            <ListItem
+              key={`${orientation}-${size}`}
+              title={`Size ${size}`}
+              subtitle={lorem10}
+              media={<ListItem.AvatarLayout {...args} size={size} orientation={orientation} />}
+              control={CONTROLS.iconButton}
+            />
+          )),
+        )}
+      </List>
+    );
+  },
+};

package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx

@@ -0,0 +1,27 @@
+import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
+import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia';
+
+type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
+
+export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
+
+/**
+ * This component allows for rendering 2 avatars. It's a thin wrapper around the
+ * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only
+ * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />
+ * <br />
+ * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
+ */
+export const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {
+  useListItemMedia(size);
+
+  return (
+    <AvatarLayoutComp
+      {...props}
+      size={size}
+      className={clsx('wds-list-item-media-avatar-layout', className)}
+    />
+  );
+};
+AvatarLayout.displayName = 'ListItem.AvatarLayout';

package/src/listItem/AvatarLayout/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';
+export { AvatarLayout } from './ListItemAvatarLayout';