@transferwise/components 0.0.0-experimental-bb03a6a → 0.0.0-experimental-c420d29

package/build/types/dateLookup/tableLink/TableLink.d.ts

@@ -1,19 +1,5 @@
-/// <reference types="react" />
-import { IntlShape } from 'react-intl';
-interface TableLinkProps {
-    item: number;
-    type: 'day' | 'month' | 'year';
-    title?: string;
-    longTitle?: string;
-    active: boolean;
-    disabled: boolean;
-    today: boolean;
-    autofocus?: boolean;
-    onClick: (item: number) => void;
-    intl: IntlShape;
-}
-declare const _default: import("react").FC<import("react-intl").WithIntlProps<TableLinkProps>> & {
-    WrappedComponent: import("react").ComponentType<TableLinkProps>;
+declare const _default: import("react").FC<import("react-intl").WithIntlProps<any>> & {
+    WrappedComponent: import("react").ComponentType<any>;
 };
 export default _default;
 //# sourceMappingURL=TableLink.d.ts.map

package/build/types/dateLookup/tableLink/TableLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,SAAS,EAAE,MAAM,YAAY,CAAC;AAInD,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,SAAS,CAAC;CACjB;;;;AAyDD,wBAAqC"}
+{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.js"],"names":[],"mappings":""}

package/build/types/dateLookup/tableLink/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './TableLink';
+export { default } from "./TableLink";
 //# sourceMappingURL=index.d.ts.map

package/build/types/dateLookup/tableLink/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.js"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bb03a6a",
+  "version": "0.0.0-experimental-c420d29",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/button/Button.spec.js

@@ -85,6 +85,12 @@ describe('Button', () => {
       render(<Button {...props} className="catsarethebest" />);
       expect(screen.getByRole('button')).toHaveClass('catsarethebest');
     });
+
+    it('passes through aria-label if set', () => {
+      render(<Button {...props} aria-label="unique label" />);
+      const loadingButton = screen.getByLabelText('unique label');
+      expect(loadingButton).toBeInTheDocument();
+    });
   });
 
   describe('onClick', () => {
@@ -170,6 +176,12 @@ describe('Button', () => {
       expect(screen.getByRole('button', { name: 'loading' })).toBeInTheDocument();
     });
 
+    it('loading button has aria-label of loading', () => {
+      render(<Button {...props} loading />);
+      const loadingButton = screen.getByLabelText('loading');
+      expect(loadingButton).toBeInTheDocument();
+    });
+
     it('renders as block if block is true', () => {
       expect(render(<Button {...props} block />).container).toMatchSnapshot();
     });

package/src/button/Button.tsx

@@ -126,7 +126,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
         className={classes}
         {...props}
         aria-live={loading ? 'polite' : 'off'}
-        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : undefined}
+        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}
       >
         {children}
         {loading && <ProcessIndicator size={processIndicatorSize()} className="btn-loader" />}

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

@@ -65,30 +65,6 @@ class DayCalendarTable extends PureComponent {
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
 
-  getAutofocusDay = (weeks) => {
-    let activeDay = null;
-    let lowestNonDisabledDay = null;
-
-    for (const week of weeks) {
-      for (const day of week) {
-        if (this.isActive(day)) {
-          activeDay = day;
-          break;
-        }
-
-        if (!this.isDisabled(day) && lowestNonDisabledDay === null) {
-          lowestNonDisabledDay = day;
-        }
-      }
-
-      if (activeDay !== null) {
-        break;
-      }
-    }
-
-    return activeDay || lowestNonDisabledDay;
-  };
-
   render() {
     const {
       viewMonth,
@@ -96,7 +72,6 @@ class DayCalendarTable extends PureComponent {
       intl: { locale },
     } = this.props;
     const weeks = this.getTableStructure();
-    let autoFocusDay = this.getAutofocusDay(weeks);
     return (
       <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
         <thead>
@@ -128,7 +103,6 @@ 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)}

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.tsx

@@ -1,74 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { injectIntl, IntlShape } 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;
-  intl: IntlShape;
-}
-
-const TableLink = ({
-  item,
-  type,
-  title,
-  longTitle,
-  active,
-  disabled,
-  today,
-  autofocus,
-  onClick,
-  intl: { formatMessage },
-}: TableLinkProps) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (autofocus) {
-      buttonRef.current?.focus();
-    }
-  }, []);
-
-  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    if (!disabled) {
-      onClick(item);
-    }
-  };
-
-  const calculateAriaLabel = () => {
-    if (active) {
-      return `${longTitle || title || ''}, ${formatMessage(messages.selected)} ${formatMessage(
-        messages[type],
-      )}`;
-    }
-    return longTitle || title;
-  };
-
-  return (
-    <>
-      <button
-        ref={buttonRef}
-        type="button"
-        className={`tw-date-lookup-${type}-option ${active ? 'active' : ''} ${
-          today ? 'today' : ''
-        } np-text-body-default-bold`}
-        disabled={disabled}
-        aria-label={calculateAriaLabel()}
-        aria-pressed={active}
-        onClick={onCalendarClick}
-      >
-        {title || item}
-      </button>
-    </>
-  );
-};
-
-export default injectIntl(TableLink);