@transferwise/components 46.107.0 → 46.108.0

package/src/listItem/Prompt/ListItemPrompt.less

@@ -1,134 +1,6 @@
+@import "./InlinePrompt/InlinePrompt.less";
+
 .wds-list-item-prompt {
   grid-area: prompt;
-
-  display: inline-flex;
   justify-self: start;
-  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;
-  }
-
-  a, button {
-    text-underline-offset: calc(var(--size-4) / 2);
-    &:first-of-type {
-      &:before {
-        content: '';
-        position: absolute;
-        inset: 0;
-      }
-    }
-  }
-
-  &.np-prompt-icon {
-    padding-left: calc(var(--padding-x-small) - 1px);
-    padding-right: var(--padding-x-small);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--size-4);
-  }
-
-  .np-prompt-icon {
-    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-list-item-prompt&:has(a, button) {
-      &:hover {
-        background-color: var(--color-sentiment-negative-secondary-hover);
-      }
-      &:active {
-        background-color: var(--color-sentiment-negative-secondary-active);
-      }
-    }
-  }
-  &.positive,
-  &.discount,
-  &.savings {
-    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-list-item-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-list-item-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-list-item-prompt&:has(a, button) {
-      &:hover {
-        // someday we'll have hover and active states for warning
-        // background-color: var(--color-sentiment-warning-secondary-hover);
-        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
-      }
-      &:active {
-        // background-color: var(--color-sentiment-warning-secondary-active);
-        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
-      }
-    }
-  }
 }

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

@@ -33,4 +33,40 @@ describe('ListItem.Prompt', () => {
       expect(screen.getByTestId(iconId)).toBeInTheDocument();
     });
   });
+
+  describe('muted state', () => {
+    it('does not render backslash-cross icon when parent ListItem is disabled and disabledPromptMessage is not', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          disabled
+          prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
+        />,
+      );
+      expect(screen.queryByTestId('InlinePrompt_Muted')).not.toBeInTheDocument();
+    });
+
+    it('does not renders backslash-cross icon when parent ListItem is not disabled but disabledPromptMessage is set', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          disabledPromptMessage="Test reason"
+          prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
+        />,
+      );
+      expect(screen.queryByTestId('InlinePrompt_Muted')).not.toBeInTheDocument();
+    });
+
+    it('renders backslash-cross icon when parent ListItem is disabled and disabledPromptMessage is provided', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          disabled
+          disabledPromptMessage="Test reason"
+          prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
+        />,
+      );
+      expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+    });
+  });
 });

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -4,12 +4,13 @@ import { lorem10, lorem5 } from '../../test-utils';
 import Link from '../../link';
 import List from '../../list';
 import { Sentiment as Sentiments } from '../../common';
-import { ListItem } from '../ListItem';
-import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
+import { withoutKey } from '../_stories/helpers';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from '../_stories/subcomponents';
+import { ListItem } from '../ListItem';
+import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
 
 const meta: Meta<ListItemPromptProps> = {
   component: Prompt,
@@ -19,6 +20,7 @@ const meta: Meta<ListItemPromptProps> = {
       toc: true,
     },
   },
