@transferwise/components 46.147.0 → 46.148.1

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

@@ -1,11 +1,14 @@
-import { useState, useEffect, useRef, type ReactNode } from 'react';
+import { useState, useEffect, useMemo, useRef, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Bank, Briefcase, Star, Travel } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../../button';
 import { CriticalBanner, type CriticalBannerProps } from './CriticalBanner';
-import { withVariantConfig } from '../../../.storybook/helpers';
 
 /**
  * **Design guidance**: <a href="https://docs.wise.design/components/critical-banner" target="_blank">wise.design/components/critical-banner</a>
@@ -16,7 +19,7 @@ const meta = {
   component: CriticalBanner,
   title: 'Prompts/CriticalBanner',
   tags: ['new'],
-  parameters: { docs: { toc: true } },
+  parameters: { docs: { toc: true }, padding: '0', },
   args: {
     title: 'Your account requires verification',
     description: 'Please verify your identity to continue using all features.',
@@ -120,6 +123,43 @@ const previewArgTypes = {
   },
 } as const;
 
+const hiddenArgTypes = {
+  sentiment: { table: { disable: true } },
+  title: { table: { disable: true } },
+  description: { table: { disable: true } },
+  action: { table: { disable: true } },
+  actionSecondary: { table: { disable: true } },
+  media: { table: { disable: true } },
+  expanded: { table: { disable: true } },
+  onToggle: { table: { disable: true } },
+  id: { table: { disable: true } },
+  className: { table: { disable: true } },
+  'data-testid': { table: { disable: true } },
+} as const;
+
+const AnimatedEntryPreview = (args: CriticalBannerProps) => {
+  const { id = 'animated-entry' } = args;
+  const [bannerInstance, setBannerInstance] = useState(0);
+  const animatedBanner = useMemo(
+    () => ({
+      ...args,
+      id: `${id}-${bannerInstance}`,
+    }),
+    [args, bannerInstance, id],
+  );
+
+  return (
+    <>
+      <CriticalBanner key={animatedBanner.id} {...animatedBanner} />
+      <div className="p-t-3">
+        <Button block v2 onClick={() => setBannerInstance((current) => current + 1)}>
+          Replay
+        </Button>
+      </div>
+    </>
+  );
+};
+
 /** Renders children inside an iframe that inherits the parent page's stylesheets. */
 function IframeContainer({ width, children }: { width: number; children: ReactNode }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -132,25 +172,11 @@ function IframeContainer({ width, children }: { width: number; children: ReactNo
     const doc = iframe.contentDocument;
     if (!doc) return;
 
-    doc.head.innerHTML = '';
-    Array.from(document.styleSheets).forEach((sheet) => {
-      try {
-        if (sheet.href) {
-          const link = doc.createElement('link');
-          link.rel = 'stylesheet';
-          link.href = sheet.href;
-          doc.head.appendChild(link);
-        } else if (sheet.cssRules) {
-          const style = doc.createElement('style');
-          style.textContent = Array.from(sheet.cssRules)
-            .map((r) => r.cssText)
-            .join('\n');
-          doc.head.appendChild(style);
-        }
-      } catch {
-        // Skip cross-origin sheets
-      }
-    });
+    doc.head.replaceChildren(
+      ...Array.from(document.head.querySelectorAll('link[rel="stylesheet"], style')).map((node) =>
+        node.cloneNode(true),
+      ),
+    );
 
     doc.body.style.margin = '0';
     setMountNode(doc.body);
@@ -174,18 +200,20 @@ function IframeContainer({ width, children }: { width: number; children: ReactNo
   );
 }
 
-const ContainerDecorator: Decorator = (Story) => (
-  <div
-    style={{
-      width: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '1rem',
-    }}
-  >
-    <Story />
-  </div>
-);
+const ContainerDecorator =
+  (gap = '1rem'): Decorator =>
+  (Story) => (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap,
+      }}
+    >
+      <Story />
+    </div>
+  );
 
 /**
  * Interactive playground with all controls.
@@ -220,11 +248,31 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [expanded, setExpanded] = React.useState(true);
+
+  return (
+    <CriticalBanner
+      sentiment="negative"
+      title="Your account requires verification"
+      description="Please verify your identity to continue using all features."
+      action={{ label: 'Verify now', onClick: () => console.log('verify') }}
+      actionSecondary={{ label: 'Learn more', onClick: () => console.log('learn more') }}
+      media={{ avatar: { asset: <Bank /> } }}
+      expanded={expanded}
+      onToggle={() => setExpanded((prev) => !prev)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 /**
  * There are four sentiments, with negative being the default.
  */
 export const Sentiments: Story = {
-  decorators: [ContainerDecorator],
+  decorators: [ContainerDecorator('2rem')],
   parameters: {
     docs: {
       source: {
@@ -235,19 +283,7 @@ export const Sentiments: Story = {
       },
     },
   },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
+  argTypes: hiddenArgTypes,
   render: function Render() {
     return (
       <>
@@ -270,7 +306,7 @@ export const Sentiments: Story = {
  * Banners can have just a primary action, both primary and secondary, or no actions at all.
  */
 export const Actions: Story = {
-  decorators: [ContainerDecorator],
+  decorators: [ContainerDecorator('2rem')],
   parameters: {
     docs: {
       source: {
@@ -288,19 +324,7 @@ export const Actions: Story = {
       },
     },
   },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
+  argTypes: hiddenArgTypes,
   render: function Render() {
     return (
       <>
@@ -327,7 +351,7 @@ export const Actions: Story = {
  * Each sentiment has a default status icon. Override it with a custom image or an AvatarView.
  */
 export const MediaTypes: Story = {
-  decorators: [ContainerDecorator],
+  decorators: [ContainerDecorator('2rem')],
   parameters: {
     docs: {
       source: {
@@ -351,19 +375,7 @@ export const MediaTypes: Story = {
       },
     },
   },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
+  argTypes: hiddenArgTypes,
   render: function Render() {
     const [expandedStates, setExpandedStates] = useState<Record<string, boolean>>({
       default: true,
@@ -445,6 +457,31 @@ export const MediaTypes: Story = {
  * When the banner is shown on wider screens, it will always be fully expanded.
  */
 export const Expanded: Story = {
+  argTypes: hiddenArgTypes,
+  render: function Render() {
+    const [expanded, setExpanded] = useState(true);
+
+    return (
+      <>
+        <div className="p-b-3">
+          <Button v2 onClick={() => setExpanded(!expanded)}>
+            {expanded ? 'Collapse externally' : 'Expand externally'}
+          </Button>
+        </div>
+        <IframeContainer width={350}>
+          <CriticalBanner
+            sentiment="negative"
+            title="Your account requires verification"
+            description="Please verify your identity to continue using all features. This process typically takes 2–3 minutes."
+            action={{ label: 'Verify now', onClick: fn() }}
+            actionSecondary={{ label: 'Learn more', onClick: fn() }}
+            expanded={expanded}
+            onToggle={() => setExpanded(!expanded)}
+          />
+        </IframeContainer>
+      </>
+    );
+  },
   parameters: {
     docs: {
       source: {
@@ -462,41 +499,6 @@ export const Expanded: Story = {
       },
     },
   },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
-  render: function Render() {
-    const [expanded, setExpanded] = useState(true);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
-        <div>
-          <Button v2 onClick={() => setExpanded(!expanded)}>
-            {expanded ? 'Collapse externally' : 'Expand externally'}
-          </Button>
-        </div>
-        <CriticalBanner
-          sentiment="negative"
-          title="Your account requires verification"
-          description="Please verify your identity to continue using all features. This process typically takes 2–3 minutes."
-          action={{ label: 'Verify now', onClick: fn() }}
-          actionSecondary={{ label: 'Learn more', onClick: fn() }}
-          expanded={expanded}
-          onToggle={() => setExpanded(!expanded)}
-        />
-      </div>
-    );
-  },
 };
 
 /**
@@ -504,27 +506,15 @@ export const Expanded: Story = {
  * is clamped to 2 lines. With a title, only the title is shown when collapsed.
  */
 export const CollapsedBehaviour: Story = {
-  decorators: [ContainerDecorator],
+  decorators: [ContainerDecorator()],
 
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
+  argTypes: hiddenArgTypes,
   render: function Render() {
     const [expanded1, setExpanded1] = useState(false);
     const [expanded2, setExpanded2] = useState(false);
 
     return (
-      <>
+      <IframeContainer width={650}>
         <CriticalBanner
           sentiment="negative"
           title="Collapsed with title"
@@ -534,22 +524,21 @@ export const CollapsedBehaviour: Story = {
           onToggle={() => setExpanded1(!expanded1)}
         />
         <CriticalBanner
+          className="m-t-3"
           sentiment="warning"
           description="When there is no title, the description stays visible but is clamped to a maximum of two lines. This ensures the user always sees some context even in the collapsed state, because there is no title to summarise the message."
           action={{ label: 'Take action', onClick: fn() }}
           expanded={expanded2}
           onToggle={() => setExpanded2(!expanded2)}
         />
-      </>
+      </IframeContainer>
     );
   },
-  ...withVariantConfig(['mobile'], {
-    parameters: {
-      docs: {
-        canvas: { sourceState: 'hidden' },
-      },
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'hidden' },
     },
-  }),
+  },
 };
 
 /**
@@ -563,27 +552,15 @@ export const Responsiveness: Story = {
       canvas: { sourceState: 'hidden' },
     },
   },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
+  argTypes: hiddenArgTypes,
   render: function Render() {
     return (
-      <div style={{ display: 'flex', gap: 16, alignItems: 'start', minWidth: 1500 }}>
-        {[200, 350, 600].map((width) => (
+      <div style={{ display: 'flex', gap: 16, alignItems: 'start', minWidth: 1700 }}>
+        {[200, 350, 800].map((width) => (
           <IframeContainer key={width} width={width}>
             <CriticalBanner
               sentiment="warning"
-              title="Your account requires verification"
+              title={`At ${width}px the buttons are ${width === 200 ? 'stacked' : width === 350 ? 'full-width' : 'left-aligned'}`}
               description="Please verify your identity to continue using all features."
               action={{ label: 'Verify now', onClick: fn() }}
               actionSecondary={{ label: 'Learn more', onClick: fn() }}
@@ -595,6 +572,50 @@ export const Responsiveness: Story = {
   },
 };
 
+/**
+ * Mobile viewport regression test for the overhang.
+ * The overhang is always applied below 600px.
+ */
+export const MobileOverhang: Story = {
+  argTypes: hiddenArgTypes,
+  render: function Render() {
+    return (
+      <div style={{ width: 350 }}>
+        <CriticalBanner
+          sentiment="negative"
+          title="Your account requires verification"
+          description="Please verify your identity to continue using all features."
+          action={{ label: 'Verify now', onClick: fn() }}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'hidden' },
+    },
+  },
+};
+
+/**
+ * Mobile-only entry animation: the banner reveals from above.
+ */
+export const AnimatedEntry: Story = {
+  args: {
+    title: 'Your account is restricted.',
+    description: 'Review your personal details to get your account active again.',
+    action: { label: 'Review details', onClick: fn() },
+  },
+  argTypes: hiddenArgTypes,
+  render: (args) => <AnimatedEntryPreview {...args} />,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      canvas: { sourceState: 'hidden' },
+    },
+  },
+};
+
 /**
  * The text container is capped at 480px for optimal readability, even though
  * the banner itself stretches to the full available width.
@@ -605,31 +626,21 @@ export const ParagraphWidth: Story = {
       canvas: { sourceState: 'hidden' },
     },
   },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
+  argTypes: hiddenArgTypes,
   render: function Render() {
     const [expanded, setExpanded] = useState(true);
 
     return (
-      <CriticalBanner
-        sentiment="negative"
-        title="The text container is capped at 480px for optimal readability, even though the banner itself stretches to the full available width."
-        description="To restore access, you'll need to verify your identity. This involves confirming your personal details and uploading a valid government-issued ID. The process typically takes 2–3 minutes, and your account will be restored immediately after successful verification."
-        action={{ label: 'Verify now', onClick: fn() }}
-        expanded={expanded}
-        onToggle={() => setExpanded(!expanded)}
-      />
+      <IframeContainer width={1000}>
+        <CriticalBanner
+          sentiment="negative"
+          title="The text container is capped at 480px for optimal readability, even though the banner itself stretches to the full available width."
+          description="To restore access, you'll need to verify your identity. This involves confirming your personal details and uploading a valid government-issued ID. The process typically takes 2–3 minutes, and your account will be restored immediately after successful verification."
+          action={{ label: 'Verify now', onClick: fn() }}
+          expanded={expanded}
+          onToggle={() => setExpanded(!expanded)}
+        />
+      </IframeContainer>
     );
   },
 };

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

@@ -25,7 +25,7 @@ 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() {
+function AllVariants({ gap = '1rem' }: { gap?: string }) {
   const [states, setStates] = useState({
     negativeExpanded: true,
     negativeCollapsed: false,
@@ -42,7 +42,7 @@ function AllVariants() {
     setStates((prev) => ({ ...prev, [key]: !prev[key] }));
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap, width: '100%' }}>
       <CriticalBanner
         sentiment="negative"
         title="Negative — expanded"
@@ -133,10 +133,29 @@ export const Variants: Story = {
 
 /** Mobile viewport regression test with all variants. */
 export const MobileVariants: Story = {
-  render: () => <AllVariants />,
+  render: () => <AllVariants gap="2rem" />,
   ...withVariantConfig(['mobile']),
 };
 
+/** Mobile entry animation visual regression test. */
+export const AnimatedEntryMobile: Story = {
+  render: function Render() {
+    return (
+      <CriticalBanner
+        sentiment="negative"
+        title="Your account is restricted."
+        description="Review your personal details to get your account active again."
+        action={{ label: 'Review details', onClick: fn() }}
+      />
+    );
+  },
+  ...withVariantConfig(['mobile'], {
+    parameters: {
+      chromatic: { pauseAnimationAtEnd: true },
+    },
+  }),
+};
+
 /**
  * Tests keyboard navigation and interaction:
  * - Tab focuses the first chevron toggle button
@@ -150,7 +169,7 @@ export const KeyboardInteraction: Story = {
     const [expanded2, setExpanded2] = useState(false);
 
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '100%' }}>
         <CriticalBanner
           sentiment="negative"
           title="First banner"
@@ -289,7 +308,7 @@ export const RTL: Story = {
 
 /** 400% zoom regression test with all variants. */
 export const Zoom400: Story = {
-  render: () => <AllVariants />,
+  render: () => <AllVariants gap="2rem" />,
   ...withVariantConfig(['400%']),
 };
 
@@ -353,7 +372,7 @@ export const MultiLineTitleAnimation: Story = {
 export const UncontrolledState: Story = {
   render: function Render() {
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '100%' }}>
         <CriticalBanner
           sentiment="negative"
           title="Uncontrolled banner (no onToggle)"

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

@@ -0,0 +1,37 @@
+/* eslint-disable testing-library/no-container */
+import { mockMatchMedia, mockResizeObserver, render, screen } from '../../test-utils';
+import { resetLiveRegionAnnouncementQueue } from '../../common/liveRegion/LiveRegion';
+import { CriticalBanner, CriticalBannerProps } from './CriticalBanner';
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('CriticalBanner', () => {
+  const defaultProps: CriticalBannerProps = {
+    description: 'Please verify your identity to continue using all features.',
+  };
+
+  beforeEach(() => {
+    resetLiveRegionAnnouncementQueue();
+  });
+
+  it('applies mobile overhang classes by default', () => {
+    const { container } = render(
+      <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
+    );
+
+    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner-overhang')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner-overhang-query')).toBeInTheDocument();
+  });
+
+  it('wraps the banner in the css entry animation structure', () => {
+    const { container } = render(
+      <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
+    );
+
+    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-mask')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-track')).toBeInTheDocument();
+  });
+});