@transferwise/components 46.143.0 → 46.144.0

package/src/i18n/id.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Perluas",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Ketik mata uang/negara",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Pilih mata uang",
+  "neptune.Field.characterCount": "{current} dari {max} karakter digunakan",
   "neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",
   "neptune.Info.ariaLabel": "Informasi lebih lanjut",
   "neptune.Label.optional": "(Opsional)",

package/src/i18n/it.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Espandi",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digita una valuta / paese",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Scegli la valuta",
+  "neptune.Field.characterCount": "{current} di {max} caratteri utilizzati",
   "neptune.FlowNavigation.back": "torna al passaggio precedente",
   "neptune.Info.ariaLabel": "Maggiori informazioni",
   "neptune.Label.optional": "(Facoltativo)",

package/src/i18n/ja.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "開く",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "通貨または国をご入力ください",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "通貨の選択",
+  "neptune.Field.characterCount": "{current}/{max}文字を使用",
   "neptune.FlowNavigation.back": "前のステップに戻る",
   "neptune.Info.ariaLabel": "詳細",
   "neptune.Label.optional": "（任意）",

package/src/i18n/nl.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Uitvouwen",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
+  "neptune.Field.characterCount": "{current} van {max} tekens gebruikt",
   "neptune.FlowNavigation.back": "terug naar vorige stap",
   "neptune.Info.ariaLabel": "Meer informatie",
   "neptune.Label.optional": "(Optioneel)",

package/src/i18n/pl.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Rozwiń",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Wpisz walutę / kraj",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Wybierz walutę",
+  "neptune.Field.characterCount": "Użyto {current} z {max} znaków",
   "neptune.FlowNavigation.back": "wróć do poprzedniego kroku",
   "neptune.Info.ariaLabel": "Więcej informacji",
   "neptune.Label.optional": "(opcjonalne)",

package/src/i18n/pt.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Ver mais",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digite uma moeda / país",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecione a moeda",
+  "neptune.Field.characterCount": "{current} de {max} caracteres usados",
   "neptune.FlowNavigation.back": "voltar à etapa anterior",
   "neptune.Info.ariaLabel": "Mais informações",
   "neptune.Label.optional": "(Opcional)",

package/src/i18n/ro.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Extinde",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Tastează o monedă / țară",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selectează moneda",
+  "neptune.Field.characterCount": "{current} din {max} caractere utilizate",
   "neptune.FlowNavigation.back": "înapoi la pasul anterior",
   "neptune.Info.ariaLabel": "Mai multe informații",
   "neptune.Label.optional": "(Opțional)",

package/src/i18n/ru.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Развернуть",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Введите валюту/страну",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Выберите валюту",
+  "neptune.Field.characterCount": "Использовано символов: {current} из {max}",
   "neptune.FlowNavigation.back": "вернуться к предыдущему шагу",
   "neptune.Info.ariaLabel": "Подробнее",
   "neptune.Label.optional": "(необязательно)",

package/src/i18n/th.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "ขยาย",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "ป้อนสกุลเงิน / ประเทศ",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "เลือกสกุลเงิน",
+  "neptune.Field.characterCount": "ใช้แล้ว {current} จากจำกัด {max} ตัวอักษร",
   "neptune.FlowNavigation.back": "กลับไปที่ขั้นก่อนหน้า",
   "neptune.Info.ariaLabel": "ข้อมูลเพิ่มเติม",
   "neptune.Label.optional": "(ไม่บังคับ)",

package/src/i18n/tr.json

@@ -20,6 +20,7 @@
   "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.Field.characterCount": "{current}/{max} karakter kullanıldı",
   "neptune.FlowNavigation.back": "önceki adıma dön",
   "neptune.Info.ariaLabel": "Daha fazla bilgi",
   "neptune.Label.optional": "(İsteğe bağlı)",

package/src/i18n/uk.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Розгорнути",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
+  "neptune.Field.characterCount": "Використано {current} з {max} символів",
   "neptune.FlowNavigation.back": "назад до попереднього кроку",
   "neptune.Info.ariaLabel": "Більше відомостей",
   "neptune.Label.optional": "(Необов’язково)",

package/src/i18n/zh-CN.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "展开",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "输入货币/国家/地区",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "选择货币",
+  "neptune.Field.characterCount": "已使用 {current} 个字符，最多 {max} 个",
   "neptune.FlowNavigation.back": "返回上一步",
   "neptune.Info.ariaLabel": "更多信息",
   "neptune.Label.optional": "（可选）",

package/src/i18n/zh-HK.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "展開",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "輸入貨幣或國家/地區",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "選擇貨幣",
+  "neptune.Field.characterCount": "已輸入{current}個字元（上限為{max}個字元）",
   "neptune.FlowNavigation.back": "返回上一個步驟",
   "neptune.Info.ariaLabel": "更多資訊",
   "neptune.Label.optional": "（可選）",

package/src/index.ts

@@ -4,6 +4,8 @@
  * Types
  */
 export type { ContainerProps } from './container';
+export type { LogoProps } from './logo';
+export type { FlowNavigationProps } from './flowNavigation';
 export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
