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

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

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

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

@@ -0,0 +1,119 @@
+import { Edit } from '@transferwise/icons';
+import userEvent from '@testing-library/user-event';
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+mockMatchMedia();
+
+describe('ListItem.IconButton', () => {
+  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
+    render(<ListItem title="Test title" {...overrides} />);
+
+  describe('as button', () => {
+    it('renders as button by default', () => {
+      renderWith({
+        control: (
+          <ListItem.IconButton>
+            <Edit />
+          </ListItem.IconButton>
+        ),
+      });
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('renders as button if onClick is provided', () => {
+      renderWith({
+        control: (
+          <ListItem.IconButton onClick={() => {}}>
+            <Edit />
+          </ListItem.IconButton>
+        ),
+      });
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('handles onClick events', async () => {
+      const handleClick = jest.fn();
+      renderWith({
+        control: (
+          <ListItem.IconButton onClick={handleClick}>
+            <Edit />
+          </ListItem.IconButton>
+        ),
+      });
+
+      await userEvent.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('is disabled when ListItem is disabled', async () => {
+      const handleClick = jest.fn();
+      renderWith({
+        disabled: true,
+        control: (
+          <ListItem.IconButton onClick={handleClick}>
+            <Edit />
+          </ListItem.IconButton>
+        ),
+      });
+
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+      await userEvent.click(button);
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('as link', () => {
+    it('renders as link when href is provided', () => {
+      renderWith({
+        control: (
+          <ListItem.IconButton href="/test">
+            <Edit />
+          </ListItem.IconButton>
+        ),
+      });
+
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/test');
+    });
+
+    it('supports target attribute for links', () => {
+      renderWith({
+        control: (
+          <ListItem.IconButton href="/test" target="_blank">
+            <Edit />
+          </ListItem.IconButton>
+        ),
+      });
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('is disabled when ListItem is disabled', async () => {
+      renderWith({
+        disabled: true,
+        control: (
+          <ListItem.IconButton href="/test">
+            <Edit />
+          </ListItem.IconButton>
+        ),
+      });
+      expect(screen.getByRole('link')).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
+  it('renders children content', () => {
+    renderWith({
+      control: (
+        <ListItem.IconButton>
+          <Edit />
+        </ListItem.IconButton>
+      ),
+    });
+
+    expect(screen.getByTestId('edit-icon')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { render, screen } from '../../test-utils';
+import { ListItem } from '../ListItem';
+
+describe('ListItem.Image', () => {
+  it('renders image with presentation role when no alt text', () => {
+    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', () => {
+    render(<ListItem.Image src="test-image.jpg" alt="Test image description" />);
+
+    const image = screen.getByRole('graphics-symbol');
+    expect(image).toHaveAttribute('alt', 'Test image description');
+    expect(image).toHaveAttribute('src', 'test-image.jpg');
+  });
+
+  it('renders image with loading prop', () => {
+    render(<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" />);
+    expect(screen.getByRole('presentation')).toHaveClass('custom-image-class');
+  });
+});

package/src/listItem/ListItem.css

@@ -372,6 +372,11 @@
   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/listItem/ListItem.less

@@ -10,6 +10,11 @@
   padding: var(--size-12);
   container-type: inline-size;
 
+  & + .wds-list-item-spotlight,
+  .wds-list-item-spotlight + &{
+    margin-top: var(--size-12);
+  }
+
   &:focus-within{
     z-index: 1;
   }
@@ -136,7 +141,7 @@
   &-control-wrapper {
       grid-area: control;
   }
-  
+
   &-control {
       flex: 0 0 auto;
   }
@@ -154,6 +159,8 @@
     }
   }
 
+
+
   &-spotlight {
       &-active {
           background-color: var(--color-background-neutral);