@transferwise/components 0.0.0-experimental-8f9699a → 0.0.0-experimental-dabc13b

package/src/dateLookup/tableLink/TableLink.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+import { injectIntl } from 'react-intl';
+
+import messages from '../DateLookup.messages';
+
+class TableLink extends PureComponent {
+  onClick = (event) => {
+    event.preventDefault();
+    if (!this.props.disabled) {
+      this.props.onClick(this.props.item);
+    }
+  };
+
+  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
+    if (active) {
+      return `${longTitle || title}, ${formatMessage(messages.selected)} ${formatMessage(
+        messages[type],
+      )}`;
+    }
+    return longTitle || title;
+  };
+
+  render() {
+    const {
+      item,
+      type,
+      title,
+      longTitle,
+      active,
+      disabled,
+      today,
+      intl: { formatMessage },
+    } = this.props;
+    return (
+      <>
+        <button
+          type="button"
+          className={`tw-date-lookup-${type}-option ${active ? 'active' : ''} ${
+            today ? 'today' : ''
+          } np-text-body-default-bold`}
+          disabled={disabled}
+          aria-label={this.calculateAriaLabel(longTitle, title, active, type, formatMessage)}
+          aria-pressed={active}
+          onClick={this.onClick}
+        >
+          {title || item}
+        </button>
+      </>
+    );
+  }
+}
+
+TableLink.propTypes = {
+  item: PropTypes.number.isRequired, // day (1-31), month (0-11) or year (2018 etc)
+  type: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  title: PropTypes.string,
+  longTitle: PropTypes.string,
+  active: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  today: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+TableLink.defaultProps = {
+  title: null,
+  longTitle: null,
+};
+
+export default injectIntl(TableLink);

package/src/dateLookup/tableLink/TableLink.spec.js

@@ -1,9 +1,15 @@
 import { shallow } from 'enzyme';
-import { useIntl } from 'react-intl';
 
 import TableLink from '.';
 
-jest.mock('react-intl');
+const formatMessage = (id) => id.defaultMessage;
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return <Component {...props} intl={{ formatMessage }} />;
+    },
+  defineMessages: (translations) => translations,
+}));
 
 jest.mock('../DateLookup.messages', () => ({
   selected: {
@@ -23,15 +29,18 @@ jest.mock('../DateLookup.messages', () => ({
     defaultMessage: 'year',
   },
 }));
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return <Component {...props} intl={{ formatMessage }} />;
+    },
+}));
 
 describe('TableLink', () => {
   let component;
   let props;
 
   beforeEach(() => {
-    useIntl.mockReturnValue({
-      formatMessage: (message) => message.defaultMessage,
-    });
     props = {
       item: 12,
       type: 'day',
@@ -42,7 +51,7 @@ describe('TableLink', () => {
       title: '12',
       longTitle: '12/12/1212',
     };
-    component = shallow(<TableLink {...props} />);
+    component = shallow(<TableLink {...props} />).dive();
   });
 
   it('shows item value', () => {

package/src/dateLookup/yearCalendar/table/YearCalendarTable.js

@@ -2,7 +2,6 @@ import { formatDate } from '@transferwise/formatting';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
 const ROWS = 5;
@@ -12,38 +11,17 @@ const YEAR_ONLY_FORMAT = { year: 'numeric' };
 const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
   const { locale } = useIntl();
   const startYear = viewYear - (viewYear % 20);
-  const getLink = (year) => {
-    return (
-      <TableLink
-        item={year}
-        type="year"
-        title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
-        active={isActive(year)}
-        disabled={isDisabled(year)}
-        today={isThisYear(year)}
-        autofocus={autofocusYear === year}
-        onClick={onSelect}
-      />
-    );
-  };
-
-  const isActive = (year) => {
-    return !!(selectedDate && year === selectedDate.getFullYear());
-  };
-
-  const isThisYear = (year) => {
-    return year === new Date().getFullYear();
-  };
-
-  const isDisabled = (year) => {
-    return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));
-  };
-
-  const autofocusYear = (() => {
-    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
-    return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });
-  })();
-
+  const getLink = (year) => (
+    <TableLink
+      item={year}
+      type="year"
+      title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
+      active={!!(selectedDate && year === selectedDate.getFullYear())}
+      disabled={!!((min && year < min.getFullYear()) || (max && year > max.getFullYear()))}
+      today={year === new Date().getFullYear()}
+      onClick={onSelect}
+    />
+  );
   return (
     <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
       <thead className="sr-only">

package/src/dateLookup/yearCalendar/table/YearCalendarTable.spec.js

@@ -90,32 +90,6 @@ describe('YearCalendarTable', () => {
     expect(component.find('.sr-only').text()).toBe('Enter date..');
   });
 
-  it('sets autofocus to true when 2002 is the selected year', () => {
-    component.setProps({ selectedDate: new Date(2002, 5, 1) });
-    expect(getTableLinkAt(2).prop('autofocus')).toBe(true);
-  });
-
-  it('sets autofocus to true when selected year is null and current year is visible', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: null,
-      viewYear: today.getFullYear(),
-    });
-    expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
-  });
-
-  it('sets autofocus to true on the second year when the first year is disabled', () => {
-    component.setProps({
-      selectedDate: null,
-      viewYear: 2000,
-      min: new Date(2001, 1, 1),
-      isDisabled: (month) => month === 0,
-    });
-
-    expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
-    expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
-  });
-
   const getTableLinkAt = (i) => component.find('[type="year"]').at(i);
   const getTableLink = () => component.find('[type="year"]');
 });

