@transferwise/components 0.0.0-experimental-08de8b3 → 0.0.0-experimental-ab588f3

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

@@ -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, { SelectItem, SelectOptionItem } from './Select';
+import Select from './Select';
 
 export default {
   component: Select,
@@ -17,16 +17,8 @@ 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<SelectOptionItem>({
+  const [selected, setSelected] = useState({
     value: 0,
     label: 'A thing',
     note: 'with a note',
@@ -34,7 +26,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', [undefined, 'sm', 'md', 'lg'], 'md');
+  const dropdownWidth = select('dropdownWidth', [null, 'sm', 'md', 'lg'], 'md');
 
   const id = text('id', 'basic-button');
   const placeholder = text('placeholder', 'Placeholder text');
@@ -43,12 +35,14 @@ export const Basic = () => {
   const required = boolean('required', false);
   const dropdownUp = boolean('dropdownUp', false);
   const disabled = boolean('disabled', false);
-  const search = boolean('search', true);
+  const search = boolean('search', false);
+  const hasError = boolean('hasError', false);
 
   return (
     <Select
       id={id}
       size={size}
+      classNames={hasError ? 'has-error' : ''}
       placeholder={placeholder}
       dropdownRight={dropdownRight}
       dropdownWidth={dropdownWidth}
@@ -114,17 +108,13 @@ 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={(option) => {
-        if (isSelectOptionItem(option)) {
-          setSelected(option);
-        }
-      }}
+      onChange={(v) => setSelected(v)}
     />
   );
 };
 
 export const CustomSearchFunction = () => {
-  const [selected, setSelected] = useState<SelectOptionItem>({
+  const [selected, setSelected] = useState({
     value: 1,
     label: 'EUR',
     currency: 'EUR',
@@ -132,7 +122,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', [undefined, 'sm', 'md', 'lg'], 'md');
+  const dropdownWidth = select('dropdownWidth', [null, 'sm', 'md', 'lg'], 'md');
 
   const id = text('id', 'custom-search-button');
   const placeholder = text('placeholder', 'placeholder');
@@ -154,7 +144,12 @@ export const CustomSearchFunction = () => {
       block={block}
       selected={selected}
       disabled={disabled}
-      search={search}
+      search={
+        search
+          ? (option, keyword) =>
+              option.countries && option.countries.toLowerCase().includes(keyword.toLowerCase())
+          : false
+      }
       required={required}
       searchPlaceholder="Search placeholder"
       dropdownUp={dropdownUp}
@@ -164,143 +159,106 @@ export const CustomSearchFunction = () => {
           value: 1,
           label: 'EUR',
           currency: 'EUR',
-          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',
-          ],
+          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',
         },
         {
           value: 2,
           label: 'GBP',
           currency: 'GBP',
-          searchStrings: ['Isle of Man', 'United Kingdom'],
+          countries: 'Isle of Man United Kingdom',
         },
         {
           value: 3,
           label: 'INR',
           currency: 'INR',
-          searchStrings: ['India'],
+          countries: 'India',
         },
         {
           value: 4,
           label: 'USD',
           currency: 'USD',
-          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',
-          ],
+          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",
         },
         {
           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',
-          searchStrings: ['United Arab Emirates'],
+          searchable: 'United Arab Emirates',
         },
         {
           currency: 'aud',
           value: 'AUD',
           label: 'AUD',
           note: 'Australian dollar',
-          searchStrings: ['Australia'],
+          searchable: 'Australia',
+          classNames: {},
           secondary: '',
           icon: null,
+          selected: false,
         },
         {
           currency: 'bgn',
           value: 'BGN',
           label: 'BGN',
           note: 'Bulgarian lev',
-          searchStrings: ['Bulgaria'],
+          searchable: 'Bulgaria',
+          classNames: {},
           secondary: '',
           icon: null,
+          selected: false,
         },
         {
           currency: 'brl',
           value: 'BRL',
           label: 'BRL',
           note: 'Brazilian real',
-          searchStrings: ['Brazil'],
+          searchable: 'Brazil',
+          classNames: {},
           secondary: '',
           icon: null,
+          selected: false,
         },
         {
-          currency: undefined,
+          currency: null,
           value: 'USD',
           label: 'USD',
           note: 'United States dollar - Outside of the US',
-          searchStrings: ['United States'],
+          searchable: 'United States',
+          classNames: {},
           secondary: '',
           icon: <GlobeIcon />,
+          selected: false,
         },
       ]}
-      onChange={(option) => {
-        if (isSelectOptionItem(option)) {
-          setSelected(option);
-        }
-      }}
+      onChange={(v) => setSelected(v)}
     />
   );
 };
 
 export const AdvancedSearch = () => {
   const [searchValue, setSearchValue] = useState('');
-  const [selected, setSelected] = useState<SelectOptionItem>({
+  const [selected, setSelected] = useState({
     value: 0,
     label: 'A thing',
     note: 'with a note',
@@ -308,7 +266,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', [undefined, 'sm', 'md', 'lg'], 'md');
+  const dropdownWidth = select('dropdownWidth', [null, 'sm', 'md', 'lg'], 'md');
 
   const id = text('id', 'advanced-search-button');
   const placeholder = text('placeholder', 'placeholder');
@@ -360,19 +318,15 @@ export const AdvancedSearch = () => {
           label: 'A thing with searchable alternatives',
           searchStrings: ['abbreviation', 'acronym', 'nickname'],
         },
-      ].filter((option) => option.label?.toLowerCase().includes(searchValue))}
-      onChange={(option) => {
-        if (isSelectOptionItem(option)) {
-          setSelected(option);
-        }
-      }}
+      ].filter((option) => option.label && option.label.toLowerCase().includes(searchValue))}
+      onChange={(v) => setSelected(v)}
       onSearchChange={(v) => setSearchValue(v)}
     />
   );
 };
 
 export const SearchingLargeLists = () => {
-  const [selected, setSelected] = useState<SelectOptionItem>({
+  const [selected, setSelected] = useState({
     value: 'option1',
     label: 'Option 1',
     secondary: 'Here we have a description describing option 1',
@@ -380,7 +334,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', [undefined, 'sm', 'md', 'lg'], 'md');
+  const dropdownWidth = select('dropdownWidth', [null, 'sm', 'md', 'lg'], 'md');
 
   const id = text('id', 'large-list-button');
   const placeholder = text('placeholder', 'Placeholder text');
@@ -405,16 +359,12 @@ export const SearchingLargeLists = () => {
       required={required}
       searchPlaceholder="Search placeholder"
       dropdownUp={dropdownUp}
-      options={new Array(1500).fill(null).map((x, index) => ({
+      options={new Array(1500).fill().map((x, index) => ({
         value: `option${index + 1}`,
         label: `Option ${index + 1}`,
         secondary: `Here we have a description describing option ${index + 1}`,
       }))}
-      onChange={(option) => {
-        if (isSelectOptionItem(option)) {
-          setSelected(option);
-        }
-      }}
+      onChange={(v) => setSelected(v)}
     />
   );
 };

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

@@ -1,8 +1,12 @@
 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);
+  return !!(onTouchStartIsDefined || maxTouchPointsIsDefined || documentTouchIsDefined);
 }
 
 function userAgentSuggestsTouchDevice() {
@@ -17,7 +21,7 @@ function userAgentSuggestsTouchDevice() {
   ];
   const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
   const regex = new RegExp(matchString, 'gi');
-  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);
+  return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
 }
 // 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/button/legacyUtils/legacyUtils.ts

@@ -1,74 +0,0 @@
-import { ControlType, Priority, Size, Type } from '../../common';
-import { logActionRequired, logActionRequiredIf } from '../../utilities';
-
-const deprecatedTypeMap: Record<Type, ControlType> = {
-  [Type.PRIMARY]: ControlType.ACCENT,
-  [Type.SECONDARY]: ControlType.ACCENT,
-  [Type.LINK]: ControlType.ACCENT,
-  [Type.PAY]: ControlType.POSITIVE,
-  [Type.DANGER]: ControlType.NEGATIVE,
-};
-
-type OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;
-const oldTypePriorityMap: Record<OldTypeKeys, Priority> = {
-  [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);
-
-type EstablishNewTypeType = (
-  originalType: Type | (string & Record<never, never>) | null,
-) => `${ControlType}` | string | null;
-
-export const establishNewType: EstablishNewTypeType = (originalType) =>
-  originalType && originalType in deprecatedTypeMap
-    ? deprecatedTypeMap[originalType as Type]
-    : originalType;
-
-type EstablishNewPriorityType = (
-  originalPriority?: Priority | (string & Record<never, never>) | null,
-  originalType?: OldTypeKeys | (string & Record<never, never>) | null,
-) => `${ControlType}` | string | null | undefined;
-
-export const establishNewPriority: EstablishNewPriorityType = (originalPriority, originalType) => {
-  const type = originalType ? 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 (originalType && originalType in oldTypePriorityMap) {
-    return oldTypePriorityMap[originalType as OldTypeKeys];
-  }
-  // Only ControlType.ACCENT supports tertiary styles
-  if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {
-    return Priority.SECONDARY;
-  }
-  return originalPriority;
-};
-
-type DeprecatedTypeMapMessageType = keyof typeof deprecatedTypeMapMessage;
-type LogDeprecationNoticesType = (params: {
-  size: `${Size}`;
-  type: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;
-}) => void;
-export const logDeprecationNotices: LogDeprecationNoticesType = ({ size, type }) => {
-  logActionRequiredIf(
-    'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',
-    size === Size.EXTRA_SMALL,
-  );
-
-  if (type && deprecatedTypes.includes(type) && type in deprecatedTypeMapMessage) {
-    logActionRequired(
-      `Button has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage[type as DeprecatedTypeMapMessageType]}.`,
-    );
-  }
-};