Merge branch 'main' into sawyerh/2178-table-fullWidth

.node-version

@@ -1 +1 @@
-18.10.0
+18.14.2

docs/releasing.md

@@ -48,25 +48,34 @@ Steps for a new release (these are in the process of being automated):
    - PR should have the github label [type: release](https://github.com/trussworks/react-uswds/issues?q=label%3A%22type%3A+release%22+).
    - Paste the the changelog generated by `standard-version` in the PR description/body.
    - Ask for approvals from stakeholders, perform testing on applications, etc.
-      - It can be helpful to reviewers to provide a diff of all the files that have changed since the last release. To do this, add a compare link as a comment to the PR, or in the description/body:
-      `https://github.com/trussworks/react-uswds/compare/{previous.release.tag}...release-{new.version.number}`
+     - It can be helpful to reviewers to provide a diff of all the files that have changed since the last release. To do this, add a compare link as a comment to the PR, or in the description/body:
+       `https://github.com/trussworks/react-uswds/compare/{previous.release.tag}...release-{new.version.number}`
 
    ![image](./release_PR.png)
 
 7. Once the release PR is approved and merged, complete the release by publishing the new version
 
-   -  Create a [**new release**](https://github.com/trussworks/react-uswds/releases/new) on Github, pointed at the merge commit of the release PR.
-      - Set the tag to the version number.  
-      - Title your release with the version number. Use the same release notes as the release PR.
-      - Point the release tag at the release merge commit by selecting `Recent Commits` from the `Target` dropdown in the Github UI. You should find the `chore(release): ...` commit at or near the top.
-   - Download the tarbell for the release from the Github Action workflow
-      - After merging the release PR, a [Github Actions workflow](../.github/workflows/package-release.yml) will build and package the release. You can find the action in the list by [filtering for `Package release` actions](https://github.com/trussworks/react-uswds/actions/workflows/package-release.yml?query=is%3Asuccess). From the bottom of the workflow run's summary page, there is an artifacts section [where the artifact can be downloaded](https://github.com/actions/upload-artifact#where-does-the-upload-go).
-      - The `.tgz` will be inside of the `artifact.zip`.
-        ```
-        unzip artifact.zip
-        ```
-         > :information_source: Archive Utility by default recursively unzips the `.tgz` file when unzipping the `artifact.zip`. If you wish to use Archive Utility instead of the terminal to unzip the artifact, disable "Keep expanding if possible" in the Archive Utility preferences.
-   
+   - Create a [**new release**](https://github.com/trussworks/react-uswds/releases/new) on Github, pointed at the merge commit of the release PR.
+     - Set the tag to the version number.
+     - Title your release with the version number. Use the same release notes as the release PR.
+     - Point the release tag at the release merge commit by selecting `Recent Commits` from the `Target` dropdown in the Github UI. You should find the `chore(release): ...` commit at or near the top.
+   - Download the tarball for the release from the Github Action workflow
+
+     - After merging the release PR, a [Github Actions workflow](../.github/workflows/package-release.yml) will build and package the release. You can find the action in the list by [filtering for `Package release` actions](https://github.com/trussworks/react-uswds/actions/workflows/package-release.yml?query=is%3Asuccess). From the bottom of the workflow run's summary page, there is an artifacts section [where the artifact can be downloaded](https://github.com/actions/upload-artifact#where-does-the-upload-go).
+     - The `.tgz` will be inside of the `artifact.zip`.
+
+       ```
+       unzip artifact.zip
+       ```
+
+       > :information_source: Archive Utility by default recursively unzips the `.tgz` file when unzipping the `artifact.zip`. If you wish to use Archive Utility instead of the terminal to unzip the artifact, disable "Keep expanding if possible" in the Archive Utility preferences.
+
+     - Alternatively if you have the GitHub CLI tool you can grab the `runid` from the end of the workflow url you looked up and run the following to download the tarball.
+
+       ```sh
+       gh run download <runid>
+       ```
+
    - [Publish](https://docs.npmjs.com/cli/v6/commands/npm-publish) the new package to npm
      > :information_source: Publishing access is limited to package owners. If you need access and don't have it, please contact `@npm-admins` on Truss Slack.
      ```

package.json

@@ -63,7 +63,7 @@
     "@storybook/react": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.16",
     "@svgr/webpack": "^6.0.0",
-    "@testing-library/dom": "^8.2.0",
+    "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -93,7 +93,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-security": "^1.4.0",
     "focus-trap-react": "^8.8.1",
-    "fork-ts-checker-webpack-plugin": "^7.2.7",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "happo-plugin-storybook": "^3.0.0",
     "happo.io": "^8.3.1",
     "husky": "^8.0.3",

src/components/Modal/ModalToggleButton.test.tsx

@@ -99,15 +99,18 @@ describe('ModalToggleButton', () => {
         current: mockRef,
       }
 
+      const handleClick = jest.fn()
+
       render(
-        <ModalToggleButton modalRef={modalRef} opener>
+        <ModalToggleButton modalRef={modalRef} opener onClick={handleClick}>
           Open modal
         </ModalToggleButton>
       )
 
       const button = screen.getByRole('button', { name: 'Open modal' })
       await userEvent.click(button)
       expect(mockRef.toggleModal).toHaveBeenCalledWith(expect.anything(), true)
+      expect(handleClick).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -145,15 +148,18 @@ describe('ModalToggleButton', () => {
         current: mockRef,
       }
 
+      const handleClick = jest.fn()
+
       render(
-        <ModalToggleButton modalRef={modalRef} closer>
+        <ModalToggleButton modalRef={modalRef} closer onClick={handleClick}>
           Close modal
         </ModalToggleButton>
       )
 
       const button = screen.getByRole('button', { name: 'Close modal' })
       await userEvent.click(button)
       expect(mockRef.toggleModal).toHaveBeenCalledWith(expect.anything(), false)
+      expect(handleClick).toHaveBeenCalledTimes(1)
     })
   })
 })

src/components/Modal/ModalToggleButton.tsx

@@ -24,6 +24,10 @@ export const ModalToggleButton = ({
       return false
     }
 
+    if (props.onClick) {
+      props.onClick(e)
+    }
+
     if (opener && !closer) {
       // Only open
       modalRef.current.toggleModal(e, true)