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

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

@@ -6,7 +6,6 @@ import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_CONTROLS as CONTROLS,
 } from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
 import { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';
 
 export default {
@@ -64,7 +63,6 @@ export const Playground: Story = {
  * 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 (
       <ol className="list-unstyled">
@@ -97,7 +95,6 @@ export const Sizes: Story = {
       },
     },
   },
-  argTypes: disableControls()(['size', 'orientation']),
   render: (args) => {
     const sizes = [32, 40, 48, 56, 72] as const;
     const orientations = ['horizontal', 'diagonal'] as const;

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

@@ -1,16 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Leaf, Taxi } from '@transferwise/icons';
-import { lorem10 } from '../../test-utils';
-import { ProfileType } from '../../common';
 import { ListItem } from '../ListItem';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_CONTROLS as CONTROLS,
 } from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
 import { ListItemAvatarViewProps } from './ListItemAvatarView';
-
-const hideControls = disableControls(['badge', 'children']);
+import { lorem10 } from '../../test-utils';
+import { ProfileType } from '../../common';
 
 const SIZES = [32, 40, 48, 56, 72] as const;
 const BADGES = {
@@ -81,11 +78,8 @@ export default {
     },
     profileType: {
       control: 'select',
-      options: [ProfileType.PERSONAL, ProfileType.BUSINESS],
+      options: ['personal', 'business'],
       description: 'Type of profile for default icons',
-      table: {
-        type: { summary: 'ProfileType' },
-      },
     },
     notification: {
       control: 'boolean',
@@ -139,7 +133,6 @@ export const ContentTypes: Story = {
   args: {
     badge: undefined,
   },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType']),
   parameters: {
     docs: {
       canvas: {
@@ -217,7 +210,6 @@ export const Sizes: Story = {
       },
     },
   },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'size']),
   render: (args) => {
     return (
       <ol className="list-unstyled">
@@ -254,14 +246,6 @@ export const Notification: Story = {
   args: {
     badge: undefined,
   },
-  argTypes: hideControls([
-    'profileName',
-    'imgSrc',
-    'profileType',
-    'size',
-    'notification',
-    'selected',
-  ]),
   render: (args) => {
     return (
       <ol className="list-unstyled">
@@ -291,7 +275,6 @@ export const Badges: Story = {
   args: {
     imgSrc: '../avatar-square-dude.webp',
   },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
   parameters: {
     docs: {
       canvas: {
@@ -320,7 +303,6 @@ export const Badges: Story = {
  * AvatarView supports selected state for interactive contexts.
  */
 export const Selected: Story = {
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
   render: (args) => {
     return (
       <ol className="list-unstyled">

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,15 +7,6 @@ import {
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from '../_stories/subcomponents';
 import type { ListItemButtonProps } from './ListItemButton';
-import { disableControls } from '../_stories/helpers';
-
-const hideControls = disableControls([
-  'onClick',
-  'children',
-  'className',
-  'addonStart',
-  'addonEnd',
-]);
 
 /**
  * Convenience controls for previewing rich markup,
@@ -137,11 +128,6 @@ const meta: Meta<typeof ListItem.Button> = {
     addonEnd: {
       description: 'Icon accessory to be displayed after the label',
     },
-    onClick: {
-      table: {
-        type: { summary: '(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void' },
-      },
-    },
   },
 } satisfies Meta<ListItemButtonProps>;
 
@@ -189,33 +175,25 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
  *
  * Refer to the [design documentation](https://wise.design/components/list-item#interaction) for details.
  */
-export const Interactivity: StoryObj<PreviewStoryArgs> = {
+export const Interactivity: Story = {
   args: {
     children: 'Action',
-    previewAddonStart: false,
-    previewAddonEnd: false,
   },
-  argTypes: {
-    ...hideControls(['partiallyInteractive']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+  render: (args: ListItemButtonProps) => {
     return (
       <ol className="list-unstyled">
         <ListItem
           title="Fully interactive ListItem"
           subtitle="Button in fully interactive context"
           media={MEDIA.avatarSingle}
-          control={<ListItem.Button {...props} {...previewProps} />}
+          control={<ListItem.Button {...args} />}
         />
 
         <ListItem
           title="Partially interactive ListItem"
           subtitle="Button in partially interactive context"
           media={MEDIA.avatarSingle}
-          control={<ListItem.Button {...props} {...previewProps} partiallyInteractive />}
+          control={<ListItem.Button {...args} partiallyInteractive />}
         />
       </ol>
     );
@@ -225,27 +203,20 @@ export const Interactivity: StoryObj<PreviewStoryArgs> = {
 /**
  * If `href` prop is set, the component will be automatically rendered as an HTML anchor element.
  */
-export const AsAnchor: StoryObj<PreviewStoryArgs> = {
+export const AsAnchor: Story = {
   args: {
     children: 'Visit link',
     href: 'https://wise.com',
     target: '_blank',
-    previewAddonStart: false,
-    previewAddonEnd: false,
   },
-  argTypes: {
-    ...hideControls(['partiallyInteractive']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+  render: (args: ListItemButtonProps) => {
     return (
       <ListItem
-        title="List item with a Button control"
-        subtitle="But it renders as HTML anchor element"
+        title="List item with button link"
+        subtitle="Button rendered as anchor element"
         media={MEDIA.avatarSingle}
-        control={<ListItem.Button {...props} {...previewProps} />}
+        control={<ListItem.Button {...args} />}
+        additionalInfo={INFO.nonInteractive}
       />
     );
   },
@@ -256,19 +227,8 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
  * [Design documentation](https://wise.design/components/button#types)
  */
-export const Sentiment: StoryObj<PreviewStoryArgs> = {
-  args: {
-    children: 'Button text',
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  argTypes: {
-    ...hideControls(['sentiment', 'priority']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+export const Sentiment: Story = {
+  render: (args: ListItemButtonProps) => {
     return (
       <ol className="list-unstyled">
         <ListItem
@@ -276,7 +236,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
           subtitle="Default sentiment with primary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="primary">
+            <ListItem.Button {...args} priority="primary">
               Default Sentiment
             </ListItem.Button>
           }
@@ -286,7 +246,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
           subtitle="Negative sentiment with primary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="primary" sentiment="negative">
+            <ListItem.Button {...args} priority="primary" sentiment="negative">
               Negative Sentiment
             </ListItem.Button>
           }
@@ -296,7 +256,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
           subtitle="Default sentiment with secondary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="secondary">
+            <ListItem.Button {...args} priority="secondary">
               Default Sentiment
             </ListItem.Button>
           }
@@ -306,7 +266,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
           subtitle="Negative sentiment with secondary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="secondary" sentiment="negative">
+            <ListItem.Button {...args} priority="secondary" sentiment="negative">
               Negative Sentiment
             </ListItem.Button>
           }
@@ -314,6 +274,9 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
       </ol>
     );
   },
+  args: {
+    children: 'Button text',
+  },
 };
 
 /**
@@ -321,19 +284,8 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
  * screen to help more important buttons to take precedence over others. <br />
  * [Design documentation](https://wise.design/components/button#priorities)
  */
-export const Priority: StoryObj<PreviewStoryArgs> = {
-  args: {
-    children: 'Button text',
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  argTypes: {
-    ...hideControls(['priority']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+export const Priority: Story = {
+  render: (args: ListItemButtonProps) => {
     return (
       <ol className="list-unstyled">
         <ListItem
@@ -341,7 +293,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
           subtitle="Primary priority (default)"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="primary">
+            <ListItem.Button {...args} priority="primary">
               Primary Priority
             </ListItem.Button>
           }
@@ -351,7 +303,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
           subtitle="Secondary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="secondary">
+            <ListItem.Button {...args} priority="secondary">
               Secondary Priority
             </ListItem.Button>
           }
@@ -361,7 +313,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
           subtitle="Secondary neutral priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="secondary-neutral">
+            <ListItem.Button {...args} priority="secondary-neutral">
               Secondary Neutral Priority
             </ListItem.Button>
           }
@@ -371,7 +323,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
           subtitle="Tertiary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="tertiary">
+            <ListItem.Button {...args} priority="tertiary">
               Tertiary Priority
             </ListItem.Button>
           }
@@ -379,38 +331,29 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
       </ol>
     );
   },
+  args: {
+    children: 'Button text',
+  },
 };
 
 /**
  * Button in loading state.
  */
-export const Loading: StoryObj<PreviewStoryArgs> = {
-  args: {
-    loading: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  argTypes: {
-    ...hideControls(['loading']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+export const Loading: Story = {
+  render: (args: ListItemButtonProps) => {
     return (
       <ListItem
         title="Loading Button"
         subtitle="Button in loading state"
         media={MEDIA.avatarSingle}
-        control={
-          <ListItem.Button {...props} {...previewProps}>
-            Loading Button
-          </ListItem.Button>
-        }
+        control={<ListItem.Button {...args}>Loading Button</ListItem.Button>}
         additionalInfo={INFO.nonInteractive}
       />
     );
   },
+  args: {
+    loading: true,
+  },
 };
 
 const addonProps = {
@@ -423,10 +366,6 @@ const addonProps = {
  * **NB:** ListItem.Button only supports icon addons.
  */
 export const WithIcons: Story = {
-  args: {
-    children: 'Button text',
-  },
-  argTypes: hideControls(),
   render: (args: ListItemButtonProps) => {
     return (
       <ol className="list-unstyled">
@@ -463,4 +402,7 @@ export const WithIcons: Story = {
       </ol>
     );
   },
+  args: {
+    children: 'Button text',
+  },
 };

package/src/listItem/Checkbox/ListItemCheckbox.story.tsx

@@ -32,21 +32,6 @@ const meta: Meta<ListItemCheckboxProps> = {
     indeterminate: {
       control: 'boolean',
     },
-    onChange: {
-      table: {
-        type: { summary: '(event: ChangeEvent<HTMLInputElement>) => void' },
-      },
-    },
-    onFocus: {
-      table: {
-        type: { summary: '(event: FocusEvent<HTMLInputElement>) => void' },
-      },
-    },
-    onBlur: {
-      table: {
-        type: { summary: '(event: FocusEvent<HTMLInputElement>) => void' },
-      },
-    },
   },
 } satisfies Meta<ListItemCheckboxProps>;
 
@@ -73,9 +58,6 @@ export const Playground: Story = {
  * Checkbox controls demonstrate different states including checked, unchecked, and indeterminate.
  */
 export const States: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
   render: function Render() {
     const [isChecked0, setisChecked0] = useState(false);
     const [isChecked1, setisChecked1] = useState(true);

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

@@ -1,22 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Edit } from '@transferwise/icons';
-import { fn } from 'storybook/test';
+import { Edit, Heart } from '@transferwise/icons';
 import { ListItem } from '../ListItem';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_MEDIA as MEDIA,
   SB_LIST_ITEM_PROMPTS as PROMPTS,
 } from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
 import type { ListItemIconButtonProps } from './ListItemIconButton';
-
-const hideControls = disableControls([
-  'onClick',
-  'children',
-  'className',
-  'addonStart',
-  'addonEnd',
-]);
+import { fn } from 'storybook/test';
 
 /**
  * Use IconButton to provide compact action controls within a ListItem context using iconography.
@@ -121,7 +112,6 @@ export const Interactivity: Story = {
   args: {
     children: <Edit />,
   },
-  argTypes: hideControls(['partiallyInteractive']),
   render: (args: ListItemIconButtonProps) => {
     return (
       <ol className="list-unstyled">
@@ -153,7 +143,6 @@ export const Interactivity: Story = {
  * [Design documentation](https://wise.design/components/icon-button#types)
  */
 export const Sentiment: Story = {
-  argTypes: hideControls(['sentiment', 'priority']),
   render: (args) => {
     return (
       <ol className="list-unstyled">
@@ -192,7 +181,6 @@ export const Sentiment: Story = {
  * [Design documentation](https://wise.design/components/icon-button#priorities)
  */
 export const Priority: Story = {
-  argTypes: hideControls(['sentiment', 'priority']),
   render: (args) => {
     return (
       <ol className="list-unstyled">
@@ -235,7 +223,6 @@ export const AsAnchor: Story = {
     target: '_blank',
     onClick: undefined,
   },
-  argTypes: hideControls(),
   render: (args: ListItemIconButtonProps) => {
     return (
       <ListItem

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');
   });
 });