@transferwise/components 0.0.0-experimental-f727c49 → 0.0.0-experimental-854d710

package/src/common/hooks/useContainerSize.test.tsx

@@ -0,0 +1,125 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { mockResizeObserver } from '../../test-utils/window-mock';
+
+import { useContainerSize } from './useContainerSize';
+
+mockResizeObserver();
+
+describe('useContainerSize', () => {
+  let resizeObserverCallback: ResizeObserverCallback | null = null;
+  const OriginalResizeObserver = global.ResizeObserver;
+
+  beforeEach(() => {
+    resizeObserverCallback = null;
+
+    // Capture the ResizeObserver callback for testing
+    global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
+      resizeObserverCallback = callback;
+      const instance = new OriginalResizeObserver(callback);
+      return instance;
+    }) as unknown as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    global.ResizeObserver = OriginalResizeObserver;
+  });
+
+  // Helper to create a test component
+  function TestComponent({
+    breakpoint,
+    onStateChange,
+  }: {
+    breakpoint: number;
+    onStateChange: (state: boolean) => void;
+  }) {
+    const [ref, isAboveBreakpoint] = useContainerSize(breakpoint);
+
+    // Call the callback whenever state changes
+    React.useEffect(() => {
+      onStateChange(isAboveBreakpoint);
+    }, [isAboveBreakpoint, onStateChange]);
+
+    return (
+      <div ref={ref} data-testid="container">
+        Test
+      </div>
+    );
+  }
+
+  // Helper to simulate container resize
+  function simulateResize(width: number, options?: { noBorderBoxSize?: boolean }) {
+    const container = screen.getByTestId('container');
+
+    act(() => {
+      if (resizeObserverCallback) {
+        const entry = {
+          target: container,
+          borderBoxSize: options?.noBorderBoxSize
+            ? undefined
+            : [{ inlineSize: width, blockSize: 100 }],
+          contentRect: {
+            width,
+            height: 100,
+            x: 0,
+            y: 0,
+            top: 0,
+            right: width,
+            bottom: 100,
+            left: 0,
+            toJSON: () => ({}),
+          },
+          contentBoxSize: [{ inlineSize: width, blockSize: 100 }],
+          devicePixelContentBoxSize: [{ inlineSize: width, blockSize: 100 }],
+        } as ResizeObserverEntry;
+
+        resizeObserverCallback([entry], {} as ResizeObserver);
+      }
+    });
+  }
+
+  it('returns initial state as false', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    // Initial call with false
+    expect(onStateChange).toHaveBeenCalledWith(false);
+  });
+
+  it('updates to true when container width is above breakpoint', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    simulateResize(600);
+    expect(onStateChange).toHaveBeenCalledWith(true);
+  });
+
+  it('remains false when container width is below breakpoint', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    simulateResize(400);
+    expect(onStateChange).toHaveBeenCalledWith(false);
+    expect(onStateChange).not.toHaveBeenCalledWith(true);
+  });
+
+  it('returns true when container width equals breakpoint', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    simulateResize(480);
+    expect(onStateChange).toHaveBeenCalledWith(true);
+  });
+
+  it('updates state when container crosses breakpoint from below to above', () => {
+    const onStateChange = jest.fn();
+    render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
+
+    simulateResize(400);
+    expect(onStateChange).toHaveBeenCalledWith(false);
+
+    simulateResize(600);
+    expect(onStateChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/common/hooks/useContainerSize.ts

@@ -0,0 +1,32 @@
+import { useRef, useState } from 'react';
+
+import { useResizeObserver } from './useResizeObserver';
+
+/**
+ * Hook that returns a ref and a boolean indicating if the container
+ * has a width >= the specified breakpoint.
+ *
+ * Useful for synchronizing React state with CSS container queries.
+ *
+ * Uses content-box measurements to match CSS container query behavior
+ * (excludes padding and border).
+ *
+ * @param breakpoint - Minimum width in pixels
+ * @returns [ref, isAboveBreakpoint] tuple
+ */
+export function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);
+
+  useResizeObserver(
+    ref,
+    (entry) => {
+      // Use contentRect.width to match CSS container query box model (content-box)
+      const inlineSize = entry.contentRect.width;
+      setIsAboveBreakpoint(inlineSize >= breakpoint);
+    },
+    'content-box',
+  );
+
+  return [ref, isAboveBreakpoint];
+}

package/src/common/hooks/useResizeObserver.ts

@@ -5,6 +5,7 @@ import { useEffectEvent } from './useEffectEvent';
 export function useResizeObserver(
   ref: React.MutableRefObject<Element | null>,
   callback: (entry: ResizeObserverEntry) => void,
+  box: ResizeObserverBoxOptions = 'border-box',
 ) {
   const handleCallback = useEffectEvent(callback);
   useEffect(() => {
@@ -12,11 +13,11 @@ export function useResizeObserver(
       const resizeObserver = new ResizeObserver(([entry]) => {
         handleCallback(entry);
       });
-      resizeObserver.observe(ref.current, { box: 'border-box' });
+      resizeObserver.observe(ref.current, { box });
       return () => {
         resizeObserver.disconnect();
       };
     }
     return () => {};
-  }, [handleCallback, ref]);
+  }, [handleCallback, ref, box]);
 }

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,9 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CriticalCommsBanner from '.';
 
