@transferwise/components 46.71.2 → 46.71.4

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;
+}

package/src/common/circle/Circle.story.tsx

@@ -0,0 +1,86 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { storyConfig } from '../../test-utils';
+import Circle from './Circle';
+import { Profile } from '@transferwise/icons';
+import { action } from '@storybook/addon-actions';
+import { CircleProps } from '.';
+import Body from '../../body';
+
+export default {
+  title: 'Internal/Circle',
+  component: Circle,
+} satisfies Meta<typeof Circle>;
+
+type Story = StoryObj<typeof Circle>;
+
+export const Basic: Story = {
+  tags: ['autodocs'],
+  args: {
+    children: 'NP',
+    size: 40,
+    as: 'div',
+    className: 'bg-neutral',
+  },
+  render: (args) => {
+    return <Circle {...args} />;
+  },
+};
+
+export const Sizes: Story = storyConfig(
+  {
+    render: () => {
+      const content = <Profile size={16} />;
+      const sizes: CircleProps['size'][] = [32, 40, 48, 56, 72];
+      return (
+        <div
+          style={{
+            gap: '1em',
+            display: 'grid',
+            justifyContent: 'space-between',
+            gridTemplate: 'auto auto / repeat(5, min-content)',
+          }}
+        >
+          {sizes.map((size) => (
+            <Circle key={size} size={size} className="bg-neutral">
+              {content}
+            </Circle>
+          ))}
+        </div>
+      );
+    },
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const FixedSize: Story = storyConfig(
+  {
+    render: () => {
+      const size = 72;
+      const content = <Profile size={16} />;
+      return (
+        <div
+          style={{
+            gap: '1em',
+            display: 'grid',
+            justifyContent: 'space-between',
+            gridTemplate: 'auto auto / repeat(2, 180px)',
+          }}
+        >
+          <Body className="d-block">
+            Dynamic Size (<code>--size-{size}</code>)
+          </Body>
+          <Body className="d-block">
+            Fixed Size (<code>{size}px</code>)
+          </Body>
+          <Circle size={72} fixedSize={false} className="bg-neutral">
+            {content}
+          </Circle>
+          <Circle size={72} fixedSize className="bg-neutral">
+            {content}
+          </Circle>
+        </div>
+      );
+    },
+  },
+  { variants: ['400%'] },
+);

package/src/common/circle/Circle.tsx

@@ -0,0 +1,46 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { clsx } from 'clsx';
+
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+
+export type Props = {
+  /**
+   * Modify underlying element, `div` by default
+   */
+  as?: React.ElementType;
+  /**
+   * Set size of the circle in px, `48` by default
+   */
+  size?: ShapeSize;
+  /**
+   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)
+   * as those can be dynamic a at certain viewport sizes
+   */
+  fixedSize?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+const Circle = forwardRef(function Circle(
+  {
+    as: Element = 'div',
+    children,
+    size = 48,
+    fixedSize = false,
+    className,
+    style,
+    ...props
+  }: Props,
+  ref,
+) {
+  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)}
+    >
+      {children}
+    </Element>
+  );
+});
+
+export default Circle;

package/src/common/circle/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Circle';
+export { type Props as CircleProps } from './Circle';

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

@@ -21,10 +21,12 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          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;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+            style="--circle-size: 48px;"
           >
             TM
           </div>
@@ -136,10 +138,12 @@ exports[`FlowNavigation renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          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;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+            style="--circle-size: 48px;"
           >
             TM
           </div>

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable no-console */
 import { Sentiment } from '../common';
-import { render, screen } from '../test-utils';
+import { render, screen, mockMatchMedia } from '../test-utils';
 
 import InlineAlert from './InlineAlert';
 
+mockMatchMedia();
+
 describe('InlineAlert', () => {
   const message = 'Your card is on its way.';
 

package/src/inputs/SelectInput.docs.mdx

@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/blocks';
+import { MoneyInput } from '..';
+
+<Meta title="Forms/SelectInput/Accessibility" />
+
+# Accessibility
+
+## Labelling
+
+In order for the `<SelectInput />` to be considered accessible, it must be provided with a matching label, preferably via the <a href="/?path=/docs/field--docs">Field</a> component.
+
+Additionally, the `listbox` container that holds all the options is also expected to have its own label, which the component will attempt to resolve by looking in the following places:
+
+1. `UNSAFE_triggerButtonProps['aria-label']` prop, which reuses the custom label provided for the trigger button.
+   <br /> A good example of this strategy is the `<MoneyInput />` component, internally setting
+   `"Select currency"` as a trigger button label, which then gets automatically applied to the
+   `listbox`.
+2. `UNSAFE_triggerButtonProps['aria-labelledby']` prop, which holds the id of the element labelling the trigger button.
+3. Correctly paired input `<label />` text, ideally via the `Field` component.
+
+> Using option group heading is possible but complicated as we can have multiple groups, and those are not necessarily rendered consistently if search or virtualisation are enabled.