@transferwise/components 0.0.0-experimental-2242f8a → 0.0.0-experimental-5759f4d

package/src/listItem/ListItem.less

@@ -0,0 +1,312 @@
+@import "./ListItem.grid.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.wds-list-item {
+  list-style: none;
+  width: 100%;
+  border-radius: var(--radius-medium);
+  background-color: var(--color-background-screen);
+  position: relative;
+  padding: var(--size-12);
+  container-type: inline-size;
+
+  &:focus-within{
+    z-index: 1;
+  }
+
+  &-view {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+
+    &.fullyInteractive {
+      margin-bottom: 0;
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+    }
+  }
+
+  a {
+    text-underline-offset: calc(var(--size-4) / 2);
+  }
+
+  &-interactive {
+    .wds-list-item-control:focus-visible,
+    // checkboxes are complicated. i could update checkbox but i'd probably break something else
+    .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
+      outline: none;
+    }
+
+    &:has(.wds-list-item-control:focus-visible),
+    &:has(input[type="checkbox"]:focus-visible) {
+      .ring();
+      outline-offset: -1px;
+    }
+
+    .wds-list-item-additional-info {
+      .ring-offset-0
+    }
+
+    a.wds-list-item-control {
+      &, &:hover, &:focus {
+        text-decoration: none;
+      }
+
+      &:has(.wds-list-item-control_pseudo-element) {
+        position: relative;
+        z-index: 1;
+      }
+
+      &.wds-list-item-control_pseudo-element {
+        &:before {
+          content: '';
+          position: absolute;
+          inset: 0;
+        }
+      }
+    }
+
+    &:not(.disabled, :disabled):hover {
+        background-color: var(--color-background-screen-hover);
+
+        .wds-list-item-control-wrapper {
+            .wds-Button {
+              background-color: var(--Button-background-hover);
+              color: var(--Button-color-hover);
+              transition: none;
+            }
+        }
+    }
+
+    &:not(.disabled, :disabled):active {
+        background-color: var(--color-background-screen-active);
+    }
+
+    .wds-list-item-button-control {
+        .wds-Button {
+          transition: none;
+        }
+      }
+
+    &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
+      &:hover {
+        background-color: unset;
+      }
+    }
+  }
+
+  &-media {
+    grid-area: media;
+
+      &-image {
+          width: var(--item-media-image-size);
+          height: var(--item-media-image-size);
+      }
+  }
+
+  &-body {
+    grid-area: body;
+    width: 100%;
+    display: grid;
+    grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
+    gap: var(--size-16);
+  }
+
+  &-title {
+      color: var(--color-content-primary);
+  }
+
+  &-additional-info {
+      grid-area: info;
+      color: var(--color-content-tertiary);
+  }
+
+  &-value {
+      align-items: end;
+      text-align: right;
+  }
+
+  &-control-wrapper {
+      grid-area: control;
+  }
+
+  &-control {
+      flex: 0 0 auto;
+  }
+
+  &.disabled {
+    filter: none;
+    opacity: 1;
+
+    label {
+      cursor: not-allowed;
+    }
+
+    .tw-icon-backslash-circle {
+      color: var(--color-content-tertiary);
+    }
+  }
+
+  &-spotlight {
+      &-active {
+          background-color: var(--color-background-neutral);
+          &:not(.disabled, :disabled):hover {
+              background-color: var(--color-background-neutral-hover);
+          }
+          &:not(.disabled, :disabled):active {
+              background-color: var(--color-background-neutral-active);
+          }
+      }
+
+      &-inactive {
+          background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+          border: 1px dashed var(--color-border-neutral);
+          &:not(.disabled, :disabled):hover {
+              background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+          }
+          &:not(.disabled, :disabled):active {
+              background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+          }
+      }
+  }
+
+  &-prompt {
+    grid-area: prompt;
+
+    display: inline-flex;
+    justify-self: start;
+    text-align: left;
+    padding-top: calc(var(--padding-x-small) / 2);
+    padding-bottom: calc(var(--padding-x-small) / 2);
+    padding-left: calc(var(--padding-x-small) - 1px);
+    padding-right: var(--padding-x-small);
+    border-radius: var(--radius-small);
+    word-break: break-word;
+    overflow-wrap: break-word;
+
+    &:has(a),
+    &:has(button) {
+      position: relative;
+      z-index: 1;
+    }
+
+    a, button {
+      text-underline-offset: calc(var(--size-4) / 2);
+      &:first-of-type {
+        &:before {
+          content: '';
+          position: absolute;
+          inset: 0;
+        }
+      }
+    }
+
+    &.np-prompt-icon {
+      padding-left: calc(var(--padding-x-small) - 1px);
+      padding-right: var(--padding-x-small);
+      display: inline-flex;
+      align-items: center;
+      gap: var(--size-4);
+    }
+
+    .np-prompt-icon {
+      padding-right: calc(var(--size-12) / 2);
+      padding-top: calc(var(--size-4) - 1px);
+      padding-bottom: calc(var(--size-4) - 1px);
+
+      .tw-icon-tags,
+      .tw-icon-confetti {
+        color: var(--color-sentiment-positive-primary);
+      }
+    }
+
+    &.negative {
+      background-color: var(--color-sentiment-negative-secondary);
+      color: var(--color-sentiment-negative-primary);
+      a {
+        color: var(--color-sentiment-negative-primary);
+        &:hover {
+          color: var(--color-sentiment-negative-primary-hover);
+        }
+        &:active {
+          color: var(--color-sentiment-negative-primary-active);
+        }
+      }
+        .wds-list-item-prompt&:has(a, button) {
+        &:hover {
+          background-color: var(--color-sentiment-negative-secondary-hover);
+        }
+        &:active {
+          background-color: var(--color-sentiment-negative-secondary-active);
+        }
+      }
+    }
+    &.positive,
+    &.discount,
+    &.savings {
+      background-color: var(--color-sentiment-positive-secondary);
+      color: var(--color-sentiment-positive-primary);
+      a {
+        color: var(--color-sentiment-positive-primary);
+        &:hover {
+          color: var(--color-sentiment-positive-primary-hover);
+        }
+        &:active {
+          color: var(--color-sentiment-positive-primary-active);
+        }
+      }
+      .wds-list-item-prompt&:has(a, button) {
+        &:hover {
+          background-color: var(--color-sentiment-positive-secondary-hover);
+        }
+        &:active {
+          background-color: var(--color-sentiment-positive-secondary-active);
+        }
+      }
+    }
+    &.neutral {
+      background-color: var(--color-background-neutral);
+      color: var(--color-content-primary);
+      a {
+        color: var(--color-content-primary);
+      }
+      .wds-list-item-prompt&:has(a, button) {
+        &:hover {
+          background-color: var(--color-background-neutral-hover);
+        }
+        &:active {
+          background-color: var(--color-background-neutral-active);
+        }
+      }
+    }
+    &.warning {
+      background-color: var(--color-sentiment-warning-secondary);
+      color: var(--color-sentiment-warning-content);
+      a {
+        color: var(--color-sentiment-warning-content);
+        &:hover {
+          color: var(--color-sentiment-warning-content-hover);
+        }
+        &:active {
+          color: var(--color-sentiment-warning-content-active);
+        }
+      }
+      .wds-list-item-prompt&:has(a, button) {
+        &:hover {
+          // someday we'll have hover and active states for warning
+          // background-color: var(--color-sentiment-warning-secondary-hover);
+          background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+        }
+        &:active {
+          // background-color: var(--color-sentiment-warning-secondary-active);
+          background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+        }
+      }
+    }
+  }
+}

