@transferwise/components 0.0.0-experimental-3759445 → 0.0.0-experimental-cc11279

package/src/stepper/deviceDetection.js

@@ -1,6 +1,5 @@
 function supportsTouchEvents() {
   const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
-  // eslint-disable-next-line compat/compat
   const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
   const documentTouchIsDefined =
     typeof window !== 'undefined' &&
@@ -21,7 +20,7 @@ function userAgentSuggestsTouchDevice() {
     'bada',
   ];
   const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
-  const regex = new RegExp(matchString, 'ig');
+  const regex = new RegExp(matchString, 'gi');
   return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
 }
 // Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.

package/src/stepper/deviceDetection.spec.js

@@ -2,12 +2,17 @@ import { isTouchDevice } from './deviceDetection';
 
 describe('Device detection', () => {
   function fakeUserAgent(userAgent) {
-    navigator.__defineGetter__('userAgent', () => userAgent);
-    // need to use this instead of defineProperty, as it's blocked from overriding
+    Object.defineProperty(navigator, 'userAgent', {
+      value: userAgent,
+      configurable: true,
+    });
   }
 
   function fakeMaxTouchPoints(maxTouchPoints) {
-    navigator.__defineGetter__('maxTouchPoints', () => maxTouchPoints);
+    Object.defineProperty(navigator, 'maxTouchPoints', {
+      value: maxTouchPoints,
+      configurable: true,
+    });
   }
 
   // We don't test DocumentTouch api as it's basically impossible to test :(

package/src/test-utils/index.js

@@ -13,7 +13,7 @@ import en from '../i18n/en.json';
  */
 function customRender(ui, { locale = DEFAULT_LOCALE, messages = en, ...renderOptions } = {}) {
   // eslint-disable-next-line react/prop-types
-  var Wrapper = ({ children }) => {
+  const Wrapper = ({ children }) => {
     return <Provider i18n={{ locale, messages }}>{children}</Provider>;
   };
   return render(ui, { wrapper: Wrapper, ...renderOptions });

package/src/test-utils/story-config.ts

@@ -30,7 +30,7 @@ interface StoryConfig {
 
 const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {
   if (viewport.styles && typeof viewport.styles === 'object') {
-    return parseInt(viewport.styles.width);
+    return Number.parseInt(viewport.styles.width, 10);
   }
   throw new Error('Unknown viewport styles');
 };

package/src/title/Title.spec.tsx

@@ -34,7 +34,7 @@ describe('Title', () => {
 
   it('handles unsupported typography type', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+    // @ts-expect-error
     render(<Title type={Typography.BODY_LARGE_BOLD}>Test</Title>);
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();

package/src/typeahead/Typeahead.spec.js

@@ -314,7 +314,9 @@ describe('Typeahead', () => {
     let selectedOption;
 
     component.setProps({
-      onChange: (selections) => (selectedOption = selections[0]),
+      onChange: (selections) => {
+        selectedOption = selections[0];
+      },
       options: options,
     });
 
@@ -340,7 +342,7 @@ describe('Typeahead', () => {
     it('renders all options', () => {
       const options = option().map((optNode) => optNode.text());
       expect(options).toHaveLength(props.options.length);
-      expect(options.every((label, i) => label === props.options[i].label));
+      expect(options.every((label, i) => label === props.options[i].label)).toBe(true);
     });
 
     it('does not render new option if showNewEntry is false', () => {

package/src/upload/Upload.spec.js

@@ -8,7 +8,7 @@ import Upload from '.';
 
 jest.useFakeTimers();
 jest.mock('./utils/postData', () => ({
-  postData: () => new Promise((resolve) => resolve('ServerResponse')),
+  postData: async () => 'ServerResponse',
 }));
 
 jest.mock('./utils/asyncFileRead');
@@ -88,7 +88,7 @@ describe('Upload', () => {
   let component;
   beforeEach(() => {
     component = shallow(<Upload {...props} />).dive();
-    asyncFileRead.mockImplementation(() => new Promise((resolve) => resolve('a value')));
+    asyncFileRead.mockImplementation(async () => 'a value');
   });
 
   afterEach(() => {
@@ -183,7 +183,9 @@ describe('Upload', () => {
     });
 
     it('step ProcessingStep is called with error props', async () => {
-      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
+      asyncFileRead.mockImplementation(async () => {
+        throw 'An error';
+      });
 
       await component.instance().fileDropped(TEST_FILE);
       jest.advanceTimersByTime(props.animationDelay);
@@ -230,7 +232,9 @@ describe('Upload', () => {
     it('step CompleteStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
-      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
+      asyncFileRead.mockImplementation(async () => {
+        throw 'An error';
+      });
 
       await upload.instance().fileDropped(TEST_FILE);
       jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -225,6 +225,7 @@ const UploadButton = ({
         data-testid={TEST_IDS.uploadInput}
         onChange={filesSelected}
       />
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label
         htmlFor={id}
         className={classNames('btn', 'np-upload-accent', 'np-upload-button', {