From 42da85d7c7576c5ec408ca336edd4c2e32aa647b Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Mon, 10 Jul 2023 19:09:22 -0700
Subject: [PATCH] fix: added error param, test, story (#2488)

---
 .../forms/FileInput/FileInput.stories.tsx          |  2 ++
 src/components/forms/FileInput/FileInput.test.tsx  | 14 ++++++++++++++
 src/components/forms/FileInput/FileInput.tsx       |  5 ++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/FileInput/FileInput.stories.tsx b/src/components/forms/FileInput/FileInput.stories.tsx
index ada3499feb..65eca5ed14 100644
--- a/src/components/forms/FileInput/FileInput.stories.tsx
+++ b/src/components/forms/FileInput/FileInput.stories.tsx
@@ -167,6 +167,8 @@ export const customText = (): React.ReactElement => (
       name="file-input-single"
       dragText="Arrastre el archivo aquí o "
       chooseText="elija de una carpeta"
+      errorText="Este no es un tipo de archivo válido."
+      accept=".no"
     />
   </FormGroup>
 )
diff --git a/src/components/forms/FileInput/FileInput.test.tsx b/src/components/forms/FileInput/FileInput.test.tsx
index 2874d7c154..098dc25af3 100644
--- a/src/components/forms/FileInput/FileInput.test.tsx
+++ b/src/components/forms/FileInput/FileInput.test.tsx
@@ -96,6 +96,8 @@ describe('FileInput component', () => {
       ...testProps,
       dragText: 'Custom dragText',
       chooseText: 'Custom chooseText',
+      errorText: 'Custom errorText',
+      accept: '.no',
     }
     const { getByTestId } = render(<FileInput {...customProps} />)
 
@@ -110,6 +112,18 @@ describe('FileInput component', () => {
     )
     expect(chooseText).toBeInTheDocument()
     expect(chooseText).toHaveClass('usa-file-input__choose')
+
+    const targetEl = getByTestId('file-input-droptarget')
+    fireEvent.drop(targetEl, {
+      dataTransfer: {
+        files: [TEST_PNG_FILE],
+      },
+    })
+    const errorText = within(getByTestId('file-input-error')).getByText(
+      customProps.errorText
+    )
+    expect(errorText).toBeInTheDocument()
+    expect(errorText).toHaveClass('usa-file-input__accepted-files-message')
   })
 
   describe('when disabled', () => {
diff --git a/src/components/forms/FileInput/FileInput.tsx b/src/components/forms/FileInput/FileInput.tsx
index 3e281215fe..589740f07c 100644
--- a/src/components/forms/FileInput/FileInput.tsx
+++ b/src/components/forms/FileInput/FileInput.tsx
@@ -15,6 +15,7 @@ type FileInputProps = {
   name: string
   dragText?: string
   chooseText?: string
+  errorText?: string
   disabled?: boolean
   multiple?: boolean
   accept?: string
@@ -37,6 +38,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     id,
     dragText,
     chooseText,
+    errorText,
     disabled,
     multiple,
     className,
@@ -90,6 +92,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     ? 'Drag files here or '
     : 'Drag file here or '
   const defaultChooseText = 'choose from folder'
+  const defaultErrorText = 'This is not a valid file type.'
 
   const filePreviews = []
   if (files) {
@@ -210,7 +213,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
           <div
             data-testid="file-input-error"
             className="usa-file-input__accepted-files-message">
-            This is not a valid file type.
+            {errorText || defaultErrorText}
           </div>
         )}
         <input