+  decorators: [withoutKey],
   args: {
     sentiment: undefined,
     children: 'You have done a terrible thing',

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -1,30 +1,30 @@
 import { useContext } from 'react';
 import { clsx } from 'clsx';
 import { Sentiment } from '../../common';
-import StatusIcon from '../../statusIcon';
-import Body from '../../body';
 import { ListItemContext, type ListItemContextData } from '../ListItemContext';
+import { InlinePrompt, type InlinePromptProps } from './InlinePrompt';
 
-export type ListItemPromptProps = {
-  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
-  children: React.ReactNode;
-};
+export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'muted'>;
 
 /**
- * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />
+ * This component allows for rendering an Inline Prompt. <br />
+ * In the future it will be a thin wrapper around a standalone component.<br />
  *
  * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
  */
 export const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {
-  const { ids } = useContext<ListItemContextData>(ListItemContext);
+  const { ids, props } = useContext<ListItemContextData>(ListItemContext);
+  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
 
   return (
-    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>
-      <div className="np-prompt-icon">
-        <StatusIcon size={16} sentiment={sentiment} />
-      </div>
-      <Body>{children}</Body>
-    </div>
+    <InlinePrompt
+      id={ids.prompt}
+      sentiment={sentiment}
+      muted={isLongLivedMuted}
+      className="wds-list-item-prompt"
+    >
+      {isLongLivedMuted ? props.disabledPromptMessage : children}
+    </InlinePrompt>
   );
 };
 

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

@@ -0,0 +1,433 @@
+import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { MultiCurrency, Plus } from '@transferwise/icons';
+import { lorem10, lorem5 } from '../../test-utils';
+import List from '../../list';
+import Link from '../../link';
+import { ListItem, type ListItemProps } from '../ListItem';
+import type { ListItemPromptProps } from '../Prompt';
+import { disableControls, withoutKey } from './helpers';
+import {
+  SB_LIST_ITEM_TEXT as TEXT,
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from './subcomponents';
+
+const hideControls = disableControls([
+  'title',
+  'subtitle',
+  'valueTitle',
+  'valueSubtitle',
+  'media',
+  'additionalInfo',
+  'prompt',
+  'control',
+  'as',
+  'inverted',
+  'className',
+  'id',
+  'valueColumnWidth',
+]);
+
+const renderPrompt = (sentiment: ListItemPromptProps['sentiment']) => (
+  <ListItem.Prompt sentiment={sentiment}>
+    This prompt contains an <Link href="#target">external link</Link> too.
+  </ListItem.Prompt>
+);
+const disabledPromptMessage = (
+  <>
+    This item is disabled because <Link href="#target">some reason</Link> has not been satisfied.
+  </>
+);
+
+/**
+ * Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
+ */
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/Disabled State',
+  tags: ['autodocs'],
+  decorators: [withoutKey],
+  argTypes: hideControls(),
+  args: {
+    disabled: true,
+    subtitle: TEXT.subtitle,
+    valueTitle: TEXT.valueTitle,
+    valueSubtitle: TEXT.valueSubtitle,
+    media: MEDIA.avatarFlag,
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+      toc: true,
+      page: () => (
+        <>
+          <Title>Disabled state</Title>
+          <Subtitle />
+          <Description />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<ListItemProps>;
+type Story = StoryObj<ListItemProps>;
+
+/**
+ * When dealing with dynamic content, e.g. BFFs or general form submissions, it's a common practice
+ * to stop the users from making changes to the inputs while the form is being processed.
+ *
+ * Because these form states are usually short-lived, and would take at most few seconds to
+ * complete, we don't want to introduce any major content changes that could distract
+ * the user or, even worse, cause layout shift. That's why, by default, toggling the `disabled`
+ * prop will not show any additional visual indicators, apart from the luminosity and opacity
+ * changes.
+ */
+export const ShortLived: Story = {
+  name: 'Short-lived: fully interactive',
+  args: {
+    control: CONTROLS.button,
+  },
+  argTypes: hideControls(['disabledPromptMessage']),
+  render: function Render(args) {
+    return (
+      <List>
+        <ListItem {...args} title="No prompt" control={CONTROLS.navigation} />
+        <ListItem
+          {...args}
+          title="Neutral prompt"
+          prompt={renderPrompt('neutral')}
+          control={CONTROLS.navigation}
+        />
+        <ListItem {...args} title="Positive prompt" prompt={renderPrompt('positive')} />
+        <ListItem {...args} title="Warning prompt" prompt={renderPrompt('warning')} />
+        <ListItem {...args} title="Negative prompt" prompt={renderPrompt('negative')} />
+      </List>
+    );
+  },
+};
+
+/**
+ * There's a difference between fully and partially interactive ListItems. While setting `disabled`
+ * prop on the former applies the visual treatment to the whole item, on the latter ones it only
+ * affects the control element (`ListItem.Button` or `ListItem.IconButton`).
+ *
+ * That way, the inline link or button in the additional info section remains interactive and
+ * accessible.
+ */
+export const ShortLivedPartially: Story = {
+  name: 'Short-lived: partially interactive',
+  args: {
+    additionalInfo: INFO.interactive,
+  },
+  argTypes: hideControls(['spotlight', 'disabledPromptMessage']),
+  render: function Render(args) {
+    return (
+      <List>
+        <ListItem
+          {...args}
+          title="No prompt and disabled control"
+          control={CONTROLS.partialButton}
+        />
+        <ListItem
+          {...args}
+          title="Prompt and disabled Button control"
+          prompt={renderPrompt('warning')}
+          control={CONTROLS.partialButton}
+        />
+        <ListItem
+          {...args}
+          title="Prompt and disabled IconButton control"
+          prompt={renderPrompt('positive')}
+          control={CONTROLS.partialIconButton}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * On the other hand, instances of ListItems that are disabled for longer periods of time and
+ * remain in such state until some user interaction or event occur, can and should offer extended
+ * affordances to the user, so they are aware of the current state of the item and the reason why
+ * it's not available to them.
+ *
+ * To achieve that, we're introducing additional prop `disabledPromptMessage` – it's a
+ * prompt content override only used when ListItem is in the disabled state, and it's expected to
+ * offer reasoning for why given list item has been disabled.
+ *
+ * If set, it will render a variant of the `ListItem.Prompt` component with an icon and colour
+ * scheme designed specifically for this scenario.
+ *
+ * Similarly to the short-lived scenario, fully interactive items will apply the visual treatment
+ * to the whole item. Prompts will remain interactive.
+ */
+export const LongLived: Story = {
+  name: 'Long-lived: fully interactive',
+  args: {
+    disabledPromptMessage,
+    control: CONTROLS.button,
+  },
+  argTypes: hideControls(['disabledPromptMessage']),
+  render: function Render(args) {
+    return (
+      <List>
+        <ListItem
+          {...args}
+          title="No prompt, no disabledPromptMessage"
+          disabledPromptMessage={undefined}
+          control={CONTROLS.navigation}
+        />
+        <ListItem
+          {...args}
+          title="No prompt, disabledPromptMessage set"
+          control={CONTROLS.navigation}
+        />
+        <ListItem
+          {...args}
+          title="Neutral prompt, disabledPromptMessage set"
+          prompt={renderPrompt('neutral')}
+          control={CONTROLS.navigation}
+        />
+        <ListItem
+          {...args}
+          title="Positive prompt, disabledPromptMessage set"
+          prompt={renderPrompt('positive')}
+        />
+        <ListItem
+          {...args}
+          title="Warning prompt, disabledPromptMessage set"
+          prompt={renderPrompt('warning')}
+        />
+        <ListItem
+          {...args}
+          title="Negative prompt, disabledPromptMessage set"
+          prompt={renderPrompt('negative')}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * Similarly to the short-lived scenario, partially interactive items will only apply the visual
+ * treatment to the control element, leaving the additional info section fully interactive and
+ * accessible.
+ *
+ * While programmatically not required, you will be expected to use the `disabledPromptMessage`
+ * prop to offer an explanation to the user on why the item was disabled.
+ */
+export const LongLivedPartially: Story = {
+  name: 'Long-lived: partially interactive',
+  args: {
+    disabledPromptMessage,
+    additionalInfo: INFO.interactive,
+  },
+  argTypes: hideControls(['spotlight', 'disabledPromptMessage']),
+  render: function Render(args) {
+    return (
+      <List>
+        <ListItem
+          {...args}
+          disabledPromptMessage={undefined}
+          title="No prompt, no disabledPromptMessage"
+          control={CONTROLS.partialButton}
+        />
+        <ListItem
+          {...args}
+          title="No prompt, disabledPromptMessage set"
+          control={CONTROLS.partialButton}
+        />
+        <ListItem
+          {...args}
+          title="Prompt set, disabledPromptMessage set"
+          prompt={renderPrompt('warning')}
+          control={CONTROLS.partialIconButton}
+        />
+        <ListItem
+          {...args}
+          title="Prompt set, disabledPromptMessage set"
+          prompt={renderPrompt('positive')}
+          control={CONTROLS.partialIconButton}
+        />
+      </List>
+    );
+  },
+};
+
+export const AllControls: 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 primary"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button secondary neutral"
+        subtitle={lorem5}
+        control={<ListItem.Button>Secondary</ListItem.Button>}
+      />
+      <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 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="Non-interactive"
+        subtitle={lorem10}
+        additionalInfo={INFO.nonInteractive}
+      />
+    </List>
+  ),
+};