@usds.gov/questionable

Create user friendly workflows for complex requirements, like eligibility or screener questionnaires

Usage no npm install needed!

<script type="module">
  import usdsGovQuestionable from 'https://cdn.skypack.dev/@usds.gov/questionable';
</script>

README

@usds.gov/questionable

All Contributors

Join the community on GitHub Discussions Build states semantic-release

npm latest version uswds react-uswds react-uswds

If you have questions, you have questionable content. Questionable is a USDS React component that transforms complex workflows into a simple, linear wizard.

q

Install

Install this package with npm or yarn:

yarn add @usds.gov/questionable

or

npm i @usds.gov/questionable

Usage

It is strongly suggested applications use the same version of USWDS that is used by @trussworks/react-uswds. A version mismatch may result in unexpected markup & CSS combinations. This project will stay current with @trussworks/react-uswds, which is often behind the USWDS by a point release or two.

You can import Questionable components using ES6 syntax:

import { Questionable } from '@usds.gov/questionable';

Organization

The project is intended to be a generic wizard suitable for testing eligibility workflows and perhaps other point of entry flows that rely on simple state machine mechanics and can be expressed as a set of linear steps with rules governing their sequence according to branching logic.

  • flows: A collection of example workflows ranging from simple to complex
  • state: React reducer for the aggregation of survey data
  • components: UI components used for rendering each question in the survey
  • survey: Core interfaces and classes for the data structure of the question/anwer/results
  • lib: Generic helper utilities

Background

The primary deliverable is a published npm package that can be included as a dependency in other projects that use USWDS with React. In order for these components to be useful, they should follow best practices for accessible, semantic, markup; be well-tested across browsers and devices; and allow for an appropriate level of customization. We adhere to a set of development guidelines as much as possible and use automation to enforce tests, linting, and other standards.

Non-Goals

This is not meant to be a one-size-fits-all front end solution, We are starting off with the opinionated decision to cater towards projects that use the U.S. Design System 2.0, and encapsulate these specific styles and markup in React components.

Development

In the project directory, you can run:

yarn start

Runs the storybook for the components.
Open http://localhost:9009 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

yarn deploy

Builds and deploys the app to GitHub Pages.

Maintainers

Contributing

Interested in contributing? See our guidelines and dev setup here.

This repository is governed by the Contributor Covenant

Acknowledgements

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Christopher Froehlich
🐛 💻 🎨
TomNUSDS
💬 🐛 💻 👀 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!