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

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,9 @@ 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} iconLabel={errorIconLabel}>
                   {errorMessage}
-                </InlineAlert>
+                </InlinePrompt>
               </div>
             </div>
           )}