@transferwise/components 0.0.0-experimental-1a9f157 → 0.0.0-experimental-3ab1d06

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -3,11 +3,11 @@
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
 <div
   class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--thumbnail"
-  style="--circle-size: 48px; --circle-icon-size: 24px;"
+  style="--circle-size: 48px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px; --circle-icon-size: 24px;"
+    style="--circle-size: 48px;"
   >
     <img
       alt=""
@@ -20,11 +20,11 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
 <div
   class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px; --circle-icon-size: 24px;"
+  style="--circle-size: 48px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px; --circle-icon-size: 24px;"
+    style="--circle-size: 48px;"
   >
     <span
       class="tw-icon tw-icon-briefcase "
@@ -51,11 +51,11 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
 <div
   class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px; --circle-icon-size: 24px;"
+  style="--circle-size: 48px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px; --circle-icon-size: 24px;"
+    style="--circle-size: 48px;"
   >
     <span
       class="tw-icon tw-icon-person "
@@ -88,11 +88,11 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
   >
     <div
       class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-      style="--circle-size: 48px; --circle-icon-size: 24px;"
+      style="--circle-size: 48px;"
     >
       <div
         class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-        style="--circle-size: 48px; --circle-icon-size: 24px;"
+        style="--circle-size: 48px;"
       >
         <span
           class="tw-icon tw-icon-person "
@@ -117,7 +117,7 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
   </div>
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-badge__content"
-    style="--circle-size: 24px; --circle-icon-size: 16px;"
+    style="--circle-size: 24px;"
   >
     <img
       alt="badge alt text"
@@ -130,11 +130,11 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
 exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
 <div
   class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px; --circle-icon-size: 24px;"
+  style="--circle-size: 48px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px; --circle-icon-size: 24px;"
+    style="--circle-size: 48px;"
   >
     <span
       class="tw-icon tw-icon-person "

package/src/badge/Badge.spec.tsx

@@ -1,9 +1,7 @@
-import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
+import { render, cleanup, screen } from '../test-utils';
 
 import Badge from '.';
 
