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

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -1,6 +1,6 @@
 .wds-info-prompt {
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding: 12px;
 }
 .wds-info-prompt__content {
   display: flex;
@@ -24,9 +24,7 @@
 }
 .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,6 +1,6 @@
 .wds-info-prompt {
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding: 12px;
 
   &__content {
     display: flex;
@@ -26,12 +26,12 @@
     display: flex;
 
     svg {
-      width: var(--size-24);
-      height: var(--size-24);
+      width: 24px;
+      height: 24px;
     }
   }
 
   .wds-prompt__media-wrapper {
     padding: 0;
   }
-}
+}

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

@@ -1,11 +1,8 @@
 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, Briefcase, Plane } from '@transferwise/icons';
-import { InfoPrompt, InfoPromptProps, InfoPromptMedia } from './InfoPrompt';
-import Button from '../../button';
-import Title from '../../title';
+import { Confetti, GiftBox, Star, Travel } from '@transferwise/icons';
+import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
 
 const withComponentGrid =
   ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
@@ -51,19 +48,6 @@ 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: {
@@ -77,7 +61,7 @@ export default {
  * not otherwise possible via Storybook
  */
 type PreviewStoryArgs = InfoPromptProps & {
-  previewMedia: InfoPromptMedia | undefined;
+  previewMedia: boolean;
   previewOnDismiss: boolean;
   previewAction: boolean;
 };
@@ -89,22 +73,10 @@ 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: 'select',
-    options: ['undefined', 'star', 'confetti', 'giftbox', 'travel', 'briefcase', 'plane'],
-    mapping: MEDIA_OPTIONS,
+    control: 'boolean',
     table: previewArgGroup,
   },
   previewOnDismiss: {
@@ -127,7 +99,7 @@ const getPropsForPreview = (
   return [
     props,
     {
-      media: previewMedia,
+      media: previewMedia ? { asset: <Star title="Starred" /> } : undefined,
       onDismiss: previewOnDismiss ? action('onDismiss') : undefined,
       action: previewAction
         ? { label: 'Learn more', onClick: action('action.onClick') }
@@ -137,19 +109,12 @@ const getPropsForPreview = (
 };
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  argTypes: {
-    sentiment: {
-      control: 'radio',
-      options: ['success', 'negative', 'neutral', 'warning', 'proposition'],
-    },
-    ...previewArgTypes,
-  },
+  tags: ['!autodocs'],
+  argTypes: previewArgTypes,
   args: {
-    title: 'Payment successful',
-    description: 'Your payment is being processed.',
-    previewMedia: { asset: <Star title="Starred" /> },
-    previewOnDismiss: true,
-    previewAction: true,
+    previewMedia: false,
+    previewOnDismiss: false,
+    previewAction: false,
   },
   render: (args: PreviewStoryArgs) => {
     const [props, previewProps] = getPropsForPreview(args);
@@ -175,6 +140,7 @@ export const Sentiments: StoryObj<InfoPromptProps> = {
       <InfoPrompt {...args} sentiment="proposition" description="Check out our new features!" />
     </>
   ),
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -203,6 +169,32 @@ 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()],
 };
 
 /**
@@ -234,86 +226,87 @@ export const WithAction: 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: 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.
+ * 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.
  *
- * **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 MediaTypes: StoryObj<InfoPromptProps> = {
-  render: (args) => (
+export const CustomMedia: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
     <>
-      <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="Special offer"
+        title="Check out more!"
         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
-        sentiment="warning"
-        title="Business travel"
-        description="Book your business trip with Wise."
-        media={{ asset: <Briefcase title="Business" /> }}
+        {...args}
+        sentiment="success"
+        description="Your profile has been saved"
+        role="status"
       />
       <InfoPrompt
-        sentiment="neutral"
-        description="Your flight is scheduled."
-        media={{ asset: <Plane title="Flight" /> }}
+        {...args}
+        sentiment="negative"
+        title="Error"
+        description="Your session has expired. Please log in again."
+        role="alert"
       />
     </>
   ),
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * 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,19 +1,7 @@
-import { useState, MouseEvent, ReactElement } from 'react';
+import { useState, MouseEvent } 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',
@@ -256,44 +244,3 @@ 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,7 +18,8 @@ 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.
+   * The asset should include its own accessibility attributes (e.g. title, aria-label)
+   * if it conveys meaning, or aria-hidden="true" if decorative.
    */
   asset: ReactNode;
 };
@@ -52,7 +53,6 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
      * Description text for the prompt (required)
      */
     description: string;
-    className?: string;
   };
 
 /**
@@ -61,8 +61,6 @@ 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.story.tsx

@@ -144,6 +144,7 @@ export const Sentiments: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -163,30 +164,6 @@ 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
@@ -217,6 +194,31 @@ 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>
+    );
+  },
 };
 
 /**
@@ -248,6 +250,7 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -278,6 +281,7 @@ export const SizingStrategies: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -305,4 +309,5 @@ export const SentimentAwareness: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
+  decorators: [withComponentGrid()],
 };

package/src/sentimentSurface/SentimentSurface.docs.mdx

@@ -1,7 +1,7 @@
 import { Meta, Source, Canvas } from '@storybook/addon-docs/blocks';
 import * as stories from './SentimentSurface.story';
 
-<Meta title="Content/SentimentSurface/Developer Guide" />
+<Meta title="Foundations/SentimentSurface/Developer Guide" />
 
 # Developer Guide
 

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -31,7 +31,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
  */
 const meta: Meta<typeof SentimentSurface> = {
   component: SentimentSurface,
-  title: 'Content/SentimentSurface',
+  title: 'Foundations/SentimentSurface',
   argTypes: {
     sentiment: {
       control: 'select',

package/src/sentimentSurface/SentimentSurface.test.story.tsx

@@ -21,7 +21,7 @@ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
 
 export default {
   component: SentimentSurface,
-  title: 'Content/SentimentSurface/Tests',
+  title: 'Foundations/SentimentSurface/Tests',
   tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof SentimentSurface>;