@transferwise/components 45.26.1 → 45.26.2

package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css

@@ -1 +1 @@
-.typeahead__option.tw-dropdown-item .dropdown-item:active strong{color:#fff}.typeahead__option.tw-dropdown-item--focused{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}
+.typeahead__option.tw-dropdown-item .dropdown-item:active strong{color:#fff}.typeahead__option.tw-dropdown-item--focused{border-radius:10px;border-radius:var(--radius-small);box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)}

package/build/types/info/Info.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Position, SizeSmall, SizeLarge } from '../common';
 export interface Props {
-    'aria-label': string;
+    'aria-label'?: string;
     /**
      * Extra classes applied to Info
      */

package/build/types/info/Info.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAMjE,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,QAAQ,CAAC;CAC/B;AAED,QAAA,MAAM,IAAI,6GASP,KAAK,gCAgDP,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAOjE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,QAAQ,CAAC;CAC/B;AAED,QAAA,MAAM,IAAI,6GASP,KAAK,gCAiDP,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/types/info/Info.messages.d.ts

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

package/build/types/info/Info.messages.d.ts.map

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

package/build/types/summary/Summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAqB1C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QACvE,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAaV,KAAK,gCAoFP,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAqB1C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QACvE,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAYV,KAAK,gCAoFP,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.26.1",
+  "version": "45.26.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/i18n/en.json

@@ -15,6 +15,7 @@
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Info.ariaLabel": "More information",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",

package/src/info/Info.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  ariaLabel: {
+    id: 'neptune.Info.ariaLabel',
+    defaultMessage: 'More information',
+  },
+});

package/src/info/Info.spec.js

@@ -3,11 +3,11 @@ import { act, render, fireEvent, waitFor, screen } from '../test-utils';
 import Info, { InfoPresentation } from '.';
 
 describe('Info', () => {
+  const defaultScreenReaderLabel = 'More information';
   const props = {
     content: 'content',
     className: 'className',
     title: 'title',
-    'aria-label': 'aria-label',
   };
 
   it('calls onClick on click event', async () => {
@@ -57,9 +57,15 @@ describe('Info', () => {
     });
   });
 
-  const getTriggerButton = () => screen.queryByLabelText('aria-label');
-  const getSvgIcon = () => document.querySelector('.tw-icon-help-circle > svg');
-  const getPopover = () => screen.queryByRole('tooltip');
+  it('accepts custom label for screen readers', () => {
+    const customScreenReaderLabel = 'Custom message';
+    render(<Info {...props} aria-label={customScreenReaderLabel} />);
+
+    expect(screen.getByLabelText(customScreenReaderLabel)).toBeInTheDocument();
+  });
+
+  const getTriggerButton = () => screen.queryByLabelText(defaultScreenReaderLabel);
+  const getPopover = () => screen.queryByRole('dialog');
   const getModal = () => screen.queryByRole('dialog');
 
   const openPopover = async () => {

package/src/info/Info.tsx

@@ -1,15 +1,17 @@
 import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import { useState } from 'react';
+import { useIntl } from 'react-intl';
 
 import { Size, Position, SizeSmall, SizeLarge } from '../common';
 import Modal from '../modal';
 import Popover from '../popover';
 
+import messages from './Info.messages';
 import { InfoPresentation } from './infoPresentations';
 
 export interface Props {
-  'aria-label': string;
+  'aria-label'?: string;
   /**
    * Extra classes applied to Info
    */
@@ -47,8 +49,9 @@ const Info = ({
   'aria-label': ariaLabel,
   preferredPlacement = Position.BOTTOM,
 }: Props) => {
+  const intl = useIntl();
   const [open, setOpen] = useState(false);
-
+  ariaLabel ??= intl.formatMessage(messages.ariaLabel);
   const isModal = presentation === InfoPresentation.MODAL;
   const isSmall = size === Size.SMALL;