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

package/src/i18n/fr.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "Échec du téléchargement. Veuillez réessayer",
   "neptune.Upload.csSuccessText": "Téléchargement terminé !",
   "neptune.Upload.csTooLargeMessage": "Veuillez fournir un fichier de moins de {maxSize} Mo",
-  "neptune.Upload.csTooLargeNoLimitMessage": "Veuillez fournir un fichier plus petit",
   "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
   "neptune.Upload.psButtonText": "Annuler",
   "neptune.Upload.psProcessingText": "Téléchargement...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
   "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
   "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
-  "neptune.Upload.usPlaceholderNoLimit": "Glissez et déposez un fichier",
   "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
   "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
   "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",

package/src/i18n/hu.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "Feltöltés sikertelen. Kérünk, próbáld újra",
   "neptune.Upload.csSuccessText": "Feltöltés sikeres",
   "neptune.Upload.csTooLargeMessage": "Kérünk, olyan fájlt küldj el, amely kisebb mint {maxSize}MB",
-  "neptune.Upload.csTooLargeNoLimitMessage": "Kérünk, egy kisebb fájlt küldj",
   "neptune.Upload.csWrongTypeMessage": "Nem támogatott fájltípus. Kérünk, próbáld újra másik fájllal",
   "neptune.Upload.psButtonText": "Mégsem",
   "neptune.Upload.psProcessingText": "Feltöltés...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "Vagy válaszd ki a fájlt",
   "neptune.Upload.usDropMessage": "Húzd ide a fájlokat a feltöltéshez",
   "neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize}MB méretű fájlt",
-  "neptune.Upload.usPlaceholderNoLimit": "Húzd át a fájlt",
   "neptune.UploadButton.allFileTypes": "Összes fájltípus",
   "neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
   "neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",

package/src/i18n/it.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "Caricamento fallito. Per favore riprova",
   "neptune.Upload.csSuccessText": "Caricamento completato!",
   "neptune.Upload.csTooLargeMessage": "Carica un file inferiore a {maxSize}MB",
-  "neptune.Upload.csTooLargeNoLimitMessage": "Fornisci un file più piccolo",
   "neptune.Upload.csWrongTypeMessage": "Formato del documento non supportato. Riprova con un formato diverso",
   "neptune.Upload.psButtonText": "Annulla",
   "neptune.Upload.psProcessingText": "Caricamento...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "O seleziona un documento",
   "neptune.Upload.usDropMessage": "Rilascia il documento per iniziare il caricamento",
   "neptune.Upload.usPlaceholder": "Trascina e rilascia un file inferiore a {maxSize}MB",
-  "neptune.Upload.usPlaceholderNoLimit": "Trascina e rilascia un file",
   "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
   "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
   "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",

package/src/i18n/ja.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
   "neptune.Upload.csSuccessText": "アップロードが完了しました。",
   "neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
-  "neptune.Upload.csTooLargeNoLimitMessage": "より小さいファイルをご提供ください",
   "neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
   "neptune.Upload.psButtonText": "キャンセルする",
   "neptune.Upload.psProcessingText": "アップロードしています…",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "またはファイルを選択する",
   "neptune.Upload.usDropMessage": "ファイルをドロップしてアップロードする",
   "neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルをドラッグ＆ドロップしてください",
-  "neptune.Upload.usPlaceholderNoLimit": "ファイルをドラッグ＆ドロップ",
   "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
   "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
   "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",

package/src/i18n/pl.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "Przesyłanie nie powiodło się. Proszę spróbować ponownie",
   "neptune.Upload.csSuccessText": "Przesyłanie zakończone!",
   "neptune.Upload.csTooLargeMessage": "Prosimy przesłać plik mniejszy niż {maxSize} MB",
-  "neptune.Upload.csTooLargeNoLimitMessage": "Prosimy przesłać mniejszy plik",
   "neptune.Upload.csWrongTypeMessage": "Nieobsługiwany typ pliku. Spróbuj ponownie z innym plikiem",
   "neptune.Upload.psButtonText": "Anuluj",
   "neptune.Upload.psProcessingText": "Przesyłanie...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "Lub wybierz plik",
   "neptune.Upload.usDropMessage": "Upuść plik, aby rozpocząć przesyłanie",
   "neptune.Upload.usPlaceholder": "Przeciągnij i upuść plik nie większy niż {maxSize} MB",
