@transferwise/components 0.0.0-experimental-fa3aa98 → 0.0.0-experimental-f4a328f

package/src/Calendar/TableLink/TableLink.less

@@ -1,68 +0,0 @@
-@import (reference) "./../../styles/variables/neptune-tokens.less";
-
-.wds-Calendar__option--day,
-.wds-Calendar__option--month,
-.wds-Calendar__option--year {
-  width: 100%;
-  padding: var(--size-4) 0;
-  @media (--screen-400-zoom) {
-    padding: 0;
-  }
-  border: transparent;
-  border-radius: var(--radius-small);
-  background-color: transparent;
-  font-weight: var(--font-weight-semi-bold);
-  color: var(--color-content-primary);
-
-  &:focus {
-    background-color: var(--color-background-screen-hover);
-  }
-
-  &.disabled,
-  &[aria-disabled="true"] {
-    --ring-outline-color: var(--color-sentiment-content-primary);
-    color: var(--color-content-tertiary);
-    cursor: not-allowed;
-
-    &:hover,
-    &:focus {
-      filter: unset;
-      opacity: unset;
-      background-color: var(--color-sentiment-background-surface);
-      color: var(--color-sentiment-content-primary);
-    }
-
-    &.active {
-      &,
-      &:hover,
-      &:active,
-      &:focus {
-        filter: unset;
-        opacity: unset;
-        background-color: var(--color-sentiment-interactive-primary);
-        color: var(--color-sentiment-interactive-secondary);
-      }
-    }
-
-    &.today {
-      text-decoration-color: var(--color-content-tertiary);
-    }
-  }
-}
-
-.wds-Calendar__option--day {
-  height: var(--size-40);
-  border-radius: var(--radius-full);
-  line-height: var(--size-40);
-  width: var(--size-40);
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  &.today {
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 4px;
-  }
-}

package/src/Calendar/_stories/Calendar.accessibility.docs.mdx

