@transferwise/components 46.133.0 → 46.134.0

package/src/moneyInput/MoneyInput.tsx

@@ -24,7 +24,7 @@ import {
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
-import { formatAmount, parseAmount } from './currencyFormatting';
+import { formatAmount, formatNumber, getCurrencyDecimals, parseAmount } from './currencyFormatting';
 import withId from '../withId';
 
 export interface CurrencyOptionItem {
@@ -48,24 +48,34 @@ const formatAmountIfSet = ({
   amount,
   currency,
   locale,
+  decimals,
 }: {
   amount: number | null | undefined;
   currency: string;
   locale: string;
+  decimals?: number;
 }) => {
-  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
+  if (typeof amount !== 'number') {
+    return '';
+  }
+  if (decimals != null && getCurrencyDecimals(currency) !== 0) {
+    return formatNumber(amount, locale, decimals);
+  }
+  return formatAmount(amount, currency, locale);
 };
 
 const parseNumber = ({
   amount,
   currency,
   locale,
+  decimals,
 }: {
   amount: string;
   currency: string;
   locale: string;
+  decimals?: number;
 }) => {
-  return parseAmount(amount, currency, locale);
+  return parseAmount(amount, currency, locale, decimals);
 };
 
 const allowedInputKeys = new Set([
@@ -102,6 +112,12 @@ export interface MoneyInputProps extends WrappedComponentProps {
   onCustomAction?: () => void;
   classNames?: Record<string, string>;
   selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
+  /**
+   * Specify the number of decimal places to format the amount. When not specified, the number of
+   * decimals is determined by the selected currency (e.g. 2 for EUR, 0 for JPY, 3 for BHD).
+   * This override is ignored for zero-decimal currencies (e.g. JPY, KRW, HUF), which always use 0.
+   */
+  decimals?: number;
 }
 
 export type MoneyInputPropsWithInputAttributes = MoneyInputProps &
@@ -133,6 +149,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: props.amount,
         currency: props.selectedCurrency.currency,
         locale: props.intl.locale,
+        decimals: props.decimals,
       }),
       locale: props.intl.locale,
     };
@@ -147,6 +164,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: nextProps.amount,
           currency: nextProps.selectedCurrency.currency,
           locale: nextProps.intl.locale,
+          decimals: nextProps.decimals,
         }),
       });
     }
@@ -174,6 +192,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: paste,
           currency: this.props.selectedCurrency.currency,
           locale,
+          decimals: this.props.decimals,
         });
 
     if (isNumberOrNull(parsed)) {
@@ -182,6 +201,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale,
+          decimals: this.props.decimals,
         }),
       });
       this.props.onAmountChange?.(parsed);
@@ -201,6 +221,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: value,
           currency: this.props.selectedCurrency.currency,
           locale: this.state.locale,
+          decimals: this.props.decimals,
         });
     if (isNumberOrNull(parsed)) {
       this.props.onAmountChange?.(parsed);
@@ -248,6 +269,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: previousState.formattedAmount,
         currency: this.props.selectedCurrency.currency,
         locale: previousState.locale,
+        decimals: this.props.decimals,
       });
       if (!isNumberOrNull(parsed)) {
         return {
@@ -259,6 +281,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale: previousState.locale,
+          decimals: this.props.decimals,
         }),
       };
     });
@@ -340,6 +363,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             amount: this.props.placeholder,
             currency: this.props.selectedCurrency.currency,
             locale: this.state.locale,
+            decimals: this.props.decimals,
           })}
           autoComplete="off"
           aria-describedby={selectedCurrencyElementId}

package/src/moneyInput/currencyFormatting.ts

@@ -1,8 +1,8 @@
-import { formatAmount } from '@transferwise/formatting';
+import { formatAmount, formatNumber } from '@transferwise/formatting';
 
 import { DEFAULT_LOCALE } from '../common/locale';
 
-export { formatAmount };
+export { formatAmount, formatNumber };
 
 // TODO: do not duplicate this between formatting and components
 const currencyDecimals: Record<string, number> = {
@@ -52,7 +52,7 @@ function getValidLocale(locale: string) {
   }
 }
 
