@transferwise/components 0.0.0-experimental-09066ec → 0.0.0-experimental-148ffef

package/src/modal/Modal.test.story.tsx

@@ -0,0 +1,125 @@
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { ScreenMode, ThemeProvider } from '@wise/components-theming';
+import { useState } from 'react';
+import { Button, Modal, ModalProps } from '..';
+import { CommonProps, Scroll } from '../common';
+import { lorem10, lorem100, lorem1000 } from '../test-utils';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Dialogs/Modal/Tests',
+  args: {
+    size: 'md',
+    position: 'center',
+    open: false,
+  },
+  parameters: {
+    chromatic: {
+      delay: 2000,
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export interface StoryContentProps {
+  args: CommonProps & ModalProps;
+  screenMode?: ScreenMode;
+  viewMode?: string;
+}
+
+const StoryContent = ({ args, screenMode, viewMode }: StoryContentProps) => {
+  const [open, setOpen] = useState(viewMode !== 'docs');
+
+  return (
+    <>
+      <Button v2 onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
+      <Modal
+        {...args}
+        body={
+          !screenMode ? (
+            args.body
+          ) : (
+            <ThemeProvider theme="personal" screenMode={screenMode}>
+              {lorem100}
+            </ThemeProvider>
+          )
+        }
+        open={open}
+        disableDimmerClickToClose={args.disableDimmerClickToClose}
+        onClose={() => {
+          setOpen(false);
+          action('Modal closed')();
+        }}
+      />
+    </>
+  );
+};
+
+export const BasicMobile: Story = {
+  args: {
+    title: 'Title',
+    body: lorem10,
+    scroll: Scroll.VIEWPORT,
+    footer: (
+      <Button v2 block>
+        Action
+      </Button>
+    ),
+  },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
+  ...withVariantConfig(['mobile']),
+};
+
+export const ContentScrollMobile: Story = {
+  args: {
+    title: lorem10,
+    body: lorem1000,
+    scroll: Scroll.CONTENT,
+  },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
+  ...withVariantConfig(['mobile']),
+};
+
+export const ViewportScrollMobile: Story = {
+  args: {
+    title: lorem10,
+    body: lorem1000,
+    scroll: Scroll.VIEWPORT,
+  },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
+  ...withVariantConfig(['mobile']),
+};
+
+export const WithoutTitleMobile: Story = {
+  args: {
+    body: lorem1000,
+    scroll: Scroll.CONTENT,
+  },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
+  ...withVariantConfig(['mobile']),
+};
+
+export const WithThemeProviderInContentMobile: Story = {
+  args: {
+    title: lorem10,
+    body: lorem100,
+    scroll: Scroll.VIEWPORT,
+    footer: (
+      <Button v2 block>
+        Action
+      </Button>
+    ),
+  },
+  render: (args, { globals: { screenMode }, viewMode }) => (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    <StoryContent args={args} screenMode={screenMode} viewMode={viewMode} />
+  ),
+  ...withVariantConfig(['mobile']),
+};

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -7,7 +7,7 @@ import Body from '../body';
 import MoneyInput from './MoneyInput';
 
 const meta = {
-  title: 'Forms/MoneyInput/tests',
+  title: 'Forms/MoneyInput/Tests',
   component: MoneyInput,
   args: {
     amount: 1000,

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

@@ -335,49 +335,6 @@ export const Dismissible: Story = {
   },
 };
 
-/**
- * ActionPrompt adapts its layout based on available width. At narrow widths (mobile),
- * the buttons stack vertically. At wider widths (desktop), they appear side by side.
- */
-export const Responsiveness: Story = {
-  render: (args) => (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: '320px 480px',
-        gap: '1rem',
-        alignItems: 'start',
-      }}
-    >
-      <ActionPrompt
-        sentiment="proposition"
-        title="Stacked (320px)"
-        description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
-        action={{ label: 'Primary action', onClick: fn() }}
-        actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        onDismiss={fn()}
-      />
-      <ActionPrompt
-        sentiment="proposition"
-        title="Side-by-side (480px)"
-        description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
-        action={{ label: 'Primary action', onClick: fn() }}
-        actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        onDismiss={fn()}
-      />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-};
-
 /**
  * While the component itself will stretch to the full available width, the text container will be
  * capped at `480px` to ensure optimal readability.

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Freeze, People } from '@transferwise/icons';
+import { Freeze, People, Travel } from '@transferwise/icons';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
 import ActionPrompt from './ActionPrompt';
@@ -7,6 +7,7 @@ import { Body, Title } from '../..';
 import { StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../../.storybook/modes';
 import { withVariantConfig } from '../../../.storybook/helpers';
+import { lorem10 } from '../../test-utils';
 
 const withComponentGrid =
   ({ gap = '1rem' } = {}) =>
@@ -228,3 +229,46 @@ export const TinyScreen: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+/**
+ * ActionPrompt adapts its layout based on available width. At narrow widths (mobile),
+ * the buttons stack vertically. At wider widths (desktop), they appear side by side.
+ */
+export const Responsiveness: Story = {
+  render: (args) => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '320px 480px',
+        gap: '1rem',
+        alignItems: 'start',
+      }}
+    >
+      <ActionPrompt
+        sentiment="proposition"
+        title="Stacked (320px)"
+        description={lorem10}
+        media={{ avatar: { asset: <Travel /> } }}
+        action={{ label: 'Primary action', onClick: fn() }}
+        actionSecondary={{ label: 'Secondary', onClick: fn() }}
+        onDismiss={fn()}
+      />
+      <ActionPrompt
+        sentiment="proposition"
+        title="Side-by-side (480px)"
+        description={lorem10}
+        media={{ avatar: { asset: <Travel /> } }}
+        action={{ label: 'Primary action', onClick: fn() }}
+        actionSecondary={{ label: 'Secondary', onClick: fn() }}
+        onDismiss={fn()}
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+};

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/radioGroup/RadioGroup.test.story.tsx

