@transferwise/components 0.0.0-experimental-d1de9e0 → 0.0.0-experimental-161d286

package/src/listItem/ListItem.grid.less

@@ -7,7 +7,9 @@
 
     &.wds-list-item-hasMedia-hasControl,
     &.wds-list-item-hasMedia-noControl {
-      &.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) {
+      &.wds-list-item-noInfo-hasPrompt:not(
+          :has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)
+        ) {
         .wds-list-item-prompt {
           margin-top: -2px;
         }
@@ -18,9 +20,11 @@
       .wds-list-item-control-wrapper {
         height: var(--wds-list-item-control-wrapper-height);
         align-content: center;
+        display: grid;
+        align-items: center;
       }
 
-      .wds-list-item-media-image{
+      .wds-list-item-media-image {
         object-position: center;
       }
 
@@ -29,32 +33,31 @@
           grid-template-columns: auto 1fr auto;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "media body control"
-              ". info ."
-              ". prompt prompt";
+            "media body control"
+            ". info ."
+            ". prompt prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
           grid-template-columns: auto 1fr auto;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "media body control"
-              ". info ."
+            "media body control"
+            ". info .";
         }
 
         &.wds-list-item-noInfo-hasPrompt {
           grid-template-columns: auto 1fr auto;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "media body control"
-              ". prompt prompt";
+            "media body control"
+            ". prompt prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
           grid-template-columns: auto 1fr auto;
           grid-template-rows: auto;
-          grid-template-areas:
-              "media body control"
+          grid-template-areas: "media body control";
         }
       }
 
@@ -63,32 +66,31 @@
           grid-template-columns: auto 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "media body"
-              ". info"
-              ". prompt";
+            "media body"
+            ". info"
+            ". prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
           grid-template-columns: auto 1fr;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "media body"
-              ". info"
+            "media body"
+            ". info";
         }
 
         &.wds-list-item-noInfo-hasPrompt {
           grid-template-columns: auto 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "media body"
-              ". prompt";
+            "media body"
+            ". prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
           grid-template-columns: auto 1fr;
           grid-template-rows: auto;
-          grid-template-areas:
-              "media body"
+          grid-template-areas: "media body";
         }
       }
 
@@ -101,32 +103,31 @@
           grid-template-columns: 1fr auto;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "body control"
-              "info ."
-              "prompt prompt";
+            "body control"
+            "info ."
+            "prompt prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
           grid-template-columns: 1fr auto;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body control"
-              "info ."
+            "body control"
+            "info .";
         }
 
         &.wds-list-item-noInfo-hasPrompt {
           grid-template-columns: 1fr auto;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body control"
-              "prompt prompt";
+            "body control"
+            "prompt prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
           grid-template-columns: 1fr auto;
           grid-template-rows: auto;
-          grid-template-areas:
-              "body control"
+          grid-template-areas: "body control";
         }
       }
 
@@ -139,32 +140,31 @@
           grid-template-columns: 1fr;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "body"
-              "info"
-              "prompt";
+            "body"
+            "info"
+            "prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body"
-              "info"
+            "body"
+            "info";
         }
 
         &.wds-list-item-noInfo-hasPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body"
-              "prompt";
+            "body"
+            "prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto;
-          grid-template-areas:
-              "body"
+          grid-template-areas: "body";
         }
       }
     }
@@ -172,7 +172,7 @@
     // LESS struggles with ranged container queries so
     // we need to escape the interpolated expression.
     @container (~"@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}") {
-      .wds-list-item-media-image{
+      .wds-list-item-media-image {
         object-position: bottom left;
       }
 
@@ -185,72 +185,72 @@
           grid-template-columns: 1fr auto;
           grid-template-rows: auto auto auto auto;
           grid-template-areas:
-              "media media"
-              "body control"
-              "info control"
-              "prompt prompt";
+            "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";
-              }
+          &: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";
+            "media media"
+            "body control"
+            "info control";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "media"
-                    "body"
-                    "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";
+            "media media"
+            "body control"
+            "prompt prompt";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "media"
-                    "body"
-                    "prompt"
-                    "control";
-              }
+          &: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";
+            "media media"
+            "body control";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "media"
-                    "body"
-                    "control";
-              }
+          &:has(.wds-list-item-button-control) {
+            grid-template-columns: 1fr;
+            grid-template-areas:
+              "media"
+              "body"
+              "control";
+          }
         }
       }
 
