@transferwise/components 0.0.0-experimental-f74f39e → 0.0.0-experimental-74f93db

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-f74f39e",
+  "version": "0.0.0-experimental-74f93db",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -43,7 +43,7 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.10.0",
+    "@formatjs/cli": "^6.8.4",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -63,15 +63,15 @@
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.10",
     "@types/jest": "^30.0.0",
-    "@types/lodash": "4.17.23",
+    "@types/lodash": "4.17.21",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.27",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@wise/art": "^2.25.0",
     "@wise/eslint-config": "^13.3.0",
-    "babel-plugin-formatjs": "^10.5.41",
+    "babel-plugin-formatjs": "^10.5.39",
     "eslint": "^9.39.2",
     "eslint-plugin-storybook": "^10.2.0-alpha.13",
     "gulp": "^5.0.1",
@@ -79,8 +79,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
-    "react-intl": "^7.1.14",
-    "rollup": "^4.55.1",
+    "react-intl": "^7.1.11",
+    "rollup": "^4.54.0",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^10.2.0-alpha.13",
     "storybook-addon-tag-badges": "^3.0.4",
@@ -113,7 +113,7 @@
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
     "core-js": "^3.47.0",
-    "framer-motion": "^12.25.0",
+    "framer-motion": "^12.23.26",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",

package/src/alert/Alert.spec.tsx

@@ -93,7 +93,7 @@ describe('Alert', () => {
       expect(component).toHaveClass('arrow-bottom');
       expect(mockedWarn).toHaveBeenCalledWith(
         expect.stringContaining(
-          "Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.",
+          "Alert component doesn't support 'arrow' anymore, use 'InlinePrompt' instead.",
         ),
       );
     });

package/src/alert/Alert.tsx

