Add custom message to va-file-input and update message in va-file-inp…

…ut-multiple (#1367) * Add custom message to va-file-input and update message in va-file-input-multiple * hide the uploadMessage prop from the properties table in storybook
department-of-veterans-affairs · Oct 16, 2024 · 04b609f · 04b609f
1 parent 14a662b
commit 04b609f
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 6 deletions.
diff --git a/packages/storybook/stories/va-file-input-uswds.stories.jsx b/packages/storybook/stories/va-file-input-uswds.stories.jsx
@@ -16,6 +16,14 @@ export default {
       page: () => <StoryDocs storyDefault={Default} data={fileInputDocs} />,
     },
   },
+  argTypes: {
+    // hide the uploadMessage prop from the properties table in storybook
+    uploadMessage: {
+      table: {
+        disable: true
+      }
+    }
+  }
 };
 
 const defaultArgs = {

diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -536,6 +536,10 @@ export namespace Components {
           * Sets the input to required and renders the (*Required) text.
          */
         "required"?: boolean;
+        /**
+          * Custom instructional message in the file input.
+         */
+        "uploadMessage"?: HTMLElement;
     }
     /**
      * A component that manages multiple file inputs, allowing users to upload several files.
@@ -3575,6 +3579,10 @@ declare namespace LocalJSX {
           * Sets the input to required and renders the (*Required) text.
          */
         "required"?: boolean;
+        /**
+          * Custom instructional message in the file input.
+         */
+        "uploadMessage"?: HTMLElement;
     }
     /**
      * A component that manages multiple file inputs, allowing users to upload several files.

diff --git a/...s/web-components/src/components/va-file-input-multiple/test/va-file-input-multiple.e2e.ts b/...s/web-components/src/components/va-file-input-multiple/test/va-file-input-multiple.e2e.ts
@@ -19,6 +19,28 @@ describe('va-file-input-multiple', () => {
     expect(singleElement).not.toBeNull();
   });
 
+  it('renders the file input upload messages correctly', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<va-file-input-multiple />`);
+
+    const fileInput = await page.find('va-file-input-multiple >>> va-file-input >>> .file-input-instructions');
+    expect(fileInput.innerHTML).toContain(`<span>Drag a file here or <span class="file-input-choose-text">choose from folder</span></span>`);
+
+    const filePath = path.relative(process.cwd(), __dirname + '/1x1.png');
+
+    const input = await page.$('pierce/#fileInputField') as ElementHandle<HTMLInputElement>;
+    expect(input).not.toBeNull();
+
+    await input
+      .uploadFile(filePath)
+      .catch(e => console.log('uploadFile error', e));
+
+    await page.waitForChanges();
+
+    const secondFileInput = await page.find('va-file-input-multiple >>> va-file-input:last-child >>> .file-input-instructions');
+    expect(secondFileInput.innerHTML).toContain(`<span>Drag an additional file here or <span class="file-input-choose-text">choose from folder</span></span>`);
+  });
+
   it('renders hint text', async () => {
     const page = await newE2EPage();
     await page.setContent('<va-file-input-multiple hint="This is hint text" />');

diff --git a/packages/web-components/src/components/va-file-input-multiple/va-file-input-multiple.tsx b/packages/web-components/src/components/va-file-input-multiple/va-file-input-multiple.tsx
@@ -84,6 +84,15 @@ export class VaFileInputMultiple {
   private fileKeyCounter: number = 0;
   private additionalSlot = null;
 
+  private additionalFileUploadMessage = (
+    <span>
+       Drag an additional file here or{' '}
+      <span class="file-input-choose-text">
+        choose from folder
+      </span>
+    </span>
+  )
+
   /**
    * Finds a file entry by its unique key.
    * @param {number} fileKey - The unique key of the file.
@@ -272,6 +281,8 @@ export class VaFileInputMultiple {
                 name={`${name}-${fileEntry.key}`}
                 accept={accept}
                 required={required}
+                // only add custom upload message after the first file input
+                {... pageIndex > 0 ? {uploadMessage: this.additionalFileUploadMessage} : {}}
                 error={errors[pageIndex]}
                 onVaChange={event =>
                   this.handleChange(event, fileEntry.key, pageIndex)

diff --git a/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts b/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts
@@ -53,6 +53,30 @@ describe('va-file-input', () => {
     expect(fileInput.getAttribute('accept')).toBeFalsy();
   });
 
+  it('the `uploadMessage` attribute changes the text in file input', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`<va-file-input />`);
+
+    await page.$eval('va-file-input', (elm: any) => {
+      // within the browser's context
+      // let's set new property values on the component
+      elm.uploadMessage = "Test text";
+    });
+    await page.waitForChanges();
+
+    const fileInput = await page.find('va-file-input >>> .file-input-instructions');
+    expect(fileInput.innerHTML).toContain(`Test text`);
+ });
+
+  it('the component shows default text when `uploadMessage` is not set', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<va-file-input />`);
+
+    const fileInput = await page.find('va-file-input >>> .file-input-instructions');
+    expect(fileInput.innerHTML).toContain(`<span>Drag a file here or <span class="file-input-choose-text">choose from folder</span></span>`);
+  });
+
   it('emits the vaChange event only once', async () => {
     const page = await newE2EPage();
     await page.setContent(`<va-file-input buttonText="Upload a file" />`);

diff --git a/packages/web-components/src/components/va-file-input/va-file-input.tsx b/packages/web-components/src/components/va-file-input/va-file-input.tsx
@@ -72,6 +72,17 @@ export class VaFileInput {
    */
   @Prop() hint?: string;
 
+  /**
+   * Custom instructional message in the file input.
+   */
+  @Prop() uploadMessage?: HTMLElement = 
+  <span>
+    Drag a file here or{' '}
+    <span class="file-input-choose-text">
+      choose from folder
+    </span>
+  </span>;
+
   /**
    * Emit component-library-analytics events on the file input change event.
    */
@@ -413,12 +424,7 @@ export class VaFileInput {
               <div class={fileInputTargetClasses}>
                 <div class="file-input-box"></div>
                 <div class="file-input-instructions">
-                  <span class="file-input-drag-text">
-                    Drag files here or{' '}
-                  </span>
-                  <span class="file-input-choose-text">
-                    choose from folder
-                  </span>
+                  {this.uploadMessage}
                 </div>
               </div>
             </div>