@transferwise/components 45.14.1 → 45.14.2

package/build/types/link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAEjG;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCAsBP,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAInD,MAAM,MAAM,KAAK,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAEjG;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCAuBP,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/types/link/Link.messages.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    opensInNewTab: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=Link.messages.d.ts.map

package/build/types/link/Link.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.messages.d.ts","sourceRoot":"","sources":["../../../src/link/Link.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.14.1",
+  "version": "45.14.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -62,7 +62,7 @@
     "@types/react-dom": "^17.0.20",
     "@types/react-transition-group": "4.4.5",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@wise/art": "^2.0.1",
+    "@wise/art": "^2.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "babel-plugin-formatjs": "^10.5.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -77,7 +77,7 @@
     "rollup": "^3.28.1",
     "storybook": "^7.0.6",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "14.5.2",
+    "@transferwise/neptune-css": "14.6.0",
     "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {

package/src/avatar/Avatar.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import * as wiseIcons from '@transferwise/icons';
+import { Flag } from '@wise/art';
 
 import { Size } from '../common';
 import { storyConfig } from '../test-utils';
@@ -22,10 +23,11 @@ export const Emoji: Story = {
   },
 };
 
-export const Flag: Story = {
+export const FlagStory: Story = {
+  name: 'Flag',
   render: (args) => (
     <Avatar {...args}>
-      <img src="https://wise.com/web-art/assets/flags/gbp.svg" alt="" />
+      <Flag code="GBP" />
     </Avatar>
   ),
   args: {
@@ -38,8 +40,8 @@ export const Flag: Story = {
 export const Table: Story = storyConfig(
   {
     render: () => {
-      const flagResourceJpy = 'https://wise.com/web-art/assets/flags/jpy.svg';
-      const flagResourceGbp = 'https://wise.com/web-art/assets/flags/gbp.svg';
+      const flagJPY = <Flag code="JPY" />;
+      const flagGBP = <Flag code="GBP" />;
       const backgroundColor = '#d6f5e3';
       const emoji = '✈️';
       const initials = 'GN';
@@ -52,27 +54,27 @@ export const Table: Story = storyConfig(
             <tr>
               <td>
                 <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={56} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={40} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
             </tr>
@@ -80,27 +82,27 @@ export const Table: Story = storyConfig(
             <tr>
               <td>
                 <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={56} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={40} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
             </tr>

package/src/link/Link.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  opensInNewTab: {
+    id: 'neptune.Link.opensInNewTab',
+    defaultMessage: '(opens in new tab)',
+  },
+});

package/src/link/Link.tsx

@@ -1,9 +1,12 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import { AnchorHTMLAttributes } from 'react';
+import { useIntl } from 'react-intl';
 
 import { LinkLarge, LinkDefault } from '../common';
 
+import messages from './Link.messages';
+
 export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
 
 /**
@@ -23,6 +26,8 @@ const Link = ({
 }: Props) => {
   const isBlank = target === '_blank';
 
+  const { formatMessage } = useIntl();
+
   return (
     <a
       href={href}
@@ -38,8 +43,7 @@ const Link = ({
       onClick={onClick}
       {...props}
     >
-      {children}
-      {isBlank && <NavigateAwayIcon />}
+      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
     </a>
   );
 };

package/src/navigationOption/NavigationOption.story.js

@@ -7,7 +7,7 @@ import {
   Profile,
   UpwardGraph as UpwardGraphIcon,
 } from '@transferwise/icons';
-import { Illustration, Assets } from '@wise/art';
+import { Illustration, Assets, Flag } from '@wise/art';
 
 import { Badge, Nudge, Avatar, Header } from '..';
 
@@ -203,7 +203,7 @@ export const BalanceContent = () => (
     showMediaCircle={false}
     media={
       <Avatar type="icon">
-        <img src="https://wise.com/web-art/assets/flags/gbp.svg" alt="" />
+        <Flag code="GBP" />
       </Avatar>
     }
   />
@@ -229,9 +229,7 @@ export const ExistingContactContent = () => (
     content="EUR account ending in 1111"
     showMediaCircle={false}
     media={
-      <Badge
-        badge={<img src="https://wise.com/public-resources/assets/flags/square/eur.svg" alt="" />}
-      >
+      <Badge badge={<Flag code="EUR" />}>
         <Avatar type="initials" size="md">
           <span aria-hidden>WS</span>
         </Avatar>

package/src/radio/Radio.story.js

@@ -1,5 +1,6 @@
 import { boolean, text } from '@storybook/addon-knobs';
 import { Check } from '@transferwise/icons';
+import { Flag } from '@wise/art';
 import { useState } from 'react';
 
 import Avatar, { AvatarType } from '../avatar';
@@ -33,7 +34,7 @@ export const Basic = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.THUMBNAIL}>
-                <img src="https://wise.com/web-art/assets/flags/imp.svg" alt="" />
+                <Flag code="IMP" />
               </Avatar>
             ) : null
           }
@@ -51,7 +52,7 @@ export const Basic = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.THUMBNAIL}>
-                <img src="https://wise.com/web-art/assets/flags/kes.svg" alt="" />
+                <Flag code="KES" />
               </Avatar>
             ) : null
           }

package/src/radioGroup/RadioGroup.story.js

@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
+import { Flag } from '@wise/art';
 
 import Avatar, { AvatarType } from '../avatar';
 
@@ -16,7 +17,7 @@ export const Basic = () => {
 
   const avatar = showAvatars ? (
     <Avatar type={AvatarType.THUMBNAIL}>
-      <img src="https://wise.com/web-art/assets/flags/nzd.svg" alt="" />
+      <Flag code="NZD" />
     </Avatar>
   ) : undefined;