@transferwise/components 0.0.0-experimental-15914a5 → 0.0.0-experimental-e1870f3

package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx

@@ -1,6 +1,5 @@
 import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
 import { clsx } from 'clsx';
-import { useListItemMedia } from '../useListItemMedia';
 
 type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
 
@@ -14,8 +13,6 @@ export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'intera
  * 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}

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -8,6 +8,7 @@ import {
 import { ListItemAvatarViewProps } from './ListItemAvatarView';
 import { lorem10 } from '../../test-utils';
 import { ProfileType } from '../../common';
+import { List } from '../List';
 
 const SIZES = [32, 40, 48, 56, 72] as const;
 const BADGES = {
@@ -212,7 +213,7 @@ export const Sizes: Story = {
   },
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         {SIZES.map((size) => (
           <ListItem
             key={size}
@@ -226,7 +227,7 @@ export const Sizes: Story = {
             control={CONTROLS.iconButton}
           />
         ))}
-      </ol>
+      </List>
     );
   },
 };
@@ -248,7 +249,7 @@ export const Notification: Story = {
   },
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         {SIZES.map((size) => (
           <ListItem
             key={size}
@@ -262,7 +263,7 @@ export const Notification: Story = {
             control={CONTROLS.iconButton}
           />
         ))}
-      </ol>
+      </List>
     );
   },
 };

package/src/listItem/AvatarView/ListItemAvatarView.tsx

@@ -1,6 +1,5 @@
 import { clsx } from 'clsx';
 import AvatarViewComp, { AvatarViewProps } from '../../avatarView';
-import { useListItemMedia } from '../useListItemMedia';
 
 export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
   size?: 32 | 40 | 48 | 56 | 72;
@@ -14,8 +13,6 @@ export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactiv
  * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
  */
 export const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
