@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-9f6647e

package/src/listItem/ListItem.grid.css

@@ -0,0 +1,384 @@
+.wds-list-item-gridWrapper {
+  display: grid;
+  grid-gap: 4px 12px;
+  grid-gap: var(--size-4) var(--size-12);
+  gap: 4px 12px;
+  gap: var(--size-4) var(--size-12);
+}
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
+  margin-top: -2px;
+}
+@container (min-width: 309px) {
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    height: var(--wds-list-item-control-wrapper-height);
+    align-content: center;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-media-image {
+    -o-object-position: center;
+       object-position: center;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media body control" ". info ." ". prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body control" ". info .";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body control" ". prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "media body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body" ". info" ". prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media body" ". info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body" ". prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "media body";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body control" "info ." "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "info .";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+  }
+}
+@container (min-width: 241px) and (max-width: 308px) {
+  .wds-list-item-gridWrapper .wds-list-item-media-image {
+    -o-object-position: bottom left;
+       object-position: bottom left;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    align-content: start;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto auto;
+    grid-template-areas: "media media" "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "media" "body" "info" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media media" "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "media" "body" "info" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media media" "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "media" "body" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media media" "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "media" "body" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto auto auto;
+    grid-template-areas: "media media" "body body" "info info" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media media" "body body" "info info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media media" "body body" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media" "body";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "info" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "info" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+  }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
+}
+@container (max-width: 240px) {
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    align-content: start;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "info" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+  }
+  .wds-list-item-gridWrapper .wds-list-item-media {
+    display: none;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-body {
+    grid-area: body;
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: start;
+    grid-gap: 0;
+    gap: 0;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
+    text-align: left;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
+}

package/src/listItem/ListItem.less

@@ -1,6 +1,6 @@
 @import "./ListItem.grid.less";
 @import "./Prompt/ListItemPrompt.less";
-@import (reference) "./../neptune-css/less/ring.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 @import (reference) "./ListItem.vars.less";
 
 .wds-list-item {

package/src/listItem/Prompt/ListItemPrompt.css

@@ -0,0 +1,4 @@
+.wds-list-item-prompt {
+  grid-area: prompt;
+  justify-self: start;
+}