@transferwise/components 0.0.0-experimental-fdcd4f0 → 0.0.0-experimental-3f14884

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,gCA6BP,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": "0.0.0-experimental-fdcd4f0",
+  "version": "0.0.0-experimental-3f14884",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -77,12 +77,12 @@
     "rollup": "^3.28.1",
     "storybook": "^7.0.6",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "0.0.0-experimental-fdcd4f0",
+    "@transferwise/neptune-css": "0.0.0-experimental-3f14884",
     "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-fdcd4f0",
+    "@transferwise/neptune-css": "0.0.0-experimental-3f14884",
     "@wise/art": "^2",
     "@wise/components-theming": "^0.8.4",
     "currency-flags": "^4.0.2",

package/src/i18n/en.json

@@ -5,6 +5,7 @@
   "neptune.DateInput.day.label": "Day",
   "neptune.DateInput.month.label": "Month",
   "neptune.DateInput.year.label": "Year",
+  "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.Summary.statusDone": "Item done",

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,13 @@ const Link = ({
       onClick={onClick}
       {...props}
     >
-      {children}
-      {isBlank && <NavigateAwayIcon />}
+      {children}{' '}
+      {isBlank && (
+        <>
+          <span className="sr-only">{formatMessage(messages.opensInNewTab)}</span>
+          <NavigateAwayIcon />
+        </>
+      )}
     </a>
   );
 };