@transferwise/components 46.107.0 → 46.108.0

package/src/listItem/_stories/ListItem.story.tsx

@@ -58,6 +58,7 @@ export default {
     valueTitle: '100 GBP',
     valueSubtitle: '100 USD',
     disabled: false,
+    disabledPromptMessage: undefined,
     spotlight: undefined,
     inverted: false,
     valueColumnWidth: undefined,
@@ -564,183 +565,6 @@ export const Interactivity: StoryObj<PreviewStoryArgs> = storySourceWithoutNoise
   },
 });
 
-/**
- * While most disabled states will show as grayed out, the navigation control switches from chevron
- * to a new icon for improved user experience and accessibility. <br />
- * For the same reason, only the control part of the List Item is dimmed, while all the content
- * retains high contrast and interactivity.
- *
- * Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
- */
-export const Disabled: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-    controls: { disable: true },
-    knobs: { disable: true },
-  },
-  render: (args) => (
-    <List>
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Navigation"
-        subtitle={lorem5}
-        control={<ListItem.Navigation onClick={() => {}} />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Button secondary neutral"
-        subtitle={lorem5}
-        control={<ListItem.Button priority="secondary-neutral">Secondary Neutral</ListItem.Button>}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Button primary"
-        subtitle={lorem5}
-        control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Button tertiary"
-        subtitle={lorem5}
-        control={<ListItem.Button priority="tertiary">Tertiary</ListItem.Button>}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Icon Button"
-        subtitle={lorem5}
-        control={
-          <ListItem.IconButton>
-            <Plus />
-          </ListItem.IconButton>
-        }
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Checkbox"
-        subtitle={lorem5}
-        control={<ListItem.Checkbox />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Checkbox checked"
-        subtitle={lorem5}
-        control={<ListItem.Checkbox checked />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Checkbox indeterminate"
-        subtitle={lorem5}
-        control={<ListItem.Checkbox indeterminate />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch on"
-        subtitle={lorem5}
-        control={<ListItem.Switch checked onClick={() => {}} />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch off"
-        subtitle={lorem5}
-        control={<ListItem.Switch onClick={() => {}} />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch off"
-        subtitle={lorem5}
-        control={<ListItem.Radio name="radio" checked />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch off"
-        subtitle={lorem5}
-        control={<ListItem.Radio name="radios" />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch off"
-        subtitle={lorem5}
-        additionalInfo={ADDITIONAL_INFO.interactive}
-        prompt={PROMPTS.interactive}
-        control={
-          <ListItem.Button partiallyInteractive onClick={() => {}}>
-            Click me
-          </ListItem.Button>
-        }
-      />
-    </List>
-  ),
-};
-
 /**
  * For backwards compatibility, all of the ListItem's content elements accept `ReactNode`.
  * That said, most of them should be fed with plain text only. The exception is `valueTitle`

package/src/listItem/_stories/helpers.tsx

@@ -43,6 +43,7 @@ export const withoutKey: Decorator = (Story, { args }) => {
   const key = [
     args.previewInteractivity,
     args?.disabled ? 'disabled' : 'enabled',
+    args?.disabledPromptMessage ? 'withReason' : 'withoutReason',
     args?.inverted ? 'desc' : 'asc',
   ].join('-');
 

package/src/listItem/_stories/subcomponents.tsx

@@ -144,6 +144,11 @@ export const SB_LIST_ITEM_MEDIA = {
       src="https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg"
     />
   ),
+  avatarFlag: (
+    <ListItem.AvatarView>
+      <Flag code="de" />
+    </ListItem.AvatarView>
+  ),
   avatarSingle: (
     <ListItem.AvatarView>
       <Briefcase />

package/src/main.css

@@ -3026,10 +3026,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     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);
@@ -3044,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);
@@ -3078,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-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%;
@@ -3364,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);
@@ -3932,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;