@transferwise/components 46.125.0 → 46.126.0

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

@@ -0,0 +1,246 @@
+import { useState, MouseEvent } from 'react';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { InfoPrompt, type InfoPromptProps } from './InfoPrompt';
+
+const meta = {
+  title: 'Prompts/InfoPrompt/Tests',
+  component: InfoPrompt,
+  tags: ['!autodocs', '!manifest', 'new'],
+  args: {
+    sentiment: 'neutral',
+    description: 'This is an informational message.',
+  },
+} satisfies Meta<typeof InfoPrompt>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+/**
+ * Test that clicking the dismiss button removes the prompt.
+ */
+export const DismissInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const dismissButton = canvas.getByRole('button', { name: /close/i });
+
+    await step('Verify prompt is visible', async () => {
+      await waitFor(async () =>
+        expect(canvas.getByText('This message can be dismissed.')).toBeInTheDocument(),
+      );
+    });
+
+    await step('Click the dismiss button', async () => {
+      await userEvent.click(dismissButton);
+    });
+
+    await step('Verify prompt is removed', async () => {
+      await waitFor(async () =>
+        expect(canvas.queryByText('This message can be dismissed.')).not.toBeInTheDocument(),
+      );
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) {
+      return <div data-testid="dismissed">Prompt dismissed</div>;
+    }
+
+    return (
+      <InfoPrompt
+        {...args}
+        description="This message can be dismissed."
+        onDismiss={() => setIsVisible(false)}
+      />
+    );
+  },
+};
+
+/**
+ * Test keyboard accessibility - dismiss prompt via Enter key.
+ */
+export const DismissViaKeyboard: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Tab to the dismiss button', async () => {
+      await wait();
+      await userEvent.tab();
+    });
+
+    await step('Press Enter to dismiss', async () => {
+      await userEvent.keyboard('{Enter}');
+    });
+
+    await step('Verify prompt is removed', async () => {
+      await waitFor(async () =>
+        expect(canvas.queryByText('Press Enter to dismiss.')).not.toBeInTheDocument(),
+      );
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) {
+      return <div data-testid="dismissed">Prompt dismissed</div>;
+    }
+
+    return (
+      <InfoPrompt
+        {...args}
+        description="Press Enter to dismiss."
+        onDismiss={() => setIsVisible(false)}
+      />
+    );
+  },
+};
+
+/**
+ * Test action link click interaction.
+ */
+export const ActionClickInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const actionLink = canvas.getByRole('link', { name: 'Learn more' });
+
+    await step('Verify prompt with action is visible', async () => {
+      await waitFor(async () =>
+        expect(canvas.getByText('Click the action link.')).toBeInTheDocument(),
+      );
+    });
+
+    await step('Click the action link', async () => {
+      await userEvent.click(actionLink);
+    });
+
+    await step('Verify action was triggered', async () => {
+      await waitFor(async () => expect(canvas.getByText('Action clicked!')).toBeInTheDocument());
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [actionClicked, setActionClicked] = useState(false);
+
+    return (
+      <>
+        <InfoPrompt
+          {...args}
+          description="Click the action link."
+          action={{
+            label: 'Learn more',
+            href: '#',
+            onClick: (e: MouseEvent) => {
+              e.preventDefault();
+              setActionClicked(true);
+            },
+          }}
+        />
+        {actionClicked && <div>Action clicked!</div>}
+      </>
+    );
+  },
+};
+
+/**
+ * Test multiple prompts with different sentiments can be dismissed independently.
+ */
+export const MultipleDismissInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const dismissButtons = canvas.getAllByRole('button', { name: /close/i });
+
+    await step('Verify all prompts are visible', async () => {
+      await waitFor(async () => {
+        await expect(canvas.getByText('Success message')).toBeInTheDocument();
+        await expect(canvas.getByText('Warning message')).toBeInTheDocument();
+        await expect(canvas.getByText('Negative message')).toBeInTheDocument();
+      });
+    });
+
+    await step('Dismiss the warning prompt', async () => {
+      // Click the second dismiss button (warning)
+      await userEvent.click(dismissButtons[1]);
+    });
+
+    await step('Verify only warning prompt is removed', async () => {
+      await waitFor(async () => {
+        await expect(canvas.getByText('Success message')).toBeInTheDocument();
+        await expect(canvas.queryByText('Warning message')).not.toBeInTheDocument();
+        await expect(canvas.getByText('Negative message')).toBeInTheDocument();
+      });
+    });
+  },
+  render: function Render() {
+    const [prompts, setPrompts] = useState([
+      { id: 1, sentiment: 'success' as const, description: 'Success message' },
+      { id: 2, sentiment: 'warning' as const, description: 'Warning message' },
+      { id: 3, sentiment: 'negative' as const, description: 'Negative message' },
+    ]);
+
+    const handleDismiss = (id: number) => {
+      setPrompts((prev) => prev.filter((p) => p.id !== id));
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {prompts.map((prompt) => (
+          <InfoPrompt
+            key={prompt.id}
+            sentiment={prompt.sentiment}
+            description={prompt.description}
+            onDismiss={() => handleDismiss(prompt.id)}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+/**
+ * Test that touch interactions work for navigation (mobile).
+ */
+export const TouchInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const actionLink = canvas.getByRole('link', { name: 'Navigate' });
+
+    await step('Verify prompt with action is visible', async () => {
+      await waitFor(async () => expect(canvas.getByText('Tap the prompt.')).toBeInTheDocument());
+    });
+
+    await step('Click the action (simulating touch)', async () => {
+      await userEvent.click(actionLink);
+    });
+
+    await step('Verify navigation was triggered', async () => {
+      await waitFor(async () => expect(canvas.getByText('Navigated!')).toBeInTheDocument());
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [navigated, setNavigated] = useState(false);
+
+    return (
+      <>
+        <InfoPrompt
+          {...args}
+          description="Tap the prompt."
+          action={{
+            label: 'Navigate',
+            href: '#',
+            onClick: (e: MouseEvent) => {
+              e.preventDefault();
+              setNavigated(true);
+            },
+          }}
+        />
+        {navigated && <div>Navigated!</div>}
+      </>
+    );
+  },
+};

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

@@ -0,0 +1,224 @@
+import { fireEvent, mockMatchMedia, render, screen, userEvent } from '../../test-utils';
+import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
+
+mockMatchMedia();
+
+const CUSTOM_MEDIA = <span data-testid="custom-media">Custom Media</span>;
+
+describe('InfoPrompt', () => {
+  const defaultProps: InfoPromptProps = {
+    description: 'Prompt description',
+  };
+
+  it('renders description', () => {
+    render(<InfoPrompt {...defaultProps} />);
+    expect(screen.getByText('Prompt description')).toBeInTheDocument();
+  });
+
+  it('renders title when provided', () => {
+    render(<InfoPrompt {...defaultProps} title="Test Title" />);
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Prompt description')).toBeInTheDocument();
+  });
+
+  it('renders with GiftBox icon as default for `proposition` sentiment', () => {
+    render(<InfoPrompt {...defaultProps} sentiment="proposition" data-testid="info-prompt" />);
+    expect(screen.getByText('Prompt description')).toBeInTheDocument();
+    // GiftBox icon should be rendered for proposition sentiment
+    const prompt = screen.getByTestId('info-prompt');
+    expect(prompt.querySelector('svg')).toBeInTheDocument();
+  });
+
+  describe('sentiments', () => {
+    [
+      { sentiment: 'negative' as const, surfaceClass: 'wds-prompt--negative' },
+      { sentiment: 'warning' as const, surfaceClass: 'wds-prompt--warning' },
+      { sentiment: 'neutral' as const, surfaceClass: 'wds-prompt--neutral' },
+      { sentiment: 'success' as const, surfaceClass: 'wds-prompt--success' },
+      { sentiment: 'proposition' as const, surfaceClass: 'wds-prompt--proposition' },
+    ].forEach(({ sentiment, surfaceClass }) => {
+      describe(sentiment, () => {
+        it('should apply correct styles', () => {
+          render(<InfoPrompt {...defaultProps} sentiment={sentiment} data-testid="info-prompt" />);
+          expect(screen.getByTestId('info-prompt')).toHaveClass(surfaceClass);
+        });
+      });
+    });
+  });
+
+  describe('custom media', () => {
+    it('should render custom media when provided', () => {
+      render(<InfoPrompt {...defaultProps} media={{ asset: CUSTOM_MEDIA }} />);
+      expect(screen.getByTestId('custom-media')).toBeInTheDocument();
+    });
+
+    it('should render custom media for any sentiment', () => {
+      render(<InfoPrompt {...defaultProps} sentiment="neutral" media={{ asset: CUSTOM_MEDIA }} />);
+      expect(screen.getByTestId('custom-media')).toBeInTheDocument();
+    });
+  });
+
+  describe('action', () => {
+    it('should render action link when action is provided with href', () => {
+      render(
+        <InfoPrompt {...defaultProps} action={{ label: 'Learn more', href: '/learn-more' }} />,
+      );
+      const actionLink = screen.getByRole('link', { name: 'Learn more' });
+      expect(actionLink).toBeInTheDocument();
+      expect(actionLink).toHaveAttribute('href', '/learn-more');
+    });
+
+    it('should render action link with target when provided', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'External link', href: 'https://example.com', target: '_blank' }}
+        />,
+      );
+      const actionLink = screen.getByRole('link', { name: /External link/i });
+      expect(actionLink).toHaveAttribute('target', '_blank');
+    });
+
+    it('should call onClick when action button is clicked', async () => {
+      const user = userEvent.setup();
+      const onClick = jest.fn();
+      render(<InfoPrompt {...defaultProps} action={{ label: 'Click me', onClick }} />);
+      const actionButton = screen.getByRole('button', { name: 'Click me' });
+      await user.click(actionButton);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not render action when not provided', () => {
+      render(<InfoPrompt {...defaultProps} />);
+      expect(screen.queryByRole('link', { name: 'Learn more' })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('HTML attributes', () => {
+    it('applies custom className, id, and data-testid', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          className="custom-class"
+          id="custom-id"
+          data-testid="custom-test"
+        />,
+      );
+      const el = screen.getByTestId('custom-test');
+      expect(el).toHaveClass('custom-class');
+      expect(el).toHaveAttribute('id', 'custom-id');
+    });
+  });
+
+  describe('SentimentSurface integration', () => {
+    it('maps success sentiment correctly for SentimentSurface', () => {
+      render(<InfoPrompt {...defaultProps} sentiment="success" data-testid="prompt" />);
+      const el = screen.getByTestId('prompt');
+      expect(el).toHaveClass('wds-prompt--success');
+      expect(el).toHaveClass('wds-sentiment-surface');
+    });
+
+    it('passes through other sentiments unchanged', () => {
+      render(<InfoPrompt {...defaultProps} sentiment="negative" data-testid="prompt" />);
+      const el = screen.getByTestId('prompt');
+      expect(el).toHaveClass('wds-prompt--negative');
+      expect(el).toHaveClass('wds-sentiment-surface');
+    });
+  });
+
+  describe('touch interactions', () => {
+    const originalLocation = window.location;
+
+    beforeAll(() => {
+      jest.spyOn(window, 'open').mockImplementation();
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: {
+          ...originalLocation,
+          assign: jest.fn(),
+        },
+      });
+    });
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    afterAll(() => {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    });
+
+    it('should navigate to action href on touch tap', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more' }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+      fireEvent.touchEnd(prompt);
+      expect(window.location.assign).toHaveBeenCalledWith('/learn-more');
+    });
+
+    it('should open in new tab when action target is _blank', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'External link', href: 'https://example.com', target: '_blank' }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      expect(window.open).not.toHaveBeenCalled();
+      fireEvent.touchEnd(prompt);
+      expect(window.open).toHaveBeenCalledWith(
+        'https://example.com',
+        '_blank',
+        'noopener, noreferrer',
+      );
+    });
+
+    it('should not navigate if touch move occurs (scrolling)', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more' }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+      fireEvent.touchMove(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+      fireEvent.touchEnd(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+    });
+
+    it('should not navigate if no action href is provided', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Click me', onClick: jest.fn() }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      fireEvent.touchEnd(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+      expect(window.open).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -0,0 +1,148 @@
+import { HTMLAttributes, ReactNode, useState } from 'react';
+import { Sentiment, Typography } from '../../common';
+import { GiftBox } from '@transferwise/icons';
+import type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';
+import StatusIcon from '../../statusIcon';
+import { clsx } from 'clsx';
+import Body from '../../body';
+import Link, { LinkProps } from '../../link';
+import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
+
+export type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {
+  /**
+   * The label text for the action link
+   */
+  label: string;
+};
+
+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.
+   */
+  asset: ReactNode;
+};
+
+export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
+  Pick<PrimitivePromptProps, 'data-testid'> & {
+    /**
+     * The sentiment determines the colour scheme
+     * @default 'neutral'
+     */
+    sentiment?: SurfaceSentiment;
+    /**
+     * Handler called when the close button is clicked.
+     * If not provided, the close button is hidden.
+     */
+    onDismiss?: () => void;
+    /**
+     * Custom media to override the default status icon.
+     * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.
+     */
+    media?: InfoPromptMedia;
+    /**
+     * Action link to be displayed below the description
+     */
+    action?: InfoPromptAction;
+    /**
+     * Title content for the prompt
+     */
+    title?: string;
+    /**
+     * Description text for the prompt (required)
+     */
+    description: string;
+  };
+
+/**
+ * InfoPrompt displays important contextual messages to users within a screen.
+ * It provides a visually distinct way to communicate information, warnings, errors,
+ * or positive feedback with optional actions and dismissal capabilities.
+ *
+ * Use this component to replace the deprecated Alert component.
+ */
+export const InfoPrompt = ({
+  sentiment = 'neutral',
+  onDismiss,
+  media,
+  action,
+  title,
+  description,
+  className,
+  'data-testid': dataTestId,
+  ...restProps
+}: InfoPromptProps) => {
+  const [shouldFire, setShouldFire] = useState<boolean>();
+  const statusIconSentiment =
+    sentiment === 'success'
+      ? Sentiment.POSITIVE
+      : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);
+
+  const handleTouchStart = () => {
+    setShouldFire(true);
+  };
+
+  const handleTouchEnd = () => {
+    if (shouldFire && action?.href) {
+      if (action.target === '_blank') {
+        window.top?.open(action.href, '_blank', 'noopener, noreferrer');
+      } else {
+        window.top?.location.assign(action.href);
+      }
+    }
+    setShouldFire(false);
+  };
+
+  const handleTouchMove = () => {
+    setShouldFire(false);
+  };
+
+  const renderMedia = () => {
+    if (media) {
+      return <span className="wds-info-prompt__media">{media.asset}</span>;
+    }
+
+    if (sentiment === 'proposition') {
+      return <GiftBox size={24} />;
+    }
+
+    return <StatusIcon size={24} sentiment={statusIconSentiment} />;
+  };
+
+  return (
+    <PrimitivePrompt
+      sentiment={sentiment}
+      media={renderMedia()}
+      data-testid={dataTestId}
+      className={clsx('wds-info-prompt', className)}
+      {...restProps}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onTouchMove={handleTouchMove}
+      onDismiss={onDismiss}
+    >
+      <div className="wds-info-prompt__content">
+        {title && (
+          <Body className="wds-info-prompt__title" type={Typography.BODY_LARGE_BOLD} as="span">
+            {title}
+          </Body>
+        )}
+        <Body as="span" className="wds-info-prompt__description">
+          {description}
+        </Body>
+        {action && (
+          <Link
+            href={action.href}
+            target={action.target}
+            type={Typography.LINK_DEFAULT}
+            className="wds-info-prompt__action"
+            onClick={action.onClick}
+          >
+            {action.label}
+          </Link>
+        )}
+      </div>
+    </PrimitivePrompt>
+  );
+};

package/src/prompt/InfoPrompt/index.ts

@@ -0,0 +1,2 @@
+export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
+export { InfoPrompt } from './InfoPrompt';

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -44,4 +44,4 @@
       }
     }
   }
