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

This module contains reusable react components from vets-website housed in its design system repo.

Quick start

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

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

See design system or Storybook.

Contributing

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

Running Storybook locally

From the project root, run the following commands:

1. yarn install
2. yarn storybook

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.

For now these Web Components live on the web-components branch. In order to add a new component or make changes to an existing one, you must:

1. Create a new branch off of web-components
2. Have the PR be based off of web-components (not master - see image below)
3. Once the PR is merged, create a Github Release with web-components as the base, where the version is wc-vX.Y.Z. with X.Y.Z being the semantic version.

Making a PR

Making a release

Publishing Module to NPM

After you've tested and previewed your changes locally it's time to publish a new version of the package to NPM.

Prerequisite: you must be registered with NPM, be a member of the "department-of-veterans-affairs" organization, and have the appropriate organization role to publish an update to the module. Verify that you are logged in correctly by running npm whoami. If you are unable to publish an update, confirm you are a member of the "department-of-veterans-affairs" organization by going to your Profile page on npmjs.com.

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.

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 master

Once your changes are approved, squash merge them to master. 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

• Checkout the master branch
• Run yarn build
• Run npm publish

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.

Included components:

• AdditionalInfo.js
• AlertBox.js
• Breadcrumbs.js
• Checkbox.js
• Date.js
• FileInput.js
• MonthYear.js
• NumberInput.js
• RadioButtons.js
• Select.js
• TextArea.js
• TextInput.js
• ExpandingGroup.js
• IconBase.js
• IconHelp.js
• IconSearch.js
• IconUser.js
• LoadingIndicator.js
• Modal.js
• OMBInfo.js
• Pagination.js
• PrivacyAgreement.js
• ProgressBar.js
• ProgressButton.js
• SearchMenu.js
• SegmentedProgressBar.js
• SystemDownView.js
• Table.js
• Telephone.js
• Tooltip.js