@transferwise/components 0.0.0-experimental-6f41b35 → 0.0.0-experimental-452dddd

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/ssr.test.tsx

@@ -91,6 +91,7 @@ describe('Server side rendering', () => {
 
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
+    actionPrimary: { label: 'Action', onClick: jest.fn(), href: '#' },
     currencies: [],
     currencySelector: { options: [] },
     steps: [],