@transferwise/components 0.0.0-experimental-06b4575 → 0.0.0-experimental-7fec974

package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { withVariantConfig } from '../../../../.storybook/helpers';
+import { allModes } from '../../../../.storybook/modes';
 
 export default {
   component: ListItem,
@@ -16,7 +16,12 @@ export default {
 
 const Default = {
   ...VariantStory,
-  ...withVariantConfig(['rtl'], VariantStory),
+  parameters: {
+    variants: ['rtl'],
+    chromatic: {
+      rtl: allModes.rtl,
+    },
+  },
   args: { variant: 'rtl' },
 };
 

package/src/main.css

@@ -5441,6 +5441,37 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
   stroke: currentColor;
 }
+.wds-info-prompt {
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding: 12px;
+}
+.wds-info-prompt__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.wds-info-prompt__content:has(.wds-info-prompt__title) {
+  justify-content: flex-start;
+  /* Top align when title exists */
+}
+.wds-info-prompt__title,
+.wds-info-prompt__description {
+  display: block;
+  color: var(--color-sentiment-primary);
+}
+.wds-info-prompt__action {
+  margin-top: var(--Prompt-gap);
+}
+.wds-info-prompt__media {
+  display: flex;
+}
+.wds-info-prompt__media svg {
+  width: 24px;
+  height: 24px;
+}
+.wds-info-prompt .wds-prompt__media-wrapper {
+  padding: 0;
+}
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }

package/src/main.less

@@ -62,6 +62,7 @@
 @import "./promoCard/PromoCard.less";
 @import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
 @import "./prompt/InlinePrompt/InlinePrompt.less";
+@import "./prompt/InfoPrompt/InfoPrompt.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
@@ -89,4 +90,4 @@
 @import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
-// Make sure you are not referencing main.less itself in this file!
+// Make sure you are not referencing main.less itself in this file!

package/src/modal/Modal.story.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { Button, Modal, ModalProps } from '..';
 import { CommonProps, Scroll } from '../common';
 import { lorem10, lorem100, lorem1000 } from '../test-utils';
