@transferwise/components 46.106.0 → 46.108.0

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,14 +234,20 @@ 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,
         )}
         id={id}
         aria-disabled={disabled}
+        style={
+          {
+            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,
+          } as React.CSSProperties
+        }
       >
-        {spotlight === 'inactive' && (
+        {isFullyInteractive && spotlight === 'inactive' && (
           <svg aria-hidden="true" className="wds-list-item-spotlight__border">
             <rect />
           </svg>
@@ -242,6 +259,7 @@ export const ListItem = ({
             subtitle,
             additionalInfo,
             disabled,
+            disabledPromptMessage,
             prompt,
             controlType,
             controlProps,
@@ -256,11 +274,7 @@ export const ListItem = ({
             style={valueColumnWidth ? gridColumnsStyle : undefined}
           >
             {/* Title + Subtitle + Values - Group */}
-            <span
-              className={clsx({
-                'wds-list-item-body-center': title && !subtitle,
-              })}
-            >
+            <span className="wds-list-item-titles">
               {(() => {
                 const titles = [
                   <Body
@@ -287,8 +301,6 @@ export const ListItem = ({
               <span
                 className={clsx('wds-list-item-value', {
                   'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
-                  'wds-list-item-body-center':
-                    (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),
                 })}
               >
                 {(() => {
@@ -326,6 +338,8 @@ export const ListItem = ({
             <Body
               className={clsx('wds-list-item-control-wrapper', {
                 'wds-list-item-button-control': controlType === 'button',
+                'wds-list-item-button-control--hasPrompt':
+                  controlType === 'button' && Boolean(prompt),
               })}
               style={
                 {
@@ -347,14 +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,
-  subtitle,
   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/ListItem.vars.less

@@ -0,0 +1,11 @@
+// List item has 3 unique layouts managed through container queries:
+// * width <= cq-min
+// * cq-min < width <= cq-max
+// * width > cq-max
+//
+// ⚠️ These values must be kept in sync with:
+// `packages/components/src/listItem/constants.ts`
+//
+// @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
+@wds-list-item-cq-min: 240;
+@wds-list-item-cq-max: 308;

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"

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.css

@@ -0,0 +1,153 @@
+.wds-inline-prompt {
+  display: inline-flex;
+  text-align: left;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.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-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-inline-prompt__media-wrapper {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-inline-prompt--negative a,
+.wds-inline-prompt--negative button {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-inline-prompt--negative a:hover,
+.wds-inline-prompt--negative button:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-inline-prompt--negative a:active,
+.wds-inline-prompt--negative button:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.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-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-inline-prompt--neutral a,
+.wds-inline-prompt--neutral button {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-inline-prompt--warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-inline-prompt--warning a,
+.wds-inline-prompt--warning button {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-inline-prompt--warning a:hover,
+.wds-inline-prompt--warning button:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-inline-prompt--warning a:active,
+.wds-inline-prompt--warning button:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.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-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));
+}

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.less

@@ -0,0 +1,162 @@
+/// @FIXME all tokens here need to be adjusted after
+///        the new sentiment tokens land
+
+.wds-inline-prompt {
+  display: inline-flex;
+  text-align: left;
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: var(--padding-x-small);
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  overflow-wrap: break-word;
+
+  &:has(a),
+  &:has(button) {
+    position: relative;
+    z-index: 1;
+  }
+
+  &--muted {
+    opacity: .93;
+    filter: grayscale(1);
+  }
+
+  a, button {
+    text-underline-offset: calc(var(--size-4) / 2);
+    &:first-of-type {
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+    }
+  }
+
+  &__media-wrapper {
+    padding-right: calc(var(--size-12) / 2);
+    padding-top: calc(var(--size-4) - 1px);
+    padding-bottom: calc(var(--size-4) - 1px);
+
+    .tw-icon-tags,
+    .tw-icon-confetti {
+      color: var(--color-sentiment-positive-primary);
+    }
+  }
+
+  &--negative {
+    background-color: var(--color-sentiment-negative-secondary);
+    color: var(--color-sentiment-negative-primary);
+
+    a, button {
+      color: var(--color-sentiment-negative-primary);
+
+      &:hover {
+        color: var(--color-sentiment-negative-primary-hover);
+      }
+
+      &:active {
+        color: var(--color-sentiment-negative-primary-active);
+      }
+    }
+
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-sentiment-negative-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-sentiment-negative-secondary-active);
+      }
+    }
+  }
+
+  &--positive {
+    background-color: var(--color-sentiment-positive-secondary);
+    color: var(--color-sentiment-positive-primary);
+    a, button {
+      color: var(--color-sentiment-positive-primary);
+      &:hover {
+        color: var(--color-sentiment-positive-primary-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-positive-primary-active);
+      }
+    }
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-sentiment-positive-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-sentiment-positive-secondary-active);
+      }
+    }
+  }
+
+  &--proposition {
+    background-color: var(--color-sentiment-positive-secondary);
+
+    color: var(--color-sentiment-positive-primary);
+
+    a, button {
+      color: var(--color-sentiment-positive-primary);
+      &:hover {
+        color: var(--color-sentiment-positive-primary-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-positive-primary-active);
+      }
+    }
+
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-sentiment-positive-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-sentiment-positive-secondary-active);
+      }
+    }
+  }
+
+  &--neutral {
+    background-color: var(--color-background-neutral);
+    color: var(--color-content-primary);
+
+    a, button {
+      color: var(--color-content-primary);
+    }
+
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-background-neutral-hover);
+      }
+      &:active {
+        background-color: var(--color-background-neutral-active);
+      }
+    }
+  }
+
+  &--warning {
+    background-color: var(--color-sentiment-warning-secondary);
+    color: var(--color-sentiment-warning-content);
+
+    a, button {
+      color: var(--color-sentiment-warning-content);
+      &:hover {
+        color: var(--color-sentiment-warning-content-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-warning-content-active);
+      }
+    }
+
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+      }
+      &:active {
+        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+      }
+    }
+  }
+}

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { mockMatchMedia, render, screen } from '../../../test-utils';
+import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
+import { Sentiment } from '../../../common';
+
+mockMatchMedia();
+
+describe('InlinePrompt', () => {
+  const defaultProps: InlinePromptProps = {
+    children: 'Prompt message',
+  };
+
+  it('renders children', () => {
+    render(<InlinePrompt {...defaultProps}>Hello world</InlinePrompt>);
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  });
+
+  describe('renders with each sentiment', () => {
+    it.each([Sentiment.POSITIVE, Sentiment.NEUTRAL, Sentiment.NEGATIVE, Sentiment.WARNING])(
+      'renders with sentiment %s',
+      (sentiment) => {
+        render(
+          <InlinePrompt
+            {...defaultProps}
+            sentiment={sentiment as InlinePromptProps['sentiment']}
+          />,
+        );
+        expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+          `wds-inline-prompt--${sentiment}`,
+        );
+      },
+    );
+  });
+
+  it('renders muted state', () => {
+    render(<InlinePrompt {...defaultProps} muted />);
+    screen.debug(undefined, 99999999);
+    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+      'wds-inline-prompt--muted',
+    );
+    expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+  });
+
+  it('renders loading state', () => {
+    render(<InlinePrompt {...defaultProps} loading />);
+    screen.debug(undefined, 99999999);
+    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+      'wds-inline-prompt--loading',
+    );
+    expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+  });
+
+  it('applies custom className, id, and data-testid', () => {
+    render(
+      <InlinePrompt
+        {...defaultProps}
+        className="custom-class"
+        id="custom-id"
+        data-testid="custom-test"
+      />,
+    );
+    const el = screen.getByTestId('custom-test');
+    expect(el).toHaveClass('custom-class');
+    expect(el).toHaveAttribute('id', 'custom-id');
+  });
+});