@transferwise/components 0.0.0-experimental-4533565 → 0.0.0-experimental-feb2ddf

package/src/listItem/ListItem.css

@@ -1,6 +1,188 @@
-.np-list-item {
+.wds-list-item {
+  padding: 16px;
+  padding: var(--size-16);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+}
+.wds-list-item-interactive {
+  cursor: pointer;
+}
+.wds-list-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-list-item-interactive:active {
+  background-color: var(--color-background-screen-active);
+}
+.wds-list-item-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.wds-list-item-body {
   width: 100%;
 }
-.np-list-item__action {
-  flex-shrink: 0;
+.wds-list-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.wds-list-item-value {
+  flex: 0 0 auto;
+}
+.wds-list-item-control {
+  flex: 0 0 auto;
+}
+.wds-list-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.wds-list-item-spotlight-active:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-spotlight-active:active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.wds-list-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.wds-list-item-spotlight-inactive:hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-list-item-spotlight-inactive:active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-list-item-prompt {
+  display: inline-flex;
+  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 .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 a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt.np-prompt-interactive {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+}
+.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 {
+  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 {
+  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 {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:hover,
+.np-prompt-interactive.wds-list-item-prompt.discount:hover,
+.np-prompt-interactive.wds-list-item-prompt.savings:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:active,
+.np-prompt-interactive.wds-list-item-prompt.discount:active,
+.np-prompt-interactive.wds-list-item-prompt.savings:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+}
+.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 {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral: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 {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
 }

package/src/listItem/ListItem.less

@@ -1,7 +1,182 @@
-.np-list-item {
-  width: 100%;
+.wds-list-item {
+    padding: var(--size-16);
+    border-radius: var(--radius-large);
+    background-color: var(--color-background-screen);
+    gap: var(--size-16);
 
-  &__action {
-    flex-shrink: 0;
-  }
+    &-interactive {
+      cursor: pointer;
+      &:hover {
+          background-color: var(--color-background-screen-hover);
+      }
+      &:active {
+          background-color: var(--color-background-screen-active);
+      }
+    }
+
+    &-media {
+
+        &-image {
+            width: var(--item-media-image-size);
+            height: var(--item-media-image-size);
+        }
+    }
+
+    &-body {
+      width: 100%;
+    }
+
+    &-title {
+        color: var(--color-content-primary);
+    }
+
+    &-additional-info {
+        color: var(--color-content-tertiary);
+    }
+
+    &-value {
+      flex: 0 0 auto;
+    }
+    
+    &-control {
+        flex: 0 0 auto;
+    }
+
+    &-spotlight {
+        &-active {
+            background-color: var(--color-background-neutral);
+
+            &:hover {
+                background-color: var(--color-background-neutral-hover);
+            }
+            &: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);
+        
+            &:hover {
+                background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+            }
+            &:active {
+                background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+            }
+        }
+    }
+
+    &-prompt {
+        display: inline-flex;
+        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;
+        
+        .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);
+          }
+        }
+      
+        a {
+          text-underline-offset: calc(var(--size-4) / 2); 
+        }
+      
+        &.np-prompt-interactive {
+          text-decoration: none;
+          cursor: pointer;
+          border: none;
+        }
+      
+        &.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);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+            }
+          }
+        }
+        &.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);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+            }
+          }
+        }
+        &.neutral {
+          background-color: var(--color-background-neutral);
+          color: var(--color-content-primary);
+          a {
+            color: var(--color-content-primary);
+          }
+          .np-prompt-interactive& {
+            &: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);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+            }
+          }
+        } 
+    }
 }