@transferwise/components 0.0.0-experimental-1d00fb5 → 0.0.0-experimental-d44dcb8

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">**⚠️ DEPRECATED:** Please use [&lt;Field />](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead. `error`, `info` and `success` alert types are no longer supported 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,128 @@ export const AutoFocusInModal: Story = {
     );
   },
 };
+
+export const WithField: 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 (
+      <>
+        <Field
+          id="typeahead"
+          label="Field label"
+          description="Additional information about the field"
+          required
+        >
+          <Typeahead {...args} name="typeahead" options={options} />
+        </Field>
+        {alertTypes.map((sentiment) => (
+          <Field
+            key={sentiment}
+            label="Field label"
+            id={`typeahead-${sentiment}`}
+            message={`This is a ${sentiment} message`}
+            sentiment={sentiment}
+          >
+            <Typeahead {...args} name={`typeahead-${sentiment}`} options={options} />
+          </Field>
+        ))}
+      </>
+    );
+  },
+  decorators: (Story) => (
+    <div className="d-flex flex-column">
+      <Story />
+    </div>
+  ),
+};
+
+/**
+ * > Please use [&lt;Field />](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead. <br/>`error`, `info` and `success` alert types are no longer supported and will be soon removed.**
+ */
+export const WithAlert: Story = {
+  name: 'With Alert (deprecated)',
+  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,
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  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';
@@ -40,9 +39,17 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   id: string;
   name: string;
   addon?: ReactNode;
+  /**
+   * @deprecated Please use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
+   * @deprecated `error`, `info` and `success` are deprecated as alert types and will be soon removed.
+   */
   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 +481,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 (
@@ -494,7 +512,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         onClick={stopPropagation}
       >
         <div
-          className={clsx('form-group', {
+          className={clsx('form-group', 'form-group--typeahead', {
             'has-error': hasError,
             'has-warning': hasWarning,
             'has-info': hasInfo,
@@ -546,7 +564,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" width="full">
+              {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,

package/src/upload/Upload.tests.story.tsx

@@ -1,4 +1,5 @@
-import type { Meta } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, waitFor } from 'storybook/test';
 
 import Upload from '.';
 import { Field } from '../field/Field';
@@ -73,6 +74,40 @@ export const MaxSizes = () => {
   );
 };
 
+export const WithError: StoryObj<typeof meta> = {
+  render: () => (
+    <Field label="Upload a file">
+      <Upload
+        usAccept="*"
+        usLabel="Upload a file"
+        usPlaceholder="Maximum filesize is 1B"
+        usDisabled={false}
+        maxSize={1}
+        errorIconLabel="File too large error"
+        httpOptions={{
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+        }}
+      />
+    </Field>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const fileInput = canvasElement.querySelector<HTMLInputElement>('input[type="file"]');
+
+    if (!fileInput) {
+      throw new Error('File input not found');
+    }
+
+    const file = new File(['This file content is definitely more than 1 byte'], 'test-file.txt', {
+      type: 'text/plain',
+    });
+
+    await userEvent.upload(fileInput, file);
+    await waitFor(async () => canvas.findByText(/Maximum filesize is/i), { timeout: 3000 });
+  },
+};
+
 export const AllVariants = () => {
   return (
     <div style={{ display: 'flex', gap: '1rem' }}>

package/src/upload/Upload.tsx

@@ -55,7 +55,7 @@ export interface UploadProps extends WrappedComponentProps {
   usLabel?: string;
   usPlaceholder?: string;
   /**
-   * 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
    * */
   errorIconLabel?: string;

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -2,7 +2,7 @@ import { Upload as UploadIcon } from '@transferwise/icons';
 import { createRef, PureComponent } from 'react';
 import StatusIcon from '../../../statusIcon';
 import { Sentiment, Size } from '../../../common';
-import InlineAlert from '../../../inlineAlert';
+import { InlinePrompt } from '../../../prompt/InlinePrompt/InlinePrompt';
 
 export interface UploadImageStepProps {
   fileDropped: (file: File) => void;
@@ -105,9 +105,13 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
           {errorMessage && (
             <div className="upload-error-message">
               <div className="m-t-3 has-error">
-                <InlineAlert type={Sentiment.NEGATIVE} iconLabel={errorIconLabel}>
+                <InlinePrompt
+                  sentiment={Sentiment.NEGATIVE}
+                  mediaLabel={errorIconLabel}
+                  width="full"
+                >
                   {errorMessage}
-                </InlineAlert>
+                </InlinePrompt>
               </div>
             </div>
           )}