@@ -170,7 +172,7 @@ export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
 export { default as Emphasis } from './emphasis';
 export { Field } from './field/Field';
-export { default as FlowNavigation } from './flowNavigation/FlowNavigation';
+export { default as FlowNavigation } from './flowNavigation';
 export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';

package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css

@@ -6,6 +6,10 @@
   border-radius: var(--size-10);
   text-align: start;
 }
+.np-button-input .np-select-input-option-content-icon {
+  padding-right: 1px;
+  padding-left: 1px;
+}
 .np-button-input:has(.np-select-input-option-description-in-trigger) {
   height: auto !important;
   align-content: start;

package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.less

@@ -5,6 +5,11 @@
   border-radius: var(--size-10);
   text-align: start;
 
+  .np-select-input-option-content-icon {
+    padding-right: 1px;
+    padding-left: 1px;
+  }
+
   // Using !important to overwrite styles from .form-control and inputClassNameBase util, which also use !important
   &:has(.np-select-input-option-description-in-trigger) {
     height: auto !important;

package/src/inputs/SelectInput/SelectInput.css

@@ -102,6 +102,10 @@
   border-radius: var(--size-10);
   text-align: start;
 }
+.np-button-input .np-select-input-option-content-icon {
+  padding-right: 1px;
+  padding-left: 1px;
+}
 .np-button-input:has(.np-select-input-option-description-in-trigger) {
   height: auto !important;
   align-content: start;

package/src/inputs/SelectInput/_stories/SelectInput.test.story.tsx

@@ -1927,3 +1927,43 @@ export const Zoom400: Story<TestMonth | null> = {
   },
   ...withVariantConfig(['400%']),
 };
+
+const jpy = { code: 'JPY', name: 'Japanese yen' } satisfies TestCurrency;
+const flagClippingItems = [testCurrencyOption(jpy)];
+const flagClippingArgs = {
+  items: flagClippingItems,
+  value: jpy,
+  size: 'lg',
+  renderValue: (currency: TestCurrency) => (
+    <SelectInputOptionContent
+      title={currency.code}
+      icon={<Flag code={currency.code} intrinsicSize={24} />}
+    />
+  ),
+} satisfies Story<TestCurrency>['args'];
+
+const singleCurrencyMoneyInputProps = {
+  id: 'flag-clipping-money-input',
+  amount: 1234.14,
+  currencies: [],
+  selectedCurrency: {
+    value: 'EUR',
+    label: 'EUR',
+    note: 'Euro',
+    currency: 'eur',
+    searchable: 'Spain, Germany, France, Austria',
+  },
+  onAmountChange: fn() satisfies Mock,
+  onCurrencyChange: fn() satisfies Mock,
+};
+
+export const FlagClipping: Story<TestCurrency> = {
+  render: (args) => (
+    <div style={{ display: 'grid', gap: 24, width: 360 }}>
+      <Field label="Flag clipping">
+        <SelectInput {...args} />
+      </Field>
+    </div>
+  ),
+  args: flagClippingArgs,
+};

package/src/logo/index.ts

@@ -1 +1,2 @@
 export { default, LogoType } from './Logo';
+export type { LogoProps } from './Logo';

package/src/main.css

@@ -30117,6 +30117,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   text-align: start;
 }
 
