@transferwise/components 46.136.0 → 46.137.0

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

@@ -0,0 +1,422 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+import { Bank } from '@transferwise/icons';
+import Button from '../../button';
+import { withVariantConfig } from '../../../.storybook/helpers';
+import { CriticalBanner } from './CriticalBanner';
+
+const meta: Meta<typeof CriticalBanner> = {
+  component: CriticalBanner,
+  title: 'Prompts/CriticalBanner/Tests',
+  tags: ['!autodocs', '!manifest'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CriticalBanner>;
+
+const wait = async (ms: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+const ANIMATION_DURATION = 200; // 150ms animation + 50ms buffer
+
+const longDescription =
+  'We have detected unusual activity on your account that does not match your typical usage patterns. To protect your funds and personal information, we have temporarily restricted access. Please verify your identity to restore full access to your account.';
+
+function AllVariants() {
+  const [states, setStates] = useState({
+    negativeExpanded: true,
+    negativeCollapsed: false,
+    warningExpanded: true,
+    warningCollapsed: false,
+    neutralExpanded: true,
+    successExpanded: true,
+    noTitle: false,
+    withMedia: true,
+    withBothActions: true,
+  });
+
+  const toggle = (key: keyof typeof states) =>
+    setStates((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+      <CriticalBanner
+        sentiment="negative"
+        title="Negative — expanded"
+        description="Your account has been temporarily blocked due to unusual activity."
+        action={{ label: 'Verify now', onClick: fn() }}
+        actionSecondary={{ label: 'Learn more', onClick: fn() }}
+        expanded={states.negativeExpanded}
+        onToggle={() => toggle('negativeExpanded')}
+      />
+      <CriticalBanner
+        sentiment="negative"
+        title="Negative — collapsed"
+        description="Your account has been temporarily blocked."
+        action={{ label: 'Verify now', onClick: fn() }}
+        expanded={states.negativeCollapsed}
+        onToggle={() => toggle('negativeCollapsed')}
+      />
+      <CriticalBanner
+        sentiment="warning"
+        title="Warning — expanded"
+        description="Your account is at risk of being blocked within 7 days."
+        action={{ label: 'Take action', onClick: fn() }}
+        expanded={states.warningExpanded}
+        onToggle={() => toggle('warningExpanded')}
+      />
+      <CriticalBanner
+        sentiment="warning"
+        title="Warning — collapsed"
+        description="Your account is at risk."
+        action={{ label: 'Take action', onClick: fn() }}
+        expanded={states.warningCollapsed}
+        onToggle={() => toggle('warningCollapsed')}
+      />
+      <CriticalBanner
+        sentiment="neutral"
+        title="Neutral — expanded"
+        description="Your account needs attention."
+        action={{ label: 'Review', onClick: fn() }}
+        expanded={states.neutralExpanded}
+        onToggle={() => toggle('neutralExpanded')}
+      />
+      <CriticalBanner
+        sentiment="success"
+        title="Success — expanded"
+        description="Your account has been restored."
+        action={{ label: 'Continue', onClick: fn() }}
+        expanded={states.successExpanded}
+        onToggle={() => toggle('successExpanded')}
+      />
+      <CriticalBanner
+        sentiment="negative"
+        description={longDescription}
+        action={{ label: 'Verify now', onClick: fn() }}
+        expanded={states.noTitle}
+        onToggle={() => toggle('noTitle')}
+      />
+      <CriticalBanner
+        sentiment="warning"
+        title="With custom media"
+        description="Re-link your bank account to continue receiving transfers."
+        media={{ avatar: { asset: <Bank title="Bank account" /> } }}
+        action={{ label: 'Connect bank', onClick: fn() }}
+        expanded={states.withMedia}
+        onToggle={() => toggle('withMedia')}
+      />
+      <CriticalBanner
+        sentiment="negative"
+        title="Both actions"
+        description="We've blocked your account due to unusual activity."
+        action={{ label: 'Verify now', onClick: fn() }}
+        actionSecondary={{ label: 'Contact support', onClick: fn() }}
+        expanded={states.withBothActions}
+        onToggle={() => toggle('withBothActions')}
+      />
+    </div>
+  );
+}
+
+/**
+ * All four sentiments in both expanded and collapsed states, with and without
+ * title, media variants, and action combinations. Used for Chromatic visual
+ * regression across default, dark, bright-green, and forest-green themes.
+ */
+export const Variants: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+/** Mobile viewport regression test with all variants. */
+export const MobileVariants: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['mobile']),
+};
+
+/**
+ * Tests keyboard navigation and interaction:
+ * - Tab focuses the first chevron toggle button
+ * - Enter toggles expanded/collapsed state
+ * - Tab moves focus to the action button (when expanded)
+ * - Tab moves to the next banner's toggle
+ */
+export const KeyboardInteraction: Story = {
+  render: function Render() {
+    const [expanded1, setExpanded1] = useState(true);
+    const [expanded2, setExpanded2] = useState(false);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+        <CriticalBanner
+          sentiment="negative"
+          title="First banner"
+          description="This banner starts expanded."
+          action={{ label: 'Verify now', onClick: fn() }}
+          expanded={expanded1}
+          onToggle={() => setExpanded1(!expanded1)}
+        />
+        <CriticalBanner
+          sentiment="warning"
+          title="Second banner"
+          description="This banner starts collapsed."
+          action={{ label: 'Take action', onClick: fn() }}
+          expanded={expanded2}
+          onToggle={() => setExpanded2(!expanded2)}
+        />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the collapse button to appear (viewport change needs time to apply)
+    const collapseBtn = await canvas.findByRole('button', { name: /^collapse$/i });
+
+    // Tab to first toggle (Collapse button since first banner is expanded)
+    await userEvent.tab();
+    await expect(collapseBtn).toHaveFocus();
+
+    // Space collapses the first banner
+    await userEvent.keyboard(' ');
+    await wait(ANIMATION_DURATION);
+
+    // After collapsing, the button label changes to "Expand"
+    await waitFor(async () => {
+      const expandBtns = canvas.getAllByRole('button', { name: /^expand$/i });
+      await expect(expandBtns).toHaveLength(2);
+      await expect(expandBtns[0]).toHaveFocus();
+    });
+
+    await userEvent.tab();
+    await waitFor(async () => {
+      const expandBtns = canvas.getAllByRole('button', { name: /^expand$/i });
+      await expect(expandBtns[1]).toHaveFocus();
+    });
+
+    // Space expands the second banner
+    await userEvent.keyboard(' ');
+    await wait(ANIMATION_DURATION);
+
+    // Now the second banner has a Collapse button and it should have focus
+    await waitFor(async () => {
+      const secondCollapse = canvas.getByRole('button', { name: /^collapse$/i });
+      await expect(secondCollapse).toHaveFocus();
+    });
+
+    // Tab to the second banner's action button (now visible)
+    await userEvent.tab();
+
+    await waitFor(async () => {
+      const actionBtn = canvas.getByRole('button', { name: /^take action$/i });
+      await expect(actionBtn).toHaveFocus();
+    });
+  },
+  ...withVariantConfig(['mobile']),
+  parameters: {
+    ...withVariantConfig(['mobile']).parameters,
+    viewport: {
+      defaultViewport: 'mobile2',
+    },
+  },
+};
+
+/**
+ * CriticalBanner uses `aria-live="assertive"` to immediately announce content to screen readers.
+ * Toggle the banner on/off and expand/collapse to hear how announcements change.
+ */
+export const LiveRegionAnnouncements: Story = {
+  render: function Render() {
+    const [visible, setVisible] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+        <div>
+          <Button v2 onClick={() => setVisible(!visible)}>
+            {visible ? 'Hide banner' : 'Show banner'}
+          </Button>
+        </div>
+        {visible && (
+          <CriticalBanner
+            sentiment="negative"
+            title="Your account requires verification"
+            description="Please verify your identity to continue using all features."
+            action={{ label: 'Verify now', onClick: fn() }}
+            actionSecondary={{ label: 'Learn more', onClick: fn() }}
+            expanded={expanded}
+            onToggle={() => setExpanded(!expanded)}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+/** Right-to-left layout regression test. */
+export const RTL: Story = {
+  render: function Render() {
+    const [expanded, setExpanded] = useState(true);
+    const [collapsed, setCollapsed] = useState(false);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+        <CriticalBanner
+          sentiment="negative"
+          title="Your account requires verification"
+          description="Please verify your identity to continue using all features."
+          action={{ label: 'Verify now', onClick: fn() }}
+          actionSecondary={{ label: 'Learn more', onClick: fn() }}
+          expanded={expanded}
+          onToggle={() => setExpanded(!expanded)}
+        />
+        <CriticalBanner
+          sentiment="warning"
+          title="Collapsed state"
+          description="This banner is collapsed."
+          action={{ label: 'Take action', onClick: fn() }}
+          expanded={collapsed}
+          onToggle={() => setCollapsed(!collapsed)}
+        />
+      </div>
+    );
+  },
+  ...withVariantConfig(['rtl']),
+};
+
+/** 400% zoom regression test with all variants. */
+export const Zoom400: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['400%']),
+};
+
+/**
+ * Desktop force-expand test: verifies that banner is always expanded
+ * when container width >= 768px, regardless of expanded prop value.
+ */
+export const DesktopForceExpand: Story = {
+  render: function Render() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+        <CriticalBanner
+          sentiment="negative"
+          title="Banner without expanded"
+          description="On desktop (width >= 768px), this banner should still be fully expanded even though expanded prop is not set. The toggle button should also be hidden."
+          action={{ label: 'Verify now', onClick: fn() }}
+          actionSecondary={{ label: 'Learn more', onClick: fn() }}
+          expanded={false}
+          onToggle={fn()}
+        />
+        <CriticalBanner
+          sentiment="warning"
+          title="Banner with expanded=true"
+          description="This banner has expanded=true, so it should be expanded on both mobile and desktop."
+          action={{ label: 'Take action', onClick: fn() }}
+          expanded
+          onToggle={fn()}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Multi-line title animation test: verifies that animations work correctly
+ * even when the title wraps to multiple lines on mobile.
+ */
+export const MultiLineTitleAnimation: Story = {
+  render: function Render() {
+    const [expanded, setExpanded] = useState(true);
+
+    return (
+      <CriticalBanner
+        sentiment="negative"
+        title="This is a very long title that will definitely wrap to multiple lines on mobile devices and should not break the animation at all"
+        description="The description should animate smoothly even with a multi-line title. This was the main issue with PR #4091 that prevented it from being merged."
+        action={{ label: 'Verify now', onClick: fn() }}
+        actionSecondary={{ label: 'Learn more', onClick: fn() }}
+        expanded={expanded}
+        onToggle={() => setExpanded(!expanded)}
+      />
+    );
+  },
+  ...withVariantConfig(['mobile']),
+};
+
+/**
+ * Internal state management test: verifies that the banner can manage its own
+ * expanded state when onToggle is not provided (uncontrolled mode).
+ */
+export const UncontrolledState: Story = {
+  render: function Render() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+        <CriticalBanner
+          sentiment="negative"
+          title="Uncontrolled banner (no onToggle)"
+          description="This banner manages its own state internally. Click the toggle to expand/collapse. The state is maintained by the component itself."
+          action={{ label: 'Verify now', onClick: fn() }}
+          actionSecondary={{ label: 'Learn more', onClick: fn() }}
+        />
+        <CriticalBanner
+          sentiment="warning"
+          title="Uncontrolled banner starting collapsed"
+          description="This banner also manages its own state, but starts collapsed."
+          action={{ label: 'Take action', onClick: fn() }}
+          expanded={false}
+        />
+      </div>
+    );
+  },
+  ...withVariantConfig(['mobile']),
+};
+
+/**
+ * Tests that clicking the toggle button works correctly in uncontrolled mode.
+ * Verifies that the banner can expand/collapse without external state management.
+ */
+export const UncontrolledStateInteraction: Story = {
+  render: function Render() {
+    return (
+      <CriticalBanner
+        sentiment="negative"
+        title="Click the toggle to test"
+        description="This banner manages its own expanded state. The toggle button should work without any external state management."
+        action={{ label: 'Verify now', onClick: fn() }}
+        actionSecondary={{ label: 'Learn more', onClick: fn() }}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the collapse button to appear
+    const collapseBtn = await canvas.findByRole('button', { name: /^collapse$/i });
+
+    // Click to collapse
+    await userEvent.click(collapseBtn);
+    await wait(ANIMATION_DURATION);
+
+    // After collapsing, the button label changes to "Expand"
+    const expandBtn = canvas.getByRole('button', { name: /^expand$/i });
+    await expect(expandBtn).toBeInTheDocument();
+
+    // Click to expand again
+    await userEvent.click(expandBtn);
+    await wait(ANIMATION_DURATION);
+
+    // Should be back to "Collapse"
+    const collapseBtnAgain = canvas.getByRole('button', { name: /^collapse$/i });
+    await expect(collapseBtnAgain).toBeInTheDocument();
+  },
+  ...withVariantConfig(['mobile']),
+  parameters: {
+    ...withVariantConfig(['mobile']).parameters,
+    viewport: {
+      defaultViewport: 'mobile2',
+    },
+  },
+};

package/src/prompt/CriticalBanner/CriticalBanner.tsx

@@ -0,0 +1,179 @@
+import { ReactNode, useId, useState } from 'react';
+import { clsx } from 'clsx';
+
+import Body from '../../body';
+import Button from '../../button';
+import { Breakpoint, LiveRegion, Typography } from '../../common';
+import { ButtonProps } from '../../button/Button.types';
+import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
+
+import { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';
+import { ExpanderToggle } from '../common/Expander/Expander';
+import { buildAnnouncementString } from './helpers';
+import { useContainerSize } from '../../common/hooks/useContainerSize';
+
+export type CriticalBannerProps = {
+  title?: ReactNode;
+  description: ReactNode;
+  media?: PromptMedia;
+  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    label: ButtonProps['children'];
+  };
+  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    label: ButtonProps['children'];
+  };
+  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;
+  /**
+   * Controls whether the description and actions are visible, as a controlled component.
+   * When collapsed with a title, only the title is shown.
+   * When collapsed without a title, the description is trimmed to 2 lines.
+   *
+   * Note: On desktop (container width >= 768px), the banner is always expanded
+   * regardless of this prop value.
+   */
+  expanded?: boolean;
+  /**
+   * Called when the user clicks the chevron toggle.
+   * If not provided, the component will manage expanded state internally.
+   */
+  onToggle?: () => void;
+} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;
+
+/**
+ * A full-width, non-dismissible banner for critical messages such as account blocks or
+ * time-sensitive actions that require immediate user attention.
+
+ * @see {@link https://wise.design/components/critical-banner Design Spec}
+ */
+export const CriticalBanner = ({
+  sentiment = 'negative',
+  title,
+  description,
+  media = {},
+  action,
+  actionSecondary,
+  expanded: expandedProp,
+  onToggle,
+  id,
+  className,
+  'data-testid': testId,
+}: CriticalBannerProps) => {
+  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);
+  const isControlled = expandedProp !== undefined && onToggle !== undefined;
+  const [internalExpanded, setInternalExpanded] = useState(true);
+  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;
+  const handleToggle = isControlled
+    ? onToggle
+    : () => setInternalExpanded((previousExpanded) => !previousExpanded);
+  const hasActions = action ?? actionSecondary;
+  const mediaId = useId();
+  const titleId = useId();
+  const descId = useId();
+
+  const ariaLabelledByIds = [
+    media['aria-hidden'] ? undefined : mediaId,
+    !title ? undefined : titleId,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <LiveRegion
+      aria-live="assertive"
+      announceOnChange={buildAnnouncementString({
+        title,
+        description,
+        expanded: resolvedExpanded,
+        actionLabel: action?.label,
+        actionSecondaryLabel: actionSecondary?.label,
+      })}
+    >
+      <PrimitivePrompt
+        ref={containerRef}
+        id={id}
+        sentiment={sentiment}
+        emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}
+        data-testid={testId}
+        className={clsx(
+          'wds-critical-banner',
+          {
+            'wds-critical-banner--collapsed': !resolvedExpanded,
+            'wds-critical-banner--with-two-actions': !!actionSecondary,
+          },
+          className,
+        )}
+        media={renderPromptMedia({
+          media,
+          sentiment,
+          mediaId,
+          imgClassName: 'wds-critical-banner--media-image',
+        })}
+        actions={
+          hasActions ? (
+            <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>
+              {actionSecondary && (
+                // @ts-expect-error onClick type mismatch
+                <Button
+                  v2
+                  size="md"
+                  priority="secondary"
+                  href={actionSecondary.href}
+                  tabIndex={resolvedExpanded ? undefined : -1}
+                  onClick={actionSecondary?.onClick}
+                >
+                  {actionSecondary.label}
+                </Button>
+              )}
+              {action && (
+                // @ts-expect-error onClick type mismatch
+                <Button
+                  v2
+                  size="md"
+                  priority="primary"
+                  href={action.href}
+                  tabIndex={resolvedExpanded ? undefined : -1}
+                  onClick={action.onClick}
+                >
+                  {action.label}
+                </Button>
+              )}
+            </div>
+          ) : undefined
+        }
+        role="region"
+        aria-labelledby={ariaLabelledByIds || undefined}
+        aria-describedby={description ? descId : undefined}
+      >
+        <div className="wds-critical-banner__text-wrapper">
+          {title && (
+            <Body
+              id={titleId}
+              type={Typography.BODY_LARGE_BOLD}
+              className="wds-critical-banner__content wds-critical-banner__title"
+            >
+              {title}
+            </Body>
+          )}
+          {description && (
+            <Body
+              id={descId}
+              className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {
+                'wds-critical-banner__description--with-title': !!title,
+              })}
+            >
+              {description}
+            </Body>
+          )}
+        </div>
+        <ExpanderToggle
+          expanded={resolvedExpanded}
+          size={24}
+          className="wds-critical-banner__toggle"
+          onToggle={handleToggle}
+        />
+      </PrimitivePrompt>
+    </LiveRegion>
+  );
+};
+
+export default CriticalBanner;

