@transferwise/components 46.131.2 → 46.132.0

package/src/main.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
 }
 
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,
@@ -28096,6 +28143,10 @@ a[data-toggle="tooltip"] {
   --Card-padding: var(--size-16);
 }
 
+.wds-LiveRegion {
+  width: 100%;
+}
+
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }

package/src/main.less

@@ -22,6 +22,7 @@
 @import "./circularButton/CircularButton.less";
 @import "./common/circle/Circle.less";
 @import "./common/baseCard/BaseCard.less";
+@import "./common/liveRegion/LiveRegion.less";
 @import "./common/bottomSheet/BottomSheet.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";

package/src/modal/Modal.story.tsx

@@ -10,7 +10,6 @@ import { lorem10, lorem100, lorem1000 } from '../test-utils';
 export default {
   component: Modal,
   title: 'Dialogs/Modal',
-
   args: {
     size: 'md',
     position: 'center',

package/src/popover/Popover.story.tsx

@@ -26,7 +26,6 @@ const Content = () => (
 export default {
   component: Popover,
   title: 'Dialogs/Popover',
-
   args: {
     preferredPlacement: Position.BOTTOM,
     title: 'Guaranteed rate',

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

@@ -82,11 +82,6 @@ const meta: Meta<typeof ActionPrompt> = {
       },
     },
   },
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
 };
 
 export default meta;

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

@@ -66,11 +66,6 @@ export default {
       },
     },
   },
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
 } satisfies Meta<InfoPromptProps>;
 
 /**

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

@@ -40,7 +40,6 @@ const wait = async (duration = 500) =>
 export const DismissInteraction: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    const dismissButton = canvas.getByRole('button', { name: /close/i });
 
     await step('Verify prompt is visible', async () => {
       await waitFor(async () =>
@@ -49,6 +48,7 @@ export const DismissInteraction: Story = {
     });
 
     await step('Click the dismiss button', async () => {
+      const dismissButton = canvas.getByRole('button', { name: /close/i, hidden: true });
       await userEvent.click(dismissButton);
     });
 
@@ -120,7 +120,6 @@ export const DismissViaKeyboard: Story = {
 export const ActionClickInteraction: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    const actionLink = canvas.getByRole('link', { name: 'Learn more' });
 
     await step('Verify prompt with action is visible', async () => {
       await waitFor(async () =>
@@ -129,6 +128,7 @@ export const ActionClickInteraction: Story = {
     });
 
     await step('Click the action link', async () => {
+      const actionLink = await waitFor(() => canvas.getByRole('link', { name: 'Learn more' }));
       await userEvent.click(actionLink);
     });
 
@@ -165,7 +165,6 @@ export const ActionClickInteraction: Story = {
 export const MultipleDismissInteraction: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    const dismissButtons = canvas.getAllByRole('button', { name: /close/i });
 
     await step('Verify all prompts are visible', async () => {
       await waitFor(async () => {
@@ -177,6 +176,7 @@ export const MultipleDismissInteraction: Story = {
 
     await step('Dismiss the warning prompt', async () => {
       // Click the second dismiss button (warning)
+      const dismissButtons = canvas.getAllByRole('button', { name: /close/i, hidden: true });
       await userEvent.click(dismissButtons[1]);
     });
 
@@ -220,13 +220,13 @@ export const MultipleDismissInteraction: Story = {
 export const TouchInteraction: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    const actionLink = canvas.getByRole('link', { name: 'Navigate' });
 
     await step('Verify prompt with action is visible', async () => {
       await waitFor(async () => expect(canvas.getByText('Tap the prompt.')).toBeInTheDocument());
     });
 
     await step('Click the action (simulating touch)', async () => {
+      const actionLink = await waitFor(() => canvas.getByRole('link', { name: 'Navigate' }));
       await userEvent.click(actionLink);
     });
 
@@ -352,6 +352,143 @@ export const LiveRegionAssertive: Story = {
   },
 };
 
+/**
+ * Test that a polite InfoPrompt added to the DOM gets a delayed live region.
+ */
+export const LiveRegionPoliteWhenAddedToDom: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify prompt is not in the DOM before trigger', async () => {
+      await expect(canvas.queryByText('Polite prompt added later')).not.toBeInTheDocument();
+      await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
+    });
+
+    await step('Add two prompts to the DOM', async () => {
+      const addButton = canvas.getByRole('button', { name: 'Add polite prompt' });
+      await userEvent.click(addButton);
+      await userEvent.click(addButton);
+    });
+
+    await step('Verify delayed polite live regions appear with content', async () => {
+      await expect(canvas.getByText('Polite prompt added later 1')).toBeInTheDocument();
+      await expect(canvas.getByText('Polite prompt added later 2')).toBeInTheDocument();
+      const initialLiveRegions = canvas.queryAllByRole('status');
+      await expect(initialLiveRegions).toHaveLength(2);
+      await expect(initialLiveRegions[0].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+      await expect(initialLiveRegions[1].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+      await waitFor(async () => {
+        const liveRegions = canvas.getAllByRole('status');
+        await expect(liveRegions).toHaveLength(2);
+        await expect(liveRegions[0]).toHaveAttribute('aria-live', 'polite');
+        await expect(liveRegions[1]).toHaveAttribute('aria-live', 'polite');
+        await expect(liveRegions[0]).toHaveAttribute('aria-atomic', 'true');
+        await expect(liveRegions[1]).toHaveAttribute('aria-atomic', 'true');
+        await expect(liveRegions[0].firstElementChild).not.toHaveAttribute('aria-hidden');
+        await expect(liveRegions[1].firstElementChild).not.toHaveAttribute('aria-hidden');
+        await expect(
+          within(liveRegions[0]).getByText('Polite prompt added later 1'),
+        ).toBeInTheDocument();
+        await expect(
+          within(liveRegions[1]).getByText('Polite prompt added later 2'),
+        ).toBeInTheDocument();
+      });
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [promptIndexes, setPromptIndexes] = useState<number[]>([]);
+
+    const addPrompt = () => {
+      setPromptIndexes((previousIndexes) => [...previousIndexes, previousIndexes.length + 1]);
+    };
+
+    return (
+      <>
+        <button type="button" onClick={addPrompt}>
+          Add polite prompt
+        </button>
+        {promptIndexes.map((promptIndex) => (
+          <InfoPrompt
+            key={`polite-${promptIndex}`}
+            {...args}
+            description={`Polite prompt added later ${promptIndex}`}
+          />
+        ))}
+      </>
+    );
+  },
+};
+
+/**
+ * Test that an assertive InfoPrompt added to the DOM gets a delayed live region.
+ */
+export const LiveRegionAssertiveWhenAddedToDom: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify prompt is not in the DOM before trigger', async () => {
+      await expect(canvas.queryByText('Assertive prompt added later')).not.toBeInTheDocument();
+      await expect(canvas.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    await step('Add two prompts to the DOM', async () => {
+      const addButton = canvas.getByRole('button', { name: 'Add assertive prompt' });
+      await userEvent.click(addButton);
+      await userEvent.click(addButton);
+    });
+
+    await step('Verify delayed assertive live regions appear with content', async () => {
+      await expect(canvas.getByText('Assertive prompt added later 1')).toBeInTheDocument();
+      await expect(canvas.getByText('Assertive prompt added later 2')).toBeInTheDocument();
+      const initialLiveRegions = canvas.queryAllByRole('alert');
+      await expect(initialLiveRegions).toHaveLength(2);
+      await expect(initialLiveRegions[0].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+      await expect(initialLiveRegions[1].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+      await waitFor(async () => {
+        const liveRegions = canvas.getAllByRole('alert');
+        await expect(liveRegions).toHaveLength(2);
+        await expect(liveRegions[0]).toHaveAttribute('aria-live', 'assertive');
+        await expect(liveRegions[1]).toHaveAttribute('aria-live', 'assertive');
+        await expect(liveRegions[0]).toHaveAttribute('aria-atomic', 'true');
+        await expect(liveRegions[1]).toHaveAttribute('aria-atomic', 'true');
+        await expect(liveRegions[0].firstElementChild).not.toHaveAttribute('aria-hidden');
+        await expect(liveRegions[1].firstElementChild).not.toHaveAttribute('aria-hidden');
+        await expect(
+          within(liveRegions[0]).getByText('Assertive prompt added later 1'),
+        ).toBeInTheDocument();
+        await expect(
+          within(liveRegions[1]).getByText('Assertive prompt added later 2'),
+        ).toBeInTheDocument();
+      });
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [promptIndexes, setPromptIndexes] = useState<number[]>([]);
+
+    const addPrompt = () => {
+      setPromptIndexes((previousIndexes) => [...previousIndexes, previousIndexes.length + 1]);
+    };
+
+    return (
+      <>
+        <button type="button" onClick={addPrompt}>
+          Add assertive prompt
+        </button>
+        {promptIndexes.map((promptIndex) => (
+          <InfoPrompt
+            key={`assertive-${promptIndex}`}
+            {...args}
+            description={`Assertive prompt added later ${promptIndex}`}
+            aria-live="assertive"
+          />
+        ))}
+      </>
+    );
+  },
+};
+
 /**
  * Test that aria-live="off" renders without a live region wrapper.
  */
@@ -390,7 +527,7 @@ export const LiveRegionDismiss: Story = {
     });
 
     await step('Dismiss the prompt', async () => {
-      const dismissButton = canvas.getByRole('button', { name: /close/i });
+      const dismissButton = canvas.getByRole('button', { name: /close/i, hidden: true });
       await userEvent.click(dismissButton);
     });
 

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

@@ -1,4 +1,5 @@
-import { fireEvent, mockMatchMedia, render, screen, userEvent } from '../../test-utils';
+import { fireEvent, mockMatchMedia, render, screen, userEvent, waitFor } from '../../test-utils';
+import { resetLiveRegionAnnouncementQueue } from '../../common/liveRegion/LiveRegion';
 import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
 
 mockMatchMedia();
@@ -10,6 +11,10 @@ describe('InfoPrompt', () => {
     description: 'Prompt description',
   };
 
+  beforeEach(() => {
+    resetLiveRegionAnnouncementQueue();
+  });
+
   it('renders description', () => {
     render(<InfoPrompt {...defaultProps} />);
     expect(screen.getByText('Prompt description')).toBeInTheDocument();
@@ -59,23 +64,23 @@ describe('InfoPrompt', () => {
   });
 
   describe('action', () => {
-    it('should render action link when action is provided with href', () => {
+    it('should render action link when action is provided with href', async () => {
       render(
         <InfoPrompt {...defaultProps} action={{ label: 'Learn more', href: '/learn-more' }} />,
       );
-      const actionLink = screen.getByRole('link', { name: 'Learn more' });
+      const actionLink = await screen.findByRole('link', { name: 'Learn more' });
       expect(actionLink).toBeInTheDocument();
       expect(actionLink).toHaveAttribute('href', '/learn-more');
     });
 
-    it('should render action link with target when provided', () => {
+    it('should render action link with target when provided', async () => {
       render(
         <InfoPrompt
           {...defaultProps}
           action={{ label: 'External link', href: 'https://example.com', target: '_blank' }}
         />,
       );
-      const actionLink = screen.getByRole('link', { name: /External link/i });
+      const actionLink = await screen.findByRole('link', { name: /External link/i });
       expect(actionLink).toHaveAttribute('target', '_blank');
     });
 
@@ -83,7 +88,7 @@ describe('InfoPrompt', () => {
       const user = userEvent.setup();
       const onClick = jest.fn();
       render(<InfoPrompt {...defaultProps} action={{ label: 'Click me', onClick }} />);
-      const actionButton = screen.getByRole('button', { name: 'Click me' });
+      const actionButton = await screen.findByRole('button', { name: 'Click me' });
       await user.click(actionButton);
       expect(onClick).toHaveBeenCalledTimes(1);
     });

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -86,6 +86,7 @@ export const InfoPrompt = ({
   ...restProps
 }: InfoPromptProps) => {
   const [shouldFire, setShouldFire] = useState<boolean>();
+  const announceOnChange = [title, description, action?.label].filter(Boolean).join('|');
   const statusIconSentiment =
     sentiment === 'success'
       ? Sentiment.POSITIVE
@@ -124,7 +125,7 @@ export const InfoPrompt = ({
 
   // Render content directly in LiveRegion
   return (
-    <LiveRegion aria-live={ariaLive}>
+    <LiveRegion aria-live={ariaLive} announceOnChange={announceOnChange}>
       <PrimitivePrompt
         sentiment={sentiment}
         media={renderMedia()}

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -53,11 +53,6 @@ export default {
       },
     },
   },
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
 } satisfies Meta<InlinePromptProps>;
 
 /**

package/src/provider/theme/ThemeProvider.story.tsx

@@ -24,6 +24,14 @@ export default {
   component: ThemeProvider,
   title: 'Foundations/ThemeProvider',
   tags: ['!manifest'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Components require `ThemeProvider` from `@wise/components-theming` to be wrapped around your application for theming support. Available themes include: `personal`, `business`, `platform`, and variants with different color schemes.',
+      },
+    },
+  },
 } satisfies Meta<typeof ThemeProvider>;
 
 type Story = StoryObj<typeof ThemeProvider>;

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -102,11 +102,6 @@ const meta: Meta<typeof SentimentSurface> = {
     'data-testid': undefined,
     children: 'This is a sentiment surface',
   },
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
 };
 
 export default meta;

package/src/sticky/Sticky.story.tsx

@@ -6,7 +6,6 @@ import { allModes } from '../../.storybook/modes';
 const meta: Meta<typeof Sticky> = {
   component: Sticky,
   title: 'Dialogs/Sticky',
-
   args: {
     open: true,
     position: 'bottom', // Default position

package/src/styles/less/core/_typography.less

@@ -25,7 +25,7 @@ h6,
   line-height: var(--line-height-title);
   letter-spacing: 0;
   .np-text-hyphenated;
-  
+
   + p,
   + ul:not(.list-unstyled),
   + ol:not(.list-unstyled) {
@@ -204,8 +204,21 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
+
+  :lang(ja) &,
+  :lang(th) &,
+  :lang(zh-CN) &,
+  :lang(zh-HK) & {
+    /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+    font-family: var(--font-family-regular);
+  }
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */

package/src/styles/less/neptune.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
 }
 
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/src/tokens/tokens.story.tsx

@@ -7,7 +7,7 @@ import IconButton from '../iconButton';
 import Body from '../body';
 
 const meta: Meta = {
-  title: 'Foundations/tokens',
+  title: 'Foundations/Tokens',
   tags: ['!autodocs', '!manifest'],
 };