@transferwise/components 46.119.5 → 46.120.0

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'] },
-);
+};

package/src/dateInput/DateInput.tests.story.tsx

@@ -2,10 +2,11 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within, fn } from 'storybook/test';
 
 import { DateInput, Field } from '..';
-import { lorem10, storyConfig } from '../test-utils';
+import { lorem10 } from '../test-utils';
 
 import Provider from '../provider/Provider';
 import translations from '../i18n';
+import { allModes } from '../../.storybook/modes';
 
 const meta: Meta<typeof DateInput> = {
   component: DateInput,
@@ -78,64 +79,72 @@ export const CustomPlaceholders: Story = {
   },
 };
 
-export const SingleZero = storyConfig(Basic, {});
-SingleZero.play = async ({ canvasElement, step }) => {
-  const canvas = within(canvasElement);
-  await step('can enter leading zero on day field', async () => {
-    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
-    await userEvent.click(dayInput);
-    await userEvent.type(dayInput, '0');
-  });
-  await step('can enter 1 leading zero on year field', async () => {
-    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
-    await userEvent.click(yearInput);
-    await userEvent.type(yearInput, '0');
-  });
-};
-
-export const ZeroesAsValue = storyConfig(Basic, {});
-ZeroesAsValue.play = async ({ canvasElement, step }) => {
-  const canvas = within(canvasElement);
-  await step('can enter 2 leading zeroes on day field', async () => {
-    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
-    await userEvent.click(dayInput);
-    await userEvent.type(dayInput, '00');
-  });
-  await step('can enter 4 leading zeroes on year field', async () => {
-    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
-    await userEvent.click(yearInput);
-    await userEvent.type(yearInput, '0000');
-  });
-};
-
-export const ZeroesBeforeValue = storyConfig(Basic, {});
-ZeroesBeforeValue.play = async ({ canvasElement, step }) => {
-  const canvas = within(canvasElement);
-  await step('can enter leading zeroes on day followed by day', async () => {
-    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
-    await userEvent.click(dayInput);
-    await userEvent.type(dayInput, '01');
-  });
-  await step('can enter leading zeroes on year followed by year', async () => {
-    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
-    await userEvent.click(yearInput);
-    await userEvent.type(yearInput, '0001');
-  });
-};
-
-export const MaxLengthRespected = storyConfig(Basic, {});
-MaxLengthRespected.play = async ({ canvasElement, step }) => {
-  const canvas = within(canvasElement);
-  await step('can only enter 4 digits in the year field', async () => {
-    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
-    await userEvent.click(yearInput);
-    await userEvent.type(yearInput, '11111111');
-  });
-  await step('can only enter 2 digits in the day field', async () => {
-    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
-    await userEvent.click(dayInput);
-    await userEvent.type(dayInput, '11111111');
-  });
+export const SingleZero: Story = {
+  ...Basic,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('can enter leading zero on day field', async () => {
+      const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+      await userEvent.click(dayInput);
+      await userEvent.type(dayInput, '0');
+    });
+    await step('can enter 1 leading zero on year field', async () => {
+      const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+      await userEvent.click(yearInput);
+      await userEvent.type(yearInput, '0');
+    });
+  },
+};
+
+export const ZeroesAsValue: Story = {
+  ...Basic,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('can enter 2 leading zeroes on day field', async () => {
+      const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+      await userEvent.click(dayInput);
+      await userEvent.type(dayInput, '00');
+    });
+    await step('can enter 4 leading zeroes on year field', async () => {
+      const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+      await userEvent.click(yearInput);
+      await userEvent.type(yearInput, '0000');
+    });
+  },
+};
+
+export const ZeroesBeforeValue: Story = {
+  ...Basic,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('can enter leading zeroes on day followed by day', async () => {
+      const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+      await userEvent.click(dayInput);
+      await userEvent.type(dayInput, '01');
+    });
+    await step('can enter leading zeroes on year followed by year', async () => {
+      const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+      await userEvent.click(yearInput);
+      await userEvent.type(yearInput, '0001');
+    });
+  },
+};
+
+export const MaxLengthRespected: Story = {
+  ...Basic,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('can only enter 4 digits in the year field', async () => {
+      const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+      await userEvent.click(yearInput);
+      await userEvent.type(yearInput, '11111111');
+    });
+    await step('can only enter 2 digits in the day field', async () => {
+      const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+      await userEvent.click(dayInput);
+      await userEvent.type(dayInput, '11111111');
+    });
+  },
 };
 
 export const LocalizationWorks: Story = {
@@ -194,21 +203,39 @@ export const DayFirst: Story = {
   ],
 };
 
