Merge branch 'main' into 3452-update-font-tokens

README.md

@@ -24,6 +24,151 @@ This repo uses [`Chromatic`](https://www.chromatic.com/) to streamline reviews b
 
 Our web components have linting which checks for hard-coded user-facing strings. At the moment this linting isn't integrated into CI - so you will only see it if you run `yarn lint` or if your editor has ESLint integration through a plugin.
 
+### Local testing with Verdaccio
+Contributors are encouraged to test their changes in `vets-website` using [Verdaccio](https://verdaccio.org/). What is Verdaccio? From the website:
+
+> Verdaccio is a simple, zero-config-required local private NPM registry. No need for an entire database just to get started…
+
+Verdaccio allows contributors to publish a new version of the VA Design System component library on their local machine, and preview `vets-website` with their changes.
+
+#### Before you begin
+1. VA Design System component library and vets-website require different versions of NodeJS. Be sure you have [NVM installed](https://github.com/nvm-sh/nvm#installing-and-updating) before you begin.
+1. Download Node `v14.15.0` and a current Node `v18.x.x` or `v20.x.x`
+1. Verdaccio also requires [Python3](https://www.python.org/downloads/). Ensure you have Python3 installed by opening a terminal window and typing the following command:
+
+   ```shell
+   which python3 # Should see output like /usr/bin/python3
+   ```
+
+   You should see an execution path if Python3 is installed. If not, install it and type `which python3` again in a new terminal window.
+
+#### Installing Verdaccio
+1. Install Verdaccio using NPM or Yarn:
+
+   ```shell
+   # Ensure Verdaccio compatibility with vets-website
+   nvm use 14.15.0
+
+   # If you're using NPM
+   npm install --location=global [email protected]
+
+   # If you're using Yarn
+   yarn global add [email protected]
+   ```
+1. Verify Verdaccio was installed correctly.
+
+   ```shell
+   verdaccio --version # Should see output like v5.5.0
+   ```
+1. Start Verdaccio on your local machine. The server will be running at `localhost:4873`.
+
+   ```shell
+   verdaccio
+   ```
+1. Create a new Verdaccio user by entering this command and following the prompts.
+
+   ```shell
+   npm adduser --registry http://localhost:4873/
+   ```
+
+#### Publish your component-library changes to Verdaccio
+The next step is to update the `core` and `web-component` package versions in their respective `package.json` files. _**Note:** You must use Node `v18.x.x` or `v20.x.x` for this step._
+
+1. Navigate to `component-library` and switch to Node `[18, 20]`
+
+   ```shell
+   cd component-library/
+   nvm use 18.x.x # Or version 20
+   nvm use 20.x.x
+   ```
+1. Navigate to `packages/web-components` and update the package version. Assuming the current version is `10.1.1`, you could change the version to `10.1.2-rc1` or something similar.
+
+   ```diff
+   ! packages/web-components/package.json
+
+   - "version": "10.1.1"
+   + "version": "10.1.2-rc1"
+   ```
+2. Navigate to `packages/core` and update the package version using the same logic
+
+   ```diff
+   ! packages/core/package.json
+
+   - "version": "15.0.1"
+   + "version": "15.0.2-rc1"
+   ```
+3. Still in the `packages/core` package.json file, update the VADS dependency entry
+
+   ```diff
+   ! packages/core/package.json
+
+   dependencies: {
+   -   "@department-of-veterans-affairs/web-components": "workspace:*"
+   +   "@department-of-veterans-affairs/web-components": "^10.2.2-rc1"
+   }
+   ```
+4. Build the components using the [Running Build via Storybook](https://github.com/department-of-veterans-affairs/component-library?tab=readme-ov-file#running-build-via-storybook) instructions. Ignore the last step to start Storybook; you won't need it for this process.
+5. Publish the `core` package to Verdaccio
+
+   ```shell
+   cd ../packages/core/
+   npm publish --registry http://localhost:4873
+   ```
+6. Publish the `web-component` package to Veraccio
+
+   ```shell
+   cd ../packages/web-components/
+   npm publish --registry http://localhost:4873
+   ```
+
+#### Link `vets-website` to local Verdaccio registry
+You're now ready to switch to `vets-website` and update the VADS dependency. _**Note:** You must use Node `v14.15.0` for this step._
+
+1. Run the following commands to point to your local Verdaccio registry
+
+   ```shell
+   cd vets-website/
+   nvm use 14.15.0 # Ensure correct Node version
+   yarn config set registry http://localhost:4873
+   npm config set registry http://localhost:4873
+   ```
+2. Add the local `core` package to `vets-website` and start the server
+
+   ```shell
+   yarn add -W @department-of-veterans-affairs/[email protected]
+   yarn watch
+   ```
+
+#### Reverting to the default registry
+After you are finished testing, reset `vets-website` to use the standard registry. _**Note:** You must use Node `v14.15.0` for this step._
+
+   ```shell
+   # Using NPM
+   nvm use 14.15.0 # Ensure correct Node version
+   npm config set registry https://registry.yarnpkg.com/
+
+   # Or using Yarn
+   nvm use 14.15.0
+   yarn config set registry https://registry.yarnpkg.com/
+   yarn config set npmRegistryServer https://registry.yarnpkg.com/
+   ```
+
+#### Troubleshooting
+1. If you encounter Webpack errors during the `yarn watch` step in `vets-website`, try deleting the `node_modules/` folder, then reinstalling dependencies.
+
+   ```shell
+   cd vets-website/
+   rm -rf node_modules/ # Careful with this one
+   yarn install
+   yarn watch
+   ```
+2. If you encounter errors in the `component-library` or `vets-website` build or watch steps, try changing your Node version.
+
+   ```shell
+   nvm use 14.15.0
+   nvm use 18.x.x OR nvm use 20.x.x
+   ```
+
 ## Publishing
 
 ### Updating the version

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@department-of-veterans-affairs/component-library",
   "description": "VA.gov component library. Includes React and web components.",
-  "version": "47.3.0",
+  "version": "48.0.1",
   "license": "MIT",
   "scripts": {
     "build": "webpack"

packages/css-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/css-library",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Department of Veterans Affairs stylesheets, tokens, and utilities",
   "packageManager": "[email protected]",
   "files": [

packages/storybook/.storybook/preview.js

@@ -136,10 +136,5 @@ const observeDocsRoot = () => {
 }
 
 document.body.onload = function () {
-  // Fix for React 17/NVDA bug where React root is read as "clickable"
-  // https://github.com/nvaccess/nvda/issues/13262
-  // https://github.com/facebook/react/issues/20895
-  // document.querySelector('#root').setAttribute('role', 'presentation');
-
   observeDocsRoot();
 };

packages/web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/web-components",
-  "version": "15.3.0",
+  "version": "16.0.1",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@axe-core/puppeteer": "^4.10.0",
     "@babel/core": "^7.12.13",
-    "@department-of-veterans-affairs/css-library": "^0.13.1",
+    "@department-of-veterans-affairs/css-library": "^0.14.0",
     "@department-of-veterans-affairs/formation": "^11.0.6",
     "@stencil/postcss": "^2.0.0",
     "@stencil/react-output-target": "^0.5.3",

packages/web-components/src/components/va-alert/test/va-alert.e2e.ts

@@ -12,7 +12,7 @@ describe('va-alert', () => {
       <va-alert class="hydrated" status="info">
         <mock:shadow-root>
           <div class="usa-alert usa-alert--info">
-            <div class="usa-alert__body" role="presentation">
+            <div class="usa-alert__body">
               <slot name="headline"></slot>
               <slot></slot>
             </div>

packages/web-components/src/components/va-alert/va-alert.tsx

@@ -180,7 +180,6 @@ export class VaAlert {
           <div
             class="usa-alert__body"
             onClick={this.handleAlertBodyClick.bind(this)}
-            role="presentation"
           >
             {status === 'continue' && (
               <va-icon

packages/web-components/src/components/va-on-this-page/va-on-this-page.css

@@ -31,7 +31,7 @@ ul {
 
 li {
   padding: 0.5em;
-  max-width: 285px;
+  max-width: var(--vads-size-line-length-4);
 }
 
 li a {

yarn.lock

@@ -3311,7 +3311,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@department-of-veterans-affairs/css-library@npm:^0.13.1, @department-of-veterans-affairs/css-library@workspace:packages/css-library":
+"@department-of-veterans-affairs/css-library@npm:^0.14.0, @department-of-veterans-affairs/css-library@workspace:packages/css-library":
   version: 0.0.0-use.local
   resolution: "@department-of-veterans-affairs/css-library@workspace:packages/css-library"
   dependencies:
@@ -3445,7 +3445,7 @@ __metadata:
   dependencies:
     "@axe-core/puppeteer": "npm:^4.10.0"
     "@babel/core": "npm:^7.12.13"
-    "@department-of-veterans-affairs/css-library": "npm:^0.13.1"
+    "@department-of-veterans-affairs/css-library": "npm:^0.14.0"
     "@department-of-veterans-affairs/formation": "npm:^11.0.6"
     "@stencil/core": "npm:4.20.0"
     "@stencil/postcss": "npm:^2.0.0"