@@ -1,118 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Forms/Calendar/Accessibility" />
-
-# Accessibility
-
-Calendar is a fully keyboard-accessible date picker grid. All dates — including disabled ones — are reachable via keyboard so that screen reader users can discover which dates are unavailable and why.
-
-## Keyboard Support
-
-<table>
-  <thead>
-    <tr>
-      <th>Key</th>
-      <th>Action</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>ArrowLeft</code>
-      </td>
-      <td>Move focus to previous day / month / year</td>
-    </tr>
-    <tr>
-      <td>
-        <code>ArrowRight</code>
-      </td>
-      <td>Move focus to next day / month / year</td>
-    </tr>
-    <tr>
-      <td>
-        <code>ArrowUp</code>
-      </td>
-      <td>Move focus up by one week (7 days) / 4 months / 4 years</td>
-    </tr>
-    <tr>
-      <td>
-        <code>ArrowDown</code>
-      </td>
-      <td>Move focus down by one week (7 days) / 4 months / 4 years</td>
-    </tr>
-    <tr>
-      <td>
-        <code>Enter</code> / <code>Space</code>
-      </td>
-      <td>Select the focused date (if enabled)</td>
-    </tr>
-  </tbody>
-</table>
-
-<br /> Navigation **does not skip** disabled dates. Users can arrow through every date in the grid
-regardless of its enabled state.
-
-## Screen Reader Announcements
-
-Each date cell is a `<button>` with an `aria-label` in a human-readable long format (e.g. "6 July 2024") constructed via `Intl.DateTimeFormat` for full locale support.
-
-### Active (Selected) Date
-
-The currently selected date includes "selected day" in its aria-label:
-
-> "6 July 2024, selected day"
-
-### Disabled Dates (via `disabledRules`)
-
-Dates disabled via `disabledRules` remain focusable and keyboard-navigable. They are announced with additional context:
-
-- `aria-disabled="true"` signals the date is not selectable
-- The aria-label appends "not available" (e.g. "6 July 2024, not available")
-- `aria-describedby` links to the InlinePrompt element containing the reason text
-
-This means a screen reader will announce something like:
-
-> "6 July 2024, not available — We are closed on weekends. button, dimmed."
-
-### Disabled + Selected
-
-If the focused date is both active and disabled:
-
-> "6 July 2024, selected day, not available"
-
-### Out-of-Range Dates (via `min`/`max`)
-
-Dates outside `min`/`max` boundaries use `aria-disabled="true"` (not the native HTML `disabled` attribute). They are rendered as interactive buttons in the grid: they can be clicked and the `aria-label` appends "not available". Arrow key navigation clamps at the boundary, so keyboard users cannot navigate into out-of-range cells — but they remain visible and clickable for pointer users.
-
-This distinction is intentional: `min`/`max` defines a hard boundary (the calendar simply doesn't extend beyond it), while `disabledRules` marks dates that exist but are unavailable (users should be able to discover them and understand why).
-
-## InlinePrompt Behaviour
-
-An `InlinePrompt` renders below the day grid when the current month contains disabled dates. It displays the `disabledRules.reason` text.
-
-### When It Appears
-
-The prompt is visible when **all** of the following are true:
-
-1. The Calendar is in day view
-2. `disabledRules.reason` is provided
-3. The currently displayed month contains at least one disabled date
-
-### How It's Announced
-
-The prompt is linked to disabled date cells via `aria-describedby`. This means the reason text is read as a description when a disabled cell receives focus — screen readers announce it after the label and role.
-
-The prompt element has an `id` that matches the `aria-describedby` on each disabled cell. It is **not** a live region (`role="alert"` or `role="status"`) because:
-
-- It does not change dynamically while focus is on a disabled cell
-- Announcing it on every arrow key press would be disruptive
-- The `aria-describedby` relationship already ensures it's read on focus
-
-### Sentiment
-
-The prompt's visual sentiment changes based on the currently focused date:
-
-- **Negative** (red) — when the focused date is disabled
-- **Neutral** — when the focused date is enabled
-
-This is a visual-only change and does not affect screen reader output.

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

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { expect, within , userEvent } from 'storybook/test';
-
-import Calendar from '../Calendar';
-
-export default {
-  component: Calendar,
-  title: 'Forms/Calendar/Tests',
-  tags: ['!autodocs', '!manifest'],
-} satisfies Meta<typeof Calendar>;
-
-type Story = StoryObj<typeof Calendar>;
-
-// min: March 2024, max: October 2024
-const min = new Date(2024, 2, 1);
-const max = new Date(2024, 9, 31);
-
-/**
- * Year view: years within min/max are enabled, years outside are disabled (aria-disabled),
- * and both navigation arrows are disabled because min and max fall within the same 2020–2039 block.
- */
-export const YearViewBoundaries: Story = {
-  render: () => <Calendar value={new Date(2024, 5, 15)} min={min} max={max} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    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.toBeDisabled();
-
-    // Adjacent years outside range are disabled
-    await expect(canvas.getByRole('button', { name: /^2023.*not available/iu })).toBeDisabled();
-    await expect(canvas.getByRole('button', { name: /^2025.*not available/iu })).toBeDisabled();
-
-    // 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();
-    await expect(canvas.getByRole('button', { name: /next 20 years/iu })).toBeDisabled();
-  },
-};
-
-/**
- * Month view: months within min/max are enabled, months outside are disabled (aria-disabled),
- * and both navigation arrows are disabled because min and max are both in 2024.
- */
-export const MonthViewBoundaries: Story = {
-  render: () => <Calendar value={new Date(2024, 5, 15)} min={min} max={max} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Navigate: year view → click 2024 → month view
-    await userEvent.click(canvas.getByRole('button', { name: /year view/iu }));
-    await userEvent.click(canvas.getByRole('button', { name: /2024.*selected year/iu }));
-
-    // Selected month (within range) is enabled
-    await expect(canvas.getByRole('button', { name: /^Jun.*selected month/iu })).not.toBeDisabled();
-
-    // Boundary months (min=Mar, max=Oct) are enabled
-    await expect(
-      canvas.getByRole('button', { name: /^Mar(?!.*not available)/iu }),
-    ).not.toBeDisabled();
-    await expect(
-      canvas.getByRole('button', { name: /^Oct(?!.*not available)/iu }),
-    ).not.toBeDisabled();
-
-    // Months outside range are disabled
-    await expect(canvas.getByRole('button', { name: /^Feb.*not available/iu })).toBeDisabled();
-    await expect(canvas.getByRole('button', { name: /^Nov.*not available/iu })).toBeDisabled();
-
-    // Both nav arrows disabled — min and max are both in 2024
-    await expect(canvas.getByRole('button', { name: /previous year/iu })).toBeDisabled();
-    await expect(canvas.getByRole('button', { name: /next year/iu })).toBeDisabled();
-  },
-};

