@transferwise/components 46.77.0 → 46.79.0

package/src/main.css

@@ -221,18 +221,27 @@ div.critical-comms .critical-comms-body {
 }
 .tw-avatar {
   position: relative;
+  border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
 }
 .tw-avatar .tw-avatar__content {
+  align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
   background-color: var(--color-background-neutral);
+  border-radius: 50%;
+  color: #37517e;
+  color: var(--color-content-primary);
+  display: flex;
+  height: 100%;
+  justify-content: center;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
+  width: 100%;
 }
 .tw-avatar--outlined {
   border: 1px solid #00a2dd;
@@ -275,6 +284,11 @@ div.critical-comms .critical-comms-body {
   color: var(--color-dark-charcoal);
   line-height: 1;
 }
+.tw-avatar--24 {
+  min-width: 24px;
+  width: 24px;
+  height: 24px;
+}
 .tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
@@ -305,6 +319,11 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
+.tw-avatar--40 {
+  min-width: 40px;
+  width: 40px;
+  height: 40px;
+}
 .tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
@@ -335,6 +354,11 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
+.tw-avatar--48 {
+  min-width: 48px;
+  width: 48px;
+  height: 48px;
+}
 .tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
@@ -365,6 +389,11 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
+.tw-avatar--56 {
+  min-width: 56px;
+  width: 56px;
+  height: 56px;
+}
 .tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
@@ -395,6 +424,11 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
+.tw-avatar--72 {
+  min-width: 72px;
+  width: 72px;
+  height: 72px;
+}
 .tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;
@@ -460,10 +494,16 @@ div.critical-comms .critical-comms-body {
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
+  width: var(--badge-size);
+  height: var(--badge-size);
   bottom: 0;
   right: 0;
   box-sizing: border-box;
+  border-radius: 50%;
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1016,8 +1056,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1172,6 +1212,10 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4158,12 +4202,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4179,20 +4217,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/navigationOption/{NavigationOption.story.js → NavigationOption.story.tsx}

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import {
@@ -19,8 +20,22 @@ export default {
   tags: ['autodocs'],
 };
 
-const Template = (props) => {
-  const href = text('href', props.href);
+type TemplateTypes = {
+  href?: string;
+  title?: string;
+  content?: string;
+  complex?: boolean;
+  disabled?: boolean;
+  showMediaAtAllSizes?: boolean;
+  showMediaCircle?: boolean;
+  isContainerAligned?: boolean;
+  className?: string;
+  hasTitleOnly?: boolean;
+  media?: ReactNode;
+};
+
+const Template = (props: TemplateTypes) => {
+  const href = text('href', props.href ?? '');
   const title = text('title', props.title ?? 'Navigation option');
   const content = text('content', props.content ?? 'Button and icon are vertically centered.');
   const complex = boolean('complex', props.complex ?? false);
@@ -28,7 +43,7 @@ const Template = (props) => {
   const showMediaAtAllSizes = boolean('showMediaAtAllSizes', props.showMediaAtAllSizes ?? false);
   const showMediaCircle = props.showMediaCircle ?? boolean('showMediaCircle', true);
   const isContainerAligned = boolean('isContainerAligned', false);
-  const className = text('className', props.className);
+  const className = text('className', props.className ?? '');
 
   return (
     <NavigationOption
@@ -140,7 +155,10 @@ export const Multiple = () => (
 
 export const WithIllustration = () => {
   return (
-    <Template media={<Illustration name={Assets.GLOBE} disablePadding />} showMediaCircle={false} />
+    <Template
+      media={<Illustration name={Assets.GLOBE} disablePadding alt="" />}
+      showMediaCircle={false}
+    />
   );
 };
 
@@ -166,7 +184,7 @@ export const WithContainerContent = () => (
   </>
 );
 
-const NavigationOptionTemplate = (props) => {
+const NavigationOptionTemplate = (props: TemplateTypes) => {
   const {
     href,
     title,

package/src/navigationOption/NavigationOption.tsx

@@ -6,7 +6,7 @@ import { Position } from '../common';
 import Option from '../common/Option';
 import { OptionProps, ReferenceType } from '../common/Option/Option';
 
-type NavigationOptionProps = OptionProps;
+export type NavigationOptionProps = OptionProps;
 
 const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -18,12 +18,10 @@ exports[`OverlayHeader renders as expected 1`] = `
         class="d-flex align-items-center order-2"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             TM
           </div>

package/src/promoCard/PromoCard.spec.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen } from '../test-utils';
 import React from 'react';
 
 import PromoCard, { PromoCardProps, PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -34,12 +34,10 @@ exports[`Radio shows the avatar when supplied 1`] = `
         class="np-radio__avatar m-l-auto"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             HD
           </div>

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/statusIcon/StatusIcon.css

@@ -1,9 +1,3 @@
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -19,20 +13,6 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/statusIcon/StatusIcon.less

@@ -1,8 +1,3 @@
-.status-icon > svg {
-  height: var(--size-32);
-  width: var(--size-32);
-}
-
 .status-circle {
   .light {
     color: var(--color-contrast);
@@ -22,18 +17,6 @@
       }
     }
   }
-
-  &-sm {
-    .status-icon > svg {
-      height: var(--size-14);
-      width: var(--size-14);
-
-      @media (--screen-400-zoom) {
-        width: var(--size-24);
-        height: var(--size-24);
-      }
-    }
-  }
 }
 
 .status-circle.negative,