@transferwise/components 46.124.1 → 46.125.0

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

@@ -0,0 +1,184 @@
+import { ReactElement, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { Bank } from '@transferwise/icons';
+import { ActionPrompt } from './ActionPrompt';
+import { lorem10 } from '../../test-utils';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+const meta: Meta<typeof ActionPrompt> = {
+  title: 'Prompts/ActionPrompt',
+  component: ActionPrompt,
+  tags: ['new'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionPrompt>;
+
+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 const AllSentiments: Story = {
+  render: () => {
+    return (
+      <>
+        {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
+          (sentiment) => (
+            <ActionPrompt
+              key={sentiment}
+              sentiment={sentiment}
+              title="Title"
+              description={lorem10}
+              action={{ label: 'Primary', onClick: fn() }}
+              actionSecondary={{ label: 'Secondary', onClick: fn() }}
+              className="m-b-2"
+              onDismiss={fn()}
+            />
+          ),
+        )}
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const Mobile: Story = {
+  ...AllSentiments,
+  ...withVariantConfig(['mobile'], AllSentiments),
+};
+
+export const PrimaryActionOnly: Story = {
+  args: {
+    sentiment: 'proposition',
+    title: 'Payment successful',
+    description: 'Your money is on its way',
+    action: { label: 'View details', onClick: fn() },
+    onDismiss: fn(),
+  },
+};
+
+export const WithoutDescription: Story = {
+  render: () => {
+    return (
+      <>
+        <ActionPrompt
+          sentiment="warning"
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+          actionSecondary={{ label: 'Log out', onClick: fn() }}
+          onDismiss={fn()}
+        />
+        <ActionPrompt
+          sentiment="success"
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+        />
+        <ActionPrompt
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+        />
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const Media: Story = {
+  render: () => {
+    return (
+      <>
+        <ActionPrompt
+          sentiment="neutral"
+          title="Custom image"
+          description={lorem10}
+          media={{ imgSrc: '../../wise-card.svg' }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="neutral"
+          title="Profile Image"
+          description={lorem10}
+          media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="proposition"
+          title="Business Profile"
+          description={lorem10}
+          media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="negative"
+          title="Personal Profile"
+          description={lorem10}
+          media={{ avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="warning"
+          title="Custom Icon"
+          description={lorem10}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="success"
+          title="Initials"
+          description={lorem10}
+          media={{ avatar: { profileName: 'John Doe' } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+          actionSecondary={{ label: 'Maybe later', onClick: fn() }}
+        />
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const OnDismiss: Story = {
+  render: () => {
+    const [showNeutralPrompt, setShowNeutralPrompt] = useState(true);
+    const [showSuccessPrompt, setShowSuccessPrompt] = useState(true);
+
+    return (
+      <>
+        {showNeutralPrompt && (
+          <ActionPrompt
+            sentiment="proposition"
+            title="Payment successful"
+            description="Your money is on its way"
+            action={{ label: 'View details', onClick: fn() }}
+            className="m-b-2"
+            onDismiss={() => setShowNeutralPrompt(false)}
+          />
+        )}
+        {showSuccessPrompt && (
+          <ActionPrompt
+            sentiment="success"
+            title="Payment successful"
+            description="Your money is on its way"
+            action={{ label: 'View details', onClick: fn() }}
+            onDismiss={() => setShowSuccessPrompt(false)}
+          />
+        )}
+      </>
+    );
+  },
+};

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