Merge branch 'main' into dependabot-npm_and_yarn-happo-plugin-storybo…

…ok-3.3.1
trussworks · Dec 27, 2023 · 8f0eeea · 8f0eeea
2 parents 8fc1cba + a39bc7f
commit 8f0eeea
Show file tree

Hide file tree

Showing 54 changed files with 1,998 additions and 664 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -253,9 +253,56 @@
         "maintenance",
         "infra"
       ]
+    },
+    {
+      "login": "AnnaGingle",
+      "name": "Anna Gingle",
+      "avatar_url": "https://avatars.githubusercontent.com/u/48488699?v=4",
+      "profile": "https://github.com/AnnaGingle",
+      "contributions": [
+        "design",
+        "code"
+      ]
+    },
+    {
+      "login": "aybeedee",
+      "name": "Abdullah Umer",
+      "avatar_url": "https://avatars.githubusercontent.com/u/75930195?v=4",
+      "profile": "https://github.com/aybeedee",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "m7adeel",
+      "name": "Muhammad Adeel",
+      "avatar_url": "https://avatars.githubusercontent.com/u/87698014?v=4",
+      "profile": "https://github.com/m7adeel",
+      "contributions": [
+        "bug",
+        "code"
+      ]
+    },
+    {
+      "login": "vinodkv2511",
+      "name": "Vinod Krishna Vellampalli",
+      "avatar_url": "https://avatars.githubusercontent.com/u/44632502?v=4",
+      "profile": "https://github.com/vinodkv2511",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "kleinschmidtj",
+      "name": "Joe Kleinschmidt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/57681819?v=4",
+      "profile": "https://joeforyou.xyz",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
   "commitConvention": "angular",
-  "commitType": "chore(all-contributors)"
+  "commitType": "chore"
 }
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -7,9 +7,6 @@ updates:
     pull-request-branch-name:
       separator: '-'
     open-pull-requests-limit: 10
-    reviewers:
-      - "haworku"
-      - "ahobson"
     labels:
       - 'type: dependencies'
       - 'type: automerge'

diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -2,18 +2,19 @@ name: Build and Test
 
 on:
   push:
-    branches: [main]
+    branches: [ main ]
   pull_request:
-    branches: [main]
+    branches: [ main ]
   workflow_dispatch:
 
+
 jobs:
   build-and-test:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node: ['16', '18']
+        node: [ '16', '18' ]
 
     name: Node ${{ matrix.node }} tests
 
@@ -59,6 +60,9 @@ jobs:
       - name: Check format
         run: yarn format:check
 
+      - name: Build Storybook
+        run: yarn build-storybook
+
       - name: Happo
         run: yarn happo-ci
         env:

diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml
@@ -39,7 +39,7 @@ jobs:
         run: yarn install
 
       - name: Build Storybook
-        run: yarn build-storybook --modern
+        run: yarn build-storybook
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4

diff --git a/.happo.js b/.happo.js
@@ -25,6 +25,9 @@ module.exports = {
   },
   plugins: [
     // see https://github.com/happo/happo-plugin-storybook for a list of options you can pass to the plugin
-    happoPluginStorybook(),
+    happoPluginStorybook({
+      outputDir: 'storybook-static',
+      usePrebuiltPackage: true,
+    }),
   ],
 }
