@transferwise/components 0.0.0-experimental-131773e → 0.0.0-experimental-1bec623

package/src/listItem/ListItem.tsx

@@ -216,7 +216,8 @@ export const ListItem = ({
           {
             'wds-list-item-interactive': isFullyInteractive,
             'wds-list-item-partially-interactive': isPartiallyInteractive,
-            [`wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
+            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
+              isFullyInteractive && !!spotlight,
             disabled,
           },
           className,

package/src/listItem/Navigation/ListItemNavigation.spec.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '../../test-utils';
+import userEvent from '@testing-library/user-event';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+describe('ListItem.Navigation', () => {
+  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
+    render(<ListItem title="Test Title" {...overrides} />);
+
+  describe('as button', () => {
+    it('renders as button if onClick is set but no href', () => {
+      renderWith({ control: <ListItem.Navigation onClick={() => {}} /> });
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('handles onClick events', async () => {
+      const handleClick = jest.fn();
+      renderWith({ control: <ListItem.Navigation onClick={handleClick} /> });
+
+      await userEvent.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('respects disabled state', async () => {
+      renderWith({
+        disabled: true,
+        control: <ListItem.Navigation onClick={jest.fn()} />,
+      });
+      expect(screen.getByTestId('backslash-circle-icon')).toBeInTheDocument();
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('as link', () => {
+    it('renders a link if href is set', () => {
+      renderWith({ control: <ListItem.Navigation href="/test-path" /> });
+
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(screen.getByRole('link')).toBeInTheDocument();
+    });
+
+    it('respects target prop', () => {
+      renderWith({
+        control: <ListItem.Navigation href="/test-path" target="_blank" />,
+      });
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('renders disabled icon when ListItem is disabled', () => {
+      renderWith({
+        disabled: true,
+        control: <ListItem.Navigation href="wise.com" />,
+      });
+      expect(screen.getByTestId('backslash-circle-icon')).toBeInTheDocument();
+    });
+  });
+});

package/src/listItem/Prompt/ListItemPrompt.spec.tsx

@@ -1,34 +1,20 @@
-import { render, screen, mockMatchMedia } from '../../test-utils';
+import { mockMatchMedia, render, screen } from '../../test-utils';
 import { Sentiment } from '../../common';
-import { type ListItemPromptProps, Prompt } from './ListItemPrompt';
-import { ListItemContext } from '../ListItemContext';
+import { ListItem } from '../ListItem';
+import type { ListItemPromptProps } from './ListItemPrompt';
 
 mockMatchMedia();
 
-const mockContext = {
-  setControlType: jest.fn(),
-  setControlProps: jest.fn(),
-  ids: {
-    title: 'title',
-    control: 'control',
-    prompt: 'prompt',
-    additionalInfo: 'additionalInfo',
-    valueTitle: 'valueTitle',
-    valueSubtitle: 'valueSubtitle',
-    subtitle: 'subtitle',
-  },
-  props: {},
-  describedByIds: 'described-by-ids',
-};
-
 describe('ListItem.Prompt', () => {
-  it('renders the children content', () => {
+  it('renders children content', () => {
     render(
-      <ListItemContext.Provider value={mockContext}>
-        <Prompt sentiment={Sentiment.POSITIVE}>This is a child prompt</Prompt>
-      </ListItemContext.Provider>,
+      <ListItem
+        title="Test Title"
+        prompt={<ListItem.Prompt>This is a prompt message</ListItem.Prompt>}
+      />,
     );
-    expect(screen.getByText('This is a child prompt')).toBeInTheDocument();
+
+    expect(screen.getByText('This is a prompt message')).toBeInTheDocument();
   });
 
   describe('render icon', () => {
@@ -39,9 +25,10 @@ describe('ListItem.Prompt', () => {
       [Sentiment.WARNING, 'alert-icon'],
     ] as [ListItemPromptProps['sentiment'], string][])('renders %s icon', (sentiment, iconId) => {
       render(
-        <ListItemContext.Provider value={mockContext}>
-          <Prompt sentiment={sentiment}>Neutral prompt</Prompt>
-        </ListItemContext.Provider>,
+        <ListItem
+          title="Test Title"
+          prompt={<ListItem.Prompt sentiment={sentiment}>Message</ListItem.Prompt>}
+        />,
       );
       expect(screen.getByTestId(iconId)).toBeInTheDocument();
     });

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
+import { action } from 'storybook/actions';
 import { lorem10, lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { Sentiment as Sentiments } from '../../common';
@@ -147,8 +147,10 @@ export const Interactivity: Story = {
         prompt={
           <Prompt sentiment={args.sentiment}>
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-            This prompt includes an <Link onClick={fn()}>inline button</Link> than can e.g. trigger
-            a modal.
+            This prompt includes an <Link onClick={action('inline button')}>
+              inline button
+            </Link>{' '}
+            than can e.g. trigger a modal.
           </Prompt>
         }
       />

package/src/listItem/Radio/ListItemRadio.spec.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '../../test-utils';
+import userEvent from '@testing-library/user-event';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+describe('ListItem.Radio', () => {
+  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
+    render(<ListItem title="Test Title" {...overrides} />);
+
+  it('renders radio button', () => {
+    renderWith({
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={() => {}} />,
+    });
+
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+
+  describe('checked state', () => {
+    it('reflects checked state', () => {
+      renderWith({
+        control: <ListItem.Radio name="test-radio" value="option1" checked />,
+      });
+
+      expect(screen.getByRole('radio')).toBeChecked();
+    });
+
+    it('reflects unchecked state', () => {
+      renderWith({
+        control: <ListItem.Radio name="test-radio" value="option1" checked={false} />,
+      });
+
+      expect(screen.getByRole('radio')).not.toBeChecked();
+    });
+  });
+
+  it('handles onChange events', async () => {
+    const handleChange = jest.fn();
+    renderWith({
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={handleChange} />,
+    });
+
+    await userEvent.click(screen.getByRole('radio'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when ListItem is disabled', async () => {
+    const handleChange = jest.fn();
+    renderWith({
+      disabled: true,
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={handleChange} />,
+    });
+
+    const radio = screen.getByRole('radio');
+    expect(radio).toBeDisabled();
+    await userEvent.click(radio);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('supports name and value attributes', () => {
+    renderWith({ control: <ListItem.Radio name="test-radio" value="option1" /> });
+
+    const radio = screen.getByRole('radio');
+    expect(radio).toHaveAttribute('name', 'test-radio');
+    // eslint-disable-next-line jest-dom/prefer-to-have-value
+    expect(radio).toHaveAttribute('value', 'option1');
+  });
+});

package/src/listItem/Switch/ListItemSwitch.spec.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '../../test-utils';
+import userEvent from '@testing-library/user-event';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+describe('ListItem.Switch', () => {
+  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
+    render(<ListItem title="Test title" {...overrides} />);
+
+  it('renders switch with correct role', () => {
+    renderWith({ control: <ListItem.Switch checked={false} onClick={() => {}} /> });
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  describe('checked state', () => {
+    it('reflects checked state', () => {
+      renderWith({ control: <ListItem.Switch checked onClick={() => {}} /> });
+      expect(screen.getByRole('switch')).toBeChecked();
+    });
+
+    it('reflects unchecked state', () => {
+      renderWith({ control: <ListItem.Switch checked={false} onClick={() => {}} /> });
+      expect(screen.getByRole('switch')).not.toBeChecked();
+    });
+  });
+
+  it('handles onClick events', async () => {
+    const handleClick = jest.fn();
+    renderWith({ control: <ListItem.Switch checked={false} onClick={handleClick} /> });
+
+    await userEvent.click(screen.getByRole('switch'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when ListItem is disabled', async () => {
+    const handleClick = jest.fn();
+    renderWith({
+      disabled: true,
+      control: <ListItem.Switch checked={false} onClick={handleClick} />,
+    });
+
+    const switchElement = screen.getByRole('switch');
+    expect(switchElement).toBeDisabled();
+
+    await userEvent.click(screen.getByRole('switch'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+});

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -2,7 +2,8 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Bank, FastFlag, MultiCurrency, Receipt, Savings } from '@transferwise/icons';
 import Link from '../../link';
 import { ListItem, Props as ItemProps } from '../ListItem';
-import { lorem5 } from '../../test-utils';
+import { lorem10, lorem5 } from '../../test-utils';
+import { SB_LIST_ITEM_CONTROLS as CONTROLS, SB_LIST_ITEM_MEDIA as MEDIA } from './subcomponents';
 
 const withSizedContainer = (width: number) => (Story: any) => (
   <ol
@@ -167,3 +168,22 @@ export const Over400: Story = {
   render: () => <>{variants}</>,
   decorators: [withSizedContainer(400)],
 };
+
+export const GapsBetweenItems: Story = {
+  render: () => {
+    const props = {
+      title: lorem5,
+      subtitle: lorem10,
+      media: MEDIA.image,
+      control: CONTROLS.switch,
+    };
+    return (
+      <ol className="list-unstyled">
+        <ListItem {...props} />
+        <ListItem {...props} spotlight="active" />
+        <ListItem {...props} spotlight="inactive" />
+        <ListItem {...props} />
+      </ol>
+    );
+  },
+};

package/src/listItem/_stories/ListItem.variants.test.story.tsx

@@ -143,7 +143,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   return storyConfig(
     {
       render: () => (
-        <ol>
+        <ol className="list-unstyled">
           {variants.map((variant, variantIndex) => (
             <ListItem
               key={`${controlType}-${variantIndex}-${Math.random()}`}

package/src/main.css

@@ -3007,6 +3007,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding: var(--size-12);
   container-type: inline-size;
 }
+.wds-list-item + .wds-list-item-spotlight,
+.wds-list-item-spotlight + .wds-list-item {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}
 .wds-list-item:focus-within {
   z-index: 1;
 }

package/src/test-utils/Parameters.d.ts

@@ -1,77 +0,0 @@
-declare module '@storybook/react' {
-  interface Parameters {
-    /** Prefer using `storyConfig` for configuring variants */
-    variants?: (
-      | 'default'
-      | 'light'
-      | 'dark'
-      | 'bright-green'
-      | 'forest-green'
-      | 'rtl'
-      | (string & Record<string, unknown>)
-    )[];
-    /** Used by Chromatic */
-    chromatic?: ChromaticParameters;
-    viewport?: {
-      viewports?: Record<string, unknown>;
-      defaultViewport?: string;
-    };
-  }
-}
-
-/**
- * Derived from Chromatic's config type definitions
- *
- * @see https://github.com/chromaui/chromatic-cli/blob/main/storybook-addon.d.ts
- */
-export interface ChromaticParameters {
-  /**
-   * Prefer using `storyConfig` for configuring viewports if possible.
-   *
-   * To set a viewport, specify one or more screen widths to the
-   * `chromatic.viewports` parameter. When left unspecified, Chromatic
-   * uses a default value of `[1200]`. Use `[414]` for 'Large mobile'
-   * viewport width.
-   *
-   * @default [1200]
-   */
-  viewports?: [414] | [414, 1200];
-
-  /**
-   * You can omit stories entirely from Chromatic testing using the disable story parameter.
-   */
-  disable?: boolean;
-
-  /**
-   * Chromatic will pause CSS animations and reset them to their beginning state.
-   *
-   * Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
-   * animation at the end, use the `pauseAnimationAtEnd` story parameter.
-   */
-  pauseAnimationAtEnd?: boolean;
-
-  /**
-   * Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
-   * screenshot.
-   */
-  delay?: number;
-
-  /**
-   * The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
-   * they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
-   * visual noise generated by non-deterministic rendering such as anti-aliasing.
-   *
-   * 0 is the most accurate. 1 is the least accurate.
-   *
-   * @default 0.063
-   */
-  diffThreshold?: number;
-
-  /**
-   * Modes for Chromatic testing.
-   *
-   * Specify the mode in which Chromatic should run tests. For example, 'light' for light mode,
-   * 'dark' for dark mode, or `rtl` for right to left content.
-   */
-  modes?: object;
-}