From f504eede89b1df85fb0d735b8bf8e84c73800cfb Mon Sep 17 00:00:00 2001 From: Jami Gibbs Date: Thu, 7 Nov 2024 11:23:20 -0600 Subject: [PATCH 1/6] Component library release v48.0.0 (#1391) * update versions for release * update css-library version --- packages/core/package.json | 2 +- packages/css-library/package.json | 2 +- packages/web-components/package.json | 2 +- yarn.lock | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 238ad4d1d..85ce5056e 100644 --- a/packages/core/package.json +++ b/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.0", "license": "MIT", "scripts": { "build": "webpack" diff --git a/packages/css-library/package.json b/packages/css-library/package.json index 6054ba729..989a2e51a 100644 --- a/packages/css-library/package.json +++ b/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": "yarn@3.2.0", "files": [ diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 826588b82..b5f9edf3a 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 41d828a96..f84356e47 100644 --- a/yarn.lock +++ b/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" From 2c30051aa72ae2dcea6a25cb8b96024dc36e7a9f Mon Sep 17 00:00:00 2001 From: Jami Gibbs Date: Thu, 7 Nov 2024 13:12:34 -0600 Subject: [PATCH 2/6] update web-components package version for release (#1392) * update web-components version --- packages/web-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index b5f9edf3a..584cc8e0c 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/web-components", - "version": "15.3.0", + "version": "16.0.0", "description": "Stencil Component Starter", "main": "dist/index.cjs.js", "module": "dist/index.js", From 81958d75023c8d4fc43491355bdb0245c02d334e Mon Sep 17 00:00:00 2001 From: Jami Gibbs Date: Thu, 7 Nov 2024 13:33:32 -0600 Subject: [PATCH 3/6] update core and web-components (#1393) --- packages/core/package.json | 2 +- packages/web-components/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 85ce5056e..162ff0392 100644 --- a/packages/core/package.json +++ b/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": "48.0.0", + "version": "48.0.1", "license": "MIT", "scripts": { "build": "webpack" diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 584cc8e0c..9c552584a 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/web-components", - "version": "16.0.0", + "version": "16.0.1", "description": "Stencil Component Starter", "main": "dist/index.cjs.js", "module": "dist/index.js", From 0572c76b4795311dbc850c7fbc35615d2c557a5e Mon Sep 17 00:00:00 2001 From: Andrew Steele Date: Fri, 8 Nov 2024 13:36:13 -0500 Subject: [PATCH 4/6] va-on-this-page: updating line-length for list items to use new token (#1394) * va-on-this-page: updating line-length for list items to use new token * Removing redundant requirement. --- .../src/components/va-on-this-page/va-on-this-page.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/components/va-on-this-page/va-on-this-page.css b/packages/web-components/src/components/va-on-this-page/va-on-this-page.css index 3a391163e..fac930482 100644 --- a/packages/web-components/src/components/va-on-this-page/va-on-this-page.css +++ b/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 { From 4076708327872333f0ec2c048adaa57b38925933 Mon Sep 17 00:00:00 2001 From: Trevor Pierce <934879+1Copenut@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:19:53 -0600 Subject: [PATCH 5/6] DOCS: Update README `Contributing` entry with Verdaccio instructions (#1395) * First Verdaccio docs commit, installing. * Second Verdaccio docs commit, publishing. * Third Verdaccio docs change, linking. * Small proofreading changes. * Edited to add getting started, troubleshooting. * Final edits for Node version, directory path strings. --- README.md | 145 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) diff --git a/README.md b/README.md index 63b975126..af3c2ac32 100644 --- a/README.md +++ b/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 verdaccio@5.5.0 + + # If you're using Yarn + yarn global add verdaccio@5.5.0 + ``` +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/component-library@vX.X.rc-1 + 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 From 1597e2656b0eb1d77d36ec8d46861700a73c0859 Mon Sep 17 00:00:00 2001 From: Ryan Smith <100248909+rsmithadhoc@users.noreply.github.com> Date: Wed, 13 Nov 2024 15:26:22 -0500 Subject: [PATCH 6/6] Remove alert presentation role (#1398) --- packages/storybook/.storybook/preview.js | 5 ----- .../src/components/va-alert/test/va-alert.e2e.ts | 2 +- packages/web-components/src/components/va-alert/va-alert.tsx | 1 - 3 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js index 5b4682a86..1d9414ef1 100644 --- a/packages/storybook/.storybook/preview.js +++ b/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(); }; diff --git a/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts b/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts index a6b4eee85..337062fa7 100644 --- a/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts +++ b/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts @@ -12,7 +12,7 @@ describe('va-alert', () => {
-