package/src/i18n/cs.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Vybrat možnost...",
   "neptune.Select.searchPlaceholder": "Hledat...",
+  "neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
   "neptune.Summary.statusDone": "Položka dokončena",
   "neptune.Summary.statusNotDone": "Položka k dokončení",
   "neptune.Summary.statusPending": "Čekající položka",

package/src/i18n/de.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
   "neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
+  "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
   "neptune.Summary.statusPending": "Schritt ausstehend",

package/src/i18n/es.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
   "neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
   "neptune.Select.searchPlaceholder": "Buscar...",
+  "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
   "neptune.Summary.statusDone": "Apartado listo",
   "neptune.Summary.statusNotDone": "Apartado a completar",
   "neptune.Summary.statusPending": "Apartado pendiente",

package/src/i18n/fr.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
   "neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
   "neptune.Select.searchPlaceholder": "Recherche...",
+  "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",

package/src/i18n/hu.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
   "neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
   "neptune.Select.searchPlaceholder": "Keresés...",
+  "neptune.SelectInput.noResultsFound": "Nincs találat",
   "neptune.Summary.statusDone": "Kész",
   "neptune.Summary.statusNotDone": "Hátravan",
   "neptune.Summary.statusPending": "Függőben",

package/src/i18n/id.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(terbuka di tab baru)",
   "neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
   "neptune.Select.searchPlaceholder": "Cari...",
+  "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
   "neptune.Summary.statusDone": "Item selesai",
   "neptune.Summary.statusNotDone": "Item yang harus dilakukan",
   "neptune.Summary.statusPending": "Item tertunda",

package/src/i18n/it.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
   "neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
   "neptune.Select.searchPlaceholder": "Cerca...",
+  "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
   "neptune.Summary.statusDone": "Completato",
   "neptune.Summary.statusNotDone": "Da completare",
   "neptune.Summary.statusPending": "In corso",

package/src/i18n/ja.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "（新しいタブで開きます）",
   "neptune.MoneyInput.Select.placeholder": "選択してください...",
   "neptune.Select.searchPlaceholder": "検索... ",
+  "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
   "neptune.Summary.statusDone": "完了",
   "neptune.Summary.statusNotDone": "未対応",
   "neptune.Summary.statusPending": "保留中",

package/src/i18n/pl.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
   "neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
+  "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",
   "neptune.Summary.statusPending": "Czynność oczekująca",

package/src/i18n/pt.json

@@ -7,17 +7,18 @@
   "neptune.DateInput.month.label": "Mês",
   "neptune.DateInput.year.label": "Ano",
   "neptune.DateLookup.day": "dia",
-  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.goTo20YearView": "Acessar a visualização de 20 anos",
   "neptune.DateLookup.month": "mês",
   "neptune.DateLookup.next": "próximo",
   "neptune.DateLookup.previous": "anterior",
   "neptune.DateLookup.selected": "selecionada",
   "neptune.DateLookup.twentyYears": "20 anos",
   "neptune.DateLookup.year": "ano",
