@transferwise/components 0.0.0-experimental-d3e6e9d → 0.0.0-experimental-18b5666

package/src/listItem/ListItem.less

@@ -12,11 +12,11 @@
   container-type: inline-size;
 
   & + .wds-list-item-spotlight,
-  .wds-list-item-spotlight + &{
+  .wds-list-item-spotlight + & {
     margin-top: var(--size-16);
   }
 
-  &:focus-within{
+  &:focus-within {
     z-index: 1;
   }
 
@@ -30,7 +30,7 @@
     &.fullyInteractive {
       margin-bottom: 0;
       &:before {
-        content: '';
+        content: "";
         position: absolute;
         inset: 0;
       }
@@ -40,7 +40,7 @@
   a {
     text-underline-offset: calc(var(--size-4) / 2);
 
-    .wds-list-item-subtitle, 
+    .wds-list-item-subtitle,
     .wds-list-item-subtitle-value {
       color: var(--color-content-secondary);
     }
@@ -54,11 +54,13 @@
     }
 
     .wds-list-item-additional-info {
-      .ring-offset-0
+      .ring-offset-0;
     }
 
     a.wds-list-item-control {
-      &, &:hover, &:focus {
+      &,
+      &:hover,
+      &:focus {
         text-decoration: none;
       }
 
@@ -69,7 +71,7 @@
 
       &.wds-list-item-control_pseudo-element {
         &:before {
-          content: '';
+          content: "";
           position: absolute;
           inset: 0;
         }
@@ -99,7 +101,7 @@
       &:has(input[type="checkbox"]:focus-visible) {
         &:before {
           .ring();
-          content: '';
+          content: "";
           position: absolute;
           inset: 0 -8px;
           border-radius: var(--radius-medium);
@@ -111,7 +113,7 @@
         &:hover,
         &:active {
           &:before {
-            content: '';
+            content: "";
             position: absolute;
             inset: 0 -8px;
             border-radius: var(--radius-medium);
@@ -145,9 +147,9 @@
     }
 
     .wds-list-item-button-control {
-        .wds-Button {
-          transition: none;
-        }
+      .wds-Button {
+        transition: none;
+      }
     }
   }
 
@@ -173,13 +175,16 @@
     align-items: start;
     width: 100%;
     display: grid;
-    grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
+    grid-template-columns: var(--wds-list-item-body-left, 1fr) var(
+        --wds-list-item-body-right,
+        max-content
+      );
     gap: var(--size-16);
     word-break: break-word;
   }
 
   &-titles,
-  &-value{
+  &-value {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -193,8 +198,9 @@
     text-align: right;
   }
 
-  &-title, &-title-value {
-      color: var(--color-content-primary);
+  &-title,
+  &-title-value {
+    color: var(--color-content-primary);
   }
 
   &-body-center {
@@ -204,17 +210,17 @@
   }
 
   &-additional-info {
-      grid-area: info;
-      color: var(--color-content-tertiary);
-      margin-top: calc(var(--size-4) * -1);
+    grid-area: info;
+    color: var(--color-content-tertiary);
+    margin-top: calc(var(--size-4) * -1);
 
-      button.np-link {
-        text-align: start;
-      }
+    button.np-link {
+      text-align: start;
+    }
   }
 
   &-control-wrapper {
-      grid-area: control;
+    grid-area: control;
   }
 
   &-navigation {
@@ -224,80 +230,89 @@
   }
 
   &-control {
-      flex: 0 0 auto;
+    flex: 0 0 auto;
   }
 
   &.disabled {
     opacity: unset;
 
-    &, label {
+    &,
+    label {
       cursor: not-allowed;
     }
 
-    .wds-list-item-media, .np-avatar-view-content,
+    .wds-list-item-media,
+    .np-avatar-view-content,
     .wds-list-item-title,
     .wds-list-item-title-value,
     .wds-list-item-subtitle,
     .wds-list-item-subtitle-value,
-    .wds-list-item-additional-info {
+    .wds-list-item-additional-info,
+    .wds-list-item-additional-info :is(strong, b) {
       color: var(--color-content-tertiary);
     }
 
     .wds-list-item-media,
     .wds-list-item-body,
     .wds-list-item-additional-info {
-      opacity: .93;
+      opacity: 0.93;
     }
   }
 
   &.disabled--has-prompt-reason {
-    .wds-list-item-prompt{
-      opacity: .93;
+    .wds-list-item-prompt {
+      opacity: 0.93;
     }
   }
 
   &-spotlight {
-      padding-left: var(--size-12);
-      padding-right: var(--size-12);
-
-      &-active {
-          background-color: var(--color-background-neutral);
-          &:not(.disabled, :disabled) {
-            &:hover {
-              background-color: var(--color-background-neutral-hover);
-            }
-            &:active {
-              background-color: var(--color-background-neutral-active);
-            }
-          }
-      }
-
-      &-inactive {
-        background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+    padding-left: var(--size-12);
+    padding-right: var(--size-12);
 
-          &:not(.disabled, :disabled) {
-            &:hover {
-              background-color: color-mix(in srgb, var(--color-background-neutral-hover) 35%, transparent);
-            }
-            &:active {
-              background-color: color-mix(in srgb, var(--color-background-neutral-active) 45%, transparent);
-            }
-          }
+    &-active {
+      background-color: var(--color-background-neutral);
+      &:not(.disabled, :disabled) {
+        &:hover {
+          background-color: var(--color-background-neutral-hover);
+        }
+        &:active {
+          background-color: var(--color-background-neutral-active);
+        }
       }
+    }
 
+    &-inactive {
+      background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
 
+      &:not(.disabled, :disabled) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--color-background-neutral-hover) 35%,
+            transparent
+          );
+        }
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            var(--color-background-neutral-active) 45%,
+            transparent
+          );
+        }
+      }
+    }
   }
 
-  .wds-list-item-spotlight__border{
+  .wds-list-item-spotlight__border {
     position: absolute;
-    inset:0;
+    inset: 0;
     width: 100%;
     height: 100%;
 
     rect {
       --wds-list-item-spotlight-borderWidth: 1px;
-      --wds-list-item-spotlight-borderWidthOffset: .5px; // half of the border width to center the border
-      --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * .5);
+      --wds-list-item-spotlight-borderWidthOffset: 0.5px; // half of the border width to center the border
+      --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);
 
       fill: none;
       stroke: var(--color-border-neutral);
@@ -307,8 +322,7 @@
       y: var(--wds-list-item-spotlight-borderWidthOffset);
       rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
       ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
-      stroke-dasharray:
-        var(--wds-list-item-spotlight-strokeDashSize)
+      stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize)
         var(--wds-list-item-spotlight-strokeDashSize);
     }
   }

package/src/listItem/ListItem.tsx

@@ -142,7 +142,7 @@ export const ListItem = ({
 
   const isPartiallyInteractive = Boolean(
     (controlType === 'button' || controlType === 'icon-button') &&
-      (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,
+    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,
   );
   const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;
   const isButtonAsLink =
@@ -162,7 +162,6 @@ export const ListItem = ({
       ? additionalInfoPrompt
       : `${titlesAndValues} ${additionalInfoPrompt}`;
   }, [isFullyInteractive]);
-
   const listItemContext = useMemo(
     () => ({
       setControlType,

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

@@ -426,7 +426,11 @@ export const AllControls: Story = {
         }
         title="Non-interactive"
         subtitle={lorem10}
-        additionalInfo={INFO.nonInteractive}
+        additionalInfo={
+          <ListItem.AdditionalInfo>
+            Which has <b>bold,</b> <strong>strong,</strong> <em>emphasis</em>
+          </ListItem.AdditionalInfo>
+        }
       />
     </List>
   ),

package/src/main.css

@@ -3585,7 +3585,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-bottom: 0;
 }
 .wds-list-item-view.fullyInteractive:before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
 }
@@ -3616,7 +3616,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   z-index: 1;
 }
 .wds-list-item-interactive a.wds-list-item-control.wds-list-item-control_pseudo-element:before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
 }
@@ -3634,7 +3634,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
-  content: '';
+  content: "";
   position: absolute;
   inset: 0 -8px;
   border-radius: 16px;
@@ -3643,7 +3643,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
 .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0 -8px;
   border-radius: 16px;
@@ -3755,7 +3755,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .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 {
+.wds-list-item.disabled .wds-list-item-additional-info,
+.wds-list-item.disabled .wds-list-item-additional-info strong,
+.wds-list-item.disabled .wds-list-item-additional-info b {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }

package/src/modal/Modal.tsx

@@ -67,6 +67,7 @@ const Modal = ({
   return !isMedium ? (
     <Drawer
       open={open}
+      className={className}
       headerTitle={title}
       footerContent={footer}
       position={Position.BOTTOM}

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -23,12 +23,12 @@ describe('InlinePrompt', () => {
   });
 
   [
-    { sentiment: Sentiment.NEGATIVE as const, acceptsMedia: false, statusIconLabel: 'Error:' },
-    { sentiment: Sentiment.WARNING as const, acceptsMedia: false, statusIconLabel: 'Warning:' },
-    { sentiment: Sentiment.NEUTRAL as const, acceptsMedia: false, statusIconLabel: 'Information:' },
-    { sentiment: Sentiment.POSITIVE as const, acceptsMedia: true, statusIconLabel: 'Success:' },
-    { sentiment: 'proposition' as const, acceptsMedia: true, statusIconLabel: '' },
-  ].forEach(({ sentiment, statusIconLabel, acceptsMedia }) => {
+    { sentiment: Sentiment.NEGATIVE as const, statusIconLabel: 'Error:' },
+    { sentiment: Sentiment.WARNING as const, statusIconLabel: 'Warning:' },
+    { sentiment: Sentiment.NEUTRAL as const, statusIconLabel: 'Information:' },
+    { sentiment: Sentiment.POSITIVE as const, statusIconLabel: 'Success:' },
+    { sentiment: 'proposition' as const, statusIconLabel: '' },
+  ].forEach(({ sentiment, statusIconLabel }) => {
     describe(sentiment, () => {
       it('should apply correct styles', () => {
         render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
@@ -77,18 +77,10 @@ describe('InlinePrompt', () => {
       });
 
       describe('custom media', () => {
-        if (acceptsMedia) {
-          it('should respect `media`', () => {
-            render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
-            expect(screen.getByTestId('custom-media')).toBeInTheDocument();
-          });
-        } else {
-          it('should ignore `media`', () => {
-            render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
-            expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
-            expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
-          });
-        }
+        it('should respect `media`', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
+          expect(screen.getByTestId('custom-media')).toBeInTheDocument();
+        });
       });
 
       describe('mediaLabel', () => {

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Taxi, Travel } from '@transferwise/icons';
+import { Clock, Id, Taxi, Travel } from '@transferwise/icons';
 import { lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
@@ -222,8 +222,8 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
 };
 
 /**
- * While main sentiments (`warning`, `negative`, `neutral`) must retain their associated
- * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
+ * While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
+ * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
  * closer to the prompt's content. <br /><br />
  * It's also possible to override the default icon's accessible name announced by screen readers
  * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
@@ -232,14 +232,17 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+        <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
           Your travel account is set up and ready to use.
         </InlinePrompt>
         <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
           Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi />} sentiment="negative">
-          This icon override is ignored.
+        <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
+          The account verification is taking longer than usual.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
+          The identity document you provided has expired.
         </InlinePrompt>
       </>
     );

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -25,12 +25,12 @@ export type InlinePromptProps = {
    */
   muted?: boolean;
   /**
-   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
+   * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be
+   * replaced by a plain icon.
    */
   media?: React.ReactNode;
   /**
    * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
-   * To be used primarily for `proposition` sentiment.
    */
   mediaLabel?: string;
   /**
@@ -68,6 +68,7 @@ export const InlinePrompt = ({
     if (muted) {
       return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={mediaLabel} />;
     }
+
     if (loading) {
       return (
         <ProcessIndicator
@@ -78,15 +79,11 @@ export const InlinePrompt = ({
       );
     }
 
-    if (sentiment === 'positive' && media) {
-      return media;
-    }
-
     if (sentiment === 'proposition') {
       return media || <GiftBox title={mediaLabel} />;
     }
 
-    return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
+    return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
   };
 
   return (