@transferwise/components 45.25.2 → 45.26.1

package/src/dateLookup/monthCalendar/table/MonthCalendarTable.js

@@ -2,33 +2,40 @@ 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 = 3;
 const COLS = 4;
-const MONTH_ONLY_FORMAY = { month: 'short' };
+const MONTH_ONLY_FORMAT = { month: 'short' };
 
-const MonthCalendarTable = ({
-  selectedDate: selected,
-  min,
-  max,
-  viewYear,
-  placeholder,
-  onSelect,
-}) => {
+const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
   const { locale } = useIntl();
+  const getLink = (month) => {
+    return (
+      <TableLink
+        item={month}
+        type="month"
+        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}
+        active={isActive(month)}
+        disabled={isDisabled(month)}
+        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
+        autofocus={autofocusMonth === month}
+        onClick={onSelect}
+      />
+    );
+  };
+
+  const isActive = (month) => {
+    return (
+      selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear()
+    );
+  };
+
+  const isThisMonth = (month) => {
+    return viewYear === new Date().getFullYear() && month === new Date().getMonth();
+  };
 
-  const getLink = (month) => (
-    <TableLink
-      item={month}
-      type="month"
-      title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAY)}
-      active={!!(selected && month === selected.getMonth() && viewYear === selected.getFullYear())}
-      disabled={isDisabled(month)}
-      today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
-      onClick={onSelect}
-    />
-  );
   const isDisabled = (month) => {
     const date = new Date(viewYear, month);
     return !!(
@@ -36,6 +43,12 @@ const MonthCalendarTable = ({
       (max && date > new Date(max.getFullYear(), max.getMonth()))
     );
   };
+
+  const autofocusMonth = (() => {
+    const months = [...new Array(ROWS * COLS)].map((_, index) => index);
+    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
+  })();
+
   return (
     <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
       <thead className="sr-only">

package/src/dateLookup/monthCalendar/table/MonthCalendarTable.spec.js

@@ -82,6 +82,39 @@ describe('MonthCalendarTable', () => {
     expect(component.find('.sr-only').text()).toBe('Enter date..');
   });
 
+  it('sets autofocus to true when June is the selected month', () => {
+    component.setProps({ selectedDate: new Date(2018, 5, 1) });
+    expect(getTableLinkAt(5).prop('autofocus')).toBe(true);
+  });
+
+  it('does not set autofocus to true when June is the selected month but not the right year', () => {
+    component.setProps({ selectedDate: new Date(2017, 5, 1) });
+    expect(getTableLinkAt(5).prop('autofocus')).toBe(false);
+  });
+
+  it('sets autofocus to true when selected date is null and current month is visible', () => {
+    const today = new Date();
+    component.setProps({
+      selectedDate: null,
+      viewYear: today.getFullYear(),
+      viewMonth: today.getMonth(),
+    });
+    expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
+  });
+
+  it('sets autofocus to true on the second month when the first month is disabled', () => {
+    component.setProps({
+      selectedDate: null,
+      viewYear: 2022,
+      min: new Date(2022, 1, 28),
+      viewMonth: 0,
+      isDisabled: (month) => month === 0,
+    });
+
+    expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
+    expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
+  });
+
   const getTableLinkAt = (i) => component.find('[title="MonthName"]').at(i);
   const getTableLink = () => component.find('[title="MonthName"]');
 });

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

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

package/src/dateLookup/tableLink/TableLink.tsx

@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import { useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+
+import messages from '../DateLookup.messages';
+
+interface TableLinkProps {
+  item: number;
+  type: 'day' | 'month' | 'year';
+  title?: string;
+  longTitle?: string;
+  active: boolean;
+  disabled: boolean;
+  today: boolean;
+  autofocus?: boolean;
+  onClick: (item: number) => void;
+}
+
+const TableLink = ({
+  item,
+  type,
+  title,
+  longTitle,
+  active,
+  disabled,
+  today,
+  autofocus,
+  onClick,
+}: TableLinkProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (autofocus) {
+      setTimeout(() => {
+        buttonRef.current?.focus();
+      }, 0);
+    }
+  }, [autofocus]);
+
+  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (!disabled) {
+      onClick(item);
+    }
+  };
+
+  const calculateAriaLabel = () => {
+    if (active) {
+      return `${longTitle || title || ''}, ${intl.formatMessage(
+        messages.selected,
+      )} ${intl.formatMessage(messages[type])}`;
+    }
+    return longTitle || title;
+  };
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        className={classNames(
+          `tw-date-lookup-${type}-option np-text-body-default-bold`,
+          { active: !!active },
+          { today: !!today },
+        )}
+        disabled={disabled}
+        tabIndex={autofocus ? 0 : -1}
+        aria-label={calculateAriaLabel()}
+        aria-pressed={active}
+        onClick={onCalendarClick}
+      >
+        {title || item}
+      </button>
+    </>
+  );
+};
+
+export default TableLink;

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

@@ -2,6 +2,7 @@ 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;
@@ -11,17 +12,38 @@ 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) => (
-    <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}
-    />
-  );
+  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 });
+  })();
+
   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,6 +90,32 @@ 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"]');
 });