@transferwise/components 0.0.0-experimental-5d1d6d8 → 0.0.0-experimental-1a9f157

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;"
+  style="--circle-size: 48px; --circle-icon-size: 24px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    style="--circle-size: 48px; --circle-icon-size: 24px;"
   >
     <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;"
+  style="--circle-size: 48px; --circle-icon-size: 24px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    style="--circle-size: 48px; --circle-icon-size: 24px;"
   >
     <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;"
+  style="--circle-size: 48px; --circle-icon-size: 24px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    style="--circle-size: 48px; --circle-icon-size: 24px;"
   >
     <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;"
+      style="--circle-size: 48px; --circle-icon-size: 24px;"
     >
       <div
         class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-        style="--circle-size: 48px;"
+        style="--circle-size: 48px; --circle-icon-size: 24px;"
       >
         <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;"
+    style="--circle-size: 24px; --circle-icon-size: 16px;"
   >
     <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;"
+  style="--circle-size: 48px; --circle-icon-size: 24px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    style="--circle-size: 48px; --circle-icon-size: 24px;"
   >
     <span
       class="tw-icon tw-icon-person "

package/src/badge/Badge.spec.tsx

@@ -1,7 +1,9 @@
-import { render, cleanup, screen } from '../test-utils';
+import { render, cleanup, screen, mockMatchMedia } 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 className="tw-badge__content">
+      <Circle size={mapLegacySize[size]} fixedSize iconSizing={false} 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: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {

package/src/circularButton/CircularButton.less

@@ -19,7 +19,7 @@
     .left(0);
 
     @media (--screen-400-zoom) {
-      top: var(--size-8);
+      top: var(--size-12);
     }
 
     > 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 ? 64 : 56}
+        size={isTinyViewport ? 72 : 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 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);"
+      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;"
       type="button"
     />
     <span
@@ -45,8 +45,8 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       type="button"
     />
     <span
@@ -83,8 +83,8 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       type="button"
     />
     <span
@@ -121,8 +121,8 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       type="button"
     />
     <span
@@ -159,8 +159,8 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       type="button"
     />
     <span
@@ -197,8 +197,8 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       type="button"
     />
     <span
@@ -235,8 +235,8 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       type="button"
     />
     <span
@@ -273,8 +273,8 @@ exports[`CircularButton types renders accent buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       type="button"
     />
     <span
@@ -311,8 +311,8 @@ exports[`CircularButton types renders negative buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       type="button"
     />
     <span
@@ -349,8 +349,8 @@ exports[`CircularButton types renders positive buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      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);"
+      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;"
       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' | 'aria-label'>
+    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>
 >;
 
 /**
@@ -185,7 +185,6 @@ 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}
@@ -204,8 +203,7 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
-          aria-labelledby={props['aria-labelledby'] || undefined}
-          aria-label={props['aria-label'] || undefined}
+          aria-labelledby={props['aria-labelledby']}
           role={role}
           aria-modal
           onTouchStart={onSwipeStart}

package/src/common/circle/Circle.css

@@ -5,3 +5,7 @@
   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,4 +3,12 @@
   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,7 +1,9 @@
 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 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -17,26 +19,57 @@ 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={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
-      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
+      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,
+      )}
     >
       {children}
     </Element>

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -3,7 +3,8 @@ import { forwardRef } from 'react';
 import { Position } from '..';
 import BottomSheet from '../bottomSheet';
 import { useLayout } from '../hooks';
-import Panel, { type PanelProps } from '../panel';
+import Panel from '../panel';
+import { PanelProps } from '../panel/Panel';
 
 const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(
   {
@@ -16,22 +17,13 @@ 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"
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        open={open}
-        className={className}
-        onClose={onClose}
-      >
+      <BottomSheet key="bottomSheet" open={open} className={className} onClose={onClose}>
         {children}
       </BottomSheet>
     );
@@ -46,8 +38,6 @@ 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;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 24px;"
           >
             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;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 24px;"
           >
             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: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1169,6 +1169,10 @@ 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;
 }
@@ -4155,12 +4159,6 @@ 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);
 }
@@ -4176,20 +4174,6 @@ 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,9 +1,11 @@
 import Avatar, { AvatarType } from '../avatar';
 import { Size } from '../common';
-import { render } from '../test-utils';
+import { render, mockMatchMedia } 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;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 24px;"
           >
             TM
           </div>

package/src/popover/Popover.spec.tsx

@@ -35,70 +35,27 @@ describe('Popover', () => {
       expect(getPanel()).toMatchSnapshot();
     });
 
-    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 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('renders Panel onClick', async () => {