package/src/DateLookup/DateLookup.disabledDates.test.tsx

@@ -1,293 +0,0 @@
-import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
-import DateLookup from './DateLookup';
-import type { DisabledRules } from '../Calendar/Calendar.types';
-
-import { act } from 'react';
-
-const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
-
-mockMatchMedia();
-mockResizeObserver();
-
-const initialValue = new Date(2024, 6, 1);
-
-const weekendRules: DisabledRules = {
-  weekdays: ['sat', 'sun'],
-  reason: 'We are closed on weekends.',
-};
-
-const bankHolidayRules: DisabledRules = {
-  dates: [new Date(2024, 6, 4)],
-  reason: 'Bank holiday.',
-};
-
-describe('DateLookup - disabled dates', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(async () => {
-    await jest.runOnlyPendingTimersAsync();
-    jest.useRealTimers();
-    jest.clearAllMocks();
-  });
-
-  const openDateLookup = async () => {
-    await user.click(screen.getByRole('button'));
-    await act(async () => {
-      await jest.runOnlyPendingTimersAsync();
-    });
-  };
-
-  describe('panel behavior with rule-disabled dates', () => {
-    it('does NOT close when a rule-disabled date is clicked', async () => {
-      render(
-        <DateLookup value={initialValue} disabledRules={bankHolidayRules} onChange={jest.fn()} />,
-      );
-
-      await openDateLookup();
-      const holiday = screen.getByLabelText(/^4 July 2024/u);
-      await user.click(holiday);
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument();
-    });
-
-    it('closes when an enabled date is clicked', async () => {
-      const handleChange = jest.fn();
-      render(
-        <DateLookup
-          value={initialValue}
-          disabledRules={bankHolidayRules}
-          onChange={handleChange}
-        />,
-      );
-
-      await openDateLookup();
-      const enabledDate = screen.getByLabelText(/^3 July 2024/u);
-      await user.click(enabledDate);
-
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-      expect(handleChange).toHaveBeenCalledWith(new Date(2024, 6, 3));
-    });
-  });
-
-  describe('panel behavior with out-of-range dates', () => {
-    const minDate = new Date(2024, 6, 3);
-    const maxDate = new Date(2024, 6, 25);
-
-    it('does NOT close when an out-of-range date is clicked', async () => {
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          min={minDate}
-          max={maxDate}
-          onChange={jest.fn()}
-        />,
-      );
-
-      await openDateLookup();
-      await user.click(screen.getByRole('button', { name: /^1 July 2024/u }));
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument();
-    });
-
-    it('does NOT call onChange when an out-of-range date is clicked', async () => {
-      const handleChange = jest.fn();
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          min={minDate}
-          max={maxDate}
-          onChange={handleChange}
-        />,
-      );
-
-      await openDateLookup();
-      await user.click(screen.getByRole('button', { name: /^1 July 2024/u }));
-
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('prop threading', () => {
-    it('renders rule-disabled dates with aria-disabled in the calendar', async () => {
-      render(<DateLookup value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
-
-      await openDateLookup();
-
-      const saturday = screen.getByLabelText(/^6 July 2024/u);
-      expect(saturday).toHaveAttribute('aria-disabled', 'true');
-    });
-
-    it('renders out-of-range dates with aria-disabled in the calendar', async () => {
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          min={new Date(2024, 6, 3)}
-          max={new Date(2024, 6, 25)}
-          onChange={jest.fn()}
-        />,
-      );
-
-      await openDateLookup();
-
-      const outOfRangeDate = screen.getByRole('button', { name: /^1 July 2024/u });
-      expect(outOfRangeDate).toHaveAttribute('aria-disabled', 'true');
-      expect(outOfRangeDate).toBeEnabled();
-    });
-
-    it('renders InlinePrompt with disabledRules reason text', async () => {
-      render(<DateLookup value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
-
-      await openDateLookup();
-
-      expect(screen.getByText('We are closed on weekends.')).toBeInTheDocument();
-    });
-
-    it('renders previous month button as disabled when min is in the current month', async () => {
-      render(
-        <DateLookup value={new Date(2024, 6, 5)} min={new Date(2024, 6, 1)} onChange={jest.fn()} />,
-      );
-
-      await openDateLookup();
-
-      expect(screen.getByRole('button', { name: /previous month/iu })).toBeDisabled();
-    });
-
-    it('renders next month button as disabled when max is in the current month', async () => {
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          max={new Date(2024, 6, 31)}
-          onChange={jest.fn()}
-        />,
-      );
-
-      await openDateLookup();
-
-      expect(screen.getByRole('button', { name: /next month/iu })).toBeDisabled();
-    });
-  });
-
-  describe('InlinePrompt for out-of-range dates', () => {
-    const minDate = new Date(2024, 6, 3);
-    const maxDate = new Date(2024, 6, 25);
-
-    it('shows negative prompt with boundary dates when out-of-range date is clicked', async () => {
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          min={minDate}
-          max={maxDate}
-          onChange={jest.fn()}
-        />,
-      );
-
-      await openDateLookup();
-      await user.click(screen.getByRole('button', { name: /^1 July 2024/u }));
-
-      // The prompt renders inside a portal so query from document
-      const prompt = document.querySelector('.wds-inline-prompt');
-      expect(prompt).toBeInTheDocument();
-      expect(prompt).toHaveClass('wds-prompt--negative');
-      expect(prompt).toHaveTextContent(
-        'Please select a date between 3 July 2024 and 25 July 2024.',
-      );
-    });
-
-    it('shows boundary message (not disabledRules reason) when out-of-range date is clicked', async () => {
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          min={minDate}
-          max={maxDate}
-          disabledRules={weekendRules}
-          onChange={jest.fn()}
-        />,
-      );
-
-      await openDateLookup();
-      // July 27 is beyond max
-      await user.click(screen.getByRole('button', { name: /^27 July 2024/u }));
-
-      const prompt = document.querySelector('.wds-inline-prompt');
-      expect(prompt).toHaveTextContent(
-        'Please select a date between 3 July 2024 and 25 July 2024.',
-      );
-      expect(prompt).not.toHaveTextContent('We are closed on weekends.');
-    });
-  });
-
-  describe('onDateSelect', () => {
-    it('fires with isEnabled: false when navigating to a rule-disabled date', async () => {
-      const handleDateSelect = jest.fn();
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          disabledRules={weekendRules}
-          onChange={jest.fn()}
-          onDateSelect={handleDateSelect}
-        />,
-      );
-
-      await openDateLookup();
-      await user.keyboard('{ArrowRight}');
-
-      expect(handleDateSelect).toHaveBeenCalledWith(
-        expect.objectContaining({
-          date: new Date(2024, 6, 6),
-          isEnabled: false,
-        }),
-      );
-    });
-
-    it('fires with isEnabled: false when clicking an out-of-range date', async () => {
-      const handleDateSelect = jest.fn();
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          min={new Date(2024, 6, 3)}
-          max={new Date(2024, 6, 25)}
-          onChange={jest.fn()}
-          onDateSelect={handleDateSelect}
-        />,
-      );
-
-      await openDateLookup();
-      await user.click(screen.getByRole('button', { name: /^1 July 2024/u }));
-
-      expect(handleDateSelect).toHaveBeenCalledWith(
-        expect.objectContaining({
-          date: new Date(2024, 6, 1),
-          isEnabled: false,
-        }),
-      );
-    });
-
-    it('fires with isEnabled: true when clicking an enabled date', async () => {
-      const handleDateSelect = jest.fn();
-      render(
-        <DateLookup
-          value={new Date(2024, 6, 5)}
-          disabledRules={weekendRules}
-          onChange={jest.fn()}
-          onDateSelect={handleDateSelect}
-        />,
-      );
-
-      await openDateLookup();
-      await user.click(screen.getByLabelText(/^3 July 2024/u));
-
-      expect(handleDateSelect).toHaveBeenCalledWith(
-        expect.objectContaining({
-          date: new Date(2024, 6, 3),
-          isEnabled: true,
-        }),
-      );
-    });
-  });
-});

