@transferwise/components 46.124.0 → 46.125.0

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

@@ -0,0 +1,256 @@
+import { Sentiment } from '../../common';
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import { ActionPrompt, ActionPromptProps } from './ActionPrompt';
+import { userEvent } from '@testing-library/user-event';
+
+mockMatchMedia();
+
+describe('ActionPrompt', () => {
+  const defaultProps: ActionPromptProps = {
+    title: 'Test Title',
+    action: {
+      label: 'Primary Action',
+      onClick: jest.fn(),
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Basic rendering', () => {
+    it('renders title', () => {
+      render(<ActionPrompt {...defaultProps} />);
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+    });
+
+    it('renders description when provided', () => {
+      render(<ActionPrompt {...defaultProps} description="Test description" />);
+      expect(screen.getByText('Test description')).toBeInTheDocument();
+    });
+  });
+
+  [
+    { sentiment: 'negative' as const, statusIconLabel: 'Error:' },
+    { sentiment: 'warning' as const, statusIconLabel: 'Warning:' },
+    { sentiment: 'neutral' as const, statusIconLabel: 'Information:' },
+    { sentiment: 'success' as const, statusIconLabel: 'Success:' },
+    { sentiment: 'proposition' as const, statusIconLabel: '' },
+  ].forEach(({ sentiment, statusIconLabel }) => {
+    describe(sentiment, () => {
+      if (statusIconLabel) {
+        it('should render StatusIcon', () => {
+          render(<ActionPrompt {...defaultProps} sentiment={sentiment} />);
+          expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
+        });
+      }
+    });
+  });
+
+  describe('Actions', () => {
+    it('renders primary action button with correct label', () => {
+      render(<ActionPrompt {...defaultProps} />);
+      expect(screen.getByText('Primary Action')).toBeInTheDocument();
+    });
+
+    it('calls primary action onClick when clicked', async () => {
+      const onClick = jest.fn();
+      const user = userEvent.setup();
+      render(
+        <ActionPrompt {...defaultProps} action={{ label: 'Primary Action', onClick }} />,
+      );
+      const button = screen.getByRole('button', { name: 'Primary Action' });
+      await user.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders primary action as link when href is provided', () => {
+      render(
+        <ActionPrompt
+          {...defaultProps}
+          action={{ label: 'Primary Action', href: '/test-url' }}
+        />,
+      );
+      const link = screen.getByRole('link', { name: 'Primary Action' });
+      expect(link).toHaveAttribute('href', '/test-url');
+    });
+
+    it('renders secondary action when provided', () => {
+      render(
+        <ActionPrompt
+          {...defaultProps}
+          actionSecondary={{ label: 'Secondary Action', onClick: jest.fn() }}
+        />,
+      );
+      expect(screen.getByText('Secondary Action')).toBeInTheDocument();
+    });
+
+    it('calls secondary action onClick when clicked', async () => {
+      const onClick = jest.fn();
+      const user = userEvent.setup();
+      render(
+        <ActionPrompt {...defaultProps} actionSecondary={{ label: 'Secondary Action', onClick }} />,
+      );
+      const button = screen.getByRole('button', { name: 'Secondary Action' });
+      await user.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders secondary action as link when href is provided', () => {
+      render(
+        <ActionPrompt
+          {...defaultProps}
+          actionSecondary={{ label: 'Secondary Action', href: '/secondary-url' }}
+        />,
+      );
+      const link = screen.getByRole('link', { name: 'Secondary Action' });
+      expect(link).toHaveAttribute('href', '/secondary-url');
+    });
+  });
+
+  describe('Media', () => {
+    describe('Image media', () => {
+      it('renders custom image when imgSrc is provided', () => {
+        render(
+          <ActionPrompt
+            {...defaultProps}
+            media={{ imgSrc: '/test-image.jpg', 'aria-label': 'Test image' }}
+          />,
+        );
+
+        const img = screen.getByRole('img', { name: 'Test image' });
+
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAttribute('src', '/test-image.jpg');
+      });
+
+      it('renders image with empty alt when aria-label is not provided', () => {
+        const { container } = render(
+          <ActionPrompt {...defaultProps} media={{ imgSrc: '/test-image.jpg' }} />,
+        );
+        const img = container.querySelector('img[src="/test-image.jpg"]');
+        expect(img).toHaveAttribute('alt', '');
+      });
+    });
+
+    describe('Avatar media', () => {
+      it('renders avatar with image', () => {
+        const { container } = render(
+          <ActionPrompt {...defaultProps} media={{ avatar: { imgSrc: '/avatar.jpg' } }} />,
+        );
+        const img = container.querySelector('img[src="/avatar.jpg"]');
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAttribute('src', '/avatar.jpg');
+      });
+
+      it('renders avatar with profile name', () => {
+        render(<ActionPrompt {...defaultProps} media={{ avatar: { profileName: 'John Doe' } }} />);
+        expect(screen.getByText('JD')).toBeInTheDocument();
+      });
+
+      it('renders avatar with custom asset', () => {
+        render(
+          <ActionPrompt
+            {...defaultProps}
+            media={{ avatar: { asset: <span data-testid="custom-icon">Icon</span> } }}
+          />,
+        );
+
+        expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+      });
+
+      it('renders avatar with badge', () => {
+        render(
+          <ActionPrompt
+            {...defaultProps}
+            media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
+          />,
+        );
+
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+      });
+
+      it('applies status badge for non-proposition sentiment when no badge is provided', () => {
+        render(
+          <ActionPrompt
+            {...defaultProps}
+            sentiment="success"
+            media={{ avatar: { profileType: 'PERSONAL' } }}
+          />,
+        );
+
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+      });
+
+      it('renders avatar for proposition sentiment when no badge is provided', () => {
+        render(
+          <ActionPrompt
+            {...defaultProps}
+            sentiment="proposition"
+            media={{ avatar: { profileType: 'PERSONAL' } }}
+          />,
+        );
+
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+      });
+    });
+
+    describe('Default media', () => {
+      it('renders GiftBox for proposition sentiment with no media', () => {
+        render(<ActionPrompt {...defaultProps} sentiment="proposition" />);
+        expect(screen.getByTestId('gift-box-icon')).toBeInTheDocument();
+      });
+
+      it('renders StatusIcon for non-proposition sentiment with no media', () => {
+        render(<ActionPrompt {...defaultProps} sentiment="success" />);
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Two actions styling', () => {
+    it('applies two actions class when secondary action is provided', () => {
+      render(
+        <ActionPrompt
+          {...defaultProps}
+          actionSecondary={{ label: 'Secondary', onClick: jest.fn() }}
+          data-testid="prompt"
+        />,
+      );
+
+      expect(screen.getByTestId('prompt')).toHaveClass('wds-action-prompt--with-two-actions');
+    });
+
+    it('does not apply two actions class when only primary action is provided', () => {
+      render(<ActionPrompt {...defaultProps} data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).not.toHaveClass('wds-action-prompt--with-two-actions');
+    });
+  });
+
+  describe('Responsive behavior', () => {
+    it('renders buttons as block on mobile', () => {
+      // Mock mobile viewport
+      const mockMatchMediaFn = window.matchMedia as jest.Mock;
+      mockMatchMediaFn.mockImplementation((query: string) => ({
+        matches: query === '(max-width: 768px)',
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      }));
+
+      render(
+        <ActionPrompt
+          {...defaultProps}
+          actionSecondary={{ label: 'Secondary', onClick: jest.fn() }}
+        />,
+      );
+
+      expect(screen.getByText('Primary Action')).toBeInTheDocument();
+      expect(screen.getByText('Secondary')).toBeInTheDocument();
+    });
+  });
+});

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -0,0 +1,129 @@
+import { ReactNode } from 'react';
+import { clsx } from 'clsx';
+
+import StatusIcon from '../../statusIcon';
+import Body from '../../body';
+import Button from '../../button';
+import { Breakpoint, Typography } from '../../common';
+import AvatarView, { AvatarViewProps } from '../../avatarView';
+import Image from '../../image';
+import { ButtonProps } from '../../button/Button.types';
+import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
+import { BadgeAssetsProps } from '../../badge';
+import { GiftBox } from '@transferwise/icons';
+import { useScreenSize } from '../../common/hooks/useScreenSize';
+
+export type ActionPromptProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  media?: {
+    imgSrc?: string;
+    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+      asset?: AvatarViewProps['children'];
+      badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+    };
+    'aria-label'?: string;
+  };
+  action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    label: ButtonProps['children'];
+  };
+  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    label: ButtonProps['children'];
+  };
+} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
+
+export const ActionPrompt = ({
+  sentiment = 'neutral',
+  title,
+  description,
+  onDismiss,
+  media,
+  action,
+  actionSecondary,
+  id,
+  className,
+  'data-testid': testId,
+}: ActionPromptProps) => {
+  const isMobile = !useScreenSize(Breakpoint.MEDIUM);
+
+  const renderMedia = () => {
+    if (media?.imgSrc) {
+      return (
+        <Image
+          src={media.imgSrc}
+          className="wds-action-prompt--media-image"
+          alt={media['aria-label'] ?? ''}
+        />
+      );
+    }
+    if (media?.avatar) {
+      const badge = media.avatar.badge
+        ? media.avatar.badge
+        : sentiment === 'proposition'
+          ? {}
+          : { status: sentiment };
+      return (
+        <AvatarView {...media.avatar} badge={badge} size={48}>
+          {media.avatar.asset}
+        </AvatarView>
+      );
+    }
+    return sentiment === 'proposition' ? (
+      <AvatarView size={48}>
+        <GiftBox />
+      </AvatarView>
+    ) : (
+      <StatusIcon size={48} sentiment={sentiment} />
+    );
+  };
+
+  return (
+    <PrimitivePrompt
+      id={id}
+      sentiment={sentiment}
+      data-testid={testId}
+      className={clsx(
+        'wds-action-prompt',
+        { 'wds-action-prompt--with-two-actions': !!actionSecondary },
+        className,
+      )}
+      media={renderMedia()}
+      actions={
+        <>
+          {actionSecondary && (
+            // @ts-expect-error onClick type mismatch
+            <Button
+              v2
+              size="md"
+              priority="secondary"
+              href={actionSecondary.href}
+              block={isMobile}
+              onClick={actionSecondary?.onClick}
+            >
+              {actionSecondary.label}
+            </Button>
+          )}
+          {/* @ts-expect-error onClick type mismatch */}
+          <Button
+            v2
+            size="md"
+            priority="primary"
+            href={action.href}
+            block={isMobile}
+            onClick={action.onClick}
+          >
+            {action.label}
+          </Button>
+        </>
+      }
+      onDismiss={onDismiss}
+    >
+      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>
+        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>
+        {description && <Body>{description}</Body>}
+      </div>
+    </PrimitivePrompt>
+  );
+};
+
+export default ActionPrompt;

package/src/prompt/ActionPrompt/index.ts

@@ -0,0 +1,2 @@
+export type { ActionPromptProps } from './ActionPrompt';
+export { ActionPrompt } from './ActionPrompt';

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');
+    });
+  });
+});