@transferwise/components 0.0.0-experimental-7bd726b → 0.0.0-experimental-812a5b7

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -14,14 +14,13 @@ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentimen
  */
 export const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {
   const { ids, props } = useContext<ListItemContextData>(ListItemContext);
-  const isShortLivedMuted = props.disabled;
   const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
 
   return (
     <InlinePrompt
       id={ids.prompt}
       sentiment={sentiment}
-      muted={isLongLivedMuted || isShortLivedMuted}
+      muted={isLongLivedMuted}
       className="wds-list-item-prompt"
     >
       {isLongLivedMuted ? props.disabledPromptMessage : children}

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

@@ -50,8 +50,18 @@ export default {
   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: () => (
         <>
@@ -71,40 +81,30 @@ type Story = StoryObj<ListItemProps>;
  * 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, it's a good practice not to introduce any major content changes that could distract
- * the user or, event worse, cause layout shift. That's why, by default, toggling the `disabled`
+ * 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: {
-    disabled: true,
-    title: TEXT.title,
-    subtitle: TEXT.subtitle,
-    valueTitle: TEXT.valueTitle,
-    valueSubtitle: TEXT.valueSubtitle,
-    media: MEDIA.avatarFlag,
-    control: (
-      <ListItem.Button priority="secondary" onClick={() => {}}>
-        Click me
-      </ListItem.Button>
-    ),
+    control: CONTROLS.button,
   },
   argTypes: hideControls(['disabledPromptMessage']),
   render: function Render(args) {
-    const renderPrompt = (sentiment: ListItemPromptProps['sentiment']) => (
-      <ListItem.Prompt sentiment={sentiment}>
-        This prompt contains an <Link href="#target">external link</Link> too.
-      </ListItem.Prompt>
-    );
-
     return (
       <List>
-        <ListItem {...args} control={CONTROLS.navigation} />
-        <ListItem {...args} prompt={renderPrompt('neutral')} control={CONTROLS.navigation} />
-        <ListItem {...args} prompt={renderPrompt('warning')} />
-        <ListItem {...args} prompt={renderPrompt('positive')} />
+        <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>
     );
   },
@@ -121,27 +121,26 @@ export const ShortLived: Story = {
 export const ShortLivedPartially: Story = {
   name: 'Short-lived: partially interactive',
   args: {
-    disabled: true,
-    title: TEXT.title,
-    subtitle: TEXT.subtitle,
-    valueTitle: TEXT.valueTitle,
-    valueSubtitle: TEXT.valueSubtitle,
-    media: MEDIA.avatarFlag,
     additionalInfo: INFO.interactive,
   },
   argTypes: hideControls(['spotlight', 'disabledPromptMessage']),
   render: function Render(args) {
-    const renderPrompt = (sentiment: ListItemPromptProps['sentiment']) => (
-      <ListItem.Prompt sentiment={sentiment}>
-        This prompt contains an <Link href="#target">external link</Link> too.
-      </ListItem.Prompt>
-    );
-
     return (
       <List>
-        <ListItem {...args} prompt={renderPrompt('warning')} control={CONTROLS.partialButton} />
         <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}
         />
@@ -169,27 +168,45 @@ export const ShortLivedPartially: Story = {
 export const LongLived: Story = {
   name: 'Long-lived: fully interactive',
   args: {
-    disabled: true,
     disabledPromptMessage,
-    title: TEXT.title,
-    subtitle: TEXT.subtitle,
-    valueTitle: TEXT.valueTitle,
-    valueSubtitle: TEXT.valueSubtitle,
-    media: MEDIA.avatarFlag,
-    control: (
-      <ListItem.Button priority="secondary" onClick={() => {}}>
-        Click me
-      </ListItem.Button>
-    ),
+    control: CONTROLS.button,
   },
   argTypes: hideControls(['disabledPromptMessage']),
   render: function Render(args) {
     return (
       <List>
-        <ListItem {...args} control={CONTROLS.navigation} />
-        <ListItem {...args} prompt={renderPrompt('neutral')} control={CONTROLS.navigation} />
-        <ListItem {...args} prompt={renderPrompt('warning')} />
-        <ListItem {...args} prompt={renderPrompt('positive')} />
+        <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>
     );
   },
@@ -206,23 +223,33 @@ export const LongLived: Story = {
 export const LongLivedPartially: Story = {
   name: 'Long-lived: partially interactive',
   args: {
-    disabled: true,
     disabledPromptMessage,
-    title: TEXT.title,
-    subtitle: TEXT.subtitle,
-    valueTitle: TEXT.valueTitle,
-    valueSubtitle: TEXT.valueSubtitle,
-    media: MEDIA.avatarFlag,
     additionalInfo: INFO.interactive,
   },
   argTypes: hideControls(['spotlight', 'disabledPromptMessage']),
   render: function Render(args) {
     return (
       <List>
-        <ListItem {...args} control={CONTROLS.partialButton} />
-        <ListItem {...args} prompt={renderPrompt('warning')} control={CONTROLS.partialButton} />
         <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}
         />

package/src/main.css

@@ -3049,7 +3049,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+  filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
@@ -3356,10 +3356,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-control-wrapper-disabled {
-  opacity: 0.45;
-  mix-blend-mode: luminosity;
-}
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
@@ -3370,7 +3366,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled {
   opacity: 1;
   opacity: initial;
-  filter: initial;
 }
 .wds-list-item.disabled,
 .wds-list-item.disabled label {
@@ -3388,7 +3383,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled .wds-list-item-body,
 .wds-list-item.disabled .wds-list-item-additional-info {
   opacity: 0.93;
-  mix-blend-mode: luminosity;
+}
+.wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
+  opacity: 0.93;
 }
 .wds-list-item-spotlight {
   padding-left: 12px;

package/src/statusIcon/StatusIcon.tsx

@@ -24,7 +24,6 @@ export type StatusIconProps = {
    * Using `null` will render the icon purely presentational.
    * */
   iconLabel?: string | null;
-  className?: string;
 };
 
 const mapLegacySize = {
@@ -33,12 +32,7 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 48,
 } satisfies Record<string, CircleProps['size']>;
 
-const StatusIcon = ({
-  sentiment = 'neutral',
-  size: sizeProp = 40,
-  iconLabel,
-  className,
-}: StatusIconProps) => {
+const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {
   const intl = useIntl();
 
   const iconMetaBySentiment: Record<
@@ -92,7 +86,7 @@ const StatusIcon = ({
       as="span"
       size={isTinyViewport && size < 40 ? 32 : size}
       data-testid="status-icon"
-      className={clsx('status-circle', sentiment, className)}
+      className={clsx('status-circle', sentiment)}
     >
       <Icon
         className={clsx('status-icon', iconColor)}