@transferwise/components 46.106.0 → 46.108.0

package/src/listItem/ListItem.css

@@ -9,7 +9,7 @@
 .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: 375px) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@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;
@@ -231,8 +231,12 @@
     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: 297px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -373,11 +377,13 @@
   .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);
+  }
 }
-.wds-list-item-prompt {
-  grid-area: prompt;
+.wds-inline-prompt {
   display: inline-flex;
-  justify-self: start;
   text-align: left;
   padding-top: calc(8px / 2);
   padding-top: calc(var(--padding-x-small) / 2);
@@ -392,33 +398,27 @@
   word-break: break-word;
   word-wrap: break-word;
 }
-.wds-list-item-prompt:has(a),
-.wds-list-item-prompt:has(button) {
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
   position: relative;
   z-index: 1;
 }
-.wds-list-item-prompt a,
-.wds-list-item-prompt button {
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
-.wds-list-item-prompt a:first-of-type:before,
-.wds-list-item-prompt button:first-of-type:before {
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
   content: '';
   position: absolute;
   inset: 0;
 }
-.wds-list-item-prompt.np-prompt-icon {
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  gap: var(--size-4);
-}
-.wds-list-item-prompt .np-prompt-icon {
+.wds-inline-prompt__media-wrapper {
   padding-right: calc(12px / 2);
   padding-right: calc(var(--size-12) / 2);
   padding-top: calc(4px - 1px);
@@ -426,111 +426,119 @@
   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 {
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
-.wds-list-item-prompt.negative {
+.wds-inline-prompt--negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
 }
-.wds-list-item-prompt.negative a,
-.wds-list-item-prompt.negative button {
+.wds-inline-prompt--negative a,
+.wds-inline-prompt--negative button {
   color: var(--color-sentiment-negative-primary);
 }
-.wds-list-item-prompt.negative a:hover,
-.wds-list-item-prompt.negative button:hover {
+.wds-inline-prompt--negative a:hover,
+.wds-inline-prompt--negative button:hover {
   color: var(--color-sentiment-negative-primary-hover);
 }
-.wds-list-item-prompt.negative a:active,
-.wds-list-item-prompt.negative button:active {
+.wds-inline-prompt--negative a:active,
+.wds-inline-prompt--negative button:active {
   color: var(--color-sentiment-negative-primary-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
   background-color: var(--color-sentiment-negative-secondary-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
   background-color: var(--color-sentiment-negative-secondary-active);
 }
-.wds-list-item-prompt.positive,
-.wds-list-item-prompt.discount,
-.wds-list-item-prompt.savings {
+.wds-inline-prompt--positive {
   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,
-.wds-list-item-prompt.positive button,
-.wds-list-item-prompt.discount button,
-.wds-list-item-prompt.savings button {
+.wds-inline-prompt--positive a,
+.wds-inline-prompt--positive button {
   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,
-.wds-list-item-prompt.positive button:hover,
-.wds-list-item-prompt.discount button:hover,
-.wds-list-item-prompt.savings button:hover {
+.wds-inline-prompt--positive a:hover,
+.wds-inline-prompt--positive button: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,
-.wds-list-item-prompt.positive button:active,
-.wds-list-item-prompt.discount button:active,
-.wds-list-item-prompt.savings button:active {
+.wds-inline-prompt--positive a:active,
+.wds-inline-prompt--positive button:active {
   color: var(--color-sentiment-positive-primary-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
   background-color: var(--color-sentiment-positive-secondary-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
   background-color: var(--color-sentiment-positive-secondary-active);
 }
-.wds-list-item-prompt.neutral {
+.wds-inline-prompt--proposition {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--proposition a,
+.wds-inline-prompt--proposition button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--proposition a:hover,
+.wds-inline-prompt--proposition button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-inline-prompt--proposition a:active,
+.wds-inline-prompt--proposition button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-inline-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,
-.wds-list-item-prompt.neutral button {
+.wds-inline-prompt--neutral a,
+.wds-inline-prompt--neutral button {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
   background-color: var(--color-background-neutral-active);
 }
-.wds-list-item-prompt.warning {
+.wds-inline-prompt--warning {
   background-color: var(--color-sentiment-warning-secondary);
   color: var(--color-sentiment-warning-content);
 }
-.wds-list-item-prompt.warning a,
-.wds-list-item-prompt.warning button {
+.wds-inline-prompt--warning a,
+.wds-inline-prompt--warning button {
   color: var(--color-sentiment-warning-content);
 }
-.wds-list-item-prompt.warning a:hover,
-.wds-list-item-prompt.warning button:hover {
+.wds-inline-prompt--warning a:hover,
+.wds-inline-prompt--warning button:hover {
   color: var(--color-sentiment-warning-content-hover);
 }
-.wds-list-item-prompt.warning a:active,
-.wds-list-item-prompt.warning button:active {
+.wds-inline-prompt--warning a:active,
+.wds-inline-prompt--warning button:active {
   color: var(--color-sentiment-warning-content-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
 }
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
 }
+.wds-list-item-prompt {
+  grid-area: prompt;
+  justify-self: start;
+}
 .wds-list-item {
   list-style: none;
   width: 100%;
@@ -654,7 +662,7 @@
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -665,14 +673,27 @@
   gap: var(--size-16);
   word-break: break-word;
 }
+.wds-list-item-titles,
+.wds-list-item-value {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@container (min-width: 309px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
+.wds-list-item-value {
+  text-align: right;
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-value {
-  text-align: right;
-}
 .wds-list-item-body-center {
   display: flex;
   flex-direction: row;
@@ -699,16 +720,29 @@
   flex: 0 0 auto;
 }
 .wds-list-item.disabled {
-  filter: none;
   opacity: 1;
+  opacity: initial;
 }
+.wds-list-item.disabled,
 .wds-list-item.disabled label {
   cursor: not-allowed;
 }
-.wds-list-item.disabled .tw-icon-backslash-circle {
+.wds-list-item.disabled .wds-list-item-title,
+.wds-list-item.disabled .wds-list-item-title-value,
+.wds-list-item.disabled .wds-list-item-subtitle,
+.wds-list-item.disabled .wds-list-item-subtitle-value,
+.wds-list-item.disabled .wds-list-item-additional-info {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+.wds-list-item.disabled .wds-list-item-media,
+.wds-list-item.disabled .wds-list-item-body,
+.wds-list-item.disabled .wds-list-item-additional-info {
+  opacity: 0.93;
+}
+.wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
+  opacity: 0.93;
+}
 .wds-list-item-spotlight {
   padding-left: 12px;
   padding-left: var(--size-12);

package/src/listItem/ListItem.grid.css

@@ -9,7 +9,7 @@
 .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: 375px) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -105,7 +105,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@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;
@@ -231,8 +231,12 @@
     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: 297px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -373,4 +377,8 @@
   .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.grid.less

@@ -1,3 +1,5 @@
+@import (reference) "./ListItem.vars.less";
+
 .wds-list-item {
   &-gridWrapper {
     display: grid;
@@ -10,9 +12,9 @@
           margin-top: -2px;
         }
       }
-  }
+    }
 
-    @container (min-width: 375px) {
+    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
       .wds-list-item-control-wrapper {
         height: var(--wds-list-item-control-wrapper-height);
         align-content: center;
@@ -167,7 +169,7 @@
       }
     }
 
-    @container (min-width: 297px) and (max-width: 375px) {
+    @container (min-width: unit(@wds-list-item-cq-min + 1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
       .wds-list-item-media-image{
         object-position: bottom left;
       }
@@ -396,9 +398,13 @@
               "body"
         }
       }
+
+      .wds-list-item-button-control--hasPrompt{
+        margin-top: var(--size-4);
+      }
     }
 
-    @container (max-width: 297px) {
+    @container (max-width: unit(@wds-list-item-cq-min, px)) {
       .wds-list-item-control-wrapper {
         align-content: start;
       }
@@ -631,6 +637,10 @@
           text-align: left;
         }
       }
+
+      .wds-list-item-button-control--hasPrompt{
+        margin-top: var(--size-4);
+      }
     }
   }
 }

package/src/listItem/ListItem.less

@@ -1,6 +1,7 @@
 @import "./ListItem.grid.less";
 @import "./Prompt/ListItemPrompt.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./ListItem.vars.less";
 
 .wds-list-item {
   list-style: none;
@@ -164,7 +165,7 @@
 
   &-body {
     grid-area: body;
-    align-items: center;
+    align-items: start;
     width: 100%;
     display: grid;
     grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
@@ -172,14 +173,25 @@
     word-break: break-word;
   }
 
-  &-title, &-title-value {
-      color: var(--color-content-primary);
+  &-titles,
+  &-value{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
+      min-height: var(--wds-list-item-value-min-height, 100%);
+    }
   }
 
   &-value {
     text-align: right;
   }
 
+  &-title, &-title-value {
+      color: var(--color-content-primary);
+  }
+
   &-body-center {
     display: flex;
     flex-direction: row;
@@ -211,16 +223,31 @@
   }
 
   &.disabled {
-    filter: none;
-    opacity: 1;
+    opacity: unset;
 
-    label {
+    &, label {
       cursor: not-allowed;
     }
 
-    .tw-icon-backslash-circle {
+    .wds-list-item-title,
+    .wds-list-item-title-value,
+    .wds-list-item-subtitle,
+    .wds-list-item-subtitle-value,
+    .wds-list-item-additional-info {
       color: var(--color-content-tertiary);
     }
+
+    .wds-list-item-media,
+    .wds-list-item-body,
+    .wds-list-item-additional-info {
+      opacity: .93;
+    }
+  }
+
+  &.disabled--has-prompt-reason {
+    .wds-list-item-prompt{
+      opacity: .93;
+    }
   }
 
   &-spotlight {
@@ -252,7 +279,7 @@
           }
       }
 
-      
+
   }
 
   .wds-list-item-spotlight__border{

package/src/listItem/ListItem.spec.tsx

@@ -14,6 +14,7 @@ describe('ListItem', () => {
   const additionalInfo = '__additionalInfo__';
   const additionalInfoAction = '__infoAction__';
   const prompt = '__prompt__';
+  const disabledPromptMessage = '__disabledPromptMessage__';
   const promptAction = '__promptAction__';
   const promptWithLink = (
     <>
@@ -1484,6 +1485,7 @@ describe('ListItem', () => {
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-interactive');
       expect(listItem).toHaveClass('wds-list-item-spotlight-active');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).not.toBeInTheDocument();
     });
 
     it('only fully interactive variant can have spotlight:inactive', () => {
@@ -1497,15 +1499,49 @@ describe('ListItem', () => {
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-interactive');
       expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).toBeInTheDocument();
     });
 
-    it('non interactive variant can have spotlight', () => {
+    it('non interactive variant cannot have spotlight', () => {
       render(<ListItem title="Test Title" spotlight="inactive" />);
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-non-interactive');
       expect(listItem).not.toHaveClass('wds-list-item-interactive');
       expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
       expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('disable states', () => {
+    describe('short-lived', () => {
+      it('should override existing prompt if disabled and disabledPromptMessage are set', () => {
+        render(
+          <ListItem
+            title="Test Title"
+            prompt={<ListItem.Prompt>{prompt}</ListItem.Prompt>}
+            disabled
+            disabledPromptMessage={disabledPromptMessage}
+          />,
+        );
+        expect(screen.queryByText(prompt)).not.toBeInTheDocument();
+        expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
+        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
+          'id',
+          expect.stringMatching(/_prompt$/),
+        );
+      });
+
+      it('should render muted prompt if disabled and disabledPromptMessage are set', () => {
+        render(
+          <ListItem title="Test Title" disabled disabledPromptMessage={disabledPromptMessage} />,
+        );
+        expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
+        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
+          'id',
+          expect.stringMatching(/_prompt$/),
+        );
+      });
     });
   });
 });