@transferwise/components 0.0.0-experimental-c8d90fc → 0.0.0-experimental-2118b34

package/src/chips/__snapshots__/Chips.spec.tsx.snap

@@ -13,12 +13,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
       role="radio"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Accounting
-      </span>
+      </div>
     </div>
     <div
       aria-checked="true"
@@ -26,12 +26,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
       role="radio"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Payroll
-      </span>
+      </div>
     </div>
     <div
       aria-checked="false"
@@ -39,12 +39,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
       role="radio"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Reporting
-      </span>
+      </div>
     </div>
     <div
       aria-checked="false"
@@ -52,12 +52,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
       role="radio"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Payments
-      </span>
+      </div>
     </div>
   </div>
 </div>
@@ -76,12 +76,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       role="checkbox"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Accounting
-      </span>
+      </div>
     </div>
     <div
       aria-checked="false"
@@ -89,12 +89,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       role="checkbox"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Payroll
-      </span>
+      </div>
     </div>
     <div
       aria-checked="false"
@@ -102,12 +102,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       role="checkbox"
       tabindex="0"
     >
-      <span
+      <div
         aria-hidden="false"
-        class="np-chip-label"
+        class="np-text-body-default-bold"
       >
         Reporting
-      </span>
+      </div>
     </div>
     <div
       aria-checked="true"
@@ -115,20 +115,20 @@ exports[`Chips Filter Chips renders as expected 1`] = `
       role="checkbox"
       tabindex="-1"
     >
-      <span
-        aria-hidden="false"
-        class="np-chip-label"
+      <div
+        aria-hidden="true"
+        class="np-text-body-default-bold"
       >
         Payments
-      </span>
+      </div>
       <button
         aria-label="Clear Payments"
-        class="np-close-button close btn-link text-no-decoration btn-unstyled m-l-1"
+        class="np-close-button close btn-link text-no-decoration btn-unstyled"
         type="button"
       >
         <span
-          class="tw-icon tw-icon-cross "
-          data-testid="cross-icon"
+          class="tw-icon tw-icon-cross-circle-fill "
+          data-testid="cross-circle-fill-icon"
         >
           <svg
             aria-hidden="true"
@@ -140,7 +140,9 @@ exports[`Chips Filter Chips renders as expected 1`] = `
             width="16"
           >
             <path
-              d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
+              clip-rule="evenodd"
+              d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m-4.707-6.707L10.586 12 7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293z"
+              fill-rule="evenodd"
             />
           </svg>
         </span>

package/src/field/Field.css