package/src/listItem/ListItem.spec.tsx

@@ -0,0 +1,97 @@
+import { render, screen, mockMatchMedia } from '../test-utils';
+import ListItem from './ListItem';
+
+mockMatchMedia();
+
+describe('ListItem', () => {
+  describe('aria and a11y attributes', () => {
+    it('sets id on the container', () => {
+      render(<ListItem id="custom-id" title="Test Title" />);
+      expect(screen.getByRole('listitem')).toHaveAttribute('id', 'custom-id');
+    });
+
+    it('sets custom role on the container', () => {
+      render(<ListItem title="Test Title" role="button" />);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('sets aria-labelledby when provided', () => {
+      render(<ListItem title="Test Title" aria-labelledby="Accessible label" />);
+      expect(screen.getByRole('listitem')).toHaveAttribute('aria-labelledby', 'Accessible label');
+    });
+
+    it('sets aria-describedby with correct IDs for fully interactive list item with prompt and additionalInfo', () => {
+      render(
+        <ListItem
+          title="Title"
+          subtitle="Subtitle"
+          control={<ListItem.Button>Hello</ListItem.Button>}
+          additionalInfo={<ListItem.AdditionalInfo>Additional Info</ListItem.AdditionalInfo>}
+          prompt={<ListItem.Prompt sentiment="positive">Hello</ListItem.Prompt>}
+        />,
+      );
+      const item = screen.getByRole('button');
+      const describedBy = item.getAttribute('aria-describedby') || '';
+      expect(describedBy).toMatch(/_additional-info/);
+      expect(describedBy).toMatch(/_prompt/);
+    });
+
+    it('sets aria-describedby with correct IDs for partially interactive list item with title, subtitle, value, subvalue, prompt and additionalInfo', () => {
+      render(
+        <ListItem
+          title="Title"
+          subtitle="Subtitle"
+          valueTitle="100"
+          valueSubtitle="200"
+          control={<ListItem.Button partiallyInteractive>Hello</ListItem.Button>}
+          additionalInfo={<ListItem.AdditionalInfo>Additional Info</ListItem.AdditionalInfo>}
+          prompt={<ListItem.Prompt sentiment="negative">Hello</ListItem.Prompt>}
+        />,
+      );
+      const item = screen.getByRole('button');
+      const describedBy = item.getAttribute('aria-describedby') || '';
+      expect(describedBy).toMatch(/_additional-info/);
+      expect(describedBy).toMatch(/_prompt/);
+      expect(describedBy).toMatch(/_title/);
+      expect(describedBy).toMatch(/_subtitle/);
+      expect(describedBy).toMatch(/_value/);
+      expect(describedBy).toMatch(/_value-subtitle/);
+    });
+
+    it('sets aria-disabled when disabled', () => {
+      render(<ListItem title="Disabled" disabled />);
+      expect(screen.getByRole('listitem')).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
+  describe('spotlight', () => {
+    it('only fully interactive variant can have spotlight:active', () => {
+      render(<ListItem title="Test Title" spotlight="active" control={<ListItem.Navigation />} />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-active');
+    });
+
+    it('only fully interactive variant can have spotlight:inactive', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          spotlight="inactive"
+          control={<ListItem.Switch onClick={() => {}} />}
+        />,
+      );
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
+    });
+
+    it('non interactive variant can have spotlight', () => {
+      render(<ListItem title="Test Title" spotlight="inactive" />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-non-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
+    });
+  });
+});