@transferwise/components 46.103.1 → 46.104.0

package/build/types/listItem/_stories/subcomponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subcomponents.d.ts","sourceRoot":"","sources":["../../../../src/listItem/_stories/subcomponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,MAAM,uBAAuB,GAC/B,QAAQ,GACR,cAAc,GACd,eAAe,GACf,qBAAqB,GACrB,YAAY,GACZ,kBAAkB,GAClB,qBAAqB,GACrB,2BAA2B,GAC3B,mBAAmB,GACnB,yBAAyB,GACzB,4BAA4B,GAC5B,kCAAkC,GAClC,YAAY,GACZ,oBAAoB,GACpB,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,uBAAuB,EAAE,SAAS,CA0DnE,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;CAe/B,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAavB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;CAoBrB,CAAC"}

package/build/types/listItem/index.d.ts

@@ -0,0 +1,14 @@
+export type { ListItemProps } from './ListItem';
+export type { ListItemAdditionalInfoProps } from './AdditionalInfo';
+export type { ListItemAvatarLayoutProps } from './AvatarLayout';
+export type { ListItemAvatarViewProps } from './AvatarView';
+export type { ListItemButtonProps } from './Button';
+export type { ListItemCheckboxProps } from './Checkbox';
+export type { ListItemIconButtonProps } from './IconButton';
+export type { ListItemImageProps } from './Image';
+export type { ListItemNavigationProps } from './Navigation';
+export type { ListItemPromptProps } from './Prompt';
+export type { ListItemRadioProps } from './Radio';
+export type { ListItemSwitchProps } from './Switch';
+export { default } from './ListItem';
+//# sourceMappingURL=index.d.ts.map

package/build/types/listItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/listItem/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AACpE,YAAY,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAChE,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxD,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC5D,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/build/types/listItem/test-utils.d.ts

@@ -0,0 +1,7 @@
+import { type RenderResult } from '../test-utils';
+export declare const mockSetControlType: jest.Mock<any, any, any>;
+export declare const mockSetControlProps: jest.Mock<any, any, any>;
+export declare const mockSetMediaSize: jest.Mock<any, any, any>;
+export declare const renderWithListItemContext: (ui: React.ReactNode) => RenderResult;
+export declare const clearListItemMocks: () => void;
+//# sourceMappingURL=test-utils.d.ts.map

package/build/types/listItem/test-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-utils.d.ts","sourceRoot":"","sources":["../../../src/listItem/test-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAG1D,eAAO,MAAM,kBAAkB,0BAAY,CAAC;AAC5C,eAAO,MAAM,mBAAmB,0BAAY,CAAC;AAC7C,eAAO,MAAM,gBAAgB,0BAAY,CAAC;AAE1C,eAAO,MAAM,yBAAyB,GAAI,IAAI,KAAK,CAAC,SAAS,KAAG,YAqB/D,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}

package/build/types/listItem/useListItemControl.d.ts

@@ -0,0 +1,5 @@
+import type { ListItemTypes, ListItemControlProps } from './ListItem';
+export declare function useListItemControl(controlType: ListItemTypes, controlProps: ListItemControlProps): {
+    baseItemProps: Pick<import("./ListItem").ListItemProps, "disabled" | "inverted">;
+};
+//# sourceMappingURL=useListItemControl.d.ts.map

package/build/types/listItem/useListItemControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useListItemControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB;;EAahG"}

package/build/types/listItem/useListItemMedia.d.ts

@@ -0,0 +1,6 @@
+import { type ListItemMediaSize } from './ListItemContext';
+export declare function useListItemMedia(size?: ListItemMediaSize): {
+    mediaSize: ListItemMediaSize | undefined;
+    setMediaSize: (size: ListItemMediaSize | undefined) => void;
+};
+//# sourceMappingURL=useListItemMedia.d.ts.map

package/build/types/listItem/useListItemMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemMedia.d.ts","sourceRoot":"","sources":["../../../src/listItem/useListItemMedia.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAE3B,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,iBAAiB;;;EAQxD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.103.1",
+  "version": "46.104.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -85,8 +85,8 @@
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.5",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.6.4"
+    "@wise/components-theming": "1.6.4",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.3",

package/src/actionButton/ActionButton.story.tsx

@@ -13,7 +13,7 @@ import ActionButton from './ActionButton';
 export default {
   component: ActionButton,
   title: 'Actions/ActionButton',
-  tags: ['deprecated'],
+  tags: ['wds:deprecated'],
 } satisfies Meta<typeof ActionButton>;
 
 type Story = StoryObj<typeof ActionButton>;

package/src/avatar/Avatar.story.tsx

@@ -13,7 +13,7 @@ import Avatar, { AvatarType } from '.';
 export default {
   component: Avatar,
   title: 'Content/Avatar',
-  tags: ['deprecated'],
+  tags: ['wds:deprecated'],
 } satisfies Meta<typeof Avatar>;
 
 type Story = StoryObj<typeof Avatar>;

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -10,7 +10,7 @@ import AvatarWrapper from './AvatarWrapper';
 export default {
   component: AvatarWrapper,
   title: 'Content/AvatarWrapper',
-  tags: ['deprecated'],
+  tags: ['wds:deprecated'],
 } satisfies Meta<typeof AvatarWrapper>;
 
 type Story = StoryObj<typeof AvatarWrapper>;

package/src/badge/Badge.story.tsx

@@ -9,7 +9,7 @@ import Badge, { type BadgeProps } from './Badge';
 const meta: Meta<typeof Badge> = {
   component: Badge,
   title: 'Content/Badge',
-  tags: ['deprecated'],
+  tags: ['wds:deprecated'],
 };
 
 export default meta;

package/src/button/Button.story.tsx

@@ -152,6 +152,7 @@ const getPropsForPreview = (args: PreviewStoryArgs) => {
 const meta: Meta<typeof Button> = {
   component: Button,
   title: 'Actions/Button',
+  tags: ['wds:new'],
   argTypes: {
     v2: {
       table: {

package/src/button/LegacyButton.story.tsx

@@ -25,7 +25,7 @@ const withContainer = (Story: any) => (
 const meta: Meta<typeof LegacyButton> = {
   component: LegacyButton,
   title: 'Actions/Button/Legacy Button',
-  tags: ['deprecated'],
+  tags: ['wds:deprecated'],
   args: {
     size: undefined,
     priority: undefined,

package/src/index.ts

@@ -108,6 +108,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 +224,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();
+  });
+});