@transferwise/components 46.78.0 → 46.79.0

package/src/select/{Select.story.js → Select.story.tsx}

@@ -2,7 +2,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 import { Person as ProfileIcon, Globe as GlobeIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
-import Select from './Select';
+import Select, { SelectItem, SelectOptionItem } from './Select';
 
 export default {
   component: Select,
@@ -17,8 +17,16 @@ const ImageIcon = () => (
   />
 );
 
+interface SelectItemWithCountries extends SelectItem {
+  countries?: string;
+}
+
+const isSelectOptionItem = (option: SelectItem | null): option is SelectOptionItem => {
+  return option !== null && typeof option.value !== 'undefined';
+};
+
 export const Basic = () => {
-  const [selected, setSelected] = useState({
+  const [selected, setSelected] = useState<SelectOptionItem>({
     value: 0,
     label: 'A thing',
     note: 'with a note',
@@ -26,7 +34,7 @@ export const Basic = () => {
 
   const size = select('size', ['sm', 'md', 'lg'], 'md');
   const dropdownRight = select('dropdownRight', ['xs', 'sm', 'md', 'lg', 'xl'], 'md');
-  const dropdownWidth = select('dropdownWidth', [null, 'sm', 'md', 'lg'], 'md');
+  const dropdownWidth = select('dropdownWidth', [undefined, 'sm', 'md', 'lg'], 'md');
 
   const id = text('id', 'basic-button');
   const placeholder = text('placeholder', 'Placeholder text');
@@ -35,14 +43,12 @@ export const Basic = () => {
   const required = boolean('required', false);
   const dropdownUp = boolean('dropdownUp', false);
   const disabled = boolean('disabled', false);
-  const search = boolean('search', false);
-  const hasError = boolean('hasError', false);
+  const search = boolean('search', true);
 
   return (
     <Select
       id={id}
       size={size}
-      classNames={hasError ? 'has-error' : ''}
       placeholder={placeholder}
       dropdownRight={dropdownRight}
       dropdownWidth={dropdownWidth}
@@ -108,13 +114,17 @@ export const Basic = () => {
             'and with lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation secondary text',
         },
       ]}
-      onChange={(v) => setSelected(v)}
+      onChange={(option) => {
+        if (isSelectOptionItem(option)) {
+          setSelected(option);
+        }
+      }}
     />
   );
 };
 
 export const CustomSearchFunction = () => {
-  const [selected, setSelected] = useState({
+  const [selected, setSelected] = useState<SelectOptionItem>({
     value: 1,
     label: 'EUR',
     currency: 'EUR',
@@ -122,7 +132,7 @@ export const CustomSearchFunction = () => {
 
   const size = select('size', ['sm', 'md', 'lg'], 'md');
   const dropdownRight = select('dropdownRight', ['xs', 'sm', 'md', 'lg', 'xl'], 'md');
-  const dropdownWidth = select('dropdownWidth', [null, 'sm', 'md', 'lg'], 'md');
+  const dropdownWidth = select('dropdownWidth', [undefined, 'sm', 'md', 'lg'], 'md');
 
   const id = text('id', 'custom-search-button');
   const placeholder = text('placeholder', 'placeholder');
@@ -144,12 +154,7 @@ export const CustomSearchFunction = () => {
       block={block}
       selected={selected}
       disabled={disabled}
-      search={
-        search
-          ? (option, keyword) =>
-              option.countries && option.countries.toLowerCase().includes(keyword.toLowerCase())
-          : false
-      }
+      search={search}
       required={required}
       searchPlaceholder="Search placeholder"
       dropdownUp={dropdownUp}
@@ -159,106 +164,143 @@ export const CustomSearchFunction = () => {
           value: 1,
           label: 'EUR',
           currency: 'EUR',
-          countries:
-            'Seychelles Romania Saudi Arabia Macedonia, Former Yugoslav Republic of Serbia Kazakhstan Saint Lucia Malta Kosovo, Republic of Israel Slovakia Andorra United Kingdom Faroe Islands Ukraine Bulgaria Czech Republic Sao Tome and Principe Qatar Belgium Gibraltar Lebanon Netherlands Lithuania Slovenia France Norway Austria Hungary Spain United Arab Emirates Portugal Kuwait San Marino British Virgin Islands Georgia Timor-Leste Croatia Mauritania Finland Iceland Moldova Montenegro Turkey Switzerland Italy Sweden Costa Rica Estonia Guatemala Ireland Monaco Bosnia and Herzegovina Cyprus Greece Mauritius Bahrain Germany Poland Greenland Albania Tunisia Dominican Republic Luxembourg Azerbaijan Latvia Liechtenstein Denmark',
+          searchStrings: [
+            'Austria',
+            'Belgium',
+            'Cyprus',
+            'Estonia',
+            'Finland',
+            'France',
+            'Germany',
+            'Greece',
+            'Ireland',
+            'Italy',
+            'Latvia',
+            'Lithuania',
+            'Luxembourg',
+            'Malta',
+            'Netherlands',
+            'Portugal',
+            'Slovakia',
+            'Slovenia',
+            'Spain',
+            'Andorra',
+            'Monaco',
+            'San Marino',
+            'Vatican City',
+            'Kosovo',
+            'Montenegro',
+          ],
         },
         {
           value: 2,
           label: 'GBP',
           currency: 'GBP',
-          countries: 'Isle of Man United Kingdom',
+          searchStrings: ['Isle of Man', 'United Kingdom'],
         },
         {
           value: 3,
           label: 'INR',
           currency: 'INR',
-          countries: 'India',
+          searchStrings: ['India'],
         },
         {
           value: 4,
           label: 'USD',
           currency: 'USD',
-          countries:
-            "Saudi Arabia Cape Verde Serbia Haiti Suriname Israel Slovakia Guadeloupe Namibia Uzbekistan Singapore Macao Maldives Ukraine Ethiopia Marshall Islands Netherlands Lithuania Uruguay Ecuador Falkland Islands Guernsey Hungary Argentina Kuwait Japan Cayman Islands South Africa Palau Moldova Montenegro Turkey Nauru Ireland Bermuda Jersey Algeria United States Samoa Uganda Vatican City Honduras Cocos (Keeling) Islands Côte d'Ivoire Macedonia, Former Yugoslav Republic of Kazakhstan Malta Solomon Islands Gabon Andorra Canada Faroe Islands Sao Tome and Principe Barbados Gibraltar French Polynesia Vietnam Bahamas Taiwan United Arab Emirates Mozambique Armenia Kiribati Panama Saint Kitts and Nevis Estonia Micronesia, Federated States of Mongolia China Niger Isle of Man Malaysia Guyana Senegal Germany Kyrgyzstan Greenland Albania Dominican Republic Hong Kong Luxembourg Morocco Norfolk Island Turks and Caicos Islands Rwanda Grenada Venezuela Gambia Seychelles Oman Antigua and Barbuda Papua New Guinea Colombia Sri Lanka Wallis and Futuna Anguilla Tanzania Kenya Bhutan Laos Fiji Australia Qatar Belgium Réunion Nicaragua El Salvador Slovenia New Caledonia Niue South Korea Guinea-Bissau Austria Cook Islands Spain Portugal Tonga Trinidad and Tobago Philippines Croatia Mauritania Finland Angola Saint Helena Switzerland Sierra Leone Costa Rica Mexico French Guiana Guatemala Cambodia Botswana Peru Cyprus Brunei Darussalam Bahrain Jamaica Paraguay Poland Tunisia Myanmar Burkina Faso Denmark Lesotho Zambia New Zealand Liberia Romania Dominica Saint Lucia Saint Pierre and Miquelon Mali United Kingdom Malawi Egypt Bulgaria Czech Republic Nepal Lebanon Guinea France Norway Puerto Rico Tuvalu Tajikistan Martinique San Marino Georgia Timor-Leste British Virgin Islands Montserrat Vanuatu Iceland Italy Saint Vincent and the Grenadines Thailand Sweden Indonesia American Samoa Bosnia and Herzegovina Monaco Benin Ghana Greece Mauritius Bangladesh Christmas Island Azerbaijan Chile Mayotte Liechtenstein Latvia Aruba Åland Islands Bolivia",
+          searchStrings: [
+            'United States',
+            'Ecuador',
+            'El Salvador',
+            'Panama',
+            'East Timor',
+            'Zimbabwe',
+            'Micronesia',
+            'Marshall Islands',
+            'Palau',
+            'Turks and Caicos Islands',
+            'British Virgin Islands',
+            'Caribbean Netherlands',
+            'Bermuda',
+            'Bahamas',
+            'Puerto Rico',
+            'Guam',
+            'Northern Mariana Islands',
+            'American Samoa',
+            'U.S. Virgin Islands',
+          ],
         },
         {
           value: 5,
           label: 'DOP',
           currency: 'dop',
-          countries: 'Dop',
         },
         {
           value: 6,
           label: 'UZS',
           currency: 'uzs',
-          countries: 'Uzs',
         },
         {
           value: 7,
           label: 'TTD',
           currency: 'ttd',
-          countries: 'Ttd',
         },
         { header: 'All currencies' },
         {
           currency: 'aed',
           value: 'AED',
           label: 'AED',
-          searchable: 'United Arab Emirates',
+          searchStrings: ['United Arab Emirates'],
         },
         {
           currency: 'aud',
           value: 'AUD',
           label: 'AUD',
           note: 'Australian dollar',
-          searchable: 'Australia',
-          classNames: {},
+          searchStrings: ['Australia'],
           secondary: '',
           icon: null,
-          selected: false,
         },
         {
           currency: 'bgn',
           value: 'BGN',
           label: 'BGN',
           note: 'Bulgarian lev',
-          searchable: 'Bulgaria',
-          classNames: {},
+          searchStrings: ['Bulgaria'],
           secondary: '',
           icon: null,
-          selected: false,
         },
         {
           currency: 'brl',
           value: 'BRL',
           label: 'BRL',
           note: 'Brazilian real',
-          searchable: 'Brazil',
-          classNames: {},
+          searchStrings: ['Brazil'],
           secondary: '',
           icon: null,
-          selected: false,
         },
         {
-          currency: null,
+          currency: undefined,
           value: 'USD',
           label: 'USD',
           note: 'United States dollar - Outside of the US',
-          searchable: 'United States',
-          classNames: {},
+          searchStrings: ['United States'],
           secondary: '',
           icon: <GlobeIcon />,
-          selected: false,
         },
       ]}
-      onChange={(v) => setSelected(v)}
+      onChange={(option) => {
+        if (isSelectOptionItem(option)) {
+          setSelected(option);
+        }
+      }}
     />
   );
 };
 
 export const AdvancedSearch = () => {
   const [searchValue, setSearchValue] = useState('');
-  const [selected, setSelected] = useState({
+  const [selected, setSelected] = useState<SelectOptionItem>({
     value: 0,
     label: 'A thing',
     note: 'with a note',
@@ -266,7 +308,7 @@ export const AdvancedSearch = () => {
 
   const size = select('size', ['sm', 'md', 'lg'], 'md');
   const dropdownRight = select('dropdownRight', ['xs', 'sm', 'md', 'lg', 'xl'], 'md');
-  const dropdownWidth = select('dropdownWidth', [null, 'sm', 'md', 'lg'], 'md');
+  const dropdownWidth = select('dropdownWidth', [undefined, 'sm', 'md', 'lg'], 'md');
 
   const id = text('id', 'advanced-search-button');
   const placeholder = text('placeholder', 'placeholder');
@@ -318,15 +360,19 @@ export const AdvancedSearch = () => {
           label: 'A thing with searchable alternatives',
           searchStrings: ['abbreviation', 'acronym', 'nickname'],
         },
-      ].filter((option) => option.label && option.label.toLowerCase().includes(searchValue))}
-      onChange={(v) => setSelected(v)}
+      ].filter((option) => option.label?.toLowerCase().includes(searchValue))}
+      onChange={(option) => {
+        if (isSelectOptionItem(option)) {
+          setSelected(option);
+        }
+      }}
       onSearchChange={(v) => setSearchValue(v)}
     />
   );
 };
 
 export const SearchingLargeLists = () => {
-  const [selected, setSelected] = useState({
+  const [selected, setSelected] = useState<SelectOptionItem>({
     value: 'option1',
     label: 'Option 1',
     secondary: 'Here we have a description describing option 1',
@@ -334,7 +380,7 @@ export const SearchingLargeLists = () => {
 
   const size = select('size', ['sm', 'md', 'lg'], 'md');
   const dropdownRight = select('dropdownRight', ['xs', 'sm', 'md', 'lg', 'xl'], 'md');
-  const dropdownWidth = select('dropdownWidth', [null, 'sm', 'md', 'lg'], 'md');
+  const dropdownWidth = select('dropdownWidth', [undefined, 'sm', 'md', 'lg'], 'md');
 
   const id = text('id', 'large-list-button');
   const placeholder = text('placeholder', 'Placeholder text');
@@ -359,12 +405,16 @@ export const SearchingLargeLists = () => {
       required={required}
       searchPlaceholder="Search placeholder"
       dropdownUp={dropdownUp}
-      options={new Array(1500).fill().map((x, index) => ({
+      options={new Array(1500).fill(null).map((x, index) => ({
         value: `option${index + 1}`,
         label: `Option ${index + 1}`,
         secondary: `Here we have a description describing option ${index + 1}`,
       }))}
-      onChange={(v) => setSelected(v)}
+      onChange={(option) => {
+        if (isSelectOptionItem(option)) {
+          setSelected(option);
+        }
+      }}
     />
   );
 };

package/src/stepper/{deviceDetection.js → deviceDetection.ts}

@@ -1,12 +1,8 @@
 function supportsTouchEvents() {
   const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
   const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
-  const documentTouchIsDefined =
-    typeof window !== 'undefined' &&
-    window.DocumentTouch &&
-    document instanceof window.DocumentTouch;
 
-  return !!(onTouchStartIsDefined || maxTouchPointsIsDefined || documentTouchIsDefined);
+  return !!(onTouchStartIsDefined || maxTouchPointsIsDefined);
 }
 
 function userAgentSuggestsTouchDevice() {
@@ -21,7 +17,7 @@ function userAgentSuggestsTouchDevice() {
   ];
   const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
   const regex = new RegExp(matchString, 'gi');
-  return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
+  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);
 }
 // Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
 // Only use this for small vanity changes where it still works either way.

package/src/utilities/deprecatedProperty/{deprecatedProperty.spec.js → deprecatedProperty.spec.ts}

@@ -5,6 +5,7 @@ const props = { prop1: 'prop1', prop2: 'prop2' };
 const validator = jest.fn();
 
 describe('deprecated', () => {
+  const component = 'Test';
   const origWarn = console.warn;
   let mockedWarn;
 
@@ -22,11 +23,10 @@ describe('deprecated', () => {
   });
 
   describe('if prop has been listed as deprecated', () => {
+    const propertyName = 'prop1';
+
     it('calls console.warn with the correct message', () => {
-      const component = 'Test';
       const newProperty = 'newProp';
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -42,10 +42,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if newProp is not provided', () => {
-      const component = 'Test';
-
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -61,8 +57,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if message is provided', () => {
-      const component = 'Test';
-      const propertyName = 'prop1';
       const message = 'Some custom message.';
 
       deprecated(validator, { component, message })(props, propertyName);
@@ -74,15 +68,15 @@ describe('deprecated', () => {
   });
 
   describe('if prop has not been listed as deprecated', () => {
+    const propertyName = 'prop3';
+
     it('calls validator with props', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(console.warn).not.toHaveBeenCalled();
     });
 
     it('calls validator with expected args', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(validator).toHaveBeenCalledWith({ prop1: 'prop1', prop2: 'prop2' }, 'prop3');
     });
   });

package/src/utilities/deprecatedProperty/{deprecatedProperty.js → deprecatedProperty.ts}

@@ -1,6 +1,22 @@
 import { logActionRequired } from '../logActionRequired';
 
-const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
+type DeprecatedMessageType = {
+  component: string;
+  propName: string;
+  message: string;
+  expiryDate?: Date;
+};
+
+type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
+
+type DeprecatedOptionsType = {
+  component: string;
+  message?: string;
+  newProp?: string;
+  expiryDate?: Date;
+};
+
+const deprecatedMessage = ({ component, propName, message, expiryDate }: DeprecatedMessageType) => {
   const messages = [`${component} has deprecated the use of ${propName}.`];
 
   if (message) {
@@ -21,11 +37,14 @@ const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
 };
 
 const deprecated =
-  (validator, { component, message = '', newProp: newProperty = null, expiryDate = null }) =>
-  (props, propertyName, ...rest) => {
+  (
+    validator: ValidatorType,
+    { component, message = '', newProp: newProperty, expiryDate }: DeprecatedOptionsType,
+  ) =>
+  (props: Record<string, any>, propertyName: string, ...rest: any[]) => {
     const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
 
-    if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
+    if (props[propertyName] !== null && props[propertyName] !== undefined) {
       logActionRequired(
         deprecatedMessage({
           component,

package/src/utilities/{logActionRequired.js → logActionRequired.ts}

@@ -1,11 +1,11 @@
-export function logActionRequired(message) {
+export function logActionRequired(message: string) {
   if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }
 }
 
-export function logActionRequiredIf(message, conditional) {
+export function logActionRequiredIf(message: string, conditional: boolean) {
   if (conditional) {
     logActionRequired(message);
   }

package/src/button/legacyUtils/legacyUtils.js

@@ -1,54 +0,0 @@
-import { ControlType, Priority, Size, Type } from '../../common';
-import { logActionRequiredIf } from '../../utilities';
-
-const deprecatedTypeMap = {
-  [Type.PRIMARY]: ControlType.ACCENT,
-  [Type.SECONDARY]: ControlType.ACCENT,
-  [Type.LINK]: ControlType.ACCENT,
-  [Type.PAY]: ControlType.POSITIVE,
-  [Type.DANGER]: ControlType.NEGATIVE,
-};
-
-const oldTypePriorityMap = {
-  [Type.DANGER]: Priority.SECONDARY,
-  [Type.LINK]: Priority.TERTIARY,
-  [Type.SECONDARY]: Priority.SECONDARY,
-};
-
-const deprecatedTypeMapMessage = {
-  [Type.DANGER]: 'Type.NEGATIVE',
-  [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',
-  [Type.PAY]: 'ControlType.POSITIVE',
-  [Type.PRIMARY]: 'ControlType.ACCENT',
-  [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',
-};
-
-const deprecatedTypes = Object.keys(deprecatedTypeMap);
-
-export const establishNewType = (originalType) => deprecatedTypeMap[originalType] || originalType;
-
-export const establishNewPriority = (originalPriority, originalType) => {
-  const type = establishNewType(originalType);
-
-  // The old SECONDARY and LINK types now map to priorities. If they're still using one of
-  // these old types, ignore whatever priority they've passed and use this instead.
-  if (oldTypePriorityMap[originalType]) {
-    return oldTypePriorityMap[originalType];
-  }
-  // Only ControlType.ACCENT supports tertiary styles
-  if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {
-    return Priority.SECONDARY;
-  }
-  return originalPriority;
-};
-
-export const logDeprecationNotices = ({ size, type }) => {
-  logActionRequiredIf(
-    'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',
-    size === Size.EXTRA_SMALL,
-  );
-  logActionRequiredIf(
-    `Button has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,
-    deprecatedTypes.includes(type),
-  );
-};