+.np-button-input .np-select-input-option-content-icon {
+  padding-right: 1px;
+  padding-left: 1px;
+}
+
 .np-button-input:has(.np-select-input-option-description-in-trigger) {
   height: auto !important;
   align-content: start;
@@ -30902,6 +30907,11 @@ button.np-link {
   font-weight: var(--font-weight-semi-bold);
 }
 
+.tw-money-input .money-input-currency-flag {
+  display: flex;
+  align-items: center;
+}
+
 .tw-money-input.input-group-sm .form-control {
   min-height: 34px;
 }
@@ -31952,7 +31962,13 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 @media (max-width: 599.98px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+  .wds-action-prompt .wds-action-prompt__action {
+    width: 100%;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .wds-action-prompt--with-two-actions .wds-action-prompt__action {
     flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
     min-width: -moz-fit-content;
     min-width: fit-content;

package/src/moneyInput/MoneyInput.css

@@ -15,6 +15,10 @@
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+.tw-money-input .money-input-currency-flag {
+  display: flex;
+  align-items: center;
+}
 .tw-money-input.input-group-sm .form-control {
   min-height: 34px;
 }

package/src/moneyInput/MoneyInput.less

@@ -12,6 +12,11 @@
     }
   }
 
+  .money-input-currency-flag {
+    display: flex;
+    align-items: center;
+  }
+
   &.input-group-sm {
     .form-control {
       min-height: 34px;
@@ -32,7 +37,7 @@
 
   .input-group-addon {
     flex-shrink: 0;
-    
+
     &:not(.amount-currency-select-btn) {
       display: flex;
       align-items: center;
@@ -44,7 +49,7 @@
       }
     }
   }
-  
+
   .amount-currency-select-btn {
     flex-shrink: 0;
     width: auto;
@@ -55,20 +60,20 @@
     border-top-right-radius: var(--radius-small) !important;
     border-bottom-right-radius: var(--radius-small) !important;
 
-    &:not(.disabled,:disabled):focus-visible {
+    &:not(.disabled, :disabled):focus-visible {
       border-radius: var(--radius-small) !important;
     }
 
     &,
     &:active,
-    &:not(.disabled,:disabled):hover,
+    &:not(.disabled, :disabled):hover,
     .has-error &,
-    .has-error &:not(.disabled,:disabled):hover {
+    .has-error &:not(.disabled, :disabled):hover {
       box-shadow: none;
     }
   }
 
-  &:not(.disabled,:disabled):not(.np-button-input:active):has(.np-button-input:focus-visible) {
+  &:not(.disabled, :disabled):not(.np-button-input:active):has(.np-button-input:focus-visible) {
     box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
   }
 }

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -13,7 +13,12 @@
      object-fit: contain;
 }
 @media (max-width: 599.98px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+  .wds-action-prompt .wds-action-prompt__action {
+    width: 100%;
+  }
+}
+@media (max-width: 599.98px) {
+  .wds-action-prompt--with-two-actions .wds-action-prompt__action {
     flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
     min-width: -moz-fit-content;
     min-width: fit-content;

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -10,13 +10,17 @@
     object-fit: contain;
   }
 
+  @media (--screen-xs-max) {
+    .wds-action-prompt__action {
+      width: 100%;
+    }
+  }
+
   &--with-two-actions {
     @media (--screen-xs-max) {
-      .wds-prompt__actions-wrapper {
-        .wds-Button {
-          flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-          min-width: fit-content;
-        }
+      .wds-action-prompt__action {
+        flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+        min-width: fit-content;
       }
     }
   }

package/src/prompt/ActionPrompt/ActionPrompt.test.tsx

@@ -1,5 +1,4 @@
 import { userEvent } from '@testing-library/user-event';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { ActionPrompt, ActionPromptProps } from './ActionPrompt';
 
@@ -221,62 +220,4 @@ describe('ActionPrompt', () => {
       expect(screen.getByTestId('prompt')).not.toHaveClass('wds-action-prompt--with-two-actions');
     });
   });
-
-  describe('Responsive behavior', () => {
-    it('renders buttons as block on mobile', () => {
-      const mockMatchMediaFn = window.matchMedia as jest.Mock;
-      mockMatchMediaFn.mockImplementation((query: string) => ({
-        matches: query !== `(min-width: ${Breakpoint.SMALL}px)`,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      }));
-
-      render(
-        <ActionPrompt
-          {...defaultProps}
-          actionSecondary={{ label: 'Secondary', onClick: jest.fn() }}
-        />,
-      );
-
-      expect(screen.getByRole('button', { name: 'Primary Action' })).toHaveClass(
-        'wds-Button--block',
-      );
-      expect(screen.getByRole('button', { name: 'Secondary' })).toHaveClass(
-        'wds-Button--block'
-      );
-    });
-
-    it('renders buttons as inline on desktop', () => {
-      const mockMatchMediaFn = window.matchMedia as jest.Mock;
-      mockMatchMediaFn.mockImplementation((query: string) => ({
-        matches: query === `(min-width: ${Breakpoint.SMALL}px)`,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      }));
-
-      render(
-        <ActionPrompt
-          {...defaultProps}
-          actionSecondary={{ label: 'Secondary', onClick: jest.fn() }}
-        />,
-      );
-
-      expect(screen.getByRole('button', { name: 'Primary Action' })).not.toHaveClass(
-        'wds-Button--block',
-      );
-      expect(screen.getByRole('button', { name: 'Secondary' })).not.toHaveClass(
-        'wds-Button--block',
-      );
-    });
-  });
 });

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,5 +1,4 @@
 import { AriaAttributes, ReactNode, useId } from 'react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import { clsx } from 'clsx';
 
 import Body from '../../body';
@@ -7,7 +6,6 @@ import Button from '../../button';
 import { Typography } from '../../common';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
-import { useScreenSize } from '../../common/hooks/useScreenSize';
 import { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';
 
 export type ActionPromptProps = {
@@ -50,8 +48,6 @@ export const ActionPrompt = ({
   'data-testid': testId,
   'aria-label': ariaLabel,
 }: ActionPromptProps) => {
-  const isMobile = !useScreenSize(Breakpoint.SMALL);
-
   const mediaId = useId();
   const titleId = useId();
   const descId = useId();
@@ -87,11 +83,11 @@ export const ActionPrompt = ({
           {actionSecondary && (
             // @ts-expect-error onClick type mismatch
             <Button
+              className="wds-action-prompt__action"
               v2
               size="md"
               priority="secondary"
               href={actionSecondary.href}
-              block={isMobile}
               onClick={actionSecondary?.onClick}
             >
               {actionSecondary.label}
@@ -99,11 +95,11 @@ export const ActionPrompt = ({
           )}
           {/* @ts-expect-error onClick type mismatch */}
           <Button
+            className="wds-action-prompt__action"
             v2
             size="md"
             priority="primary"
             href={action.href}
-            block={isMobile}
             onClick={action.onClick}
           >
             {action.label}