This module contains reusable React and Web components for the VA.gov design system published as an NPM package for use in the vets-website frontend codebase.

Quick start

npm install @department-of-veterans-affairs/component-library

import { COMPONENTNAME } from '@department-of-veterans-affairs/component-library'

See design system or Storybook for a full list of available components.

Contributing

The issue tracker is disabled on this repo. To request a new component or a feature enhancement, please open an issue here

Web Components

The Design System team is working on replacing the React components in this library with Web Component versions. This isn't just a React replacement however - part of the goal is to have true components that can be used outside of React in plain HTML pages.

Usage

To use these Web Components in your own project, follow the installation steps. This will allow the components to be used in JSX or HTML.

Contributing

1. Submit your PR

Submit a PR that includes all of your code changes. This should include the bump in versions you need, which you can change directly in the package.json files for the modules that are changing. Modules like component-library depend on formation via a peer dependency, so you may need to update that as well. We try to keep the peer dependency loose and only update it for breaking changes.

Please add a clear list of changes to your PR description. We have been using Keep a changelog informally and have had good success with it.

You'll need to choose what type of version update to make:

• patch - for bug fixes and minor changes
• minor - for new features that don't break current features or require changes in consuming applications
• major - for backwards breaking changes

If you are unsure of what to pick, do a major version update on modules that are changing.

2. Merge your PR to main

Once your changes are approved, squash merge them to main. Also, if your change is a breaking change, please prefix your commit message with BREAKING CHANGE:. Also keep in mind that your commit messages will be in a changelog that people use to figure out what has changed between releases, so make sure it accurately describes your changes.

3. Build and publish

If you are not part of the Design System team, please submit a support request in #vfs-platform-support to the Design System Team requesting to create a new release with your changes.

4. Update consuming apps

The last step is to update the package.json files of consuming apps to use the latest version of @department-of-veterans-affairs/formation (or component-library). For example, if you are working with the vets-website project, open the vets-website's package.json to update the version number of the @department-of-veterans-affairs/formation entry listed in the dependencies section. The version number should match what you just published to NPM.