+/**
+ * @deprecated Use **`CriticalBanner`** component instead.
+ */
 export default {
   component: CriticalCommsBanner,
   title: 'Prompts/CriticalCommsBanner',
+  tags: ['deprecated'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 type Story = StoryObj<typeof CriticalCommsBanner>;

package/src/criticalBanner/CriticalCommsBanner.test.story.tsx

@@ -6,7 +6,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
 export default {
   component: CriticalCommsBanner,
   title: 'Prompts/CriticalCommsBanner/Tests',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'deprecated'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 type Story = StoryObj<typeof CriticalCommsBanner>;

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -51,6 +51,9 @@ const iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {
   ),
 };
 
+/**
+ * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.
+ */
 function CriticalCommsBanner({
   title,
   subtitle,

package/src/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.Expander.collapseAriaLabel": "Collapse",
+  "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",

package/src/index.ts

@@ -36,7 +36,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps, ActionPromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps, CriticalBannerProps } from './prompt';
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
@@ -175,7 +175,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InfoPrompt, InlinePrompt, ActionPrompt } from './prompt';
+export { InfoPrompt, InlinePrompt, ActionPrompt, CriticalBanner } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';

package/src/main.css

@@ -32235,6 +32235,200 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}
+
+.wds-critical-banner {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: 0;
+  container-type: inline-size;
+  --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
+  --critical-banner-duration: 150ms;
+  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
+     actions only go full-width below mobile-max token (container query) */
+}
+
+.wds-critical-banner--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.wds-critical-banner__title {
+  display: -webkit-box;
+  -webkit-line-clamp: 8;
+  line-clamp: 8;
+  -webkit-box-orient: vertical;
+  max-height: 192px;
+  overflow: hidden;
+  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
+}
+
+.wds-critical-banner--collapsed .wds-critical-banner__title {
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  max-height: 48px;
+}
+
+.wds-critical-banner__description {
+  max-height: 30vh;
+  opacity: 1;
+  overflow: hidden;
+  transition: max-height var(--critical-banner-duration) var(--critical-banner-easing), opacity var(--critical-banner-duration) var(--critical-banner-easing);
+}
+
+.wds-critical-banner--collapsed .wds-critical-banner__description--with-title {
+  max-height: 0;
+  opacity: 0;
+}
+
+.wds-critical-banner--collapsed .wds-critical-banner__description:not(.wds-critical-banner__description--with-title) {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wds-critical-banner .wds-prompt__content-wrapper {
+  grid-template-columns: auto 1fr auto;
+  align-items: flex-start;
+  transition: row-gap var(--critical-banner-duration) var(--critical-banner-easing);
+}
+
+.wds-critical-banner--collapsed .wds-prompt__content-wrapper {
+  row-gap: 0;
+}
+
+.wds-critical-banner__text-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  text-align: start;
+  min-width: 0;
+  max-width: 480px;
+  height: 100%;
+  padding-top: 3px;
+}
+
+@media (max-width: 320px) {
+  .wds-critical-banner__text-wrapper {
+    padding-top: 0;
+  }
+}
+
+@container (max-width: 320px) {
+  .wds-critical-banner__text-wrapper {
+    padding-top: 0;
+  }
+}
+
+.wds-critical-banner--collapsed .wds-critical-banner__title,
+.wds-critical-banner--collapsed .wds-critical-banner__description {
+  transform: translateY(0);
+}
+
+.wds-critical-banner__toggle {
+  flex-shrink: 0;
+  transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
+}
+
+.wds-critical-banner__toggle--collapsed {
+  transform: rotate(180deg);
+}
+
+@container (min-width: 768px) {
+  .wds-critical-banner__toggle {
+    display: none;
+  }
+}
+
+.wds-critical-banner .wds-prompt__actions-wrapper {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  max-height: 200px;
+  opacity: 1;
+  overflow: visible;
+}
+
+@container (max-width: 600px) {
+  .wds-critical-banner .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+    width: 100%;
+  }
+  .wds-critical-banner .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 100%;
+    width: 100%;
+  }
+}
+
+.wds-critical-banner--collapsed .wds-prompt__actions-wrapper {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@container (max-width: 600px) {
+  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wds-critical-banner__description,
+  .wds-critical-banner__title,
+  .wds-critical-banner .wds-prompt__content-wrapper,
+  .wds-critical-banner__toggle {
+    transition: none !important;
+  }
+}
+
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.wds-expander-toggle--collapsed {
+  transform: rotate(180deg);
+}
+
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }
@@ -34660,32 +34854,3 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
-
-.wds-action-prompt {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: var(--radius-large);
-}
-
-.wds-action-prompt--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-@media (max-width: 767px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}

