@transferwise/components 46.124.1 → 46.126.0

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/InlinePrompt/{InlinePrompt.spec.tsx → InlinePrompt.test.tsx}

@@ -30,13 +30,6 @@ describe('InlinePrompt', () => {
     { sentiment: 'proposition' as const, statusIconLabel: '' },
   ].forEach(({ sentiment, statusIconLabel }) => {
     describe(sentiment, () => {
-      it('should apply correct styles', () => {
-        render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
-        expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
-          `wds-prompt--${sentiment === Sentiment.POSITIVE ? 'success' : sentiment}`,
-        );
-      });
-
       if (statusIconLabel) {
         it('should render StatusIcon', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
@@ -113,39 +106,11 @@ describe('InlinePrompt', () => {
     });
   });
 
-  it('applies custom className, id, and data-testid', () => {
-    render(
-      <InlinePrompt
-        {...defaultProps}
-        className="custom-class"
-        id="custom-id"
-        data-testid="custom-test"
-      />,
-    );
+  it('forwards props to PrimitivePrompt', () => {
+    render(<InlinePrompt {...defaultProps} className="custom-class" 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 positive sentiment to success for SentimentSurface', () => {
-      render(
-        <InlinePrompt {...defaultProps} sentiment={Sentiment.POSITIVE} data-testid="prompt" />,
-      );
-      const el = screen.getByTestId('prompt');
-      // The component should have both the original class and the SentimentSurface class
-      expect(el).toHaveClass('wds-prompt--success');
-      expect(el).toHaveClass('wds-sentiment-surface');
-    });
-
-    it('passes through other sentiments unchanged', () => {
-      render(
-        <InlinePrompt {...defaultProps} sentiment={Sentiment.NEGATIVE} data-testid="prompt" />,
-      );
-      const el = screen.getByTestId('prompt');
-      expect(el).toHaveClass('wds-prompt--negative');
-      expect(el).toHaveClass('wds-sentiment-surface');
-    });
+    expect(el).toBeInTheDocument();
   });
 
   describe('width', () => {

package/src/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -1,7 +1,9 @@
 .wds-prompt {
   border-radius: 10px;
-  border-radius: var(--radius-small);
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
   padding: 8px;
   padding: var(--Prompt-padding, var(--padding-x-small));
@@ -17,6 +19,9 @@
   grid-template-columns: auto 1fr;
   width: 100%;
 }
+.wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto 1fr auto;
+}
 .wds-prompt__media-wrapper {
   align-self: flex-start;
   padding-top: calc(4px - 1px);
@@ -32,10 +37,14 @@
   gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
+  grid-column-end: 3;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
   }
+  .wds-prompt__content-wrapper--with-dismiss .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
 }

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -1,6 +1,7 @@
 .wds-prompt {
-  border-radius: var(--radius-small);
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: var(--Prompt-gap, var(--size-16));
   overflow-wrap: break-word;
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
@@ -11,6 +12,10 @@
     gap: var(--Prompt-gap, var(--size-16));
     grid-template-columns: auto 1fr;
     width: 100%;
+
+    &--with-dismiss {
+      grid-template-columns: auto 1fr auto;
+    }
   }
 
   &__media-wrapper {
@@ -28,10 +33,15 @@
     flex-wrap: wrap;
     gap: var(--Prompt-actions-gap, var(--size-8));
     grid-column-start: 2;
+    grid-column-end: 3;
 
-    @media (--screen-md-max) {
+    @media (--screen-sm-max) {
       grid-column: span 2;
       width: 100%;
+
+      .wds-prompt__content-wrapper--with-dismiss & {
+        grid-column: span 3;
+      }
     }
   }
-}
+}

package/src/prompt/PrimitivePrompt/PrimitivePrompt.test.tsx

@@ -0,0 +1,161 @@
+import { mockMatchMedia, render, screen, within } from '../../test-utils';
+import { PrimitivePrompt, PrimitivePromptProps } from './PrimitivePrompt';
+import { userEvent } from '@testing-library/user-event';
+
+mockMatchMedia();
+
+describe('PrimitivePrompt', () => {
+  const defaultProps: PrimitivePromptProps = {
+    media: <span data-testid="test-media">Media</span>,
+    children: <div>Test content</div>,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Basic rendering', () => {
+    it('renders children content', () => {
+      render(<PrimitivePrompt {...defaultProps} />);
+      expect(screen.getByText('Test content')).toBeInTheDocument();
+    });
+
+    it('renders media', () => {
+      render(<PrimitivePrompt {...defaultProps} />);
+      expect(screen.getByTestId('test-media')).toBeInTheDocument();
+    });
+
+    it('renders actions when provided', () => {
+      render(
+        <PrimitivePrompt
+          {...defaultProps}
+          actions={<button type="button">Action Button</button>}
+        />,
+      );
+
+      expect(screen.getByText('Action Button')).toBeInTheDocument();
+    });
+
+    it('does not render actions wrapper when actions not provided', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" />);
+      const prompt = screen.getByTestId('prompt');
+      expect(within(prompt).queryByRole('button')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Sentiments', () => {
+    [
+      { sentiment: 'negative' as const, label: 'negative' },
+      { sentiment: 'warning' as const, label: 'warning' },
+      { sentiment: 'neutral' as const, label: 'neutral' },
+      { sentiment: 'success' as const, label: 'success' },
+    ].forEach(({ sentiment, label }) => {
+      it(`applies correct CSS class for ${label} sentiment`, () => {
+        render(<PrimitivePrompt {...defaultProps} sentiment={sentiment} data-testid="prompt" />);
+        const promptElement = screen.getByTestId('prompt');
+
+        expect(promptElement).toHaveClass(`wds-prompt--${label}`);
+      });
+    });
+
+    it('defaults to success sentiment', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveClass('wds-prompt--success');
+    });
+
+    it('applies base wds-prompt class', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveClass('wds-prompt');
+    });
+  });
+
+  describe('Dismiss functionality', () => {
+    it('renders dismiss button when onDismiss is provided', () => {
+      const onDismiss = jest.fn();
+      render(<PrimitivePrompt {...defaultProps} onDismiss={onDismiss} />);
+
+      expect(screen.getByLabelText('Close')).toBeInTheDocument();
+    });
+
+    it('calls onDismiss when dismiss button is clicked', async () => {
+      const onDismiss = jest.fn();
+      const user = userEvent.setup();
+      render(<PrimitivePrompt {...defaultProps} onDismiss={onDismiss} />);
+
+      const dismissButton = screen.getByLabelText('Close');
+      await user.click(dismissButton);
+
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not render dismiss button when onDismiss is not provided', () => {
+      render(<PrimitivePrompt {...defaultProps} />);
+      expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
+    });
+
+    it('applies with-dismiss class when onDismiss is provided', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" onDismiss={() => {}} />);
+
+      const prompt = screen.getByTestId('prompt');
+
+      expect(screen.getByLabelText('Close')).toBeInTheDocument();
+      expect(prompt).toBeInTheDocument();
+    });
+
+    it('does not apply with-dismiss class when onDismiss is not provided', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" />);
+
+      expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Custom attributes', () => {
+    it('applies custom className', () => {
+      render(<PrimitivePrompt {...defaultProps} className="custom-class" data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveClass('custom-class');
+    });
+
+    it('applies custom id', () => {
+      render(<PrimitivePrompt {...defaultProps} id="custom-id" data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveAttribute('id', 'custom-id');
+    });
+
+    it('applies custom data-testid', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="custom-test-id" />);
+      expect(screen.getByTestId('custom-test-id')).toBeInTheDocument();
+    });
+
+    it('combines custom className with base classes', () => {
+      render(
+        <PrimitivePrompt
+          {...defaultProps}
+          className="custom-class"
+          sentiment="warning"
+          data-testid="prompt"
+        />,
+      );
+
+      const prompt = screen.getByTestId('prompt');
+
+      expect(prompt).toHaveClass('wds-prompt');
+      expect(prompt).toHaveClass('wds-prompt--warning');
+      expect(prompt).toHaveClass('custom-class');
+    });
+  });
+
+  describe('SentimentSurface integration', () => {
+    it('uses SentimentSurface for sentiment styling', () => {
+      render(<PrimitivePrompt {...defaultProps} sentiment="negative" data-testid="prompt" />);
+      const prompt = screen.getByTestId('prompt');
+
+      expect(prompt).toHaveClass('wds-sentiment-surface');
+    });
+
+    it('passes sentiment to SentimentSurface', () => {
+      render(<PrimitivePrompt {...defaultProps} sentiment="warning" data-testid="prompt" />);
+      const prompt = screen.getByTestId('prompt');
+
+      expect(prompt).toHaveClass('wds-prompt--warning');
+    });
+  });
+});