@transferwise/components 46.113.1 → 46.114.1

package/src/i18n/hu.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "kiválasztva",
   "neptune.DateLookup.twentyYears": "20 év",
   "neptune.DateLookup.year": "év",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Írj be egy pénznemet/országot",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Pénznem kiválasztása",
   "neptune.FlowNavigation.back": "vissza az előző lépéshez",
   "neptune.Info.ariaLabel": "További információ",
   "neptune.Label.optional": "(Válaszható)",

package/src/i18n/id.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "terpilih",
   "neptune.DateLookup.twentyYears": "20 tahun",
   "neptune.DateLookup.year": "tahun",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Ketik mata uang/negara",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Pilih mata uang",
   "neptune.FlowNavigation.back": "kembali ke langkah sebelumnya",
   "neptune.Info.ariaLabel": "Informasi lebih lanjut",
   "neptune.Label.optional": "(Opsional)",

package/src/i18n/it.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selezionata",
   "neptune.DateLookup.twentyYears": "20 anni",
   "neptune.DateLookup.year": "anno",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digita una valuta / paese",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Scegli la valuta",
   "neptune.FlowNavigation.back": "torna al passaggio precedente",
   "neptune.Info.ariaLabel": "Maggiori informazioni",
   "neptune.Label.optional": "(Facoltativo)",

package/src/i18n/ja.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "選択済み",
   "neptune.DateLookup.twentyYears": "20年",
   "neptune.DateLookup.year": "年",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "通貨または国をご入力ください",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "通貨の選択",
   "neptune.FlowNavigation.back": "前のステップに戻る",
   "neptune.Info.ariaLabel": "詳細",
   "neptune.Label.optional": "（任意）",

package/src/i18n/nl.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "geselecteerd",
   "neptune.DateLookup.twentyYears": "20 jaar",
   "neptune.DateLookup.year": "jaar",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
   "neptune.FlowNavigation.back": "terug naar vorige stap",
   "neptune.Info.ariaLabel": "Meer informatie",
   "neptune.Label.optional": "(Optioneel)",

package/src/i18n/pl.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "wybrano",
   "neptune.DateLookup.twentyYears": "20 lat",
   "neptune.DateLookup.year": "rok",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Wpisz walutę / kraj",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Wybierz walutę",
   "neptune.FlowNavigation.back": "wróć do poprzedniego kroku",
   "neptune.Info.ariaLabel": "Więcej informacji",
   "neptune.Label.optional": "(opcjonalne)",

package/src/i18n/pt.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selecionada",
   "neptune.DateLookup.twentyYears": "20 anos",
   "neptune.DateLookup.year": "ano",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Digite uma moeda / país",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecione a moeda",
   "neptune.FlowNavigation.back": "voltar à etapa anterior",
   "neptune.Info.ariaLabel": "Mais informações",
   "neptune.Label.optional": "(Opcional)",

package/src/i18n/ro.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selectată",
   "neptune.DateLookup.twentyYears": "20 de ani",
   "neptune.DateLookup.year": "an",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Tastează o monedă / țară",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Selectează moneda",
   "neptune.FlowNavigation.back": "înapoi la pasul anterior",
   "neptune.Info.ariaLabel": "Mai multe informații",
   "neptune.Label.optional": "(Opțional)",

package/src/i18n/ru.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "выбрано",
   "neptune.DateLookup.twentyYears": "20 лет",
   "neptune.DateLookup.year": "год",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Введите валюту/страну",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Выберите валюту",
   "neptune.FlowNavigation.back": "вернуться к предыдущему шагу",
   "neptune.Info.ariaLabel": "Подробнее",
   "neptune.Label.optional": "(необязательно)",

package/src/i18n/th.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "เลือกแล้ว",
   "neptune.DateLookup.twentyYears": "20 ปี",
   "neptune.DateLookup.year": "ปี",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "ป้อนสกุลเงิน / ประเทศ",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "เลือกสกุลเงิน",
   "neptune.FlowNavigation.back": "กลับไปที่ขั้นก่อนหน้า",
   "neptune.Info.ariaLabel": "ข้อมูลเพิ่มเติม",
   "neptune.Label.optional": "(ไม่บังคับ)",

package/src/i18n/tr.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "seçili",
   "neptune.DateLookup.twentyYears": "20 yıl",
   "neptune.DateLookup.year": "yıl",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Bir para birimi / ülke girin",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Para birimi seçin",
   "neptune.FlowNavigation.back": "önceki adıma dön",
   "neptune.Info.ariaLabel": "Daha fazla bilgi",
   "neptune.Label.optional": "(İsteğe bağlı)",

package/src/i18n/zh-CN.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "已选",
   "neptune.DateLookup.twentyYears": "20 年",
   "neptune.DateLookup.year": "年",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "输入货币/国家/地区",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "选择货币",
   "neptune.FlowNavigation.back": "返回上一步",
   "neptune.Info.ariaLabel": "更多信息",
   "neptune.Label.optional": "（可选）",