@@ -5,7 +5,7 @@ import { fn } from 'storybook/test';
 
 const meta = {
   component: RadioGroup,
-  title: 'Forms/RadioGroup/tests',
+  title: 'Forms/RadioGroup/Tests',
   tags: ['!autodocs', '!manifest'],
   args: {
     selectedValue: 'radio-2',

package/src/stepper/Stepper.test.story.tsx

@@ -26,7 +26,7 @@ const STEPS = [
 
 const meta = {
   component: Stepper,
-  title: 'Navigation/Stepper/tests',
+  title: 'Navigation/Stepper/Tests',
   tags: ['!manifest'],
   argTypes: {
     activeStep: {

package/src/summary/Summary.test.story.tsx

@@ -4,7 +4,7 @@ import Summary, { type SummaryProps } from '.';
 
 export default {
   component: Summary,
-  title: 'Content/Summary/tests',
+  title: 'Content/Summary/Tests',
   tags: ['deprecated', '!manifest'],
 };
 

package/src/tooltip/Tooltip.story.tsx

@@ -1,10 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
-
 import Button from '../button';
-
 import Tooltip from './Tooltip';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Tooltip,
@@ -25,20 +21,3 @@ export default {
 type Story = StoryObj<typeof Tooltip>;
 
 export const Basic: Story = {};
-
-export const OpenedTooltip: Story = {
-  parameters: {
-    chromatic: {
-      delay: 1000,
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.hover(canvas.getByRole('button'));
-  },
-};
-
-export const OpenedTooltipDark: Story = {
-  ...OpenedTooltip,
-  ...withVariantConfig(['dark'], OpenedTooltip),
-};

package/src/tooltip/Tooltip.test.story.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import Button from '../button';
+import Tooltip from './Tooltip';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Dialogs/Tooltip/Tests',
+  args: {
+    label: 'This is the content',
+    position: 'bottom',
+  },
+  render: (args) => (
+    <div className="text-xs-center" style={{ flexBasis: '150px' }}>
+      <Tooltip {...args}>
+        <Button>Hover me</Button>
+      </Tooltip>
+    </div>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const OpenedTooltip: Story = {
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.hover(canvas.getByRole('button'));
+  },
+};
+
+export const OpenedTooltipDark: Story = {
+  ...OpenedTooltip,
+  ...withVariantConfig(['dark'], OpenedTooltip),
+};