@transferwise/components 0.0.0-experimental-6a6c19f → 0.0.0-experimental-e72bc9f

package/src/i18n/hu.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Válaszható)",
   "neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
   "neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Írj be egy pénznemet vagy országot",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Pénznem kiválasztása",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Országazonosító",

package/src/i18n/id.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Opsional)",
   "neptune.Link.opensInNewTab": "(terbuka di tab baru)",
   "neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Ketik nama mata uang atau negara",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Pilih mata uang",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Kode negara",

package/src/i18n/it.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Facoltativo)",
   "neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
   "neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Inserisci una valuta o un paese",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Scegli la valuta",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Prefisso",

package/src/i18n/ja.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "（任意）",
   "neptune.Link.opensInNewTab": "（新しいタブで開きます）",
   "neptune.MoneyInput.Select.placeholder": "選択してください...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "通貨または国を入力してください",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "通貨を選択してください",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
   "neptune.PhoneNumberInput.countryCodeLabel": "国コード",

package/src/i18n/nl.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Optioneel)",
   "neptune.Link.opensInNewTab": "(wordt geopend in een nieuw tabblad)",
   "neptune.MoneyInput.Select.placeholder": "Selecteer een optie...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Typ een valuta of land",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecteer valuta",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecteer een optie...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Landcode",
@@ -35,7 +36,7 @@
   "neptune.StatusIcon.iconLabel.success": "Gelukt:",
   "neptune.StatusIcon.iconLabel.warning": "Waarschuwing:",
   "neptune.Summary.statusDone": "Item klaar",
-  "neptune.Summary.statusNotDone": "Item te doen",
+  "neptune.Summary.statusNotDone": "Te doen-item",
   "neptune.Summary.statusPending": "Item in behandeling",
   "neptune.Table.actionHeader": "Actie",
   "neptune.Table.emptyData": "Geen resultaten gevonden",
@@ -46,7 +47,7 @@
   "neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
   "neptune.Upload.csSuccessText": "Uploaden voltooid!",
   "neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
-  "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand.",
+  "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand",
   "neptune.Upload.psButtonText": "Annuleren",
   "neptune.Upload.psProcessingText": "Uploaden...",
   "neptune.Upload.retry": "Opnieuw proberen",
@@ -59,7 +60,7 @@
   "neptune.UploadButton.maximumFiles": "Maximaal {maxFiles} bestanden.",
   "neptune.UploadButton.uploadFile": "Bestand uploaden",
   "neptune.UploadButton.uploadFiles": "Bestanden uploaden",
-  "neptune.UploadInput.deleteModalBody": "Door dit bestand te verwijderen, wordt het uit ons systeem verwijderd.",
+  "neptune.UploadInput.deleteModalBody": "Als je dit bestand verwijdert, wordt het van ons systeem gewist.",
   "neptune.UploadInput.deleteModalCancelButtonText": "Annuleren",
   "neptune.UploadInput.deleteModalConfirmButtonText": "Verwijderen",
   "neptune.UploadInput.deleteModalTitle": "Weet je zeker dat je dit bestand wilt verwijderen?",

package/src/i18n/pl.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(opcjonalne)",
   "neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
   "neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Wpisz walutę lub kraj",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Wybierz walutę",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Numer kierunkowy",

package/src/i18n/pt.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(abre em uma nova aba)",
   "neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Digite uma moeda ou país",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecione a moeda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Código do país",

package/src/i18n/ro.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Opțional)",
   "neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
   "neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Tastează o monedă sau țară",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Selectează moneda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Codul țării",

package/src/i18n/ru.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(необязательно)",
   "neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
   "neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Введите валюту или страну",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Выберите валюту",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Код страны",

package/src/i18n/th.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(ไม่บังคับ)",
   "neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
   "neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "ป้อนสกุลเงินหรือประเทศ",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "เลือกสกุลเงิน",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.PhoneNumberInput.countryCodeLabel": "รหัสประเทศ",

package/src/i18n/tr.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(İsteğe bağlı)",
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "Bir para birimi veya ülke girin",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Para birimi seçin",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Ülke kodu",

package/src/i18n/zh-CN.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "（可选）",
   "neptune.Link.opensInNewTab": "（在新标签页中打开）",
   "neptune.MoneyInput.Select.placeholder": "请选择...",
+  "neptune.MoneyInput.Select.searchPlaceholder": "输入货币或国家/地区",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "选择货币",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
   "neptune.PhoneNumberInput.countryCodeLabel": "国家/地区代码",

package/src/i18n/zh-HK.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "（可選）",
   "neptune.Link.opensInNewTab": "（在新分頁中開啟）",
   "neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
+  "neptune.MoneyInput.Select.searchPlaceholder": "輸入貨幣或國家/地區",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
   "neptune.PhoneNumberInput.countryCodeLabel": "國家/地區代碼",

package/src/image/Image.spec.tsx

@@ -1,7 +1,7 @@
 import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
 import { render, fireEvent, screen } from '../test-utils';
 
-import { ImageProps } from './Image';
+import { EmptyTransparentImage, ImageProps } from './Image';
 
 import Image from '.';
 
