@transferwise/components 46.74.1 → 46.76.0

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

@@ -14,6 +14,7 @@ export interface UploadImageStepProps {
   usLabel: string;
   usPlaceholder: string;
   errorMessage?: string | string[];
+  errorIconLabel?: string;
 }
 
 export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
@@ -34,7 +35,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     if (errorMessage) {
       return (
         <div className="d-flex flex-column align-items-center">
-          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
+          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />
         </div>
       );
     }
@@ -55,8 +56,16 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
   };
 
   render() {
-    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =
-      this.props;
+    const {
+      errorMessage,
+      isComplete,
+      errorIconLabel,
+      usAccept,
+      usButtonText,
+      usDisabled,
+      usLabel,
+      usPlaceholder,
+    } = this.props;
 
     return (
       <div className="droppable-default-card" aria-hidden={isComplete}>
@@ -88,7 +97,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}>{errorMessage}</InlineAlert>
+                <InlineAlert type={Sentiment.NEGATIVE} iconLabel={errorIconLabel}>
+                  {errorMessage}
+                </InlineAlert>
               </div>
             </div>
           )}