@transferwise/components 46.133.0 → 46.134.0

package/src/logo/Logo.story.tsx

@@ -2,36 +2,196 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType } from '.';
 
-export default {
+/**
+ * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
+ */
+const meta: Meta<typeof Logo> = {
   component: Logo,
   title: 'Content/Logo',
-  render: () => {
-    return (
-      <>
-        <div>
+  args: {
+    type: 'WISE',
+    inverse: false,
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: Object.values(LogoType),
+    },
+  },
+  parameters: {
+    docs: { toc: true },
+  },
+};
+
+export default meta;
+
+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>
+  ),
+};
+
+/**
+ * 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".
+ */
+export const Types: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        gap: '3rem',
+        alignItems: 'center',
+        padding: '2rem',
+        borderRadius: '8px',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
+      }}
+    >
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo {...args} type={type} />
+          <span
+            style={{
+              fontSize: '12px',
+              ...(args.inverse ? { color: 'rgba(255,255,255,0.6)' } : { opacity: 0.6 }),
+            }}
+          >
+            {type}
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" />
+<Logo type="WISE_BUSINESS" />
+<Logo type="WISE_PLATFORM" />`,
+      },
+    },
+  },
+};
+
+/**
+ * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
+ */
+export const Responsive: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    inverse: { 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) => (
-            <div key={type} className="m-a-2">
-              <Logo type={type} />
-            </div>
+            <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 className="bg--dark">
+      </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) => (
-            <div key={type} className="m-a-2">
-              <Logo type={type} inverse />
-            </div>
+            <Logo key={type} type={type} />
           ))}
         </div>
-      </>
-    );
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: { code: null },
+    },
   },
-} satisfies Meta<typeof Logo>;
-
-type Story = StoryObj<typeof Logo>;
+};
 
-export const Basic: Story = {
-  args: {
-    type: 'WISE',
-    inverse: false,
+/**
+ * All logo types on a dark background using the `inverse` prop, which renders a
+ * light-coloured version suited for dark surfaces.
+ */
+export const Inverse: Story = {
+  argTypes: {
+    type: { table: { disable: true } },
+    inverse: { 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) => (
+    <>
+      {Object.values(LogoType).map((type) => (
+        <div
+          key={type}
+          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>
+        </div>
+      ))}
+    </>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" inverse />
+<Logo type="WISE_BUSINESS" inverse />
+<Logo type="WISE_PLATFORM" inverse />`,
+      },
+    },
   },
 };

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

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import Logo from '.';
+
+import Logo, { LogoType } from '.';
 import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Logo> = {
@@ -7,14 +8,46 @@ const meta: Meta<typeof Logo> = {
   tags: ['!autodocs', '!manifest'],
   title: 'Content/Logo/Tests',
 };
+
 export default meta;
 
 type Story = StoryObj<typeof Logo>;
 
-export const Mobile: Story = {
-  args: {
-    type: 'WISE',
-    inverse: false,
-  },
-  ...withVariantConfig(['mobile']),
+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>
+  </div>
+);
+
+export const Variants: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+export const RTL: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['rtl']),
+};
+
+export const Zoom400: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['400%']),
 };

package/src/logo/Logo.tsx