package/src/DateLookup/_stories/DateLookup.accessibility.docs.mdx

@@ -1,108 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Forms/DateLookup/Accessibility" />
-
-# Accessibility
-
-DateLookup wraps the Calendar component inside a dropdown panel. It provides full keyboard accessibility for opening, navigating, selecting, and dismissing dates.
-
-## Keyboard Support
-
-<table>
-  <thead>
-    <tr>
-      <th>Key</th>
-      <th>Context</th>
-      <th>Action</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>ArrowLeft/Right/Up/Down</code>
-      </td>
-      <td>Trigger focused, panel closed</td>
-      <td>Opens the panel</td>
-    </tr>
-    <tr>
-      <td>
-        <code>ArrowLeft/Right/Up/Down</code>
-      </td>
-      <td>Panel open</td>
-      <td>Navigates between dates (see Calendar)</td>
-    </tr>
-    <tr>
-      <td>
-        <code>Enter</code> / <code>Space</code>
-      </td>
-      <td>Panel open, enabled date focused</td>
-      <td>Selects date, closes panel</td>
-    </tr>
-    <tr>
-      <td>
-        <code>Enter</code> / <code>Space</code>
-      </td>
-      <td>Panel open, disabled date focused</td>
-      <td>No action (panel stays open)</td>
-    </tr>
-    <tr>
-      <td>
-        <code>Escape</code>
-      </td>
-      <td>Panel open</td>
-      <td>Reverts to original value, closes panel</td>
-    </tr>
-  </tbody>
-</table>
-
-<br />
-
-### Click Behaviour
-
-- **Clicking an enabled date**: selects it, closes the panel, fires `onChange`
-- **Clicking a disabled date**: does not select, panel stays open, focus remains in the calendar grid
-
-## Screen Reader Announcements
-
-DateLookup relies on the Calendar's built-in accessibility features for date announcements. See [Calendar
-Accessibility](?path=/docs/forms-calendar-accessibility--docs) for details on how dates are labelled and described.
-
-### Trigger Button
-
-The trigger button announces the currently selected date (or placeholder text when no date is selected). It uses `aria-controls` to associate with the panel.
-
-### Panel
-
-The dropdown panel is rendered with `role="dialog"` and is connected to the trigger via `aria-controls`. When opened, focus moves into the calendar grid.
-
-## Disabled Dates (via `disabledRules`)
-
-When `disabledRules` is provided, disabled dates remain focusable and keyboard-navigable:
-
-- `aria-disabled="true"` marks the cell as unavailable
-- "not available" is appended to the aria-label
-- `aria-describedby` links to the InlinePrompt reason text
-- Keyboard navigation reaches disabled dates (they are not skipped)
-- Clicking or pressing Enter on a disabled date does **not** close the panel
-
-## Out-of-Range Dates (via `min`/`max`)
-
-Dates outside `min`/`max` boundaries use `aria-disabled="true"` (not the native HTML `disabled` attribute). They are rendered as interactive buttons in the grid and can be clicked; the `aria-label` appends "not available". Arrow key navigation clamps at the boundary, so keyboard users cannot navigate into out-of-range cells.
-
-This distinction is intentional: `min`/`max` defines a hard boundary, while `disabledRules` marks dates that exist but are unavailable (users can discover them and understand why via the InlinePrompt).
-
-### InlinePrompt
-
-An InlinePrompt renders below the day grid inside the panel when the visible month contains disabled dates. It displays the configured `disabledRules.reason` text.
-
-The prompt is linked to disabled cells via `aria-describedby`, so screen readers announce the reason when a disabled
-date receives focus. See [Calendar Accessibility](?path=/docs/forms-calendar-accessibility--docs) for full details on
-the prompt's announcement behaviour.
-
-## Consumer Callbacks
-
-The `onDateSelect` callback fires with `{ date, isEnabled }` whenever the user navigates to or clicks on any date. Consumers can use this to:
-
-- Display a custom message explaining why a specific date is disabled
-- Track which dates users attempt to select
-- Provide alternative actions for disabled dates