@transferwise/components 45.16.0 → 45.17.1

package/src/main.less

@@ -30,9 +30,6 @@
 @import "./header/Header.less";
 @import "./image/Image.less";
 @import "./info/Info.less";
-@import "./inputs/_BottomSheet.less";
-@import "./inputs/_ButtonInput.less";
-@import "./inputs/_Popover.less";
 @import "./inputs/Input.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/moneyInput/MoneyInput.story.tsx

@@ -19,9 +19,6 @@ export default {
       buttonProps: {
         'aria-label': 'Select currency',
       },
-      dropdownProps: {
-        'aria-label': 'Currency options',
-      },
     },
   },
   tags: ['autodocs'],

package/src/phoneNumberInput/PhoneNumberInput.story.js

@@ -15,9 +15,6 @@ export const Basic = () => {
     buttonProps: {
       'aria-label': 'Select country code',
     },
-    dropdownProps: {
-      'aria-label': 'Country code options',
-    },
   });
 
   return (

package/src/promoCard/PromoCard.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React, { forwardRef, FunctionComponent, ReactElement, useEffect, useState } from 'react';
 
 import Body from '../body';
-import { Typography } from '../common';
+import { Typography, generateRandomId } from '../common';
 import Card, { CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
@@ -142,21 +142,6 @@ export type PolymorphicPromoCard = (
   props: PromoCardLinkProps | PromoCardCheckedProps,
 ) => JSX.Element;
 
-/**
- * generateRandomId() function
- *
- * This function generates a random string of characters that can be used as
- * an ID.
- *
- * @returns {string} A random string of characters.
- * @example
- * const id = generateRandomId();
- * // id will be a random string of characters, such as "id-4711".
- */
-const generateRandomId = (): string => {
-  return `id-${Math.random().toString(36).slice(7)}`;
-};
-
 /**
  * PromoCard component.
  *

package/src/select/Select.js

@@ -333,6 +333,8 @@ export default function Select({
         ref={optionsListReference}
         id={listboxId}
         role="listbox"
+        aria-orientation="vertical"
+        aria-activedescendant={getUniqueIdForOption(id, selected)}
         tabIndex="-1"
         className={dropdownClass}
         {...dropdownProps}

package/src/select/Select.story.js

@@ -41,12 +41,6 @@ export const Basic = () => {
   return (
     <Select
       id={id}
-      buttonProps={{
-        'aria-label': 'Basic button',
-      }}
-      dropdownProps={{
-        'aria-label': 'Options for basic button',
-      }}
       size={size}
       classNames={`${hasError ? 'has-error' : ''}`}
       placeholder={placeholder}

package/src/select/searchBox/SearchBox.spec.js

@@ -1,11 +1,7 @@
-import '@testing-library/jest-dom';
-
-import { render } from '../../test-utils';
+import { render, screen } from '../../test-utils';
 
 import SearchBox from '.';
 
-jest.mock('react-transition-group/Transition', () => jest.fn('placeholder'));
-
 describe('SearchBox', () => {
   const props = {
     classNames: {},
@@ -17,8 +13,8 @@ describe('SearchBox', () => {
   };
 
   it('renders', () => {
-    const { container } = render(<SearchBox {...props} />);
+    render(<SearchBox {...props} />);
 
-    expect(container).toMatchSnapshot();
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
   });
 });

package/src/select/searchBox/SearchBox.tsx

@@ -37,6 +37,8 @@ const SearchBox = forwardRef<HTMLInputElement, Props>(
             <Input
               ref={reference}
               id={id}
+              role="searchbox"
+              inputMode="search"
               className={classnames(style('np-select-filter'))}
               placeholder={placeholder}
               value={value}

package/src/upload/Upload.spec.js

@@ -15,6 +15,7 @@ jest.mock('./utils/asyncFileRead');
 const { asyncFileRead } = require('./utils/asyncFileRead');
 
 const defaultLocale = 'en-GB';
+const formatMessage = (id) => `${id}`;
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {
@@ -22,6 +23,7 @@ jest.mock('react-intl', () => ({
         <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => `${id}` }} />
       );
     },
+  useIntl: () => ({ formatMessage }),
   defineMessages: (translations) => translations,
 }));
 

package/src/select/searchBox/__snapshots__/SearchBox.spec.js.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchBox renders 1`] = `
-<div>
-  <li
-    class="border-bottom"
-  >
-    <a
-      class="np-select-filter-link p-a-0"
-    >
-      <div
-        class="input-group"
-      >
-        <span
-          class="input-group-addon input-group-addon--search"
-        >
-          <span
-            aria-hidden="true"
-            class="tw-icon tw-icon-search tw-icon tw-icon-search"
-            data-testid="search-icon"
-            role="presentation"
-          >
-            <svg
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                d="m20.786 19.543-4.029-4.029c1.072-1.328 1.672-3 1.672-4.8C18.429 6.471 14.957 3 10.714 3S3 6.471 3 10.714s3.471 7.715 7.714 7.715c1.8 0 3.472-.643 4.8-1.672l4.029 4.029 1.243-1.243Zm-10.029-2.829c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6Z"
-              />
-            </svg>
-          </span>
-        </span>
-        <input
-          class="np-select-filter form-control np-form-control np-form-control--size-auto np-text-body-large np-input np-input--shape-rectangle"
-          placeholder="placeholder"
-          spellcheck="false"
-          value="value"
-        />
-      </div>
-    </a>
-  </li>
-</div>
-`;