@@ -67,7 +67,7 @@ export interface AlertProps {
   onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
   /** The type dictates which icon and colour will be used */
   type?: AlertType;
-  /** @deprecated Use `InlineAlert` instead. */
+  /** @deprecated Use `InlinePrompt` instead. */
   arrow?: `${AlertArrowPosition}`;
   /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
   children?: React.ReactNode;
@@ -107,7 +107,7 @@ export default function Alert({
   useEffect(() => {
     if (arrow !== undefined) {
       logActionRequired(
-        "Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.",
+        "Alert component doesn't support 'arrow' anymore, use 'InlinePrompt' instead.",
       );
     }
   }, [arrow]);

package/src/checkbox/Checkbox.story.tsx

@@ -57,9 +57,17 @@ export const MultipleMobile: Story = {
 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/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/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>

package/src/field/Field.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { useId, useRef } from 'react';
 
 import { Sentiment } from '../common';
-import InlineAlert from '../inlineAlert/InlineAlert';
+import { InlinePrompt, type InlinePromptProps } from '../prompt';
 import {
   FieldLabelContextProvider,
   InputDescribedByProvider,
@@ -21,14 +21,18 @@ export type FieldProps = {
   hint?: React.ReactNode;
   message?: React.ReactNode;
   /**
-   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
+   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
    * announced by the screen readers
    * */
   messageIconLabel?: string;
+  /**
+   * If true, shows a loading spinner in place of the message icon of the InlinePrompt
+   */
+  messageLoading?: boolean;
   description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
-  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
+  sentiment?: InlinePromptProps['sentiment'];
   className?: string;
   children?: React.ReactNode;
 };
@@ -39,6 +43,7 @@ export const Field = ({
   required = true,
   message: propMessage,
   messageIconLabel,
+  messageLoading,
   hint,
   description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
@@ -104,9 +109,16 @@ export const Field = ({
               )}
 
               {message && (
-                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>
+                <InlinePrompt
+                  sentiment={sentiment}
+                  id={messageId}
+                  mediaLabel={messageIconLabel}
+                  className="np-field__prompt"
+                  loading={messageLoading}
+                  width="full"
+                >
                   {message}
-                </InlineAlert>
+                </InlinePrompt>
               )}
             </div>
           </InputInvalidProvider>

package/src/inlineAlert/InlineAlert.story.tsx

@@ -4,9 +4,13 @@ import InlineAlert, { InlineAlertProps } from './InlineAlert';
 import { lorem10, lorem40 } from '../test-utils';
 import Link from '../link';
 
+/**
+ * > **DEPRECATED** Use [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) or [Field](?path=/docs/forms-field--docs) instead.
+ */
 export default {
   component: InlineAlert,
   title: 'Prompts/InlineAlert',
+  tags: ['deprecated'],
 } as Meta<InlineAlertProps>;
 
 export const Basic = () => {

package/src/inlineAlert/InlineAlert.tsx

@@ -22,13 +22,7 @@ const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
 ]);
 
 /**
- * Avoid using `<InlineAlert>` component directly
- * it's for edge cases when `<Field />` isn't suitable for some reasons.
- *
- * Example:
- * ```
- * <Field sentiment={..} message={..}>..</Field>
- * ```
+ * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) or [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.
  */
 export default function InlineAlert({
   id,

package/src/main.css

@@ -3825,10 +3825,19 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
-.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);
+}
 .np-input-group {
   display: inline-grid;
   width: 100%;
@@ -5397,6 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}
 .np-section {
   margin-top: 32px;
   margin-top: var(--size-32);
@@ -6923,6 +6935,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
   margin: 0;
 }
+.typeahead--prompt {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/src/main.less

@@ -61,6 +61,7 @@
 @import "./phoneNumberInput/PhoneNumberInput.less";
 @import "./popover/Popover.less";
 @import "./promoCard/PromoCard.less";
+@import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
 @import "./snackbar/Snackbar.less";

package/src/radioGroup/RadioGroup.css

@@ -0,0 +1,3 @@
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}

package/src/radioGroup/RadioGroup.less

@@ -0,0 +1,3 @@
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}

package/src/radioGroup/RadioGroup.story.tsx

@@ -66,6 +66,8 @@ export const WithinField = {
     const hasError = selectedValue === 'radio-2';
     return (
       <Field
+        label="Field label"
+        description="Field description"
         {...(hasError
           ? {
               message: 'Something went wrong',

package/src/radioGroup/RadioGroup.test.story.tsx

@@ -0,0 +1,62 @@
+import RadioGroup, { RadioGroupProps } from './RadioGroup';
+import { Field } from '../field/Field';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+const meta = {
+  component: RadioGroup,
+  title: 'Forms/RadioGroup/tests',
+  tags: ['!autodocs'],
+  args: {
+    selectedValue: 'radio-2',
+    name: 'radio-group',
+    radios: [
+      {
+        value: 'radio-1',
+        label: 'Radio1',
+      },
+      {
+        value: 'radio-2',
+        label: 'Radio2',
+      },
+    ],
+    onChange: fn(),
+  },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
+
+export const FieldsWithPrompt = {
+  render: function Render(args) {
+    return (
+      <>
+        {['i1', 'i2'].map((id) => (
+          <Field
+            key={id}
+            label="Field label"
+            description="Field description"
+            message="Something went great"
+            sentiment="positive"
+          >
+            <RadioGroup {...args} selectedValue="radio-2" />
+          </Field>
+        ))}
+      </>
+    );
+  },
+} satisfies Story;
+
+export const FieldsWithoutPrompt = {
+  render: function Render(args) {
+    return (
+      <>
+        {['i1', 'i2'].map((id) => (
+          <Field key={id} label="Field label" sentiment="positive">
+            <RadioGroup {...args} selectedValue="radio-2" />
+          </Field>
+        ))}
+      </>
+    );
+  },
+} satisfies Story;

package/src/radioGroup/RadioGroup.tsx

@@ -29,7 +29,12 @@ export default function RadioGroup<T extends string | number = never>({
   const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
 
   return radios.length > 0 ? (
-    <div role="radiogroup" {...inputAttributes} {...UNSAFE_inputAttributes}>
+    <div
+      role="radiogroup"
+      {...inputAttributes}
+      {...UNSAFE_inputAttributes}
+      className="wds-radio-group"
+    >
       {radios.map(({ value = '' as T, ...restProps }, index) => (
         <Radio
           // eslint-disable-next-line react/no-array-index-key

package/src/typeahead/Typeahead.css

@@ -103,6 +103,10 @@
   padding: 0;
   margin: 0;
 }
+.typeahead--prompt {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/src/typeahead/Typeahead.less

@@ -122,6 +122,10 @@
     }
   }
 
+  &--prompt {
+    margin-top: var(--size-4);
+  }
+
   // SIZES
   &-sm {
     &.typeahead--multiple {
@@ -207,7 +211,7 @@
   }
 
   .np-theme-personal & {
-    .input-group:not(.disabled,:disabled,.input-group--has-error):focus-within .tw-icon-search {
+    .input-group:not(.disabled, :disabled, .input-group--has-error):focus-within .tw-icon-search {
       color: var(--color-interactive-primary);
     }
     .tw-icon-search {

package/src/typeahead/Typeahead.spec.tsx

@@ -102,7 +102,7 @@ describe('Typeahead', () => {
     expect(onChange).toHaveBeenCalledWith([]);
   });
 
-  it('shows InlineAlert when alert prop is provided', () => {
+  it('shows InlinePrompt when alert prop is provided', () => {
     render(
       <Typeahead
         id="test"