@@ -1,4 +1,8 @@
-.np-field-control {
+.np-field-control,
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
+.np-field:has(.np-checkbox) label {
+  margin-bottom: 0;
+}

package/src/field/Field.less

@@ -1,5 +1,10 @@
 .np-field {
-  &-control {
-      margin-top: var(--size-4);
+  &-control,
+  &__prompt {
+    margin-top: var(--size-4);
+  }
+
+  &:has(.np-checkbox) label {
+    margin-bottom: 0;
   }
 }

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,15 @@ export const Field = ({
               )}
 
               {message && (
-                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>
+                <InlinePrompt
+                  sentiment={sentiment}
+                  id={messageId}
+                  iconLabel={messageIconLabel}
+                  className="np-field__prompt"
+                  loading={messageLoading}
+                >
                   {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) of [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.
  */
 export default function InlineAlert({
   id,

package/src/main.css

@@ -3822,10 +3822,14 @@ 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:has(.np-checkbox) label {
+  margin-bottom: 0;
+}
 .np-input-group {
   display: inline-grid;
   width: 100%;
@@ -6920,6 +6924,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/progressBar/ProgressBar.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 
 import Body from '../body';
@@ -23,14 +22,10 @@ const ProgressBar = ({
   progress,
   textEnd,
 }: ProgressBarProps) => {
-  const { isModern } = useTheme();
   return (
     <div className={clsx('np-progress-bar', className)}>
       <label className="np-progress-bar__title m-b-1" htmlFor={id}>
-        <Title
-          type={Typography.TITLE_BODY}
-          className={isModern ? `m-b-1 text-primary` : `text-primary`}
-        >
+        <Title type={Typography.TITLE_BODY} className="m-b-1 text-primary">
           {title}
         </Title>
         {description && <Body>{description}</Body>}

package/src/select/Select.tsx

@@ -163,7 +163,6 @@ export default function Select({
   const inputAttributes = useInputAttributes();
 
   const { formatMessage } = useIntl();
-  const { isModern } = useTheme();
   const s = (className: string) => classNamesProp[className] || className;
   const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);
@@ -599,7 +598,7 @@ export default function Select({
           </Drawer>
         ) : (
           <BottomSheet open={open} onClose={handleCloseOptions}>
-            {renderOptionsList({ className: isModern ? '' : 'p-a-1' })}
+            {renderOptionsList()}
           </BottomSheet>
         )
       ) : (

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"

package/src/typeahead/Typeahead.story.tsx

@@ -1,15 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search as SearchIcon } from '@transferwise/icons';
 import { userEvent, within, fn } from 'storybook/test';
-
-import Typeahead, { type TypeaheadOption } from './Typeahead';
-import { Size } from '../common';
 import { useState } from 'react';
+
+import { Sentiment, Size } from '../common';
 import { Input } from '../inputs/Input';
 import { Field } from '../field/Field';
 import Button from '../button';
 import Modal from '../modal';
+import { InlinePromptProps } from '../prompt';
+import Typeahead, { type TypeaheadOption } from './Typeahead';
 
+// needed for SB to display correct name in the docs
+(Typeahead as React.FC).displayName = 'Typeahead';
 type Story = StoryObj<typeof Typeahead>;
 
 /**
@@ -37,6 +40,7 @@ const meta: Meta<typeof Typeahead> = {
     searchDelay: 200,
     showSuggestions: true,
     showNewEntry: true,
+    alert: undefined,
     size: Size.MEDIUM,
     initialValue: [],
     id: 'myTypeahead',
@@ -54,6 +58,17 @@ const meta: Meta<typeof Typeahead> = {
       control: 'inline-radio',
       options: [Size.MEDIUM, Size.LARGE],
     },
+    alert: {
+      description:
+        'Displays an [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) below the input when provided. <blockquote class="m-0">**⚠️ `error`, `info` and `success` are deprecated as alert types and will be soon removed.**</blockquote>',
+      control: 'object',
+      table: {
+        type: {
+          summary:
+            '{ message: ReactNode; type?: "negative" | "neutral" | "positive" | "warning" | "proposition" }',
+        },
+      },
+    },
   },
 };
 export default meta;
@@ -237,6 +252,14 @@ export const Search: Story = {
 };
 
 export const AutoFocusInModal: Story = {
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+  },
   render: function Render() {
     const [open, setOpen] = useState<boolean>(true);
     return (
@@ -279,3 +302,57 @@ export const AutoFocusInModal: Story = {
     );
   },
 };
+
+export const WithPrompt: Story = {
+  args: {
+    autoFillOnBlur: undefined,
+    chipSeparators: undefined,
+    clearable: undefined,
+    initialValue: undefined,
+    inputAutoComplete: undefined,
+    minQueryLength: undefined,
+    onBlur: undefined,
+    onFocus: undefined,
+    onInputChange: undefined,
+    onSearch: undefined,
+    placeholder: undefined,
+    searchDelay: undefined,
+    showSuggestions: undefined,
+    showNewEntry: undefined,
+    size: undefined,
+  },
+  render: function Render(args) {
+    const options = [{ label: 'Option 1' }];
+
+    const alertTypes: InlinePromptProps['sentiment'][] = [
+      Sentiment.NEGATIVE,
+      Sentiment.WARNING,
+      Sentiment.NEUTRAL,
+      Sentiment.POSITIVE,
+      'proposition',
+    ];
+
+    return (
+      <>
+        {alertTypes.map((sentiment) => (
+          <Typeahead
+            key={sentiment}
+            {...args}
+            id={`typeahead-${sentiment}`}
+            name={`typeahead-${sentiment}`}
+            options={options}
+            alert={{
+              message: `This is a ${sentiment} message`,
+              type: sentiment,
+            }}
+          />
+        ))}
+      </>
+    );
+  },
+  decorators: (Story) => (
+    <div className="d-flex flex-column">
+      <Story />
+    </div>
+  ),
+};

package/src/typeahead/Typeahead.tsx

@@ -16,8 +16,7 @@ import {
   removeClickClassFromDocumentOnIos,
   stopPropagation,
 } from '../common';
-import InlineAlert from '../inlineAlert';
-import { InlineAlertProps } from '../inlineAlert/InlineAlert';
+import { InlinePrompt, InlinePromptProps } from '../prompt';
 import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 
 import TypeaheadInput from './typeaheadInput/TypeaheadInput';
@@ -41,8 +40,12 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   name: string;
   addon?: ReactNode;
   alert?: {
-    message: InlineAlertProps['children'];
-    type?: InlineAlertProps['type'];
+    message: InlinePromptProps['children'];
+    type?:
+      | InlinePromptProps['sentiment']
+      | `${Sentiment.ERROR}`
+      | `${Sentiment.INFO}`
+      | `${Sentiment.SUCCESS}`;
   };
   allowNew?: boolean;
   autoFillOnBlur?: boolean;
@@ -474,9 +477,20 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       dropdownOpen,
     });
 
-    const alertType = alert?.type ?? Sentiment.NEUTRAL;
-    const hasError = errorState || (alert && alertType === Sentiment.ERROR);
-    const displayAlert = (!errorState && alert) || (alert && alertType === Sentiment.ERROR);
+    const alertType = (() => {
+      if (!alert?.type || alert.type === Sentiment.INFO) {
+        return Sentiment.NEUTRAL;
+      }
+      if (alert.type === Sentiment.ERROR) {
+        return Sentiment.NEGATIVE;
+      }
+      if (alert.type === Sentiment.SUCCESS) {
+        return Sentiment.POSITIVE;
+      }
+      return alert.type;
+    })();
+    const hasError = errorState || (alert && alertType === Sentiment.NEGATIVE);
+    const displayAlert = (!errorState && alert) || (alert && alertType === Sentiment.NEGATIVE);
     const hasWarning = displayAlert && alertType === Sentiment.WARNING;
     const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return (
@@ -546,7 +560,13 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               </div>
             )}
           </div>
-          {displayAlert ? <InlineAlert type={alert.type}>{alert.message}</InlineAlert> : menu}
+          {displayAlert ? (
+            <InlinePrompt sentiment={alertType} className="typeahead--prompt">
+              {alert.message}
+            </InlinePrompt>
+          ) : (
+            menu
+          )}
         </div>
       </div>
     );

package/src/upload/Upload.story.tsx

@@ -71,7 +71,7 @@ const meta = {
     },
     errorIconLabel: {
       description:
-        "Override for the InlineAlert icon's default, accessible name announced by the screen readers",
+        "Override for the InlinePrompt icon's default, accessible name announced by the screen readers",
     },
     usHelpImage: {
       control: false,