@transferwise/components 0.0.0-experimental-9f03da2 → 0.0.0-experimental-8b2286f

package/src/avatarView/Dot.less

@@ -5,11 +5,11 @@
 
   &-mask {
     mask-image: radial-gradient(
-      circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left
-        calc(100% - calc(var(--np-dot-size) / 2)),
-      transparent 0,
-      transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
-      black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px)
+        circle at bottom calc(100% - calc(var(--np-dot-size) / 2))
+                  left calc(100% - calc(var(--np-dot-size) / 2)),
+        transparent 0,
+        transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
+        black 0
     );
   }
 
@@ -19,7 +19,7 @@
     height: var(--np-dot-size);
     border-radius: var(--radius-full);
     right: 0;
-
+    
     &-notification {
       background-color: var(--color-sentiment-negative);
     }

package/src/avatarView/Dot.tsx

@@ -18,8 +18,6 @@ const MAP_STYLE_CONFIG = {
   48: { size: 14, offset: 2 },
   56: { size: 16, offset: 3 },
   72: { size: 20, offset: 3 },
-  88: { size: 24, offset: 4 },
-  96: { size: 24, offset: 4 },
 };
 
 export default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {

package/src/common/circle/Circle.tsx

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { useMedia } from '../hooks/useMedia';
 import { Breakpoint } from '../propsValues/breakpoint';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -33,8 +33,6 @@ const MAP_ICON_SIZE = {
   48: 24,
   56: 28,
   72: 36,
-  88: 44,
-  96: 48,
 };
 
 /**
@@ -50,8 +48,6 @@ const MAP_FONT_SIZE = {
   48: 22,
   56: 26,
   72: 30,
-  88: 36,
-  96: 40,
 };
 
 const Circle = forwardRef(function Circle(

package/src/expressiveMoneyInput/ExpressiveMoneyInput.css

@@ -21,6 +21,7 @@
   flex-grow: 1;
   text-align: right;
   background-color: transparent;
+  line-height: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;
@@ -29,6 +30,7 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
+  line-height: inherit;
 }
 .wds-currency-selector:disabled {
   opacity: 1 !important;

package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
 
 const meta: Meta<typeof ExpressiveMoneyInput> = {
@@ -21,3 +22,45 @@ export const WithAutofocus: Story = {
     autoFocus: true,
   },
 };
+
+const locales = [
+  { lang: 'en', label: 'English', currency: 'GBP' },
+  { lang: 'cs', label: 'Czech', currency: 'CZK' },
+  { lang: 'de', label: 'German', currency: 'EUR' },
+  { lang: 'es', label: 'Spanish', currency: 'EUR' },
+  { lang: 'fr', label: 'French', currency: 'EUR' },
+  { lang: 'hu', label: 'Hungarian', currency: 'HUF', supportsDecimals: false },
+  { lang: 'id', label: 'Indonesian', currency: 'IDR', supportsDecimals: false },
+  { lang: 'it', label: 'Italian', currency: 'EUR' },
+  { lang: 'ja', label: 'Japanese', currency: 'JPY', supportsDecimals: false },
+  { lang: 'nl', label: 'Dutch', currency: 'EUR' },
+  { lang: 'pl', label: 'Polish', currency: 'PLN' },
+  { lang: 'pt', label: 'Portuguese', currency: 'EUR' },
+  { lang: 'ro', label: 'Romanian', currency: 'RON' },
+  { lang: 'ru', label: 'Russian', currency: 'RUB' },
+  { lang: 'th', label: 'Thai', currency: 'THB' },
+  { lang: 'tr', label: 'Turkish', currency: 'TRY' },
+  { lang: 'uk', label: 'Ukrainian', currency: 'UAH' },
+  { lang: 'zh-CN', label: 'Simplified Chinese', currency: 'CNY' },
+  { lang: 'zh-HK', label: 'Traditional Chinese', currency: 'HKD' },
+];
+
+/**
+ * Verifies that the .wds-text-display--forced class correctly overrides locale-specific
+ * font restrictions (ja, zh-HK, zh-CN, th) so amounts render in Wise Sans across all
+ * supported locales. Each row represents a different language context.
+ */
+export const LocaleFontOverride = () => (
+  <>
+    {locales.map(({ lang, label, currency, supportsDecimals = true }) => (
+      <div key={lang} lang={lang} className="m-b-4">
+        <ExpressiveMoneyInput
+          label={`${label} locale (${lang})`}
+          currency={currency}
+          amount={supportsDecimals ? 1234.56 : 123456}
+          onAmountChange={fn()}
+        />
+      </div>
+    ))}
+  </>
+);

package/src/expressiveMoneyInput/amountInput/AmountInput.css

@@ -21,6 +21,7 @@
   flex-grow: 1;
   text-align: right;
   background-color: transparent;
+  line-height: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;
@@ -29,4 +30,5 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
+  line-height: inherit;
 }

