@transferwise/components 0.0.0-experimental-cdb8834 → 0.0.0-experimental-2b6c540

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -1,13 +1,11 @@
 .wds-info-prompt {
   --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;
@@ -26,7 +24,9 @@
 }
 .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,12 +1,11 @@
 .wds-info-prompt {
   --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 */
@@ -27,8 +26,8 @@
     display: flex;
 
     svg {
-      width: 24px;
-      height: 24px;
+      width: var(--size-24);
+      height: var(--size-24);
     }
   }
 

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

@@ -1,9 +1,11 @@
 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 { lorem10, lorem20 } from '../../test-utils';
-import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
+import { Confetti, GiftBox, Star, Travel, Briefcase, Plane } from '@transferwise/icons';
+import { InfoPrompt, InfoPromptProps, InfoPromptMedia } from './InfoPrompt';
+import Button from '../../button';
+import Title from '../../title';
 
 const withComponentGrid =
   ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
@@ -62,7 +64,7 @@ export default {
  * not otherwise possible via Storybook
  */
 type PreviewStoryArgs = InfoPromptProps & {
-  previewMedia: boolean;
+  previewMedia: InfoPromptMedia | undefined;
   previewOnDismiss: boolean;
   previewAction: boolean;
 };
@@ -74,10 +76,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: {
@@ -100,7 +114,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') }
@@ -110,12 +124,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);
@@ -141,7 +162,6 @@ export const Sentiments: StoryObj<InfoPromptProps> = {
       <InfoPrompt {...args} sentiment="proposition" description="Check out our new features!" />
     </>
   ),
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -170,32 +190,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()],
 };
 
 /**
@@ -227,109 +221,86 @@ 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()],
-};
-
-/**
- * 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 ParagraphWidth: StoryObj<PreviewStoryArgs> = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-  args: {
-    title: lorem10,
-    description: lorem20,
-    sentiment: 'success',
-    onDismiss: () => {},
-  },
-};
-
-/**
- * Complete example showing all features combined:
- * sentiment, title, description, action, onDismiss, and custom media.
- */
-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')}
-    />
-  ),
 };

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

package/src/prompt/InlinePrompt/InlinePrompt.less

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

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 { Clock, 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';
@@ -144,7 +144,6 @@ export const Sentiments: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -164,6 +163,30 @@ export const Loading: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+/**
+ * Inline prompt is usually associated with a different component, such as `Input` or `ListItem`.
+ * When those components are disabled, the prompt is often used to communicate to the user why they
+ * cannot interact with them. For that reason, the prompt cannot inherit the usual disabled visual
+ * style, and it must retain its interactivity. To bring these 2 components visually closer to each
+ * other, `muted` prop introduces slightly reduced opacity and luminosity as well as a special
+ * backslash circle icon.
+ */
+export const Muted: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    muted: true,
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return (
+      <InlinePrompt {...props} {...previewProps}>
+        Please <Link href="#">confirm your residential address</Link> to activate this feature.
+      </InlinePrompt>
+    );
+  },
+};
+
 /**
  * `InlinePrompt` can include a single instance of the `Link` component, which can be rendered as
  * either HTML anchor or button. That element will spread across the whole surface of the Prompt
@@ -194,31 +217,6 @@ export const Interactivity: StoryObj<PreviewStoryArgs> = {
       </InlinePrompt>
     </>
   ),
-  decorators: [withComponentGrid()],
-};
-
-/**
- * Inline prompt is usually associated with a different component, such as `Input` or `ListItem`.
- * When those components are disabled, the prompt is often used to communicate to the user why they
- * cannot interact with them. For that reason, the prompt cannot inherit the usual disabled visual
- * style, and it must retain its interactivity. To bring these 2 components visually closer to each
- * other, `muted` prop introduces slightly reduced opacity and luminosity as well as a special
- * backslash circle icon.
- */
-export const Muted: StoryObj<PreviewStoryArgs> = {
-  argTypes: previewArgTypes,
-  args: {
-    muted: true,
-    previewMedia: false,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-    return (
-      <InlinePrompt {...props} {...previewProps}>
-        Please <Link href="#">confirm your residential address</Link> to activate this feature.
-      </InlinePrompt>
-    );
-  },
 };
 
 /**
@@ -250,7 +248,6 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -281,7 +278,6 @@ export const SizingStrategies: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -309,5 +305,4 @@ export const SentimentAwareness: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react-webpack5';
+import { Travel } from '@transferwise/icons';
+import { InlinePrompt } from './InlinePrompt';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+export default {
+  title: 'Prompts/InlinePrompt/Tests',
+  component: InlinePrompt,
+  tags: ['!autodocs'],
+};
+
+type Story = StoryObj<typeof InlinePrompt>;
+
+export const TinyScreen: Story = {
+  render: () => (
+    <InlinePrompt sentiment="positive" media={<Travel />}>
+      Your travel money account is now active and ready to use for international transactions.
+    </InlinePrompt>
+  ),
+  ...withVariantConfig(['400%']),
+};

package/src/prompt/InlinePrompt/InlinePrompt.test.tsx

@@ -136,16 +136,9 @@ describe('InlinePrompt', () => {
       expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--full-width');
     });
 
-    describe('width', () => {
-      it('applies auto width class by default', () => {
-        render(<InlinePrompt {...defaultProps} data-testid="prompt" />);
-        expect(screen.getByTestId('prompt')).toHaveClass('wds-inline-prompt--auto-width');
-      });
-
-      it('strips the class if `width` is set to `full`', () => {
-        render(<InlinePrompt {...defaultProps} width="full" data-testid="prompt" />);
-        expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--auto-width');
-      });
+    it('applies full width class when set to full', () => {
+      render(<InlinePrompt {...defaultProps} width="full" data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveClass('wds-inline-prompt--full-width');
     });
   });
 });

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -94,7 +94,7 @@ export const InlinePrompt = ({
       className={clsx(
         'wds-inline-prompt',
         {
-          'wds-inline-prompt--auto-width': width !== 'full',
+          'wds-inline-prompt--full-width': width === 'full',
           'wds-inline-prompt--muted': muted,
           'wds-inline-prompt--loading': loading,
         },

package/src/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -9,7 +9,6 @@
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
-  width: 100%;
 }
 .wds-prompt__content-wrapper {
   display: grid;