-mockMatchMedia();
-
 describe('Badge', () => {
   const defaultProps = {
     badge: <div />,

package/src/badge/Badge.tsx

@@ -58,7 +58,7 @@ const Badge = ({
   return (
     <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
-      <Circle size={mapLegacySize[size]} fixedSize iconSizing={false} className="tw-badge__content">
+      <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
         {badge}
       </Circle>
     </div>

package/src/circularButton/CircularButton.css

@@ -23,8 +23,8 @@
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 12px;
-    top: var(--size-12);
+    top: 8px;
+    top: var(--size-8);
   }
 }
 .np-circular-btn .tw-icon > svg {

package/src/circularButton/CircularButton.less

@@ -19,7 +19,7 @@
     .left(0);
 
     @media (--screen-400-zoom) {
-      top: var(--size-12);
+      top: var(--size-8);
     }
 
     > svg {

package/src/circularButton/CircularButton.tsx

@@ -38,7 +38,7 @@ const CircularButton = ({
         as="input"
         // @ts-expect-error it's input[type=button] element
         type="button"
-        size={isTinyViewport ? 72 : 56}
+        size={isTinyViewport ? 64 : 56}
         aria-label={children}
         className={classes}
         disabled={disabled}

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -7,8 +7,8 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -45,8 +45,8 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -83,8 +83,8 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -121,8 +121,8 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -159,8 +159,8 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -197,8 +197,8 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -235,8 +235,8 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -273,8 +273,8 @@ exports[`CircularButton types renders accent buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -311,8 +311,8 @@ exports[`CircularButton types renders negative buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span
@@ -349,8 +349,8 @@ exports[`CircularButton types renders positive buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
+      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
+      style="--circle-size: var(--size-56);"
       type="button"
     />
     <span

package/src/common/bottomSheet/BottomSheet.tsx

@@ -32,7 +32,7 @@ export type BottomSheetProps = PropsWithChildren<
     onClose?: (event: Event | SyntheticEvent) => void;
     open: boolean;
   } & CommonProps &
-    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>
+    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>
 >;
 
 /**
@@ -185,6 +185,7 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
   return is400Zoom ? (
     <Drawer
       aria-labelledby={props['aria-labelledby']}
+      aria-label={props['aria-label']}
       role={role}
       open={props.open}
       className={props.className}
@@ -203,7 +204,8 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
-          aria-labelledby={props['aria-labelledby']}
+          aria-labelledby={props['aria-labelledby'] || undefined}
+          aria-label={props['aria-label'] || undefined}
           role={role}
           aria-modal
           onTouchStart={onSwipeStart}

package/src/common/circle/Circle.css

@@ -5,7 +5,3 @@
   height: var(--circle-size);
   flex-shrink: 0;
 }
-.np-circle-icons-size .tw-icon > svg {
-  height: var(--circle-icon-size);
-  width: var(--circle-icon-size);
-}

package/src/common/circle/Circle.less

@@ -3,12 +3,4 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-
-  &-icons-size {
-    // circle like components has custom icon sizes
-    .tw-icon > svg {
-      height: var(--circle-icon-size);
-      width: var(--circle-icon-size);
-    }
-  }
 }

package/src/common/circle/Circle.tsx

@@ -1,9 +1,7 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
-import { useMedia } from '../hooks/useMedia';
-import { Breakpoint } from '../propsValues/breakpoint';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 
 export type Props = {
   /**
@@ -19,57 +17,26 @@ export type Props = {
    * as those can be dynamic a at certain viewport sizes
    */
   fixedSize?: boolean;
-  /**
-   * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point
-   */
-  iconSizing?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
-/**
- * circle like components has custom sizes for icons
- */
-const MAP_ICON_SIZE = {
-  16: 12,
-  24: 16,
-  32: 18,
-  40: 20,
-  48: 24,
-  56: 28,
-  72: 36,
-};
-
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
     children,
     size = 48,
     fixedSize = false,
-    iconSizing = true,
     className,
     style,
     ...props
   }: Props,
   ref,
 ) {
-  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <Element
       {...props}
       ref={ref}
-      style={{
-        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
-        '--circle-icon-size':
-          isTinyViewport && !fixedSize
-            ? `${MAP_ICON_SIZE[size] / 2}px`
-            : `${MAP_ICON_SIZE[size]}px`,
-        ...style,
-      }}
-      className={clsx(
-        'np-circle',
-        { 'np-circle-icons-size': iconSizing },
-        'd-flex align-items-center justify-content-center',
-        className,
-      )}
+      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
+      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}
     </Element>

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -3,8 +3,7 @@ import { forwardRef } from 'react';
 import { Position } from '..';
 import BottomSheet from '../bottomSheet';
 import { useLayout } from '../hooks';
-import Panel from '../panel';
-import { PanelProps } from '../panel/Panel';
+import Panel, { type PanelProps } from '../panel';
 
 const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(
   {
@@ -17,13 +16,22 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
     open = false,
     position = Position.BOTTOM,
     anchorWidth = false,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
   }: PanelProps,
   reference,
 ) {
   const { isMobile } = useLayout();
   if (isMobile) {
     return (
-      <BottomSheet key="bottomSheet" open={open} className={className} onClose={onClose}>
+      <BottomSheet
+        key="bottomSheet"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        open={open}
+        className={className}
+        onClose={onClose}
+      >
         {children}
       </BottomSheet>
     );
@@ -38,6 +46,8 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
       position={position}
       anchorWidth={anchorWidth}
       anchorRef={anchorRef}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       className={className}
       onClose={onClose}
     >

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

@@ -22,11 +22,11 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px; --circle-icon-size: 24px;"
+          style="--circle-size: 48px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px; --circle-icon-size: 24px;"
+            style="--circle-size: 48px;"
           >
             TM
           </div>
@@ -139,11 +139,11 @@ exports[`FlowNavigation renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px; --circle-icon-size: 24px;"
+          style="--circle-size: 48px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px; --circle-icon-size: 24px;"
+            style="--circle-size: 48px;"
           >
             TM
           </div>

package/src/main.css

@@ -1013,8 +1013,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 12px;
-    top: var(--size-12);
+    top: 8px;
+    top: var(--size-8);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1169,10 +1169,6 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
-.np-circle-icons-size .tw-icon > svg {
-  height: var(--circle-icon-size);
-  width: var(--circle-icon-size);
-}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4159,6 +4155,12 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
+.status-icon > svg {
+  height: 32px;
+  height: var(--size-32);
+  width: 32px;
+  width: var(--size-32);
+}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4174,6 +4176,20 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
+.status-circle-sm .status-icon > svg {
+  height: 14px;
+  height: var(--size-14);
+  width: 14px;
+  width: var(--size-14);
+}
+@media (max-width: 320px) {
+  .status-circle-sm .status-icon > svg {
+    width: 24px;
+    width: var(--size-24);
+    height: 24px;
+    height: var(--size-24);
+  }
+}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/overlayHeader/OverlayHeader.spec.tsx

@@ -1,11 +1,9 @@
 import Avatar, { AvatarType } from '../avatar';
 import { Size } from '../common';
-import { render, mockMatchMedia } from '../test-utils';
+import { render } from '../test-utils';
 
 import OverlayHeader from '.';
 
-mockMatchMedia();
-
 describe('OverlayHeader', () => {
   const props = {
     avatar: (

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -19,11 +19,11 @@ exports[`OverlayHeader renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px; --circle-icon-size: 24px;"
+          style="--circle-size: 48px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px; --circle-icon-size: 24px;"
+            style="--circle-size: 48px;"
           >
             TM
           </div>

package/src/popover/Popover.spec.tsx

@@ -35,27 +35,70 @@ describe('Popover', () => {
       expect(getPanel()).toMatchSnapshot();
     });
 
-    it('renders title', async () => {
-      ({ container, rerender } = render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      ));
-
-      await userEvent.click(screen.getByText('Open'));
-      await waitForPanel();
-
-      expect(getTitle()).toBeInTheDocument();
-
-      rerender(
-        <Popover {...props} title={undefined}>
-          <button type="button">Open</button>
-        </Popover>,
-      );
-
-      await userEvent.click(screen.getByText('Open'));
-
-      expect(getTitle()).not.toBeInTheDocument();
+    describe('title', () => {
+      it('renders title', async () => {
+        ({ container, rerender } = render(
+          <Popover {...props}>
+            <button type="button">Open</button>
+          </Popover>,
+        ));
+
+        await userEvent.click(screen.getByText('Open'));
+        await waitForPanel();
+
+        expect(getTitle()).toBeInTheDocument();
+
+        rerender(
+          <Popover {...props} title={undefined}>
+            <button type="button">Open</button>
+          </Popover>,
+        );
+
+        await userEvent.click(screen.getByText('Open'));
+
+        expect(getTitle()).not.toBeInTheDocument();
+      });
+
+      it('should uses `title` as the accessible name', async () => {
+        render(
+          <Popover {...props}>
+            <button type="button">Open</button>
+          </Popover>,
+        );
+
+        await userEvent.click(screen.getByText('Open'));
+        await waitForPanel();
+      });
+
+      describe('accessible name', () => {
+        const ACCESSIBLE_NAME = 'Accessible name';
+
+        it('should use `aria-label` as the accessible name', async () => {
+          render(
+            <Popover {...props} title={undefined} aria-label={ACCESSIBLE_NAME}>
+              <button type="button">Open</button>
+            </Popover>,
+          );
+
+          await userEvent.click(screen.getByText('Open'));
+          await waitForPanel();
+
+          expect(screen.getByRole('dialog', { name: ACCESSIBLE_NAME })).toBeInTheDocument();
+        });
+
+        it('should prioritise `aria-label` over `title` as the accessible name', async () => {
+          render(
+            <Popover {...props} aria-label={ACCESSIBLE_NAME}>
+              <button type="button">Open</button>
+            </Popover>,
+          );
+
+          await userEvent.click(screen.getByText('Open'));
+          await waitForPanel();
+
+          expect(screen.getByRole('dialog', { name: ACCESSIBLE_NAME })).toBeInTheDocument();
+        });
+      });
     });
 
     it('renders Panel onClick', async () => {