diff --git a/.storybook/custom-styles.scss b/.storybook/custom-styles.scss
@@ -3,7 +3,7 @@
 
 // Add custom styles for storybook implementation
 .custom-class {
-  background: #fa9441;
+  background: #bf5906;
 }
 
 .usa-color-text-visited {

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,26 +1,35 @@
 const path = require('path')
 
+const uswdsIncludePaths = [
+  './node_modules/@uswds',
+  './node_modules/@uswds/uswds/packages',
+]
+
 const webpackConfig = (config) => {
-  config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/@uswds/uswds')
+  config.resolve.alias.uswds = path.resolve(
+    __dirname,
+    '../node_modules/@uswds/uswds'
+  )
 
   config.module.rules = config.module.rules.filter(
     (rule) => rule.test.toString() !== '/\\.css$/'
   )
   config.module.rules.push({
     test: /\.(sa|sc|c)ss$/,
     exclude: /\.module\.(sa|sc|c)ss$/i,
-    use: ['style-loader', 'css-loader', {
-      loader: "sass-loader",
-      options: {
-        sourceMap: true,
-        sassOptions: {
-          includePaths: [
-            "./node_modules/@uswds",
-            "./node_modules/@uswds/uswds/packages",
-          ],
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          sassOptions: {
+            includePaths: uswdsIncludePaths,
+          },
         },
       },
-    },],
+    ],
     include: path.resolve(__dirname, '../'),
   })
 
@@ -37,7 +46,15 @@ const webpackConfig = (config) => {
           },
         },
       },
-      "sass-loader",
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          sassOptions: {
+            includePaths: uswdsIncludePaths,
+          },
+        },
+      },
     ],
   })
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,79 @@
 
 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.
 
