@transferwise/components 46.136.1 → 46.137.0

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/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);
 }

package/src/logo/Logo.story.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Logo, { LogoType } from '.';
+import Logo, { LogoType, LogoDisplay, LogoFormat } from './Logo';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 /**
  * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
@@ -10,13 +11,21 @@ const meta: Meta<typeof Logo> = {
   title: 'Content/Logo',
   args: {
     type: 'WISE',
-    inverse: false,
   },
   argTypes: {
     type: {
       control: 'radio',
       options: Object.values(LogoType),
     },
+    display: {
+      control: 'radio',
+      options: Object.values(LogoDisplay),
+    },
+    format: {
+      control: 'radio',
+      options: Object.values(LogoFormat),
+    },
+    inverse: { control: { disable: true } },
   },
   parameters: {
     docs: { toc: true },
@@ -29,23 +38,15 @@ type Story = StoryObj<typeof Logo>;
 
 /** Explore all props via the controls panel. */
 export const Playground: Story = {
-  render: (args) => (
-    <div
-      style={{
-        padding: '2rem',
-        ...(args.inverse
-          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
-          : {}),
-      }}
-    >
-      <Logo {...args} />
-    </div>
-  ),
+  args: {
+    type: 'WISE',
+    format: 'primary-lockup',
+  },
+  render: (args) => <Logo {...args} />,
 };
 
 /**
- * The three logo types: standard Wise, Wise Business, and Wise Platform. <br />
- * `WISE_BUSINESS` renders the same SVG as `WISE` but with the accessible label "Wise Business".
+ * The three logo types: standard Wise, Wise Business, and Wise Platform.
  */
 export const Types: Story = {
   argTypes: {
@@ -59,9 +60,6 @@ export const Types: Story = {
         alignItems: 'center',
         padding: '2rem',
         borderRadius: '8px',
-        ...(args.inverse
-          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
-          : {}),
       }}
     >
       {Object.values(LogoType).map((type) => (
@@ -75,14 +73,6 @@ export const Types: Story = {
           }}
         >
           <Logo {...args} type={type} />
-          <span
-            style={{
-              fontSize: '12px',
-              ...(args.inverse ? { color: 'rgba(255,255,255,0.6)' } : { opacity: 0.6 }),
-            }}
-          >
-            {type}
-          </span>
         </div>
       ))}
     </div>
@@ -99,99 +89,137 @@ export const Types: Story = {
 };
 
 /**
- * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
+ * The `format="primary-lockup"` variant shows the product name inline alongside the wordmark.
  */
-export const Responsive: Story = {
+export const PrimaryLockup: Story = {
   argTypes: {
     type: { table: { disable: true } },
-    inverse: { table: { disable: true } },
+    format: { table: { disable: true } },
   },
   render: (args) => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-      <div>
-        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'< 576px (flag only)'}
-        </span>
-        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
-          {Object.values(LogoType).map((type) => (
-            <span key={type} className="np-logo" style={{ display: 'inline-block' }}>
-              <style>{`.responsive-sm .np-logo-svg--size-md { display: none !important; } .responsive-sm .np-logo-svg--size-sm { display: block !important; }`}</style>
-              <span className="responsive-sm">
-                <Logo type={type} />
-              </span>
-            </span>
-          ))}
-        </div>
-      </div>
-      <div>
-        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'\u2265 576px (full wordmark)'}
-        </span>
-        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
-          {Object.values(LogoType).map((type) => (
-            <Logo key={type} type={type} />
-          ))}
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} format="primary-lockup" />
+          </div>
         </div>
-      </div>
+      ))}
     </div>
   ),
   parameters: {
     docs: {
-      source: { code: null },
+      source: {
+        code: `<Logo type="WISE" format="primary-lockup" />
+<Logo type="WISE_BUSINESS" format="primary-lockup" />
+<Logo type="WISE_PLATFORM" format="primary-lockup" />`,
+      },
     },
   },
 };
 
 /**
- * All logo types on a dark background using the `inverse` prop, which renders a
- * light-coloured version suited for dark surfaces.
+ * The `format="secondary-lockup"` variant uses a stacked two-line layout with the product name.
  */
