@transferwise/components 46.145.0 → 46.146.0

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

@@ -6,6 +6,7 @@ import { Confetti, GiftBox, Star, Suitcase, Briefcase, Plane } from '@transferwi
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
+import Link from '../../link';
 import { InfoPrompt, InfoPromptProps, InfoPromptMedia } from './InfoPrompt';
 
 const withComponentGrid =
@@ -232,6 +233,47 @@ export const WithAction: StoryObj<InfoPromptProps> = {
   ),
 };
 
+/**
+ * The `description` prop accepts rich content (ReactNode), allowing inline interactive elements
+ * such as links that can trigger a popover.
+ *
+ * **Important**: If the description contains an interactive element, do not use the `action` prop
+ * simultaneously — InfoPrompt should have at most one interaction.
+ */
+export const WithRichDescription: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="neutral"
+        description={
+          <>
+            Your transfer is subject to our{' '}
+            <Link href="/fees" target="_blank" type="link-default">
+              fee schedule
+            </Link>
+            .
+          </>
+        }
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="warning"
+        title="Verification Required"
+        description={
+          <>
+            Please{' '}
+            <Link href="/verify" type="link-default">
+              verify your identity
+            </Link>{' '}
+            to continue sending money.
+          </>
+        }
+      />
+    </>
+  ),
+};
+
 /**
  * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
  * Note: The component itself is not automatically removed - you must handle state management.

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

@@ -1,4 +1,5 @@
-import { fireEvent, mockMatchMedia, render, screen, userEvent, waitFor } from '../../test-utils';
+import { act, fireEvent, mockMatchMedia, render, screen, userEvent } from '../../test-utils';
+import { WDS_LIVE_REGION_DELAY_MS } from '../../common/constants';
 import { resetLiveRegionAnnouncementQueue } from '../../common/liveRegion/LiveRegion';
 import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
 
@@ -15,11 +16,74 @@ describe('InfoPrompt', () => {
     resetLiveRegionAnnouncementQueue();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   it('renders description', () => {
     render(<InfoPrompt {...defaultProps} />);
     expect(screen.getByText('Prompt description')).toBeInTheDocument();
   });
 
+  it('renders rich-content description (ReactNode)', () => {
+    render(
+      <InfoPrompt
+        description={
+          <>
+            See our <a href="/fees">fee schedule</a>.
+          </>
+        }
+      />,
+    );
+    expect(screen.getByRole('link', { name: 'fee schedule', hidden: true })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'fee schedule', hidden: true })).toHaveAttribute(
+      'href',
+      '/fees',
+    );
+  });
+
+  it('re-announces when rich-content description text changes', () => {
+    jest.useFakeTimers();
+
+    const { rerender } = render(
+      <InfoPrompt
+        description={
+          <>
+            See our <a href="/fees">fee schedule</a>.
+          </>
+        }
+      />,
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(WDS_LIVE_REGION_DELAY_MS);
+    });
+
+    const liveRegion = screen.getByRole('status');
+    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(liveRegion).toHaveTextContent('See our fee schedule.');
+
+    rerender(
+      <InfoPrompt
+        description={
+          <>
+            Read the updated <a href="/fees">pricing guide</a>.
+          </>
+        }
+      />,
+    );
+
+    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+    act(() => {
+      jest.advanceTimersByTime(WDS_LIVE_REGION_DELAY_MS);
+    });
+
+    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(liveRegion).toHaveTextContent('Read the updated pricing guide.');
+  });
+
   it('renders title when provided', () => {
     render(<InfoPrompt {...defaultProps} title="Test Title" />);
     expect(screen.getByText('Test Title')).toBeInTheDocument();

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, useState } from 'react';
+import { Children, HTMLAttributes, ReactNode, isValidElement, useState } from 'react';
 import { LiveRegion, Sentiment, Typography } from '../../common';
 import type { AriaLive } from '../../common';
 import { GiftBox } from '@transferwise/icons';
@@ -50,9 +50,10 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'ar
      */
     title?: string;
     /**
-     * Description text for the prompt (required)
+     * Description content for the prompt (required). Accepts plain text or rich content (ReactNode).
+     * If the description contains an interactive element, the `action` prop must not be used simultaneously.
      */
-    description: string;
+    description: ReactNode;
     className?: string;
     /**
      * Sets the ARIA live region politeness level.
@@ -86,7 +87,17 @@ export const InfoPrompt = ({
   ...restProps
 }: InfoPromptProps) => {
   const [shouldFire, setShouldFire] = useState<boolean>();
-  const announceOnChange = [title, description, action?.label].filter(Boolean).join('|');
+  const announceOnChange = [
+    title,
+    Children.toArray(description)
+      .map((child) =>
+        isValidElement<{ children?: ReactNode }>(child) ? child.props.children : child,
+      )
+      .join(''),
+    action?.label,
+  ]
+    .filter(Boolean)
+    .join('|');
   const statusIconSentiment =
     sentiment === 'success'
       ? Sentiment.POSITIVE