-  "neptune.Upload.usPlaceholderNoLimit": "Przeciągnij i upuść plik",
   "neptune.UploadButton.allFileTypes": "Wszystkie typy plików",
   "neptune.UploadButton.dropFiles": "Upuść plik, żeby rozpocząć przesyłanie",
   "neptune.UploadButton.instructions": "{fileTypes}, mniejsze niż {size}MB",

package/src/i18n/ro.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
   "neptune.Upload.csSuccessText": "Încărcare completă!",
   "neptune.Upload.csTooLargeMessage": "Te rugăm să furnizezi un fișier mai mic de {maxSize} MB",
-  "neptune.Upload.csTooLargeNoLimitMessage": "Te rugăm să furnizezi un fișier mai mic",
   "neptune.Upload.csWrongTypeMessage": "Tipul de fișier nu a fost acceptat. Te rugăm să încerci din nou cu un alt fișier",
   "neptune.Upload.psButtonText": "Anulează",
   "neptune.Upload.psProcessingText": "Se încarcă...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "Sau selectează un fișier",
   "neptune.Upload.usDropMessage": "Atașează fișierul pentru a începe încărcarea",
   "neptune.Upload.usPlaceholder": "Glisează și atașează un fișier mai mic de {maxSize} MB",
-  "neptune.Upload.usPlaceholderNoLimit": "Glisează și lipește un fișier",
   "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
   "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
   "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",

package/src/i18n/ru.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "Загрузка не удалась. Пожалуйста, попробуйте снова",
   "neptune.Upload.csSuccessText": "Загрузка завершена!",
   "neptune.Upload.csTooLargeMessage": "Пожалуйста, загрузите файл размером менее {maxSize} Мб",
-  "neptune.Upload.csTooLargeNoLimitMessage": "Пожалуйста, загрузите файл меньшего размера",
   "neptune.Upload.csWrongTypeMessage": "Тип файла не поддерживается. Пожалуйста, попробуйте еще раз с другим файлом",
   "neptune.Upload.psButtonText": "Отменить",
   "neptune.Upload.psProcessingText": "Загружаем...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "Или выберите файл",
   "neptune.Upload.usDropMessage": "Перетащите файл, чтобы начать загрузку",
   "neptune.Upload.usPlaceholder": "Перетащите файл размером не более {maxSize} Mб",
-  "neptune.Upload.usPlaceholderNoLimit": "Перетащите файл",
   "neptune.UploadButton.allFileTypes": "Все типы файлов",
   "neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
   "neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",

package/src/i18n/tr.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "Yükleme başarısız. Lütfen yine deneyin",
   "neptune.Upload.csSuccessText": "Yükleme tamamlandı!",
   "neptune.Upload.csTooLargeMessage": "Lütfen {maxSize} MB'den küçük bir dosya sağlayın",
-  "neptune.Upload.csTooLargeNoLimitMessage": "Lütfen daha küçük bir dosya gönderin",
   "neptune.Upload.csWrongTypeMessage": "Desteklenmeyen dosya biçimi. Lütfen başka bir dosyayla tekrar deneyin",
   "neptune.Upload.psButtonText": "İptal edin",
   "neptune.Upload.psProcessingText": "Yükleniyor...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "Veya bir dosya seçin",
   "neptune.Upload.usDropMessage": "Yüklemeyi başlatmak için dosyayı bırakın",
   "neptune.Upload.usPlaceholder": "{maxSize} MB'den küçük bir dosya sürükleyin ve bırakın",
-  "neptune.Upload.usPlaceholderNoLimit": "Dosyayı sürükleyip bırakın",
   "neptune.UploadButton.allFileTypes": "Tüm belge tipleri",
   "neptune.UploadButton.dropFiles": "Yüklemeyi başlatmak için dosyayı bırakın",
   "neptune.UploadButton.instructions": "{fileTypes}, en fazla {size}MB",

package/src/i18n/zh-CN.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "上传失败。请重试",
   "neptune.Upload.csSuccessText": "上传完毕！",
   "neptune.Upload.csTooLargeMessage": "请提供一个小于 {maxSize} MB 的文件",
