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

package/src/button/_stories/Button.test.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
+import { Flag } from '@wise/art';
 import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
@@ -135,3 +136,32 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+export const Disabled: Story = {
+  args: {
+    v2: true,
+    disabled: true,
+    children: 'Disabled button',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    v2: true,
+    loading: true,
+    children: 'Loading button',
+  },
+};
+
+export const AccessibilityAddons: Story = {
+  args: {
+    v2: true,
+    addonStart: {
+      type: 'avatar',
+      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
+    },
+    'aria-label': 'Convert Real to Yen',
+    children: 'Convert',
+    size: 'md',
+  },
+};

package/src/checkbox/Checkbox.story.tsx

@@ -2,10 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
 import { Field } from '../field/Field';
-import { lorem10 } from '../test-utils';
 
 import Checkbox from './Checkbox';
 import { withVariantConfig } from '../../.storybook/helpers';
+import { lorem10 } from '../test-utils';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -36,11 +36,6 @@ export const Multiple: Story = {
   ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
-export const MultipleMobile: Story = {
-  ...Multiple,
-  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile'], Multiple),
-};
-
 export const WithinField = {
   decorators: [
     (Story) => (

package/src/checkbox/Checkbox.test.story.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { lorem10 } from '../test-utils';
+import Checkbox from './Checkbox';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Forms/Checkbox/Tests',
+  args: {
+    label: 'This is the label',
+    onChange: fn(),
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const MultipleMobile: Story = {
+  render: (args) => {
+    return (
+      <>
+        <Checkbox {...args} />
+        <Checkbox {...args} checked />
+        <Checkbox {...args} label={lorem10} />
+        <Checkbox {...args} label={lorem10} secondary={lorem10} />
+        <Checkbox {...args} disabled />
+      </>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
+};

package/src/circularButton/CircularButton.story.tsx

@@ -6,7 +6,6 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 import Title from '../title';
 import Body from '../body';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CircularButton,
@@ -86,8 +85,3 @@ export const All: Story = {
     );
   },
 };
-
-export const All400Zoom: Story = {
-  ...All,
-  ...withVariantConfig(['400%'], All),
-};

package/src/circularButton/CircularButton.test.story.tsx

@@ -2,11 +2,14 @@ import { Freeze } from '@transferwise/icons';
 
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
+import Title from '../title';
+import Body from '../body';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton/Tests',
-  tags: ['!manifest'],
+  tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof CircularButton>;
 
 type Story = StoryObj<typeof CircularButton>;
@@ -22,3 +25,61 @@ export const CenteredText: Story = {
     );
   },
 };
+
+const All: Story = {
+  args: {
+    children: 'Button text',
+    icon: <Freeze />,
+    className: 'm-r-2',
+  },
+  render: (props) => {
+    return (
+      <>
+        <Title type="title-subsection" className="m-y-2">
+          Default (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="default" />
+          <CircularButton {...props} priority="secondary" type="default" />
+          <CircularButton {...props} priority="primary" type="default" disabled />
+          <CircularButton {...props} priority="secondary" type="default" disabled />
+        </Body>
+
+        <Title type="title-subsection" className="m-y-2">
+          Negative (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="negative" />
+          <CircularButton {...props} priority="secondary" type="negative" />
+          <CircularButton {...props} priority="primary" type="negative" disabled />
+          <CircularButton {...props} priority="secondary" type="negative" disabled />
+        </Body>
+
+        <Title type="title-body" className="m-y-2">
+          Accent (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="accent" />
+          <CircularButton {...props} priority="secondary" type="accent" />
+          <CircularButton {...props} priority="primary" type="accent" disabled />
+          <CircularButton {...props} priority="secondary" type="accent" disabled />
+        </Body>
+
+        <Title type="title-body" className="m-y-2">
+          Positive (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="positive" />
+          <CircularButton {...props} priority="secondary" type="positive" />
+          <CircularButton {...props} priority="primary" type="positive" disabled />
+          <CircularButton {...props} priority="secondary" type="positive" disabled />
+        </Body>
+      </>
+    );
+  },
+};
+
+export const All400Zoom: Story = {
+  ...All,
+  ...withVariantConfig(['400%'], All),
+};

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -11,7 +11,6 @@ import Title from '../../title/Title';
 import { Typography } from '../propsValues/typography';
 
 import BottomSheet from './BottomSheet';
-import { withVariantConfig } from '../../../.storybook/helpers';
 
 export default {
   component: BottomSheet,
@@ -64,57 +63,3 @@ export const Basic: Story = {
     },
   },
 };
-
-export const BasicMobile: Story = {
-  ...Basic,
-  ...withVariantConfig(['mobile'], Basic),
-};
-
-export const WithOverflowContent: Story = {
-  args: {
-    children: (
-      <>
-        <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
-        {lorem10}
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-        />
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-          isContainerAligned
-        />
-        {lorem500}
-        <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>
-      </>
-    ),
-  },
-  parameters: {
-    chromatic: {
-      delay: 1000,
-    },
-  },
-};
-
-export const WithOverflowContentMobile: Story = {
-  ...WithOverflowContent,
-  ...withVariantConfig(['mobile'], WithOverflowContent),
-};
-
-export const WithOverflowContentDark: Story = {
-  ...WithOverflowContent,
-  ...withVariantConfig(['dark'], WithOverflowContent),
-};
-
-export const WithOverflowContentDarkMobile: Story = {
-  ...WithOverflowContent,
-  ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
-};
-
-export const WithOverflowContentZoom400: Story = {
-  ...WithOverflowContent,
-  ...withVariantConfig(['400%'], WithOverflowContent),
-};

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -1,13 +1,17 @@
+import { action } from 'storybook/actions';
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fireEvent, within } from 'storybook/test';
-import { lorem100, lorem500 } from '../../test-utils';
+import { FastFlag } from '@transferwise/icons';
+import { lorem10, lorem100, lorem500 } from '../../test-utils';
 import { Typography } from '../propsValues/typography';
 import Alert from '../../alert';
 import Body from '../../body';
 import Button from '../../button';
+import NavigationOption from '../../navigationOption';
 import Title from '../../title';
 import BottomSheet from './BottomSheet';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 const wait = async (duration = 500) =>
   new Promise<void>((resolve) => {
@@ -16,7 +20,7 @@ const wait = async (duration = 500) =>
 
 export default {
   component: BottomSheet,
-  title: 'Dialogs/BottomSheet/tests',
+  title: 'Dialogs/BottomSheet/Tests',
   tags: ['!autodocs'],
   args: {
     open: false,
@@ -96,3 +100,115 @@ export const SmoothScrollReset: Story = {
     );
   },
 };
+
+const Basic: Story = {
+  args: {
+    children: (
+      <>
+        <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
+        {lorem10}
+        <br />
+        <br />
+        <NavigationOption
+          title="Navigation option"
+          content="Button and icon are vertically centered."
+          media={<FastFlag size={24} />}
+          isContainerAligned
+        />
+      </>
+    ),
+  },
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: (args, { viewMode }) => {
+    const [open, setOpen] = useState(viewMode !== 'docs');
+
+    return (
+      <div>
+        <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
+        <BottomSheet
+          {...args}
+          open={open}
+          onClose={() => {
+            setOpen(false);
+            action('BottomSheet closed')();
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const BasicMobile: Story = {
+  ...Basic,
+  ...withVariantConfig(['mobile'], Basic),
+};
+
+const WithOverflowContent: Story = {
+  args: {
+    children: (
+      <>
+        <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
+        {lorem10}
+        <NavigationOption
+          title="Navigation option"
+          content="Button and icon are vertically centered."
+          media={<FastFlag size={24} />}
+        />
+        <NavigationOption
+          title="Navigation option"
+          content="Button and icon are vertically centered."
+          media={<FastFlag size={24} />}
+          isContainerAligned
+        />
+        {lorem500}
+        <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>
+      </>
+    ),
+  },
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: (args, { viewMode }) => {
+    const [open, setOpen] = useState(viewMode !== 'docs');
+
+    return (
+      <div>
+        <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
+        <BottomSheet
+          {...args}
+          open={open}
+          onClose={() => {
+            setOpen(false);
+            action('BottomSheet closed')();
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithOverflowContentMobile: Story = {
+  ...WithOverflowContent,
+  ...withVariantConfig(['mobile'], WithOverflowContent),
+};
+
+export const WithOverflowContentDark: Story = {
+  ...WithOverflowContent,
+  ...withVariantConfig(['dark'], WithOverflowContent),
+};
+
+export const WithOverflowContentDarkMobile: Story = {
+  ...WithOverflowContent,
+  ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
+};
+
+export const WithOverflowContentZoom400: Story = {
+  ...WithOverflowContent,
+  ...withVariantConfig(['400%'], WithOverflowContent),
+};

package/src/common/liveRegion/LiveRegion.test.tsx

@@ -1,23 +1,43 @@
-import { render, screen } from '@testing-library/react';
-import { LiveRegion, LiveRegionProps } from './LiveRegion';
+import { act, render, screen } from '@testing-library/react';
+import { WDS_LIVE_REGION_DELAY_MS } from '../constants';
+import { LiveRegion, LiveRegionProps, resetLiveRegionAnnouncementQueue } from './LiveRegion';
 
 describe('LiveRegion', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    resetLiveRegionAnnouncementQueue();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   const renderLiveRegion = (props: Partial<LiveRegionProps> & Pick<LiveRegionProps, 'aria-live'>) =>
     render(<LiveRegion {...props}>{props.children ?? 'Live content'}</LiveRegion>);
 
+  const enableLiveRegion = (delay = WDS_LIVE_REGION_DELAY_MS) => {
+    act(() => {
+      jest.advanceTimersByTime(delay);
+    });
+  };
+
   describe('when aria-live is "polite"', () => {
     it('renders with role="status"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
+      enableLiveRegion();
       expect(screen.getByRole('status')).toBeInTheDocument();
     });
 
     it('sets aria-live="polite"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
+      enableLiveRegion();
       expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite');
     });
 
     it('sets aria-atomic="true"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
+      enableLiveRegion();
       expect(screen.getByRole('status')).toHaveAttribute('aria-atomic', 'true');
     });
   });
@@ -25,32 +45,79 @@ describe('LiveRegion', () => {
   describe('when aria-live is "assertive"', () => {
     it('renders with role="alert"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
+      enableLiveRegion();
       expect(screen.getByRole('alert')).toBeInTheDocument();
     });
 
     it('sets aria-live="assertive"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
+      enableLiveRegion();
       expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
     });
 
     it('sets aria-atomic="true"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
+      enableLiveRegion();
       expect(screen.getByRole('alert')).toHaveAttribute('aria-atomic', 'true');
     });
   });
 
+  it('delays live-region activation before the configured timeout', () => {
+    renderLiveRegion({ 'aria-live': 'polite', children: 'Delayed content' });
+
+    const liveRegion = screen.getByRole('status');
+    expect(liveRegion).toBeInTheDocument();
+    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+    enableLiveRegion(WDS_LIVE_REGION_DELAY_MS - 1);
+    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+    enableLiveRegion(1);
+    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(liveRegion).toHaveTextContent('Delayed content');
+  });
+
+  it('queues multiple assertive regions so each one gets announced', () => {
+    render(
+      <>
+        <LiveRegion aria-live="assertive">First prompt</LiveRegion>
+        <LiveRegion aria-live="assertive">Second prompt</LiveRegion>
+      </>,
+    );
+
+    const liveRegions = screen.getAllByRole('alert');
+    expect(liveRegions).toHaveLength(2);
+    expect(liveRegions[0].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+    expect(liveRegions[1].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+    enableLiveRegion();
+    const firstEnabledLiveRegions = screen.getAllByRole('alert');
+    expect(firstEnabledLiveRegions[0].firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(firstEnabledLiveRegions[1].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+    expect(firstEnabledLiveRegions[0]).toHaveTextContent('First prompt');
+
+    enableLiveRegion();
+    const secondEnabledLiveRegions = screen.getAllByRole('alert');
+    expect(secondEnabledLiveRegions[1].firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(secondEnabledLiveRegions[0]).toHaveTextContent('First prompt');
+    expect(secondEnabledLiveRegions[1]).toHaveTextContent('Second prompt');
+  });
+
   it('renders children', () => {
     renderLiveRegion({ 'aria-live': 'polite', children: 'Transfer sent' });
+    enableLiveRegion();
     expect(screen.getByText('Transfer sent')).toBeInTheDocument();
   });
 
   it('passes additional HTML attributes to the wrapper div', () => {
     renderLiveRegion({ 'aria-live': 'polite', className: 'custom' });
+    enableLiveRegion();
     expect(screen.getByRole('status')).toHaveClass('custom');
   });
 
   it('supports data-testid prop', () => {
     renderLiveRegion({ 'aria-live': 'polite', 'data-testid': 'live-region' });
+    enableLiveRegion();
     expect(screen.getByTestId('live-region')).toBeInTheDocument();
   });
 });

package/src/common/liveRegion/LiveRegion.tsx

@@ -1,11 +1,52 @@
+import { useEffect, useState } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
 
-const ARIA_LIVE_ROLE_MAP = {
+import { WDS_LIVE_REGION_DELAY_MS } from '../constants';
+
+export type AriaLive = 'off' | 'polite' | 'assertive';
+
+type LivePoliteness = Exclude<AriaLive, 'off'>;
+
+const LIVE_REGION_ROLE_BY_POLITENESS: Record<LivePoliteness, 'status' | 'alert'> = {
   assertive: 'alert',
   polite: 'status',
-} as const;
+};
 
-export type AriaLive = 'off' | 'polite' | 'assertive';
+let nextPoliteAnnouncementAt = 0;
+let nextAssertiveAnnouncementAt = 0;
+
+const getNextAnnouncementAt = (politeness: LivePoliteness): number => {
+  if (politeness === 'polite') {
+    return nextPoliteAnnouncementAt;
+  }
+
+  return nextAssertiveAnnouncementAt;
+};
+
+const setNextAnnouncementAt = (politeness: LivePoliteness, value: number): void => {
+  if (politeness === 'polite') {
+    nextPoliteAnnouncementAt = value;
+    return;
+  }
+
+  nextAssertiveAnnouncementAt = value;
+};
+
+export const resetLiveRegionAnnouncementQueue = (): void => {
+  nextPoliteAnnouncementAt = 0;
+  nextAssertiveAnnouncementAt = 0;
+};
+
+const calcAnnouncementDelayMs = (politeness: LivePoliteness, now: number): number => {
+  return Math.max(now + WDS_LIVE_REGION_DELAY_MS, getNextAnnouncementAt(politeness)) - now;
+};
+
+const scheduleAnnouncement = (politeness: LivePoliteness): number => {
+  const now = Date.now();
+  const delayMs = calcAnnouncementDelayMs(politeness, now);
+  setNextAnnouncementAt(politeness, now + delayMs + WDS_LIVE_REGION_DELAY_MS);
+  return delayMs;
+};
 
 export interface LiveRegionProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -15,6 +56,8 @@ export interface LiveRegionProps extends Omit<
    * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
    */
   'aria-live': AriaLive;
+  /** Optional stable key that triggers a new announcement when it changes. */
+  announceOnChange?: string | number;
   /** Test ID for testing tools */
   'data-testid'?: string;
   children?: ReactNode;
@@ -25,25 +68,49 @@ export interface LiveRegionProps extends Omit<
  *
  * - `aria-live="polite"` → `role="status"`
  * - `aria-live="assertive"` → `role="alert"`
- * - `aria-live="off"` → no live region
+ * - `aria-live="off"` → no live region (renders children unwrapped)
  *
  * The `role` prop is intentionally excluded from the public API
  * to prevent mismatches between `aria-live` and `role`.
  */
-export const LiveRegion = ({ 'aria-live': ariaLive, children, ...props }: LiveRegionProps) => {
+export const LiveRegion = ({
+  'aria-live': ariaLive,
+  announceOnChange,
+  children,
+  ...props
+}: LiveRegionProps) => {
+  const [shouldAnnounce, setShouldAnnounce] = useState(false);
+  const announcementTrigger =
+    announceOnChange ??
+    (typeof children === 'string' || typeof children === 'number' ? children : undefined);
+
+  useEffect(() => {
+    setShouldAnnounce(false);
+
+    if (ariaLive === 'off') {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(
+      () => setShouldAnnounce(true),
+      scheduleAnnouncement(ariaLive),
+    );
+
+    return () => window.clearTimeout(timeoutId);
+  }, [ariaLive, announcementTrigger]);
+
   if (ariaLive === 'off') {
     return <>{children}</>;
   }
 
   return (
     <div
-      role={ARIA_LIVE_ROLE_MAP[ariaLive]}
+      role={LIVE_REGION_ROLE_BY_POLITENESS[ariaLive]}
       aria-live={ariaLive}
       aria-atomic="true"
-      style={{ display: 'contents' }}
       {...props}
     >
-      {children}
+      <div aria-hidden={shouldAnnounce ? undefined : 'true'}>{children}</div>
     </div>
   );
 };

package/src/criticalBanner/CriticalCommsBanner.test.story.tsx

@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CriticalCommsBanner,
-  title: 'Prompts/CriticalCommsBanner/tests',
+  title: 'Prompts/CriticalCommsBanner/Tests',
   tags: ['!autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 

package/src/dateLookup/DateLookup.story.tsx

@@ -1,10 +1,8 @@
 import { useState } from 'react';
-import { userEvent } from 'storybook/test';
 import { StoryObj } from '@storybook/react-webpack5';
 import { Field } from '..';
 import { Size } from '../common';
 import DateLookup, { type DateLookupProps } from './DateLookup';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: DateLookup,
@@ -54,22 +52,6 @@ export const Basic: Story = {
     min: thePast,
     max: theFuture,
   },
-  play: async () => {
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-  },
-};
-export const Basic400Zoom: Story = {
-  ...Basic,
-
-  ...withVariantConfig(['400%'], {
-    ...Basic,
-    parameters: {
-      chromatic: {
-        delay: 2000,
-      },
-    },
-  }),
 };
 
 export const WithField: Story = {