package/src/prompt/CriticalBanner/CriticalBanner.vars.less

@@ -0,0 +1,6 @@
+// CriticalBanner has 2 layout modes managed through container queries:
+// * buttons are full width below action-wrapper-max token
+// * collapse toggle is visible below collapsible-max token
+// At some point in the not too distant future hopefully these two value will be the same but because of launchpad quirks, for now they'll be different
+@wds-critical-banner-action-wrapper-max: 600px;
+@wds-critical-banner-collapsible-max: 768px;

package/src/prompt/CriticalBanner/helpers.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+
+/**
+ * Helper to extract string from ReactNode for announcements.
+ * Complex ReactNodes (JSX elements) return empty string.
+ */
+export const getStringValue = (node: ReactNode): string => {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+  return '';
+};
+
+/**
+ * Builds the announcement string from visible content only.
+ * Content visibility depends on expanded state and presence of title.
+ */
+export const buildAnnouncementString = ({
+  title,
+  description,
+  expanded,
+  actionLabel,
+  actionSecondaryLabel,
+}: {
+  title?: ReactNode;
+  description?: ReactNode;
+  expanded: boolean;
+  actionLabel?: ReactNode;
+  actionSecondaryLabel?: ReactNode;
+}): string => {
+  return [
+    title ? getStringValue(title) : undefined,
+    description && (expanded || !title) ? getStringValue(description) : undefined,
+    expanded && actionLabel ? getStringValue(actionLabel) : undefined,
+    expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined,
+  ]
+    .filter(Boolean)
+    .join('|');
+};

package/src/prompt/CriticalBanner/index.ts

@@ -0,0 +1,2 @@
+export type { CriticalBannerProps } from './CriticalBanner';
+export { CriticalBanner } from './CriticalBanner';

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -31,3 +31,27 @@
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;
 }
+@media (max-width: 320px) {
+  .wds-info-prompt .wds-prompt__media-wrapper {
+    padding-top: 4px;
+    padding-top: var(--size-4);
+  }
+}
+@media (max-width: 320px) {
+  .wds-info-prompt .wds-prompt__media-wrapper:has(.wds-info-prompt__media > .tw-icon) {
+    padding-top: 8px;
+    padding-top: var(--size-8);
+  }
+}
+@media (max-width: 320px) {
+  .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child) {
+    padding-top: 8px;
+    padding-top: var(--size-8);
+  }
+}
+@media (max-width: 320px) {
+  .wds-info-prompt .wds-prompt__media-wrapper:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child):has(.wds-info-prompt__media > .tw-icon) {
+    padding-top: 12px;
+    padding-top: var(--size-12);
+  }
+}