-  "neptune.Upload.csTooLargeNoLimitMessage": "请提供更小的文件。",
   "neptune.Upload.csWrongTypeMessage": "不支持该文件类型，请试试其他文件",
   "neptune.Upload.psButtonText": "取消",
   "neptune.Upload.psProcessingText": "正在上传…",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "或选择文件",
   "neptune.Upload.usDropMessage": "拖放文件开始上传",
   "neptune.Upload.usPlaceholder": "拖放一个不超过 {maxSize} MB 的文件",
-  "neptune.Upload.usPlaceholderNoLimit": "拖放文件",
   "neptune.UploadButton.allFileTypes": "所有文件类型",
   "neptune.UploadButton.dropFiles": "拖放文件开始上传",
   "neptune.UploadButton.instructions": "{fileTypes}，小于 {size} MB",

package/src/i18n/zh-HK.json

@@ -45,7 +45,6 @@
   "neptune.Upload.csFailureText": "上載失敗，請重試。",
   "neptune.Upload.csSuccessText": "上載完成！",
   "neptune.Upload.csTooLargeMessage": "請提供一個小於{maxSize}MB的檔案",
-  "neptune.Upload.csTooLargeNoLimitMessage": "請提供較小的檔案",
   "neptune.Upload.csWrongTypeMessage": "不支持檔案類型，請使用其他檔案重試",
   "neptune.Upload.psButtonText": "取消",
   "neptune.Upload.psProcessingText": "上載中...",
@@ -53,7 +52,6 @@
   "neptune.Upload.usButtonText": "或者選擇一個檔案",
   "neptune.Upload.usDropMessage": "拖放檔案以開始上載",
   "neptune.Upload.usPlaceholder": "拖放一個不超過{maxSize}MB的檔案",
-  "neptune.Upload.usPlaceholderNoLimit": "拖放檔案",
   "neptune.UploadButton.allFileTypes": "所有檔案類型",
   "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
   "neptune.UploadButton.instructions": "{fileTypes}，小於{size}MB",

package/src/iconButton/IconButton.story.tsx

@@ -91,7 +91,7 @@ export const Basic: Story = {
           gridTemplate: `auto auto / repeat(6, min-content)`,
         }}
       >
-        {['Primary', 'Secondary', 'Tertiary', 'Text', 'Neg primary', 'Neg secondary'].map(
+        {['Primary', 'Secondary', 'Tertiary', 'Minimal', 'Neg primary', 'Neg secondary'].map(
           (variant) => (
             <Body type="body-default-bold">{variant}</Body>
           ),

package/src/iconButton/IconButton.tsx

@@ -12,7 +12,7 @@ export type Props = {
   Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &
   Pick<
     HTMLAttributes<HTMLDivElement>,
-    'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
+    'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
   >;
 
 const IconButton = forwardRef(function IconButton(

package/src/image/Image.tsx

@@ -10,6 +10,9 @@ export interface ImageProps {
   onLoad?: () => void;
   onError?: () => void;
   className?: string;
+  /**
+   * Specifies the [loading behavior of the image](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading).
+   */
   loading?: 'lazy' | 'eager';
   stretch?: boolean;
   role?: string;

package/src/image/index.ts

@@ -1 +1,2 @@
+export type { ImageProps } from './Image';
 export { default } from './Image';

package/src/index.ts

@@ -108,6 +108,7 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
+export type { ListItemProps, ListItemAdditionalInfoProps, ListItemCheckboxProps } from './listItem';
 
 /**
  * Components
@@ -209,6 +210,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';
 
 /**
  * Hooks

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

@@ -0,0 +1,56 @@
+import { render, screen } from '../../test-utils';
+import { ListItem, type Props as 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,195 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { action } from 'storybook/actions';
+import { lorem20 } from '../../test-utils';
+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 (
+      <ListItem
+        title="List item title"
+        subtitle="Subtitle goes here"
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.partialButton}
+        additionalInfo={<ListItem.AdditionalInfo {...props} action={previewAction} />}
+      />
+    );
+  },
+};
+
+/**
+ * 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 (
+      <ol className="list-unstyled">
+        <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} />}
+        />
+      </ol>
+    );
+  },
+};
+
+/**
+ * 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 (
+      <ol className="list-unstyled">
+        <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')();
+                },
+              }}
+            />
+          }
+        />
+      </ol>
+    );
+  },
+};

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, { 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 Props as 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();
+  });
+});