package/src/main.less

@@ -67,6 +67,9 @@
 @import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
 @import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./prompt/InfoPrompt/InfoPrompt.less";
+@import "./prompt/ActionPrompt/ActionPrompt.less";
+@import "./prompt/CriticalBanner/CriticalBanner.less";
+@import "./prompt/common/Expander/Expander.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
@@ -91,7 +94,6 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
-@import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,31 +1,19 @@
 import { AriaAttributes, ReactNode, useId } from 'react';
 import { clsx } from 'clsx';
 
-import StatusIcon from '../../statusIcon';
 import Body from '../../body';
 import Button from '../../button';
 import { Breakpoint, Typography } from '../../common';
-import AvatarView, { AvatarViewProps } from '../../avatarView';
-import Image from '../../image';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
-import { BadgeAssetsProps } from '../../badge';
-import { GiftBox } from '@transferwise/icons';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
+import { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';
 
 export type ActionPromptProps = {
   title: ReactNode;
   description?: ReactNode;
   /** @default {} */
-  media?: {
-    imgSrc?: string;
-    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
-      asset?: AvatarViewProps['children'];
-      badge?: Pick<BadgeAssetsProps, 'flagCode'>;
-    };
-    'aria-label'?: string;
-    'aria-hidden'?: boolean;
-  };
+  media?: PromptMedia;
   action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
     label: ButtonProps['children'];
   };
@@ -74,54 +62,13 @@ export const ActionPrompt = ({
     .filter(Boolean)
     .join(' ');
 
-  const renderMedia = () => {
-    if (media?.imgSrc) {
-      return (
-        <Image
-          id={mediaId}
-          src={media.imgSrc}
-          className="wds-action-prompt--media-image"
-          alt={media['aria-label'] ?? ''}
-        />
-      );
-    }
-    if (media?.avatar) {
-      const badge = media.avatar.badge
-        ? media.avatar.badge
-        : sentiment === 'proposition'
-          ? {}
-          : { status: sentiment };
-      return (
-        <AvatarView
-          {...media.avatar}
-          badge={badge}
-          aria-label={media['aria-label']}
-          aria-hidden={media['aria-hidden']}
-          id={mediaId}
-          size={48}
-        >
-          {media.avatar.asset}
-        </AvatarView>
-      );
-    }
-    return sentiment === 'proposition' ? (
-      <AvatarView
-        id={mediaId}
-        size={48}
-        aria-label={media['aria-label']}
-        aria-hidden={media['aria-hidden']}
-      >
-        <GiftBox />
-      </AvatarView>
-    ) : (
-      <StatusIcon
-        id={mediaId}
-        size={48}
-        sentiment={sentiment}
-        iconLabel={media['aria-hidden'] ? null : media['aria-label']}
-      />
-    );
-  };
+  const renderMedia = () =>
+    renderPromptMedia({
+      media,
+      sentiment,
+      mediaId,
+      imgClassName: 'wds-action-prompt--media-image',
+    });
 
   return (
     <PrimitivePrompt