Replace table with va-table web component

[nickjg231]

Summary

• Replace <table> with <va-table> in the table.drupal.liquid file.

Tested manually using the page found at /housing-assistance/home-loans/funding-fee-and-closing-costs/

Some things to note:

• va-table applies its own classes, so some of the columns are right-aligned as you'll see in the screenshots.

Related issue(s)

closes department-of-veterans-affairs/vets-design-system-documentation#2217

Testing done

• Manually tested in Firefox

Screenshots

Desktop screen changes

before:

after:

Mobile screen changes

before:

after:

What areas of the site does it impact?

(Describe what parts of the site are impacted if code touched other areas)

Acceptance criteria

• Places with <table> are replaced properly with <va-table> and <va-table-row>
• Updated files still work with web-components

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

⚠️ Team Sites (only applies to modifications made to the VA.gov header) ⚠️

• The header does not contain any web-components
• I used the proxy-rewrite steps to test the injected header scenario
• I reached out in the #sitewide-public-websites Slack channel for questions

Requested Feedback

(OPTIONAL) What should the reviewers know in addition to the above. Is there anything specific you wish the reviewer to assist with. Do you have any concerns with this PR, why?

[micahchiang]

I'm not sure how, but --- was being rendered to fields that came through as empty or null, so I've added a check here and just render a span with some whitespace if the value is null.

[jamigibbs]

This is a default behavior of the web component for handling missing data: https://design.va.gov/storybook/?path=/docs/components-va-table--missing-data

[va-vfs-bot]

ESLint is disabled

vets-website uses ESLint to help enforce code quality. In most situations we would like ESLint to remain enabled.

What you can do

See if the code can be refactored to avoid disabling ESLint, or wait for a VSP review.

[tjheffner]

The code changes LGTM, just want to confirm that the visual changes are expected / desired. No more borders around non-table-header cells, and the text-alignment feels different

The lack of borders appears consistent with: https://design.va.gov/storybook/?path=/docs/components-va-table--missing-data but I'm not as sure about the alignment?

[jamigibbs]

The lack of borders appears consistent with: https://design.va.gov/storybook/?path=/docs/components-va-table--missing-data but I'm not as sure about the alignment?

@tjheffner Thanks for the review! Yes, the alignment is expected with the web component. We have an outstanding issue in our backlog to clarify this in our documentation: department-of-veterans-affairs/vets-design-system-documentation#1871