package/src/i18n/zh-HK.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "已選",
   "neptune.DateLookup.twentyYears": "20年",
   "neptune.DateLookup.year": "年",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "輸入貨幣或國家/地區",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "選擇貨幣",
   "neptune.FlowNavigation.back": "返回上一個步驟",
   "neptune.Info.ariaLabel": "更多資訊",
   "neptune.Label.optional": "（可選）",

package/src/inputs/_BottomSheet.tsx

@@ -43,7 +43,7 @@ export function BottomSheet({
   onClose,
   onCloseEnd,
 }: BottomSheetProps) {
-  useVirtualKeyboard();
+  useVirtualKeyboard(open);
 
   const { refs, context } = useFloating<Element>({
     open,

package/src/provider/theme/ThemeProvider.story.tsx

@@ -2,6 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ThemeProvider } from '@wise/components-theming';
 
 import Button from '../../button';
+import { lorem100 } from '../../test-utils';
+import Display from '../../display';
+import Logo from '../../logo';
+import Body from '../../body';
 
 export default {
   component: ThemeProvider,
@@ -17,3 +21,22 @@ export const PlatformTheme: Story = {
     </ThemeProvider>
   ),
 };
+
+export const BusinessLandingPage: Story = {
+  render: () => (
+    <ThemeProvider theme="business">
+      <Display type="display-large">Wise Business</Display>
+      <Body type="body-large-bold">
+        {lorem100}
+      </Body>
+      <ThemeProvider theme="business--forest-green">
+        <Body type="body-large">
+          {lorem100}
+        </Body>
+      </ThemeProvider>
+      <Body type="body-large">
+        {lorem100}
+      </Body>
+    </ThemeProvider>
+  ),
+};

package/src/table/Table.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, mockMatchMedia } from '../test-utils';
 import { userEvent } from '@testing-library/user-event';
 import '@testing-library/jest-dom';

package/src/table/Table.story.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Table from './Table';
 import { TableHeaderType } from './TableHeader';
 import { TableRowType, TableRowClickableType } from './TableRow';
+import { DirectDebits } from '@transferwise/icons';
 
 export default {
   component: Table,
@@ -46,6 +47,9 @@ const tableData = {
             secondaryText: 'Software Engineer',
             avatar: {
               profileName: 'Bob Brown',
+              badge: {
+                flagCode: 'GBP',
+              },
             },
           },
         },
@@ -105,7 +109,10 @@ const tableData = {
             primaryText: 'Jan Kowalski',
             secondaryText: 'Product Manager',
             avatar: {
-              profileName: 'Jan Kowalski',
+              asset: <DirectDebits />,
+              badge: {
+                status: 'warning',
+              },
             },
           },
         },
@@ -124,6 +131,7 @@ const tableData = {
         {
           cell: {
             type: 'currency',
+            flag: false,
             primaryCurrency: {
               amount: 23456.78,
               currency: 'usd',
@@ -166,6 +174,9 @@ const tableData = {
             secondaryText: 'Data Scientist',
             avatar: {
               profileName: 'William Davis',
+              badge: {
+                type: 'reference',
+              },
             },
           },
         },

package/src/table/TableCell.spec.tsx

@@ -107,12 +107,12 @@ describe('TableCell Component', () => {
     expect(screen.getByText('Frontend Developer')).toBeInTheDocument();
   });
 
-  it('renders `leading` cell type without media content when `profileName` is not provided', () => {
+  it('renders `leading` cell type without media content when `avatar` is not provided', () => {
     render(
       <TableCell
         cell={{
           ...cellContentMocks.leading,
-          avatar: { profileName: undefined },
+          avatar: undefined,
         }}
       />,
     );

package/src/table/TableCell.tsx

@@ -5,7 +5,7 @@ import React, { ImgHTMLAttributes } from 'react';
 import { clsx } from 'clsx';
 import Body from '../body';
 import Money, { MoneyProps } from '../money';
-import AvatarView from '../avatarView';
+import AvatarView, { AvatarViewProps } from '../avatarView';
 
 interface TableCellTypeProp {
   type: 'leading' | 'text' | 'currency' | 'status' | 'media';
@@ -30,9 +30,10 @@ export interface TableCellLeading
   extends TableCellTypeProp,
     TableCellTextProps,
     TableCellStatusProp {
-  avatar?: {
-    src?: string;
-    profileName?: string | null;
+  avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {
+    asset?: AvatarViewProps['children'];
+    /** @deprecated Use `"imgSrc" instead. */
+    src?: AvatarViewProps['imgSrc'];
   };
 }
 
@@ -43,6 +44,7 @@ export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
 export interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {
   primaryCurrency?: MoneyProps;
   secondaryCurrency?: MoneyProps;
+  flag?: boolean;
 }
 
 export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
@@ -65,13 +67,15 @@ const TableCell = ({ cell, alignment = 'left', className, colSpan, children }: T
   const getContentMedia = () => {
     let mediaContent = null;
 
-    if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {
+    if (cell?.type === 'leading' && cell?.avatar) {
       mediaContent = (
-        <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />
+        <AvatarView size={40} {...cell.avatar} imgSrc={cell.avatar.imgSrc ?? cell.avatar.src}>
+          {cell.avatar.asset}
+        </AvatarView>
       );
     }
 
-    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {
+    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {
       mediaContent = (
         <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />
       );