@transferwise/components 46.136.1 → 46.137.1

package/src/alert/Alert.story.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
 import { ClockBorderless } from '@transferwise/icons';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { lorem40 } from '../test-utils';
 import { Sentiment, Status } from '../common';
@@ -48,6 +49,34 @@ type Story = StoryObj<typeof Alert>;
 
 export const Basic: Story = {};
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [dismissed, setDismissed] = React.useState(false);
+
+  if (dismissed) {
+    return (
+      <Button v2 size="md" onClick={() => setDismissed(false)}>
+        Show alert again
+      </Button>
+    );
+  }
+
+  return (
+    <Alert
+      action={{
+        'aria-label': 'Learn more',
+        text: 'Learn more',
+        href: '#',
+      }}
+      message="Payments sent to your bank details **today** might not arrive in time for the holidays."
+      onDismiss={() => setDismissed(true)}
+      type="positive"
+    />
+  );
+};`,
+  scope: { Alert, Button, React },
+});
+
 export const Variants: Story = {
   render: ({ message }) => {
     const variants = [

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -81,7 +81,7 @@ export const All: Story = {
           <div>
             <AvatarWrapper
               badgeStatusIcon={Sentiment.NEGATIVE}
-              url="https://wise.com/web-art/assets/flags/hrk.svg"
+              url="https://wise.com/web-art/assets/flags/hr.svg"
               profileType={ProfileType.BUSINESS}
               avatarProps={avatarProps}
             />

package/src/button/_stories/Button.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { Flag } from '@wise/art';
 import { lorem10, lorem20 } from '../../test-utils';
 import SentimentSurface from '../../sentimentSurface';
@@ -317,6 +321,13 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Button v2 size="md" onClick={console.log}>
+  Click me
+</Button>`,
+  scope: globalScope,
+});
+
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />

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/cs.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "vybráno",
   "neptune.DateLookup.twentyYears": "20 let",
   "neptune.DateLookup.year": "rok",
+  "neptune.Expander.collapseAriaLabel": "Sbalit",
+  "neptune.Expander.expandAriaLabel": "Rozbalit",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Napište měnu/zemi",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Vybrat měnu",
   "neptune.FlowNavigation.back": "zpět na předchozí krok",

package/src/i18n/de.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "ausgewählt",
   "neptune.DateLookup.twentyYears": "20 Jahre",
   "neptune.DateLookup.year": "Jahr",
+  "neptune.Expander.collapseAriaLabel": "Minimieren",
+  "neptune.Expander.expandAriaLabel": "Maximieren",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Gib eine Währung / ein Land ein",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Wähle eine Währung",
   "neptune.FlowNavigation.back": "zurück zum vorherigen Schritt",

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/i18n/es.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "seleccionado",
   "neptune.DateLookup.twentyYears": "20 años",
   "neptune.DateLookup.year": "año",
+  "neptune.Expander.collapseAriaLabel": "Ocultar",
+  "neptune.Expander.expandAriaLabel": "Expandir",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Indica una divisa/país",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Seleccionar divisa",
   "neptune.FlowNavigation.back": "volver al paso anterior",

package/src/i18n/fr.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "sélectionnée",
   "neptune.DateLookup.twentyYears": "20 ans",
   "neptune.DateLookup.year": "année",
+  "neptune.Expander.collapseAriaLabel": "Réduire",
+  "neptune.Expander.expandAriaLabel": "Développer",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Entrez une devise/un pays",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Sélectionnez une devise",
   "neptune.FlowNavigation.back": "revenir à l'étape précédente",

package/src/i18n/hu.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "kiválasztva",
   "neptune.DateLookup.twentyYears": "20 év",
   "neptune.DateLookup.year": "év",
+  "neptune.Expander.collapseAriaLabel": "Rövidebben",
+  "neptune.Expander.expandAriaLabel": "Több",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Írj be egy pénznemet/országot",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Pénznem kiválasztása",
   "neptune.FlowNavigation.back": "vissza az előző lépéshez",

package/src/i18n/id.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "terpilih",
   "neptune.DateLookup.twentyYears": "20 tahun",
   "neptune.DateLookup.year": "tahun",
+  "neptune.Expander.collapseAriaLabel": "Persempit",
+  "neptune.Expander.expandAriaLabel": "Perluas",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Ketik mata uang/negara",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Pilih mata uang",
   "neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",

package/src/i18n/it.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selezionata",
   "neptune.DateLookup.twentyYears": "20 anni",
   "neptune.DateLookup.year": "anno",
+  "neptune.Expander.collapseAriaLabel": "Riduci",
+  "neptune.Expander.expandAriaLabel": "Espandi",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digita una valuta / paese",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Scegli la valuta",
   "neptune.FlowNavigation.back": "torna al passaggio precedente",

package/src/i18n/ja.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "選択済み",
   "neptune.DateLookup.twentyYears": "20年",
   "neptune.DateLookup.year": "年",
+  "neptune.Expander.collapseAriaLabel": "閉じる",
+  "neptune.Expander.expandAriaLabel": "開く",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "通貨または国をご入力ください",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "通貨の選択",
   "neptune.FlowNavigation.back": "前のステップに戻る",

package/src/i18n/nl.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "geselecteerd",
   "neptune.DateLookup.twentyYears": "20 jaar",
   "neptune.DateLookup.year": "jaar",