-export const NoNonDigitsAllowed = storyConfig(Basic, {});
-NoNonDigitsAllowed.play = async ({ canvasElement, step }) => {
-  const canvas = within(canvasElement);
-  await step('can only enter digits in the day field', async () => {
-    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
-    await userEvent.click(dayInput);
-    await userEvent.type(dayInput, 'abcd1');
-  });
-  await step('can only enter digits in the year field', async () => {
-    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
-    await userEvent.click(yearInput);
-    await userEvent.type(yearInput, 'abcd2');
-  });
+export const NoNonDigitsAllowed: Story = {
+  ...Basic,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('can only enter digits in the day field', async () => {
+      const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+      await userEvent.click(dayInput);
+      await userEvent.type(dayInput, 'abcd1');
+    });
+    await step('can only enter digits in the year field', async () => {
+      const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+      await userEvent.click(yearInput);
+      await userEvent.type(yearInput, 'abcd2');
+    });
+  },
 };
 
-export const BasicMobile = storyConfig(Basic, { variants: ['mobile'] });
+export const BasicMobile: Story = {
+  ...Basic,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
-export const InputErrorMobile = storyConfig(InputError, { variants: ['mobile'] });
+export const InputErrorMobile: Story = {
+  ...InputError,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};

package/src/dateLookup/DateLookup.story.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import { userEvent } from 'storybook/test';
+import { StoryObj } from '@storybook/react-webpack5';
 import { Field } from '..';
 import { Size } from '../common';
-import { storyConfig } from '../test-utils';
 import DateLookup, { type DateLookupProps } from './DateLookup';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: DateLookup,
@@ -21,53 +22,18 @@ export default {
   },
 };
 
+type Story = StoryObj<typeof DateLookup>;
+
 const epoch = new Date('2011-01-01');
 const theFuture = new Date(epoch);
 theFuture.setUTCDate(epoch.getUTCDate() + 10);
 const thePast = new Date(epoch);
 thePast.setUTCDate(epoch.getUTCDate() - 10);
 