@@ -259,19 +259,19 @@
           grid-template-columns: auto auto;
           grid-template-rows: auto auto auto auto;
           grid-template-areas:
-              "media media"
-              "body body"
-              "info info"
-              "prompt prompt";
+            "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";
+            "media media"
+            "body body"
+            "info info";
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -279,17 +279,17 @@
           grid-template-rows: auto auto auto;
 
           grid-template-areas:
-              "media media"
-              "body body"
-              "prompt prompt";
+            "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"
+            "media"
+            "body";
         }
       }
 
@@ -302,64 +302,63 @@
           grid-template-columns: 1fr auto;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "body control"
-              "info control"
-              "prompt prompt";
+            "body control"
+            "info control"
+            "prompt prompt";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "info"
-                    "prompt"
-                    "control";
-              }
+          &: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";
+            "body control"
+            "info control";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "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";
+            "body control"
+            "prompt prompt";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "prompt"
-                    "control";
-              }
+          &: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";
+          grid-template-areas: "body control";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "control";
-              }
+          &:has(.wds-list-item-button-control) {
+            grid-template-columns: 1fr;
+            grid-template-areas:
+              "body"
+              "control";
+          }
         }
       }
 
@@ -372,36 +371,35 @@
           grid-template-columns: 1fr;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "body"
-              "info"
-              "prompt";
+            "body"
+            "info"
+            "prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body"
-              "info"
+            "body"
+            "info";
         }
 
         &.wds-list-item-noInfo-hasPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body"
-              "prompt";
+            "body"
+            "prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto;
-          grid-template-areas:
-              "body"
+          grid-template-areas: "body";
         }
       }
 
-      .wds-list-item-button-control--hasPrompt{
+      .wds-list-item-button-control--hasPrompt {
         margin-top: var(--size-4);
       }
     }
@@ -415,65 +413,64 @@
           grid-template-columns: 1fr auto;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "body control"
-              "info control"
-              "prompt prompt";
+            "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";
-              }
+          &: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";
+            "body control"
+            "info control";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "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";
+            "body control"
+            "prompt prompt";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "prompt"
-                    "control";
-              }
+          &: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";
+          grid-template-areas: "body control";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-areas:
-                    "body"
-                    "control";
-              }
+          &:has(.wds-list-item-button-control) {
+            grid-template-columns: 1fr;
+            grid-template-areas:
+              "body"
+              "control";
+          }
         }
       }
 
@@ -482,32 +479,31 @@
           grid-template-columns: 1fr;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "body"
-              "info"
-              "prompt";
+            "body"
+            "info"
+            "prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body"
-              "info"
+            "body"
+            "info";
         }
 
         &.wds-list-item-noInfo-hasPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body"
-              "prompt";
+            "body"
+            "prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto;
-          grid-template-areas:
-              "body"
+          grid-template-areas: "body";
         }
       }
 
@@ -520,69 +516,67 @@
           grid-template-columns: 1fr auto;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "body control"
-              "info control"
-              "prompt prompt";
+            "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";
-              }
+          &: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";
+            "body control"
+            "info control";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto;
-                grid-template-areas:
-                    "body"
-                    "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";
+            "body control"
+            "prompt prompt";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto;
-                grid-template-areas:
-                    "body"
-                    "prompt"
-                    "control";
-              }
+          &: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";
+          grid-template-areas: "body control";
 
-              &:has(.wds-list-item-button-control) {
-                grid-template-columns: 1fr;
-                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";
+          }
         }
       }
 
@@ -595,38 +589,37 @@
           grid-template-columns: 1fr;
           grid-template-rows: auto auto auto;
           grid-template-areas:
-              "body"
-              "info"
-              "prompt";
+            "body"
+            "info"
+            "prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body"
-              "info"
+            "body"
+            "info";
         }
 
         &.wds-list-item-noInfo-hasPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
-              "body"
-              "prompt";
+            "body"
+            "prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
           grid-template-columns: 1fr;
           grid-template-rows: auto;
-          grid-template-areas:
-              "body"
+          grid-template-areas: "body";
         }
       }
 
       .wds-list-item-media {
         display: none;
-        }
+      }
 
       .wds-list-item-body {
         grid-area: body;
@@ -640,7 +633,7 @@
         }
       }
 
-      .wds-list-item-button-control--hasPrompt{
+      .wds-list-item-button-control--hasPrompt {
         margin-top: var(--size-4);
       }
     }