-  useListItemMedia(size);
-
   return (
     <AvatarViewComp
       {...props}

package/src/listItem/Button/ListItemButton.spec.tsx

@@ -1,24 +1,49 @@
-import { screen, mockMatchMedia } from '../../test-utils';
+import { render, screen, mockMatchMedia } from '../../test-utils';
 import { Button as ItemButton } from './ListItemButton';
 import { ButtonPriority } from '../../button/Button.types';
-import { renderWithListItemContext, clearListItemMocks, mockSetControlType } from '../test-utils';
+import { ListItemContext } from '../ListItemContext';
 
 mockMatchMedia();
 
 describe('ItemButton', () => {
+  const mockSetControlType = jest.fn();
+  const mockSetControlProps = jest.fn();
+
+  const renderWithItemContext = (ui: React.ReactNode) => {
+    return render(
+      <ListItemContext.Provider
+        value={{
+          setControlType: mockSetControlType,
+          setControlProps: mockSetControlProps,
+          ids: {
+            title: 'title',
+            additionalInfo: 'additional Info',
+            valueTitle: 'value title',
+            control: 'control',
+            prompt: 'prompt',
+          },
+          props: {},
+          describedByIds: 'described-by-ids',
+        }}
+      >
+        {ui}
+      </ListItemContext.Provider>,
+    );
+  };
+
   beforeEach(() => {
-    clearListItemMocks();
+    jest.clearAllMocks();
   });
 
   it('always sets v2 to true', () => {
-    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(mockSetControlType).toHaveBeenCalledWith('button');
   });
 
   it('always sets size to "sm"', () => {
-    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
     const button = screen.getByRole('button');
     expect(button).toHaveClass('wds-Button--small');
   });
@@ -26,21 +51,21 @@ describe('ItemButton', () => {
   it('supports all priorities', () => {
     const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
     priorities.forEach((priority) => {
-      renderWithListItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
+      renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
       const button = screen.getByRole('button', { name: `Test ${priority}` });
       expect(button).toBeInTheDocument();
     });
   });
 
   it('renders as a button by default', () => {
-    renderWithListItemContext(<ItemButton>Click me</ItemButton>);
+    renderWithItemContext(<ItemButton>Click me</ItemButton>);
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button.tagName).toBe('BUTTON');
   });
 
   it('renders as an anchor when href is provided', () => {
-    renderWithListItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
+    renderWithItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
     const link = screen.getByRole('link', { name: 'Go to Example' });
     expect(link).toBeInTheDocument();
     expect(link.tagName).toBe('A');
@@ -48,14 +73,14 @@ describe('ItemButton', () => {
   });
 
   it('spreads additional props to the button', () => {
-    renderWithListItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
+    renderWithItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
     const button = screen.getByRole('button', { name: 'Custom Button' });
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('aria-label', 'Custom Button');
   });
 
   it('spreads additional props to the anchor', () => {
-    renderWithListItemContext(
+    renderWithItemContext(
       <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
         Custom Link
       </ItemButton>,

package/src/listItem/Button/ListItemButton.story.tsx

@@ -7,6 +7,7 @@ import {
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from '../_stories/subcomponents';
 import type { ListItemButtonProps } from './ListItemButton';
+import { List } from '../List';
 
 /**
  * Convenience controls for previewing rich markup,
@@ -181,7 +182,7 @@ export const Interactivity: Story = {
   },
   render: (args: ListItemButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Fully interactive ListItem"
           subtitle="Button in fully interactive context"
@@ -195,7 +196,7 @@ export const Interactivity: Story = {
           media={MEDIA.avatarSingle}
           control={<ListItem.Button {...args} partiallyInteractive />}
         />
-      </ol>
+      </List>
     );
   },
 };
@@ -230,7 +231,7 @@ export const AsAnchor: Story = {
 export const Sentiment: Story = {
   render: (args: ListItemButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Default Sentiment - Primary"
           subtitle="Default sentiment with primary priority"
@@ -271,7 +272,7 @@ export const Sentiment: Story = {
             </ListItem.Button>
           }
         />
-      </ol>
+      </List>
     );
   },
   args: {
@@ -287,7 +288,7 @@ export const Sentiment: Story = {
 export const Priority: Story = {
   render: (args: ListItemButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Primary Priority"
           subtitle="Primary priority (default)"
@@ -328,7 +329,7 @@ export const Priority: Story = {
             </ListItem.Button>
           }
         />
-      </ol>
+      </List>
     );
   },
   args: {
@@ -368,7 +369,7 @@ const addonProps = {
 export const WithIcons: Story = {
   render: (args: ListItemButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="With Start Icon"
           subtitle="Button with icon before the label"
@@ -399,7 +400,7 @@ export const WithIcons: Story = {
             </ListItem.Button>
           }
         />
-      </ol>
+      </List>
     );
   },
   args: {

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Edit, Heart } from '@transferwise/icons';
-import { ListItem } from '../ListItem';
+import ListItem, { List } from '..';
+import { Edit } from '@transferwise/icons';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_MEDIA as MEDIA,
@@ -114,7 +114,7 @@ export const Interactivity: Story = {
   },
   render: (args: ListItemIconButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           control={<ListItem.IconButton {...args} />}
           title="Fully interactive ListItem"
@@ -132,7 +132,7 @@ export const Interactivity: Story = {
           additionalInfo={INFO.interactive}
           prompt={PROMPTS.interactive}
         />
-      </ol>
+      </List>
     );
   },
 };
@@ -145,7 +145,7 @@ export const Interactivity: Story = {
 export const Sentiment: Story = {
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           control={<ListItem.IconButton {...args} priority="primary" type="default" />}
           title="Default Sentiment - Primary"
@@ -170,7 +170,7 @@ export const Sentiment: Story = {
           subtitle="Negative sentiment with secondary priority"
           media={MEDIA.avatarSingle}
         />
-      </ol>
+      </List>
     );
   },
 };
@@ -183,7 +183,7 @@ export const Sentiment: Story = {
 export const Priority: Story = {
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Primary Priority"
           subtitle="Primary priority (default)"
@@ -208,7 +208,7 @@ export const Priority: Story = {
           media={MEDIA.avatarSingle}
           control={<ListItem.IconButton {...args} priority="minimal" />}
         />
-      </ol>
+      </List>
     );
   },
 };

package/src/listItem/Image/ListItemImage.spec.tsx

@@ -1,17 +1,14 @@
 import { render, screen } from '../../test-utils';
-import { ListItem, type Props as ListItemProps } from '../ListItem';
-
-const renderWithMedia = (media: ListItemProps['media']) =>
-  render(<ListItem title="Test Title" media={media} />);
+import { ListItem } from '../ListItem';
 
 describe('ListItem.Image', () => {
   it('renders image with presentation role when no alt text', () => {
-    renderWithMedia(<ListItem.Image src="test-image.jpg" />);
+    render(<ListItem.Image src="test-image.jpg" />);
     expect(screen.getByRole('presentation')).toHaveAttribute('src', 'test-image.jpg');
   });
 
   it('renders image with graphics-symbol role when alt text provided', () => {
-    renderWithMedia(<ListItem.Image src="test-image.jpg" alt="Test image description" />);
+    render(<ListItem.Image src="test-image.jpg" alt="Test image description" />);
 
     const image = screen.getByRole('graphics-symbol');
     expect(image).toHaveAttribute('alt', 'Test image description');
@@ -19,12 +16,12 @@ describe('ListItem.Image', () => {
   });
 
   it('renders image with loading prop', () => {
-    renderWithMedia(<ListItem.Image src="test-image.jpg" loading="lazy" />);
+    render(<ListItem.Image src="test-image.jpg" loading="lazy" />);
     expect(screen.getByRole('presentation')).toHaveAttribute('loading', 'lazy');
   });
 
   it('renders image with className prop', () => {
-    renderWithMedia(<ListItem.Image src="test-image.jpg" className="custom-image-class" />);
+    render(<ListItem.Image src="test-image.jpg" className="custom-image-class" />);
     expect(screen.getByRole('presentation')).toHaveClass('custom-image-class');
   });
 });

package/src/listItem/Image/ListItemImage.story.tsx

@@ -6,12 +6,6 @@ import {
 } from '../_stories/subcomponents';
 import { ListItemImageProps } from './ListItemImage';
 
-const IMAGE_URLS = {
-  portrait: 'https://cdn-icons-png.flaticon.com/512/656/656404.png',
-  landscape:
-    'https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg',
-};
-
 export default {
   component: ListItem.Image,
   title: 'Content/ListItem/ListItem.Image',
@@ -21,33 +15,22 @@ export default {
     },
   },
   args: {
-    src: IMAGE_URLS.landscape,
-    size: 72,
+    src: 'https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg',
+    size: undefined,
     loading: undefined,
     alt: undefined,
-    imageOrientation: 'landscape' as keyof typeof IMAGE_URLS,
   },
-  argTypes: {
-    imageOrientation: {
-      control: { type: 'radio' },
-      options: ['portrait', 'landscape'],
-      description: 'Switch between portrait and landscape images',
-    },
-  },
-} satisfies Meta<ListItemImageProps & { imageOrientation: keyof typeof IMAGE_URLS }>;
+} satisfies Meta<ListItemImageProps>;
 
-type Story = StoryObj<ListItemImageProps & { imageOrientation: keyof typeof IMAGE_URLS }>;
+type Story = StoryObj<ListItemImageProps>;
 
 export const Playground: Story = {
-  render: (args: ListItemImageProps & { imageOrientation: keyof typeof IMAGE_URLS }) => {
-    const { imageOrientation, ...imageProps } = args;
-    const src = IMAGE_URLS[imageOrientation];
-
+  render: (args: ListItemImageProps) => {
     return (
       <ListItem
         title="List item title"
         subtitle="Subtitle goes here"
-        media={<ListItem.Image {...imageProps} src={src} />}
+        media={<ListItem.Image {...args} />}
         control={CONTROLS.partialButton}
         additionalInfo={INFO.nonInteractive}
       />

package/src/listItem/Image/ListItemImage.tsx

@@ -1,6 +1,5 @@
 import ImageComp, { type ImageProps } from '../../image';
 import { clsx } from 'clsx';
-import { useListItemMedia } from '../useListItemMedia';
 
 type SizeProp = {};
 
@@ -25,14 +24,12 @@ export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' |
  * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).
  */
 export const Image = ({ alt = '', size = 48, ...props }: ListItemImageProps) => {
-  useListItemMedia(size);
-
   return (
     <div
       className={clsx('wds-list-item-media-image')}
       style={
         {
-          '--wds-list-item-control-wrapper-height': `${size}px`,
+          '--item-media-image-size': `${size}px`,
         } as React.CSSProperties
       }
     >

package/src/listItem/List.tsx

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+
+export interface ListProps {
+  as?: 'ul' | 'ol' | 'div';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function List({ as: Element = 'ul', className, children }: ListProps) {
+  return <Element className={clsx('wds-list', 'list-unstyled', className)}>{children}</Element>;
+}