-import { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: Modal,
@@ -78,7 +78,12 @@ export const Basic: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  ...withVariantConfig(['mobile'], Basic),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const ContentScroll: Story = {
@@ -92,7 +97,12 @@ export const ContentScroll: Story = {
 
 export const ContentScrollMobile: Story = {
   ...ContentScroll,
-  ...withVariantConfig(['mobile'], ContentScroll),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const ViewportScroll: Story = {
@@ -106,7 +116,12 @@ export const ViewportScroll: Story = {
 
 export const ViewportScrollMobile: Story = {
   ...ViewportScroll,
-  ...withVariantConfig(['mobile'], ViewportScroll),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const WithoutTitle: Story = {
@@ -119,7 +134,12 @@ export const WithoutTitle: Story = {
 
 export const WithoutTitleMobile: Story = {
   ...WithoutTitle,
-  ...withVariantConfig(['mobile'], WithoutTitle),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const WithThemeProviderInContent: Story = {
@@ -141,5 +161,10 @@ export const WithThemeProviderInContent: Story = {
 
 export const WithThemeProviderInContentMobile: Story = {
   ...WithThemeProviderInContent,
-  ...withVariantConfig(['mobile'], WithThemeProviderInContent),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };

package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts

@@ -11,9 +11,7 @@ export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
  * Properties for the anchor component.
  */
 export interface PrimitiveAnchorProps
-  extends BasePrimitiveProps,
-    StyleProp,
-    Omit<PrimitiveAnchorAttributes, 'role' | 'type'> {
+  extends BasePrimitiveProps, StyleProp, Omit<PrimitiveAnchorAttributes, 'role' | 'type'> {
   /** Content of the anchor */
   children?: ReactNode;
 

package/src/primitives/PrimitiveButton/PrimitiveButton.types.ts

@@ -11,9 +11,7 @@ export type PrimitiveButtonElementRef = React.Ref<HTMLButtonElement>;
  * Properties for the Button component.
  */
 export interface PrimitiveButtonProps
-  extends BasePrimitiveProps,
-    StyleProp,
-    PrimitiveButtonAttributes {
+  extends BasePrimitiveProps, StyleProp, PrimitiveButtonAttributes {
   /** Content of the button */
   children?: ReactNode;
 

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -20,4 +20,4 @@
       }
     }
   }
-}
+}

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

@@ -4,7 +4,7 @@ import { fn } from 'storybook/test';
 import { Bank } from '@transferwise/icons';
 import { ActionPrompt } from './ActionPrompt';
 import { lorem10 } from '../../test-utils';
-import { withVariantConfig } from '../../../.storybook/helpers';
+import { allModes } from '../../../.storybook/modes';
 
 const meta: Meta<typeof ActionPrompt> = {
   title: 'Prompts/ActionPrompt',
@@ -60,7 +60,12 @@ export const AllSentiments: Story = {
 
 export const Mobile: Story = {
   ...AllSentiments,
-  ...withVariantConfig(['mobile'], AllSentiments),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const PrimaryActionOnly: Story = {

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

@@ -56,9 +56,7 @@ describe('ActionPrompt', () => {
     it('calls primary action onClick when clicked', async () => {
       const onClick = jest.fn();
       const user = userEvent.setup();
-      render(
-        <ActionPrompt {...defaultProps} action={{ label: 'Primary Action', onClick }} />,
-      );
+      render(<ActionPrompt {...defaultProps} action={{ label: 'Primary Action', onClick }} />);
       const button = screen.getByRole('button', { name: 'Primary Action' });
       await user.click(button);
       expect(onClick).toHaveBeenCalledTimes(1);
@@ -66,10 +64,7 @@ describe('ActionPrompt', () => {
 
     it('renders primary action as link when href is provided', () => {
       render(
-        <ActionPrompt
-          {...defaultProps}
-          action={{ label: 'Primary Action', href: '/test-url' }}
-        />,
+        <ActionPrompt {...defaultProps} action={{ label: 'Primary Action', href: '/test-url' }} />,
       );
       const link = screen.getByRole('link', { name: 'Primary Action' });
       expect(link).toHaveAttribute('href', '/test-url');

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -0,0 +1,31 @@
+.wds-info-prompt {
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding: 12px;
+}
+.wds-info-prompt__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.wds-info-prompt__content:has(.wds-info-prompt__title) {
+  justify-content: flex-start;
+  /* Top align when title exists */
+}
+.wds-info-prompt__title,
+.wds-info-prompt__description {
+  display: block;
+  color: var(--color-sentiment-primary);
+}
+.wds-info-prompt__action {
+  margin-top: var(--Prompt-gap);
+}
+.wds-info-prompt__media {
+  display: flex;
+}
+.wds-info-prompt__media svg {
+  width: 24px;
+  height: 24px;
+}
+.wds-info-prompt .wds-prompt__media-wrapper {
+  padding: 0;
+}

package/src/prompt/InfoPrompt/InfoPrompt.less

@@ -0,0 +1,37 @@
+.wds-info-prompt {
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding: 12px;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &:has(.wds-info-prompt__title) {
+      justify-content: flex-start; /* Top align when title exists */
+    }
+  }
+
+  &__title,
+  &__description {
+    display: block;
+    color: var(--color-sentiment-primary);
+  }
+
+  &__action {
+    margin-top: var(--Prompt-gap);
+  }
+
+  &__media {
+    display: flex;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .wds-prompt__media-wrapper {
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,312 @@
+import type { ReactElement } 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';
+
+const withComponentGrid =
+  ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
+  (Story: () => ReactElement) => (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        gap,
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
+export default {
+  title: 'Prompts/InfoPrompt',
+  component: InfoPrompt,
+  tags: ['new'],
+  decorators: [withComponentGrid()],
+  args: {
+    description: 'Your payment is being processed.',
+  },
+  argTypes: {
+    sentiment: {
+      control: 'select',
+      options: ['success', 'negative', 'neutral', 'warning', 'proposition'],
+    },
+    title: {
+      control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    description: {
+      control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+} satisfies Meta<InfoPromptProps>;
+
+/**
+ * Convenience controls for previewing rich markup,
+ * not otherwise possible via Storybook
+ */
+type PreviewStoryArgs = InfoPromptProps & {
+  previewMedia: boolean;
+  previewOnDismiss: boolean;
+  previewAction: boolean;
+};
+
+const previewArgGroup = {
+  category: 'Storybook Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const previewArgTypes = {
+  previewMedia: {
+    name: 'Preview with `media`',
+    control: 'boolean',
+    table: previewArgGroup,
+  },
+  previewOnDismiss: {
+    name: 'Preview with `onDismiss`',
+    control: 'boolean',
+    table: previewArgGroup,
+  },
+  previewAction: {
+    name: 'Preview with `action`',
+    control: 'boolean',
+    table: previewArgGroup,
+  },
+} as const;
+
+const getPropsForPreview = (
+  args: PreviewStoryArgs,
+): [InfoPromptProps, Partial<InfoPromptProps>] => {
+  const { previewMedia, previewOnDismiss, previewAction, ...props } = args;
+
+  return [
+    props,
+    {
+      media: previewMedia ? { asset: <Star title="Starred" /> } : undefined,
+      onDismiss: previewOnDismiss ? action('onDismiss') : undefined,
+      action: previewAction
+        ? { label: 'Learn more', onClick: action('action.onClick') }
+        : undefined,
+    },
+  ];
+};
+
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  tags: ['!autodocs'],
+  argTypes: previewArgTypes,
+  args: {
+    previewMedia: false,
+    previewOnDismiss: false,
+    previewAction: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return <InfoPrompt {...props} {...previewProps} />;
+  },
+};
+
+/**
+ * InfoPrompt supports multiple sentiments to communicate different types of messages:
+ * - `neutral` (default): General information
+ * - `success`: Success messages
+ * - `negative`: Error messages
+ * - `warning`: Warning messages
+ * - `proposition`: Promotional content (uses GiftBox icon by default)
+ */
+export const Sentiments: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt {...args} sentiment="neutral" description="This is a neutral message." />
+      <InfoPrompt {...args} sentiment="success" description="Your payment was successful!" />
+      <InfoPrompt {...args} sentiment="negative" description="Something went wrong." />
+      <InfoPrompt {...args} sentiment="warning" description="Please review your details." />
+      <InfoPrompt {...args} sentiment="proposition" description="Check out our new features!" />
+    </>
+  ),
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * InfoPrompt can include both a title and description for more detailed messaging.
+ */
+export const WithTitle: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="success"
+        title="Payment Successful"
+        description="Your money is on its way to the recipient."
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="warning"
+        title="Payment Delayed"
+        description="Payments sent today might not arrive in time for the holidays."
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="negative"
+        title="Payment Failed"
+        description="We couldn't process your payment. Please try again."
+      />
+    </>
+  ),
+  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()],
+};
+
+/**
+ * Use the `action` prop to add a clickable link below the message.
+ * Actions can have an `href` for navigation or an `onClick` for custom behavior.
+ */
+export const WithAction: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="neutral"
+        description="New feature available"
+        action={{ label: 'Learn more', href: '/features', target: '_blank' }}
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="warning"
+        title="Action Required"
+        description="Please verify your identity to continue."
+        action={{ label: 'Verify now', onClick: action('verify') }}
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="proposition"
+        title="Special Offer"
+        description="Get 50% off your next transfer!"
+        action={{ label: 'Claim offer', onClick: action('claim') }}
+      />
+    </>
+  ),
+  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.
+ *
+ * Success and proposition sentiments support both standard checkmark and confetti variations.
+ */
+export const CustomMedia: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <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!"
+        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"
+      />
+      <InfoPrompt
+        {...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')}
+    />
+  ),
+};