@department-of-veterans-affairs/web-components

Veterans Affairs Web Components

This package contains all of the actively maintained web components used by the Veterans Affairs Design System (VADS).

For more information about the VADS, checkout design.va.gov.

For component documentation, checkout our storybook.

Need to submit a bug or request a feature? File an issue with us

Stencil

Our web components are built with stencil.

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

To start building a new web component using Stencil, first cd into packages/web-components.

Run:

yarn install

There are two ways this project can be run for development.

For developing and testing with storybook, follow these steps.

For just running the stencil dev server, ensure your working directory is still packages/web-components and then run yarn serve.

If just running the stencil dev server, after creating and naming your component, add it to src/index.html so the dev server picks it up. Remove the <my-component /> dummy component from index.html

To build for production, run:

yarn run build

To run the unit tests for the components, run:

yarn test

Need help? Check out our docs here.

Naming Components

All Veterans Affairs web components are prefixed with va-. Some components have variations. In these instances, a variation will be appended to the original component's name. For example:

// Original component
<va-button />
// Variations
<va-button-icon />
<va-button-pair />