@transferwise/components 46.126.0 → 46.128.0

package/src/prompt/InfoPrompt/InfoPrompt.accessibility.docs.mdx

@@ -0,0 +1,79 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Prompts/InfoPrompt/Accessibility" tags={['new']} />
+
+# Accessibility
+
+Under the hood, `InfoPrompt` is marked as `role="region"` for a section of content that users might want to navigate to directly.
+
+By default, it's labelled by the `title` and described by the `description`.
+
+## Announcement Behaviour
+
+`InfoPrompt` is designed for contextual messages that appear within a screen. Unlike `ActionPrompt`, it can be configured to announce to screen readers using ARIA roles:
+
+- **`role="status"`**: Politely announces updates when the screen reader is idle. Use for non-critical success messages or informational updates (e.g., "Your profile has been saved").
+- **`role="alert"`**: Immediately interrupts to announce urgent messages. Use for time-sensitive information that requires immediate attention (e.g., errors, warnings, deadlines).
+
+**Default behavior:** Without a role, the prompt won't be announced automatically. Users will encounter it when navigating the page.
+
+<Source
+  dark
+  code={`
+// Polite announcement for non-critical updates
+<InfoPrompt
+  sentiment="success"
+  description="Your profile has been saved"
+  role="status"
+/>
+
+// Immediate announcement for urgent messages
+
+<InfoPrompt
+  sentiment="negative"
+  title="Session expired"
+  description="Your session has expired. Please log in again."
+  role="alert"
+/>
+`}
+/>
+
+## Custom Labels
+
+If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.
+
+<Source
+  dark
+  code={`
+<InfoPrompt
+  sentiment="negative"
+  title="Payment failed"
+  description="Unable to process payment."
+  aria-label="Critical error: Your payment could not be processed. Please update your payment method and try again within 24 hours."
+/>
+`}
+/>
+
+## Media
+
+Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:
+
+<Source
+  dark
+  code={`
+<InfoPrompt
+  sentiment="success"
+  description="Your travel account is ready!"
+  media={{ asset: <Travel title="Travel feature" /> }}
+/>
+
+<InfoPrompt
+  sentiment="warning"
+  title="Business travel"
+  description="Book your business trip with Wise."
+  media={{ asset: <Briefcase title="Business" /> }}
+/>
+`}
+/>
+
+**Note:** Unlike `ActionPrompt` (which uses `media['aria-label']`) and `InlinePrompt` (which uses `mediaLabel`), `InfoPrompt` requires you to add accessibility attributes directly to the icon component you pass.

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -1,11 +1,14 @@
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
 }
 .wds-info-prompt__content:has(.wds-info-prompt__title) {
   justify-content: flex-start;
@@ -14,17 +17,16 @@
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
-  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
+  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
-.wds-info-prompt__media {
-  display: flex;
-}
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;

package/src/prompt/InfoPrompt/InfoPrompt.less

@@ -1,37 +1,37 @@
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 
   &__content {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    max-width: calc(var(--size-48) * 10);
 
     &:has(.wds-info-prompt__title) {
       justify-content: flex-start; /* Top align when title exists */
     }
   }
-
   &__title,
   &__description {
     display: block;
-    color: var(--color-sentiment-primary);
   }
 
   &__action {
+    align-self: flex-start;
     margin-top: var(--Prompt-gap);
   }
 
   &__media {
-    display: flex;
-
+    // To ensure icons are sized correctly, we set a fixed size for SVGs within the media wrapper
     svg {
-      width: 24px;
-      height: 24px;
+      width: var(--size-24);
+      height: var(--size-24);
     }
   }
 
   .wds-prompt__media-wrapper {
     padding: 0;
   }
-}
+}

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -1,8 +1,12 @@
 import type { ReactElement } from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Confetti, GiftBox, Star, Travel } from '@transferwise/icons';
-import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
+import { Confetti, GiftBox, Star, Travel, Briefcase, Plane } from '@transferwise/icons';
+import { lorem10, lorem20 } from '../../test-utils';
+import Button from '../../button';
+import Title from '../../title';
+import { InfoPrompt, InfoPromptProps, InfoPromptMedia } from './InfoPrompt';
 
 const withComponentGrid =
   ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
@@ -48,6 +52,19 @@ export default {
         type: { summary: 'ReactNode' },
       },
     },