package/src/expressiveMoneyInput/amountInput/AmountInput.less

@@ -29,6 +29,7 @@
     flex-grow: 1;
     text-align: right;
     background-color: transparent;
+    line-height: inherit;
 
     &:focus-visible {
       outline: none;
@@ -39,5 +40,6 @@
     flex-grow: 0;
     display: flex;
     align-items: center;
+    line-height: inherit;
   }
 }

package/src/expressiveMoneyInput/amountInput/AmountInput.tsx

@@ -291,7 +291,7 @@ export const AmountInput = ({
   return (
     <div className="wds-amount-input-container">
       <div
-        className={clsx('wds-amount-input-input-container', 'np-text-display-large')}
+        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}
         style={style}
       >
         <input

package/src/main.css

@@ -3238,7 +3238,16 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small {
+.np-text-display-small,
+.display-1--forced,
+.display-2--forced,
+.display-3--forced,
+.display-4--forced,
+.display-5--forced,
+.np-text-display-extra-large--forced,
+.np-text-display-large--forced,
+.np-text-display-medium--forced,
+.np-text-display-small--forced {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -26633,10 +26647,10 @@ a[data-toggle="tooltip"] {
 }
 
 .np-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
 }
 
 .np-dot-badge {
@@ -31052,6 +31066,7 @@ button.np-link {
   flex-grow: 1;
   text-align: right;
   background-color: transparent;
+  line-height: inherit;
 }
 
 .wds-amount-input-input:focus-visible {
@@ -31062,6 +31077,7 @@ button.np-link {
   flex-grow: 0;
   display: flex;
   align-items: center;
+  line-height: inherit;
 }
 
 .wds-currency-selector:disabled {

package/src/styles/less/core/_typography.less

@@ -8,7 +8,17 @@
 
 /* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.h1, .h2, .h3, .h4, .h5, .h6, .title-1, .title-2, .title-3, .title-4, .title-5,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5,
 h1,
 h2,
 h3,
@@ -114,8 +124,12 @@ h6,
 
 /* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-2, .body-3, .small, .tiny,
-body, small,
+.body-2,
+.body-3,
+.small,
+.tiny,
+body,
+small,
 .np-text-body-default {
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -139,7 +153,8 @@ body, small,
 
 /* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-1, .value,
+.body-1,
+.value,
 .np-text-body-large {
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-16);
@@ -204,8 +219,11 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: var(--font-family-display);
-  font-synthesis: none;
+  &,
+  &--forced {
+    font-family: var(--font-family-display);
+    font-synthesis: none;
+  }
 
   :lang(ja) &,
   :lang(th) &,
@@ -216,8 +234,12 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
     font-family: var(--font-family-regular);
+    line-height: var(--line-height-title);
   }
 }
 

package/src/styles/less/neptune.css

@@ -3238,7 +3238,16 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small {
+.np-text-display-small,
+.display-1--forced,
+.display-2--forced,
+.display-3--forced,
+.display-4--forced,
+.display-5--forced,
+.np-text-display-extra-large--forced,
+.np-text-display-large--forced,
+.np-text-display-medium--forced,
+.np-text-display-small--forced {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */