Skip to content

Commit

Permalink
va-file-input-multiple: allow for slots to be conditionally rendered …
Browse files Browse the repository at this point in the history 
…on file inputs (#1458)

* va-file-input-multiple: allow for slots to be conditionally rendered on file inputs

* refactor to array includes
  • Loading branch information
@powellkerry
powellkerry authored Jan 16, 2025
1 parent 0fc8fc8 commit 3fc72d4
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 2 deletions.
70 changes: 69 additions & 1 deletion packages/storybook/stories/va-file-input-multiple-uswds.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import testImage from './images/search-bar.png';
VaFileInputMultiple.displayName = 'VaFileInputMultiple';

const fileInputMultipleDocs = getWebComponentDocs('va-file-input-multiple');

export default {
title: 'Components/File input multiple USWDS',
id: 'uswds/va-file-input-multiple',
Expand All @@ -33,6 +32,7 @@ const defaultArgs = {
'children': null,
'value': null,
'read-only': false,
'slotFieldIndexes': null
};

const Template = ({
Expand All @@ -48,6 +48,7 @@ const Template = ({
value,
readOnly,
children,
slotFieldIndexes,
}) => {
return (
<VaFileInputMultiple
Expand All @@ -63,6 +64,7 @@ const Template = ({
value={value}
read-only={readOnly}
children={children}
slot-field-indexes={slotFieldIndexes}
/>
);
};
Expand Down Expand Up @@ -106,6 +108,7 @@ const AdditionalFormInputsContentTemplate = ({
'enable-analytics': enableAnalytics,
vaMultipleChange,
headerSize,
slotFieldIndexes,
children,
}) => {
return (
Expand All @@ -119,6 +122,7 @@ const AdditionalFormInputsContentTemplate = ({
hint={hint}
enable-analytics={enableAnalytics}
onVaMultipleChange={vaMultipleChange}
slot-field-indexes={slotFieldIndexes}
header-size={headerSize}
>
{children}
Expand Down Expand Up @@ -163,6 +167,70 @@ AdditionalFormInputs.args = {
children: additionalFormInputsContent,
};


const AdditionalFormInputsOnSpecificFieldsContentTemplate = ({
label,
name,
accept,
errors,
required,
hint,
'enable-analytics': enableAnalytics,
vaMultipleChange,
headerSize,
slotFieldIndexes,
children,
}) => {
return (
<>
<VaFileInputMultiple
label={label}
name={name}
accept={accept}
required={required}
errors={errors}
hint={hint}
enable-analytics={enableAnalytics}
onVaMultipleChange={vaMultipleChange}
slotFieldIndexes={slotFieldIndexes}
header-size={headerSize}
>
{children}
</VaFileInputMultiple>
<hr />
<div>
<p>This example showcases how to only render additional content for specific file input fields.</p>
</div>
<div className="vads-u-margin-top--2">
<pre className="vads-u-font-size--sm vads-u-background-color--gray-lightest vads-u-padding--2">
<code>
{`const additionalFormInputsContent = (
<div>
<va-select label='What kind of file is this?' required>
<option key="1" value="1">Public Document</option>
<option key="2" value="2">Private Document</option>
</va-select>
</div>
);
<VaFileInputMultiple slot-field-indexes="[1,3]" ... >
{additionalFormInputsContent}
</VaFileInputMultiple>`}
</code>
</pre>
</div>
</>
);
};

export const AdditionalFormInputsOnSpecificFields = AdditionalFormInputsOnSpecificFieldsContentTemplate.bind(null);
AdditionalFormInputsOnSpecificFields.args = {
...defaultArgs,
label: 'Additional Form Inputs On Specific Inputs',
children: additionalFormInputsContent,
slotFieldIndexes: '[1,3]'
};

const ErrorsTemplate = ({ label, name, hint }) => {
const [errorsList, setErrorsList] = useState([]);

Expand Down
8 changes: 8 additions & 0 deletions packages/web-components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -681,6 +681,10 @@ export namespace Components {
* If true, the file input is marked as required, and users must select a file.
*/
"required"?: boolean;
/**
* Optional, shows the additional info slot content only for indexes of file inputs provided. Defaults to `null` (show on all fields). ex: [1,3]
*/
"slotFieldIndexes"?: Number[];
/**
* The value attribute for the file view element.
*/
Expand Down Expand Up @@ -3990,6 +3994,10 @@ declare namespace LocalJSX {
* If true, the file input is marked as required, and users must select a file.
*/
"required"?: boolean;
/**
* Optional, shows the additional info slot content only for indexes of file inputs provided. Defaults to `null` (show on all fields). ex: [1,3]
*/
"slotFieldIndexes"?: Number[];
/**
* The value attribute for the file view element.
*/
Expand Down
67 changes: 67 additions & 0 deletions ...s/web-components/src/components/va-file-input-multiple/test/va-file-input-multiple.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,73 @@ describe('va-file-input-multiple', () => {
expect(secondFileInput.innerHTML).toContain(`<span>Drag an additional file here or <span class="file-input-choose-text">choose from folder</span></span>`);
});

it('renders the file input additional info slot when slot-field-indexes is null', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input-multiple><span class="additional_info">additional info</span></va-file-input-multiple>`);

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 additionalInfo = await page.find('va-file-input-multiple >>> va-file-input span.additional_info');
expect(additionalInfo.textContent).toEqual('additional info');
});

it('renders the file input additional info slot only for indexes in slot-field-indexes', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input-multiple slot-field-indexes="[1,2]"><span class="additional_info">additional info</span></va-file-input-multiple>`);

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 additionalInfo = await page.find('va-file-input-multiple >>> va-file-input span.additional_info');
expect(additionalInfo).toBeNull;

let inputs = await page.$$('pierce/#fileInputField');
const input2 = inputs[1] as ElementHandle<HTMLInputElement>;
expect(inputs).not.toBeNull();
expect(input2).not.toBeNull();
await input2
.uploadFile(filePath)
.catch(e => console.log('uploadFile error', e));

await page.waitForChanges();

let inputEls= await page.findAll('va-file-input-multiple >>> va-file-input');
const additionalInfo2 = await inputEls[1].find('span.additional_info');
expect(additionalInfo2.textContent).toEqual('additional info');


inputs = await page.$$('pierce/#fileInputField');
const input3 = inputs[2] as ElementHandle<HTMLInputElement>;
expect(inputs).not.toBeNull();
expect(input3).not.toBeNull();
await input3
.uploadFile(filePath)
.catch(e => console.log('uploadFile error', e));

await page.waitForChanges();

inputEls= await page.findAll('va-file-input-multiple >>> va-file-input');
const additionalInfo3 = await inputEls[2].find('span.additional_info');
expect(additionalInfo3.textContent).toEqual('additional info');
});

it('renders hint text', async () => {
const page = await newE2EPage();
await page.setContent('<va-file-input-multiple hint="This is hint text" />');
Expand Down
9 changes: 8 additions & 1 deletion packages/web-components/src/components/va-file-input-multiple/va-file-input-multiple.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ export class VaFileInputMultiple {
*/
@Prop() readOnly?: boolean = false;

/**
* Optional, shows the additional info slot content only for indexes of file inputs provided. Defaults to `null` (show on all fields). ex: [1,3]
*/
@Prop() slotFieldIndexes?: Number[] = null;

/**
* Event emitted when any change to the file inputs occurs.
* Sends back an array of FileDetails
Expand Down Expand Up @@ -302,7 +307,9 @@ export class VaFileInputMultiple {
const theFileInputs = this.el.shadowRoot.querySelectorAll(`va-file-input`);
this.setSlotContent();
theFileInputs.forEach((fileEntry, index) => {
if (this.files[index].content) {
if (this.files[index].content &&
(!this.slotFieldIndexes || this.slotFieldIndexes.includes(index))
) {
this.files[index].content.forEach(node => fileEntry.append(node));
}
});
Expand Down

0 comments on commit 3fc72d4

Please sign in to comment.