@transferwise/components 46.71.3 → 46.71.5

package/src/alert/Alert.spec.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from '@wise/components-theming';
 import React from 'react';
 
 import { Sentiment, Size, Theme, Variant } from '../common';
-import { render, cleanup, screen, userEvent, fireEvent } from '../test-utils';
+import { render, cleanup, screen, userEvent, fireEvent, mockMatchMedia } from '../test-utils';
 
 import Alert, { AlertAction, AlertArrowPosition, AlertType } from './Alert';
 
@@ -17,6 +17,8 @@ jest.mock('react', () => {
   };
 });
 
+mockMatchMedia();
+
 describe('Alert', () => {
   let component: HTMLElement;
   let container: HTMLElement;

package/src/avatar/Avatar.css

@@ -2,26 +2,17 @@
 }@media (min-width: 768px) {
 }.tw-avatar {
   position: relative;
-  border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
 }.tw-avatar .tw-avatar__content {
-  align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
   background-color: var(--color-background-neutral);
-  border-radius: 50%;
-  color: #37517e;
-  color: var(--color-content-primary);
-  display: flex;
-  height: 100%;
-  justify-content: center;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
-  width: 100%;
 }.tw-avatar--outlined {
   border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
@@ -55,10 +46,6 @@
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
-}.tw-avatar--24 {
-  min-width: 24px;
-  width: 24px;
-  height: 24px;
 }.tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
@@ -83,10 +70,6 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--40 {
-  min-width: 40px;
-  width: 40px;
-  height: 40px;
 }.tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
@@ -111,10 +94,6 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--48 {
-  min-width: 48px;
-  width: 48px;
-  height: 48px;
 }.tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
@@ -139,10 +118,6 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--56 {
-  min-width: 56px;
-  width: 56px;
-  height: 56px;
 }.tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
@@ -167,10 +142,6 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--72 {
-  min-width: 72px;
-  width: 72px;
-  height: 72px;
 }.tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;

package/src/avatar/Avatar.less

@@ -10,23 +10,15 @@
 
 .tw-avatar {
   position: relative;
-  border-radius: 50%;
   user-select: none;
   box-sizing: border-box;
 
   & &__content {
-    align-items: center;
     background-color: #86a7bd1a;
     background-color: var(--color-background-neutral);
-    border-radius: 50%;
-    color: var(--color-content-primary);
-    display: flex;
-    height: 100%;
-    justify-content: center;
     max-height: 100%;
     max-width: 100%;
     overflow: hidden;
-    width: 100%;
   }
 
   &--outlined {
@@ -117,10 +109,6 @@
 .avatar-dimension(@avatar-size) {
   @mask-size: 2px;
 
-  min-width: @avatar-size;
-  width: @avatar-size;
-  height: @avatar-size;
-
   &.tw-avatar--emoji,
   &.tw-avatar--icon {
     font-size: @avatar-size * 0.5;

package/src/avatar/Avatar.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { Theme } from '../common';
 
 import { getAvatarColorFromSeed } from './colors';
+import Circle from '../common/circle';
 
 type NumericAvatarSize = 24 | 40 | 48 | 56 | 72;
 
@@ -65,7 +66,9 @@ const Avatar: React.FC<AvatarProps> = ({
   const size = backwardsCompatibleSize(sizeFromProps);
 
   return (
-    <div
+    <Circle
+      size={size}
+      fixedSize
       className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
         'tw-avatar--outlined': outlined,
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -73,15 +76,17 @@ const Avatar: React.FC<AvatarProps> = ({
       })}
       aria-label={ariaLabel}
     >
-      <div
+      <Circle
+        size={size}
+        fixedSize
         className="tw-avatar__content"
         style={{
           backgroundColor: backgroundColor || backgroundColorFromSeed,
         }}
       >
         {children}
-      </div>
-    </div>
+      </Circle>
+    </Circle>
   );
 };
 

package/src/avatarWrapper/AvatarWrapper.spec.tsx

@@ -1,9 +1,11 @@
 import { BadgeProps } from '../badge';
 import { Sentiment, Size, ProfileType } from '../common';
-import { render, screen } from '../test-utils';
+import { render, screen, mockMatchMedia } from '../test-utils';
 
 import AvatarWrapper from '.';
 
+mockMatchMedia();
+
 const name = 'Elizabeth Alexandra Mary Windsor';
 
 describe('FlowNavigationAvatar', () => {

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

@@ -2,10 +2,12 @@
 
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
 <div
-  class="tw-avatar tw-avatar--48 tw-avatar--thumbnail"
+  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--thumbnail"
+  style="--circle-size: 48px;"
 >
   <div
-    class="tw-avatar__content"
+    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+    style="--circle-size: 48px;"
   >
     <img
       alt=""
@@ -17,10 +19,12 @@ 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="tw-avatar tw-avatar--48 tw-avatar--icon"
+  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
+  style="--circle-size: 48px;"
 >
   <div
-    class="tw-avatar__content"
+    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+    style="--circle-size: 48px;"
   >
     <span
       class="tw-icon tw-icon-briefcase "
@@ -46,10 +50,12 @@ 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="tw-avatar tw-avatar--48 tw-avatar--icon"
+  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
+  style="--circle-size: 48px;"
 >
   <div
-    class="tw-avatar__content"
+    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+    style="--circle-size: 48px;"
   >
     <span
       class="tw-icon tw-icon-person "
@@ -81,10 +87,12 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
     class="tw-badge__children"
   >
     <div
-      class="tw-avatar tw-avatar--48 tw-avatar--icon"
+      class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
+      style="--circle-size: 48px;"
     >
       <div
-        class="tw-avatar__content"
+        class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+        style="--circle-size: 48px;"
       >
         <span
           class="tw-icon tw-icon-person "
@@ -108,7 +116,8 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
     </div>
   </div>
   <div
-    class="tw-badge__content"
+    class="np-circle d-flex align-items-center justify-content-center tw-badge__content"
+    style="--circle-size: 24px;"
   >
     <img
       alt="badge alt text"
@@ -120,10 +129,12 @@ 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="tw-avatar tw-avatar--48 tw-avatar--icon"
+  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
+  style="--circle-size: 48px;"
 >
   <div
-    class="tw-avatar__content"
+    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+    style="--circle-size: 48px;"
   >
     <span
       class="tw-icon tw-icon-person "

package/src/badge/Badge.css

@@ -6,10 +6,6 @@
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
 }
-.tw-badge.tw-badge-md {
-  --badge-size: 20px;
-  --badge-mask: 2px;
-}
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
   --badge-mask: 3px;
@@ -27,16 +23,10 @@
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  width: var(--badge-size);
-  height: var(--badge-size);
   bottom: 0;
   right: 0;
   box-sizing: border-box;
-  border-radius: 50%;
   text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;

package/src/badge/Badge.less

@@ -1,11 +1,9 @@
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
 @badge-size-sm: 16px;
-@badge-size-md: 20px;
 @badge-size-lg: 24px;
 
 @badge-mask-sm: 2px;
-@badge-mask-md: 2px;
 @badge-mask-lg: 3px;
 
 @badge-border-light: rgba(255, 255, 255, 0.08);
@@ -20,11 +18,6 @@
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: @badge-border-light;
 
-  &.tw-badge-md {
-    --badge-size: @badge-size-md;
-    --badge-mask: @badge-mask-md;
-  }
-
   &.tw-badge-lg {
     --badge-size: @badge-size-lg;
     --badge-mask: @badge-mask-lg;
@@ -59,17 +52,11 @@
 
   & > &__content {
     position: absolute;
-    width: var(--badge-size);
-    height: var(--badge-size);
     bottom: 0;
     .right(0);
 
     box-sizing: border-box;
-    border-radius: 50%;
     text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     overflow: hidden;
     user-select: none;
 

package/src/badge/Badge.tsx

@@ -11,23 +11,41 @@ import {
   ThemeLight,
   CommonProps,
 } from '../common';
+import Circle, { CircleProps } from '../common/circle';
+
+/**
+ * @deprecated Use `SizeSmall` or `SizeLarge` instead.
+ */
+type DeprecatedSizes = SizeMedium;
 
 export type BadgeProps = {
   badge: ReactNode;
   children: ReactNode;
-  size?: SizeSmall | SizeMedium | SizeLarge;
+  /**
+   * `md` is deprecated, it will fallback to `sm` instead.
+   */
+  size?: SizeSmall | DeprecatedSizes | SizeLarge;
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
 } & CommonProps;
 
+const mapLegacySize = {
+  [String(Size.SMALL)]: 16,
+  // medium is deprecated, so we map it to small
+  [String(Size.MEDIUM)]: 16,
+  [String(Size.LARGE)]: 24,
+} satisfies Record<string, CircleProps['size']>;
+
 const Badge = ({
   badge,
   className = undefined,
-  size = Size.SMALL,
+  size: sizeProp = Size.SMALL,
   border = Theme.LIGHT,
   'aria-label': ariaLabel,
   children,
 }: BadgeProps) => {
+  // medium is deprecated, so we map it to small
+  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
   const classes: string = clsx(
     'tw-badge',
     {
@@ -40,7 +58,9 @@ const Badge = ({
   return (
     <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
-      <div className="tw-badge__content">{badge}</div>
+      <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
+        {badge}
+      </Circle>
     </div>
   );
 };

package/src/checkbox/Checkbox.spec.tsx

@@ -1,8 +1,10 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 
 import Checkbox, { CheckboxProps } from '.';
 import { Field } from '../field/Field';
 
+mockMatchMedia();
+
 describe('Checkbox', () => {
   let props: CheckboxProps;
 

package/src/circularButton/CircularButton.css

@@ -6,36 +6,6 @@
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn input[type="button"] {
-  min-height: 40px;
-  min-height: var(--size-40);
-  width: 40px;
-  width: var(--size-40);
-  height: 40px;
-  height: var(--size-40);
-  padding: 0;
-  border-radius: 50%;
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
-}
-.np-theme-personal .np-circular-btn input[type="button"] {
-  min-height: 56px;
-  min-height: var(--size-56);
-  width: 56px;
-  width: var(--size-56);
-  height: 56px;
-  height: var(--size-56);
-}
-@media (max-width: 320px) {
-  .np-theme-personal .np-circular-btn input[type="button"] {
-    min-height: 64px;
-    min-height: var(--size-64);
-    width: 64px;
-    width: var(--size-64);
-    height: 64px;
-    height: var(--size-64);
-  }
-}
 .np-circular-btn .tw-icon {
   position: absolute;
   top: 16px;
@@ -76,13 +46,6 @@
 .np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
   color: var(--color-sentiment-negative) !important;
 }
-.np-circular-btn__label {
-  transition: color 0.15s ease-in-out;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-}
 .np-circular-btn.accent .np-circular-btn__label {
   color: #00a2dd;
   color: var(--color-interactive-accent);

package/src/circularButton/CircularButton.less

@@ -9,27 +9,6 @@
   cursor: pointer;
   position: relative;
 
-  input[type="button"] {
-    min-height: var(--size-40);
-    width: var(--size-40);
-    height: var(--size-40);
-    padding: 0;
-    border-radius: 50%;
-    margin-bottom: var(--size-8);
-
-    .np-theme-personal & {
-      min-height: var(--size-56);
-      width: var(--size-56);
-      height: var(--size-56);
-
-      @media (--screen-400-zoom) {
-        min-height: var(--size-64);
-        width: var(--size-64);
-        height: var(--size-64);
-      }
-    }
-  }
-
   .tw-icon {
     position: absolute;
     top: var(--size-16);
@@ -72,12 +51,6 @@
   }
 }
 
-.np-circular-btn__label {
-  transition: color 0.15s ease-in-out;
-  font-size: var(--font-size-14);
-  font-weight: var(--font-weight-semi-bold);
-}
-
 .button-label-states(
   np-circular-btn,
   accent,

package/src/circularButton/CircularButton.spec.tsx

@@ -1,10 +1,12 @@
 import { Plus } from '@transferwise/icons';
 
 import { ControlType, Priority } from '../common';
-import { render, screen, userEvent } from '../test-utils';
+import { render, screen, userEvent, mockMatchMedia } from '../test-utils';
 
 import CircularButton from './CircularButton';
 
+mockMatchMedia();
+
 const { ACCENT, POSITIVE, NEGATIVE } = ControlType;
 const { PRIMARY, SECONDARY } = Priority;
 

package/src/circularButton/CircularButton.tsx

@@ -3,7 +3,9 @@ import { cloneElement } from 'react';
 
 import Body from '../body/Body';
 import { typeClassMap, priorityClassMap } from '../button/classMap';
-import { ControlType, Priority, Typography } from '../common';
+import { Breakpoint, ControlType, Priority, Typography } from '../common';
+import Circle from '../common/circle';
+import { useMedia } from '../common/hooks/useMedia';
 
 export interface CircularButtonProps {
   className?: string;
@@ -24,14 +26,19 @@ const CircularButton = ({
   type = ControlType.ACCENT,
   ...rest
 }: CircularButtonProps) => {
-  const classes = clsx('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
+  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);
 
   const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;
 
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+
   return (
     <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>
-      <input
+      <Circle
+        as="input"
+        // @ts-expect-error it's input[type=button] element
         type="button"
+        size={isTinyViewport ? 64 : 56}
         aria-label={children}
         className={classes}
         disabled={disabled}

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

@@ -7,7 +7,8 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-accent btn-priority-1"
+      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
@@ -44,7 +45,8 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-accent btn-priority-1"
+      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
@@ -81,7 +83,8 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-positive btn-priority-1"
+      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
@@ -118,7 +121,8 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-negative btn-priority-1"
+      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
@@ -155,7 +159,8 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-accent btn-priority-2"
+      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
@@ -192,7 +197,8 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-positive btn-priority-2"
+      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
@@ -229,7 +235,8 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-negative btn-priority-2"
+      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
@@ -266,7 +273,8 @@ exports[`CircularButton types renders accent buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-accent btn-priority-1"
+      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
@@ -303,7 +311,8 @@ exports[`CircularButton types renders negative buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-negative btn-priority-1"
+      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
@@ -340,7 +349,8 @@ exports[`CircularButton types renders positive buttons 1`] = `
   >
     <input
       aria-label="Add money"
-      class="btn np-btn btn-positive btn-priority-1"
+      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/circle/Circle.css

@@ -0,0 +1,7 @@
+.np-circle {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  flex-shrink: 0;
+}

package/src/common/circle/Circle.less

@@ -0,0 +1,6 @@
+.np-circle {
+  border-radius: var(--radius-full);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  flex-shrink: 0;
+}