@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/Snackbar/_stories/Snackbar.story.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn, userEvent, within } from 'storybook/test';
+import { Card } from '@transferwise/icons';
 
 import { wait } from '../../test-utils/wait';
 import {
@@ -8,6 +9,7 @@ import {
 } from '../../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../../Button';
 import { Snackbar } from '../Snackbar';
+import type { SnackbarCreationProps } from '../Snackbar.types';
 import { SnackbarConsumer } from '../SnackbarContext';
 import SnackbarProvider from '../SnackbarProvider';
 
@@ -17,6 +19,27 @@ const meta: Meta = {
 };
 export default meta;
 
+type SnackbarExample = {
+  label: string;
+  props: Omit<SnackbarCreationProps, 'timestamp'>;
+};
+
+const SnackbarExamples = ({ examples }: { examples: SnackbarExample[] }) => (
+  <SnackbarProvider>
+    <SnackbarConsumer>
+      {({ createSnackbar }) => (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--size-8)' }}>
+          {examples.map(({ label, props }) => (
+            <Button key={label} v2 size="md" onClick={() => createSnackbar(props)}>
+              {label}
+            </Button>
+          ))}
+        </div>
+      )}
+    </SnackbarConsumer>
+  </SnackbarProvider>
+);
+
 export const Sandbox = createSandboxStory({
   code: `<SnackbarProvider>
   <SnackbarConsumer>
@@ -87,3 +110,80 @@ export const Basic: StoryObj = {
     await userEvent.click(canvas.getByRole('button'));
   },
 };
+
+/**
+ * Use `sentiment` to match the meaning of the feedback. Sentiment controls appearance and default
+ * media; it does not change the polite screen-reader announcement.
+ */
+export const Sentiments: StoryObj = {
+  render: () => (
+    <SnackbarExamples
+      examples={[
+        { label: 'Neutral', props: { text: 'Details updated', sentiment: 'neutral' } },
+        { label: 'Negative', props: { text: 'Transfer failed', sentiment: 'negative' } },
+        { label: 'Warning', props: { text: 'Check the recipient details', sentiment: 'warning' } },
+        { label: 'Success', props: { text: 'Transfer completed', sentiment: 'success' } },
+        {
+          label: 'Proposition',
+          props: { text: 'You can earn a referral reward', sentiment: 'proposition' },
+        },
+      ]}
+    />
+  ),
+};
+
+/**
+ * `media` overrides the sentiment-derived media. Custom media is displayed in the 24×24px media
+ * slot and should provide its own accessibility attributes when meaningful.
+ */
+export const Media: StoryObj = {
+  render: () => (
+    <SnackbarExamples
+      examples={[
+        { label: 'Default media', props: { text: 'Transfer completed', sentiment: 'success' } },
+        {
+          label: 'Custom media',
+          props: { text: 'Card added', media: <Card size={24} title="Card" /> },
+        },
+      ]}
+    />
+  ),
+};
+
+/**
+ * `duration` uses four-second, six-second or indefinite presets, counted after entry finishes.
+ * Timed Snackbars pause while hovered or focused and resume when both interactions end.
+ */
+export const Durations: StoryObj = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The default duration is now **4000ms**, previously **4500ms**, when neither `duration` nor a legacy Provider `timeout` is supplied. ' +
+          'Timed durations begin after the entry transition finishes, pause while hovered or focused, and resume with the remaining time only after both interactions end.\n\n' +
+          'Activating the action runs its callback and then dismisses the Snackbar, including when the action remains focused.\n\n' +
+          '`timeout` is deprecated but explicit millisecond values remain supported without automatic remapping. An explicit `duration` takes precedence. ' +
+          'When migrating, choose `default` for 0–5000ms, `extended` for values above 5000ms, and `indefinite` for intentionally persistent notifications.',
+      },
+    },
+  },
+  render: () => (
+    <SnackbarExamples
+      examples={[
+        { label: 'Default (4s)', props: { text: 'Changes saved', duration: 'default' } },
+        {
+          label: 'Extended (6s)',
+          props: {
+            text: 'Transfer deleted',
+            duration: 'extended',
+            action: { label: 'Undo', onClick: fn() },
+          },
+        },
+        {
+          label: 'Indefinite',
+          props: { text: 'Waiting for confirmation', duration: 'indefinite' },
+        },
+      ]}
+    />
+  ),
+};

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

@@ -1,10 +1,11 @@
-import { userEvent, within, expect } from 'storybook/test';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { action } from 'storybook/actions';
 import { withVariantConfig } from '../../../.storybook/helpers';
 import { lorem20 } from '../../test-utils';
 import { wait } from '../../test-utils/wait';
 import Button from '../../Button';
-import { Snackbar, type SnackbarProps } from '../Snackbar';
+import { Snackbar } from '../Snackbar';
+import type { SnackbarCreationProps } from '../Snackbar.types';
 import { SnackbarConsumer } from '../SnackbarContext';
 import SnackbarProvider from '../SnackbarProvider';
 
@@ -21,23 +22,20 @@ const launchSnackbar = async (canvasElement: HTMLElement) => {
   await userEvent.click(canvas.getByRole('button'));
 };
 
-type Args = Partial<SnackbarProps> & {
+type Args = Partial<SnackbarCreationProps> & {
   extraContext: React.ReactNode;
-  timeout: number;
 };
 
-const TIMEOUT = 10000000;
-
 const Default = {
   args: {
-    timeout: TIMEOUT,
+    duration: 'indefinite',
   } as Args,
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     await launchSnackbar(canvasElement);
   },
   render: (args: Args) => {
     return (
-      <SnackbarProvider timeout={args.timeout}>
+      <SnackbarProvider>
         <SnackbarConsumer>
           {({ createSnackbar }) => (
             <>
@@ -46,7 +44,8 @@ const Default = {
                 block
                 onClick={() => {
                   createSnackbar({
-                    action: {
+                    duration: args.duration,
+                    action: args.action ?? {
                       label: 'View',
                       onClick: () => action('View button clicked.'),
                     },
@@ -72,6 +71,27 @@ export const Basic = {
   },
 };
 
+export const NavigationAction = {
+  ...Default,
+  args: {
+    ...Default.args,
+    action: {
+      label: 'View transfer',
+      href: '/transfers/123',
+      target: '_blank',
+    },
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    await launchSnackbar(canvasElement);
+
+    const link = await waitFor(() =>
+      within(document.body).getByRole('link', { name: 'View transfer' }),
+    );
+    await expect(link).toHaveAttribute('href', '/transfers/123');
+    await expect(link).toHaveAttribute('target', '_blank');
+  },
+};
+
 export const Mobile = {
   ...Default,
   args: {
@@ -88,9 +108,9 @@ const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
   if (body) {
     body.setAttribute('class', 'np-theme-personal--dark');
   }
-  const snackbar = document.querySelector('div.snackbar');
+  const snackbar = document.querySelector('div.wds-Snackbar');
   if (snackbar) {
-    snackbar.setAttribute('class', 'snackbar np-theme-personal--dark');
+    snackbar.setAttribute('class', 'wds-Snackbar np-theme-personal--dark');
   }
 };
 
@@ -134,6 +154,35 @@ export const MultipleClicks = {
       await userEvent.click(canvas.getByRole('button'));
     }
 
-    await expect(within(document.body).getAllByRole('alert')).toHaveLength(1);
+    await expect(within(document.body).getAllByRole('status')).toHaveLength(1);
+  },
+};
+
+/** Empty text dismisses the current Snackbar without rendering a blank replacement. */
+export const ClearedMessage = {
+  ...Default,
+  args: {
+    ...Default.args,
+    extraContext: (
+      <SnackbarConsumer>
+        {({ createSnackbar }) => (
+          <Button v2 onClick={() => createSnackbar({ text: '' })}>
+            Clear Snackbar
+          </Button>
+        )}
+      </SnackbarConsumer>
+    ),
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: 'Show Snackbar' }));
+    await waitFor(async () => {
+      await expect(within(document.body).getByRole('status')).toBeInTheDocument();
+    });
+    await userEvent.click(canvas.getByRole('button', { name: 'Clear Snackbar' }));
+    await waitFor(async () => {
+      await expect(within(document.body).queryByRole('status')).not.toBeInTheDocument();
+      await expect(document.querySelector('.wds-Snackbar')).toBeNull();
+    });
   },
 };

package/src/Snackbar/constants.ts

@@ -0,0 +1,7 @@
+export const SNACKBAR_ENTER_DURATION = 300;
+export const SNACKBAR_EXIT_DURATION = 150;
+
+/** Default auto-dismiss duration for short feedback, in milliseconds. */
+export const SNACKBAR_DEFAULT_DURATION = 4000;
+/** Extended auto-dismiss duration for messages needing more reading time, in milliseconds. */
+export const SNACKBAR_EXTENDED_DURATION = 6000;

package/src/Snackbar/index.ts

@@ -1,4 +1,4 @@
 export { default } from './Snackbar';
 
-export type { SnackbarProps } from './Snackbar';
+export type { SnackbarCreationProps } from './Snackbar.types';
 export type { SnackbarProviderProps } from './SnackbarProvider';

package/src/Snackbar/useSnackbarAutoDismiss.ts

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { SNACKBAR_DEFAULT_DURATION, SNACKBAR_EXTENDED_DURATION } from './constants';
+import type { SnackbarProps } from './Snackbar';
+import type { SnackbarDuration } from './Snackbar.types';
+
+const DURATIONS: Record<SnackbarDuration, number | null> = {
+  default: SNACKBAR_DEFAULT_DURATION,
+  extended: SNACKBAR_EXTENDED_DURATION,
+  indefinite: null,
+};
+
+/** Starts after entry finishes and pauses on hover or focus, preserving the remaining time. */
+const useSnackbarAutoDismiss = ({
+  duration,
+  onDismissRequest,
+  timeout,
+  visible,
+}: Pick<SnackbarProps, 'duration' | 'onDismissRequest' | 'timeout' | 'visible'>) => {
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const remaining = useRef(duration ? DURATIONS[duration] : (timeout ?? SNACKBAR_DEFAULT_DURATION));
+  const [entered, setEntered] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [focusWithin, setFocusWithin] = useState(false);
+
+  const running = visible && entered && !hovered && !focusWithin;
+
+  useEffect(() => {
+    const ms = remaining.current;
+    if (!running || ms === null) {
+      return undefined;
+    }
+
+    const startedAt = Date.now();
+    const id = window.setTimeout(() => onDismissRequest(), ms);
+    return () => {
+      window.clearTimeout(id);
+      remaining.current = Math.max(0, ms - (Date.now() - startedAt));
+    };
+  }, [running, onDismissRequest]);
+
+  return {
+    handleBlur: (event: React.FocusEvent<HTMLDivElement>) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        setFocusWithin(false);
+      }
+    },
+    handleEntered: () => {
+      // Entry can finish beneath the pointer or with focus already inside the surface.
+      setHovered(surfaceRef.current?.matches(':hover') ?? false);
+      setFocusWithin(Boolean(surfaceRef.current?.contains(document.activeElement)));
+      setEntered(true);
+    },
+    handleFocus: () => setFocusWithin(true),
+    handleMouseEnter: () => setHovered(true),
+    handleMouseLeave: () => setHovered(false),
+    surfaceRef,
+  };
+};
+
+export default useSnackbarAutoDismiss;

package/src/Snackbar/useSnackbarManager.ts

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import type { SnackbarCreationProps } from './Snackbar.types';
+
+type SnackbarInstance = {
+  id: number;
+  props: SnackbarCreationProps;
+};
+
+type SnackbarManagerState = {
+  /** The instance currently entering, visible or exiting. `null` means the provider is idle. */
+  active: SnackbarInstance | null;
+  /** Marks the active provider render as committed, not its entry animation as finished. */
+  activeHasRendered: boolean;
+  /** Changes when a new instance becomes active so repeated message text can be announced. */
+  announcementKey: number;
+  /** The latest replacement waiting for active to exit. `null` means no replacement is waiting. */
+  pending: SnackbarInstance | null;
+  /** Whether active should enter/stay visible; false requests its exit or indicates idle state. */
+  visible: boolean;
+};
+
+type SnackbarManagerAction =
+  | { type: 'show'; instance: SnackbarInstance }
+  | {
+      /** Ends pre-render coalescing; subsequent creates must wait for the committed instance to exit. */
+      type: 'rendered';
+      instanceId: number;
+    }
+  | { type: 'dismiss'; preservePending?: boolean }
+  | { type: 'exited'; instanceId: number };
+
+const emptyState: SnackbarManagerState = {
+  active: null,
+  activeHasRendered: false,
+  announcementKey: 0,
+  pending: null,
+  visible: false,
+};
+
+/**
+ * Coalesces creates before the first commit, then keeps active content until its exit finishes.
+ * Only the latest pending replacement is retained. Manual dismissal cancels it; action dismissal
+ * preserves a follow-up created by its callback. Exited promotes pending or returns to idle.
+ * Instance IDs prevent stale exit callbacks from affecting a newer Snackbar.
+ */
+const snackbarManagerReducer = (
+  state: SnackbarManagerState,
+  action: SnackbarManagerAction,
+): SnackbarManagerState => {
+  switch (action.type) {
+    case 'show':
+      if (!state.active || !state.activeHasRendered) {
+        // Batched creates collapse to the latest instance before anything has entered.
+        return {
+          active: action.instance,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true,
+        };
+      }
+
+      // Keep the active content until it exits; newer creates replace only the pending instance.
+      return { ...state, pending: action.instance, visible: false };
+    case 'rendered':
+      if (state.active?.id !== action.instanceId || state.activeHasRendered) {
+        return state;
+      }
+
+      return { ...state, activeHasRendered: true };
+    case 'dismiss':
+      if (!state.active) {
+        return state;
+      }
+
+      return state.activeHasRendered
+        ? { ...state, pending: action.preservePending ? state.pending : null, visible: false }
+        : { ...emptyState, announcementKey: state.announcementKey };
+    case 'exited':
+      // Ignore callbacks from an instance that has already been replaced.
+      if (state.active?.id !== action.instanceId) {
+        return state;
+      }
+
+      if (state.pending) {
+        return {
+          active: state.pending,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true,
+        };
+      }
+
+      return { ...emptyState, announcementKey: state.announcementKey };
+    default:
+      return state;
+  }
+};
+
+/**
+ * Owns latest-wins replacement through reducer actions, separate from rendering and animation.
+ * Stable create/dismiss callbacks request state changes; the surface's onExited callback completes
+ * dismissal. The provider uses this state to mount/unmount the portal without a notification queue.
+ */
+const useSnackbarManager = () => {
+  const [state, dispatch] = useReducer(snackbarManagerReducer, emptyState);
+  const nextInstanceId = useRef(0);
+
+  const createSnackbar = useCallback((props: SnackbarCreationProps) => {
+    const { text } = props;
+    if (
+      text == null ||
+      typeof text === 'boolean' ||
+      (typeof text === 'string' && text.trim() === '')
+    ) {
+      // A clear request must dismiss active and cancel pending, never create a blank replacement.
+      dispatch({ type: 'dismiss' });
+      return;
+    }
+
+    nextInstanceId.current += 1;
+    dispatch({ type: 'show', instance: { id: nextInstanceId.current, props } });
+  }, []);
+
+  const dismissSnackbar = useCallback((reason?: 'action') => {
+    // Action callbacks can create a replacement; dismiss only the original in that case.
+    dispatch({ type: 'dismiss', preservePending: reason === 'action' });
+  }, []);
+
+  const handleExited = useCallback(() => {
+    if (state.active) {
+      dispatch({ type: 'exited', instanceId: state.active.id });
+    }
+  }, [state.active]);
+
+  useEffect(() => {
+    if (state.active && state.visible && !state.activeHasRendered) {
+      // Later creates can now wait for this instance's exit instead of coalescing before render.
+      dispatch({ type: 'rendered', instanceId: state.active.id });
+    }
+  }, [state.active, state.activeHasRendered, state.visible]);
+
+  return {
+    active: state.active,
+    announcementKey: state.announcementKey,
+    createSnackbar,
+    dismissSnackbar,
+    handleExited,
+    visible: state.visible,
+  };
+};
+
+export default useSnackbarManager;

package/src/StatusIcon/StatusIcon.css

@@ -24,6 +24,7 @@
 }
 .status-circle.neutral,
 .status-circle.info {
+  background-color: #5d7079;
   background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
 }
 .status-circle.neutral .status-icon,

package/src/Stepper/Stepper.css

@@ -14,15 +14,18 @@
 }
 .tw-stepper__step--active .tw-stepper__step-label {
   cursor: default;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .tw-stepper__step--clickable .tw-stepper__step-label {
+  color: #0097c7;
   color: var(--color-content-accent);
   transition: color 0.15s ease-in-out;
   line-height: 0;
   border-radius: 2px;
 }
 .np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label {
+  color: #5d7079;
   color: var(--color-content-secondary);
   inset-block-start: 0;
 }
@@ -40,6 +43,7 @@
 .tw-stepper__step-label {
   position: absolute;
   inset-block-start: 0;
+  color: #5d7079;
   color: var(--color-content-secondary);
   transition: color 0.6s ease-in-out;
   white-space: nowrap;

package/src/Stepper/Stepper.tsx

@@ -73,9 +73,7 @@ const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) =>
         className={clsx(
           'hidden-xs',
           'tw-stepper__step',
-          active
-            ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active'
-            : 'np-text-body-default wds-text-body-default',
+          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',
           clickable && 'tw-stepper__step--clickable',
           step.hoverLabel && 'tw-stepper__step--has-tooltip',
         )}

package/src/Sticky/Sticky.css

@@ -1,3 +1,4 @@
 .wds-sticky.sliding-panel--open-bottom {
+  padding-block-end: env(safe-area-inset-bottom, 0px);
   padding-block-end: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
 }

package/src/Switch/Switch.css

@@ -26,12 +26,14 @@
   color: #fff;
 }
 .np-switch--unchecked {
+  background: #c9cbce;
   background: var(--color-interactive-secondary);
 }
 .np-switch--unchecked .switch--thumb {
   transform: translateX(0);
 }
 .np-switch--checked {
+  background: #00a2dd;
   background: var(--color-interactive-accent);
 }
 .np-switch--checked .np-switch--thumb {
@@ -57,5 +59,6 @@
   block-size: 20px;
   margin: 3px;
   border-radius: 50%;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }

package/src/Table/Header/TableHeader.tsx

@@ -50,7 +50,7 @@ const TableHeader = ({
     // If headers are empty, we still should render empty headers to keep visual consistency
     return (
       <div
-        className="np-table-header-content np-text-body-default-bold wds-text-body-default-bold"
+        className="np-table-header-content np-text-body-default-bold"
         data-testid="np-table-empty-header"
       >
         &nbsp;

package/src/Table/StatusText/TableStatusText.test.tsx

@@ -13,10 +13,7 @@ describe('TableStatusText Component', () => {
   it('renders the text and applies the default class', () => {
     renderComponent();
     expect(screen.getByText('Status Text')).toBeInTheDocument();
-    expect(screen.getByText('Status Text')).toHaveClass(
-      'np-text-body-default',
-      'wds-text-body-default',
-    );
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
   });
 
   it('applies the custom class name', () => {
@@ -26,18 +23,12 @@ describe('TableStatusText Component', () => {
 
   it('applies the default typography class when typography is not provided', () => {
     renderComponent();
-    expect(screen.getByText('Status Text')).toHaveClass(
-      'np-text-body-default',
-      'wds-text-body-default',
-    );
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
   });
 
   it('applies the typography class when typography equals `default-bold`', () => {
     renderComponent({ typography: 'default-bold' });
-    expect(screen.getByText('Status Text')).toHaveClass(
-      'np-text-body-default-bold',
-      'wds-text-body-default-bold',
-    );
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
   });
 
   it('does not render any icon when status is not provided', () => {
@@ -48,20 +39,14 @@ describe('TableStatusText Component', () => {
 
   it('applies the typography and status classes, renders the error icon when status equals `error`', () => {
     renderComponent({ status: 'error' });
-    expect(screen.getByText('Status Text')).toHaveClass(
-      'np-text-body-default-bold',
-      'wds-text-body-default-bold',
-    );
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
     expect(screen.getByText('Status Text')).toHaveClass('np-table-content--error');
     expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
   });
 
   it('applies the typography and status classes, renders the success icon when status equals `success`', () => {
     renderComponent({ status: 'success' });
-    expect(screen.getByText('Status Text')).toHaveClass(
-      'np-text-body-default-bold',
-      'wds-text-body-default-bold',
-    );
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
     expect(screen.getByText('Status Text')).toHaveClass('np-table-content--success');
     expect(screen.getByTestId('check-icon')).toBeInTheDocument();
   });