@transferwise/components 45.26.1 → 45.26.3

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/flowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBAqErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBA+ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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.3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -78,8 +78,8 @@
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "14.7.1",
-    "@wise/components-theming": "0.8.4"
+    "@wise/components-theming": "0.8.4",
+    "@transferwise/neptune-css": "14.7.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/flowNavigation/FlowNavigation.tsx

@@ -69,7 +69,7 @@ const FlowNavigation = ({
             {isSmall && displayGoBack ? (
               <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />
             ) : (
-              logo
+              <div className="np-flow-header__left">{logo}</div>
             )}
             {isSmall && (
               <AnimatedLabel
@@ -81,7 +81,17 @@ const FlowNavigation = ({
           </>
         }
         rightContent={
-          <div className={classNames('d-flex', 'align-items-center', { 'order-2': isLarge })}>
+          <div
+            className={classNames(
+              'np-flow-header__right',
+              'd-flex',
+              'align-items-center',
+              'justify-content-end',
+              {
+                'order-2': isLarge,
+              },
+            )}
+          >
             {newAvatar}
             {newAvatar && closeButton && <span className="m-x-1" />}
             {closeButton}

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -18,7 +18,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         AnimatedLabel
       </div>
       <div
-        class="d-flex align-items-center"
+        class="np-flow-header__right d-flex align-items-center justify-content-end"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -120,14 +120,18 @@ exports[`FlowNavigation renders as expected 1`] = `
     <div
       class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
     >
-      <img
-        alt="logo"
-        height="24"
-        src="logo.svg"
-        width="138"
-      />
       <div
-        class="d-flex align-items-center order-2"
+        class="np-flow-header__left"
+      >
+        <img
+          alt="logo"
+          height="24"
+          src="logo.svg"
+          width="138"
+        />
+      </div>
+      <div
+        class="np-flow-header__right d-flex align-items-center justify-content-end order-2"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"

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;