Formation Deprecation - set uswds prop to true on all components

[micahchiang]

Description

On February 16, the design system team will be switching all web components to render their v3 variants by default. For a time, teams will still be able to opt out of v3 if they have a need to do so.

Considerations

• 2399 is in preparation for this. That ticket will compile a list of all potential tests in vets-website effected by this change.

Tasks

• Set the uswds prop to true on all web components that have a v3 variant
• Move list of uswds components to the top in storybook

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

[caw310]

This is planned for sprint 46 but work is starting in sprint 45.

[caw310]

Merge work in 2399 into this ticket. #2399

[it-harrison]

Process

Set uswds prop to have a default value of true in all components with a v3 variant. Then, using verdaccio, install in vets-website. Run unit tests and cypress tests and compare results with those obtained from running vets-website with currently published version of web-components.

PR

The PR for the changes to component-library is here. Heads up - there are many files changed because all test specs and stories had to be updated, as well as components. If necessary the PR could be broken up.

Unit tests

There were no differences in unit test failures when using the same CHOMA_SEED

Cypress tests:

The following specs had failures only when running the tests with v3 default components:

appeals

• 995/tests/995-subtask.cypress.spec.js
• 995/tests/995-supplemental-claim.cypress.spec.js

care-givers

• tests/e2e/1010cg.cypress.spec.js

check-in

• day-of/tests/e2e/translation/validate-veteran-page-is-translated.cypress.spec.js

claims-status

• 00.claims-list-empty.cypress.spec.js
• 00.claims-list.cypress.spec.js
• 01.claim-status-decision.cypress.spec.js
• 01.claim-status.cypress.spec.js
• 02.claim-files.cypress.spec.js
• 03.claim-details.cypress.spec.js
• 04.claim-ask-va.cypress.spec.js
• 05.claim-additional-evidence.cypress.spec.js
• 05.claim-document-request.cypress.spec.js
• 08.claim-letters-keyboard-only.cypress.spec.js
• 08.claim-letters.cypress.spec.js

disability-benefits

• view-payments/tests/e2e/view-payments.cypress.spec.js

edu-benefits

• feedback-tool/tests/00.feedback-tool.cypress.spec.js

ezr

• ezr-dependents.cypress.spec.js
• ezr/tests/e2e/ezr-insurance.cypress
• ezr/tests/e2e/ezr-noFinancials.cypress.spec.js
• ezr.cypress.spec.js

facility-locator

• facility-locator/tests/e2e/facilitySearch.cypress.spec.js

financial-status-report

• financial-status-report/tests/e2e/efsr-5655.cypress.spec.js
• financial-status-report/tests/e2e/fsr-5655-streamlined-waiver-long.cypress.spec.js
• financial-status-report/tests/e2e/fsr-5655-streamlined-waiver-short.cypress.spec.js
• financial-status-report/tests/e2e/fsr-5655-wizard.cypress.spec.js
• financial-status-report/tests/e2e/fsr-5655.cypress.spec.js
• financial-status-report/tests/e2e/streamlined-waiver-long.cypress.spec.js
• financial-status-report/tests/e2e/streamlined-waiver-short.cypress.spec.js

find-forms

• find-forms/tests/e2e/find-forms-required.cypress.spec.js

hca

• hca/tests/e2e/hca-household.cypress.spec.js
• hca/tests/e2e/hca-shortform.cypress.spec.js
• hca/tests/e2e/hca.cypress.spec.js

income-limits

• income-limits/tests/cypress/form-validation.cypress.spec.js

lgy

• lgy/coe/status/tests/DocumentUploader.cypress.spec.js

mhv

