@transferwise/components 0.0.0-experimental-a9c89de → 0.0.0-experimental-b6ae643

package/src/main.css

@@ -2334,6 +2334,18 @@
   src: url("styles/fonts/WiseSans-Heavy.woff2") format("woff2");
 }
 
+/**
+ * 🚨🚨🚨 ONLY FOR TESTING. BE REMOVED BEFORE MERGING 🚨🚨🚨
+ */
+
+@font-face {
+  font-family: 'Wise Sans';
+  font-style: normal;
+  font-display: swap;
+  src: url("styles/fonts/WiseSansJP-Heavy.woff2") format('woff2');
+  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FAF, U+2605, U+2606, U+2190-2195, U+203B;
+}
+
 /* stylelint-disable selector-max-empty-lines */
 
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -3492,10 +3504,66 @@ 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(id) .display-1,
+:lang(id) .display-2,
+:lang(id) .display-3,
+:lang(id) .display-4,
+:lang(id) .display-5,
+:lang(id) .np-text-display-extra-large,
+:lang(id) .np-text-display-large,
+:lang(id) .np-text-display-medium,
+:lang(id) .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,10 +28164,6 @@ 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,7 +22,6 @@
 @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/prompt/InfoPrompt/InfoPrompt.test.story.tsx

@@ -40,6 +40,7 @@ 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 () =>
@@ -48,7 +49,6 @@ 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,6 +120,7 @@ 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 () =>
@@ -128,7 +129,6 @@ 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,6 +165,7 @@ 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 () => {
@@ -176,7 +177,6 @@ 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,143 +352,6 @@ 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.
  */
@@ -527,7 +390,7 @@ export const LiveRegionDismiss: Story = {
     });
 
     await step('Dismiss the prompt', async () => {
-      const dismissButton = canvas.getByRole('button', { name: /close/i, hidden: true });
+      const dismissButton = canvas.getByRole('button', { name: /close/i });
       await userEvent.click(dismissButton);
     });
 

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

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

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -86,7 +86,6 @@ 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
@@ -125,7 +124,7 @@ export const InfoPrompt = ({
 
   // Render content directly in LiveRegion
   return (
-    <LiveRegion aria-live={ariaLive} announceOnChange={announceOnChange}>
+    <LiveRegion aria-live={ariaLive}>
       <PrimitivePrompt
         sentiment={sentiment}
         media={renderMedia()}

package/src/styles/less/core/_fonts.less

@@ -95,3 +95,16 @@
   font-display: swap;
   src: url("./styles/fonts/WiseSans-Heavy.woff2") format("woff2");
 }
+
+/**
+ * 🚨🚨🚨 ONLY FOR TESTING. BE REMOVED BEFORE MERGING 🚨🚨🚨
+ */
+@font-face {
+  font-family: 'Wise Sans';
+  font-style: normal;
+  font-display: swap;
+  src: url('./styles/fonts/WiseSansJP-Heavy.woff2') format('woff2');
+  unicode-range:
+    U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FAF, U+2605,
+    U+2606, U+2190-2195, U+203B;
+}

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,22 @@ 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(id) &,
+  :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

@@ -2334,6 +2334,18 @@
   src: url("styles/fonts/WiseSans-Heavy.woff2") format("woff2");
 }
 
+/**
+ * 🚨🚨🚨 ONLY FOR TESTING. BE REMOVED BEFORE MERGING 🚨🚨🚨
+ */
+
+@font-face {
+  font-family: 'Wise Sans';
+  font-style: normal;
+  font-display: swap;
+  src: url("styles/fonts/WiseSansJP-Heavy.woff2") format('woff2');
+  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FAF, U+2605, U+2606, U+2190-2195, U+203B;
+}
+
 /* stylelint-disable selector-max-empty-lines */
 
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -3492,10 +3504,66 @@ 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(id) .display-1,
+:lang(id) .display-2,
+:lang(id) .display-3,
+:lang(id) .display-4,
+:lang(id) .display-5,
+:lang(id) .np-text-display-extra-large,
+:lang(id) .np-text-display-large,
+:lang(id) .np-text-display-medium,
+:lang(id) .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/build/styles/common/liveRegion/LiveRegion.css

@@ -1,3 +0,0 @@
-.wds-LiveRegion {
-  width: 100%;
-}

package/src/common/liveRegion/LiveRegion.css

@@ -1,3 +0,0 @@
-.wds-LiveRegion {
-  width: 100%;
-}

package/src/common/liveRegion/LiveRegion.less

@@ -1,3 +0,0 @@
-.wds-LiveRegion {
-  width: 100%;
-}