@transferwise/components 46.106.0 → 46.108.0

package/build/styles/listItem/Prompt/ListItemPrompt.css

@@ -1,7 +1,5 @@
-.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);
@@ -16,33 +14,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);
@@ -50,108 +42,116 @@
   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;
+}

package/build/styles/main.css

@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .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;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     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;
@@ -2875,8 +2875,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     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;
   }
@@ -3017,11 +3021,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .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);
@@ -3036,33 +3042,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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);
@@ -3070,111 +3070,119 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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-inline-prompt--positive a,
+.wds-inline-prompt--positive button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--positive a:hover,
+.wds-inline-prompt--positive button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-inline-prompt--positive a:active,
+.wds-inline-prompt--positive button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-inline-prompt--proposition {
   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--proposition a,
+.wds-inline-prompt--proposition 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--proposition a:hover,
+.wds-inline-prompt--proposition 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--proposition a:active,
+.wds-inline-prompt--proposition 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--proposition: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--proposition:has(a, button):active {
   background-color: var(--color-sentiment-positive-secondary-active);
 }
-.wds-list-item-prompt.neutral {
+.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%;
@@ -3298,7 +3306,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3309,14 +3317,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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;
@@ -3343,16 +3364,29 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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);
@@ -3911,6 +3945,13 @@ button.np-link {
   margin-left: 0;
   margin-left: initial;
 }
+.np-link.np-link--disabled,
+.np-link:disabled {
+  filter: none;
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
 :root {
   --coin-colour: #1c3108;
   --coin-size: 4.5rem;

package/build/summary/Summary.js

@@ -48,6 +48,14 @@ const statusMapping = {
   [status.Status.DONE]: sentiment.Sentiment.POSITIVE,
   [status.Status.PENDING]: sentiment.Sentiment.PENDING
 };
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const Summary = ({
   action,
   as: Element = 'div',

package/build/summary/Summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: AlertAction;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={clsx('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      {icon && (\n        <div className=\"np-summary__icon\">\n          {media}\n          {Badge && (\n            <div>\n              {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n              <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n            </div>\n          )}\n        </div>\n      )}\n      <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={6}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary text-overflow-wrap m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n          >\n            {description}\n          </Body>\n        )}\n        {action && (\n          <Link\n            href={action.href}\n            target={action.target}\n            className=\"np-summary__action\"\n            aria-label={action['aria-label']}\n            onClick={action.onClick}\n          >\n            {action.text}\n          </Link>\n        )}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"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"}
+{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n  CheckCircleFill as CheckCircleIcon,\n  ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n  Status,\n  StatusDone,\n  StatusNotDone,\n  StatusPending,\n  Size,\n  Typography,\n  Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n  [Status.DONE]: CheckCircleIcon,\n  [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n  [Status.NOT_DONE]: 'statusNotDone',\n  [Status.DONE]: 'statusDone',\n  [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n  [Status.DONE]: Sentiment.POSITIVE,\n  [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n  /**\n   * Action displayed at the bottom of the Summary\n   */\n  action?: AlertAction;\n  /**\n   * Decides which html element should wrap the Summary\n   */\n  as?: ElementType;\n  /**\n   * Extra classes applied to Summary\n   */\n  className?: string;\n  /**\n   * @deprecated please use description instead\n   */\n  content?: ReactNode;\n  /**\n   * Summary description\n   */\n  description?: ReactNode;\n  /**\n   * @deprecated please use info instead\n   */\n  help?: {\n    content: ReactNode;\n    title?: ReactNode;\n  };\n  /**\n   * Infos displayed on help Icon click inside Popover or Modal\n   */\n  info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n  /**\n   * @deprecated please use icon instead\n   */\n  illustration?: ReactNode;\n  /**\n   * Main Summary Icon\n   */\n  icon?: ReactNode;\n  /**\n   * Decides the badge applied to Icon\n   */\n  status?: StatusNotDone | StatusDone | StatusPending;\n  /**\n   * Summary title\n   */\n  title: ReactNode;\n}\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst Summary = ({\n  action,\n  as: Element = 'div',\n  className,\n  content = null,\n  description = content,\n  help,\n  icon,\n  illustration = null,\n  info = help,\n  status,\n  title,\n}: Props) => {\n  const intl = useIntl();\n\n  let media = illustration;\n  if (icon) {\n    // @ts-expect-error if icon is present it has props and size prop\n    const iconSize = icon?.props?.size as number;\n\n    media =\n      iconSize !== 24\n        ? // @ts-expect-error we need icon to adjust it's size\n          cloneElement(icon, { size: 24 })\n        : icon;\n  }\n  // @ts-expect-error Badge can be null, this is handled in code\n  const Badge = status && BadgeIcons[status];\n\n  return (\n    <Element\n      className={clsx('np-summary d-flex align-items-start', className)}\n      // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n      aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n    >\n      {icon && (\n        <div className=\"np-summary__icon\">\n          {media}\n          {Badge && (\n            <div>\n              {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n              <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n            </div>\n          )}\n        </div>\n      )}\n      <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n        <div className=\"np-summary__title d-flex\">\n          <Body\n            as=\"span\"\n            role=\"heading\"\n            aria-level={6}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"text-primary text-overflow-wrap m-b-1\"\n          >\n            {title}\n          </Body>\n          {info && (\n            <Info\n              aria-label={info['aria-label']}\n              className=\"m-l-1 hidden-xs\"\n              content={info.content}\n              presentation={info.presentation}\n              size={Size.LARGE}\n              title={info.title}\n              onClick={info.onClick}\n            />\n          )}\n        </div>\n\n        {description && (\n          <Body\n            as=\"span\"\n            type={Typography.BODY_DEFAULT}\n            className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n          >\n            {description}\n          </Body>\n        )}\n        {action && (\n          <Link\n            href={action.href}\n            target={action.target}\n            className=\"np-summary__action\"\n            aria-label={action['aria-label']}\n            onClick={action.onClick}\n          >\n            {action.text}\n          </Link>\n        )}\n      </div>\n      {info && (\n        <Info\n          aria-label={info['aria-label']}\n          className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n          content={info.content}\n          presentation={info.presentation}\n          size={Size.LARGE}\n          title={info.title}\n          onClick={info.onClick}\n        />\n      )}\n    </Element>\n  );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"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"}

package/build/summary/Summary.mjs

@@ -44,6 +44,14 @@ const statusMapping = {
   [Status.DONE]: Sentiment.POSITIVE,
   [Status.PENDING]: Sentiment.PENDING
 };
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const Summary = ({
   action,
   as: Element = 'div',