@transferwise/components 0.0.0-experimental-e1870f3 → 0.0.0-experimental-302d967

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e1870f3",
+  "version": "0.0.0-experimental-302d967",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/avatarView/AvatarView.css

@@ -19,8 +19,7 @@
   right: 0;
 }
 .np-avatar-view .np-avatar-view-content {
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-interactive-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -28,7 +27,6 @@
 .np-avatar-view-interactive .np-circle {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  color: var(--color-interactive-primary);
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;

package/src/avatarView/AvatarView.less

@@ -2,14 +2,13 @@
 
 .np-avatar-view {
   .np-avatar-view-content {
-    color: var(--color-content-primary);
+    color: var(--color-interactive-primary);
   }
 
   &-interactive {
     cursor: pointer;
     .np-circle {
       background-color: var(--color-background-neutral);
-      color: var(--color-interactive-primary);
     }
   }
 

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -6,7 +6,7 @@ import BottomSheet from '../../common/bottomSheet';
 import Option from '../../common/Option';
 import { Check, ChevronDown } from '@transferwise/icons';
 import { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';
-import { List } from '../../listItem';
+import { List } from '../../legacylistItem';
 
 export interface AnimatedLabelProps {
   activeLabel: number;

package/src/index.ts

@@ -50,7 +50,7 @@ export type {
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
 export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
-export type { LegacyListItemProps } from './legacylistItem';
+export type { ListProps, LegacyListItemProps } from './legacylistItem';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
@@ -108,12 +108,7 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
-export type {
-  ListItemProps,
-  ListProps,
-  ListItemAdditionalInfoProps,
-  ListItemCheckboxProps,
-} from './listItem';
+export type { ListItemProps, ListItemAdditionalInfoProps, ListItemCheckboxProps } from './listItem';
 
 /**
  * Components
@@ -171,7 +166,7 @@ export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';
 export { Label } from './label/Label';
 export { default as Link } from './link';
-export { default as LegacyListItem } from './legacylistItem';
+export { List, default as LegacyListItem } from './legacylistItem';
 export { default as Loader } from './loader';
 export { default as Logo } from './logo';
 export { default as Markdown } from './markdown';
@@ -215,7 +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, List } from './listItem';
+export { default as ListItem } from './listItem';
 
 /**
  * Hooks

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -2,11 +2,11 @@ import { action } from 'storybook/actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
-import { Button, IconButton, List } from '..';
+import { Button, IconButton } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-import LegacyListItem from '.';
+import LegacyListItem, { List } from '.';
 
 export default {
   component: LegacyListItem,

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

@@ -1,8 +1,7 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import LegacyListItem, { type LegacyListItemProps } from '.';
-import { List } from '../listItem';
+import LegacyListItem, { List, type LegacyListItemProps } from '.';
 
 export default {
   component: LegacyListItem,

package/src/legacylistItem/List.tsx

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

package/src/legacylistItem/index.ts

@@ -1,2 +1,4 @@
+export { List } from './List';
+export type { ListProps } from './List';
 export { default } from './LegacyListItem';
 export type { LegacyListItemProps } from './LegacyListItem';

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

@@ -2,7 +2,6 @@ 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,
@@ -66,7 +65,7 @@ export const Playground: Story = {
 export const Orientations: Story = {
   render: (args) => {
     return (
-      <List as="ol">
+      <ol className="list-unstyled">
         <ListItem
           title="Horizontal orientation"
           subtitle={lorem10}
@@ -80,7 +79,7 @@ export const Orientations: Story = {
           media={<ListItem.AvatarLayout {...args} orientation="diagonal" />}
           control={CONTROLS.iconButton}
         />
-      </List>
+      </ol>
     );
   },
 };
@@ -101,7 +100,7 @@ export const Sizes: Story = {
     const orientations = ['horizontal', 'diagonal'] as const;
 
     return (
-      <List as="ol">
+      <ol className="list-unstyled">
         {orientations.map((orientation) =>
           sizes.map((size) => (
             <ListItem
@@ -113,7 +112,7 @@ export const Sizes: Story = {
             />
           )),
         )}
-      </List>
+      </ol>
     );
   },
 };

package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx

@@ -1,5 +1,6 @@
 import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';
 import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia';
 
 type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
 
@@ -13,6 +14,8 @@ 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,7 +8,6 @@ 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 = {
@@ -213,7 +212,7 @@ export const Sizes: Story = {
   },
   render: (args) => {
     return (
-      <List as="ol">
+      <ol className="list-unstyled">
         {SIZES.map((size) => (
           <ListItem
             key={size}
@@ -227,7 +226,7 @@ export const Sizes: Story = {
             control={CONTROLS.iconButton}
           />
         ))}
-      </List>
+      </ol>
     );
   },
 };
@@ -249,7 +248,7 @@ export const Notification: Story = {
   },
   render: (args) => {
     return (
-      <List as="ol">
+      <ol className="list-unstyled">
         {SIZES.map((size) => (
           <ListItem
             key={size}
@@ -263,7 +262,7 @@ export const Notification: Story = {
             control={CONTROLS.iconButton}
           />
         ))}
-      </List>
+      </ol>
     );
   },
 };

package/src/listItem/AvatarView/ListItemAvatarView.tsx

@@ -1,5 +1,6 @@
 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;
@@ -13,6 +14,8 @@ 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,49 +1,24 @@
-import { render, screen, mockMatchMedia } from '../../test-utils';
+import { screen, mockMatchMedia } from '../../test-utils';
 import { Button as ItemButton } from './ListItemButton';
 import { ButtonPriority } from '../../button/Button.types';
-import { ListItemContext } from '../ListItemContext';
+import { renderWithListItemContext, clearListItemMocks, mockSetControlType } from '../test-utils';
 
 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(() => {
-    jest.clearAllMocks();
+    clearListItemMocks();
   });
 
   it('always sets v2 to true', () => {
-    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(mockSetControlType).toHaveBeenCalledWith('button');
   });
 
   it('always sets size to "sm"', () => {
-    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
     const button = screen.getByRole('button');
     expect(button).toHaveClass('wds-Button--small');
   });
@@ -51,21 +26,21 @@ describe('ItemButton', () => {
   it('supports all priorities', () => {
     const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
     priorities.forEach((priority) => {
-      renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
+      renderWithListItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
       const button = screen.getByRole('button', { name: `Test ${priority}` });
       expect(button).toBeInTheDocument();
     });
   });
 
   it('renders as a button by default', () => {
-    renderWithItemContext(<ItemButton>Click me</ItemButton>);
+    renderWithListItemContext(<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', () => {
-    renderWithItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
+    renderWithListItemContext(<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');
@@ -73,14 +48,14 @@ describe('ItemButton', () => {
   });
 
   it('spreads additional props to the button', () => {
-    renderWithItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
+    renderWithListItemContext(<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', () => {
-    renderWithItemContext(
+    renderWithListItemContext(
       <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
         Custom Link
       </ItemButton>,

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

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

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import ListItem, { List } from '..';
-import { Edit } from '@transferwise/icons';
+import { Edit, Heart } from '@transferwise/icons';
+import { ListItem } from '../ListItem';
 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 (
-      <List as="ol">
+      <ol className="list-unstyled">
         <ListItem
           control={<ListItem.IconButton {...args} />}
           title="Fully interactive ListItem"
@@ -132,7 +132,7 @@ export const Interactivity: Story = {
           additionalInfo={INFO.interactive}
           prompt={PROMPTS.interactive}
         />
-      </List>
+      </ol>
     );
   },
 };
@@ -145,7 +145,7 @@ export const Interactivity: Story = {
 export const Sentiment: Story = {
   render: (args) => {
     return (
-      <List as="ol">
+      <ol className="list-unstyled">
         <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}
         />
-      </List>
+      </ol>
     );
   },
 };
@@ -183,7 +183,7 @@ export const Sentiment: Story = {
 export const Priority: Story = {
   render: (args) => {
     return (
-      <List as="ol">
+      <ol className="list-unstyled">
         <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" />}
         />
-      </List>
+      </ol>
     );
   },
 };

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

@@ -1,14 +1,17 @@
 import { render, screen } from '../../test-utils';
-import { ListItem } from '../ListItem';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+const renderWithMedia = (media: ListItemProps['media']) =>
+  render(<ListItem title="Test Title" media={media} />);
 
 describe('ListItem.Image', () => {
   it('renders image with presentation role when no alt text', () => {
-    render(<ListItem.Image src="test-image.jpg" />);
+    renderWithMedia(<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', () => {
-    render(<ListItem.Image src="test-image.jpg" alt="Test image description" />);
+    renderWithMedia(<ListItem.Image src="test-image.jpg" alt="Test image description" />);
 
     const image = screen.getByRole('graphics-symbol');
     expect(image).toHaveAttribute('alt', 'Test image description');
@@ -16,12 +19,12 @@ describe('ListItem.Image', () => {
   });
 
   it('renders image with loading prop', () => {
-    render(<ListItem.Image src="test-image.jpg" loading="lazy" />);
+    renderWithMedia(<ListItem.Image src="test-image.jpg" loading="lazy" />);
     expect(screen.getByRole('presentation')).toHaveAttribute('loading', 'lazy');
   });
 
   it('renders image with className prop', () => {
-    render(<ListItem.Image src="test-image.jpg" className="custom-image-class" />);
+    renderWithMedia(<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,6 +6,12 @@ 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',
@@ -15,22 +21,33 @@ export default {
     },
   },
   args: {
-    src: 'https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg',
-    size: undefined,
+    src: IMAGE_URLS.landscape,
+    size: 72,
     loading: undefined,
     alt: undefined,
+    imageOrientation: 'landscape' as keyof typeof IMAGE_URLS,
   },
-} satisfies Meta<ListItemImageProps>;
+  argTypes: {
+    imageOrientation: {
+      control: { type: 'radio' },
+      options: ['portrait', 'landscape'],
+      description: 'Switch between portrait and landscape images',
+    },
+  },
+} satisfies Meta<ListItemImageProps & { imageOrientation: keyof typeof IMAGE_URLS }>;
 
-type Story = StoryObj<ListItemImageProps>;
+type Story = StoryObj<ListItemImageProps & { imageOrientation: keyof typeof IMAGE_URLS }>;
 
 export const Playground: Story = {
-  render: (args: ListItemImageProps) => {
+  render: (args: ListItemImageProps & { imageOrientation: keyof typeof IMAGE_URLS }) => {
+    const { imageOrientation, ...imageProps } = args;
+    const src = IMAGE_URLS[imageOrientation];
+
     return (
       <ListItem
         title="List item title"
         subtitle="Subtitle goes here"
-        media={<ListItem.Image {...args} />}
+        media={<ListItem.Image {...imageProps} src={src} />}
         control={CONTROLS.partialButton}
         additionalInfo={INFO.nonInteractive}
       />

package/src/listItem/Image/ListItemImage.tsx

@@ -1,5 +1,6 @@
 import ImageComp, { type ImageProps } from '../../image';
 import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia';
 
 type SizeProp = {};
 
@@ -23,17 +24,24 @@ 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) => {
+export const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {
+  useListItemMedia(size);
+
   return (
     <div
-      className={clsx('wds-list-item-media-image')}
+      className={clsx('wds-list-item-media-image-wrapper')}
       style={
         {
-          '--item-media-image-size': `${size}px`,
+          '--wds-list-item-media-size': `${size}px`,
         } as React.CSSProperties
       }
     >
-      <ImageComp {...props} alt={alt} role={alt ? 'graphics-symbol' : 'presentation'} />
+      <ImageComp
+        {...props}
+        className={clsx(className, 'wds-list-item-media-image')}
+        alt={alt}
+        role={alt ? 'graphics-symbol' : 'presentation'}
+      />
     </div>
   );
 };