@transferwise/components 46.18.0 → 46.20.0

package/src/logo/__snapshots__/Logo.spec.js.snap

@@ -5,6 +5,7 @@ exports[`Logo on mobile renders only fast flag 1`] = `
   <span
     aria-label="Wise"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -39,6 +40,7 @@ exports[`Logo renders wise business logo 1`] = `
   <span
     aria-label="Wise business"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -73,6 +75,7 @@ exports[`Logo renders wise business logo inversed 1`] = `
   <span
     aria-label="Wise business"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -107,6 +110,7 @@ exports[`Logo renders wise logo 1`] = `
   <span
     aria-label="Wise"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -141,6 +145,7 @@ exports[`Logo renders wise logo by default 1`] = `
   <span
     aria-label="Wise"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"
@@ -175,6 +180,7 @@ exports[`Logo renders wise logo inversed 1`] = `
   <span
     aria-label="Wise"
     class="class np-logo"
+    role="img"
   >
     <svg
       class="np-logo-svg np-logo-svg--size-sm"

package/src/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx

@@ -0,0 +1,22 @@
+import { mockMatchMedia, mockResizeObserver, render, screen, within } from '../test-utils';
+
+import PhoneNumberInput from './PhoneNumberInput';
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('PhoneNumberInput', () => {
+  it('supports custom `aria-labelledby` attribute', () => {
+    render(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label id="prioritized-label">Prioritized label</label>
+        <PhoneNumberInput aria-labelledby="prioritized-label" onChange={() => {}} />
+      </>,
+    );
+
+    expect(
+      within(screen.getByLabelText('Prioritized label')).getByRole('textbox'),
+    ).toBeInTheDocument();
+  });
+});

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -22,6 +22,7 @@ const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
 
 export interface PhoneNumberInputProps {
   id?: string;
+  'aria-labelledby'?: string;
   required?: boolean;
   disabled?: boolean;
   initialValue?: string;
@@ -42,6 +43,7 @@ const defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCou
 
 const PhoneNumberInput = ({
   id,
+  'aria-labelledby': ariaLabelledBy,
   required,
   disabled,
   initialValue,
@@ -130,7 +132,7 @@ const PhoneNumberInput = ({
   }, [onChange, broadcastedValue, internalValue]);
 
   return (
-    <div className="tw-telephone">
+    <div aria-labelledby={ariaLabelledBy} className="tw-telephone">
       <div className="tw-telephone__country-select">
         <SelectInput
           placeholder={formatMessage(messages.selectInputPlaceholder)}

package/src/popover/{Popover.spec.js → Popover.spec.tsx}

@@ -7,7 +7,7 @@ mockMatchMedia();
 
 jest.mock('react-transition-group', () => ({
   __esModule: true,
-  CSSTransition: (props) => (props.in ? props.children : null),
+  CSSTransition: (props: Record<string, unknown>) => (props.in ? props.children : null),
 }));
 
 describe('Popover', () => {
@@ -117,7 +117,10 @@ describe('Popover', () => {
     expect(handleOnClose).not.toHaveBeenCalled();
     userEvent.click(screen.getByText('Open'));
     await waitForPanel();
-    userEvent.click(getDimmer());
+    const dimmer = getDimmer();
+    if (dimmer != null) {
+      userEvent.click(dimmer);
+    }
     expect(handleOnClose).toHaveBeenCalledTimes(1);
   });
 

package/src/popover/Popover.tsx

@@ -0,0 +1,101 @@
+import { useTheme } from '@wise/components-theming';
+import classnames from 'classnames';
+import { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';
+
+import { Position, Typography } from '../common';
+import ResponsivePanel from '../common/responsivePanel';
+import Title from '../title';
+import { logActionRequired } from '../utilities';
+
+/** @deprecated Use `"top" | "bottom"` instead. */
+type PopoverPreferredPlacementDeprecated =
+  | `${Position.LEFT_TOP}`
+  | `${Position.RIGHT_TOP}`
+  | `${Position.BOTTOM_RIGHT}`
+  | `${Position.BOTTOM_LEFT}`;
+
+export type PopoverPreferredPlacement =
+  | `${Position.TOP}`
+  | `${Position.RIGHT}`
+  | `${Position.BOTTOM}`
+  | `${Position.LEFT}`
+  | PopoverPreferredPlacementDeprecated;
+
+export interface PopoverProps {
+  children?: React.ReactNode;
+  className?: string;
+  content: React.ReactNode;
+  preferredPlacement?: PopoverPreferredPlacement;
+  onClose?: () => void;
+  title?: React.ReactNode;
+}
+
+function resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {
+  switch (preferredPlacement) {
+    case 'left-top':
+    case 'right-top':
+      return 'top';
+    case 'bottom-left':
+    case 'bottom-right':
+      return 'bottom';
+  }
+  return preferredPlacement;
+}
+
+export default function Popover({
+  children,
+  className,
+  content,
+  preferredPlacement = Position.RIGHT,
+  title,
+  onClose,
+}: PopoverProps) {
+  const resolvedPlacement = resolvePlacement(preferredPlacement);
+  useEffect(() => {
+    if (resolvedPlacement !== preferredPlacement) {
+      logActionRequired(
+        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,
+      );
+    }
+  }, [preferredPlacement, resolvedPlacement]);
+
+  const anchorReference = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
+
+  return (
+    <span className={classnames('np-popover', className)}>
+      <span ref={anchorReference} className="d-inline-block">
+        {isValidElement<{ onClick?: () => void }>(children)
+          ? cloneElement(children, {
+              onClick: () => {
+                children.props.onClick?.();
+                setOpen((prevOpen) => !prevOpen);
+              },
+            })
+          : children}
+      </span>
+      <ResponsivePanel
+        open={open}
+        anchorRef={anchorReference}
+        position={resolvedPlacement}
+        arrow
+        className="np-popover__container"
+        onClose={handleOnClose}
+      >
+        <div className="np-popover__content np-text-default-body">
+          {title && (
+            <Title type={Typography.TITLE_BODY} className="m-b-1">
+              {title}
+            </Title>
+          )}
+          {content}
+        </div>
+      </ResponsivePanel>
+    </span>
+  );
+}

package/src/popover/__snapshots__/{Popover.spec.js.snap → Popover.spec.tsx.snap}

@@ -6,15 +6,14 @@ exports[`Popover on desktop renders when is open 1`] = `
   data-popper-escaped="true"
   data-popper-placement="right"
   data-popper-reference-hidden="true"
+  role="dialog"
   style="position: absolute; left: 0px; top: 0px; transform: translate(16px, 0px);"
 >
   <div
     class="np-panel__content"
   >
     <div
-      aria-hidden="false"
-      class="np-popover__content"
-      role="dialog"
+      class="np-popover__content np-text-default-body"
     >
       <h4
         class="np-text-title-body m-b-1"

package/src/popover/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Popover';
+export type { PopoverProps, PopoverPreferredPlacement } from './Popover';

package/src/summary/Summary.tsx

@@ -137,7 +137,13 @@ const Summary = ({
       </div>
       <div className="np-summary__body m-l-2">
         <div className="np-summary__title d-flex">
-          <Body as="span" type={Typography.BODY_LARGE_BOLD} className="text-primary m-b-1">
+          <Body
+            as="span"
+            role="heading"
+            aria-level={4}
+            type={Typography.BODY_LARGE_BOLD}
+            className="text-primary m-b-1"
+          >
             {title}
           </Body>
           {info && (

package/src/typeahead/Typeahead.spec.js

@@ -370,5 +370,14 @@ describe('Typeahead', () => {
       input().simulate('change', { target: { value: 'test' } });
       expect(menu().is('.open')).toBe(true);
     });
+
+    it('sets aria-expanded to true when options are shown', () => {
+      expect(input().prop('aria-expanded')).toBe(false);
+      // we don't want aria-expanded to be true on focus or before 3 characters are entered (that's when the menu is shown)
+      input().simulate('change', { target: { value: 'aa' } });
+      expect(input().prop('aria-expanded')).toBe(false);
+      input().simulate('change', { target: { value: 'aaa' } });
+      expect(input().prop('aria-expanded')).toBe(true);
+    });
   });
 });

package/src/typeahead/Typeahead.tsx

@@ -484,7 +484,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
               {...{
                 autoFocus,
                 multiple,
-                optionsShown,
+                dropdownOpen,
                 placeholder,
                 selected,
                 maxHeight,

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -13,7 +13,7 @@ export type TypeaheadInputProps<T> = {
   typeaheadId: string;
   value: string;
   selected: readonly TypeaheadOption<T>[];
-  optionsShown?: boolean;
+  dropdownOpen?: boolean;
   autoComplete: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
   onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
@@ -67,7 +67,7 @@ export default class TypeaheadInput<T> extends Component<
       autoFocus,
       multiple,
       name,
-      optionsShown,
+      dropdownOpen,
       placeholder,
       selected,
       value,
@@ -89,7 +89,7 @@ export default class TypeaheadInput<T> extends Component<
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"
-        aria-expanded={optionsShown}
+        aria-expanded={dropdownOpen}
         aria-haspopup="listbox"
         aria-controls={`menu-${typeaheadId}`}
         autoComplete={autoComplete}

package/src/circularButton/CircularButton.js

@@ -1,57 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { cloneElement } from 'react';
-
-import Body from '../body/Body';
-import { typeClassMap, priorityClassMap } from '../button/classMap';
-import { ControlType, Priority } from '../common';
-import { Typography } from '../common';
-
-const CircularButton = ({ className, children, disabled, icon, priority, type, ...rest }) => {
-  const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
-
-  const iconElement = icon.props.size !== 24 ? cloneElement(icon, { size: 24 }) : icon;
-
-  return (
-    <label
-      className={classNames(
-        'np-circular-btn',
-        priority,
-        type,
-        disabled ? 'disabled' : '',
-        className,
-      )}
-    >
-      <input
-        type="button"
-        aria-label={children}
-        className={classes}
-        disabled={disabled}
-        {...rest}
-      />
-      {iconElement}
-      <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
-        {children}
-      </Body>
-    </label>
-  );
-};
-
-CircularButton.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  icon: PropTypes.element.isRequired,
-  onClick: PropTypes.func,
-  priority: PropTypes.oneOf(['primary', 'secondary']),
-  type: PropTypes.oneOf(['accent', 'positive', 'negative']),
-};
-
-CircularButton.defaultProps = {
-  className: undefined,
-  disabled: false,
-  priority: Priority.PRIMARY,
-  type: ControlType.ACCENT,
-};
-
-export default CircularButton;

package/src/circularButton/index.js

@@ -1 +0,0 @@
-export { default } from './CircularButton';

package/src/popover/Popover.js

@@ -1,101 +0,0 @@
-import { useTheme } from '@wise/components-theming';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import { useRef, useState, cloneElement } from 'react';
-
-import { Position, Typography } from '../common';
-import ResponsivePanel from '../common/responsivePanel';
-import Title from '../title';
-import { logActionRequiredIf } from '../utilities';
-
-const Popover = ({ children, className, content, preferredPlacement, title, onClose }) => {
-  logActionRequired({ preferredPlacement });
-  const anchorReference = useRef(null);
-  const [open, setOpen] = useState(false);
-  const { isModern } = useTheme();
-
-  const handleOnClose = () => {
-    setOpen(false);
-    onClose?.();
-  };
-
-  return (
-    <span className={classnames('np-popover', className)}>
-      <span ref={anchorReference} className="d-inline-block">
-        {cloneElement(children, {
-          onClick: () => {
-            if (children?.props?.onClick) {
-              children.props.onClick();
-            }
-            setOpen(!open);
-          },
-        })}
-      </span>
-      <ResponsivePanel
-        open={open}
-        anchorRef={anchorReference}
-        position={deprecatedPlacements[preferredPlacement] || preferredPlacement}
-        arrow
-        className="np-popover__container"
-        onClose={handleOnClose}
-      >
-        <div
-          className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
-          aria-hidden={!open}
-          role="dialog"
-        >
-          {title && (
-            <Title type={Typography.TITLE_BODY} className="m-b-1">
-              {title}
-            </Title>
-          )}
-          {content}
-        </div>
-      </ResponsivePanel>
-    </span>
-  );
-};
-
-const logActionRequired = ({ preferredPlacement }) => {
-  logActionRequiredIf(
-    `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`,
-    deprecatedPlacements[preferredPlacement],
-  );
-};
-
-Popover.defaultProps = {
-  className: undefined,
-  preferredPlacement: Position.RIGHT,
-  title: undefined,
-};
-
-Popover.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  content: PropTypes.node.isRequired,
-  /**
-   * `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
-   * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
-   */
-  preferredPlacement: PropTypes.oneOf([
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'left-top',
-    'right-top',
-    'bottom-right',
-    'bottom-left',
-  ]),
-  onClose: PropTypes.func,
-  title: PropTypes.node,
-};
-
-const deprecatedPlacements = {
-  [Position.BOTTOM_LEFT]: Position.BOTTOM,
-  [Position.BOTTOM_RIGHT]: Position.BOTTOM,
-  [Position.LEFT_TOP]: Position.TOP,
-  [Position.RIGHT_TOP]: Position.TOP,
-};
-
-export default Popover;

package/src/popover/index.js

@@ -1 +0,0 @@
-export { default } from './Popover';