@transferwise/components 0.0.0-experimental-e3978a5 → 0.0.0-experimental-e46526a

package/src/listItem/ListItem.less

@@ -1,4 +1,5 @@
 @import "./ListItem.grid.less";
+@import "./Prompt/ListItemPrompt.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .wds-list-item {
@@ -283,139 +284,4 @@
         var(--wds-list-item-spotlight-strokeDashSize);
     }
   }
-
-  &-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, button {
-        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, button {
-        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, button {
-        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, button {
-        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

@@ -37,16 +37,6 @@ describe('ListItem', () => {
       expect(screen.getByRole('listitem')).toHaveAttribute('id', 'custom-id');
     });
 
-    it('sets custom role on the container', () => {
-      render(<ListItem title={title} role="button" />);
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('sets aria-labelledby when provided', () => {
-      render(<ListItem title={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

package/src/listItem/ListItem.tsx

@@ -92,8 +92,6 @@ export type ListItemProps = {
    */
   valueColumnWidth?: number;
   id?: string;
-  role?: string;
-  'aria-labelledby'?: string;
 };
 
 /**
@@ -115,9 +113,7 @@ export const ListItem = ({
   disabled,
   className,
   valueColumnWidth,
-  role,
   id,
-  'aria-labelledby': ariaLabelledby,
 }: ListItemProps) => {
   const idPrefix = useId();
   const [controlProps, setControlProps] = useState<ListItemControlProps>({});
@@ -232,9 +228,7 @@ export const ListItem = ({
           className,
         )}
         id={id}
-        role={role}
         aria-disabled={disabled}
-        aria-labelledby={ariaLabelledby}
       >
         {spotlight === 'inactive' && (
           <svg aria-hidden="true" className="wds-list-item-spotlight__border">

package/src/listItem/Prompt/ListItemPrompt.css

@@ -0,0 +1,157 @@
+.wds-list-item-prompt {
+  grid-area: prompt;
+  display: inline-flex;
+  justify-self: start;
+  text-align: left;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-list-item-prompt:has(a),
+.wds-list-item-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-list-item-prompt a,
+.wds-list-item-prompt button {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt a:first-of-type:before,
+.wds-list-item-prompt button:first-of-type:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-list-item-prompt.np-prompt-icon {
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  gap: var(--size-4);
+}
+.wds-list-item-prompt .np-prompt-icon {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a,
+.wds-list-item-prompt.negative button {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover,
+.wds-list-item-prompt.negative button:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active,
+.wds-list-item-prompt.negative button:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a,
+.wds-list-item-prompt.positive button,
+.wds-list-item-prompt.discount button,
+.wds-list-item-prompt.savings button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover,
+.wds-list-item-prompt.positive button:hover,
+.wds-list-item-prompt.discount button:hover,
+.wds-list-item-prompt.savings button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active,
+.wds-list-item-prompt.positive button:active,
+.wds-list-item-prompt.discount button:active,
+.wds-list-item-prompt.savings button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-list-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.neutral a,
+.wds-list-item-prompt.neutral button {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a,
+.wds-list-item-prompt.warning button {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover,
+.wds-list-item-prompt.warning button:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active,
+.wds-list-item-prompt.warning button:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+}

package/src/listItem/Prompt/ListItemPrompt.less

@@ -0,0 +1,134 @@
+.wds-list-item-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, button {
+      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, button {
+      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, button {
+      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, button {
+      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/_stories/ListItem.story.tsx

@@ -21,8 +21,6 @@ const hideControls = disableControls([
   'media',
   'className',
   'id',
-  'role',
-  'aria-labelledby',
   'as',
 ]);