+## [6.1.0](https://github.com/trussworks/react-uswds/compare/6.0.0...6.1.0) (2023-11-27)
+
+
+### Features
+
+* Add “use client” to fix React Server Components ([#2656](https://github.com/trussworks/react-uswds/issues/2656)) ([fad63b1](https://github.com/trussworks/react-uswds/commit/fad63b1d6f5f01ba742cdb093ee05dc117d1753b))
+* Added multiselect story ([#2648](https://github.com/trussworks/react-uswds/issues/2648)) ([03652fe](https://github.com/trussworks/react-uswds/commit/03652fe3663735229a676cda23aa751ec2ed452d))
+
+
+### Bug Fixes
+
+* **a11y:** move aria-label from svg icon to button ([#2640](https://github.com/trussworks/react-uswds/issues/2640)) ([fa18032](https://github.com/trussworks/react-uswds/commit/fa18032f538655452e501079b306e4a314480da6))
+* adding labels in combo box (default combo box, with default value) ([#2636](https://github.com/trussworks/react-uswds/issues/2636)) ([7714d14](https://github.com/trussworks/react-uswds/commit/7714d1474a3512328e6391b12434293421de408a))
+
+## [6.0.0](https://github.com/trussworks/react-uswds/compare/5.5.0...6.0.0) (2023-10-31)
+
+
+### ⚠ BREAKING CHANGES
+
+* `<TimePicker>` implementations must specify a `label` prop
+* Dropdown has been removed use `<Select>` instead
+
+### Features
+
+* Delete deprecated Dropdown component ([#2644](https://github.com/trussworks/react-uswds/issues/2644)) ([59dffd1](https://github.com/trussworks/react-uswds/commit/59dffd138f745f38a222523360a4666c0c13b030))
+* in-page navigation ([#2551](https://github.com/trussworks/react-uswds/issues/2551)) ([d330a12](https://github.com/trussworks/react-uswds/commit/d330a121b5abcc63f25882d34900fa76f6330a49))
+
+
+### Bug Fixes
+
+* Label is mandatory for TimePicker component ([#2629](https://github.com/trussworks/react-uswds/issues/2629)) ([c7f00d3](https://github.com/trussworks/react-uswds/commit/c7f00d35175d4dd0b59288eb34685edc9525cb0f))
+* readme quick links ([#2646](https://github.com/trussworks/react-uswds/issues/2646)) ([d4c0b4e](https://github.com/trussworks/react-uswds/commit/d4c0b4e2f2b2c0924c35c96bea050ad8c2a2ae19))
+* Updates sign in stories to fix aria-controls issue of show password button ([#2627](https://github.com/trussworks/react-uswds/issues/2627)) ([67c1114](https://github.com/trussworks/react-uswds/commit/67c1114ab1eea857dc76271deb5c85672505e40a))
+
+
+### Documentation & Examples
+
+* add @AnnaGingle as a contributor ([#2649](https://github.com/trussworks/react-uswds/issues/2649)) ([c307f4b](https://github.com/trussworks/react-uswds/commit/c307f4b2a4989b911dd4339da8fe0181825925b1))
+
+## [5.5.0](https://github.com/trussworks/react-uswds/compare/5.4.0...5.5.0) (2023-10-20)
+
+
+### Features
+
+* added 4 icons ([#2525](https://github.com/trussworks/react-uswds/issues/2525)) ([c489814](https://github.com/trussworks/react-uswds/commit/c48981442b4bb65b403dc2009ed3cd28a72037a9))
+* Added LanguageDefinition to exports ([#2570](https://github.com/trussworks/react-uswds/issues/2570)) ([0f4688a](https://github.com/trussworks/react-uswds/commit/0f4688ae06afadd595689055750e65624868b1bd))
+* Added required marker ([#2524](https://github.com/trussworks/react-uswds/issues/2524)) ([c5f2b40](https://github.com/trussworks/react-uswds/commit/c5f2b40b4b79784340f66d66fceea365922648f8))
+* Allow Tooltip label to be a string or React component ([#2596](https://github.com/trussworks/react-uswds/issues/2596)) ([bc01008](https://github.com/trussworks/react-uswds/commit/bc0100816a0bcba797562a02ea3b32543f850904))
+* changed template links to buttons ([#2526](https://github.com/trussworks/react-uswds/issues/2526)) ([a4b8423](https://github.com/trussworks/react-uswds/commit/a4b8423f4d3a4b8dcb89b8dab8dea4363c6b567a))
+* replaced memorable date month input with select ([#2527](https://github.com/trussworks/react-uswds/issues/2527)) ([d38b31b](https://github.com/trussworks/react-uswds/commit/d38b31be9454a03a4605f69335daf19d376020a7))
+
+
+### Bug Fixes
+
+* Language selector: add prop for display lang for bug fix ([#2622](https://github.com/trussworks/react-uswds/issues/2622)) ([df68d0d](https://github.com/trussworks/react-uswds/commit/df68d0d8bc273533dcb5a85a5a699aca12404d67))
+* Sass modules bug ([#2555](https://github.com/trussworks/react-uswds/issues/2555)) ([a1ed9f7](https://github.com/trussworks/react-uswds/commit/a1ed9f758c151b639726b16fb74327299f7c09a2))
+* **storybook:** password label set to password input field id on sign in ([#2618](https://github.com/trussworks/react-uswds/issues/2618)) ([eae195e](https://github.com/trussworks/react-uswds/commit/eae195e73b71adb9b7849a25f8836c244e49ad21))
+* **storybook:** sufficient color contrast set in custom class button ([#2619](https://github.com/trussworks/react-uswds/issues/2619)) ([2878822](https://github.com/trussworks/react-uswds/commit/28788220761dc92243302bac72c0bd2b97872192))
+* Updates file input stories to set appropriate html for value of label ([#2628](https://github.com/trussworks/react-uswds/issues/2628)) ([7f51150](https://github.com/trussworks/react-uswds/commit/7f51150f1a12df261b18eb1d6ecf9e8faa3c4c0e))
+
+
+### Documentation & Examples
+
+* add design PR review documentation ([#2615](https://github.com/trussworks/react-uswds/issues/2615)) ([2892424](https://github.com/trussworks/react-uswds/commit/289242407c718fcfc157488492b0a9a942de00c0))
+* adds in information on how to test PRs in GitHub Codespaces ([#2617](https://github.com/trussworks/react-uswds/issues/2617)) ([ef944f8](https://github.com/trussworks/react-uswds/commit/ef944f8054e15f374b07fa73c26be827a89f5ef1))
+
+## [5.4.0](https://github.com/trussworks/react-uswds/compare/5.3.1...5.4.0) (2023-09-29)
+
+
+### Features
+
+* **deps:** Allow consumers to use newer uswds minor versions ([#2600](https://github.com/trussworks/react-uswds/issues/2600)) ([36c1c8a](https://github.com/trussworks/react-uswds/commit/36c1c8ab304b95a84538d9ce69405547caee4830))
+
 ## [5.3.1](https://github.com/trussworks/react-uswds/compare/5.3.0...5.3.1) (2023-09-08)
 
 

diff --git a/CODEOWNERS b/CODEOWNERS
@@ -1,10 +1,14 @@
 # Default owners for all files
 
-* @gidjin @haworku @ahobson @brandonlenz @sirenaborracha @kylehilltruss @rogeruiz @jcbcapps
+* @trussworks/react-uswds-admins
 
-# Owners for PRs that change ONLY package.json and/or yarn.lock
+# Require design / frontend reviews on Storybook
+
+src/stories/ @trussworks/react-uswds-design-owners
+*.stories.tsx @trussworks/react-uswds-design-owners
+.storybook/ @trussworks/react-uswds-design-owners
 
-# Note: Reviewers for dependabot PRs that change these files are configured in .github/dependabot.yml under `reviewers`
+# Owners for PRs that change ONLY package.json and/or yarn.lock
 
 package.json
 yarn.lock
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # @trussworks/react-uswds
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-26-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-31-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![npm version](https://img.shields.io/npm/v/@trussworks/react-uswds)](https://www.npmjs.com/package/@trussworks/react-uswds)
@@ -48,7 +48,10 @@ npm i @trussworks/react-uswds
 
 ### USWDS
 
-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.
+It is strongly suggested applications use the same version of USWDS that was used to build the version of ReactUSWDS they're using (see this repo's uswds `devDependency` in [package.json](./package.json)).
+A version mismatch may result in unexpected markup & CSS combinations.
+For flexibility, ReactUSWDS will not trigger warnings if consumers choose to use a higher minor version of `uswds` (hence the careted uswds `peerDependency` in [package.json](./package.json)).
+If encountering unexpected markup issues when choosing _not_ to use the matching `devDependency` version of `uswds`, consumers should check whether aligning the versions resolves their issue(s).
 
 You can import ReactUSWDS components using ES6 syntax:
 
@@ -104,7 +107,7 @@ This repository is governed by the [Contributor Covenant](./CODE_OF_CONDUCT.md)
 
 ### Quick links:
 
-- [Yarn scripts](./docs/contributing#available-commands)
+- [Yarn scripts](./docs/contributing.md#available-commands)
 - [PR commit guidelines](./docs/contributing.md#opening--merging-pull-requests)
 - [Adding new components](./docs/adding_new_components.md)
 - [Testing in an application](./docs/contributing.md#testing-in-an-application)
@@ -168,6 +171,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://andyhub.com/"><img src="https://avatars.githubusercontent.com/u/764090?v=4?s=100" width="100px;" alt="Andrew Nelson"/><br /><sub><b>Andrew Nelson</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=werdnanoslen" title="Code">💻</a> <a href="https://github.com/trussworks/react-uswds/commits?author=werdnanoslen" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://sawyer.soy"><img src="https://avatars.githubusercontent.com/u/371943?v=4?s=100" width="100px;" alt="Sawyer Hollenshead"/><br /><sub><b>Sawyer Hollenshead</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=sawyerh" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://keybase.io/rpdelaney"><img src="https://avatars.githubusercontent.com/u/1139517?v=4?s=100" width="100px;" alt="Ryan Delaney"/><br /><sub><b>Ryan Delaney</b></sub></a><br /><a href="#maintenance-rpdelaney" title="Maintenance">🚧</a> <a href="#infra-rpdelaney" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/AnnaGingle"><img src="https://avatars.githubusercontent.com/u/48488699?v=4?s=100" width="100px;" alt="Anna Gingle"/><br /><sub><b>Anna Gingle</b></sub></a><br /><a href="#design-AnnaGingle" title="Design">🎨</a> <a href="https://github.com/trussworks/react-uswds/commits?author=AnnaGingle" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/aybeedee"><img src="https://avatars.githubusercontent.com/u/75930195?v=4?s=100" width="100px;" alt="Abdullah Umer"/><br /><sub><b>Abdullah Umer</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=aybeedee" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/m7adeel"><img src="https://avatars.githubusercontent.com/u/87698014?v=4?s=100" width="100px;" alt="Muhammad Adeel"/><br /><sub><b>Muhammad Adeel</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/issues?q=author%3Am7adeel" title="Bug reports">🐛</a> <a href="https://github.com/trussworks/react-uswds/commits?author=m7adeel" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/vinodkv2511"><img src="https://avatars.githubusercontent.com/u/44632502?v=4?s=100" width="100px;" alt="Vinod Krishna Vellampalli"/><br /><sub><b>Vinod Krishna Vellampalli</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=vinodkv2511" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://joeforyou.xyz"><img src="https://avatars.githubusercontent.com/u/57681819?v=4?s=100" width="100px;" alt="Joe Kleinschmidt"/><br /><sub><b>Joe Kleinschmidt</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=kleinschmidtj" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/docs/codespace_pr_reviews.md b/docs/codespace_pr_reviews.md
@@ -0,0 +1,41 @@
+# Using Codesapces to review PRs without pulling a repo to your machine
+
+1. go to the PR
+2. click the `Code` button in the top right corner
+3. click the `Codespaces` tab
+4. `Create a new codespace on ...`
+
+   ![Create a new codespace screenshot](https://github.com/trussworks/react-uswds/assets/59394696/9ebfff8a-353c-4064-bf70-8712bbfbbeda)
+
+5. **Wait** for the codespace to finish setting up, you should see stuff happening in the `Terminal`. This is the codespace installig the correct versions of packages etc will run in the environment, so it's not necessary to have those updated locally, or even have the repo on your machine locally at all. If you mess with it before it is done it might not work. If you mess this up, you might see an error about your node version.
+
+   When it is complete, you should see a message like this in the terminal. If you don't see this, you should delete the codespace and start over.
+
+   ![Github Codespace configuaration process](https://github.com/trussworks/react-uswds/assets/59394696/bdf6cd8d-22e2-4e6b-b778-65c83c51556a)
+
+6. if the yarn install in that process was not successful (should look like the image above), run `yarn install`. Wait until it is done before you do anything. takes ~5ish minutes
+7. if it is successful run `yarn storybook`. this might also take a couple of minutes to complete.
+8. when the link the storybook will be hosted on is available, you will get a message saying your application is running on port 9009 in the bottom right corner. click the `Open in Browser` button
+
+   ![application running message](https://github.com/trussworks/react-uswds/assets/59394696/9d6ac91d-5ea2-4bbc-a64d-685076444354)
+
+   If you don't see that message (it doesn't always happen) check the terminal for something like this:
+   ![storybook started message in the terminal](https://user-images.githubusercontent.com/13249580/272653168-b9d66c78-3659-4c18-a7b4-c6d493354135.png)
+
+   If you see that, go to `Ports` tab in the top bar of that bottom section where your `Terminal` is. You can find a link under the column in the table labelled `Forwarded address`. Click that to open the Storybook site being hosted on Codespaces.
+
+   ![Ports Tab table with forwarded address](https://github.com/trussworks/react-uswds/assets/59394696/a3075661-a1c2-476a-aeb9-974e6f9e036f)
+
+9. It should open a new tab that will have a blank window until the storybook is completely done running its build. Might take a couple of minutes.
+10. When the build completes, should show you the ReactUSWDS Storybook with the changes in the PR!
+
+    ![storybook running in codespaces dev environment](https://github.com/trussworks/react-uswds/assets/59394696/cdfc67de-711f-43c2-928a-284158744f1f)
+
+11. proceed as if you were running the PR on your own machine. hooray!
+12. When your review is complete, you should delete the codespace. There are costs associated with storing codespaces. **You should therefore delete any codespaces you no longer need**.
+
+![how to delete the codespace screencap](https://github.com/trussworks/react-uswds/assets/59394696/45c1ea01-28f3-4b77-a6da-b6af81546bbc)
+
+## Things to watch out for
+
+If you disrupt the installation process when you start the Codespace, it can mess up the node installation. If this happens, your best bet is to go back to the PR, open the codespaces menu, delete the codespace, and make a new one. This will not mess up the PR.