@transferwise/components 0.0.0-experimental-e05dfa3 → 0.0.0-experimental-7905c27

package/src/dateLookup/DateLookup.less

@@ -9,24 +9,12 @@
   text-align: center;
   table-layout: fixed;
 
-  > thead > tr > th:nth-child(7n+6),
-  > thead > tr > th:nth-child(7n+7),
-  > tbody > tr > td:nth-child(7n+6) button,
-  > tbody > tr > td:nth-child(7n+7) button {
-    color: var(--color-content-secondary);
-    font-weight: var(--font-weight-regular);
-  }
-
   > tbody > tr > td {
     padding: var(--size-4);
     @media (--screen-400-zoom) {
       padding: 0;
     }
 
-    &:has(.tw-date-lookup-day-option) {
-      padding: 1px;
-    }
-    
     button {
       width: 100%;
       padding: var(--size-4) 0;
@@ -38,34 +26,37 @@
       border-radius: var(--radius-small);
       background-color: transparent;
       font-weight: var(--font-weight-semi-bold);
-      color: var(--color-content-primary);
 
-      &.tw-date-lookup-day-option {
-        height: var(--size-40);
-        border-radius: 50%;
-        line-height: var(--size-40);
-        width: var(--size-40);
-        padding: 0;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-  
-        &.today {
-          text-decoration: underline;
-          text-decoration-thickness: 2px;
-          text-underline-offset: 4px;
-        }
+      &:not(.disabled, :disabled).active {
+        color: #fff;
+        background-color: var(--color-interactive-accent-active);
       }
-    }
 
-    &:not(.disabled, :disabled) button.show-focus,
-    &:hover button:not(.disabled, :disabled) {
-      background-color: var(--color-background-screen-hover);
-    }
+      &:not(.disabled, :disabled):hover {
+        color: #fff;
+        background-color: var(--color-interactive-accent-hover);
+      }
 
-    &:not(.disabled, :disabled) button.active {
-      background-color: var(--color-interactive-primary);
-      color: var(--color-interactive-accent);
+      .np-theme-personal & {
+        color: var(--color-content-primary);
+
+        &:not(.disabled, :disabled).active {
+          color: var(--color-interactive-control);
+        }
+
+        &:not(.disabled, :disabled):hover {
+          color: var(--color-interactive-control);
+        }
+      }
+    }
+  }
+  > thead > tr > th:nth-child(7n+6),
+  > thead > tr > th:nth-child(7n+7),
+  > tbody > tr > td:nth-child(7n+6) button,
+  > tbody > tr > td:nth-child(7n+7) button {
+    .np-theme-personal & {
+      color: var(--color-content-secondary);
+      font-weight: var(--font-weight-regular);
     }
   }
 
@@ -73,15 +64,9 @@
     text-decoration: none;
   }
 
-  background-color: inherit;
-}
-
-.tw-date-lookup-header-current-container {
-  display: inline;
-}
-
-.tw-date-lookup-header-current {
-    font-weight: var(--font-weight-bold);
+  .np-theme-personal & {
+    background-color: inherit;
+  }
 }
 
 .np-theme-personal {
@@ -98,9 +83,27 @@
     td {
       border: none;
     }
+    
+    .tw-date-lookup-header-current-container {
+      display: inline-block;
 
-    .tw-date-lookup-header-current {
+      .tw-date-lookup-header-current {
+        color: var(--color-content-primary);
+      }
+    }
+
+    .tw-date-lookup-day-option {
+      height: var(--size-32);
+      line-height: var(--size-32);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       color: var(--color-content-primary);
     }
+
+    .tw-date-lookup-day-option.active {
+      background-color: var(--color-interactive-accent);
+      color: var(--color-interactive-primary);
+    }
   }
 }

package/src/dateLookup/DateLookup.story.js