+  "neptune.Expander.collapseAriaLabel": "Samenvouwen",
+  "neptune.Expander.expandAriaLabel": "Uitvouwen",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
   "neptune.FlowNavigation.back": "terug naar vorige stap",

package/src/i18n/pl.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "wybrano",
   "neptune.DateLookup.twentyYears": "20 lat",
   "neptune.DateLookup.year": "rok",
+  "neptune.Expander.collapseAriaLabel": "Schowaj",
+  "neptune.Expander.expandAriaLabel": "Rozwiń",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Wpisz walutę / kraj",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Wybierz walutę",
   "neptune.FlowNavigation.back": "wróć do poprzedniego kroku",

package/src/i18n/pt.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selecionada",
   "neptune.DateLookup.twentyYears": "20 anos",
   "neptune.DateLookup.year": "ano",
+  "neptune.Expander.collapseAriaLabel": "Ver menos",
+  "neptune.Expander.expandAriaLabel": "Ver mais",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digite uma moeda / país",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecione a moeda",
   "neptune.FlowNavigation.back": "voltar à etapa anterior",

package/src/i18n/ro.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selectată",
   "neptune.DateLookup.twentyYears": "20 de ani",
   "neptune.DateLookup.year": "an",
+  "neptune.Expander.collapseAriaLabel": "Restrânge",
+  "neptune.Expander.expandAriaLabel": "Extinde",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Tastează o monedă / țară",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selectează moneda",
   "neptune.FlowNavigation.back": "înapoi la pasul anterior",

package/src/i18n/ru.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "выбрано",
   "neptune.DateLookup.twentyYears": "20 лет",
   "neptune.DateLookup.year": "год",
+  "neptune.Expander.collapseAriaLabel": "Свернуть",
+  "neptune.Expander.expandAriaLabel": "Развернуть",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Введите валюту/страну",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Выберите валюту",
   "neptune.FlowNavigation.back": "вернуться к предыдущему шагу",

package/src/i18n/th.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "เลือกแล้ว",
   "neptune.DateLookup.twentyYears": "20 ปี",
   "neptune.DateLookup.year": "ปี",
+  "neptune.Expander.collapseAriaLabel": "ย่อ",
+  "neptune.Expander.expandAriaLabel": "ขยาย",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "ป้อนสกุลเงิน / ประเทศ",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "เลือกสกุลเงิน",
   "neptune.FlowNavigation.back": "กลับไปที่ขั้นก่อนหน้า",

package/src/i18n/tr.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "seçili",
   "neptune.DateLookup.twentyYears": "20 yıl",
   "neptune.DateLookup.year": "yıl",
+  "neptune.Expander.collapseAriaLabel": "Küçült",
+  "neptune.Expander.expandAriaLabel": "Genişlet",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Bir para birimi / ülke girin",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Para birimi seçin",
   "neptune.FlowNavigation.back": "önceki adıma dön",

package/src/i18n/zh-CN.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "已选",
   "neptune.DateLookup.twentyYears": "20 年",
   "neptune.DateLookup.year": "年",
+  "neptune.Expander.collapseAriaLabel": "收起",
+  "neptune.Expander.expandAriaLabel": "展开",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "输入货币/国家/地区",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "选择货币",
   "neptune.FlowNavigation.back": "返回上一步",

package/src/i18n/zh-HK.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "已選",
   "neptune.DateLookup.twentyYears": "20年",
   "neptune.DateLookup.year": "年",
+  "neptune.Expander.collapseAriaLabel": "收起",
+  "neptune.Expander.expandAriaLabel": "展開",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "輸入貨幣或國家/地區",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "選擇貨幣",
   "neptune.FlowNavigation.back": "返回上一個步驟",

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/logo/Logo.css

@@ -1,26 +1,6 @@
 .np-logo {
   display: inline-block;
-}
-.np-theme-personal--forest-green .np-logo-svg path,
-.np-theme-personal--bright-green .np-logo-svg path {
-  fill: var(--color-interactive-primary);
-}
-.np-theme-personal--dark .np-logo-svg path {
-  fill: var(--color-white);
-}
-.np-logo-svg--size-sm {
-  display: block;
-}
-@media (min-width: 576px) {
-  .np-logo-svg--size-sm {
-    display: none;
-  }
-}
-.np-logo-svg--size-md {
-  display: none;
-}
-@media (min-width: 576px) {
-  .np-logo-svg--size-md {
-    display: block;
-  }
+  color: var(--color-interactive-primary);
+  width: var(--wds-logo-width);
+  height: var(--wds-logo-height);
 }

package/src/logo/Logo.less

@@ -1,32 +1,6 @@
 .np-logo {
   display: inline-block;
-}
-
-.np-logo-svg {
-  path {
-    .np-theme-personal--forest-green &,
-    .np-theme-personal--bright-green & {
-      fill: var(--color-interactive-primary);
-    }
-
-    .np-theme-personal--dark & {
-      fill: var(--color-white);
-    }
-  }
-  
-  &--size-sm {
-    display: block;
-  
-    @media (--screen-sm) {
-      display: none;
-    }
-  }
-  
-  &--size-md {
-    display: none;
-  
-    @media (--screen-sm) {
-      display: block;
-    }
-  }
+  color: var(--color-interactive-primary);
+  width: var(--wds-logo-width);
+  height: var(--wds-logo-height);
 }