Update component-library to v49.0.0 (#34404)

* Update component-library to v49.0.0

* Update gray tokens

* Update element selector for E2E test

* Fix merge conflict

* Change colors back...

* Fix PACT Act tests

package.json

@@ -262,8 +262,8 @@
     "@babel/runtime": "^7.15.4",
     "@datadog/browser-logs": "^5.8.0",
     "@datadog/browser-rum": "^4.49.0",
-    "@department-of-veterans-affairs/component-library": "^48.4.0",
-    "@department-of-veterans-affairs/css-library": "^0.17.0",
+    "@department-of-veterans-affairs/component-library": "^49.0.0",
+    "@department-of-veterans-affairs/css-library": "^0.18.0",
     "@department-of-veterans-affairs/react-jsonschema-form": "^1.2.5",
     "@department-of-veterans-affairs/va-forms-system-core": "1.6.1",
     "@department-of-veterans-affairs/vagov-platform": "^0.0.1",

src/applications/_mock-form-ae-design-patterns/utils/data/tabs.js

@@ -28,7 +28,7 @@ export const tabsConfig = {
       path: '/2/task-orange',
 
       description: 'Pattern 2 - Orange Task',
-      bgColor: '--uswds-system-color-orange-40',
+      bgColor: '--vads-color-orange',
       textColor: '--vads-color-black',
     },
     {

src/applications/accredited-representative-portal/sass/POARequestCard.scss

@@ -11,8 +11,8 @@
   }
   &__tabs {
     margin: 60px 0 24px;
-    background-color: $uswds-system-color-gray-cool-10;
-    border: 2px solid $uswds-system-color-gray-cool-10;
+    background-color: $vads-color-base-lighter;
+    border: 2px solid $vads-color-base-lighter;
     border-radius: 6px;
     display: flex;
     max-width: 320px;

src/applications/accredited-representative-portal/sass/accredited-representative-portal.scss

@@ -15,13 +15,13 @@
   color: $vads-color-base;
 
   &--processing {
-    background-color: $uswds-system-color-gray-5;
-    border: 1px solid $uswds-system-color-gray-cool-60;
+    background-color: $vads-color-gray-light-alt;
+    border: 1px solid $vads-color-base-dark;
   }
   &--declination,
   &--expiration {
-    background-color: $uswds-system-color-red-warm-10;
-    border: 1px solid $uswds-system-color-red-warm-vivid-50;
+    background-color: $vads-color-error-lighter;
+    border: 1px solid $vads-color-error;
   }
   &--pending {
     background-color: $vads-color-warning-lighter;

src/applications/ask-va/sass/ask-va.scss

@@ -325,8 +325,8 @@ $facility-locator-shadow: rgba(0, 0, 0, 0.5);
 
 .ava-progress-bar-inner {
   height: 100%;
-  background-color: var(--uswds-system-color-orange-40);
-  border: 1px solid var(--uswds-system-color-orange-40);
+  background-color: var(--vads-color-orange);
+  border: 1px solid var(--vads-color-orange);
   border-radius: 3px;
   display: block;
 }

src/applications/mhv-secure-messaging/sass/search.scss

@@ -1,7 +1,7 @@
 @import "~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables";
 
 .search-form {
-  background-color: var(--uswds-system-color-gray-5);
+  background-color: var(--vads-color-gray-light-alt);
   padding: 10px 16px;
   margin-top: 24px;
 

src/applications/pact-act/tests/cypress/helpers.js

@@ -92,6 +92,12 @@ export const verifyFormErrorNotShown = selector =>
     .get('span[role="alert"]')
     .should('have.text', '');
 
+export const verifyFormErrorDoesNotExist = selector =>
+  cy
+    .findByTestId(selector)
+    .get('span[role="alert"]')
+    .should('not.exist');
+
 export const checkFormAlertText = (selector, expectedValue) =>
   cy
     .findByTestId(selector)

src/applications/pact-act/tests/cypress/service-period-during-both/form-validation.cypress.spec.js

@@ -15,68 +15,68 @@ describe('PACT Act', () => {
 
       // SERVICE_PERIOD -------------------------------
       h.verifyUrl(ROUTES.SERVICE_PERIOD);
-      h.verifyFormErrorNotShown(h.SERVICE_PERIOD_INPUT);
+      h.verifyFormErrorDoesNotExist(h.SERVICE_PERIOD_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.SERVICE_PERIOD_INPUT, 'Error Select a response.');
 
       h.selectRadio(h.SERVICE_PERIOD_INPUT, 2);
-      h.verifyFormErrorNotShown(h.SERVICE_PERIOD_INPUT);
+      h.verifyFormErrorDoesNotExist(h.SERVICE_PERIOD_INPUT);
       h.clickContinue();
 
       // BURN_PIT_2_1 --------------------------------
       h.verifyUrl(ROUTES.BURN_PIT_2_1);
-      h.verifyFormErrorNotShown(h.BURN_PIT_2_1_INPUT);
+      h.verifyFormErrorDoesNotExist(h.BURN_PIT_2_1_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.BURN_PIT_2_1_INPUT, 'Error Select a response.');
 
       h.selectRadio(h.BURN_PIT_2_1_INPUT, 2);
-      h.verifyFormErrorNotShown(h.BURN_PIT_2_1_INPUT);
+      h.verifyFormErrorDoesNotExist(h.BURN_PIT_2_1_INPUT);
       h.clickContinue();
 
       // BURN_PIT_2_1_1 --------------------------------
       h.verifyUrl(ROUTES.BURN_PIT_2_1_1);
-      h.verifyFormErrorNotShown(h.BURN_PIT_2_1_1_INPUT);
+      h.verifyFormErrorDoesNotExist(h.BURN_PIT_2_1_1_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.BURN_PIT_2_1_1_INPUT, 'Error Select a response.');
 
       h.selectRadio(h.BURN_PIT_2_1_1_INPUT, 2);
-      h.verifyFormErrorNotShown(h.BURN_PIT_2_1_1_INPUT);
+      h.verifyFormErrorDoesNotExist(h.BURN_PIT_2_1_1_INPUT);
       h.clickContinue();
 
       // BURN_PIT_2_1_2 --------------------------------
       h.verifyUrl(ROUTES.BURN_PIT_2_1_2);
-      h.verifyFormErrorNotShown(h.BURN_PIT_2_1_2_INPUT);
+      h.verifyFormErrorDoesNotExist(h.BURN_PIT_2_1_2_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.BURN_PIT_2_1_2_INPUT, 'Error Select a response.');
 
       h.selectRadio(h.BURN_PIT_2_1_2_INPUT, 2);
-      h.verifyFormErrorNotShown(h.BURN_PIT_2_1_2_INPUT);
+      h.verifyFormErrorDoesNotExist(h.BURN_PIT_2_1_2_INPUT);
       h.clickContinue();
 
       // BURN_PIT_2_1_3 --------------------------------
       h.verifyUrl(ROUTES.BURN_PIT_2_1_3);
-      h.verifyFormErrorNotShown(h.BURN_PIT_2_1_3_INPUT);
+      h.verifyFormErrorDoesNotExist(h.BURN_PIT_2_1_3_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.BURN_PIT_2_1_3_INPUT, 'Error Select a response.');
 
       h.selectRadio(h.BURN_PIT_2_1_3_INPUT, 2);
-      h.verifyFormErrorNotShown(h.BURN_PIT_2_1_3_INPUT);
+      h.verifyFormErrorDoesNotExist(h.BURN_PIT_2_1_3_INPUT);
       h.clickContinue();
 
       // ORANGE_2_2_A --------------------------------
       h.verifyUrl(ROUTES.ORANGE_2_2_A);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_A_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_A_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.ORANGE_2_2_A_INPUT, 'Error Select a response.');
 
       h.selectRadio(h.ORANGE_2_2_A_INPUT, 0);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_A_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_A_INPUT);
       h.clickContinue();
 
       // ORANGE_2_2_B --------------------------------
@@ -92,19 +92,19 @@ describe('PACT Act', () => {
 
       // ORANGE_2_2_A --------------------------------
       h.verifyUrl(ROUTES.ORANGE_2_2_A);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_A_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_A_INPUT);
       h.selectRadio(h.ORANGE_2_2_A_INPUT, 2);
       h.clickContinue();
 
       // ORANGE_2_2_1_A ------------------------------
       h.verifyUrl(ROUTES.ORANGE_2_2_1_A);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_1_A_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_1_A_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.ORANGE_2_2_1_A_INPUT, 'Error Select a response.');
 
       h.selectRadio(h.ORANGE_2_2_1_A_INPUT, 0);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_1_A_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_1_A_INPUT);
       h.clickContinue();
 
       // ORANGE_2_2_1_B -----------------------------
@@ -120,24 +120,24 @@ describe('PACT Act', () => {
 
       // ORANGE_2_2_1_A ------------------------------
       h.verifyUrl(ROUTES.ORANGE_2_2_1_A);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_1_A_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_1_A_INPUT);
       h.selectRadio(h.ORANGE_2_2_1_A_INPUT, 2);
       h.clickContinue();
 
       // ORANGE_2_2_2 ------------------------------
       h.verifyUrl(ROUTES.ORANGE_2_2_2);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_2_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_2_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.ORANGE_2_2_2_INPUT, 'Error Select a response.');
 
       h.selectRadio(h.ORANGE_2_2_2_INPUT, 2);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_2_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_2_INPUT);
       h.clickContinue();
 
       // ORANGE_2_2_3 ------------------------------
       h.verifyUrl(ROUTES.ORANGE_2_2_3);
-      h.verifyFormErrorNotShown(h.ORANGE_2_2_3_INPUT);
+      h.verifyFormErrorDoesNotExist(h.ORANGE_2_2_3_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.ORANGE_2_2_3_INPUT, 'Error Select a response.');
@@ -147,7 +147,7 @@ describe('PACT Act', () => {
 
       // RADIATION_2_3_A ------------------------------
       h.verifyUrl(ROUTES.RADIATION_2_3_A);
-      h.verifyFormErrorNotShown(h.RADIATION_2_3_A_INPUT);
+      h.verifyFormErrorDoesNotExist(h.RADIATION_2_3_A_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.RADIATION_2_3_A_INPUT, 'Error Select a response.');
@@ -168,13 +168,13 @@ describe('PACT Act', () => {
 
       // RADIATION_2_3_A ------------------------------
       h.verifyUrl(ROUTES.RADIATION_2_3_A);
-      h.verifyFormErrorNotShown(h.RADIATION_2_3_A_INPUT);
+      h.verifyFormErrorDoesNotExist(h.RADIATION_2_3_A_INPUT);
       h.selectRadio(h.RADIATION_2_3_A_INPUT, 2);
       h.clickContinue();
 
       // LEJEUNE_2_4 ------------------------------
       h.verifyUrl(ROUTES.LEJEUNE_2_4);
-      h.verifyFormErrorNotShown(h.LEJEUNE_2_4_INPUT);
+      h.verifyFormErrorDoesNotExist(h.LEJEUNE_2_4_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.LEJEUNE_2_4_INPUT, 'Error Select a response.');
@@ -184,7 +184,7 @@ describe('PACT Act', () => {
 
       // MAIN_FLOW_2_5 ------------------------------
       h.verifyUrl(ROUTES.MAIN_FLOW_2_5);
-      h.verifyFormErrorNotShown(h.MAIN_FLOW_2_5_INPUT);
+      h.verifyFormErrorDoesNotExist(h.MAIN_FLOW_2_5_INPUT);
 
       h.clickContinue();
       h.checkFormAlertText(h.MAIN_FLOW_2_5_INPUT, 'Error Select a response.');

src/applications/verify-your-enrollment/tests/e2e/mailingAddress.cypress.spec.js

@@ -124,10 +124,9 @@ describe('Contact information', () => {
     cy.get('va-button')
       .last()
       .click({ force: true });
-    cy.get('[class="usa-checkbox__label"]').should(
-      'contain',
+    cy.contains(
       'I live on a United States military base outside of the U.S.',
-    );
+    ).should('be.visible');
   });
   it('should show warning alert if user hits cancel after editing form and it should close alert and form when user clicks Yes, cancel my changes', () => {
     cy.injectAxeThenAxeCheck();

yarn.lock

@@ -2803,22 +2803,22 @@
     react-focus-on "^3.5.1"
     react-transition-group "^1.0.0"
 
-"@department-of-veterans-affairs/component-library@^48.4.0":
-  version "48.4.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-48.4.0.tgz#138390fbb904746550d950ecb9c5104ad852abe2"
-  integrity sha512-ApUpW3nysBSqGkGNjPTzKserqRdKIHktj5xnihmF+dXyjgneegcyKohBqn1QmjgPD2VK/51mmMkAON12cTCb5w==
+"@department-of-veterans-affairs/component-library@^49.0.0":
+  version "49.0.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-49.0.0.tgz#abc088d9b5038a528033720580654c969cbfb2d3"
+  integrity sha512-K+5Yxoqz5mJCSPHyMEuc3YufBol5YHPZd+2wkQyo3XZXxNnwKyIPhGAq8JWJCrYpcvFh2nOtT1k9FYrY8EqEUw==
   dependencies:
     "@department-of-veterans-affairs/react-components" "28.1.0"
-    "@department-of-veterans-affairs/web-components" "16.4.0"
+    "@department-of-veterans-affairs/web-components" "17.0.0"
     i18next "^21.6.14"
     i18next-browser-languagedetector "^6.1.4"
     react-focus-on "^3.5.1"
     react-transition-group "^1.0.0"
 
-"@department-of-veterans-affairs/css-library@^0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.17.0.tgz#4959408ddb593201256b13386ab43853bc21dbb6"
-  integrity sha512-dH+JMPL7qio6/rBxYPB6wXL21WkYHE9+wab1BJ0x+8pdu1nap1ZEkBS5oTu6VmizaFsaTa1t3LKv3fGPNSRD+Q==
+"@department-of-veterans-affairs/css-library@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.18.0.tgz#2872e955c7c26e6105468d12c4914e7492eb12f0"
+  integrity sha512-tlejTp9YwF9yH7QgKMAypdm/imp66JkKSKTbHtJaYjez7ddeyJ8q10sukkbrRt3t2YxYIpGSURVIOVIZUpwfzA==
   dependencies:
     "@divriots/style-dictionary-to-figma" "^0.4.0"
     "@uswds/uswds" "^3.9.0"
@@ -2903,10 +2903,10 @@
     classnames "^2.3.1"
     intersection-observer "^0.12.0"
 
-"@department-of-veterans-affairs/web-components@16.4.0":
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-16.4.0.tgz#77e6a56f51e2c283da02da7b9ca6814daf182282"
-  integrity sha512-fPYEtKryL8kcHyisBdgnrhVac5+joEbhMQLmtGbxTyJkZmtPHGmyIHLCMzISzJac2zT6YDBcbIAJI4qvpqkxsA==
+"@department-of-veterans-affairs/web-components@17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-17.0.0.tgz#a5fd582a760d6321e6e6e1d2bbb2befb8642df12"
+  integrity sha512-Lsjc7qbCnrddbVv6gBR86fviz/XrZuUd4M6cSshwhr2Ur2NalZPQUfMzLVMod1fXrNnpoDHU6cuHpkkCEmt4LA==
   dependencies:
     "@stencil/core" "4.20.0"
     aria-hidden "^1.1.3"