@@ -32,14 +32,14 @@ describe('Image', () => {
   });
 
   describe('when lazy loading is enabled', () => {
-    it('renders the image with actual src even if element is not visible', () => {
+    it('renders the image with EmptyTransparentImage if element is not visible', () => {
       jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([false]);
       render(<Image {...props} />);
 
       const image: HTMLImageElement = screen.getByRole('img');
 
       expect(image).toBeInTheDocument();
-      expect(image.src).toStrictEqual(props.src);
+      expect(image.src).toStrictEqual(EmptyTransparentImage);
     });
 
     it('renders the image with src if element is visible', () => {

package/src/image/Image.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useRef, useCallback } from 'react';
+import { useRef } from 'react';
 
 import { useHasIntersected } from '../common/hooks';
 
@@ -16,6 +16,9 @@ export interface ImageProps {
   shrink?: boolean;
 }
 
+export const EmptyTransparentImage =
+  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
 const Image = ({
   id,
   src,
@@ -30,21 +33,20 @@ const Image = ({
 }: ImageProps) => {
   const elementReference = useRef<HTMLImageElement>(null);
   const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
+  let imageSource = src;
+  let imageOnLoad = onLoad;
 
-  // Internal onLoad handler that calls user onLoad only if hasIntersected is true
-  const handleLoad = useCallback(() => {
-    if (hasIntersected && onLoad) {
-      onLoad();
-    }
-  }, [hasIntersected, onLoad]);
+  if (loading === 'lazy' && !hasIntersected) {
+    imageSource = EmptyTransparentImage;
+    imageOnLoad = undefined;
+  }
 
   return (
     <img
       ref={elementReference}
       id={id}
       alt={alt}
-      src={src}
-      loading={loading}
+      src={imageSource}
       className={clsx([
         'tw-image',
         {
@@ -54,7 +56,7 @@ const Image = ({
         className,
       ])}
       role={role}
-      onLoad={handleLoad}
+      onLoad={imageOnLoad}
       onError={onError}
     />
   );

package/src/index.ts

@@ -109,6 +109,7 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
+export type { ListItemProps, ListItemAdditionalInfoProps, ListItemCheckboxProps } from './listItem';
 
 /**
  * Components
@@ -211,6 +212,7 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
+export { default as Item } from './table';
 
 /**
  * Hooks

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -6,11 +6,11 @@ import { Button, IconButton } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-import ListItem, { List } from '.';
+import LegacyListItem, { List } from '.';
 
 export default {
-  component: ListItem,
-  title: 'Other/ListItem',
+  component: LegacyListItem,
+  title: 'Other/LegacyListItem',
   tags: ['autodocs'],
 };
 
@@ -18,8 +18,8 @@ const Template = ({
   title = 'Wise',
   value = 'We’re building the world’s most international account',
   ...props
-}: Partial<ComponentProps<typeof ListItem>>) => {
-  return <ListItem title={title} value={value} {...props} />;
+}: Partial<ComponentProps<typeof LegacyListItem>>) => {
+  return <LegacyListItem title={title} value={value} {...props} />;
 };
 
 export const Basic = () => {

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -1,11 +1,11 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import ListItem, { List, type LegacyListItemProps } from '.';
+import LegacyListItem, { List, type LegacyListItemProps } from '.';
 
 export default {
-  component: ListItem,
-  title: 'Other/ListItem/tests',
+  component: LegacyListItem,
+  title: 'Other/LegacyListItem/tests',
 };
 
 export const LongText = () => {
@@ -21,13 +21,13 @@ export const LongText = () => {
   return (
     <div style={{ width: '35rem' }}>
       <List>
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Default behaviour"
           value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
         />
 
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Wrapping the long word with a 'span.text-word-break'"
           value={
@@ -41,7 +41,7 @@ export const LongText = () => {
           }
         />
 
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Using '&amp;shy;' HTML entitty"
           value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."

package/src/listItem/ListItem.css

@@ -0,0 +1,188 @@
+.wds-list-item {
+  padding: 16px;
+  padding: var(--size-16);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+}
+.wds-list-item-interactive {
+  cursor: pointer;
+}
+.wds-list-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-list-item-interactive:active {
+  background-color: var(--color-background-screen-active);
+}
+.wds-list-item-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.wds-list-item-body {
+  width: 100%;
+}
+.wds-list-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.wds-list-item-value {
+  flex: 0 0 auto;
+}
+.wds-list-item-control {
+  flex: 0 0 auto;
+}
+.wds-list-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.wds-list-item-spotlight-active:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-spotlight-active:active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.wds-list-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.wds-list-item-spotlight-inactive:hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-list-item-spotlight-inactive:active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-list-item-prompt {
+  display: inline-flex;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-list-item-prompt .np-prompt-icon {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt.np-prompt-interactive {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+}
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:hover,
+.np-prompt-interactive.wds-list-item-prompt.discount:hover,
+.np-prompt-interactive.wds-list-item-prompt.savings:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:active,
+.np-prompt-interactive.wds-list-item-prompt.discount:active,
+.np-prompt-interactive.wds-list-item-prompt.savings:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+}
+.wds-list-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.neutral a {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+}