@transferwise/components 0.0.0-experimental-2242f8a → 0.0.0-experimental-5759f4d

package/src/listItem/ListItem.grid.less

@@ -0,0 +1,612 @@
+.wds-list-item {
+  &-gridWrapper {
+    display: grid;
+    gap: var(--size-4) var(--size-16);
+
+    @container (min-width: 376px) {
+      &.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"
+              "media info control"
+              "media prompt prompt";
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: auto 1fr auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "media body control"
+              "media info control"
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: auto 1fr auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "media body control"
+              "media prompt prompt";
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: auto 1fr auto;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "media body control"
+        }
+      }
+
+      &.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"
+              "media info"
+              "media prompt";
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: auto 1fr;
+          grid-template-rows: auto auto auto;
+          grid-template-areas:
+              "media body"
+              "media info" 
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: auto 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "media body"
+              "media prompt";
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: auto 1fr;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "media body"
+        }
+      }
+
+      &.wds-list-item-noMedia-hasControl {
+        .wds-list-item-prompt {
+          grid-column: 1 / -1;
+        }
+
+        &.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-hasInfo-noPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body control"
+              "info control"
+        }
+
+        &.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-noInfo-noPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "body control"
+        }
+      }
+
+      &.wds-list-item-noMedia-noControl {
+        .wds-list-item-prompt {
+          grid-column: 1 / -1;
+        }
+
+        &.wds-list-item-hasInfo-hasPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto auto;
+          grid-template-areas:
+              "body"
+              "info"
+              "prompt";
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body"
+              "info"
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body"
+              "prompt";
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "body"
+        }
+      }
+    }
+
+    @container (min-width: 297px) and (max-width: 375px) {
+      &.wds-list-item-hasMedia-hasControl {
+        .wds-list-item-media {
+          margin-bottom: var(--size-16);
+        }
+        &.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";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "media"
+                    "body"
+                    "info"
+                    "prompt"
+                    "control";
+              }
+        }
+
+        &.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";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "media"
+                    "body"
+                    "info"
+                    "control";
+              }
+        }
+
+        &.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";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "media"
+                    "body"
+                    "prompt"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "media media"
+              "body control";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "media"
+                    "body"
+                    "control";
+              }
+        }
+      }
+
+      &.wds-list-item-hasMedia-noControl {
+          .wds-list-item-media {
+          margin-bottom: var(--size-16);
+        }
+        &.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-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-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-noInfo-noPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "media"
+              "body"
+        }
+      }
+
+      &.wds-list-item-noMedia-hasControl {
+        .wds-list-item-prompt {
+          grid-column: 1 / -1;
+        }
+
+        &.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";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "body"
+                    "info"
+                    "prompt"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body control"
+              "info control";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "body"
+                    "info"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body control"
+              "prompt prompt";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "body"
+                    "prompt"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "body control";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "body"
+                    "control";
+              }
+        }
+      }
+
+      &.wds-list-item-noMedia-noControl {
+        .wds-list-item-prompt {
+          grid-column: 1 / -1;
+        }
+
+        &.wds-list-item-hasInfo-hasPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto auto;
+          grid-template-areas:
+              "body"
+              "info"
+              "prompt";
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body"
+              "info"
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body"
+              "prompt";
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "body"
+        }
+      }
+    }
+
+    @container (max-width: 296px) {
+      &.wds-list-item-hasMedia-hasControl {
+        &.wds-list-item-hasInfo-hasPrompt {
+          grid-template-columns: auto 1fr;
+          grid-template-rows: auto auto auto;
+          grid-template-areas:
+              "body control"
+              "info control"
+              "prompt prompt";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                grid-template-areas:
+                    "body"
+                    "info"
+                    "prompt"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: auto 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body control"
+              "info control";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "body"
+                    "info"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: auto 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body control"
+              "prompt prompt";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "body"
+                    "prompt"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: auto 1fr;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "body control";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-areas:
+                    "body"
+                    "control";
+              }
+        }
+      }
+
+      &.wds-list-item-hasMedia-noControl {
+        &.wds-list-item-hasInfo-hasPrompt {
+          grid-template-columns: auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body"
+              "info"
+              "prompt";
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: auto;
+          grid-template-rows: auto auto auto;
+          grid-template-areas:
+              "body"
+              "info" 
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body"
+              "prompt";
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "body"
+        }
+      }
+
+      &.wds-list-item-noMedia-hasControl {
+        .wds-list-item-prompt {
+          grid-column: 1 / -1;
+        }
+
+        &.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";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                grid-template-areas:
+                    "body"
+                    "info"
+                    "prompt"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body control"
+              "info control";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                grid-template-areas:
+                    "body"
+                    "info"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body control"
+              "prompt prompt";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                grid-template-areas:
+                    "body"
+                    "prompt"
+                    "control";
+              }
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "body control";
+
+              &:has(.wds-list-item-button-control) {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto;
+                grid-template-areas:
+                    "body"
+                    "control";
+              }
+        }
+      }
+
+      &.wds-list-item-noMedia-noControl {
+        .wds-list-item-prompt {
+          grid-column: 1 / -1;
+        }
+
+        &.wds-list-item-hasInfo-hasPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto auto;
+          grid-template-areas:
+              "body"
+              "info"
+              "prompt";
+        }
+
+        &.wds-list-item-hasInfo-noPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body"
+              "info"
+        }
+
+        &.wds-list-item-noInfo-hasPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          grid-template-areas:
+              "body"
+              "prompt";
+        }
+
+        &.wds-list-item-noInfo-noPrompt {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto;
+          grid-template-areas:
+              "body"
+        }
+      }
+
+      .wds-list-item-media {
+        display: none;
+        }
+
+      .wds-list-item-body {
+        grid-area: body;
+        display: grid;
+        grid-template-columns: 1fr;
+        justify-items: start;
+        gap: 0;
+
+        .wds-list-item-value {
+          text-align: left;
+        }
+      }
+    }
+  }
+}