-function getCurrencyDecimals(currency: string) {
+export function getCurrencyDecimals(currency: string) {
   const upperCaseCurrency = currency.toUpperCase();
   return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
 }
@@ -61,10 +61,16 @@ function getDecimalSeparator(locale: string) {
   return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
 }
 
-export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
+export function parseAmount(
+  number: string,
+  currency: string,
+  locale = DEFAULT_LOCALE,
+  decimals?: number,
+) {
   const validLocale = getValidLocale(locale);
 
-  const precision = getCurrencyDecimals(currency);
+  const currencyDefault = getCurrencyDecimals(currency);
+  const precision = currencyDefault === 0 ? 0 : (decimals ?? currencyDefault);
   const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
   const decimalSeparator = getDecimalSeparator(validLocale);
   const numberWithStandardDecimalSeparator = (number || '')

package/src/sentimentSurface/SentimentSurface.css

@@ -49,7 +49,7 @@
   --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;
 }

package/src/sentimentSurface/SentimentSurface.less

@@ -27,7 +27,7 @@
                     #CB272F, #B8232B, #A72027,
                     #9B141B, #831116, #6D0e13,
                     #CB272F, #B8232B, #A72027,
-                    #90000D, #B8232B, #A72027
+                    #CB272F, #B8232B, #A72027
                 );
       }
     }

package/src/statusIcon/StatusIcon.css

@@ -1,6 +1,37 @@
-.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));
 }

package/src/statusIcon/StatusIcon.less

@@ -1,6 +1,37 @@
-.wds-sentiment-surface.status-circle {
-  background-color: var(--color-sentiment-interactive-primary);
-  .status-icon {
-    color: var(--color-sentiment-interactive-control);
+.status-circle {
+  &.negative,
+  &.error {
+    background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
+    .status-icon {
+      color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
+    }
+  }
+
+  &.positive,
+  &.success {
+    background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
+    .status-icon {
+      color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
+    }
+  }
+
+  &.warning,
+  &.pending {
+    background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
+    .status-icon {
+      color: var(--color-sentiment-interactive-control, var(--color-dark));
+    }
+  }
+
+  &.neutral,
+  &.info {
+    background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
+    .status-icon {
+      color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
+
+      .np-theme-personal--bright-green & {
+        color: var(--color-sentiment-interactive-control, var(--color-white));
+      }
+    }
   }
 }

package/src/statusIcon/StatusIcon.story.tsx

@@ -1,102 +1,142 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { Sentiment, Size, Status } from '../common';
+import { Sentiment } from '../common';
+import SentimentSurface from '../sentimentSurface';
 
 import StatusIcon, { StatusIconSentiment } from './StatusIcon';
-import { withVariantConfig } from '../../.storybook/helpers';
+
+const sentiments = [
+  Sentiment.POSITIVE,
+  Sentiment.NEGATIVE,
+  Sentiment.WARNING,
+  Sentiment.NEUTRAL,
+  Sentiment.PENDING,
+] as const;
+
+const sizes = [16, 24, 32, 40, 48, 56, 72] as const;
+
+const label: Record<string, string> = {
+  positive: 'Positive',
+  negative: 'Negative',
+  warning: 'Warning',
+  neutral: 'Neutral',
+  pending: 'Pending',
+};
 
 export default {
   component: StatusIcon,
   title: 'Other/StatusIcon',
-
-  argTypes: {
-    iconLabel: {
-      control: 'text',
-    },
-  },
 } satisfies Meta<typeof StatusIcon>;
 
 type Story = StoryObj<typeof StatusIcon>;
 
-export const Basic: Story = {};
+export const Playground: Story = {
+  args: {
+    size: 40,
+  },
+};
 
 /**
- * Ignored by the screen readers. Use with care.
+ * All available sentiments at the selected size.
  */
-export const Presentational: Story = {
-  args: {
-    iconLabel: null,
+export const Sentiments: Story = {
+  argTypes: {
+    sentiment: { table: { disable: true } },
   },
+  render: ({ size }) => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      {sentiments.map((sentiment) => (
+        <div
+          key={sentiment}
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
+        >
+          <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
+          <span style={{ fontSize: '11px' }}>{label[sentiment]}</span>
+        </div>
+      ))}
+    </div>
+  ),
 };
 
-export const Variants: Story = {
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
-    parameters: {
-      padding: '0',
-    },
-  }),
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.WARNING,
-        Sentiment.NEUTRAL,
-        Sentiment.PENDING,
-        Status.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
-          >
-            {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-              return (
-                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
-              );
-            })}
-          </span>
-        );
-      })}
-    </span>
+/**
+ * All available sizes at the selected sentiment.
+ */
+export const Sizes: Story = {
+  argTypes: {
+    size: { table: { disable: true } },
+  },
+  render: ({ sentiment }) => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      {sizes.map((size) => (
+        <div
+          key={size}
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
+        >
+          <StatusIcon sentiment={sentiment} size={size} />
+          <span style={{ fontSize: '11px' }}>{size}</span>
+        </div>
+      ))}
+    </div>
   ),
 };
 
