@transferwise/components 0.0.0-experimental-276a15d → 0.0.0-experimental-dd4f4a5

package/src/main.css

@@ -5443,7 +5443,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .wds-info-prompt {
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding: 12px;
 }
 .wds-info-prompt__content {
   display: flex;
@@ -5467,9 +5467,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .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/ActionPrompt/ActionPrompt.accessibility.docs.mdx

@@ -31,7 +31,23 @@ If you want to provide a custom label for screen readers, you can use the `aria-
 
 ## Media
 
-You can use `aria-label` on media assets to provide a custom label for screen readers.
+You can use the `aria-hidden` attribute on media assets to hide them from screen readers if they're not providing any additional information. This is useful when the media is purely decorative or when its content is already conveyed through other means (e.g., text).
+
+<Source
+  dark
+  code={`
+<ActionPrompt
+  media={{
+    'aria-hidden': true,
+    avatar: { asset: <People /> },
+  }}
+  title="Sync contacts for a faster experience"
+  ...
+/>
+`}
+/>
+
+You can also use `aria-label` on media assets to provide a custom label for screen readers.
 
 <Source
   dark

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -1,11 +1,22 @@
 import { ReactElement, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import { Bank, Star, Travel, Briefcase } from '@transferwise/icons';
-import { ActionPrompt, type ActionPromptProps } from './ActionPrompt';
+import { Bank, Freeze, People } from '@transferwise/icons';
+import { ActionPrompt } from './ActionPrompt';
 import { lorem10 } from '../../test-utils';
-import Button from '../../button';
+import Body from '../../body';
+import { action } from 'storybook/actions';
 import Title from '../../title';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+const meta: Meta<typeof ActionPrompt> = {
+  title: 'Prompts/ActionPrompt',
+  component: ActionPrompt,
+  tags: ['new'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionPrompt>;
 
 const withComponentGrid =
   ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
@@ -26,354 +37,151 @@ const withComponentGrid =
     </div>
   );
 
-const meta: Meta<typeof ActionPrompt> = {
-  title: 'Prompts/ActionPrompt',
-  component: ActionPrompt,
-  tags: ['new'],
-  decorators: [withComponentGrid()],
-  args: {
-    title: 'Action Required',
-    description: 'Please complete the following action to continue.',
-    action: { label: 'Continue', onClick: fn() },
-  },
-  argTypes: {
-    sentiment: {
-      control: 'select',
-      options: ['success', 'negative', 'neutral', 'warning', 'proposition'],
-    },
-    title: {
-      control: 'text',
-      table: {
-        type: { summary: 'ReactNode' },
-      },
-    },
-    description: {
-      control: 'text',
-      table: {
-        type: { summary: 'ReactNode' },
-      },
-    },
-    media: {
-      control: false,
-      table: {
-        type: {
-          summary: 'ActionPromptMedia',
-          detail:
-            '{ imgSrc?: string; avatar?: { imgSrc?: string; profileName?: string; profileType?: string; asset?: ReactNode; badge?: { flagCode: string } }; aria-label?: string }',
-        },
-      },
-    },
-    action: {
-      control: false,
-      table: {
-        type: {
-          summary: 'ActionPromptAction',
-          detail: '{ label: ReactNode; onClick?: () => void; href?: string; target?: string }',
-        },
-      },
-    },
-    actionSecondary: {
-      control: false,
-      table: {
-        type: {
-          summary: 'ActionPromptActionSecondary',
-          detail: '{ label: ReactNode; onClick?: () => void; href?: string; target?: string }',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ActionPrompt>;
-
-/**
- * Convenience controls for previewing rich markup,
- * not otherwise possible via Storybook
- */
-type PreviewStoryArgs = ActionPromptProps & {
-  previewMedia: ActionPromptProps['media'];
-  previewOnDismiss: boolean;
-  previewSecondaryAction: boolean;
-};
-
-const previewArgGroup = {
-  category: 'Storybook Preview options',
-  type: {
-    summary: undefined,
-  },
-};
-
-const MEDIA_OPTIONS: Record<string, ActionPromptProps['media']> = {
-  undefined,
-  'Custom image (no badge)': { imgSrc: '../../wise-card.svg' },
-  'Avatar: Profile image': { avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } },
-  'Avatar: Business (GB badge)': {
-    avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } },
-  },
-  'Avatar: Personal (EU badge)': {
-    avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } },
+export const AllSentiments: Story = {
+  render: () => {
+    return (
+      <>
+        {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
+          (sentiment) => (
+            <ActionPrompt
+              key={sentiment}
+              sentiment={sentiment}
+              title="Title"
+              description={lorem10}
+              action={{ label: 'Primary', onClick: fn() }}
+              actionSecondary={{ label: 'Secondary', onClick: fn() }}
+              className="m-b-2"
+              onDismiss={fn()}
+            />
+          ),
+        )}
+      </>
+    );
   },
-  'Avatar: Icon (Bank)': { avatar: { asset: <Bank /> } },
-  'Avatar: Icon (Star)': { avatar: { asset: <Star /> } },
-  'Avatar: Icon (Travel)': { avatar: { asset: <Travel /> } },
-  'Avatar: Icon (Briefcase)': { avatar: { asset: <Briefcase /> } },
-  'Avatar: Initials': { avatar: { profileName: 'John Doe' } },
+  decorators: [withComponentGrid()],
 };
 
-const previewArgTypes = {
-  previewMedia: {
-    name: 'Preview with `media`',
-    control: 'select',
-    options: [
-      'undefined',
-      'Custom image (no badge)',
-      'Avatar: Profile image',
-      'Avatar: Business (GB badge)',
-      'Avatar: Personal (EU badge)',
-      'Avatar: Icon (Bank)',
-      'Avatar: Icon (Star)',
-      'Avatar: Icon (Travel)',
-      'Avatar: Icon (Briefcase)',
-      'Avatar: Initials',
-    ],
-    mapping: MEDIA_OPTIONS,
-    table: previewArgGroup,
-  },
-  previewOnDismiss: {
-    name: 'Preview with `onDismiss`',
-    control: 'boolean',
-    table: previewArgGroup,
-  },
-  previewSecondaryAction: {
-    name: 'Preview with `actionSecondary`',
-    control: 'boolean',
-    table: previewArgGroup,
-  },
-} as const;
-
-const getPropsForPreview = (
-  args: PreviewStoryArgs,
-): [ActionPromptProps, Partial<ActionPromptProps>] => {
-  const { previewMedia, previewOnDismiss, previewSecondaryAction, ...props } = args;
-
-  return [
-    props,
-    {
-      media: previewMedia,
-      onDismiss: previewOnDismiss ? fn() : undefined,
-      actionSecondary: previewSecondaryAction ? { label: 'Cancel', onClick: fn() } : undefined,
-    },
-  ];
+export const Mobile: Story = {
+  ...AllSentiments,
+  ...withVariantConfig(['mobile'], AllSentiments),
 };
 
-export const Playground: StoryObj<PreviewStoryArgs> = {
-  argTypes: {
-    sentiment: {
-      control: 'radio',
-      options: ['success', 'negative', 'neutral', 'warning', 'proposition'],
-    },
-    ...previewArgTypes,
-  },
+export const PrimaryActionOnly: Story = {
   args: {
-    previewMedia: { avatar: undefined },
-    previewOnDismiss: true,
-    previewSecondaryAction: true,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-    return <ActionPrompt {...props} {...previewProps} />;
+    sentiment: 'proposition',
+    title: 'Payment successful',
+    description: 'Your money is on its way',
+    action: { label: 'View details', onClick: fn() },
+    onDismiss: fn(),
   },
 };
 
-/**
- * ActionPrompt supports multiple sentiments to communicate different types of messages:
- * - `neutral` (default): General prompts
- * - `success`: Success confirmations
- * - `negative`: Error or critical actions
- * - `warning`: Warning messages
- * - `proposition`: Promotional or feature prompts
- */
-export const Sentiments: Story = {
-  render: (args) => (
-    <>
-      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
-        <ActionPrompt
-          key={sentiment}
-          sentiment={sentiment}
-          title={`${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)} Action`}
-          description={lorem10}
-          action={{ label: 'Primary', onClick: fn() }}
-          actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        />
-      ))}
-    </>
-  ),
-};
-
-/**
- * ActionPrompt can have just a primary action, or both primary and secondary actions.
- */
-export const Actions: Story = {
-  render: () => (
-    <>
-      <ActionPrompt
-        sentiment="proposition"
-        title="Primary action only"
-        description="This prompt has only one action button."
-        action={{ label: 'Get started', onClick: fn() }}
-      />
-      <ActionPrompt
-        sentiment="warning"
-        title="Primary and secondary actions"
-        description="This prompt has both action buttons."
-        action={{ label: 'Confirm', onClick: fn() }}
-        actionSecondary={{ label: 'Cancel', onClick: fn() }}
-      />
-    </>
-  ),
-};
-
-/**
- * ActionPrompt 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 images, avatars with images, avatars with initials,
- * avatars with custom icons, or avatars with profile types and badges.
- */
-export const MediaTypes: Story = {
+export const WithoutDescription: Story = {
   render: () => {
     return (
       <>
-        <Title type="title-body">Default</Title>
+        <ActionPrompt
+          sentiment="warning"
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+          actionSecondary={{ label: 'Log out', onClick: fn() }}
+          onDismiss={fn()}
+        />
         <ActionPrompt
           sentiment="success"
-          title="Default status icon"
-          description="When no media is provided, the sentiment's default status icon is displayed."
-          action={{ label: 'Continue', onClick: fn() }}
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+        />
+        <ActionPrompt
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
         />
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
 
-        <Title type="title-body">Icon Overrides</Title>
+export const Media: Story = {
+  render: () => {
+    return (
+      <>
         <ActionPrompt
           sentiment="neutral"
           title="Custom image"
           description={lorem10}
           media={{ imgSrc: '../../wise-card.svg' }}
-          action={{ label: 'View card', onClick: fn() }}
+          action={{ label: 'Invite now', onClick: fn() }}
         />
         <ActionPrompt
           sentiment="neutral"
-          title="Avatar with image"
+          title="Profile Image"
           description={lorem10}
           media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
-          action={{ label: 'View profile', onClick: fn() }}
+          action={{ label: 'Invite now', onClick: fn() }}
         />
         <ActionPrompt
-          sentiment="success"
-          title="Avatar with initials"
+          sentiment="proposition"
+          title="Business Profile"
           description={lorem10}
-          media={{ avatar: { profileName: 'John Doe' } }}
-          action={{ label: 'Send invite', onClick: fn() }}
+          media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
+          action={{ label: 'Invite now', onClick: fn() }}
         />
         <ActionPrompt
-          sentiment="warning"
-          title="Avatar with custom icon"
+          sentiment="negative"
+          title="Personal Profile"
           description={lorem10}
-          media={{ avatar: { asset: <Bank /> } }}
-          action={{ label: 'Connect bank', onClick: fn() }}
+          media={{ avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } } }}
+          action={{ label: 'Invite now', onClick: fn() }}
         />
         <ActionPrompt
-          sentiment="proposition"
-          title="Business profile with badge"
+          sentiment="warning"
+          title="Custom Icon"
           description={lorem10}
-          media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
-          action={{ label: 'Open account', onClick: fn() }}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: 'Invite now', onClick: fn() }}
         />
         <ActionPrompt
-          sentiment="negative"
-          title="Personal profile with badge"
+          sentiment="success"
+          title="Initials"
           description={lorem10}
-          media={{ avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } } }}
-          action={{ label: 'Verify', onClick: fn() }}
+          media={{ avatar: { profileName: 'John Doe' } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+          actionSecondary={{ label: 'Maybe later', onClick: fn() }}
         />
       </>
     );
   },
+  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: Story = {
-  render: (args) => {
-    const [showPrompt, setShowPrompt] = useState(true);
+export const OnDismiss: Story = {
+  render: () => {
+    const [showNeutralPrompt, setShowNeutralPrompt] = useState(true);
+    const [showSuccessPrompt, setShowSuccessPrompt] = useState(true);
 
     return (
       <>
-        {showPrompt ? (
+        {showNeutralPrompt && (
           <ActionPrompt
             sentiment="proposition"
-            title="Special offer"
-            description="Get 50% off your next transfer!"
-            action={{ label: 'Claim now', onClick: fn() }}
-            onDismiss={() => setShowPrompt(false)}
+            title="Payment successful"
+            description="Your money is on its way"
+            action={{ label: 'View details', onClick: fn() }}
+            className="m-b-2"
+            onDismiss={() => setShowNeutralPrompt(false)}
+          />
+        )}
+        {showSuccessPrompt && (
+          <ActionPrompt
+            sentiment="success"
+            title="Payment successful"
+            description="Your money is on its way"
+            action={{ label: 'View details', onClick: fn() }}
+            onDismiss={() => setShowSuccessPrompt(false)}
           />
-        ) : (
-          <Button v2 onClick={() => setShowPrompt(true)}>
-            Show prompt again
-          </Button>
         )}
       </>
     );
   },
 };
-
-/**
- * ActionPrompt adapts its layout based on available width. At narrow widths (mobile),
- * the buttons stack vertically. At wider widths (desktop), they appear side by side.
- */
-export const Responsiveness: Story = {
-  render: (args) => (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: '320px 480px',
-        gap: '1rem',
-        alignItems: 'start',
-      }}
-    >
-      <ActionPrompt
-        sentiment="proposition"
-        title="Stacked (320px)"
-        description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
-        action={{ label: 'Primary action', onClick: fn() }}
-        actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        onDismiss={fn()}
-      />
-      <ActionPrompt
-        sentiment="proposition"
-        title="Side-by-side (480px)"
-        description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
-        action={{ label: 'Primary action', onClick: fn() }}
-        actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        onDismiss={fn()}
-      />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-};

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

@@ -1,25 +1,13 @@
-import { ReactElement } from 'react';
 import { Freeze, People } from '@transferwise/icons';
 import { action } from 'storybook/actions';
-import { fn } from 'storybook/test';
 import ActionPrompt from './ActionPrompt';
 import { Body, Title } from '../..';
-import { StoryObj } from '@storybook/react-webpack5';
-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>
-  );
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 export default {
   title: 'Prompts/ActionPrompt/Tests',
   component: ActionPrompt,
-  tags: ['!manifest', '!autodocs', 'new'],
+  tags: ['!manifest', '!autodocs'],
 };
 
 type Story = StoryObj<typeof ActionPrompt>;
@@ -142,7 +130,7 @@ export const VariousA11yFeatures: Story = {
           sentiment="negative"
           media={{ avatar: { asset: <People /> } }}
           title="Sync contacts for a faster experience"
-          description="Find contacts on Wise — it's simple, secure and you pick who you add."
+          description="Find contacts on Wise — it’s simple, secure and you pick who you add."
           action={{
             label: 'Sync contacts',
             onClick: () => {
@@ -157,74 +145,3 @@ export const VariousA11yFeatures: Story = {
     );
   },
 };
-
-/**
- * ActionPrompt can be shown with or without a description.
- */
-export const WithoutDescription: Story = {
-  render: () => {
-    return (
-      <>
-        <ActionPrompt
-          sentiment="warning"
-          title="Session expiring soon"
-          action={{ label: 'Stay logged in', onClick: fn() }}
-          actionSecondary={{ label: 'Log out', onClick: fn() }}
-        />
-        <ActionPrompt
-          sentiment="success"
-          title="Payment successful"
-          action={{ label: 'View details', onClick: fn() }}
-        />
-        <ActionPrompt title="Quick action" action={{ label: 'Continue', onClick: fn() }} />
-      </>
-    );
-  },
-  decorators: [withComponentGrid()],
-};
-
-export const AllThemesAndSentiments: Story = {
-  render: () => {
-    return (
-      <>
-        {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
-          (sentiment) => (
-            <ActionPrompt
-              key={sentiment}
-              sentiment={sentiment}
-              title={`${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)} action`}
-              description="This demonstrates the prompt appearance in different themes."
-              action={{ label: 'Primary', onClick: fn() }}
-              actionSecondary={{ label: 'Secondary', onClick: fn() }}
-              onDismiss={fn()}
-            />
-          ),
-        )}
-      </>
-    );
-  },
-  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: () => (
-    <ActionPrompt
-      sentiment="warning"
-      title="Complete your profile"
-      description="Add your business details to unlock all features and start sending money internationally."
-      action={{ label: 'Complete profile', onClick: fn() }}
-      actionSecondary={{ label: 'Remind me later', onClick: fn() }}
-      onDismiss={fn()}
-    />
-  ),
-  ...withVariantConfig(['400%']),
-};

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -34,13 +34,6 @@ export type ActionPromptProps = {
   'aria-label'?: AriaAttributes['aria-label'];
 } & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
 
-/**
- * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.
- *
- * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.
- *
- * Guidance can be found in the [design system](https://wise.design/components/action-prompt).
- */
 export const ActionPrompt = ({
   sentiment = 'neutral',
   title,
@@ -62,7 +55,7 @@ export const ActionPrompt = ({
 
   const ariaLabelledByIds = [
     media['aria-hidden'] ? undefined : mediaId,
-    ariaLabel ? undefined : titleId,
+    Boolean(ariaLabel) ? undefined : titleId,
   ]
     .filter(Boolean)
     .join(' ');
@@ -111,7 +104,7 @@ export const ActionPrompt = ({
         id={mediaId}
         size={48}
         sentiment={sentiment}
-        iconLabel={media['aria-hidden'] ? null : media['aria-label']}
+        iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}
       />
     );
   };
@@ -155,9 +148,9 @@ export const ActionPrompt = ({
           </Button>
         </>
       }
-      role="region"
       onDismiss={onDismiss}
-      {...(ariaLabel
+      role="region"
+      {...(Boolean(ariaLabel)
         ? { 'aria-label': ariaLabel }
         : {
             'aria-labelledby': ariaLabelledByIds,