feat: add optional change/selected text to FileInput

src/components/forms/FileInput/FileInput.stories.tsx

@@ -65,6 +65,9 @@ export const AcceptImages = (): JSX.Element => (
       name="file-input-wildcard"
       accept="image/*"
       aria-describedby="file-input-wildcard-hint"
+      previewSingleSelectedFileText="Selected photo"
+      previewMultipleSelectedFileText="Photos selected"
+      changeSelectedFileText="Change photo"
       multiple
     />
   </FormGroup>

src/components/forms/FileInput/FileInput.test.tsx

@@ -171,6 +171,23 @@ describe('FileInput component', () => {
       expect(previewHeading).toHaveTextContent('Selected file Change file')
     })
 
+    it('renders a custom header text when a single file is chosen', async () => {
+      const { getByTestId } = render(
+        <FileInput
+          {...testProps}
+          previewSingleSelectedFileText="Selected photo"
+          previewMultipleSelectedFileText="Photos selected"
+          changeSelectedFileText="Change photo"
+        />
+      )
+      const inputEl = getByTestId('file-input-input')
+      await userEvent.upload(inputEl, TEST_PNG_FILE)
+      expect(getByTestId('file-input-preview')).toBeInTheDocument()
+      expect(getByTestId('file-input-instructions')).toHaveClass('display-none')
+      const previewHeading = getByTestId('file-input-preview-heading')
+      expect(previewHeading).toHaveTextContent('Selected photo Change photo')
+    })
+
     it('renders a preview for each file and header text when multiple files are chosen', async () => {
       const { getByTestId, getAllByTestId } = render(
         <FileInput {...testProps} multiple={true} />

src/components/forms/FileInput/FileInput.tsx

@@ -17,6 +17,9 @@ export type FileInputProps = {
   dragText?: string
   chooseText?: string
   errorText?: string
+  previewSingleSelectedFileText?: string
+  previewMultipleSelectedFileText?: string
+  changeSelectedFileText?: string
   disabled?: boolean
   multiple?: boolean
   accept?: string
@@ -40,6 +43,9 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     dragText,
     chooseText,
     errorText,
+    previewSingleSelectedFileText,
+    previewMultipleSelectedFileText,
+    changeSelectedFileText,
     disabled,
     multiple,
     className,
@@ -94,6 +100,9 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     : 'Drag file here or '
   const defaultChooseText = 'choose from folder'
   const defaultErrorText = 'This is not a valid file type.'
+  const defaultSingleSelectedFileText = 'Selected file'
+  const defaultMultipleSelectedFileText = ' files selected'
+  const defaultChangeSelectedFileText = 'Change file'
 
   const filePreviews = []
   if (files) {
@@ -116,8 +125,10 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
 
   const previewHeaderText =
     filePreviews.length > 1
-      ? `${filePreviews.length} files selected`
-      : 'Selected file'
+      ? previewMultipleSelectedFileText
+        ? `${filePreviews.length} ${previewMultipleSelectedFileText}`
+        : `${filePreviews.length} ${defaultMultipleSelectedFileText}`
+      : previewSingleSelectedFileText || defaultSingleSelectedFileText
 
   const preventInvalidFiles = (e: React.DragEvent): void => {
     setShowError(false)
@@ -191,7 +202,9 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
             className="usa-file-input__preview-heading">
             {previewHeaderText}{' '}
             <span className="usa-file-input__choose">
-              Change file{filePreviews.length > 1 && 's'}
+              {changeSelectedFileText
+                ? `${changeSelectedFileText}${filePreviews.length > 1 && 's'}`
+                : `${defaultChangeSelectedFileText}${filePreviews.length > 1 && 's'}`}
             </span>
           </div>
         )}