@transferwise/components 0.0.0-experimental-99bbbb3 → 0.0.0-experimental-20085a3

package/src/Calendar/_stories/Calendar.test.story.tsx

@@ -28,17 +28,19 @@ export const YearViewBoundaries: Story = {
     await userEvent.click(canvas.getByRole('button', { name: /year view/iu }));
 
     // Selected year (within range) is enabled
-    await expect(
-      canvas.getByRole('button', { name: /2024.*selected year/iu }),
-    ).not.toHaveAttribute('aria-disabled');
+    await expect(canvas.getByRole('button', { name: /2024.*selected year/iu })).not.toHaveAttribute(
+      'aria-disabled',
+    );
 
     // Adjacent years outside range are disabled
-    await expect(
-      canvas.getByRole('button', { name: /^2023.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
-    await expect(
-      canvas.getByRole('button', { name: /^2025.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
+    await expect(canvas.getByRole('button', { name: /^2023.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    await expect(canvas.getByRole('button', { name: /^2025.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
 
     // Both nav arrows disabled — min and max are both in the 2020–2039 block
     await expect(canvas.getByRole('button', { name: /previous 20 years/iu })).toBeDisabled();
@@ -73,12 +75,14 @@ export const MonthViewBoundaries: Story = {
     ).not.toHaveAttribute('aria-disabled');
 
     // Months outside range are disabled
-    await expect(
-      canvas.getByRole('button', { name: /^Feb.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
-    await expect(
-      canvas.getByRole('button', { name: /^Nov.*not available/iu }),
-    ).toHaveAttribute('aria-disabled', 'true');
+    await expect(canvas.getByRole('button', { name: /^Feb.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    await expect(canvas.getByRole('button', { name: /^Nov.*not available/iu })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
 
     // Both nav arrows disabled — min and max are both in 2024
     await expect(canvas.getByRole('button', { name: /previous year/iu })).toBeDisabled();
@@ -92,23 +96,23 @@ const disabledRules: DisabledRules = {
 };
 
 /**
- * When a disabled cell receives direct DOM focus (e.g. screen reader virtual cursor),
+ * When a disabled cell receives focus via keyboard navigation,
  * the inline prompt updates to negative sentiment showing the disabled reason.
  */
 export const DisabledDateFocusUpdatesPrompt: Story = {
   render: () => <Calendar value={new Date(2024, 6, 5)} disabledRules={disabledRules} />,
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Initially prompt is neutral (focused date is enabled)
+    // Initially prompt is neutral (focused date is enabled — July 5 is a Friday)
     const prompt = canvasElement.querySelector('.wds-inline-prompt')!;
     await expect(prompt).toHaveClass('wds-prompt--neutral');
 
-    // Simulate screen reader focus on a disabled Saturday (matches both "6 July 2024" and "July 6, 2024")
-    const saturday = canvas.getByLabelText(/(?:6 July|July 6).*2024/u);
-    saturday.focus();
+    // Tab into the calendar grid (past month nav buttons), then arrow right to Saturday (disabled)
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.keyboard('{ArrowRight}');
 
-    // Prompt should switch to negative after React re-render
-    await waitFor(() => expect(prompt).toHaveClass('wds-prompt--negative'));
+    // Prompt should switch to negative after navigating to the disabled date
+    await waitFor(async () => expect(prompt).toHaveClass('wds-prompt--negative'));
   },
 };

package/src/Carousel/_stories/Carousel.rtl.test.story.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Display from '../../Display';
+import Carousel, { type CarouselCard } from '..';
+
+export default {
+  component: Carousel,
+  title: 'Navigation/Carousel/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Carousel>;
+
+type Story = StoryObj<typeof Carousel>;
+
+const sampleCards: CarouselCard[] = [
+  {
+    id: 'card-1',
+    type: 'button',
+    content: (
+      <div className="d-flex p-a-1 flex-column align-items-center">
+        <Display type="display-small">Card one</Display>
+      </div>
+    ),
+  },
+  {
+    id: 'card-2',
+    type: 'promo',
+    href: '#',
+    title: 'Promo card',
+    description: 'Description for promo card',
+  },
+  {
+    id: 'card-3',
+    type: 'anchor',
+    href: '#',
+    hrefTarget: '_blank',
+    content: <Display type="display-small">Anchor card</Display>,
+  },
+  {
+    id: 'card-4',
+    type: 'button',
+    content: (
+      <div className="d-flex p-a-1 flex-column align-items-center">
+        <Display type="display-small">Card four</Display>
+      </div>
+    ),
+  },
+  {
+    id: 'card-5',
+    type: 'anchor',
+    href: '#',
+    content: <Display type="display-small">Card five</Display>,
+  },
+];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <Carousel header="Carousel with navigation arrows" cards={sampleCards} />
+  ),
+  ...withRTLDiff(),
+};

package/src/Checkbox/_stories/Checkbox.rtl.test.story.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Checkbox from '..';
+
+export default {
+  component: Checkbox,
+  title: 'Forms/Checkbox/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Checkbox>;
+
+type Story = StoryObj<typeof Checkbox>;
+
+/**
+ * The checkbox indicator sits to the start of the label: in LTR it appears on the left,
+ * in RTL it should appear on the right. The secondary line wraps under the label text,
+ * so both single-line and two-line layouts are verified here.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Checkbox label="Label only" onChange={() => {}} />
+      <Checkbox
+        label="Label with secondary"
+        secondary="Secondary description text"
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/CheckboxButton/_stories/CheckboxButton.rtl.test.story.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import CheckboxButton from '../CheckboxButton';
+
+export default {
+  component: CheckboxButton,
+  title: 'Actions/CheckboxButton/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof CheckboxButton>;
+
+type Story = StoryObj<typeof CheckboxButton>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <CheckboxButton aria-label="Unchecked" checked={false} onChange={() => {}} />
+      <CheckboxButton aria-label="Checked" checked onChange={() => {}} />
+      <CheckboxButton
+        aria-label="Indeterminate"
+        checked={false}
+        indeterminate
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/CheckboxButton/_stories/CheckboxButton.test.story.tsx

@@ -181,43 +181,6 @@ export const KeyboardInteraction: Story = {
   },
 };
 
-/** Base checkbox states in right-to-left layout. */
-export const RTL: Story = {
-  render: function Render() {
-    const [unchecked, setUnchecked] = useState(false);
-    const [checked, setChecked] = useState(true);
-    const [indeterminate, setIndeterminate] = useState(false);
-    return (
-      <div style={{ display: 'flex', gap: '16px', alignItems: 'center', padding: '16px' }}>
-        <CheckboxButton
-          aria-label="Unchecked"
-          checked={unchecked}
-          onChange={() => setUnchecked((v) => !v)}
-        />
-        <CheckboxButton
-          aria-label="Checked"
-          checked={checked}
-          onChange={() => setChecked((v) => !v)}
-        />
-        <CheckboxButton
-          aria-label="Indeterminate"
-          checked={indeterminate}
-          indeterminate
-          onChange={() => setIndeterminate((v) => !v)}
-        />
-        <CheckboxButton
-          aria-label="Disabled unchecked"
-          checked={false}
-          disabled
-          onChange={() => {}}
-        />
-        <CheckboxButton aria-label="Disabled checked" checked disabled onChange={() => {}} />
-      </div>
-    );
-  },
-  ...withVariantConfig(['rtl']),
-};
-
 /** Checkbox states at 400% zoom for accessibility testing. */
 export const Zoom400: Story = {
   render: () => (

package/src/Chevron/_stories/Chevron.rtl.test.story.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Chevron from '..';
+
+export default {
+  component: Chevron,
+  title: 'Other/Chevron/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Chevron>;
+
+type Story = StoryObj<typeof Chevron>;
+
+/**
+ * Chevrons pointing left or right should mirror their direction in RTL mode.
+ * A left-pointing chevron in LTR becomes right-pointing in RTL and vice versa.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Chevron orientation="left" size="md" />
+      <Chevron orientation="right" size="md" />
+    </div>
+  ),
+  ...withRTLDiff(),
+};

package/src/Chips/_stories/Chips.rtl.test.story.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Chips from '../Chips';
+
+export default {
+  component: Chips,
+  title: 'Actions/Chips/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Chips>;
+
+type Story = StoryObj<typeof Chips>;
+
+const categoryChips = [
+  { value: 'all', label: 'All' },
+  { value: 'accounting', label: 'Accounting' },
+  { value: 'payroll', label: 'Payroll' },
+  { value: 'payments', label: 'Payments' },
+];
+
+const amountChips = [
+  { value: 100, label: '100 GBP' },
+  { value: 200, label: '200 GBP' },
+  { value: 300, label: '300 GBP' },
+  { value: 500, label: '500 GBP+' },
+];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* Choice mode: chip row order reverses in RTL */}
+      <Chips
+        chips={amountChips}
+        selected={300}
+        multiple={false}
+        aria-label="Transfer amount"
+        onChange={() => undefined}
+      />
+      {/* Filter mode: selected chips show close button on trailing end */}
+      <Chips
+        chips={categoryChips}
+        selected={['accounting', 'payments']}
+        multiple
+        aria-label="Category filter"
+        onChange={() => undefined}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Chips/_stories/Chips.test.story.tsx

@@ -121,40 +121,6 @@ export const FilterKeyboardInteraction: Story = {
   },
 };
 
-/** Filter and choice chips in right-to-left layout. */
-export const RTL: Story = {
-  render: function Render() {
-    const [filterSelected, setFilterSelected] = useState<readonly ChipValue[]>([
-      'accounting',
-      'payments',
-    ]);
-    const [choiceSelected, setChoiceSelected] = useState<ChipValue>(300);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <Chips
-          chips={filterChips}
-          multiple
-          selected={filterSelected}
-          aria-label="Category filter"
-          onChange={({ selectedValue, isEnabled }) => {
-            setFilterSelected((prev) =>
-              isEnabled ? [...prev, selectedValue] : prev.filter((v) => v !== selectedValue),
-            );
-          }}
-        />
-        <Chips
-          chips={choiceChips}
-          selected={choiceSelected}
-          aria-label="Transfer amount"
-          onChange={({ selectedValue }) => setChoiceSelected(selectedValue)}
-        />
-      </div>
-    );
-  },
-  ...withVariantConfig(['rtl']),
-};
-
 /** Filter chips at 400% zoom for accessibility testing. */
 export const Zoom400: Story = {
   render: function Render() {

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

@@ -2,7 +2,6 @@ import { Freeze, Plus, Send, Convert, Card } from '@transferwise/icons';
 
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, fn, userEvent, within } from 'storybook/test';
-import { useState } from 'react';
 import CircularButton from '../CircularButton';
 import Title from '../../Title';
 import Body from '../../Body';
@@ -135,73 +134,6 @@ export const KeyboardInteraction: Story = {
   },
 };
 
-/** Base variants in right-to-left layout. */
-export const RTL: Story = {
-  render: function Render() {
-    const [clicks, setClicks] = useState(0);
-    const rowStyle = {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(4, minmax(0, 100px))',
-      gap: '16px',
-      textAlign: 'center' as const,
-    };
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '16px' }}>
-        <div style={rowStyle}>
-          <CircularButton
-            priority="primary"
-            type="default"
-            icon={<Send />}
-            onClick={() => setClicks((c) => c + 1)}
-          >
-            Primary
-          </CircularButton>
-          <CircularButton
-            priority="secondary"
-            type="default"
-            icon={<Plus />}
-            onClick={() => setClicks((c) => c + 1)}
-          >
-            Secondary
-          </CircularButton>
-          <CircularButton disabled priority="primary" type="default" icon={<Card />}>
-            Primary disabled
-          </CircularButton>
-          <CircularButton disabled priority="secondary" type="default" icon={<Card />}>
-            Secondary disabled
-          </CircularButton>
-        </div>
-        <div style={rowStyle}>
-          <CircularButton
-            priority="primary"
-            type="negative"
-            icon={<Send />}
-            onClick={() => setClicks((c) => c + 1)}
-          >
-            Primary
-          </CircularButton>
-          <CircularButton
-            priority="secondary"
-            type="negative"
-            icon={<Convert />}
-            onClick={() => setClicks((c) => c + 1)}
-          >
-            Secondary
-          </CircularButton>
-          <CircularButton disabled priority="primary" type="negative" icon={<Card />}>
-            Primary disabled
-          </CircularButton>
-          <CircularButton disabled priority="secondary" type="negative" icon={<Card />}>
-            Secondary disabled
-          </CircularButton>
-        </div>
-      </div>
-    );
-  },
-  ...withVariantConfig(['rtl']),
-};
-
 /** Long labels are centered beneath the icon. */
 export const CenteredText: Story = {
   render: () => {

package/src/DateInput/_stories/DateInput.rtl.test.story.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import DateInput from '../DateInput';
+
+export default {
+  component: DateInput,
+  title: 'Forms/DateInput/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof DateInput>;
+
+type Story = StoryObj<typeof DateInput>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <DateInput size="sm" onChange={fn()} />
+      <DateInput size="md" onChange={fn()} />
+      <DateInput size="lg" onChange={fn()} />
+      <DateInput mode="month-year" onChange={fn()} />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/DateLookup/_stories/DateLookup.rtl.test.story.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import DateLookup from '..';
+
+export default {
+  component: DateLookup,
+  title: 'Forms/DateLookup/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof DateLookup>;
+
+type Story = StoryObj<typeof DateLookup>;
+
+const selectedDate = new Date(2024, 5, 14);
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        clearable
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        size="sm"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        size="lg"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  minHeight: '24rem',
+  paddingTop: '2rem',
+  width: '100%',
+};
+
+export const OpenCalendarPanel: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <DateLookup
+        label="Select date"
+        placeholder="Choose a date"
+        value={selectedDate}
+        onChange={() => {}}
+      />
+    </div>
+  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('button');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+    // Suppress focus ring on calendar cells — FocusScope traps focus inside the panel
+    // and the autofocus cycle causes the selected date's ring to flicker between iframes.
+    const style = canvasElement.ownerDocument.createElement('style');
+    style.textContent = ` 
+    .np-panel__content *:focus { 
+      outline: none !important; 
+      box-shadow: none !important; 
+    }`;
+    canvasElement.ownerDocument.head.appendChild(style);
+  },
+  ...withRTLDiff({ renderAs: 'iframe' }),
+};

package/src/Decision/_stories/Decision.rtl.test.story.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Size } from '../../common';
+import Decision, { DecisionPresentation, DecisionType } from '..';
+import AvatarView from '../../AvatarView';
+
+export default {
+  component: Decision,
+  title: 'Layouts/Decision/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Decision>;
+
+type Story = StoryObj<typeof Decision>;
+
+const options = [
+  {
+    title: 'Send money',
+    description: 'Fast international transfers.',
+    href: '#',
+    'aria-label': 'Send money',
+    media: {
+      block: <img src="https://wise.com/public-resources/assets/illustrations/globe.svg" alt="" />,
+      list: <AvatarView profileName="Alice Smith" />,
+    },
+  },
+  {
+    title: 'Receive money',
+    description: 'Get paid from abroad.',
+    href: '#',
+    'aria-label': 'Receive money',
+    media: {
+      block: <img src="https://wise.com/public-resources/assets/illustrations/globe.svg" alt="" />,
+      list: <AvatarView profileName="Alice Smith" />,
+    },
+  },
+];
+
+/**
+ * NavigationOption renders media on the inline-start side and a chevron on the
+ * inline-end side; these flip in RTL. The LIST_BLOCK and LIST_BLOCK_GRID
+ * presentations use flex-row layout that also reverses direction in RTL.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Decision
+        options={options}
+        presentation={DecisionPresentation.LIST}
+        type={DecisionType.NAVIGATION}
+      />
+      <Decision
+        options={options}
+        presentation={DecisionPresentation.LIST}
+        type={DecisionType.NAVIGATION}
+        isContainerAligned
+      />
+      <Decision
+        options={options}
+        presentation={DecisionPresentation.LIST_BLOCK}
+        type={DecisionType.NAVIGATION}
+        size={Size.MEDIUM}
+      />
+      <Decision
+        options={options}
+        presentation={DecisionPresentation.LIST_BLOCK}
+        type={DecisionType.NAVIGATION}
+        size={Size.SMALL}
+      />
+      <Decision
+        options={[...options, ...options]}
+        presentation={DecisionPresentation.LIST_BLOCK_GRID}
+        type={DecisionType.NAVIGATION}
+        size={Size.MEDIUM}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};