At Truss, we work with private and public organizations to design, build, and scale modern software. In many cases, these are clients from various agencies of the government.

How we use the USWDS

In our USWDS projects, we apply it to digital products and software, which makes our needs different than if we were building a static information-based website. We need our software to be customizable, interactive, and scalable.

There are multiple ways you can use the USWDS in a codebase. Different approaches will be more or less appropriate, depending on what your project is like and what skill sets exist on your team. If you are comfortable working with a package manager, you can install it using npm. If not, you can download it directly from the developer documentation on the USWDS website and manually add it to your repository.

The react-uswds project

We have a couple of projects that have React.js frontends, so several of our engineers have are building and maintaining an open source React USWDS library that we use as the core of our projects’ frontends. The primary goal for this library is to document and provide common user interface components that can be included in other projects that adhere to or are based off of the USWDS. That removes a significant amount of overhead UI development from such projects.

The USWDS spec is a design system in active development and so is our library. Since it’s an open source project, other folks can contribute to it and make use of it in their projects. As of right now, there has been 9 releases of react-uswds, most recently version 1.7.0.

screenshot of the react-uswds page on github: https://github.com/trussworks/react-uswds

Utilizing Storybook to show components

While our projects have different branding, audience, and custom needs, this core library provides our production teams with customizable React components that are based off the core USWDS components. The teams for our projects take what they need from the USWDS, and also build out all the components needed for a specific project and keep them in a platform called Storybook that’s integrated into our Github repository.

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building out all our interface components nice looking and efficient. It gives all engineers and designers involved in a project a source of truth for what components should look and behave like.

MilMove Storybook - https://storybook.move.mil

Alignment with Design in the Development Process

In my project, MilMove, our designers and engineers are working together to build out React components and core SASS styles to implement our design system. Our designers have created a design system based off the USWDS that’s being implemented in production.

Part of that effort is taking in the spec sheets created as deliverables for the design system and building them out in Storybook. When engineers complete a component in Storybook, the designer that created the component is a reviewer on the submitted pull request to make sure it was implemented as intended.

When working with a design system as an engineer, it’s really important to be prepared to work shoulder to shoulder with the designers on your team.

In the MilMove project, when component files are altered by a pull request, our Truss-Design group on Github becomes the “codeowner,” requiring that the PR be reviewed by a designer in order to be merged into our main development branch.

The intention of doing things this way is to empower engineering teams across our project to use these components to handle the user interface aspect of things (rendered HTML and CSS), so they can focus on application logic, functionality, and tests.