@transferwise/components 46.119.5 → 46.120.1

package/src/carousel/Carousel.story.tsx

@@ -1,6 +1,5 @@
-import type { StoryFn } from '@storybook/react-webpack5';
+import type { Args } from '@storybook/react-webpack5';
 import { Illustration } from '@wise/art';
-import React from 'react';
 
 import Display from '../display';
 
@@ -54,11 +53,9 @@ const carouselCards: CarouselCard[] = [
   },
 ];
 
-const Template: StoryFn = (args) => {
-  return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;
-};
-
 export const CarouselDefault = {
-  render: Template,
+  render: (args: Args) => {
+    return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;
+  },
   args: {},
 };

package/src/checkbox/Checkbox.story.tsx

@@ -2,9 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
 import { Field } from '../field/Field';
-import { lorem10, storyConfig } from '../test-utils';
+import { lorem10 } from '../test-utils';
 
 import Checkbox from './Checkbox';
+import { allModes } from '../../.storybook/modes';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -20,33 +21,53 @@ type Story = StoryObj<typeof Checkbox>;
 
 export const Basic: Story = {};
 
-export const Multiple: Story = storyConfig(
-  {
-    render: (args) => {
-      return (
-        <>
-          <Checkbox {...args} />
-          <Checkbox {...args} checked />
-          <Checkbox {...args} label={lorem10} />
-          <Checkbox {...args} label={lorem10} secondary={lorem10} />
-          <Checkbox {...args} disabled />
-        </>
-      );
+export const Multiple: Story = {
+  render: (args) => {
+    return (
+      <>
+        <Checkbox {...args} />
+        <Checkbox {...args} checked />
+        <Checkbox {...args} label={lorem10} />
+        <Checkbox {...args} label={lorem10} secondary={lorem10} />
+        <Checkbox {...args} disabled />
+      </>
+    );
+  },
+  parameters: {
+    variants: ['default', 'dark', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
     },
   },
-  { variants: ['default', 'dark', 'rtl'] },
-);
+};
 
-export const MultipleMobile: Story = storyConfig(Multiple, {
-  variants: ['default', 'dark', 'rtl', 'mobile'],
-});
+export const MultipleMobile: Story = {
+  ...Multiple,
+  parameters: {
+    variants: ['default', 'dark', 'rtl', 'mobile'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
 export const WithinField = {
   decorators: [
     (Story) => (
-      <Field message="Something went wrong" sentiment="negative">
-        <Story />
-      </Field>
+      <>
+        <Field label="Field label">
+          <Story />
+        </Field>
+        <Field label="Field label" message="Something went wrong" sentiment="negative">
+          <Story />
+        </Field>
+        <Field label="Field label" message="Something went great" sentiment="positive">
+          <Story />
+        </Field>
+      </>
     ),
   ],
 } satisfies Story;

package/src/checkbox/Checkbox.tsx

@@ -44,7 +44,7 @@ export default function Checkbox({
   const innerDisabled = disabled || readOnly;
   return (
     <div id={id} className={classList}>
-      <label className={clsx({ disabled })}>
+      <label className={clsx('np-checkbox-label', { disabled })}>
         <CheckboxButton
           className="p-r-2"
           checked={checked}

package/src/checkbox/__snapshots__/Checkbox.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Checkbox renders the given label 1`] = `
     class="np-checkbox checkbox"
   >
     <label
-      class=""
+      class="np-checkbox-label"
     >
       <span
         class="np-checkbox-button p-r-2"

package/src/circularButton/CircularButton.story.tsx

@@ -4,9 +4,9 @@ import { ControlType, Priority } from '../common';
 
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
-import { storyConfig } from '../test-utils';
 import Title from '../title';
 import Body from '../body';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: CircularButton,
@@ -87,4 +87,12 @@ export const All: Story = {
   },
 };
 
-export const All400Zoom: Story = storyConfig(All, { variants: ['400%'] });
+export const All400Zoom: Story = {
+  ...All,
+  parameters: {
+    variants: ['400%'],
+    chromatic: {
+      '400%': allModes.zoom400,
+    },
+  },
+};

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -6,11 +6,12 @@ import { useState } from 'react';
 import Body from '../../body/Body';
 import Button from '../../button';
 import NavigationOption from '../../navigationOption';
-import { lorem10, lorem500, storyConfig } from '../../test-utils';
+import { lorem10, lorem500 } from '../../test-utils';
 import Title from '../../title/Title';
 import { Typography } from '../propsValues/typography';
 
 import BottomSheet from './BottomSheet';
+import { allModes } from '../../../.storybook/modes';
 
 export default {
   component: BottomSheet,
@@ -64,7 +65,15 @@ export const Basic: Story = {
   },
 };
 
-export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
+export const BasicMobile: Story = {
+  ...Basic,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
 export const WithOverflowContent: Story = {
   args: {
@@ -95,18 +104,43 @@ export const WithOverflowContent: Story = {
   },
 };
 
-export const WithOverflowContentMobile: Story = storyConfig(WithOverflowContent, {
-  variants: ['mobile'],
-});
+export const WithOverflowContentMobile: Story = {
+  ...WithOverflowContent,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
-export const WithOverflowContentDark: Story = storyConfig(WithOverflowContent, {
-  variants: ['dark'],
-});
+export const WithOverflowContentDark: Story = {
+  ...WithOverflowContent,
+  parameters: {
+    variants: ['dark'],
+    chromatic: {
+      dark: allModes.dark,
+    },
+  },
+};
 
-export const WithOverflowContentDarkMobile: Story = storyConfig(WithOverflowContent, {
-  variants: ['dark', 'mobile'],
-});
+export const WithOverflowContentDarkMobile: Story = {
+  ...WithOverflowContent,
+  parameters: {
+    variants: ['dark', 'mobile'],
+    chromatic: {
+      dark: allModes.dark,
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
-export const WithOverflowContentZoom400: Story = storyConfig(WithOverflowContent, {
-  variants: ['400%'],
-});
+export const WithOverflowContentZoom400: Story = {
+  ...WithOverflowContent,
+  parameters: {
+    variants: ['400%'],
+    chromatic: {
+      '400%': allModes.zoom400,
+    },
+  },
+};

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

@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { storyConfig } from '../../test-utils';
 import Circle from './Circle';
 import { Profile } from '@transferwise/icons';
-import { action } from 'storybook/actions';
 import { CircleProps } from '.';
 import Body from '../../body';
+import { allModes } from '../../../.storybook/modes';
 
 export default {
   title: 'Internal/Circle',
   component: Circle,
+  tags: ['!manifest'],
 } satisfies Meta<typeof Circle>;
 
 type Story = StoryObj<typeof Circle>;
@@ -25,61 +25,68 @@ export const Basic: Story = {
   },
 };
 
-export const Sizes: Story = storyConfig(
-  {
-    render: () => {
-      const content = <Profile size={16} />;
-      const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
-      return (
-        <div
-          style={{
-            gap: '1em',
-            display: 'grid',
-            justifyContent: 'space-between',
-            gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
-          }}
-        >
-          {sizes.map((size) => (
-            <Circle key={size} size={size} className="bg-neutral">
-              {content}
-            </Circle>
-          ))}
-        </div>
-      );
+export const Sizes: Story = {
+  render: () => {
+    const content = <Profile size={16} />;
+    const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+        }}
+      >
+        {sizes.map((size) => (
+          <Circle key={size} size={size} className="bg-neutral">
+            {content}
+          </Circle>
+        ))}
+      </div>
+    );
+  },
+  parameters: {
+    variants: ['light', 'dark'],
+    chromatic: {
+      light: allModes.light,
+      dark: allModes.dark,
     },
   },
-  { 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>
-      );
+export const FixedSize: Story = {
+  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>
+    );
+  },
+  parameters: {
+    variants: ['400%'],
+    chromatic: {
+      zoom400: allModes.zoom400,
     },
   },
-  { variants: ['400%'] },
-);
+};

package/src/common/initials.spec.tsx

@@ -52,4 +52,35 @@ describe('getInitials', () => {
     expect(getInitials('(Super) Fantastic Squirrel')).toBe('FS');
     expect(getInitials('Super (Fantastic) Squirrel')).toBe('SS');
   });
+
+  it('handles emojis correctly', () => {
+    expect(getInitials('😀')).toBe('😀');
+    expect(getInitials('😀 Christian Dalby')).toBe('😀D');
+    expect(getInitials('Christian 😀')).toBe('C😀');
+    expect(getInitials('😎 Christian 😎')).toBe('😎😎');
+    expect(getInitials('🎉 Party 🎊 Time')).toBe('🎉T');
+  });
+
+  it('handles unicode strings correctly', () => {
+    expect(getInitials('\u{1F600}')).toBe('\u{1F600}');
+    expect(getInitials('\u{1F600} Christian Dalby')).toBe('\u{1F600}D');
+    expect(getInitials('Christian \u{1F600}')).toBe('C\u{1F600}');
+    expect(getInitials('\u{1F60E} Christian \u{1F60E}')).toBe('\u{1F60E}\u{1F60E}');
+    expect(getInitials('\u{1F389} Party \u{1F38A} Time')).toBe('\u{1F389}T');
+  });
+
+  it('handles multi-byte emojis with skin tones and ZWJ sequences', () => {
+    expect(getInitials('👨‍👩‍👧‍👦')).toBe('👨‍👩‍👧‍👦');
+    expect(getInitials('👨‍👩‍👧‍👦 Family')).toBe('👨‍👩‍👧‍👦F');
+    expect(getInitials('👋🏽')).toBe('👋🏽');
+    expect(getInitials('Christian 👋🏽')).toBe('C👋🏽');
+  });
+
+  it('handles diacritical marks correctly', () => {
+    expect(getInitials('André Müller')).toBe('AM');
+    expect(getInitials('Ángel Muñoz')).toBe('ÁM');
+    expect(getInitials('François Élis')).toBe('FÉ');
+    expect(getInitials('Łukasz Ślusarczyk')).toBe('ŁŚ');
+    expect(getInitials('Ömer Özdemir')).toBe('ÖÖ');
+  });
 });

package/src/common/initials.ts

@@ -1,3 +1,15 @@
+function startsWithParenthesis(part: string) {
+  return /^[({[<]/.test(part);
+}
+
+// Reuse a single Intl.Segmenter instance to avoid repeated allocations
+const GRAPHEME_SEGMENTER = new Intl.Segmenter('en', { granularity: 'grapheme' });
+
+// Helper to split the string into grapheme clusters, which handles complex characters correctly
+function getGraphemes(str: string): string[] {
+  return Array.from(GRAPHEME_SEGMENTER.segment(str), (s) => s.segment);
+}
+
 export function getInitials(name: string) {
   if (name.length === 2 && /^[A-Z]{2}$/.test(name)) {
     return name;
@@ -6,17 +18,16 @@ export function getInitials(name: string) {
   const allInitials = name
     .split(' ')
     .filter((part) => !startsWithParenthesis(part))
-    .map((part) => part[0])
+    .map((part) => getGraphemes(part)[0])
     .join('')
     .toUpperCase();
 
-  if (allInitials.length === 1) {
-    return allInitials[0];
-  }
-
-  return allInitials[0] + allInitials.slice(-1);
+  // Get graphemes of the initials string to handle complex characters correctly
+  const graphemes = getGraphemes(allInitials);
 
-  function startsWithParenthesis(part: string) {
-    return /^[({[<]/.test(part);
+  if (graphemes.length === 1) {
+    return graphemes[0];
   }
+
+  return graphemes[0] + graphemes[graphemes.length - 1];
 }

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,13 +1,15 @@
-import { Meta } from '@storybook/react-webpack5';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '.';
-import { storyConfig } from '../test-utils';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: CriticalCommsBanner,
   title: 'Prompts/CriticalCommsBanner',
 } satisfies Meta<typeof CriticalCommsBanner>;
 
+type Story = StoryObj<typeof CriticalCommsBanner>;
+
 export const Basic = {
   args: {
     title: 'Your account is overdrawn',
@@ -16,25 +18,34 @@ export const Basic = {
   },
 };
 
-export const Variants = storyConfig(
-  {
-    args: {
-      title: 'Your account is overdrawn',
-      subtitle: 'Add money within the next 30 days',
-      action: { label: 'Take action', href: 'https://wise.com' },
+export const Variants: Story = {
+  args: {
+    title: 'Your account is overdrawn',
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+  },
+  parameters: {
+    variants: ['default', 'dark', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
     },
   },
-  { variants: ['default', 'dark', 'rtl'] },
-);
+};
 
-export const Mobile = storyConfig(
-  {
-    tags: ['!autodocs'],
-    args: {
-      title: 'Your account is overdrawn',
-      subtitle: 'Add money within the next 30 days',
-      action: { label: 'Take action', href: 'https://wise.com' },
+export const Mobile: Story = {
+  tags: ['!autodocs'],
+  args: {
+    title: 'Your account is overdrawn',
+    subtitle: 'Add money within the next 30 days',
+    action: { label: 'Take action', href: 'https://wise.com' },
+  },
+  parameters: {
+    variants: ['default', 'dark', 'rtl', 'mobile'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
+      mobile: allModes.largeMobile,
     },
   },
-  { variants: ['default', 'dark', 'rtl', 'mobile'] },
-);
+};