@transferwise/components 0.0.0-experimental-e068634 → 0.0.0-experimental-ea9a101

package/src/listItem/ListItem.less

@@ -1,421 +0,0 @@
-@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 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;
-    }
-
-    .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));
-        }
-      }
-    }
-  }
-}