-export const LegacySizes: Story = {
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.NEUTRAL,
-        Sentiment.WARNING,
-        Status.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
+/**
+ * `StatusIcon` is sentiment-aware and will automatically adjust its colours when placed inside
+ * a [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component — no extra
+ * props needed. Each row below is a `SentimentSurface` at either `base` or `elevated` emphasis (and a last row with no sentiment for reference).
+ */
+export const SentimentAwareness: Story = {
+  argTypes: {
+    sentiment: { table: { disable: true } },
+  },
+  render: ({ size }) => {
+    const surfaceSentiments = ['success', 'warning', 'negative', 'neutral'] as const;
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {surfaceSentiments.flatMap((sentiment) => [
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}
           >
-            {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
-              return (
-                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
-              );
-            })}
-          </span>
-        );
-      })}
-    </span>
-  ),
+            <div
+              style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}
+            >
+              {sentiment} (base)
+            </div>
+            <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
+          </SentimentSurface>,
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            sentiment={sentiment}
+            emphasis="elevated"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}
+          >
+            <div
+              style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}
+            >
+              {sentiment} (elevated)
+            </div>
+            <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
+          </SentimentSurface>,
+        ])}
+
+        {/* Row without a SentimentSurface wrapper */}
+        <div style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}>
+          <div style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}>
+            none
+          </div>
+          <StatusIcon sentiment="pending" size={size} />
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+      canvas: { sourceState: 'hidden' },
+    },
+  },
 };

package/src/statusIcon/StatusIcon.test.story.tsx