+    media: {
+      table: {
+        type: { summary: 'InfoPromptMedia', detail: '{ asset: ReactNode }' },
+      },
+    },
+    action: {
+      table: {
+        type: {
+          summary: 'InfoPromptAction',
+          detail: '{ label: string; href?: string; target?: string; onClick?: () => void }',
+        },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -61,7 +78,7 @@ export default {
  * not otherwise possible via Storybook
  */
 type PreviewStoryArgs = InfoPromptProps & {
-  previewMedia: boolean;
+  previewMedia: InfoPromptMedia | undefined;
   previewOnDismiss: boolean;
   previewAction: boolean;
 };
@@ -73,10 +90,22 @@ const previewArgGroup = {
   },
 };
 
+const MEDIA_OPTIONS: Record<string, { asset: ReactElement } | undefined> = {
+  undefined,
+  star: { asset: <Star title="Starred" /> },
+  confetti: { asset: <Confetti size={24} title="Celebration" /> },
+  giftbox: { asset: <GiftBox title="Gift" /> },
+  travel: { asset: <Travel title="Travel" /> },
+  briefcase: { asset: <Briefcase title="Business" /> },
+  plane: { asset: <Plane title="Travel" /> },
+};
+
 const previewArgTypes = {
   previewMedia: {
     name: 'Preview with `media`',
-    control: 'boolean',
+    control: 'select',
+    options: ['undefined', 'star', 'confetti', 'giftbox', 'travel', 'briefcase', 'plane'],
+    mapping: MEDIA_OPTIONS,
     table: previewArgGroup,
   },
   previewOnDismiss: {
@@ -99,7 +128,7 @@ const getPropsForPreview = (
   return [
     props,
     {
-      media: previewMedia ? { asset: <Star title="Starred" /> } : undefined,
+      media: previewMedia,
       onDismiss: previewOnDismiss ? action('onDismiss') : undefined,
       action: previewAction
         ? { label: 'Learn more', onClick: action('action.onClick') }
@@ -109,12 +138,19 @@ const getPropsForPreview = (
 };
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
-  argTypes: previewArgTypes,
+  argTypes: {
+    sentiment: {
+      control: 'radio',
+      options: ['success', 'negative', 'neutral', 'warning', 'proposition'],
+    },
+    ...previewArgTypes,
+  },
   args: {
-    previewMedia: false,
-    previewOnDismiss: false,
-    previewAction: false,
+    title: 'Payment successful',
+    description: 'Your payment is being processed.',
+    previewMedia: { asset: <Star title="Starred" /> },
+    previewOnDismiss: true,
+    previewAction: true,
   },
   render: (args: PreviewStoryArgs) => {
     const [props, previewProps] = getPropsForPreview(args);
@@ -140,7 +176,6 @@ export const Sentiments: StoryObj<InfoPromptProps> = {
       <InfoPrompt {...args} sentiment="proposition" description="Check out our new features!" />
     </>
   ),
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -169,32 +204,6 @@ export const WithTitle: StoryObj<InfoPromptProps> = {
       />
     </>
   ),
-  decorators: [withComponentGrid()],
-};
-
-/**
- * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
- * Note: The component itself is not automatically removed - you must handle state management.
- */
-export const Dismissible: StoryObj<InfoPromptProps> = {
-  render: (args: InfoPromptProps) => (
-    <>
-      <InfoPrompt
-        {...args}
-        sentiment="success"
-        title="Success"
-        description="Your payment was successful."
-        onDismiss={action('onDismiss')}
-      />
-      <InfoPrompt
-        {...args}
-        sentiment="neutral"
-        description="This message can be dismissed."
-        onDismiss={action('onDismiss')}
-      />
-    </>
-  ),
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -226,87 +235,108 @@ export const WithAction: StoryObj<InfoPromptProps> = {
       />
     </>
   ),
-  decorators: [withComponentGrid()],
 };
 
 /**
- * Use the `media` prop to override the default status icon with a custom icon.
- * This is useful for matching the prompt's visual language to its content.
+ * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
+ * Note: The component itself is not automatically removed - you must handle state management.
+ */
+export const Dismissible: StoryObj<InfoPromptProps> = {
+  render: function Render() {
+    const [showPrompt, setShowPrompt] = useState(true);
+
+    return (
+      <>
+        {showPrompt ? (
+          <InfoPrompt
+            sentiment="success"
+            title="Payment successful"
+            description="Your payment was successful."
+            onDismiss={() => setShowPrompt(false)}
+          />
+        ) : (
+          <Button v2 onClick={() => setShowPrompt(true)}>
+            Show prompt again
+          </Button>
+        )}
+      </>
+    );
+  },
+};
+
+/**
+ * InfoPrompt supports various media types to enhance visual communication.
  *
+ * **Default**: Each sentiment has a default status icon that appears when no media is provided.
+ *
+ * **Icon Overrides**: Replace default icons with custom icons to match the prompt's visual language to its content.
  * Success and proposition sentiments support both standard checkmark and confetti variations.
  */
-export const CustomMedia: StoryObj<InfoPromptProps> = {
-  render: (args: InfoPromptProps) => (
+export const MediaTypes: StoryObj<InfoPromptProps> = {
+  render: (args) => (
     <>
+      <Title type="title-body">Default</Title>
+      <InfoPrompt
+        sentiment="success"
+        description="When no media is provided, the sentiment's default status icon is displayed."
+      />
+
+      <Title type="title-body">Icon Overrides</Title>
       <InfoPrompt
-        {...args}
         sentiment="success"
         description="Saved to favorites!"
         media={{ asset: <Star title="Starred" /> }}
       />
       <InfoPrompt
-        {...args}
         sentiment="success"
         title="Congratulations!"
         description="You've completed all the steps."
         media={{ asset: <Confetti size={24} title="Celebration" /> }}
       />
       <InfoPrompt
-        {...args}
         sentiment="proposition"
-        title="Check out more!"
+        title="Special offer"
         description="New ways to send money with Wise!"
         media={{ asset: <GiftBox title="Gift" /> }}
       />
       <InfoPrompt
-        {...args}
         sentiment="success"
         description="Your travel account is ready!"
         media={{ asset: <Travel title="Travel" /> }}
       />
-    </>
-  ),
-  decorators: [withComponentGrid()],
-};
-
-/**
- * InfoPrompt fully supports accessibility attributes through spread props.
- * Use `role="status"` for non-critical updates or `role="alert"` for important messages.
- */
-export const Accessibility: StoryObj<InfoPromptProps> = {
-  render: (args: InfoPromptProps) => (
-    <>
       <InfoPrompt
-        {...args}
-        sentiment="success"
-        description="Your profile has been saved"
-        role="status"
+        sentiment="warning"
+        title="Business travel"
+        description="Book your business trip with Wise."
+        media={{ asset: <Briefcase title="Business" /> }}
       />
       <InfoPrompt
-        {...args}
-        sentiment="negative"
-        title="Error"
-        description="Your session has expired. Please log in again."
-        role="alert"
+        sentiment="neutral"
+        description="Your flight is scheduled."
+        media={{ asset: <Plane title="Flight" /> }}
       />
     </>
   ),
-  decorators: [withComponentGrid()],
 };
 
 /**
- * Complete example showing all features combined:
- * sentiment, title, description, action, onDismiss, and custom media.
+ * While the component itself will stretch to the full available width, the text container will be
+ * capped at `480px` to ensure optimal readability.
+ *
+ * [Visit wise.design](https://wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
  */
-export const CompleteExample: StoryObj<InfoPromptProps> = {
-  render: () => (
-    <InfoPrompt
-      sentiment="proposition"
-      title="Invite Friends & Earn"
-      description="Share Wise with friends and get £50 for each friend who makes their first transfer."
-      media={{ asset: <GiftBox title="Gift" /> }}
-      action={{ label: 'Invite friends', onClick: action('invite') }}
-      onDismiss={action('onDismiss')}
-    />
-  ),
+export const ParagraphWidth: StoryObj<PreviewStoryArgs> = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  args: {
+    title: lorem10,
+    description: lorem20,
+    sentiment: 'success',
+    onDismiss: () => {},
+  },
 };

package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx

@@ -1,7 +1,19 @@
-import { useState, MouseEvent } from 'react';
+import { useState, MouseEvent, ReactElement } from 'react';
 import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { Star } from '@transferwise/icons';
 import { InfoPrompt, type InfoPromptProps } from './InfoPrompt';
+import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+const withComponentGrid =
+  ({ gap = '1rem' } = {}) =>
+  (Story: () => ReactElement) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap }}>
+      <Story />
+    </div>
+  );
 
 const meta = {
   title: 'Prompts/InfoPrompt/Tests',
@@ -244,3 +256,44 @@ export const TouchInteraction: Story = {
     );
   },
 };
+
+export const AllThemesAndSentiments: Story = {
+  render: () => (
+    <>
+      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
+        <InfoPrompt
+          key={sentiment}
+          sentiment={sentiment}
+          title={`${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)} prompt`}
+          description="This demonstrates the prompt appearance in different themes."
+          media={sentiment === 'success' ? { asset: <Star title="Star" /> } : undefined}
+          action={{ label: 'Action', onClick: action('action') }}
+          onDismiss={action('dismiss')}
+        />
+      ))}
+    </>
+  ),
+  decorators: [withComponentGrid({ gap: '1.5rem' })],
+  parameters: {
+    padding: '16px',
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+    },
+  },
+};
+
+export const TinyScreen: Story = {
+  render: () => (
+    <InfoPrompt
+      sentiment="success"
+      title="Payment received"
+      description="Your transfer of 500 GBP has been successfully received and is now available in your account."
+      action={{ label: 'View details', onClick: action('view-details') }}
+      onDismiss={action('dismiss')}
+    />
+  ),
+  ...withVariantConfig(['400%']),
+};

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -18,8 +18,7 @@ export type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> &
 export type InfoPromptMedia = {
   /**
    * The icon/image asset to display.
-   * The asset should include its own accessibility attributes (e.g. title, aria-label)
-   * if it conveys meaning, or aria-hidden="true" if decorative.
+   * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.
    */
   asset: ReactNode;
 };
@@ -53,6 +52,7 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
      * Description text for the prompt (required)
      */
     description: string;
+    className?: string;
   };
 
 /**
@@ -61,6 +61,8 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
  * or positive feedback with optional actions and dismissal capabilities.
  *
  * Use this component to replace the deprecated Alert component.
+ *
+ * Guidance can be found in the [design system](https://wise.design/components/info-prompt).
  */
 export const InfoPrompt = ({
   sentiment = 'neutral',

package/src/prompt/InlinePrompt/InlinePrompt.accessibility.docs.mdx

@@ -0,0 +1,63 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Prompts/InlinePrompt/Accessibility" />
+
+# Accessibility
+
+Under the hood, `InlinePrompt` is marked as `role="region"` for a section of content that users might want to navigate to directly.
+
+By default, it's labelled by the `media` icon and the prompt's text content.
+
+## Announcement Behaviour
+
+`InlinePrompt` appears alongside a specific component on the screen (e.g., input fields, list items). It should not be announced via screen reader—neither assertively (`role="alert"`) nor politely (`role="status"`).
+
+**Note:** For immediate user feedback that requires announcement, use [InfoPrompt](?path=/docs/prompts-infoprompt--docs) instead.
+
+## Media Label
+
+You can use the `mediaLabel` prop to override the icon's accessible name announced by screen readers. This is especially useful for custom icons or when you want to provide more context than the default sentiment label.
+
+By default, sentiment icons have these labels:
+
+- `positive`: "Success:"
+- `negative`: "Error:"
+- `warning`: "Warning:"
+- `neutral`: "Information:"
+- `proposition`: No label (GiftBox icon is decorative by default)
+
+<Source
+  dark
+  code={`
+<InlinePrompt 
+  media={<Travel />} 
+  sentiment="positive" 
+  mediaLabel="Travel feature enabled: "
+>
+  Your travel account is set up and ready to use.
+</InlinePrompt>
+
+<InlinePrompt 
+  media={<Clock />} 
+  sentiment="warning" 
+  mediaLabel="Delayed processing: "
+>
+  The account verification is taking longer than usual.
+</InlinePrompt>
+`}
+/>
+
+## Muted State
+
+When a prompt is associated with a disabled component, use the `muted` prop to visually indicate the relationship while keeping the prompt accessible and interactive. The prompt remains keyboard accessible and can include interactive elements like links.
+
+<Source
+  dark
+  code={`
+<InlinePrompt muted sentiment="warning" mediaLabel="Feature locked: ">
+  Please <Link href="#">confirm your residential address</Link> to activate this feature.
+</InlinePrompt>
+`}
+/>
+
+The muted state uses a special backslash circle icon to indicate the disabled relationship, but the prompt itself remains fully accessible to screen readers and keyboard users.

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -18,8 +18,9 @@
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
-.wds-inline-prompt--full-width {
-  width: 100%;
+.wds-inline-prompt--auto-width {
+  width: auto;
+  width: initial;
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -19,8 +19,8 @@
     }
   }
 
-  &--full-width {
-    width: 100%;
+  &--auto-width {
+    width: unset;
   }
 
   &--muted {