diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 725f476e..5448bbe7 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -46,13 +46,6 @@ updates:
- dependency-name: '@storybook/test'
- dependency-name: 'storybook'
- dependency-name: 'typescript'
- - dependency-name: '@typescript-eslint/eslint-plugin'
- - dependency-name: '@typescript-eslint/parser'
- - dependency-name: 'eslint-config-standard-with-typescript'
- - dependency-name: 'eslint-plugin-import'
- - dependency-name: 'eslint-plugin-n'
- - dependency-name: 'eslint-plugin-promise'
- - dependency-name: 'eslint-plugin-storybook'
- dependency-name: 'rollup'
- dependency-name: 'rollup-plugin-dts'
- package-ecosystem: 'npm'
diff --git a/README.md b/README.md
index 88da197e..a733ca1e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
- 
+
@@ -18,13 +18,12 @@ In the beginning, Comet was built with a primary focus of USWDS. Today however,
## Overview
-[comet-uswds](https://github.com/MetroStar/comet/tree/main/packages/comet-uswds) - The base USWDS component library implemented in React with TypeScript.
+Comet consists of multiple packages, each providing specific functionality. These packages can be used independently or all together, depending on your use case. See below for more details on each package:
-[comet-data-viz](https://github.com/MetroStar/comet/tree/main/packages/comet-data-viz) - A set of Victory Chart components provided as a Comet wrapper.
-
-[comet-extras](https://github.com/MetroStar/comet/tree/main/packages/comet-extras) - A set of custom components, intended to fill in the gaps where USWDS does not provide an implementation.
-
-[comet-cli](https://github.com/MetroStar/comet/tree/main/packages/comet-cli) - A CLI for creating Comet Apps.
+- [comet-uswds](https://github.com/MetroStar/comet/tree/main/packages/comet-uswds) - The base USWDS component library implemented in React with TypeScript.
+- [comet-data-viz](https://github.com/MetroStar/comet/tree/main/packages/comet-data-viz) - A set of Victory Chart components provided as a Comet wrapper.
+- [comet-extras](https://github.com/MetroStar/comet/tree/main/packages/comet-extras) - A set of custom components, intended to fill in the gaps where USWDS does not provide an implementation.
+- [comet-cli](https://github.com/MetroStar/comet/tree/main/packages/comet-cli) - A CLI for creating Comet Apps.
## Getting Started
diff --git a/package-lock.json b/package-lock.json
index 6488ffde..cb99db4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
"workspaces": [
"packages/*"
],
+ "dependencies": {
+ "@rollup/rollup-linux-x64-gnu": "4.20.0"
+ },
"devDependencies": {
"@eslint/js": "^9.8.0",
"@rollup/plugin-commonjs": "^26.0.1",
@@ -29,7 +32,7 @@
"@types/node": "18.16.1",
"@types/react": "18.2.17",
"@vitejs/plugin-react": "^4.3.1",
- "@vitest/coverage-v8": "^2.0.4",
+ "@vitest/coverage-v8": "^2.0.5",
"eslint": "^9.8.0",
"eslint-plugin-react": "^7.35.0",
"jest-axe": "^9.0.0",
@@ -49,7 +52,7 @@
"vitest": "^2.0.1"
},
"optionalDependencies": {
- "@rollup/rollup-linux-x64-gnu": "4.19.1"
+ "@rollup/rollup-linux-x64-gnu": "4.20.0"
}
},
"node_modules/@adobe/css-tools": {
@@ -2663,9 +2666,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
- "version": "4.19.1",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.19.1.tgz",
- "integrity": "sha512-XUXeI9eM8rMP8aGvii/aOOiMvTs7xlCosq9xCjcqI9+5hBxtjDpD+7Abm1ZhVIFE1J2h2VIg0t2DX/gjespC2Q==",
+ "version": "4.20.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.20.0.tgz",
+ "integrity": "sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==",
"cpu": [
"x64"
],
@@ -3490,11 +3493,11 @@
}
},
"node_modules/@tanstack/react-table": {
- "version": "8.19.3",
- "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.19.3.tgz",
- "integrity": "sha512-MtgPZc4y+cCRtU16y1vh1myuyZ2OdkWgMEBzyjYsoMWMicKZGZvcDnub3Zwb6XF2pj9iRMvm1SO1n57lS0vXLw==",
+ "version": "8.20.1",
+ "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.1.tgz",
+ "integrity": "sha512-PJK+07qbengObe5l7c8vCdtefXm8cyR4i078acWrHbdm8JKw1ES7YpmOtVt9ALUVEEFAHscdVpGRhRgikgFMbQ==",
"dependencies": {
- "@tanstack/table-core": "8.19.3"
+ "@tanstack/table-core": "8.20.1"
},
"engines": {
"node": ">=12"
@@ -3509,9 +3512,9 @@
}
},
"node_modules/@tanstack/table-core": {
- "version": "8.19.3",
- "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.19.3.tgz",
- "integrity": "sha512-IqREj9ADoml9zCAouIG/5kCGoyIxPFdqdyoxis9FisXFi5vT+iYfEfLosq4xkU/iDbMcEuAj+X8dWRLvKYDNoQ==",
+ "version": "8.20.1",
+ "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.1.tgz",
+ "integrity": "sha512-5Ly5TIRHnWH7vSDell9B/OVyV380qqIJVg7H7R7jU4fPEmOD4smqAX7VRflpYI09srWR8aj5OLD2Ccs1pI5mTg==",
"engines": {
"node": ">=12"
},
@@ -4360,9 +4363,10 @@
}
},
"node_modules/@vitest/coverage-v8": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.0.5.tgz",
+ "integrity": "sha512-qeFcySCg5FLO2bHHSa0tAZAOnAUbp4L6/A5JDuj9+bt53JREl8hpLjLHEWF0e/gWc8INVpJaqA7+Ene2rclpZg==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.3.0",
"@bcoe/v8-coverage": "^0.2.3",
@@ -4381,7 +4385,7 @@
"url": "https://opencollective.com/vitest"
},
"peerDependencies": {
- "vitest": "2.0.4"
+ "vitest": "2.0.5"
}
},
"node_modules/@vitest/expect": {
@@ -4398,9 +4402,10 @@
}
},
"node_modules/@vitest/pretty-format": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz",
+ "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==",
"dev": true,
- "license": "MIT",
"dependencies": {
"tinyrainbow": "^1.2.0"
},
@@ -4409,11 +4414,12 @@
}
},
"node_modules/@vitest/runner": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.5.tgz",
+ "integrity": "sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==",
"dev": true,
- "license": "MIT",
"dependencies": {
- "@vitest/utils": "2.0.4",
+ "@vitest/utils": "2.0.5",
"pathe": "^1.1.2"
},
"funding": {
@@ -4421,11 +4427,12 @@
}
},
"node_modules/@vitest/runner/node_modules/@vitest/utils": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz",
+ "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==",
"dev": true,
- "license": "MIT",
"dependencies": {
- "@vitest/pretty-format": "2.0.4",
+ "@vitest/pretty-format": "2.0.5",
"estree-walker": "^3.0.3",
"loupe": "^3.1.1",
"tinyrainbow": "^1.2.0"
@@ -4436,26 +4443,29 @@
},
"node_modules/@vitest/runner/node_modules/estree-walker": {
"version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+ "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/@vitest/runner/node_modules/loupe": {
"version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+ "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
"dev": true,
- "license": "MIT",
"dependencies": {
"get-func-name": "^2.0.1"
}
},
"node_modules/@vitest/snapshot": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.5.tgz",
+ "integrity": "sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==",
"dev": true,
- "license": "MIT",
"dependencies": {
- "@vitest/pretty-format": "2.0.4",
+ "@vitest/pretty-format": "2.0.5",
"magic-string": "^0.30.10",
"pathe": "^1.1.2"
},
@@ -5152,8 +5162,9 @@
},
"node_modules/cac": {
"version": "6.7.14",
+ "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+ "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
"dev": true,
- "license": "MIT",
"engines": {
"node": ">=8"
}
@@ -13476,9 +13487,10 @@
}
},
"node_modules/vite-node": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.5.tgz",
+ "integrity": "sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==",
"dev": true,
- "license": "MIT",
"dependencies": {
"cac": "^6.7.14",
"debug": "^4.3.5",
@@ -13541,17 +13553,18 @@
}
},
"node_modules/vitest": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.5.tgz",
+ "integrity": "sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.3.0",
- "@vitest/expect": "2.0.4",
- "@vitest/pretty-format": "^2.0.4",
- "@vitest/runner": "2.0.4",
- "@vitest/snapshot": "2.0.4",
- "@vitest/spy": "2.0.4",
- "@vitest/utils": "2.0.4",
+ "@vitest/expect": "2.0.5",
+ "@vitest/pretty-format": "^2.0.5",
+ "@vitest/runner": "2.0.5",
+ "@vitest/snapshot": "2.0.5",
+ "@vitest/spy": "2.0.5",
+ "@vitest/utils": "2.0.5",
"chai": "^5.1.1",
"debug": "^4.3.5",
"execa": "^8.0.1",
@@ -13562,7 +13575,7 @@
"tinypool": "^1.0.0",
"tinyrainbow": "^1.2.0",
"vite": "^5.0.0",
- "vite-node": "2.0.4",
+ "vite-node": "2.0.5",
"why-is-node-running": "^2.3.0"
},
"bin": {
@@ -13577,8 +13590,8 @@
"peerDependencies": {
"@edge-runtime/vm": "*",
"@types/node": "^18.0.0 || >=20.0.0",
- "@vitest/browser": "2.0.4",
- "@vitest/ui": "2.0.4",
+ "@vitest/browser": "2.0.5",
+ "@vitest/ui": "2.0.5",
"happy-dom": "*",
"jsdom": "*"
},
@@ -13604,12 +13617,13 @@
}
},
"node_modules/vitest/node_modules/@vitest/expect": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
+ "integrity": "sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==",
"dev": true,
- "license": "MIT",
"dependencies": {
- "@vitest/spy": "2.0.4",
- "@vitest/utils": "2.0.4",
+ "@vitest/spy": "2.0.5",
+ "@vitest/utils": "2.0.5",
"chai": "^5.1.1",
"tinyrainbow": "^1.2.0"
},
@@ -13618,9 +13632,10 @@
}
},
"node_modules/vitest/node_modules/@vitest/spy": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz",
+ "integrity": "sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==",
"dev": true,
- "license": "MIT",
"dependencies": {
"tinyspy": "^3.0.0"
},
@@ -13629,11 +13644,12 @@
}
},
"node_modules/vitest/node_modules/@vitest/utils": {
- "version": "2.0.4",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz",
+ "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==",
"dev": true,
- "license": "MIT",
"dependencies": {
- "@vitest/pretty-format": "2.0.4",
+ "@vitest/pretty-format": "2.0.5",
"estree-walker": "^3.0.3",
"loupe": "^3.1.1",
"tinyrainbow": "^1.2.0"
@@ -13644,16 +13660,18 @@
},
"node_modules/vitest/node_modules/assertion-error": {
"version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+ "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
"dev": true,
- "license": "MIT",
"engines": {
"node": ">=12"
}
},
"node_modules/vitest/node_modules/chai": {
"version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
+ "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
"dev": true,
- "license": "MIT",
"dependencies": {
"assertion-error": "^2.0.1",
"check-error": "^2.1.1",
@@ -13667,24 +13685,27 @@
},
"node_modules/vitest/node_modules/check-error": {
"version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+ "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
"dev": true,
- "license": "MIT",
"engines": {
"node": ">= 16"
}
},
"node_modules/vitest/node_modules/deep-eql": {
"version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+ "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
"dev": true,
- "license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/vitest/node_modules/estree-walker": {
"version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+ "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true,
- "license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0"
}
@@ -13743,8 +13764,9 @@
},
"node_modules/vitest/node_modules/loupe": {
"version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+ "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
"dev": true,
- "license": "MIT",
"dependencies": {
"get-func-name": "^2.0.1"
}
@@ -13801,8 +13823,9 @@
},
"node_modules/vitest/node_modules/pathval": {
"version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+ "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
"dev": true,
- "license": "MIT",
"engines": {
"node": ">= 14.16"
}
@@ -13831,8 +13854,9 @@
},
"node_modules/vitest/node_modules/tinyspy": {
"version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
+ "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
"dev": true,
- "license": "MIT",
"engines": {
"node": ">=14.0.0"
}
@@ -14260,12 +14284,12 @@
"version": "1.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@tanstack/react-table": "8.19.3",
+ "@tanstack/react-table": "8.20.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"peerDependencies": {
- "@tanstack/react-table": "8.19.3",
+ "@tanstack/react-table": "8.20.1",
"react": "^18.2.0"
}
},
diff --git a/package.json b/package.json
index e4a289a9..c9ed80e5 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
"@types/node": "18.16.1",
"@types/react": "18.2.17",
"@vitejs/plugin-react": "^4.3.1",
- "@vitest/coverage-v8": "^2.0.4",
+ "@vitest/coverage-v8": "^2.0.5",
"eslint": "^9.8.0",
"eslint-plugin-react": "^7.35.0",
"jest-axe": "^9.0.0",
@@ -62,7 +62,7 @@
"vitest": "^2.0.1"
},
"optionalDependencies": {
- "@rollup/rollup-linux-x64-gnu": "4.19.1"
+ "@rollup/rollup-linux-x64-gnu": "4.20.0"
},
"overrides": {
"braces": "3.0.3",
diff --git a/packages/comet-extras/package.json b/packages/comet-extras/package.json
index 6e703616..334a2ee2 100644
--- a/packages/comet-extras/package.json
+++ b/packages/comet-extras/package.json
@@ -17,12 +17,12 @@
],
"types": "./dist/index.d.ts",
"dependencies": {
- "@tanstack/react-table": "8.19.3",
+ "@tanstack/react-table": "8.20.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"peerDependencies": {
- "@tanstack/react-table": "8.19.3",
+ "@tanstack/react-table": "8.20.1",
"react": "^18.2.0"
},
"repository": {
diff --git a/packages/comet-uswds/src/components/modal/modal.stories.tsx b/packages/comet-uswds/src/components/modal/modal.stories.tsx
index af0ed607..1da80c83 100644
--- a/packages/comet-uswds/src/components/modal/modal.stories.tsx
+++ b/packages/comet-uswds/src/components/modal/modal.stories.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
import { StoryFn, Meta } from '@storybook/react';
import { Modal, ModalProps } from './modal';
-import modal from '@uswds/uswds/js/usa-modal';
+import useModal from '../../hooks/use-modal';
const meta: Meta = {
title: 'USWDS/Modal',
@@ -86,6 +86,7 @@ LargeModal.args = {
};
const CustomCloseTemplate: StoryFn = (args: ModalProps) => {
+ const { toggleModal } = useModal();
const footer = (
-
@@ -110,7 +111,7 @@ const CustomCloseTemplate: StoryFn = (args: ModalProps) => {
console.log('Continue clicked...');
// Do something
- modal.toggleModal.call(modal, false); // Manually toggle modal after work complete
+ toggleModal(false);
};
// Have to add event listeners after components load due to the way the modal works
diff --git a/packages/comet-uswds/src/hooks/index.ts b/packages/comet-uswds/src/hooks/index.ts
new file mode 100644
index 00000000..99f1b165
--- /dev/null
+++ b/packages/comet-uswds/src/hooks/index.ts
@@ -0,0 +1,2 @@
+export { default as useHeader } from './use-header';
+export { default as useModal } from './use-modal';
diff --git a/packages/comet-uswds/src/hooks/use-header.test.tsx b/packages/comet-uswds/src/hooks/use-header.test.tsx
new file mode 100644
index 00000000..96a61bdc
--- /dev/null
+++ b/packages/comet-uswds/src/hooks/use-header.test.tsx
@@ -0,0 +1,24 @@
+import { act, renderHook } from '@testing-library/react';
+import useHeader from './use-header';
+
+describe('useModal', () => {
+ test('should call header on successfully', async () => {
+ const { result } = renderHook(() => useHeader());
+
+ await act(async () => {
+ const body = document.createElement('body');
+ result.current.on(body);
+ });
+ expect(result.current.on).toBeTruthy();
+ });
+
+ test('should call header off successfully', async () => {
+ const { result } = renderHook(() => useHeader());
+
+ await act(async () => {
+ const body = document.createElement('body');
+ result.current.off(body);
+ });
+ expect(result.current.off).toBeTruthy();
+ });
+});
diff --git a/packages/comet-uswds/src/hooks/use-header.tsx b/packages/comet-uswds/src/hooks/use-header.tsx
new file mode 100644
index 00000000..4b02f8c3
--- /dev/null
+++ b/packages/comet-uswds/src/hooks/use-header.tsx
@@ -0,0 +1,15 @@
+import header from '@uswds/uswds/js/usa-header';
+
+const useHeader = () => {
+ const on = (element: HTMLElement): void => {
+ header.on(element);
+ };
+
+ const off = (element: HTMLElement): void => {
+ header.off(element);
+ };
+
+ return { on, off };
+};
+
+export default useHeader;
diff --git a/packages/comet-uswds/src/hooks/use-modal.test.tsx b/packages/comet-uswds/src/hooks/use-modal.test.tsx
new file mode 100644
index 00000000..3942ff56
--- /dev/null
+++ b/packages/comet-uswds/src/hooks/use-modal.test.tsx
@@ -0,0 +1,13 @@
+import { act, renderHook } from '@testing-library/react';
+import useModal from './use-modal';
+
+describe('useModal', () => {
+ test('should call toggleModal successfully', async () => {
+ const { result } = renderHook(() => useModal());
+
+ await act(async () => {
+ result.current.toggleModal(false);
+ });
+ expect(result.current.toggleModal).toBeTruthy();
+ });
+});
diff --git a/packages/comet-uswds/src/hooks/use-modal.tsx b/packages/comet-uswds/src/hooks/use-modal.tsx
new file mode 100644
index 00000000..1e9dff15
--- /dev/null
+++ b/packages/comet-uswds/src/hooks/use-modal.tsx
@@ -0,0 +1,11 @@
+import modal from '@uswds/uswds/js/usa-modal';
+
+const useModal = () => {
+ const toggleModal = (show: boolean): void => {
+ modal.toggleModal.call(modal, show);
+ };
+
+ return { toggleModal };
+};
+
+export default useModal;
diff --git a/packages/comet-uswds/src/index.ts b/packages/comet-uswds/src/index.ts
index 07635cbb..f76fd6f1 100644
--- a/packages/comet-uswds/src/index.ts
+++ b/packages/comet-uswds/src/index.ts
@@ -1 +1,2 @@
export * from './components';
+export * from './hooks';
diff --git a/packages/comet-uswds/src/uswds/types.d.ts b/packages/comet-uswds/src/uswds/types.d.ts
index 62d2426e..9e8c443b 100644
--- a/packages/comet-uswds/src/uswds/types.d.ts
+++ b/packages/comet-uswds/src/uswds/types.d.ts
@@ -6,6 +6,7 @@ declare module '@uswds/uswds/js/usa-combo-box';
declare module '@uswds/uswds/js/usa-date-picker';
declare module '@uswds/uswds/js/usa-date-range-picker';
declare module '@uswds/uswds/js/usa-file-input';
+declare module '@uswds/uswds/js/usa-header';
declare module '@uswds/uswds/js/usa-modal';
declare module '@uswds/uswds/js/usa-nav';
declare module '@uswds/uswds/js/usa-table';