-export const Basic = (args: DateLookupProps) => {
-  const [value, setValue] = useState<Date | null>(epoch);
-  return (
-    <DateLookup
-      {...args}
-      min={args.min ? new Date(args.min) : thePast}
-      max={args.max ? new Date(args.max) : theFuture}
-      value={value}
-      onChange={(v) => setValue(v)}
-    />
-  );
-};
-Basic.args = {
-  size: Size.MEDIUM,
-  disabled: false,
-  label: 'label',
-  monthFormat: 'long',
-  placeholder: 'placeholder',
-  id: 'date-lookup',
-  clearable: true,
-  min: thePast,
-  max: theFuture,
-};
-Basic.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-  await userEvent.tab();
-  await userEvent.keyboard(' ');
-};
-
-export const Basic400Zoom = storyConfig(
-  {
-    render: Basic,
-    play: Basic.play,
-    parameters: { chromatic: { delay: 2000 } },
-  },
-  { variants: ['400%'] },
-);
-
-export const WithField = (args: DateLookupProps) => {
-  const [value, setValue] = useState<Date | null>(epoch);
-  return (
-    <Field label="Date lookup">
+export const Basic: Story = {
+  render: (args: DateLookupProps) => {
+    const [value, setValue] = useState<Date | null>(epoch);
+    return (
       <DateLookup
         {...args}
         min={args.min ? new Date(args.min) : thePast}
@@ -75,31 +41,75 @@ export const WithField = (args: DateLookupProps) => {
         value={value}
         onChange={(v) => setValue(v)}
       />
-    </Field>
-  );
+    );
+  },
+  args: {
+    size: Size.MEDIUM,
+    disabled: false,
+    label: 'label',
+    monthFormat: 'long',
+    placeholder: 'placeholder',
+    id: 'date-lookup',
+    clearable: true,
+    min: thePast,
+    max: theFuture,
+  },
+  play: async () => {
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
+  },
+};
+export const Basic400Zoom: Story = {
+  ...Basic,
+  parameters: {
+    chromatic: {
+      delay: 2000,
+      zoom400: allModes.zoom400,
+    },
+    variants: ['400%'],
+  },
 };
 
-export const RightAligned = (args: DateLookupProps) => {
-  const [value, setValue] = useState<Date | null>(epoch);
-  return (
-    <div className="row">
-      <div className="col-xs-6">
-        <p>
-          This example demonstrates the automatic right alignment behaviour of the calendar. If,
-          when the calendar is opened, it is cut off on the right, the component will align the
-          calendar to the rightmost edge of the lookup input.
-        </p>
-      </div>
-      <div className="col-xs-6">
+export const WithField: Story = {
+  render: (args: DateLookupProps) => {
+    const [value, setValue] = useState<Date | null>(epoch);
+    return (
+      <Field label="Date lookup">
         <DateLookup
           {...args}
-          id="right-aligned"
           min={args.min ? new Date(args.min) : thePast}
           max={args.max ? new Date(args.max) : theFuture}
           value={value}
           onChange={(v) => setValue(v)}
         />
+      </Field>
+    );
+  },
+};
+
+export const RightAligned: Story = {
+  render: (args: DateLookupProps) => {
+    const [value, setValue] = useState<Date | null>(epoch);
+    return (
+      <div className="row">
+        <div className="col-xs-6">
+          <p>
+            This example demonstrates the automatic right alignment behaviour of the calendar. If,
+            when the calendar is opened, it is cut off on the right, the component will align the
+            calendar to the rightmost edge of the lookup input.
+          </p>
+        </div>
+        <div className="col-xs-6">
+          <DateLookup
+            {...args}
+            id="right-aligned"
+            min={args.min ? new Date(args.min) : thePast}
+            max={args.max ? new Date(args.max) : theFuture}
+            value={value}
+            onChange={(v) => setValue(v)}
+          />
+        </div>
       </div>
-    </div>
-  );
+    );
+  },
 };

package/src/field/Field.css

@@ -1,4 +1,13 @@
-.np-field-control {
+.np-field-control,
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
+.np-field .form-group--typeahead[class],
+.np-field .np-checkbox-label[class] {
+  margin-bottom: 0;
+}
+.np-field:has(.wds-radio-group) .np-field__prompt {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}

package/src/field/Field.less

@@ -1,5 +1,16 @@
 .np-field {
-  &-control {
-      margin-top: var(--size-4);
+  &-control,
+  &__prompt {
+    margin-top: var(--size-4);
+  }
+
+  // @FIXME space between individual fields should be 24px, while some older inputs
+  //        inject extraneous space.
+  .form-group--typeahead[class],
+  .np-checkbox-label[class] {
+    margin-bottom: 0;
+  }
+  &:has(.wds-radio-group) &__prompt {
+    margin-top: var(--size-12);
   }
 }

package/src/field/Field.spec.tsx

@@ -71,7 +71,7 @@ describe('Field', () => {
     expect(screen.getByLabelText(/Phone number/)).toHaveAttribute('aria-describedby');
   });
 
-  it("should allow for InlineAlert's StatusIcon override via `messageIconLabel` prop", () => {
+  it("should allow for InlinePrompt's StatusIcon override via `messageIconLabel` prop", () => {
     const customIconLabel = 'My custom icon label';
 
     render(
@@ -86,8 +86,8 @@ describe('Field', () => {
       </Field>,
     );
 
-    expect(screen.queryByRole('graphics-symbol', { name: 'Error.' })).not.toBeInTheDocument();
-    expect(screen.getByRole('graphics-symbol', { name: customIconLabel })).toBeInTheDocument();
+    expect(screen.queryByLabelText('Error:')).not.toBeInTheDocument();
+    expect(screen.getByLabelText(customIconLabel)).toBeInTheDocument();
   });
 
   it('should show or hide (Optional) suffix depending on required prop', () => {
@@ -147,4 +147,20 @@ describe('Field', () => {
     const label = screen.getByText('Phone number');
     await userEvent.click(label);
   });
+
+  it('should show loading spinner when messageLoading is true', () => {
+    render(
+      <Field
+        label="Phone number"
+        message="Processing your request"
+        sentiment="neutral"
+        messageLoading
+      >
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+    expect(screen.getByText('Processing your request')).toBeInTheDocument();
+  });
 });

package/src/field/Field.story.tsx

@@ -46,6 +46,7 @@ export const Basic = (args: FieldProps) => {
           sentiment={Sentiment.NEGATIVE}
           message="Validation error, please take a look"
           messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
         >
           <Input value={value} onChange={({ target }) => setValue(target.value)} />
         </Field>
@@ -81,6 +82,7 @@ export const Basic = (args: FieldProps) => {
           message={lorem10}
           sentiment="negative"
           messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
         >
           <TextArea />
         </Field>
@@ -109,6 +111,17 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.POSITIVE}
         message="Positive message"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      <Field
+        label="Text Input with Proposition Message"
+        sentiment="proposition"
+        message="Proposition message"
+        messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -118,6 +131,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.WARNING}
         message="Warning message"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -127,6 +141,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.NEGATIVE}
         message="This is a required field"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -138,6 +153,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.NEGATIVE}
         message="Validation error, please take a look"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -148,6 +164,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         hint="This is a helpful message"
         error="Validation error, please take a look"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -157,6 +174,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         label="Text Input with Info under the field"
         message="This is a helpful message"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>