@@ -0,0 +1,125 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Sentiment, Size } from '../common';
+import SentimentSurface from '../sentimentSurface';
+import { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
+
+import StatusIcon, { StatusIconSentiment } from './StatusIcon';
+
+export default {
+  title: 'Other/StatusIcon/Tests',
+  component: StatusIcon,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof StatusIcon>;
+
+type Story = StoryObj<typeof StatusIcon>;
+
+const sizes = [16, 24, 32, 40, 48, 56, 72] as const;
+
+const surfaceSentiments = ['success', 'warning', 'negative', 'neutral'] as const;
+
+// Cycle through different sentiments per size so each row shows varied icons
+const iconSentiments: StatusIconSentiment[] = [
+  Sentiment.POSITIVE,
+  Sentiment.NEGATIVE,
+  Sentiment.WARNING,
+  Sentiment.NEUTRAL,
+  Sentiment.PENDING,
+  Sentiment.POSITIVE,
+  Sentiment.NEGATIVE,
+];
+
+const rowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  padding: '8px',
+  gap: '8px',
+} as const;
+
+const labelStyle = {
+  width: '120px',
+  fontSize: '11px',
+  fontWeight: 'bold',
+  paddingLeft: '8px',
+  flexShrink: 0,
+} as const;
+
+/**
+ * All sentiments, emphasis levels, and sizes across all themes for visual regression testing.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {surfaceSentiments.flatMap((sentiment) => [
+        <SentimentSurface
+          key={`${sentiment}-base`}
+          sentiment={sentiment}
+          emphasis="base"
+          style={rowStyle}
+        >
+          <div style={labelStyle}>{sentiment} (base)</div>
+          {sizes.map((size, i) => (
+            <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
+          ))}
+        </SentimentSurface>,
+        <SentimentSurface
+          key={`${sentiment}-elevated`}
+          sentiment={sentiment}
+          emphasis="elevated"
+          style={rowStyle}
+        >
+          <div style={labelStyle}>{sentiment} (elevated)</div>
+          {sizes.map((size, i) => (
+            <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
+          ))}
+        </SentimentSurface>,
+      ])}
+
+      {/* Row without a SentimentSurface wrapper — standalone fallback colours */}
+      <div style={rowStyle}>
+        <div style={labelStyle}>none</div>
+        {sizes.map((size, i) => (
+          <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
+        ))}
+      </div>
+    </div>
+  ),
+  parameters: {
+    padding: '16px',
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+  },
+};
+
+export const RTL: Story = {
+  render: Variants.render,
+  ...withVariantConfig(['rtl']),
+};
+
+/**
+ * @deprecated Legacy `Size.SMALL | Size.MEDIUM | Size.LARGE` values still work but
+ * consumers should migrate to numeric sizes.
+ */
+export const LegacySizes: Story = {
+  render: () => {
+    const legacySizes = [
+      { value: Size.SMALL, label: 'Size.SMALL' },
+      { value: Size.MEDIUM, label: 'Size.MEDIUM' },
+      { value: Size.LARGE, label: 'Size.LARGE' },
+    ] as const;
+
+    return (
+      <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+        {legacySizes.map(({ value, label }) => (
+          <div
+            key={label}
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
+          >
+            <StatusIcon size={value} />
+            <span style={{ fontSize: '11px' }}>{label}</span>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};

package/src/statusIcon/StatusIcon.test.tsx

@@ -39,35 +39,28 @@ describe('StatusIcon', () => {
       renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
-      cleanup();
     },
   );
 
-  it("'warning' and 'pending' sentiments generate 'dark' colored icons", () => {
-    renderStatusIcon({ sentiment: Sentiment.WARNING });
-    expect(screen.getByTestId('alert-icon')).toHaveClass('dark');
-    cleanup();
 
-    renderStatusIcon({ sentiment: Sentiment.PENDING });
-    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
-    cleanup();
-
-    renderStatusIcon({ sentiment: Status.PENDING });
-    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
-  });
-
-  it("'positive', 'negative', and 'neutral' sentiments generate 'light' colored icons", () => {
-    renderStatusIcon({ sentiment: Sentiment.POSITIVE });
-    expect(screen.getByTestId('check-icon')).toHaveClass('light');
-    cleanup();
+  it.each([
+    [Sentiment.WARNING, 'alert-icon'],
+    [Sentiment.PENDING, 'clock-borderless-icon'],
+    [Status.PENDING, 'clock-borderless-icon'],
+    [Sentiment.POSITIVE, 'check-icon'],
+    [Sentiment.NEGATIVE, 'cross-icon'],
+    [Sentiment.NEUTRAL, 'info-icon'],
+  ])(
+    "renders the correct icon for '%s' sentiment",
+    (sentiment: Sentiment | Status, expectedIconTestId: string) => {
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
-    renderStatusIcon({ sentiment: Sentiment.NEGATIVE });
-    expect(screen.getByTestId('cross-icon')).toHaveClass('light');
-    cleanup();
+      const icon = screen.getByTestId(expectedIconTestId);
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveClass('status-icon');
+    },
+  );
 
-    renderStatusIcon();
-    expect(screen.getByTestId('info-icon')).toHaveClass('light');
-  });
 
   describe('accessible name', () => {
     it.each([