@transferwise/components 0.0.0-experimental-c7da7db → 0.0.0-experimental-b03ca75

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

@@ -0,0 +1,304 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, fn, userEvent, 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 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 = {
+  parameters: {
+    viewport: {
+      options: {
+        narrow: {
+          name: 'Narrow',
+          styles: { width: '350px', height: '600px' },
+          type: 'mobile',
+        },
+      },
+    },
+  },
+  globals: {
+    viewport: 'narrow',
+  },
+  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);
+
+    // Tab to first toggle (Collapse button since first banner is expanded)
+    await userEvent.tab();
+    await wait(400);
+    const collapseBtn = canvas.getByRole('button', { name: /^collapse$/i });
+    await expect(collapseBtn).toHaveFocus();
+
+    // Enter collapses the first banner
+    await userEvent.keyboard(' ');
+    await wait(400);
+
+    // After collapsing, the button label changes to "Expand"
+    const expandBtns = canvas.getAllByRole('button', { name: /^expand$/i });
+    await expect(expandBtns).toHaveLength(2);
+
+    // Tab to the action button — but since banner is now collapsed, actions are hidden.
+    // So tab goes to the next banner's toggle (Expand).
+    await userEvent.tab();
+    await wait(400);
+    await expect(expandBtns[1]).toHaveFocus();
+
+    // Space expands the second banner
+    await userEvent.keyboard(' ');
+    await wait(400);
+
+    // Now the second banner has a Collapse button
+    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 wait(400);
+    const actionBtn = canvas.getByRole('button', { name: /^take action$/i });
+    await expect(actionBtn).toHaveFocus();
+  },
+};
+
+/**
+ * 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 />,
+  parameters: {
+    viewport: {
+      options: {
+        zoom400: {
+          name: '400% Zoom',
+          styles: { width: '200px', height: '1000px' },
+          type: 'mobile',
+        },
+      },
+    },
+  },
+  globals: {
+    viewport: 'zoom400',
+  },
+};

package/src/prompt/CriticalBanner/CriticalBanner.tsx

@@ -0,0 +1,194 @@
+import { AriaAttributes, ReactNode, useId } 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 { useScreenSize } from '../../common/hooks/useScreenSize';
+
+import { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';
+import { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander';
+import { buildAnnouncementString } from './helpers';
+
+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.
+   * When collapsed with a title, only the title is shown.
+   * When collapsed without a title, the description is trimmed to 2 lines.
+   */
+  expanded?: boolean;
+  /** Called when the user clicks the chevron toggle. */
+  onToggle?: () => void;
+  /**
+   * Overrides the default labelling derived from `title` and `description`.
+   *
+   * **NB:** When provided, the default `aria-labelledby` / `aria-describedby`
+   * attributes are removed — include all necessary context in the label.
+   */
+  'aria-label'?: AriaAttributes['aria-label'];
+} & 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 = true,
+  onToggle,
+  id,
+  className,
+  'data-testid': testId,
+  'aria-label': ariaLabel,
+}: CriticalBannerProps) => {
+  const isMobile = !useScreenSize(Breakpoint.EXTRA_SMALL);
+  const resolvedExpanded = !isMobile || expanded;
+  const hasActions = action ?? actionSecondary;
+  const mediaId = useId();
+  const titleId = useId();
+  const descId = useId();
+
+  const ariaLabelledByIds = [
+    media['aria-hidden'] ? undefined : mediaId,
+    ariaLabel || !title ? undefined : titleId,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <LiveRegion
+      aria-live="assertive"
+      announceOnChange={buildAnnouncementString({
+        title,
+        description,
+        expanded: resolvedExpanded,
+        actionLabel: action?.label,
+        actionSecondaryLabel: actionSecondary?.label,
+      })}
+    >
+      <PrimitivePrompt
+        id={id}
+        sentiment={sentiment}
+        emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}
+        data-testid={testId}
+        className={clsx(
+          'wds-critical-banner',
+          {
+            'wds-critical-banner__mobile--collapsed': !resolvedExpanded,
+            'wds-critical-banner--with-two-actions': !!actionSecondary,
+          },
+          className,
+        )}
+        media={renderPromptMedia({
+          media,
+          sentiment,
+          mediaId,
+          imgClassName: 'wds-critical-banner--media-image',
+        })}
+        actions={
+          shouldShowWhenExpanded({ expanded: resolvedExpanded, hasContent: !!hasActions }) ? (
+            <>
+              {actionSecondary && (
+                // @ts-expect-error onClick type mismatch
+                <Button
+                  v2
+                  size="md"
+                  priority="secondary"
+                  href={actionSecondary.href}
+                  block={isMobile}
+                  onClick={actionSecondary?.onClick}
+                >
+                  {actionSecondary.label}
+                </Button>
+              )}
+              {action && (
+                // @ts-expect-error onClick type mismatch
+                <Button
+                  v2
+                  size="md"
+                  priority="primary"
+                  href={action.href}
+                  block={isMobile}
+                  onClick={action.onClick}
+                >
+                  {action.label}
+                </Button>
+              )}
+            </>
+          ) : undefined
+        }
+        role="region"
+        {...(ariaLabel
+          ? { 'aria-label': ariaLabel }
+          : {
+              'aria-labelledby': ariaLabelledByIds,
+              'aria-describedby': descId,
+            })}
+      >
+        <div
+          className={clsx(
+            'd-flex',
+            'flex-column',
+            'justify-content-center',
+            'wds-critical-banner__text-wrapper',
+          )}
+        >
+          {title && (
+            <Body
+              id={titleId}
+              type={Typography.BODY_LARGE_BOLD}
+              className={clsx('wds-critical-banner__content', {
+                'wds-critical-banner__title--collapsed': !resolvedExpanded,
+              })}
+            >
+              {title}
+            </Body>
+          )}
+          {shouldShowWhenExpanded({
+            expanded: resolvedExpanded,
+            hasContent: !!description,
+            alwaysShow: !title,
+          }) && (
+            <Body
+              id={descId}
+              className={clsx('wds-critical-banner__content', {
+                'wds-critical-banner__description--collapsed': !resolvedExpanded && !title,
+              })}
+            >
+              {description}
+            </Body>
+          )}
+        </div>
+        {isMobile && (
+          <ExpanderToggle
+            expanded={expanded}
+            size={24}
+            className="wds-critical-banner__toggle"
+            onToggle={onToggle}
+          />
+        )}
+      </PrimitivePrompt>
+    </LiveRegion>
+  );
+};
+
+export default CriticalBanner;

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/PrimitivePrompt/PrimitivePrompt.tsx

@@ -1,6 +1,6 @@
 import { Cross } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import SentimentSurface, { Sentiment } from '../../sentimentSurface';
+import SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';
 import IconButton from '../../iconButton';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../../common/closeButton/CloseButton.messages';
@@ -8,10 +8,15 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
   /**
-   * The sentiment determines the colour scheme
+   * The sentiment determines the colour scheme.
    * @default success
    */
   sentiment?: Sentiment;
+  /**
+   * The emphasis level affecting background and text contrast.
+   * @default 'base
+   */
+  emphasis?: Emphasis;
   /**
    * Media to be displayed on the prompt (icon/image/etc).
    */
@@ -35,6 +40,7 @@ export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
  * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
 export const PrimitivePrompt = ({
   sentiment = 'success',
+  emphasis = 'base',
   media,
   actions,
   onDismiss,
@@ -47,6 +53,7 @@ export const PrimitivePrompt = ({
   return (
     <SentimentSurface
       sentiment={sentiment}
+      emphasis={emphasis}
       className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
       {...restProps}
     >

package/src/prompt/common/Expander/Expander.css

@@ -0,0 +1,8 @@
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+.wds-expander-toggle--collapsed {
+  transform: rotate(180deg);
+}

package/src/prompt/common/Expander/Expander.less

@@ -0,0 +1,9 @@
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+
+  &--collapsed {
+    transform: rotate(180deg);
+  }
+}

package/src/prompt/common/Expander/Expander.messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  expandAriaLabel: {
+    id: 'neptune.Expander.expandAriaLabel',
+    defaultMessage: 'Expand',
+    description: 'Expand button for expander',
+  },
+  collapseAriaLabel: {
+    id: 'neptune.Expander.collapseAriaLabel',
+    defaultMessage: 'Collapse',
+    description: 'Collapse button for expander',
+  },
+});