@transferwise/components 0.0.0-experimental-e05dfa3 → 0.0.0-experimental-d0b76b1

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;
-  }
 }