@@ -33,7 +33,10 @@ export enum LogoType {
 export interface LogoProps {
   /** Extra classes applied to Logo */
   className?: string;
-  /** If true, will use dark colours for dark on light theme */
+  /**
+   * Renders a light-coloured version suited for dark backgrounds.
+   * @default false
+   */
   inverse?: boolean;
   /**
    * What type of logo to display
@@ -48,6 +51,12 @@ const labelByType = {
   WISE_PLATFORM: 'Wise Platform',
 } satisfies Record<`${LogoType}`, string>;
 
+/**
+ * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
+ * and the full wordmark on ≥576px (small breakpoint and above).
+ *
+ * @see {@link https://wise.design/foundations/logo Design Spec}
+ */
 export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
   const LogoSm =
     svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];

package/src/main.css

@@ -25824,7 +25824,7 @@ a[data-toggle="tooltip"] {
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;
-  --color-sentiment-background-surface: #90000D;
+  --color-sentiment-background-surface: #CB272F;
   --color-sentiment-background-surface-hover: #B8232B;
   --color-sentiment-background-surface-active: #A72027;
 }
@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: -2px;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (min-width: 241px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   justify-content: center;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;
@@ -32429,12 +32429,50 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
-.wds-sentiment-surface.status-circle {
-  background-color: var(--color-sentiment-interactive-primary);
+.status-circle.negative,
+.status-circle.error {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
 }
 
-.wds-sentiment-surface.status-circle .status-icon {
-  color: var(--color-sentiment-interactive-control);
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
+}
+
+.status-circle.positive,
+.status-circle.success {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
+}
+
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
+}
+
+.status-circle.warning,
+.status-circle.pending {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
+}
+
+.status-circle.warning .status-icon,
+.status-circle.pending .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-dark));
+}
+
+.status-circle.neutral,
+.status-circle.info {
+  background-color: #5d7079;
+  background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
+}
+
+.status-circle.neutral .status-icon,
+.status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
+}
+
+.np-theme-personal--bright-green .status-circle.neutral .status-icon,
+.np-theme-personal--bright-green .status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-white));
 }
 
 .tw-stepper {

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, userEvent } from 'storybook/test';
+import { within, userEvent, expect } from 'storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -155,6 +155,15 @@ export const BalanceCurrencies: Story = {
   },
 };
 
+export const WithDecimals: Story = {
+  args: {
+    currencies: [],
+    selectedCurrency: exampleCurrency.eur,
+    decimals: 4,
+    amount: 1234.1412,
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, fireEvent } from 'storybook/test';
+import { within, userEvent, fireEvent, expect } from 'storybook/test';
 import { allModes } from '../../.storybook/modes';
 import { lorem500 } from '../test-utils';
 import { Field } from '../field/Field';
@@ -102,3 +102,143 @@ export const SmoothScrollReset: Story = {
     },
   },
 };
+
+export const WithDecimals: Story = {
+  args: {
+    currencies: [],
+    decimals: 4,
+    amount: 1234.5678,
+  },
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole('textbox');
+    await expect(input).toHaveValue('1,234.5678');
+    await userEvent.clear(input);
+    await userEvent.type(input, '99.123456789');
+    await userEvent.tab();
+    await expect(input).toHaveValue('99.1235');
+  },
+};
+
+const eur = {
+  value: 'EUR',
+  label: 'EUR',
+  note: 'Euro',
+  currency: 'eur',
+} as const;
+
+const bhd = {
+  value: 'BHD',
+  label: 'BHD',
+  note: 'Bahraini dinar',
+  currency: 'bhd',
+} as const;
+
+const jpy = {
+  value: 'JPY',
+  label: 'JPY',
+  note: 'Japanese yen',
+  currency: 'jpy',
+} as const;
+
+const sharedProps = {
+  currencies: [],
+  onAmountChange: () => {},
+  onCurrencyChange: () => {},
+} as const;
+
+function Row({
+  label,
+  amount,
+  currency,
+  decimals,
+}: {
+  label: string;
+  amount: number;
+  currency: { value: string; label: string; note: string; currency: string };
+  decimals: number;
+}) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '240px 1fr 1fr',
+        gap: 12,
+        alignItems: 'center',
+      }}
+    >
+      <Body as="span" style={{ fontSize: 13, color: '#6b7280' }}>
+        {label}
+      </Body>
+      <Field label={`No decimals prop (${currency.value})`}>
+        <MoneyInput {...sharedProps} selectedCurrency={currency} amount={amount} />
+      </Field>
+      <Field label={`decimals={${decimals}} (${currency.value})`}>
+        <MoneyInput
+          {...sharedProps}
+          selectedCurrency={currency}
+          amount={amount}
+          decimals={decimals}
+        />
+      </Field>
+    </div>
+  );
+}
+
+/**
+ * Side-by-side comparison of formatAmount (no decimals prop) vs formatNumber (with decimals prop)
+ * when decimals matches the currency default. Differences indicate a formatting parity issue.
+ *
+ * Problem 1: Trailing zero stripping — formatAmount strips ".00" for whole numbers,
+ * formatNumber always pads to the requested precision.
+ *
+ * Problem 2: BHD decimal count — formatAmount renders 2 fractional digits for BHD,
+ * but the currencyDecimals map says BHD has 3. formatNumber with decimals=3 shows 3.
+ */
+export const DecimalsFormatParity: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        EUR — whole numbers (trailing zero stripping)
+      </Body>
+      <Row label="amount=0" amount={0} currency={eur} decimals={2} />
+      <Row label="amount=1" amount={1} currency={eur} decimals={2} />
+      <Row label="amount=42" amount={42} currency={eur} decimals={2} />
+      <Row label="amount=100" amount={100} currency={eur} decimals={2} />
+      <Row label="amount=1000" amount={1000} currency={eur} decimals={2} />
+      <Row label="amount=9999999" amount={9999999} currency={eur} decimals={2} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        EUR — fractional amounts (should match)
+      </Body>
+      <Row label="amount=0.01" amount={0.01} currency={eur} decimals={2} />
+      <Row label="amount=0.1" amount={0.1} currency={eur} decimals={2} />
+      <Row label="amount=99.9" amount={99.9} currency={eur} decimals={2} />
+      <Row label="amount=1234567.89" amount={1234567.89} currency={eur} decimals={2} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        BHD — all amounts (formatAmount uses 2 digits, formatNumber uses 3)
+      </Body>
+      <Row label="amount=0" amount={0} currency={bhd} decimals={3} />
+      <Row label="amount=0.001" amount={0.001} currency={bhd} decimals={3} />
+      <Row label="amount=0.01" amount={0.01} currency={bhd} decimals={3} />
+      <Row label="amount=0.1" amount={0.1} currency={bhd} decimals={3} />
+      <Row label="amount=42" amount={42} currency={bhd} decimals={3} />
+      <Row label="amount=99.9" amount={99.9} currency={bhd} decimals={3} />
+      <Row label="amount=999.99" amount={999.99} currency={bhd} decimals={3} />
+      <Row label="amount=1234567.89" amount={1234567.89} currency={bhd} decimals={3} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        JPY — zero-decimal currency (should always match)
+      </Body>
+      <Row label="amount=0" amount={0} currency={jpy} decimals={0} />
+      <Row label="amount=1" amount={1} currency={jpy} decimals={0} />
+      <Row label="amount=1000" amount={1000} currency={jpy} decimals={0} />
+      <Row label="amount=1234567" amount={1234567} currency={jpy} decimals={0} />
+    </div>
+  ),
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};

