@transferwise/components 46.107.0 → 46.108.0

package/src/listItem/ListItem.css

@@ -382,10 +382,8 @@
     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);
@@ -400,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);
@@ -434,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-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%;
@@ -720,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.less

@@ -223,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 {

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 = (
     <>
@@ -1511,4 +1512,36 @@ describe('ListItem', () => {
       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$/),
+        );
+      });
+    });
+  });
 });

package/src/listItem/ListItem.tsx

@@ -6,7 +6,7 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react';
-import { Typography } from '../common';
+import { Sentiment, Typography } from '../common';
 import Body from '../body';
 import { AdditionalInfo } from './AdditionalInfo';
 import { IconButton, type ListItemIconButtonProps } from './IconButton';
@@ -50,7 +50,16 @@ export type ListItemProps = {
    * Swaps vertical hierarchy of title and subtitle and their corresponding right values.
    */
   inverted?: boolean;
+  /**
+   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.
+   */
   disabled?: boolean;
+  /**
+   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />
+   * **NB:** This message cannot house more than **1** link or inline button.<br />
+   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.
+   */
+  disabledPromptMessage?: ReactNode;
   /**
    * Highlights the list item as an action to be taken or already taken. <br />
    */
@@ -111,6 +120,7 @@ export const ListItem = ({
   valueSubtitle,
   control = null,
   disabled,
+  disabledPromptMessage,
   className,
   valueColumnWidth,
   id,
@@ -126,7 +136,7 @@ export const ListItem = ({
     ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),
     ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),
     control: `${idPrefix}_control`,
-    ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),
+    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),
     ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),
   };
 
@@ -159,8 +169,9 @@ export const ListItem = ({
       setControlProps,
       setMediaSize,
       ids,
-      props: { disabled, inverted },
+      props: { disabled, inverted, disabledPromptMessage },
       mediaSize,
+      isPartiallyInteractive,
       describedByIds,
     }),
     [describedByIds, mediaSize],
@@ -175,7 +186,7 @@ export const ListItem = ({
     const hasMedia = Boolean(media);
     const hasControl = Boolean(control);
     const hasInfo = Boolean(additionalInfo);
-    const hasPrompt = Boolean(prompt);
+    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));
 
     /* eslint-disable functional/immutable-data */
     if (hasMedia && hasControl) {
@@ -223,7 +234,8 @@ export const ListItem = ({
             'wds-list-item-partially-interactive': isPartiallyInteractive,
             [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
               isFullyInteractive && !!spotlight,
-            disabled,
+            disabled: disabled && !isPartiallyInteractive,
+            'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive,
           },
           className,
         )}
@@ -247,6 +259,7 @@ export const ListItem = ({
             subtitle,
             additionalInfo,
             disabled,
+            disabledPromptMessage,
             prompt,
             controlType,
             controlProps,
@@ -348,13 +361,17 @@ type ViewProps = PropsWithChildren<{
   controlType?: ListItemTypes;
   controlProps?: ListItemControlProps;
 }> &
-  Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;
+  Pick<
+    ListItemProps,
+    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'
+  >;
 
 function View({
   children,
   additionalInfo,
   prompt,
   disabled,
+  disabledPromptMessage,
   isPartiallyInteractive,
   controlType = 'non-interactive',
   controlProps,
@@ -365,12 +382,21 @@ function View({
 
   const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;
 
-  const renderExtras = () => (
-    <>
-      {additionalInfo}
-      {prompt}
-    </>
-  );
+  const renderExtras = () => {
+    const resolvedPrompt =
+      disabled && disabledPromptMessage && !prompt ? (
+        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>
+      ) : (
+        prompt
+      );
+
+    return (
+      <>
+        {additionalInfo}
+        {resolvedPrompt}
+      </>
+    );
+  };
 
   if (isLinkControl && isHrefProvided) {
     return (

package/src/listItem/ListItemContext.tsx

@@ -16,8 +16,9 @@ export type ListItemContextData = {
     control: string;
     prompt?: string;
   };
-  props: Pick<ListItemProps, 'disabled' | 'inverted'>;
+  props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;
   mediaSize?: ListItemMediaSize;
+  isPartiallyInteractive?: boolean;
   describedByIds: string;
 };
 

package/src/listItem/Navigation/ListItemNavigation.spec.tsx

@@ -25,8 +25,7 @@ describe('ListItem.Navigation', () => {
         disabled: true,
         control: <ListItem.Navigation onClick={jest.fn()} />,
       });
-      expect(screen.getByTestId('backslash-circle-icon')).toBeInTheDocument();
-      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(screen.queryByRole('button')).toBeDisabled();
       expect(screen.queryByRole('link')).not.toBeInTheDocument();
     });
   });
@@ -48,14 +47,6 @@ describe('ListItem.Navigation', () => {
       expect(link).toHaveAttribute('rel', 'noopener noreferrer');
     });
 
-    it('renders disabled icon when ListItem is disabled', () => {
-      renderWith({
-        disabled: true,
-        control: <ListItem.Navigation href="wise.com" />,
-      });
-      expect(screen.getByTestId('backslash-circle-icon')).toBeInTheDocument();
-    });
-
     it('handles onClick events', async () => {
       const handleClick = jest.fn();
       renderWith({ control: <ListItem.Navigation href="#target" onClick={handleClick} /> });

package/src/listItem/Navigation/ListItemNavigation.story.tsx

@@ -90,25 +90,3 @@ export const AsButton: Story = {
     );
   },
 };
-
-/**
- * Unlike other controls, the Navigation control has a custom disabled state
- * for improved discoverability, accessibility and overall UX.
- */
-export const Disabled: Story = {
-  render: (args) => {
-    return (
-      <List>
-        <ListItem
-          disabled
-          control={<ListItem.Navigation {...args} />}
-          title="This option is disabled"
-          subtitle={lorem10}
-          additionalInfo={INFO.nonInteractive}
-          prompt={PROMPTS.interactive}
-          media={MEDIA.avatarSingle}
-        />
-      </List>
-    );
-  },
-};

package/src/listItem/Navigation/ListItemNavigation.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, BackslashCircle } from '@transferwise/icons';
+import { ChevronRight } from '@transferwise/icons';
 import type { ButtonProps } from '../../button/Button.types';
 import { useListItemControl } from '../useListItemControl';
 import { PrimitiveButton } from '../../primitives';
@@ -20,12 +20,11 @@ export const Navigation = function Navigation({ href, ...props }: ListItemNaviga
   const { ids, describedByIds } = useContext(ListItemContext);
   const icon = <ChevronRight size={16} />;
 
-  if (baseItemProps.disabled) return <BackslashCircle size={24} />;
-
   return href ? (
     <>{icon}</>
   ) : (
     <PrimitiveButton
+      disabled={baseItemProps.disabled}
       aria-describedby={describedByIds}
       id={ids.control}
       className="btn-unstyled wds-list-item-control"