-export const Inverse: Story = {
+export const SecondaryLockup: Story = {
   argTypes: {
     type: { table: { disable: true } },
-    inverse: { table: { disable: true } },
+    format: { table: { disable: true } },
   },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          display: 'flex',
-          gap: '3rem',
-          alignItems: 'center',
-          backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)',
-          padding: '2rem',
-          borderRadius: '8px',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
   render: (args) => (
-    <>
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} format="secondary-lockup" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" format="secondary-lockup" />
+<Logo type="WISE_BUSINESS" format="secondary-lockup" />
+<Logo type="WISE_PLATFORM" format="secondary-lockup" />`,
+      },
+    },
+  },
+};
+
+/**
+ * When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type or other settings.
+ */
+export const Compact: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
       {Object.values(LogoType).map((type) => (
         <div
           key={type}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '0.5rem',
-          }}
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
         >
-          <Logo type={type} inverse />
-          <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>{type}</span>
+          <Logo {...args} type={type} format="primary-lockup" display="compact" />
+          <Logo {...args} type={type} format="secondary-lockup" display="compact" />
         </div>
       ))}
-    </>
+    </div>
   ),
   parameters: {
     docs: {
       source: {
-        code: `<Logo type="WISE" inverse />
-<Logo type="WISE_BUSINESS" inverse />
-<Logo type="WISE_PLATFORM" inverse />`,
+        code: `<Logo type=".." format="primary-lockup" display="compact" />
+<Logo type=".." format="secondary-lockup" display="compact" />`,
       },
     },
   },
 };
+
+/**
+ * When `display` is `"full"`, the full wordmark/lockup is rendered regardless of screen width.
+ */
+export const Full: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} format="primary-lockup" display="full" />
+            <Logo {...args} type={type} format="secondary-lockup" display="full" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  ...withVariantConfig(['mobile'], {
+    parameters: {
+      docs: {
+        source: {
+          code: `<Logo type=".." format="primary-lockup" display="full" />
+<Logo type=".." format="secondary-lockup" display="full" />`,
+        },
+      },
+    },
+  }),
+};

package/src/logo/Logo.test.story.tsx

@@ -17,37 +17,28 @@ const AllVariants = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
     <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
       {Object.values(LogoType).map((type) => (
-        <Logo key={type} type={type} />
-      ))}
-    </div>
-    <div
-      style={{
-        display: 'flex',
-        gap: '2rem',
-        alignItems: 'center',
-        backgroundColor: 'var(--color-content-primary)',
-        padding: '1rem',
-        borderRadius: '8px',
-      }}
-    >
-      {Object.values(LogoType).map((type) => (
-        <Logo key={type} type={type} inverse />
+        <div key={type}>
+          <Logo type={type} className="d-block" format="primary-lockup" />
+          <Logo type={type} className="d-block" format="secondary-lockup" />
+          <Logo type={type} className="d-block" format="primary-lockup" display="compact" />
+          <Logo type={type} className="d-block" format="primary-lockup" display="full" />
+          <Logo type={type} className="d-block" format="primary-lockup" display="responsive" />
+        </div>
       ))}
     </div>
   </div>
 );
 
-export const Variants: Story = {
-  render: () => <AllVariants />,
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
-};
-
-export const RTL: Story = {
+export const Themes: Story = {
   render: () => <AllVariants />,
-  ...withVariantConfig(['rtl']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
+    parameters: {
+      padding: '',
+    },
+  }),
 };
 
-export const Zoom400: Story = {
+export const Responsive: Story = {
   render: () => <AllVariants />,
-  ...withVariantConfig(['400%']),
+  ...withVariantConfig(['mobile']),
 };