diff --git a/src/components/forms/FileInput/FileInput.stories.tsx b/src/components/forms/FileInput/FileInput.stories.tsx index bd159c195b..794e2e0763 100644 --- a/src/components/forms/FileInput/FileInput.stories.tsx +++ b/src/components/forms/FileInput/FileInput.stories.tsx @@ -158,3 +158,15 @@ export const withRefAndCustomHandlers = ( ) } + +export const customText = (): React.ReactElement => ( + + + + +) diff --git a/src/components/forms/FileInput/FileInput.test.tsx b/src/components/forms/FileInput/FileInput.test.tsx index d882f364d9..c8f16bed28 100644 --- a/src/components/forms/FileInput/FileInput.test.tsx +++ b/src/components/forms/FileInput/FileInput.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { fireEvent, render, screen } from '@testing-library/react' +import { fireEvent, render, screen, within } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { FileInput, FileInputRef } from './FileInput' @@ -91,6 +91,19 @@ describe('FileInput component', () => { jest.restoreAllMocks() }) + it('displays custom text when given', () => { + const customProps = {...testProps, dragText: "Custom dragText", chooseText: "Custom chooseText"} + const { getByTestId } = render() + + const dragText = within(getByTestId('file-input-instructions')).getByText(customProps.dragText) + expect(dragText).toBeInTheDocument() + expect(dragText).toHaveClass('usa-file-input__drag-text') + + const chooseText = within(getByTestId('file-input-instructions')).getByText(customProps.chooseText) + expect(chooseText).toBeInTheDocument() + expect(chooseText).toHaveClass('usa-file-input__choose') + }) + describe('when disabled', () => { const disabledProps = { ...testProps, disabled: true } it('the input element is disabled', () => { diff --git a/src/components/forms/FileInput/FileInput.tsx b/src/components/forms/FileInput/FileInput.tsx index ad0bdbb8ab..478d38c5ce 100644 --- a/src/components/forms/FileInput/FileInput.tsx +++ b/src/components/forms/FileInput/FileInput.tsx @@ -13,6 +13,8 @@ import { makeSafeForID } from './utils' type FileInputProps = { id: string name: string + dragText?: string + chooseText?: string disabled?: boolean multiple?: boolean accept?: string @@ -33,6 +35,8 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction< { name, id, + dragText, + chooseText, disabled, multiple, className, @@ -82,7 +86,8 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction< 'has-invalid-file': showError, }) - const dragText = multiple ? 'Drag files here or ' : 'Drag file here or ' + const defaultDragText = multiple ? 'Drag files here or ' : 'Drag file here or ' + const defaultChooseText = 'choose from folder' const filePreviews = [] if (files) { @@ -189,9 +194,9 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction< className={instructionClasses} aria-hidden="true"> {!hideDragText && ( - {dragText} + {dragText || defaultDragText} )} - choose from folder + {chooseText || defaultChooseText} {filePreviews}