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

package/src/listItem/ListItem.less

@@ -0,0 +1,421 @@
+@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) 0;
+  container-type: inline-size;
+
+  & + .wds-list-item-spotlight,
+  .wds-list-item-spotlight + &{
+    margin-top: var(--size-16);
+  }
+
+  &: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 the only control that didn't work with .wds-list-item-control:focus-visible above. TODO: update checkbox so that it does
+    .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
+      outline: none;
+    }
+
+    .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;
+        }
+      }
+    }
+
+    // spotlighted list item has extra horizontal padding so the focus
+    // and hover styles can be rendered within the main container.
+    &.wds-list-item-spotlight {
+      &:has(.wds-list-item-control:focus-visible),
+      &:has(input[type="checkbox"]:focus-visible) {
+        .ring();
+        outline-offset: -1px;
+      }
+
+      &:not(.disabled, :disabled) {
+        &:hover {
+          background-color: var(--color-background-screen-hover);
+        }
+
+        &:active {
+          background-color: var(--color-background-screen-active);
+        }
+      }
+
+      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
+        &:hover {
+          background-color: unset;
+        }
+      }
+    }
+
+    // non-spotlighted list item has no horizontal padding so the focus
+    // and hover styles have to be rendered out of bounds.
+    &:not(.wds-list-item-spotlight) {
+      &:has(.wds-list-item-control:focus-visible),
+      &:has(input[type="checkbox"]:focus-visible) {
+        &:before {
+          .ring();
+          content: '';
+          position: absolute;
+          inset: 0 -8px;
+          border-radius: var(--radius-medium);
+          outline-offset: -1px;
+        }
+      }
+
+      &:not(.disabled, :disabled) {
+        &:hover,
+        &:active {
+          &:before {
+            content: '';
+            position: absolute;
+            inset: 0 -8px;
+            border-radius: var(--radius-medium);
+          }
+        }
+
+        &:hover:before {
+          background-color: var(--color-background-screen-hover);
+        }
+
+        &:active:before {
+          background-color: var(--color-background-screen-active);
+        }
+      }
+
+      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
+        &:hover:before {
+          background-color: unset;
+        }
+      }
+    }
+
+    &:not(.disabled, :disabled):hover {
+      .wds-list-item-control-wrapper {
+        .wds-Button {
+          background-color: var(--Button-background-hover);
+          color: var(--Button-color-hover);
+          transition: none;
+        }
+      }
+    }
+
+    .wds-list-item-button-control {
+        .wds-Button {
+          transition: none;
+        }
+    }
+  }
+
+  &-media {
+    grid-area: media;
+    display: flex;
+    align-items: start;
+
+    &-image-wrapper {
+      width: var(--wds-list-item-media-size);
+      height: var(--wds-list-item-media-size);
+    }
+
+    &-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &-body {
+    grid-area: body;
+    align-items: center;
+    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);
+    word-break: break-word;
+  }
+
+  &-title, &-title-value {
+      color: var(--color-content-primary);
+  }
+
+  &-value {
+    text-align: right;
+  }
+
+  &-body-center {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &-additional-info {
+      grid-area: info;
+      color: var(--color-content-tertiary);
+      margin-top: calc(var(--size-4) * -1);
+  }
+
+  &-control-wrapper {
+      grid-area: control;
+      align-content: center;
+      height: var(--wds-list-item-control-wrapper-height);
+  }
+
+  &-navigation {
+    .tw-icon-chevron-right {
+      color: var(--color-interactive-secondary);
+    }
+  }
+
+  &-control {
+      flex: 0 0 auto;
+  }
+
+  &.disabled {
+    filter: none;
+    opacity: 1;
+
+    label {
+      cursor: not-allowed;
+    }
+
+    .tw-icon-backslash-circle {
+      color: var(--color-content-tertiary);
+    }
+  }
+
+
+
+  &-spotlight {
+      padding-left: var(--size-12);
+      padding-right: var(--size-12);
+
+      &-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);
+
+          &: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);
+          }
+      }
+  }
+
+  .wds-list-item-spotlight__border{
+    position: absolute;
+    inset:0;
+    width: 100%;
+    height: 100%;
+
+    rect {
+      --wds-list-item-spotlight-borderWidth: 1px;
+      --wds-list-item-spotlight-borderWidthOffset: .5px; // half of the border width to center the border
+      --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * .5);
+
+      fill: none;
+      stroke: var(--color-border-neutral);
+      width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
+      height: calc(100% - var(--wds-list-item-spotlight-borderWidth));
+      x: var(--wds-list-item-spotlight-borderWidthOffset);
+      y: var(--wds-list-item-spotlight-borderWidthOffset);
+      rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
+      ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
+      stroke-dasharray:
+        var(--wds-list-item-spotlight-strokeDashSize)
+        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));
+        }
+      }
+    }
+  }
+}