@transferwise/components 0.0.0-experimental-3b1799b → 0.0.0-experimental-c6db9e8

package/build/main.css

@@ -4532,8 +4532,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .np-select .tw-icon,
 .np-dropdown-menu .tw-icon,
-.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
+.np-select img,
+.np-dropdown-menu img {
   margin-right: 8px;
   margin-right: var(--size-8);
   display: inline-block;
@@ -4541,17 +4541,13 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 [dir="rtl"] .np-select .tw-icon,
 [dir="rtl"] .np-dropdown-menu .tw-icon,
-[dir="rtl"] .np-select .currency-flag,
-[dir="rtl"] .np-dropdown-menu .currency-flag {
+[dir="rtl"] .np-select img,
+[dir="rtl"] .np-dropdown-menu img {
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 0;
   margin-right: initial;
 }
-.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
-  margin-top: 3px;
-}
 .np-select .np-text-body-default,
 .np-dropdown-menu .np-text-body-default {
   color: #5d7079;
@@ -4565,9 +4561,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
-.np-theme-personal .currency-flag {
-  margin-top: 0;
-}
 .np-theme-personal .np-select .np-dropdown-toggle {
   background-color: transparent;
   background-color: initial;

package/build/styles/main.css

@@ -4532,8 +4532,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .np-select .tw-icon,
 .np-dropdown-menu .tw-icon,
-.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
+.np-select img,
+.np-dropdown-menu img {
   margin-right: 8px;
   margin-right: var(--size-8);
   display: inline-block;
@@ -4541,17 +4541,13 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 [dir="rtl"] .np-select .tw-icon,
 [dir="rtl"] .np-dropdown-menu .tw-icon,
-[dir="rtl"] .np-select .currency-flag,
-[dir="rtl"] .np-dropdown-menu .currency-flag {
+[dir="rtl"] .np-select img,
+[dir="rtl"] .np-dropdown-menu img {
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 0;
   margin-right: initial;
 }
-.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
-  margin-top: 3px;
-}
 .np-select .np-text-body-default,
 .np-dropdown-menu .np-text-body-default {
   color: #5d7079;
@@ -4565,9 +4561,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
-.np-theme-personal .currency-flag {
-  margin-top: 0;
-}
 .np-theme-personal .np-select .np-dropdown-toggle {
   background-color: transparent;
   background-color: initial;

package/build/styles/select/Select.css

@@ -228,23 +228,20 @@
   white-space: nowrap;
 }.np-select .tw-icon,
 .np-dropdown-menu .tw-icon,
-.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
+.np-select img,
+.np-dropdown-menu img {
   margin-right: 8px;
   margin-right: var(--size-8);
   display: inline-block;
   vertical-align: middle;
 }[dir="rtl"] .np-select .tw-icon,
 [dir="rtl"] .np-dropdown-menu .tw-icon,
-[dir="rtl"] .np-select .currency-flag,
-[dir="rtl"] .np-dropdown-menu .currency-flag {
+[dir="rtl"] .np-select img,
+[dir="rtl"] .np-dropdown-menu img {
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 0;
   margin-right: initial;
-}.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
-  margin-top: 3px;
 }.np-select .np-text-body-default,
 .np-dropdown-menu .np-text-body-default {
   color: #5d7079;
@@ -255,8 +252,6 @@
 }.np-theme-personal {
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
-}.np-theme-personal .currency-flag {
-  margin-top: 0;
 }.np-theme-personal .np-select .np-dropdown-toggle {
   background-color: transparent;
   background-color: initial;

package/build/types/select/option/Option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/select/option/Option.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,MAAM,CAAC,CAAC,EAAE,EACjB,KAAK,EACL,QAAa,EACb,IAAS,EACT,SAAc,EACd,IAAI,EACJ,UAAe,EACf,QAAgB,GACjB,EAAE,KAAK,CAAC,CAAC,CAAC,+BA0DV;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/select/option/Option.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,MAAM,CAAC,CAAC,EAAE,EACjB,KAAK,EACL,QAAa,EACb,IAAS,EACT,SAAc,EACd,IAAI,EACJ,UAAe,EACf,QAAgB,GACjB,EAAE,KAAK,CAAC,CAAC,CAAC,+BAqDV;AAED,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-3b1799b",
+  "version": "0.0.0-experimental-c6db9e8",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -53,7 +53,7 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-tokens": "^8.8.0",
+    "@transferwise/neptune-tokens": "^8.8.1",
     "@tsconfig/recommended": "^1.0.2",
     "@types/babel__core": "^7.20.1",
     "@types/jest": "^26.0.20",
@@ -78,24 +78,18 @@
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-3b1799b",
-    "@wise/components-theming": "0.8.4"
+    "@wise/components-theming": "0.8.4",
+    "@transferwise/neptune-css": "0.0.0-experimental-c6db9e8"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-3b1799b",
+    "@transferwise/neptune-css": "0.0.0-experimental-c6db9e8",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^0.8.4",
-    "currency-flags": "^4.0.2",
     "react": ">=16.14",
     "react-dom": ">=16.14",
     "react-intl": "^5.10.0 || ^6"
   },
-  "peerDependenciesMeta": {
-    "currency-flags": {
-      "optional": true
-    }
-  },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
     "@floating-ui/react": "^0.25.4",

package/src/main.css

@@ -4532,8 +4532,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .np-select .tw-icon,
 .np-dropdown-menu .tw-icon,
-.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
+.np-select img,
+.np-dropdown-menu img {
   margin-right: 8px;
   margin-right: var(--size-8);
   display: inline-block;
@@ -4541,17 +4541,13 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 [dir="rtl"] .np-select .tw-icon,
 [dir="rtl"] .np-dropdown-menu .tw-icon,
-[dir="rtl"] .np-select .currency-flag,
-[dir="rtl"] .np-dropdown-menu .currency-flag {
+[dir="rtl"] .np-select img,
+[dir="rtl"] .np-dropdown-menu img {
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 0;
   margin-right: initial;
 }
-.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
-  margin-top: 3px;
-}
 .np-select .np-text-body-default,
 .np-dropdown-menu .np-text-body-default {
   color: #5d7079;
@@ -4565,9 +4561,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
-.np-theme-personal .currency-flag {
-  margin-top: 0;
-}
 .np-theme-personal .np-select .np-dropdown-toggle {
   background-color: transparent;
   background-color: initial;

package/src/select/Select.css

@@ -228,23 +228,20 @@
   white-space: nowrap;
 }.np-select .tw-icon,
 .np-dropdown-menu .tw-icon,
-.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
+.np-select img,
+.np-dropdown-menu img {
   margin-right: 8px;
   margin-right: var(--size-8);
   display: inline-block;
   vertical-align: middle;
 }[dir="rtl"] .np-select .tw-icon,
 [dir="rtl"] .np-dropdown-menu .tw-icon,
-[dir="rtl"] .np-select .currency-flag,
-[dir="rtl"] .np-dropdown-menu .currency-flag {
+[dir="rtl"] .np-select img,
+[dir="rtl"] .np-dropdown-menu img {
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 0;
   margin-right: initial;
-}.np-select .currency-flag,
-.np-dropdown-menu .currency-flag {
-  margin-top: 3px;
 }.np-select .np-text-body-default,
 .np-dropdown-menu .np-text-body-default {
   color: #5d7079;
@@ -255,8 +252,6 @@
 }.np-theme-personal {
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
-}.np-theme-personal .currency-flag {
-  margin-top: 0;
 }.np-theme-personal .np-select .np-dropdown-toggle {
   background-color: transparent;
   background-color: initial;

package/src/select/Select.less

@@ -250,17 +250,13 @@
 .np-select,
 .np-dropdown-menu {
   .tw-icon,
-  .currency-flag {
+  img {
     .margin(right, var(--size-8));
 
     display: inline-block;
     vertical-align: middle;
   }
 
-  .currency-flag {
-    margin-top: 3px;
-  }
-
   .np-text-body-default {
     color: var(--color-content-secondary);
   }
@@ -271,9 +267,6 @@
 }
 
 .np-theme-personal {
-  .currency-flag {
-    margin-top: 0;
-  }
   /* stylelint-disable-next-line no-duplicate-selectors */
   .np-select .np-dropdown-toggle {
     background-color: unset;

package/src/select/option/Option.spec.js

@@ -1,4 +1,5 @@
 import { Person as ProfileIcon } from '@transferwise/icons';
+import { Flag } from '@wise/art';
 import { shallow } from 'enzyme';
 
 import Body from '../../body';
@@ -31,31 +32,12 @@ describe('option', () => {
 
   it('renders the given currency flag for a given currency', () => {
     component.setProps({ currency: 'hustle' });
-    expect(component.find('i.currency-flag.currency-flag-hustle')).toHaveLength(1);
+    expect(component.find(Flag)).toHaveLength(1);
   });
 
   it('overrides currency flag with icon', () => {
     component.setProps({ currency: 'hustle', icon: <ProfileIcon /> });
     expect(component.find(ProfileIcon)).toHaveLength(1);
-    expect(component.find('i.currency-flag.currency-flag-hustle')).toHaveLength(0);
-  });
-
-  it('show currency flags on mobile if it is selected', () => {
-    const flagHiddenOnMobile = () => component.find('i.currency-flag').hasClass('hidden-xs');
-    component.setProps({ currency: 'hustle' });
-    expect(flagHiddenOnMobile()).toBe(false);
-    component.setProps({ selected: true });
-    expect(flagHiddenOnMobile()).toBe(false);
-  });
-
-  it('can override class names', () => {
-    component.setProps({
-      currency: 'hustle',
-      classNames: {
-        'currency-flag-hustle': 'currency-flag-hustle-xyz',
-        'currency-flag': 'currency-flag-xyz',
-      },
-    });
-    expect(component.find('i.currency-flag-xyz.currency-flag-hustle-xyz')).toHaveLength(1);
+    expect(component.find(Flag)).toHaveLength(0);
   });
 });

package/src/select/option/Option.tsx

@@ -1,4 +1,4 @@
-// Option.tsx NEW
+import { Flag } from '@wise/art';
 import { useTheme } from '@wise/components-theming';
 import { cloneElement, ReactElement, ReactNode } from 'react';
 
@@ -26,18 +26,13 @@ function Option<T>({
   selected = false,
 }: Props<T>) {
   const { isModern } = useTheme();
-  const style = (classes: Array<string>): string =>
-    classes.map((className) => classNames[className] || className).join(' ');
-  const currencyClassNames = currency
-    ? style(['currency-flag', `currency-flag-${currency.toLowerCase()}`])
-    : undefined;
 
   const iconElement = icon
     ? cloneElement(icon as ReactElement, {
         size: 24,
         className: 'tw-icon',
       })
-    : currency && <i className={currencyClassNames} />;
+    : currency && <Flag code={currency.toLowerCase()} intrinsicSize={24} />;
 
   const titleAndNoteElement = (
     <Body as="span" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>