@transferwise/components 45.15.0 → 45.15.1

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -54,6 +54,14 @@ describe('DateLookup (events)', () => {
     expect(getActiveYearButton()).toHaveFocus();
   });
 
+  it('has aria-label for 20 years', () => {
+    openDateLookup();
+    clickDateButton();
+
+    expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
+  });
+
   it('switches to months', () => {
     openDateLookup();
     clickDateButton();
@@ -62,6 +70,15 @@ describe('DateLookup (events)', () => {
     expect(getActiveMonthButton()).toHaveFocus();
   });
 
+  it('has aria label for year', () => {
+    openDateLookup();
+    clickDateButton();
+    user.click(getActiveYearButton());
+
+    expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
+  });
+
   it('switches to days', () => {
     openDateLookup();
     clickDateButton();
@@ -71,6 +88,16 @@ describe('DateLookup (events)', () => {
     expect(getActiveDayButton()).toHaveFocus();
   });
 
+  it('has aria label for month', () => {
+    openDateLookup();
+    clickDateButton();
+    user.click(getActiveYearButton());
+    user.click(getActiveMonthButton());
+
+    expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
+  });
+
   it('updates selected date and closes', () => {
     openDateLookup();
     const d = new Date(2018, 11, 28);
@@ -81,6 +108,15 @@ describe('DateLookup (events)', () => {
     expect(getOpenButton()).toHaveFocus();
   });
 
+  it('has aria label on selected date', () => {
+    openDateLookup();
+    const d = new Date(2018, 11, 28);
+    const newDay = screen.getByText(`${d.getDate()}`);
+    user.click(newDay);
+    openDateLookup();
+    expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
+  });
+
   describe('at extra small breakpoints', () => {
     it('opens dateLookup using slider on small + 1 width', () => {
       winWidth(Breakpoint.SMALL + 1);
@@ -148,6 +184,9 @@ describe('DateLookup (events)', () => {
     return container.querySelector('button.tw-date-lookup-day-option.active');
   };
 
+  const getButtonByAriaLabel = (ariaLabel) => {
+    return screen.getByRole('button', { name: ariaLabel });
+  };
   const getClearButton = () => container.querySelector('.clear-btn');
   const getOpenButton = () => container.querySelector('button.np-date-trigger');
   const getDateButton = () => container.querySelector('button.tw-date-lookup-header-current');

package/src/dateLookup/dateHeader/DateHeader.js

@@ -1,43 +1,65 @@
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
 import { Position, Size } from '../../common';
+import messages from '../DateLookup.messages';
 
 const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
 
-const DateHeader = ({ label, onLabelClick, onPreviousClick, onNextClick }) => (
-  <div className="text-xs-center p-t-1 p-b-2 clearfix">
-    <div className="pull-left-single-direction">
-      <button type="button" className={`d-inline-flex ${buttonClasses}`} onClick={onPreviousClick}>
-        <Chevron orientation={Position.LEFT} className="left-single-direction" size={Size.MEDIUM} />
-      </button>
-    </div>
-    {label && (
-      <button
-        type="button"
-        className={`tw-date-lookup-header-current ${buttonClasses}`}
-        onClick={onLabelClick}
-      >
-        {label}
-      </button>
-    )}
-    <div className="pull-right-single-direction">
-      <button type="button" className={`d-inline-flex ${buttonClasses}`} onClick={onNextClick}>
-        <Chevron
-          orientation={Position.RIGHT}
-          className="right-single-direction"
-          size={Size.MEDIUM}
-        />
-      </button>
+const DateHeader = ({ label, onLabelClick, onPreviousClick, onNextClick, dateMode }) => {
+  const intl = useIntl();
+
+  return (
+    <div className="text-xs-center p-t-1 p-b-2 clearfix">
+      <div className="pull-left-single-direction">
+        <button
+          type="button"
+          className={`d-inline-flex ${buttonClasses}`}
+          aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}
+          onClick={onPreviousClick}
+        >
+          <Chevron
+            orientation={Position.LEFT}
+            className="left-single-direction"
+            size={Size.MEDIUM}
+          />
+        </button>
+      </div>
+      {label && (
+        <button
+          type="button"
+          className={`tw-date-lookup-header-current ${buttonClasses}`}
+          aria-label={intl.formatMessage(messages.goTo20YearView)}
+          onClick={onLabelClick}
+        >
+          {label}
+        </button>
+      )}
+      <div className="pull-right-single-direction">
+        <button
+          type="button"
+          className={`d-inline-flex ${buttonClasses}`}
+          aria-label={`${useIntl().formatMessage(messages.next)} ${dateMode}`}
+          onClick={onNextClick}
+        >
+          <Chevron
+            orientation={Position.RIGHT}
+            className="right-single-direction"
+            size={Size.MEDIUM}
+          />
+        </button>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 DateHeader.propTypes = {
   label: PropTypes.string,
   onLabelClick: PropTypes.func,
   onPreviousClick: PropTypes.func.isRequired,
   onNextClick: PropTypes.func.isRequired,
+  dateMode: PropTypes.string,
 };
 
 DateHeader.defaultProps = {

package/src/dateLookup/dateHeader/DateHeader.spec.js

@@ -1,17 +1,39 @@
 import { shallow } from 'enzyme';
+import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
 
 import DateHeader from '.';
 
+jest.mock('react-intl');
+jest.mock('../DateLookup.messages', () => ({
+  previous: {
+    id: 'neptune.DateLookup.previous',
+    defaultMessage: 'previous',
+  },
+  next: {
+    id: 'neptune.DateLookup.next',
+    defaultMessage: 'next',
+  },
+  goTo20YearView: {
+    id: 'neptune.DateLookup.goTo20YearView',
+    defaultMessage: 'go to 20 year view',
+  },
+}));
 describe('DateHeader', () => {
   let component;
   let props;
 
   beforeEach(() => {
+    useIntl.mockReturnValue({
+      locale: 'en-GB',
+      formatMessage: (message) => message.defaultMessage,
+      defineMessages: (translations) => translations,
+    });
     props = {
       onPreviousClick: jest.fn(),
       onNextClick: jest.fn(),
+      dateMode: 'year',
     };
     component = shallow(<DateHeader {...props} />);
   });
@@ -36,9 +58,24 @@ describe('DateHeader', () => {
     expect(props.onNextClick).toHaveBeenCalledTimes(1);
   });
 
+  it('has aria-label on previous button', () => {
+    let previous = component.find('button').at(0);
+    expect(previous.prop('aria-label')).toBe('previous year');
+  });
+
+  it('has aria-label on next button', () => {
+    let previous = component.find('button').at(1);
+    expect(previous.prop('aria-label')).toBe('next year');
+  });
+
   describe('when label is provided', () => {
     beforeEach(() => {
       component.setProps({ label: 'trolo' });
+      useIntl.mockReturnValue({
+        locale: 'en-GB',
+        formatMessage: (message) => message,
+        defineMessages: (translations) => translations,
+      });
     });
 
     it('shows the label', () => {

package/src/dateLookup/dayCalendar/DayCalendar.js

@@ -4,6 +4,7 @@ import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl';
 
 import { MonthFormat } from '../../common';
+import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import DayCalendarTable from './table';
@@ -32,7 +33,7 @@ class DayCalendar extends PureComponent {
       max,
       viewMonth,
       viewYear,
-      intl: { locale },
+      intl: { locale, formatMessage },
       monthFormat,
       onLabelClick,
       onSelect,
@@ -44,6 +45,7 @@ class DayCalendar extends PureComponent {
             month: monthFormat,
             year: 'numeric',
           })}
+          dateMode={formatMessage(messages.month)}
           onLabelClick={onLabelClick}
           onPreviousClick={this.selectPreviousMonth}
           onNextClick={this.selectNextMonth}

package/src/dateLookup/dayCalendar/DayCalendar.spec.js

@@ -8,11 +8,13 @@ import DayCalendarTable from './table';
 import DayCalendar from '.';
 
 const locale = 'en-GB';
+const formatMessage = (id) => `${id}`;
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {
-      return <Component {...props} intl={{ locale }} />;
+      return <Component {...props} intl={{ locale, formatMessage }} />;
     },
+  defineMessages: (translations) => translations,
 }));
 jest.mock('@transferwise/formatting', () => ({
   formatDate: jest.fn().mockReturnValue('MonthName XXXX'),
@@ -73,6 +75,10 @@ describe('DayCalendar', () => {
     expect(header().prop('onNextClick')).toBe(component.instance().selectNextMonth);
   });
 
+  it('passes dateMode header component', () => {
+    expect(header().prop('dateMode')).toBeDefined();
+  });
+
   it('calls onViewDateUpdate on previous month select', () => {
     component.instance().selectPreviousMonth();
     expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2018, month: 9 });

package/src/dateLookup/dayCalendar/table/DayCalendarTable.js

@@ -46,8 +46,8 @@ class DayCalendarTable extends PureComponent {
   };
 
   days = getDayNames(this.props.intl.locale, 'short');
-
   daysShort = getDayNames(this.props.intl.locale, 'narrow');
+  daysLong = getDayNames(this.props.intl.locale, 'long');
 
   selectDay = (day) => {
     const { viewMonth, viewYear, onSelect } = this.props;
@@ -78,8 +78,12 @@ class DayCalendarTable extends PureComponent {
           <tr>
             {this.days.map((day, index) => (
               <th key={day} className="text-xs-center np-text-body-default-bold">
-                <span className="hidden-xs">{day.slice(0, 3)}</span>
-                <span className="visible-xs-inline-block">{this.daysShort[index].slice(0, 2)}</span>
+                <span className="hidden-xs">
+                  <abbr title={this.daysLong[index]}>{day.slice(0, 3)}</abbr>
+                </span>
+                <span className="visible-xs-inline-block">
+                  <abbr title={this.daysLong[index]}>{this.daysShort[index].slice(0, 2)}</abbr>
+                </span>
               </th>
             ))}
           </tr>

package/src/dateLookup/dayCalendar/table/DayCalendarTable.spec.js

@@ -12,6 +12,7 @@ jest.mock('react-intl', () => ({
     function (props) {
       return <Component {...props} intl={{ locale }} />;
     },
+  defineMessages: (translations) => translations,
 }));
 
 jest.mock('@transferwise/formatting', () => ({

package/src/dateLookup/monthCalendar/MonthCalendar.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl';
 
+import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import MonthCalendarTable from './table';
@@ -27,13 +28,14 @@ class MonthCalendar extends PureComponent {
       min,
       max,
       viewYear,
-      intl: { locale },
+      intl: { locale, formatMessage },
       placeholder,
       onLabelClick,
     } = this.props;
     return (
       <>
         <DateHeader
+          dateMode={formatMessage(messages.year)}
           label={formatDate(new Date(viewYear, 0), locale, { year: 'numeric' })}
           onLabelClick={onLabelClick}
           onPreviousClick={this.selectPreviousYear}

package/src/dateLookup/monthCalendar/MonthCalendar.spec.js

@@ -8,11 +8,13 @@ import MonthCalendarTable from './table';
 import MonthCalendar from '.';
 
 const defaultLocale = 'en-GB';
+const formatMessage = (id) => `${id}`;
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {
-      return <Component {...props} intl={{ locale: defaultLocale }} />;
+      return <Component {...props} intl={{ locale: defaultLocale, formatMessage }} />;
     },
+  defineMessages: (translations) => translations,
 }));
 jest.mock('@transferwise/formatting', () => ({
   formatDate: jest.fn().mockReturnValue('XXXX'),
@@ -62,6 +64,10 @@ describe('MonthCalendar', () => {
     expect(header().prop('onNextClick')).toBe(component.instance().selectNextYear);
   });
 
+  it('passes dateMode header component', () => {
+    expect(header().prop('dateMode')).toBeDefined();
+  });
+
   it('calls onViewDateUpdate on previous year select', () => {
     component.instance().selectPreviousYear();
     expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2017 });

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

@@ -2,8 +2,6 @@ import * as formatting from '@transferwise/formatting';
 import { shallow } from 'enzyme';
 import { useIntl } from 'react-intl';
 
-import TableLink from '../../tableLink';
-
 import MonthCalendarTable from '.';
 
 jest.mock('react-intl');
@@ -29,7 +27,7 @@ describe('MonthCalendarTable', () => {
   it('generates 3x4 table', () => {
     expect(component.find('tbody tr')).toHaveLength(3);
     expect(component.find('tbody td')).toHaveLength(12);
-    expect(component.find(TableLink)).toHaveLength(12);
+    expect(getTableLink()).toHaveLength(12);
   });
 
   it('starts with month 0 and end with 11', () => {
@@ -73,7 +71,7 @@ describe('MonthCalendarTable', () => {
       selectedDate: today,
       viewYear: today.getFullYear(),
     });
-    expect(component.find(TableLink).find({ today: true }).prop('item')).toBe(today.getMonth());
+    expect(getTableLink().find({ today: true }).prop('item')).toBe(today.getMonth());
   });
 
   it('passes onSelect to TableLink', () => {
@@ -84,5 +82,6 @@ describe('MonthCalendarTable', () => {
     expect(component.find('.sr-only').text()).toBe('Enter date..');
   });
 
-  const getTableLinkAt = (i) => component.find(TableLink).at(i);
+  const getTableLinkAt = (i) => component.find('[title="MonthName"]').at(i);
+  const getTableLink = () => component.find('[title="MonthName"]');
 });

package/src/dateLookup/tableLink/TableLink.js

@@ -1,5 +1,8 @@
 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) => {
@@ -9,8 +12,26 @@ class TableLink extends PureComponent {
     }
   };
 
+  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 } = this.props;
+    const {
+      item,
+      type,
+      title,
+      longTitle,
+      active,
+      disabled,
+      today,
+      intl: { formatMessage },
+    } = this.props;
     return (
       <>
         <button
@@ -19,7 +40,7 @@ class TableLink extends PureComponent {
             today ? 'today' : ''
           } np-text-body-default-bold`}
           disabled={disabled}
-          aria-label={longTitle}
+          aria-label={this.calculateAriaLabel(longTitle, title, active, type, formatMessage)}
           onClick={this.onClick}
         >
           {title || item}
@@ -45,4 +66,4 @@ TableLink.defaultProps = {
   longTitle: null,
 };
 
-export default TableLink;
+export default injectIntl(TableLink);

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

@@ -2,24 +2,60 @@ import { shallow } from 'enzyme';
 
 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('../DateLookup.messages', () => ({
+  selected: {
+    id: 'neptune.DateLookup.selected',
+    defaultMessage: 'selected',
+  },
+  day: {
+    id: 'neptune.DateLookup.day',
+    defaultMessage: 'day',
+  },
+  month: {
+    id: 'neptune.DateLookup.month',
+    defaultMessage: 'month',
+  },
+  year: {
+    id: 'neptune.DateLookup.year',
+    defaultMessage: 'year',
+  },
+}));
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return <Component {...props} intl={{ formatMessage }} />;
+    },
+}));
+
 describe('TableLink', () => {
   let component;
   let props;
 
   beforeEach(() => {
     props = {
-      item: 5,
+      item: 12,
       type: 'day',
       active: false,
       disabled: false,
       today: false,
       onClick: jest.fn(),
+      title: '12',
+      longTitle: '12/12/1212',
     };
-    component = shallow(<TableLink {...props} />);
+    component = shallow(<TableLink {...props} />).dive();
   });
 
   it('shows item value', () => {
-    expect(button().text()).toBe('5');
+    expect(button().text()).toBe('12');
   });
 
   it('shows title when provided (instead of item value)', () => {
@@ -49,7 +85,27 @@ describe('TableLink', () => {
 
   it('calls click handler on click', () => {
     button().simulate('click', { preventDefault: () => {} });
-    expect(props.onClick).toHaveBeenCalledWith(5);
+    expect(props.onClick).toHaveBeenCalledWith(12);
+  });
+
+  it('adds aria label to selected day', () => {
+    expect(button().hasClass('active')).toBe(false);
+    component.setProps({ active: true });
+    expect(button().prop('aria-label')).toBe('12/12/1212, selected day');
+  });
+
+  it('adds aria label to selected month', () => {
+    component.setProps({ type: 'month' });
+    expect(button().hasClass('active')).toBe(false);
+    component.setProps({ active: true });
+    expect(button().prop('aria-label')).toBe('12/12/1212, selected month');
+  });
+
+  it('adds aria label to selected year', () => {
+    component.setProps({ type: 'year' });
+    expect(button().hasClass('active')).toBe(false);
+    component.setProps({ active: true });
+    expect(button().prop('aria-label')).toBe('12/12/1212, selected year');
   });
 
   const button = () => component.find('button');

package/src/dateLookup/yearCalendar/YearCalendar.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
+import { injectIntl } from 'react-intl';
 
+import messages from '../DateLookup.messages';
 import DateHeader from '../dateHeader';
 
 import YearCalendarTable from './table';
@@ -20,10 +22,21 @@ class YearCalendar extends PureComponent {
   };
 
   render() {
-    const { selectedDate, min, max, viewYear, placeholder } = this.props;
+    const {
+      selectedDate,
+      min,
+      max,
+      viewYear,
+      placeholder,
+      intl: { formatMessage },
+    } = this.props;
     return (
       <>
-        <DateHeader onPreviousClick={this.selectPreviousYears} onNextClick={this.selectNextYears} />
+        <DateHeader
+          dateMode={formatMessage(messages.twentyYears)}
+          onPreviousClick={this.selectPreviousYears}
+          onNextClick={this.selectNextYears}
+        />
         <YearCalendarTable
           {...{ selectedDate, min, max, viewYear, placeholder }}
           onSelect={this.onYearSelect}
@@ -49,4 +62,4 @@ YearCalendar.defaultProps = {
   max: null,
 };
 
-export default YearCalendar;
+export default injectIntl(YearCalendar);

package/src/dateLookup/yearCalendar/YearCalendar.spec.js

@@ -6,6 +6,15 @@ import YearCalendarTable from './table';
 
 import YearCalendar from '.';
 
+const formatMessage = (id) => `${id}`;
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return <Component {...props} intl={{ formatMessage }} />;
+    },
+  defineMessages: (translations) => translations,
+}));
+
 describe('YearCalendar', () => {
   const selectedDate = new Date(2018, 11, 27);
   const min = new Date(1990, 11, 27);
@@ -23,7 +32,7 @@ describe('YearCalendar', () => {
       onSelect: jest.fn(),
       onViewDateUpdate: jest.fn(),
     };
-    component = shallow(<YearCalendar {...props} />);
+    component = shallow(<YearCalendar {...props} />).dive();
   });
 
   it('shows the header', () => {
@@ -38,6 +47,10 @@ describe('YearCalendar', () => {
     expect(header().prop('onNextClick')).toBe(component.instance().selectNextYears);
   });
 
+  it('passes dateMode header component', () => {
+    expect(header().prop('dateMode')).toBeDefined();
+  });
+
   it('calls onViewDateUpdate on previous years select', () => {
     component.instance().selectPreviousYears();
     expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 1998 });

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

@@ -2,8 +2,6 @@ import * as formatting from '@transferwise/formatting';
 import { shallow } from 'enzyme';
 import { useIntl } from 'react-intl';
 
-import TableLink from '../../tableLink';
-
 import YearCalendarTable from '.';
 
 jest.mock('react-intl');
@@ -29,7 +27,7 @@ describe('YearCalendarTable', () => {
   it('generates 5x4 table', () => {
     expect(component.find('tbody tr')).toHaveLength(5);
     expect(component.find('tbody td')).toHaveLength(20);
-    expect(component.find(TableLink)).toHaveLength(20);
+    expect(getTableLink()).toHaveLength(20);
   });
 
   it('starts with year 2000, 2020, 2040 etc', () => {
@@ -81,7 +79,7 @@ describe('YearCalendarTable', () => {
       selectedDate: today,
       viewYear: today.getFullYear(),
     });
-    expect(component.find(TableLink).find({ today: true }).prop('item')).toBe(today.getFullYear());
+    expect(getTableLink().find({ today: true }).prop('item')).toBe(today.getFullYear());
   });
 
   it('passes onSelect to TableLink', () => {
@@ -92,5 +90,6 @@ describe('YearCalendarTable', () => {
     expect(component.find('.sr-only').text()).toBe('Enter date..');
   });
 
-  const getTableLinkAt = (i) => component.find(TableLink).at(i);
+  const getTableLinkAt = (i) => component.find('[type="year"]').at(i);
+  const getTableLink = () => component.find('[type="year"]');
 });

package/src/i18n/en.json

@@ -5,6 +5,14 @@
   "neptune.DateInput.day.label": "Day",
   "neptune.DateInput.month.label": "Month",
   "neptune.DateInput.year.label": "Year",
+  "neptune.DateLookup.day": "day",
+  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.month": "month",
+  "neptune.DateLookup.next": "next",
+  "neptune.DateLookup.previous": "previous",
+  "neptune.DateLookup.selected": "selected",
+  "neptune.DateLookup.twentyYears": "20 years",
+  "neptune.DateLookup.year": "year",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",