-}
+}

package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -4,9 +4,9 @@ import SentimentSurface, { Sentiment } from '../../sentimentSurface';
 import IconButton from '../../iconButton';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../../common/closeButton/CloseButton.messages';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-export type PrimitivePromptProps = {
+export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
   /**
    * The sentiment determines the colour scheme
    * @default success
@@ -24,10 +24,10 @@ export type PrimitivePromptProps = {
    * Handler called when the close button is clicked. If not provided, then the close button is hidden.
    */
   onDismiss?: () => void;
-  id?: string;
-  className?: string;
+  /**
+   * Test ID for testing tools
+   */
   'data-testid'?: string;
-  children: ReactNode;
 };
 
 /**

package/src/prompt/index.ts

@@ -5,5 +5,10 @@
 export type { InlinePromptProps } from './InlinePrompt';
 export { InlinePrompt } from './InlinePrompt';
 
+// ActionPrompt
 export type { ActionPromptProps } from './ActionPrompt';
 export { ActionPrompt } from './ActionPrompt';
+
+// InfoPrompt
+export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
+export { InfoPrompt } from './InfoPrompt';

package/src/radioOption/RadioOption.tsx

@@ -3,7 +3,8 @@ import RadioButton from '../common/RadioButton';
 import { RadioButtonProps } from '../common/RadioButton/RadioButton';
 
 export interface RadioOptionProps<T extends string | number = string>
-  extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,
+  extends
+    Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,
     Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {
   'aria-label'?: string;
   media?: React.ReactNode;

package/src/slidingPanel/SlidingPanel.tsx

@@ -6,8 +6,10 @@ import { Position } from '../common';
 
 export const EXIT_ANIMATION = 350;
 
-export interface SlidingPanelProps
-  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {
+export interface SlidingPanelProps extends Pick<
+  React.ComponentPropsWithRef<'div'>,
+  'ref' | 'className' | 'children'
+> {
   position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;
   open: boolean;
   showSlidingPanelBorder?: boolean;