@transferwise/components 0.0.0-experimental-d1cefe3 → 0.0.0-experimental-548b806

package/src/i18n/it.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numero di telefono",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
+  "neptune.SelectOption.action.label": "Scegli",
+  "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
   "neptune.StatusIcon.iconLabel.error": "Errore:",
   "neptune.StatusIcon.iconLabel.information": "Informazioni:",
   "neptune.StatusIcon.iconLabel.pending": "In attesa:",

package/src/i18n/ja.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "電話番号",
   "neptune.Select.searchPlaceholder": "検索する... ",
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
+  "neptune.SelectOption.action.label": "選択してください",
+  "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
   "neptune.StatusIcon.iconLabel.error": "エラー：",
   "neptune.StatusIcon.iconLabel.information": "情報：",
   "neptune.StatusIcon.iconLabel.pending": "保留中：",

package/src/i18n/nl.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefoonnummer",
   "neptune.Select.searchPlaceholder": "Zoeken...",
   "neptune.SelectInput.noResultsFound": "Geen resultaten gevonden",
+  "neptune.SelectOption.action.label": "Kiezen",
+  "neptune.SelectOption.selected.action.label": "Gekozen optie wijzigen",
   "neptune.StatusIcon.iconLabel.error": "Fout:",
   "neptune.StatusIcon.iconLabel.information": "Informatie:",
   "neptune.StatusIcon.iconLabel.pending": "In behandeling:",

package/src/i18n/pl.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numer telefonu",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
+  "neptune.SelectOption.action.label": "Wybierz",
+  "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
   "neptune.StatusIcon.iconLabel.error": "Błąd:",
   "neptune.StatusIcon.iconLabel.information": "Informacje:",
   "neptune.StatusIcon.iconLabel.pending": "W toku:",

package/src/i18n/pt.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Número de telefone",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
+  "neptune.SelectOption.action.label": "Selecionar",
+  "neptune.SelectOption.selected.action.label": "Altere a opção escolhida",
   "neptune.StatusIcon.iconLabel.error": "Erro:",
   "neptune.StatusIcon.iconLabel.information": "Informação:",
   "neptune.StatusIcon.iconLabel.pending": "Pendente:",

package/src/i18n/ro.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Număr de telefon",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
+  "neptune.SelectOption.action.label": "Alege",
+  "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
   "neptune.StatusIcon.iconLabel.error": "Eroare:",
   "neptune.StatusIcon.iconLabel.information": "Informații:",
   "neptune.StatusIcon.iconLabel.pending": "În așteptare:",

package/src/i18n/ru.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефона",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
+  "neptune.SelectOption.action.label": "Выбрать",
+  "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
   "neptune.StatusIcon.iconLabel.error": "Ошибка:",
   "neptune.StatusIcon.iconLabel.information": "Информация:",
   "neptune.StatusIcon.iconLabel.pending": "В ожидании:",

package/src/i18n/th.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
+  "neptune.SelectOption.action.label": "เลือก",
+  "neptune.SelectOption.selected.action.label": "เปลี่ยนตัวเลือกที่เลือกไว้",
   "neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",
   "neptune.StatusIcon.iconLabel.information": "ข้อมูล:",
   "neptune.StatusIcon.iconLabel.pending": "รอดำเนินการ:",

package/src/i18n/tr.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefon numarası",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
+  "neptune.SelectOption.action.label": "Seç",
+  "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
   "neptune.StatusIcon.iconLabel.error": "Hata:",
   "neptune.StatusIcon.iconLabel.information": "Bilgi:",
   "neptune.StatusIcon.iconLabel.pending": "Bekliyor:",

package/src/i18n/zh-CN.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "电话号码",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.SelectInput.noResultsFound": "找不到结果",
+  "neptune.SelectOption.action.label": "选择",
+  "neptune.SelectOption.selected.action.label": "更改所选选项",
   "neptune.StatusIcon.iconLabel.error": "错误:",
   "neptune.StatusIcon.iconLabel.information": "信息:",
   "neptune.StatusIcon.iconLabel.pending": "待处理:",

package/src/i18n/zh-HK.json

@@ -28,6 +28,8 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "電話號碼",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
+  "neptune.SelectOption.action.label": "選擇",
+  "neptune.SelectOption.selected.action.label": "更改已選選項",
   "neptune.StatusIcon.iconLabel.error": "錯誤:",
   "neptune.StatusIcon.iconLabel.information": "資訊:",
   "neptune.StatusIcon.iconLabel.pending": "處理中:",

package/src/index.ts