package/src/moneyInput/MoneyInput.test.tsx

@@ -253,6 +253,45 @@ describe('Money Input', () => {
       await userEvent.tab();
       expect(input).toHaveValue('1,234,567.65');
     });
+
+    it('uses custom decimals when specified', async () => {
+      customRender({ decimals: 4 });
+      const input = getInput();
+      await userEvent.clear(input);
+      await userEvent.type(input, '1234.56789');
+      await userEvent.tab();
+      expect(input).toHaveValue('1,234.5679');
+    });
+
+    it('uses custom decimals of 0', async () => {
+      customRender({ decimals: 0 });
+      const input = getInput();
+      await userEvent.clear(input);
+      await userEvent.type(input, '1234.56');
+      await userEvent.tab();
+      expect(input).toHaveValue('1,235');
+    });
+
+    it('ignores custom decimals override for zero-decimal currencies like JPY', async () => {
+      const jpyCurrency: CurrencyOptionItem = {
+        value: 'JPY',
+        label: 'JPY',
+        note: 'Japanese yen',
+        currency: 'jpy',
+      };
+      customRender({
+        decimals: 4,
+        selectedCurrency: jpyCurrency,
+        currencies: [jpyCurrency],
+        amount: 1234,
+      });
+      const input = getInput();
+      expect(input).toHaveValue('1,234');
+      await userEvent.clear(input);
+      await userEvent.type(input, '5678.9999');
+      await userEvent.tab();
+      expect(input).toHaveValue('5,679');
+    });
   });
 
   it('calls onAmountChange with parsed and formatted value', async () => {
@@ -263,6 +302,12 @@ describe('Money Input', () => {
     expect(initialProps.onAmountChange).toHaveBeenCalledWith(1000.65);
   });
 
+  it('calls onAmountChange with value rounded to custom decimals', async () => {
+    customRender({ decimals: 4, amount: null });
+    await userEvent.type(getInput(), '12.34567');
+    expect(initialProps.onAmountChange).toHaveBeenCalledWith(12.3457);
+  });
+
   it('calls onAmountChange when input value is empty', async () => {
     customRender();
     await userEvent.clear(getInput());