@transferwise/components 46.119.5 → 46.120.1

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>

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/header/Header.story.tsx

@@ -13,20 +13,6 @@ const withContainer = (Story: any) => (
 const hideControls = (args: string[]) =>
   Object.fromEntries(args.map((item) => [item, { table: { disable: true } }]));
 
-/**
- * Reusable render logic for wrapping `Header` in a `<fieldset>` if `as` is `legend`.
- */
-const renderHeader = (args: HeaderProps) => {
-  if (args.as === 'legend') {
-    return (
-      <fieldset style={{ width: '100%' }}>
-        <Header {...args} />
-      </fieldset>
-    );
-  }
-  return <Header {...args} />;
-};
-
 /**
  * The stories below document the `Header` component, which is used to structure content and convey hierarchy. <br />
  * For more details, refer to the [design documentation](https://wise.design/components/section-header).
@@ -89,7 +75,6 @@ export default meta;
 type Story = StoryObj<typeof Header>;
 
 export const Playground: Story = {
-  render: renderHeader,
   args: {
     title: 'Playground Header',
     level: 'group',
@@ -151,7 +136,11 @@ export const DisabledAction: Story = {
  * Demonstrates a `Header` rendered as a custom HTML element.
  */
 export const CustomElement: Story = {
-  render: renderHeader,
+  render: (args) => (
+    <fieldset style={{ width: '100%' }}>
+      <Header {...args} />
+    </fieldset>
+  ),
   args: {
     title: 'Legend Header',
     as: 'legend',