@@ -108,6 +108,7 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
+export type { ListItemProps, ListItemAdditionalInfoProps, ListItemCheckboxProps } from './listItem';
 
 /**
  * Components
@@ -209,6 +210,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/listItem/ListItem.css

@@ -0,0 +1,223 @@
+.wds-list-item {
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+}
+.wds-list-item .partially-interactive {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.wds-list-item label,
+.wds-list-item a {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.wds-list-item-interactive label {
+  cursor: pointer;
+}
+.wds-list-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
+  background-color: var(--Button-background-hover);
+  color: var(--Button-color-hover);
+  transition: none;
+}
+.wds-list-item-interactive:active {
+  background-color: var(--color-background-screen-active);
+}
+.wds-list-item-interactive .wds-list-item-control .wds-Button {
+  transition: none;
+}
+.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-navigation,
+.wds-list-item-navigation:hover,
+.wds-list-item-navigation:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.wds-list-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):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:not(.disabled):not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):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));
+}

package/src/listItem/ListItem.less

@@ -0,0 +1,223 @@
+.wds-list-item {
+    list-style: none;
+    width: 100%;
+    padding: 0;
+    border-radius: var(--radius-medium);
+    background-color: var(--color-background-screen);
+    gap: var(--size-16);
+
+    .partially-interactive {
+      padding: var(--size-16);
+    }
+
+    label, a {
+      padding: var(--size-16);
+    }
+
+    &-interactive {
+      label {
+        cursor: pointer;
+      }
+      &:hover {
+          background-color: var(--color-background-screen-hover);
+          .wds-list-item-control {
+             .wds-Button {
+               background-color: var(--Button-background-hover);
+               color: var(--Button-color-hover);
+               transition: none;
+             }
+         }
+      }
+      &:active {
+          background-color: var(--color-background-screen-active);
+      }
+      .wds-list-item-control {
+         .wds-Button {
+           transition: none;
+         }
+       }
+    }
+
+    &-media {
+
+        &-image {
+            width: var(--item-media-image-size);
+            height: var(--item-media-image-size);
+        }
+    }
+
+    &-body {
+      width: 100%;
+    }
+
+    &-title {
+        color: var(--color-content-primary);
+    }
+
+    &-additional-info {
+        color: var(--color-content-tertiary);
+    }
+
+    &-value {
+      flex: 0 0 auto;
+    }
+    
+    &-control {
+        flex: 0 0 auto;
+    }
+
+    &-navigation {
+      &, &:hover, &:focus {
+        text-decoration: none;
+      }
+    }
+
+    &.disabled {
+      filter: none;
+      opacity: 1;
+
+      label {
+        cursor: not-allowed;
+      }
+
+      .tw-icon-backslash-circle {
+        color: var(--color-content-tertiary);
+      }
+    }
+
+    &-spotlight {
+        &-active {
+            background-color: var(--color-background-neutral);
+            &:not(.disabled, :disabled):hover {
+                background-color: var(--color-background-neutral-hover);
+            }
+            &:not(.disabled, :disabled):active {
+                background-color: var(--color-background-neutral-active);
+            }
+        }
+
+        &-inactive {
+            background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+            border: 1px dashed var(--color-border-neutral);
+            &:not(.disabled, :disabled):hover {
+                background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+            }
+            &:not(.disabled, :disabled):active {
+                background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+            }
+        }
+    }
+
+    &-prompt {
+        display: inline-flex;
+        padding-top: calc(var(--padding-x-small) / 2);
+        padding-bottom: calc(var(--padding-x-small) / 2);
+        padding-left: calc(var(--padding-x-small) - 1px);
+        padding-right: var(--padding-x-small);
+        border-radius: var(--radius-small);
+        word-break: break-word;
+        overflow-wrap: break-word;
+        
+        .np-prompt-icon {
+          padding-right: calc(var(--size-12) / 2);
+          padding-top: calc(var(--size-4) - 1px);
+          padding-bottom: calc(var(--size-4) - 1px);
+      
+          .tw-icon-tags,
+          .tw-icon-confetti {
+            color: var(--color-sentiment-positive-primary);
+          }
+        }
+      
+        a {
+          text-underline-offset: calc(var(--size-4) / 2); 
+        }
+      
+        &.np-prompt-interactive {
+          text-decoration: none;
+          cursor: pointer;
+          border: none;
+        }
+      
+        &.negative {
+          background-color: var(--color-sentiment-negative-secondary);
+          color: var(--color-sentiment-negative-primary);
+          a {
+            color: var(--color-sentiment-negative-primary);
+            &:hover {
+              color: var(--color-sentiment-negative-primary-hover);
+            }
+            &:active {
+              color: var(--color-sentiment-negative-primary-active);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+            }
+          }
+        }
+        &.positive,
+        &.discount,
+        &.savings {
+          background-color: var(--color-sentiment-positive-secondary);
+          color: var(--color-sentiment-positive-primary);
+          a {
+            color: var(--color-sentiment-positive-primary);
+            &:hover {
+              color: var(--color-sentiment-positive-primary-hover);
+            }
+            &:active {
+              color: var(--color-sentiment-positive-primary-active);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+            }
+          }
+        }
+        &.neutral {
+          background-color: var(--color-background-neutral);
+          color: var(--color-content-primary);
+          a {
+            color: var(--color-content-primary);
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: var(--color-background-neutral-hover);
+            }
+            &:active {
+              background-color: var(--color-background-neutral-active);
+            }
+          }
+        }
+        &.warning {
+          background-color: var(--color-sentiment-warning-secondary);
+          color: var(--color-sentiment-warning-content);
+          a {
+            color: var(--color-sentiment-warning-content);
+            &:hover {
+              color: var(--color-sentiment-warning-content-hover);
+            }
+            &:active {
+              color: var(--color-sentiment-warning-content-active);
+            }
+          }
+          .np-prompt-interactive& {
+            &:hover {
+              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+            }
+            &:active {
+              background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+            }
+          }
+        } 
+    }
+}

package/src/listItem/ListItem.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '../test-utils';
+import ListItem from './ListItem';
+
+describe('ListItem', () => {
+  describe('spotlight', () => {
+    it('only fully interactive variant can have spotlight:active', () => {
+      render(<ListItem title="Test Title" spotlight="active" control={<ListItem.Navigation />} />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-active');
+    });
+
+    it('only fully interactive variant can have spotlight:inactive', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          spotlight="inactive"
+          control={<ListItem.Switch onClick={() => {}} />}
+        />,
+      );
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-interactive');
+      expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
+    });
+
+    it('non interactive variant can have spotlight', () => {
+      render(<ListItem title="Test Title" spotlight="inactive" />);
+      const listItem = screen.getByRole('listitem');
+      expect(listItem).toHaveClass('wds-list-item-non-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-interactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
+      expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
+    });
+  });
+});