@@ -13,8 +13,6 @@ export default {
 
 let theFuture = new Date();
 theFuture.setDate(theFuture.getDate() + 10);
-let thePast = new Date();
-thePast.setDate(thePast.getDate() - 10);
 
 export const Basic = () => {
   const [value, setValue] = useState(null);
@@ -24,13 +22,16 @@ export const Basic = () => {
   const placeholder = text('placeholder', 'placeholder');
   const size = select('size', Object.values(Size), Size.MEDIUM);
 
+  const minvalue = date('minvalue', new Date());
+  const maxvalue = date('maxvalue', theFuture);
   const clearable = boolean('clearable', false);
 
   return (
     <DateLookup
       disabled={disabled}
       label={label}
-      min={thePast}
+      max={new Date(maxvalue)}
+      min={new Date(minvalue)}
       monthFormat={monthFormat}
       placeholder={placeholder}
       size={size}
@@ -41,11 +42,9 @@ export const Basic = () => {
   );
 };
 
-Basic.play = async ({ canvasElement }) => {
-  // testing focus state on keyboard nav
+Basic.play = ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  userEvent.tab(canvas.getByRole('button'));
-  userEvent.keyboard('{space}');
+  userEvent.click(canvas.getByRole('button'));
 };
 
 export const Basic400Zoom = storyConfig(
@@ -61,7 +60,7 @@ export const RightAligned = () => {
   const placeholder = text('placeholder', 'placeholder');
   const size = select('size', Object.values(Size), Size.MEDIUM);
 
-  const minvalue = date('minvalue', thePast);
+  const minvalue = date('minvalue', new Date());
   const maxvalue = date('maxvalue', theFuture);
   const clearable = boolean('clearable', false);
 

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

@@ -4,7 +4,6 @@ import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl';
 
 import { getDayNames, isWithinRange } from '../../../common/dateUtils';
-import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import { getStartOfDay } from '../../getStartOfDay';
 import TableLink from '../../tableLink';
 
@@ -66,16 +65,6 @@ class DayCalendarTable extends PureComponent {
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
 
-  isToday = (day) => {
-    const { viewMonth, viewYear } = this.props;
-    return +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day);
-  };
-
-  getAutofocusDay = (weeks) => {
-    const days = weeks.flatMap((week) => week);
-    return getFocusableTime(this.isActive, this.isToday, this.isDisabled, days);
-  };
-
   render() {
     const {
       viewMonth,
@@ -83,7 +72,6 @@ class DayCalendarTable extends PureComponent {
       intl: { locale },
     } = this.props;
     const weeks = this.getTableStructure();
-    let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
     return (
       <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
         <thead>
@@ -115,11 +103,10 @@ class DayCalendarTable extends PureComponent {
                         locale,
                         SHORT_DAY_FORMAT,
                       )}
-                      autofocus={day === autoFocusDay}
                       longTitle={formatDate(new Date(viewYear, viewMonth, day), locale)}
                       active={this.isActive(day)}
                       disabled={this.isDisabled(day)}
-                      today={this.isToday(day)}
+                      today={+getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day)}
                       onClick={this.selectDay}
                     />
                   )}

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

@@ -117,31 +117,6 @@ describe('DayCalendarTable', () => {
     expect(props.onSelect).toHaveBeenCalledWith(new Date(2018, 11, 1));
   });
 
-  it('sets autofocus to true when 5 is the selected day', () => {
-    component.setProps({ selectedDate: new Date(2018, 11, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(true);
-  });
-
-  it('does not set autofocus to true when 5 is the selected day but not the right month', () => {
-    component.setProps({ selectedDate: new Date(2018, 10, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(false);
-  });
-
-  it('does not set autofocus to true when 5 is the selected day but not the right year', () => {
-    component.setProps({ selectedDate: new Date(2017, 11, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(false);
-  });
-
-  it('sets autofocus to true when selected date is null and current day is visible', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: today,
-      viewMonth: today.getMonth(),
-      viewYear: today.getFullYear(),
-    });
-    expect(component.find(TableLink).find({ today: true }).prop('autofocus')).toBe(true);
-  });
-
   const getTableLinkAt = (i) => component.find(TableLink).at(i);
   const getTableDataAt = (i) => component.find('tbody td').at(i);
 });

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

@@ -2,40 +2,33 @@ 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_FORMAT = { month: 'short' };
+const MONTH_ONLY_FORMAY = { month: 'short' };
 
-const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
+const MonthCalendarTable = ({
+  selectedDate: selected,
+  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={isSelected(month)}
-        disabled={isDisabled(month)}
-        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
-        autofocus={autofocusMonth === month}
-        onClick={onSelect}
-      />
-    );
-  };
-
-  const isSelected = (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 !!(
@@ -43,12 +36,6 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
       (max && date > new Date(max.getFullYear(), max.getMonth()))
     );
   };
-
-  const autofocusMonth = (() => {
-    const months = [...new Array(ROWS * COLS)].map((_, index) => index);
-    return getFocusableTime(isSelected, isThisMonth, isDisabled, 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,39 +82,6 @@ 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.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/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={!!(selectedDate && year === selectedDate.getFullYear())}
-        disabled={isDisabled(year)}
-        today={year === new Date().getFullYear()}
-        autofocus={autofocusYear === year}
-        onClick={onSelect}
-      />
-    );
-  };
-
-  const isSelected = (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(isSelected, isThisYear, isDisabled, 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/header/Header.css

@@ -1 +1 @@
-.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}.np-header legend{border-bottom:none;padding:0}
+.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}

package/src/header/Header.less

@@ -19,9 +19,4 @@
       margin-bottom: calc(var(--size-4) * -1);
     }
   }
-
-  legend {
-    padding: 0;
-    border-bottom: none;
-  }
 }

package/src/inputs/SelectInput.spec.tsx

@@ -1,36 +1,12 @@
 import { act, screen, within } from '@testing-library/react';
 import userEvent, { specialChars } from '@testing-library/user-event';
 
-import { render } from '../test-utils';
+import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 import { SelectInput } from './SelectInput';
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn((query: string) => {
-    const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
-    const minWidth = matches != null ? Number(matches[1]) : undefined;
-    return {
-      matches: minWidth != null ? window.innerWidth >= minWidth : false,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(), // deprecated
-      removeListener: jest.fn(), // deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
-    };
-  }),
-});
-
-Object.defineProperty(window, 'ResizeObserver', {
-  writable: true,
-  value: jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-  })),
-});
+mockMatchMedia();
+mockResizeObserver();
 
 describe('SelectInput', () => {
   it('renders placeholder', () => {