Skip to content

Commit

Permalink
Merge branch 'main' into mp-checkbox-tile-790
Browse files Browse the repository at this point in the history
  • Loading branch information
brandonlenz committed Apr 27, 2021
2 parents 41ac67b + a2f40a0 commit 9aee21e
Show file tree
Hide file tree
Showing 56 changed files with 4,094 additions and 2,149 deletions.
29 changes: 29 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,35 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [1.16.0](https://github.com/trussworks/react-uswds/compare/1.15.0...1.16.0) (2021-04-22)


### Features

* Add i18n support to DatePicker component ([#990](https://github.com/trussworks/react-uswds/issues/990)) ([2000b9c](https://github.com/trussworks/react-uswds/commit/2000b9cd1e98ab85841d448a58b41105a17a7bb4))
* Update to USWDS 2.10.3 ([#1106](https://github.com/trussworks/react-uswds/issues/1106)) ([c9f71d7](https://github.com/trussworks/react-uswds/commit/c9f71d7d7989fb9c7ab2e264d1af26436dcb66c3))
* Implement Identifier subcomponents ([#1100](https://github.com/trussworks/react-uswds/issues/1100)) ([703a60d](https://github.com/trussworks/react-uswds/commit/703a60dadc326c822748bbf50aec735e35421c60))


### Documentation & Examples

* **adr:** Increase ReactUSWDS version when updating USWDS version ([#1045](https://github.com/trussworks/react-uswds/issues/1045)) ([59f6720](https://github.com/trussworks/react-uswds/commit/59f6720ad023d102d71e00ad9447edc47c1d0a55))

## [1.15.0](https://github.com/trussworks/react-uswds/compare/1.14.0...1.15.0) (2021-04-12)


### Features

* Identifier component ([#1044](https://github.com/trussworks/react-uswds/issues/1044)) ([e79bc87](https://github.com/trussworks/react-uswds/commit/e79bc8773a3ff7d9096b8b65a9f6cb58f7d3a28a))
* StepIndicator component ([#1047](https://github.com/trussworks/react-uswds/issues/1047)) ([d61988e](https://github.com/trussworks/react-uswds/commit/d61988eb90646d35e57b17c00bd392e4ce3c200e))
* TimePicker component ([#1082](https://github.com/trussworks/react-uswds/issues/1082)) ([c7bfdee](https://github.com/trussworks/react-uswds/commit/c7bfdee95bda8c357f8b56e600e0c03be9ff922f))
* Update to USWDS 2.9.0 ([#1048](https://github.com/trussworks/react-uswds/issues/1048)) ([3859eea](https://github.com/trussworks/react-uswds/commit/3859eeaca8505403bd3bb149b12b13fb950fc082))


### Documentation & Examples

* Add guidance for PR titles and testing in an application ([#1028](https://github.com/trussworks/react-uswds/issues/1028)) ([be3bed4](https://github.com/trussworks/react-uswds/commit/be3bed41eb973ba9bdc69c69d168ef7a13d17ccf))

## [1.14.0](https://github.com/trussworks/react-uswds/compare/1.13.2...1.14.0) (2021-03-22)


Expand Down
47 changes: 25 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
<!-- ALL-CONTRIBUTORS-BADGE:END -->

[![npm version](https://img.shields.io/npm/v/@trussworks/react-uswds)](https://www.npmjs.com/package/@trussworks/react-uswds)
[![CircleCI](https://img.shields.io/circleci/build/github/trussworks/react-uswds/develop)](https://circleci.com/gh/trussworks/react-uswds)
[![uswds version](https://img.shields.io/github/package-json/dependency-version/trussworks/react-uswds/dev/uswds)](https://www.npmjs.com/package/uswds)

[![CircleCI](https://img.shields.io/circleci/build/github/trussworks/react-uswds/main)](https://circleci.com/gh/trussworks/react-uswds)
[![npm downloads](https://img.shields.io/npm/dm/@trussworks/react-uswds)](https://www.npmjs.com/package/@trussworks/react-uswds)

**ReactUSWDS Component Library**
Expand All @@ -20,25 +22,14 @@ An example application, built with React-USWDS, can be found in the `/example` f

**Table of Contents**

- [@trussworks/react-uswds](#trussworksreact-uswds)
- [Background](#background)
- [Non-Goals](#non-goals)
- [Install](#install)
- [Pre-Release](#pre-release)
- [Usage](#usage)
- [Maintainers](#maintainers)
- [Contributing](#contributing)
- [License](#license)

## 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](./docs/contributing.md#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.

In the process, we expect to gain learnings around how to best abstract out UI code from implementation; how to better standardize and document front end code practices; and how to develop, maintain, and distribute a shared JS library in alignment with our [company values at Truss](https://truss.works/values).
- [Install](#install)
- [Pre-Release](#pre-release)
- [Usage](#usage)
- [Background](#background)
- [Non-Goals](#non-goals)
- [Maintainers](#maintainers)
- [Contributing](#contributing)
- [License](#license)

## Install

Expand All @@ -56,7 +47,7 @@ npm i @trussworks/react-uswds

### Pre-Release

Pre-release packages are published to GitHub Packages. To use, you
Pre-release packages are published to GitHub Packages every time code is pushed to the `main` branch. To use, you
will need a [GitHub access
token](https://docs.github.com/en/packages/publishing-and-managing-packages/about-github-packages#about-tokens)
with the `read:packages` scope.
Expand Down Expand Up @@ -84,13 +75,15 @@ for more detailed information.

## Usage

It is strongly suggested applications use the same version of USWDS that was used to build the version of ReactUSWDS they're using. A version mismatch may result in unexpected markup & CSS combinations.

You can import ReactUSWDS components using ES6 syntax:

```
import { Alert } from '@trussworks/react-uswds'
```

> **Warning:** Do _not_ include the full USWDS JS in your project alongside this library, as that will result in some components that use JS (such as the ComboBox) to initialize twice.
> **Warning:** Do _not_ include USWDS JS in your project alongside this library (i.e., using `import 'uswds'`), as that will result in some components that use JS (such as the ComboBox) to initialize twice.
Also make sure to include the following in order to import the compiled CSS from this project:

Expand All @@ -102,6 +95,16 @@ If you aren't already using USWDS as a dependency, you also need to import USWDS

Having issues? See [FAQs](./docs/faqs.md).

## 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](./docs/contributing.md#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.

In the process, we expect to gain learnings around how to best abstract out UI code from implementation; how to better standardize and document front end code practices; and how to develop, maintain, and distribute a shared JS library in alignment with our [company values at Truss](https://truss.works/values).

## Maintainers

- [@suzubara](https://github.com/suzubara)
Expand Down
74 changes: 74 additions & 0 deletions docs/adr/0000-template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# [short title of solved problem and solution]

- Status: [proposed | rejected | accepted | deprecated | … | superseded by [ADR-0005](0005-example.md)] <!-- optional -->
- Deciders: [list everyone involved in the decision] <!-- optional -->
- Date: [YYYY-MM-DD when the decision was last updated] <!-- optional -->

Technical Story: [description | ticket/issue URL] <!-- optional -->

## Context and Problem Statement

[Describe the context and problem statement, e.g., in free form using two to three sentences. You may want to articulate the problem in form of a question.]

## Decision Drivers <!-- optional -->

- [driver 1, e.g., a force, facing concern, …]
- [driver 2, e.g., a force, facing concern, …]
-<!-- numbers of drivers can vary -->

## Considered Options

- [option 1]
- [option 2]
- [option 3]
-<!-- numbers of options can vary -->

## Decision Outcome

Chosen option: "[option 1]", because [justification. e.g., only option, which meets k.o. criterion decision driver | which resolves force force | … | comes out best (see below)].

### Positive Consequences <!-- optional -->

- [e.g., improvement of quality attribute satisfaction, follow-up decisions required, …]
-

### Negative Consequences <!-- optional -->

- [e.g., compromising quality attribute, follow-up decisions required, …]
-

## Pros and Cons of the Options <!-- optional -->

### [option 1]

[example | description | pointer to more information | …] <!-- optional -->

- Good, because [argument a]
- Good, because [argument b]
- Bad, because [argument c]
-<!-- numbers of pros and cons can vary -->

### [option 2]

[example | description | pointer to more information | …] <!-- optional -->

- Good, because [argument a]
- Good, because [argument b]
- Bad, because [argument c]
-<!-- numbers of pros and cons can vary -->

### [option 3]

[example | description | pointer to more information | …] <!-- optional -->

- Good, because [argument a]
- Good, because [argument b]
- Bad, because [argument c]
-<!-- numbers of pros and cons can vary -->

## Links <!-- optional -->

- [Link type] [Link to ADR] <!-- example: Refined by [ADR-0005](0005-example.md) -->
-<!-- numbers of links can vary -->

<!-- markdownlint-disable-file MD013 -->
107 changes: 107 additions & 0 deletions docs/adr/0001-update-major-version-with-uswds-minor-version.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
# Increase ReactUSWDS version when updating USWDS version

- Status: Accepted
- Deciders: Maintainers
- Date: 2021-04-12

## Context and Problem Statement

As the primary driver of requirements and new development on this project, new releases of USWDS can often necessitate implementation changes of existing components in ReactUSWDS. USWDS is also listed as both a `devDependency` and `peerDependency` in this project, and these versions should always be in alignment. It is important that applications use the same version of USWDS that was used to build the version of ReactUSWDS they're using. A version mismatch may result in unexpected markup & CSS combinations.

Therefore, any time we decide to update the version of USWDS used in ReactUSWDS, we should expect to perform the following changes:

- Update the USWDS version listed in both `devDependencies` and `peerDependencies`
- Perform any API or implementation changes to existing components detailed in the USWDS release notes
- For example, from [2.10.1](https://github.com/uswds/uswds/releases/tag/v2.10.1):
> Use proper semantic markup for footer title: Now we're using a p instead of an h3 for usa-footer\_\_logo-heading since the name of the project or agency is hot a heading in this context.
The questions this ADR seeks to answer are:

- When performing a USWDS version update as described above, what kind of release should that result in for ReactUSWDS? (i.e., major / minor / patch)
- At minimum, this update will always require users to also update their version of USWDS.
- Should USWDS version updates be timed and released in sequence with the components they implement?
- For example, should we aim to release all components introduced in USWDS 2.9.0 before releasing the update to 2.10.0 and any of its components?

For reference, USWDS does mention semantic versioning in [their own release process documentation](https://github.com/uswds/uswds/wiki/Release-process#versioning), and documents breaking changes (constituting major releases) as follows:

> In most software projects, the "public API" corresponds to a single set of programming constructs, such as public classes or functions. Because the USWDS consists of tightly-bound HTML, CSS, and JavaScript, we must consider any "breaking" change to any of these as a change to the public API. For example, any of the following should trigger a major version increment:
>
> - Changing the name of any .usa- class name (documented or not)
> - Changing the way in which elements with .usa- class names are structured in HTML
> - Changing the HTML "API" for any of our interactive components, such as the accordion
## Decision Drivers

- We want to provide as many USWDS components as possible to the widest audience as possible, taking into account users who may be version-locked to a legacy USWDS version for whatever reason
- We don't want to impede development and release of USWDS components, and we aim to "catch up" to the current USWDS release eventually

## Considered Options

- Bump the ReactUSWDS major version when updating USWDS minor & major versions
- Bump the ReactUSWDS version with the same release type as USWDS
- Bump the ReactUSWDS version on a case-by-case basis

## Decision Outcome

Chosen option: **Bump the ReactUSWDS version with the same release type as USWDS _and_ always treat updating USWDS as its own issue.**

We made this decision because we want to be able to take some direction around relase type from USWDS itself, and in theory any updates in ReactUSWDS that result from a USWDS update should be similarly sized to the new USWDS version.

This decision also implies that work to implement USWDS features should be completed in sequential order of when that feature was released. For example, we should make sure ReactUSWDS has released a version that implements _all_ USWDS 2.9 components _before_ releasing any USWDS 2.10 components.

The discussion around this ADR resulted in another, more prevalent decision, which is that **updating USWDS versions should always be done as a discrete issue & PR, and _never_ coupled with other work.**

### Positive Consequences

- We don't have to worry about deciding what kind of update to release when updating our USWDS dependency to a new version.
- Most of the time, USWDS versions _should_ indicate how significant a change is.
- End users should be able to determine which version of ReactUSWDS includes which USWDS features because they will be released in the same order.

### Negative Consequences

- Since we'll be tying our versions somewhat to USWDS versions, we won't necessarily be able to easily release patches for previous versions of USWDS if needed.
- Sometimes USWDS release types don’t always seem to accurately indicate what kind of update it is (i.e., whether something is actually breaking or not), and this could result in our versions not accurately following the semantic versioning standard.
- We may occasionally block ourselves by requiring USWDS features be implemented and released in the same order they were released in USWDS (this can be mitigated by maintaining multiple develop branches for USWDS versions - see [the in-progress ADR about branching](https://github.com/trussworks/react-uswds/pull/1026)).

Ultimately, this decision is easily changed if we try this approach but discover it has unforeseen shortcomings. For example, if a USWDS patch or minor release somehow results in what feel like breaking changes for ReactUSWDS, where end users need to modify their code in order to maintain functionality, we should feel able to revisit this decision.

## Pros and Cons of the Options

### Bump the ReactUSWDS major version when updating USWDS minor & major versions

Any USWDS minor or major version updates will result in a new major update for ReactUSWDS.

Example: if we update the USWDS dependency in this project from 2.8.x to 2.9.x, we will issue a release from ReactUSWDS version 1.x.x to 2.x.x.

- Good, because it provides a consistent method of handling USWDS updates
- Good, because it will be easy to continuously support users who aren't able to update USWDS versions automatically (for example, if we need to add bug fixes to a legacy version)
- Bad, because not every minor USWDS update will necessarily introduce breaking changes
- Bad, because it doesn't provide guidance for how to handle USWDS patch updates

### Bump the ReactUSWDS version with the same release type as USWDS

Updating the USWDS dependency in this project will result in a ReactUSWDS version increase of the same type.

Examples:

- USWDS 2.10.0 -> USWDS 2.10.1 would result in ReactUSWDS 1.0.0 -> 1.0.1
- USWDS 2.10.1 -> USWDS 2.11.0 would result in ReactUSWDS 1.0.0 -> 1.1.0
- USWDS 2.11.0 -> USWDS 3.0.0 would result in ReactUSWDS 1.0.0 -> 2.0.0

Pros / Cons

- Good, because it's consistent with USWDS’s versioning
- Bad, because USWDS changes don't always mirror ReactUSWDS changes in level of significance

### Bump the ReactUSWDS version on a case-by-case basis

When updating the USWDS dependency in this project, we’ll decide what kind of ReactUSWDS release should result based on the significance of the changes involved.

- Good, because it will result in intentional updates to ReactUSWDS code whenever the USWDS version is updated
- Bad, because it may decrease consistency in how we handle USWDS updates

## Links <!-- optional -->

- Release and Branching strategy - [ADR-0002](https://github.com/trussworks/react-uswds/pull/1026)

<!-- markdownlint-disable-file MD013 -->
12 changes: 6 additions & 6 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@trussworks/react-uswds": "file:./../",
"formik": "^2.2.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"yup": "^0.32.9"
Expand All @@ -36,20 +36,20 @@
]
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^13.0.16",
"@types/jest": "^26.0.20",
"@types/jest": "^26.0.22",
"@types/node": "^14.14.31",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.1",
"@types/react-dom": "^17.0.3",
"@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.7",
"@types/yup": "^0.29.11",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.8",
"react-scripts": "^4.0.3",
"typescript": "~4.2.3"
"typescript": "~4.2.4"
},
"jest": {
"moduleNameMapper": {
Expand Down
Loading

0 comments on commit 9aee21e

Please sign in to comment.