• mhv/medical-records/tests/e2e/medical-records-view-vitals-details.cypress.spec.js
• mhv/medications/tests/e2e/medications-breadcrumbs-details-page.cypress.spec.js
• mhv/medications/tests/e2e/medications-pagination-details-page.cypress.spec.js
• mhv/medications/tests/e2e/medications-questions-about-this-tool-accordion-landing-page.cypress.spec.js
• mhv/medications/tests/e2e/medications-sort-alphabetically-by-name-list-page.cypress.spec.js
• mhv/medications/tests/e2e/medications-sort-prescriptions-list-page.cypress.spec.js
• mhv/medications/tests/e2e/medications-validate-breadcrumb-list-page-navigation.cypress.spec.js
• mhv/medications/tests/e2e/medications-validate-browser-back-button.cypress.spec.js
• mhv/medications/tests/e2e/medicatios-validate-more-ways-to-manage-accordions-on-landing-page.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-back-navigation.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-compose-clickable-URL.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-compose-empty-subject-body.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-compose-no-provider.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-compose-recipients-dropdown.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-compose-reply-with-attachment-errors-1.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-compose-reply-with-attachment-errors-2.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-compose-reply-with-attachment.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-compose.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-cross-site-scripting.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-custom-folder.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-delete-draft-from-create-message.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-folders.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-inbox-user-navigation.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-message-categories-1.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-message-categories-2.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-message-details-button-check.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-navigate-away-from-compose-message-modal.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-navigate-away-from-unsaved-reply-draft.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-print-messages.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-sent-folder.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-trash-folder.cypress.spec.js
• mhv/secure-messaging/tests/e2e/secure-messaging-verify-data-when-cancel-navigate-away.cypress.spec.js
• mhv/secure-messaging/tests/e2e/draft-page-test/secure-messaging-multiple-drafts-resave.cypress.spec.js
• mhv/secure-messaging/tests/e2e/keyboard-nav-test/secure-messaging-compose-error-message-keyboard-nav.cypress.spec.js
• mhv/secure-messaging/tests/e2e/keyboard-nav-test/secure-messaging-compose-keyboard-nav-send.cypress.spec.js
• mhv/secure-messaging/tests/e2e/keyboard-nav-test/secure-messaging-compose-keyboard-nav.cypress.spec.js
• mhv/secure-messaging/tests/e2e/keyboard-nav-test/secure-messaging-keyboard-nav-save-draft.cypress.spec.js
• mhv/secure-messaging/tests/e2e/keyboard-nav-test/secure-messaging-keyboard-nav-to-attachments-compose-page.cypress.spec.js
• mhv/secure-messaging/tests/e2e/sort-filter-testsecure-messaging-advanced-search.cypress.spec.js
• mhv/secure-messaging/tests/e2e/sort-filter-testsecure-messaging-draft-folder-filter-sort.cypress.spec.js
• mhv/secure-messaging/tests/e2e/sort-filter-testsecure-messaging-filter-inbox-folder.cypress.spec.js
• mhv/secure-messaging/tests/e2e/triage-team-tests/secure-messaging-thread-blocked-from-facility.cypress.spec.js
• mhv/secure-messaging/tests/e2e/triage-team-tests/secure-messaging-thread-blocked-from-particular-group.cypress.spec.js
• mhv/secure-messaging/tests/e2e/triage-team-testssecure-messaging-thread-no-association.cypress.spec.js

pensions

• pensions/tests/e2e/pensions.cypress.spec.js

personalization

• profile/tests/e2e/contact-information/home-address-modal.cypress.spec.js
• profile/tests/e2e/contact-information/mailing-address.cypress.spec.js
• profile/tests/e2e/contact-information/modals.cypress.s pec.js
• profile/tests/e2e/edit/edit.cypress.spec.js
• profile/tests/e2e/personal-information/personal-info-gender-identity.cypress.spec.js
• profile/tests/e2e/personal-information/personal-info-preferred-name.cypress.spec.js

pre-need

• tests/preneed-required-fields.cypress.spec.js
• tests/preneed-sponsor-workflow.cypress.spec.js
• tests/preneed-veteran-workflow.cypress.spec.js

simple-forms

• simple-forms/20-10206/tests/e2e/10206-pa.cypress.spec.js
• simple-forms/21-0845/tests/e2e/0845-auth-disclose.cypress.spec.js
• simple-forms/21-0966/tests/e2e/21-0966-intent-to-file-a-claim.cypress.spec.js
• simple-forms/21-4142/tests/e2e/4142-medial-release.cypress.spec.js
• simple-forms/21-10210/tests/e2e/10210-lay-witness-statement.cypress.spec.js
• simple-forms/21-0972/tests/e2e/21-0972-alternate-signer.cypress.spec.js
• simple-forms/21P-0847/tests/e2e/21P-0847-substitute-claimant.cypress.spec.js
• simple-forms/26-4555/tests/e2e/4555-adapted-housing.cypress.spec.js
• simple-forms/40-0247/tests/e2e/0247-pmc.cypress.spec.js

vaos

• vaos/tests/e2e/workflows/appointment-list-workflow/past-appointments.cypress.spec.js
• vaos/tests/e2e/workflows/appointment-list-workflow/upcoming-appointments.cypress.spec.js

Breadcrumbs

The following files contain components within the va-breadcrumb element. These instances need to either not use the v3 version or else add react router support.

applications/claims-status/components/ClaimsBreadcrumbs.jsx
applications/combined-debt-portal/debt-letters/containers/DebtDetails.jsx
applications/combined-debt-portal/debt-letters/containers/DebtLettersDownload.jsx
applications/combined-debt-portal/debt-letters/containers/DebtLettersSummary.jsx
applications/facility-locator/containers/FacilityLocatorApp.jsx
applications/mhv/secure-messaging/components/shared/SmBreadcrumbs.jsx
applications/vaos/components/Breadcrumbs.jsx
applications/gi/components/GiBillBreadcrumbs.jsx
applications/mhv/medications/containers/RxBreadcrumbs.jsx
applications/personalization/profile/components/ProfileBreadcrumbs.jsx

[it-harrison]

Work will continue next sprint to allow for peer review

[it-harrison]

@micahchiang should notifying teams of failing tests be part of this ticket? or should I make another (and if so, bring it into this sprint)?

[micahchiang]

Closing this as complete. We have a follow up, #2476, to merge this work and update vets-website.