Merge pull request #3006 from department-of-veterans-affairs/mc-comp-…

…lib-43.0.0 update component library and css library
department-of-veterans-affairs · Jul 15, 2024 · 1cc1223 · 1cc1223
2 parents 1c189bb + 5465418
commit 1cc1223
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/department-of-veterans-affairs/vets-design-system-documentation#readme",
   "devDependencies": {
-    "@department-of-veterans-affairs/component-library": "^42.2.1",
+    "@department-of-veterans-affairs/component-library": "^43.0.0",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-rename": "^2.0.0",
@@ -37,8 +37,8 @@
     "tar": ">=6.2.1"
   },
   "dependencies": {
-    "@department-of-veterans-affairs/formation": "^11.0.5",
-    "@department-of-veterans-affairs/css-library": "^0.3.1"
+    "@department-of-veterans-affairs/formation": "^11.0.12",
+    "@department-of-veterans-affairs/css-library": "^0.8.5"
   },
   "engines": {
     "npm": "6.14.8"

diff --git a/src/_components/button/index.md b/src/_components/button/index.md
@@ -91,7 +91,7 @@ anchors:
 This variation substitutes the large tap target of a button where a radio button would traditionally be used. This serves a similar purpose to the [USWDS Tile variation of a Radio button](https://designsystem.digital.gov/components/radio-buttons/). 
 
 * **Limit to Yes/No.** This variation should be limited to Yes/No questions rather than used as a substitute for radio buttons which can more readily handle 3 or more responses.
-* **Reflect selections.** The response of the user must change the button from a secondary button to a ```$color-primary-dark``` background in order to reflect the state of the user's response.
+* **Reflect selections.** The response of the user must change the button from a secondary button to a ```$vads-color-primary-dark``` background in order to reflect the state of the user's response.
 
 {% include component-example.html alt="Example of the secondary button as radio button substitution." file="/images/components/button/button-as-radio.png" caption="The COVID-19 Screener uses secondary buttons instead of radio buttons for Yes/No questions." %}
 

diff --git a/src/assets/stylesheets/_components/_code-snippets.scss b/src/assets/stylesheets/_components/_code-snippets.scss
@@ -13,7 +13,7 @@
 
   &:hover {
     background-color: white;
-    color: $color-primary-dark;
+    color: $vads-color-primary-dark;
     text-decoration: none;
   }
 }

diff --git a/src/assets/stylesheets/_components/_footer.scss b/src/assets/stylesheets/_components/_footer.scss
@@ -1,5 +1,5 @@
 .site-footer {
-  background: $color-primary-darker;
+  background: $vads-color-primary-darker;
   color: white;
 
   a {

diff --git a/src/assets/stylesheets/_components/_header.scss b/src/assets/stylesheets/_components/_header.scss
@@ -1,6 +1,6 @@
 .site-header {
   color: #fff;
-  background-color: $color-primary-darker;
+  background-color: $vads-color-primary-darker;
 }
 
 .site-header .site-l-wrapper {
@@ -26,12 +26,12 @@
 
 .usa-button.site-button-inverse {
   background-color: #ffffff;
-  color: $color-primary-dark;
+  color: $vads-color-primary-dark;
 
   &:active,
   &:hover {
     background-color: rgba(255,255,255,.8);
-    color: $color-primary-dark;
+    color: $vads-color-primary-dark;
   }
 }
 
@@ -83,7 +83,7 @@
 
 .site-top-nav-wrapper {
   display: none;
-  background-color: $color-primary-darker;
+  background-color: $vads-color-primary-darker;
 
   @include media($nav-width) {
     display: block;

diff --git a/src/assets/stylesheets/_components/_link.scss b/src/assets/stylesheets/_components/_link.scss
@@ -1,5 +1,5 @@
 .site-link-active {
   background: rgba(0,0,0,.05);  
-  color: $color-primary-dark;
+  color: $vads-color-primary-dark;
   outline: 0;
 }
diff --git a/src/assets/stylesheets/_components/_search-results.scss b/src/assets/stylesheets/_components/_search-results.scss
@@ -75,8 +75,8 @@
 
 .site-seach-container--mobile {
   display: none;
-  border-top: 1px solid $color-primary-dark;
-  background: $color-primary-darker;
+  border-top: 1px solid $vads-color-primary-dark;
+  background: $vads-color-primary-darker;
   width: 100%;
   margin: -3px 0 -3px;
   padding: units(2);

diff --git a/src/assets/stylesheets/application.scss b/src/assets/stylesheets/application.scss
@@ -120,9 +120,9 @@ backwards compatibility. When Formation has been fully deprecated and we are on
 these can be removed along with an update to how classes are generated in color-palette-example.html. 
 */
 .vads-u-background-color--primary-dark {
-  background-color: $color-primary-dark !important;
+  background-color: $vads-color-primary-dark !important;
 }
 
 .vads-u-background-color--primary-darker {
-  background-color: $color-primary-darker !important;
+  background-color: $vads-color-primary-darker !important;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -9,25 +9,18 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@department-of-veterans-affairs/component-library@^42.2.1":
-  version "42.2.1"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-42.2.1.tgz#fea2ab63a9cf4cf9bbf7467b0a279bd56e5e70b9"
-  integrity sha512-FNIUHabOx9kgz8EE1PprE5YUMNqlU92h6je770OSjKwMX4/csAf5aomRjNjlsq+LwxgLyUU4hukQec9bi+0CTQ==
+"@department-of-veterans-affairs/component-library@^43.0.0":
+  version "43.0.0"
+  resolved "https://registry.npmjs.org/@department-of-veterans-affairs/component-library/-/component-library-43.0.0.tgz#1eff1c9723addacc2b98e5afb7a1aa8bf498935f"
+  integrity sha512-Rpqg30q5nJysbJYth5aWOI0atvmU4qL7PvEOY9p3xQuKnxGdewA/tHJqcachg6l89iNHP3MZdGVnl1JUQSAk8w==
   dependencies:
     "@department-of-veterans-affairs/react-components" "28.1.0"
-    "@department-of-veterans-affairs/web-components" "10.0.0"
+    "@department-of-veterans-affairs/web-components" "11.2.4"
     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.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.3.1.tgz#25440d997771bbf9d89a46e4a43c1bf674e6a015"
-  integrity sha512-sG4pmxwI4L05vhNGlwMtai6YMEXcWUwACeXffgbg/Jt5GCCyD1lSW81PW7JSirvzV3wKKte86xlsfz4mpLPPXQ==
-  dependencies:
-    "@divriots/style-dictionary-to-figma" "^0.4.0"
-
 "@department-of-veterans-affairs/css-library@^0.8.1":
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.8.3.tgz#b5bf4fe1cb0ac5193ae8182b0e14ef2da8b4645a"
@@ -37,10 +30,19 @@
     "@uswds/uswds" "^3.7.1"
     rimraf "^5.0.5"
 
-"@department-of-veterans-affairs/formation@^11.0.5":
-  version "11.0.5"
-  resolved "https://registry.npmjs.org/@department-of-veterans-affairs/formation/-/formation-11.0.5.tgz#20ce74597501244ba73f1e390b098c34854dd4b3"
-  integrity sha512-tYgmOKomXVqUEMN4ajXx/9mVfZwp8yTCjiC8UYG094jyWS2uQR2PhGEzpwp2XDCK1hRFFiV+CK5qROzeORfDWA==
+"@department-of-veterans-affairs/css-library@^0.8.5":
+  version "0.8.5"
+  resolved "https://registry.npmjs.org/@department-of-veterans-affairs/css-library/-/css-library-0.8.5.tgz#610f1f4304e0636a190ad9fd79e8ba3fff80207c"
+  integrity sha512-kld40XYUlEPk2qcwiBFSSmBLdfdG1vKOs4rPpq9EgF8iDLlkXN2iSp8cgsmryc7hgKCZe800jRGqEnXOcFno4A==
+  dependencies:
+    "@divriots/style-dictionary-to-figma" "^0.4.0"
+    "@uswds/uswds" "^3.7.1"
+    rimraf "^5.0.5"
+
+"@department-of-veterans-affairs/formation@^11.0.12":
+  version "11.0.12"
+  resolved "https://registry.npmjs.org/@department-of-veterans-affairs/formation/-/formation-11.0.12.tgz#9f06fd3f4bb006fa001e0bc54a1391932610ca60"
+  integrity sha512-GIMB56GYDP9PrZvefw7VWGoWZsOI7l3otEQLaoPP/z3AxzkORoDWkrSn5+yHiuST3z4BQfiA8fEKLOl1/jZJ0w==
   dependencies:
     "@fortawesome/fontawesome-free" "^5.15.4"
     domready "^1.0.8"
@@ -58,10 +60,10 @@
     react-transition-group "1"
     recast "^0.14.4"
 
-"@department-of-veterans-affairs/web-components@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-10.0.0.tgz#63e143fb1275e1610111eecc79cf73f37d2a5647"
-  integrity sha512-z3vhz9FGv8r2JlAay3ls6DQg32zWjGmSNz2HXLifoFO8rYWMK14fiHQiDiVyUjp7mp5qCFVoNPZMqjK241r7zg==
+"@department-of-veterans-affairs/web-components@11.2.4":
+  version "11.2.4"
+  resolved "https://registry.npmjs.org/@department-of-veterans-affairs/web-components/-/web-components-11.2.4.tgz#158fa086f5b1e1434074da24272857ccdafa11df"
+  integrity sha512-+4kb8NUO1lMjoue/7n0Xj1p5BqTxglUQcW4OlEE1I3D/TC9dziQaLqQlt037b6y4AUg6D6JBVvttWVudQ2jEMg==
   dependencies:
     "@department-of-veterans-affairs/css-library" "^0.8.1"
     "@stencil/core" "^2.19.2"