-  "neptune.FlowNavigation.back": "back to previous step",
-  "neptune.Link.opensInNewTab": "(abrir a página em uma nova aba)",
+  "neptune.FlowNavigation.back": "voltar à etapa anterior",
+  "neptune.Link.opensInNewTab": "(abre em uma nova aba)",
   "neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
   "neptune.Select.searchPlaceholder": "Buscar...",
+  "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
   "neptune.Summary.statusDone": "Pronto",
   "neptune.Summary.statusNotDone": "Não iniciado",
   "neptune.Summary.statusPending": "Pendente",

package/src/i18n/ro.json

@@ -8,16 +8,17 @@
   "neptune.DateInput.year.label": "An",
   "neptune.DateLookup.day": "zi",
   "neptune.DateLookup.goTo20YearView": "Accesează vizualizarea pe 20 de ani",
-  "neptune.DateLookup.month": "luna",
+  "neptune.DateLookup.month": "lună",
   "neptune.DateLookup.next": "înainte",
-  "neptune.DateLookup.previous": "precedenta",
+  "neptune.DateLookup.previous": "înapoi",
   "neptune.DateLookup.selected": "selectată",
   "neptune.DateLookup.twentyYears": "20 de ani",
-  "neptune.DateLookup.year": "anul",
+  "neptune.DateLookup.year": "an",
   "neptune.FlowNavigation.back": "înapoi la pasul anterior",
   "neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
   "neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
   "neptune.Select.searchPlaceholder": "Caută...",
+  "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
   "neptune.Summary.statusDone": "Finalizat",
   "neptune.Summary.statusNotDone": "De făcut",
   "neptune.Summary.statusPending": "În așteptare",

package/src/i18n/ru.json

@@ -10,7 +10,7 @@
   "neptune.DateLookup.goTo20YearView": "Перейти к обзору 20 лет",
   "neptune.DateLookup.month": "месяц",
   "neptune.DateLookup.next": "далее",
-  "neptune.DateLookup.previous": "предыдущий",
+  "neptune.DateLookup.previous": "назад",
   "neptune.DateLookup.selected": "выбрано",
   "neptune.DateLookup.twentyYears": "20 лет",
   "neptune.DateLookup.year": "год",
@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
   "neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
   "neptune.Select.searchPlaceholder": "Поиск...",
+  "neptune.SelectInput.noResultsFound": "Ничего не найдено",
   "neptune.Summary.statusDone": "Этап завершен",
   "neptune.Summary.statusNotDone": "Этап к выполнению",
   "neptune.Summary.statusPending": "Этап в процессе",

package/src/i18n/th.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
+  "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
   "neptune.Summary.statusDone": "รายการที่ทำแล้ว",
   "neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
   "neptune.Summary.statusPending": "รายการที่รอดำเนินการ",

package/src/i18n/tr.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
   "neptune.Select.searchPlaceholder": "Ara...",
+  "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
   "neptune.Summary.statusDone": "Tamamlanan aşama",
   "neptune.Summary.statusNotDone": "Yapılacak",
   "neptune.Summary.statusPending": "Bekliyor",

package/src/i18n/uk.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
   "neptune.Select.searchPlaceholder": "Пошук…",
+  "neptune.SelectInput.noResultsFound": "Нічого не знайдено",
   "neptune.Summary.statusDone": "Виконано",
   "neptune.Summary.statusNotDone": "Не виконано",
   "neptune.Summary.statusPending": "Виконується",

package/src/i18n/zh-CN.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "请选择...",
   "neptune.Select.searchPlaceholder": "搜索",
+  "neptune.SelectInput.noResultsFound": "找不到结果",
   "neptune.Summary.statusDone": "已完成",
   "neptune.Summary.statusNotDone": "未完成",
   "neptune.Summary.statusPending": "待处理",

package/src/i18n/zh-HK.json

@@ -18,6 +18,7 @@
   "neptune.Link.opensInNewTab": "（在新分頁中開啟）",
   "neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
   "neptune.Select.searchPlaceholder": "搜尋…",
+  "neptune.SelectInput.noResultsFound": "找不到任何結果",
   "neptune.Summary.statusDone": "已完成事項",
   "neptune.Summary.statusNotDone": "未完成事項",
   "neptune.Summary.statusPending": "待處理事項",