diff --git a/app/components/CredentialCard.tsx b/app/components/CredentialCard.tsx
index a27d7960f..40642b954 100644
--- a/app/components/CredentialCard.tsx
+++ b/app/components/CredentialCard.tsx
@@ -19,6 +19,7 @@ import {
import { useRef } from 'react'
import TimeAgo from './TimeAgo'
+import { ToolbarButtonGroup } from './ToolbarButtonGroup'
import type { RedactedClientCredential } from '~/routes/user.credentials/client_credentials.server'
export default function CredentialCard({
@@ -54,33 +55,35 @@ export default function CredentialCard({
-
-
- Delete
-
-
+ Delete
+
+
+
[0], 'type'>) {
+ return (
+
+ )
+}
diff --git a/app/components/tabs/index.module.scss b/app/components/tabs/index.module.scss
index 7f3fa6a34..b48b8b835 100644
--- a/app/components/tabs/index.module.scss
+++ b/app/components/tabs/index.module.scss
@@ -7,6 +7,11 @@
*/
.tabs {
+ &,
+ & :global(.usa-button-group.usa-button-group--segmented) {
+ align-items: end;
+ }
+
:global(.usa-button-group__item) {
:global(.usa-button) {
box-shadow: 0px 0px 0px 0px;
diff --git a/app/img/checkbox-indeterminate.svg b/app/img/checkbox-indeterminate.svg
deleted file mode 100644
index 9c1152983..000000000
--- a/app/img/checkbox-indeterminate.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
diff --git a/app/routes/circulars.$circularId.($version)/route.tsx b/app/routes/circulars.$circularId.($version)/route.tsx
index 5e8922f2d..d3e9ed1ff 100644
--- a/app/routes/circulars.$circularId.($version)/route.tsx
+++ b/app/routes/circulars.$circularId.($version)/route.tsx
@@ -18,6 +18,7 @@ import { MarkdownBody, PlainTextBody } from './Body'
import { FrontMatter } from './FrontMatter'
import DetailsDropdownButton from '~/components/DetailsDropdownButton'
import DetailsDropdownContent from '~/components/DetailsDropdownContent'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
import { origin } from '~/lib/env.server'
import { getCanonicalUrlHeaders, pickHeaders } from '~/lib/headers.server'
import { useSearchString } from '~/lib/utils'
@@ -72,8 +73,11 @@ export default function () {
}`
return (
<>
-
-
+
+
)}
-
+
GCN Circular {circularId}
{body}
diff --git a/app/routes/circulars._archive._index/DateSelectorMenu.tsx b/app/routes/circulars._archive._index/DateSelectorMenu.tsx
index c18d76f5a..be09a6665 100644
--- a/app/routes/circulars._archive._index/DateSelectorMenu.tsx
+++ b/app/routes/circulars._archive._index/DateSelectorMenu.tsx
@@ -42,7 +42,7 @@ function DateSelectorButton({
endDate?: string
expanded?: boolean
} & Omit[0], 'segmented' | 'children'>) {
- const slimClasses = 'height-4 padding-y-0'
+ const slimClasses = 'padding-y-1'
return (
diff --git a/app/routes/circulars._archive._index/SortSelectorButton.tsx b/app/routes/circulars._archive._index/SortSelectorButton.tsx
index 9f26823ad..24a01e106 100644
--- a/app/routes/circulars._archive._index/SortSelectorButton.tsx
+++ b/app/routes/circulars._archive._index/SortSelectorButton.tsx
@@ -31,7 +31,7 @@ function SortButton({
sort?: string
expanded?: boolean
} & Omit[0], 'segmented' | 'children'>) {
- const slimClasses = 'height-4 padding-y-0'
+ const slimClasses = 'padding-y-1'
return (
diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx
index fbfc1aca0..a3c04c0c8 100644
--- a/app/routes/circulars._archive._index/route.tsx
+++ b/app/routes/circulars._archive._index/route.tsx
@@ -17,7 +17,6 @@ import {
import {
Alert,
Button,
- ButtonGroup,
Icon,
Label,
Select,
@@ -46,6 +45,7 @@ import CircularsIndex from './CircularsIndex'
import { DateSelector } from './DateSelectorMenu'
import { SortSelector } from './SortSelectorButton'
import Hint from '~/components/Hint'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
import { origin } from '~/lib/env.server'
import { getFormDataString } from '~/lib/utils'
import { postZendeskRequest } from '~/lib/zendesk.server'
@@ -185,7 +185,7 @@ export default function () {
{requestedChangeCount > 1 ? 's' : ''}
)}
-
+
+
Search for Circulars by submitter, subject, or body text (e.g. 'Fermi
GRB').
diff --git a/app/routes/circulars.edit.$circularId/RichEditor/index.tsx b/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
index 7f6aeb961..6d959849f 100644
--- a/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
+++ b/app/routes/circulars.edit.$circularId/RichEditor/index.tsx
@@ -44,7 +44,7 @@ import iconTable from '@gitlab/svgs/dist/sprite_icons/table.svg'
function SlimButton({ className, ...props }: Parameters[0]) {
return (
)
diff --git a/app/routes/circulars.moderation._index.tsx b/app/routes/circulars.moderation._index.tsx
index 1a5af24d5..70d2af53f 100644
--- a/app/routes/circulars.moderation._index.tsx
+++ b/app/routes/circulars.moderation._index.tsx
@@ -8,7 +8,7 @@
import type { SEOHandle } from '@nasa-gcn/remix-seo'
import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
import { Form, Link, useLoaderData } from '@remix-run/react'
-import { Button, ButtonGroup, Checkbox, Grid } from '@trussworks/react-uswds'
+import { Button, Checkbox, Grid } from '@trussworks/react-uswds'
import { useState } from 'react'
import { getUser } from './_auth/user.server'
@@ -22,6 +22,7 @@ import {
moderatorGroup,
} from './circulars/circulars.server'
import SegmentedCards from '~/components/SegmentedCards'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
import type { BreadcrumbHandle } from '~/root/Title'
export const handle: BreadcrumbHandle & SEOHandle = {
@@ -74,14 +75,14 @@ export default function () {
<>
Pending Corrections
-
+
@@ -95,7 +95,7 @@ export default function EmailNotificationCard({
/>
Delete
-
+
diff --git a/app/theme.scss b/app/theme.scss
index 90b9beb9d..c7bb21afd 100644
--- a/app/theme.scss
+++ b/app/theme.scss
@@ -283,31 +283,6 @@ input.react-tags__combobox-input:focus {
font-weight: bold;
}
-/*
- * Indeterminate checkboxes.
- * FIXME: remove if/when https://github.com/uswds/uswds/pull/5549 is merged
- */
-
-.usa-checkbox__input:indeterminate {
- &:not(:disabled) {
- @include format-input {
- @include add-background-svg('checkbox-indeterminate', '~/img');
- background-size: 75%;
- background-position: center;
- background-color: #0050d8;
- box-shadow: 0 0 0 2px #0050d8;
- }
- }
- &:disabled {
- @include format-input {
- @include add-background-svg('checkbox-indeterminate', '~/img');
- background-size: 75%;
- background-position: center;
- background-color: rgba(27, 27, 27, 0.3);
- }
- }
-}
-
/*
* Hero formatting
*/
diff --git a/package-lock.json b/package-lock.json
index 3339350b6..67a806955 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
"@remix-run/css-bundle": "^2.8.1",
"@remix-run/node": "^2.8.1",
"@remix-run/react": "^2.8.1",
- "@trussworks/react-uswds": "github:lpsinger/react-uswds#dateFormat",
+ "@trussworks/react-uswds": "github:lpsinger/react-uswds#gcn",
"@xmldom/xmldom": "^0.8.10",
"aws-lambda-ses-forwarder": "github:lpsinger/aws-lambda-ses-forwarder#aws-sdk-v3",
"classnames": "^2.5.1",
@@ -113,7 +113,7 @@
"jest-transform-stub": "^2.0.0",
"lint-staged": "^15.2.5",
"lowlight": "^3.0.0",
- "nasawds": "^4.0.2-beta.1",
+ "nasawds": "^4.0.63",
"npm-run-all": "^4.1.5",
"oidc-provider": "^8.4.3",
"postcss-csso": "^6.0.1",
@@ -16214,14 +16214,15 @@
}
},
"node_modules/@trussworks/react-uswds": {
- "version": "6.2.0",
- "resolved": "git+ssh://git@github.com/lpsinger/react-uswds.git#03b023640a08afaf246873665a2f5ca5433b8056",
+ "version": "9.0.0",
+ "resolved": "git+ssh://git@github.com/lpsinger/react-uswds.git#554d643a710eaf134c76f8cd7b2a78d66788a709",
"license": "Apache-2.0",
"engines": {
- "node": ">= 16.20.0"
+ "node": ">= 18"
},
"peerDependencies": {
"@uswds/uswds": "^3.7.1",
+ "focus-trap-react": "^10.2.3",
"react": "^16.x || ^17.x || ^18.x",
"react-dom": "^16.x || ^17.x || ^18.x"
}
@@ -16858,9 +16859,10 @@
"dev": true
},
"node_modules/@uswds/uswds": {
- "version": "3.7.1",
- "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.7.1.tgz",
- "integrity": "sha512-32u2S50bf5dwIujebqL+f1Jgx2rmRrpxcaccSZzdo3Qv9HaDUdcmeavlrxHqN30edHc7p8kRPjvjevOmOJKB7w==",
+ "version": "3.8.0",
+ "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.8.0.tgz",
+ "integrity": "sha512-rMwCXe/u4HGkfskvS1Iuabapi/EXku3ChaIFW7y/dUhc7R1TXQhbbfp8YXEjmXPF0yqJnv9T08WPgS0fQqWZ8w==",
+ "license": "SEE LICENSE IN LICENSE.md",
"peer": true,
"dependencies": {
"classlist-polyfill": "1.2.0",
@@ -18536,6 +18538,7 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
"integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
+ "license": "Unlicense",
"peer": true
},
"node_modules/classnames": {
@@ -19886,6 +19889,7 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
"integrity": "sha512-QCqAWP3kwj8Gz9UXncVXQGdrhnWxD8SQBSeZp5pOsyCcQ6RpL738L1/tfuwBiMi6F1fYkxqPnBrFBR4L+f49Cg==",
+ "license": "CC0-1.0",
"peer": true,
"engines": {
"node": ">=4.0.0"
@@ -21643,6 +21647,32 @@
"integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
"dev": true
},
+ "node_modules/focus-trap": {
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+ "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "tabbable": "^6.2.0"
+ }
+ },
+ "node_modules/focus-trap-react": {
+ "version": "10.2.3",
+ "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.2.3.tgz",
+ "integrity": "sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==",
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "focus-trap": "^7.5.4",
+ "tabbable": "^6.2.0"
+ },
+ "peerDependencies": {
+ "prop-types": "^15.8.1",
+ "react": ">=16.3.0",
+ "react-dom": ">=16.3.0"
+ }
+ },
"node_modules/follow-redirects": {
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -25224,6 +25254,7 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/keyboardevent-key-polyfill/-/keyboardevent-key-polyfill-1.1.0.tgz",
"integrity": "sha512-NTDqo7XhzL1fqmUzYroiyK2qGua7sOMzLav35BfNA/mPUSCtw8pZghHFMTYR9JdnJ23IQz695FcaM6EE6bpbFQ==",
+ "license": "CC0-1.0",
"peer": true
},
"node_modules/keygrip": {
@@ -26419,6 +26450,7 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.2.0.tgz",
"integrity": "sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==",
+ "license": "MIT",
"peer": true
},
"node_modules/mdast-util-definitions": {
@@ -27924,10 +27956,11 @@
"optional": true
},
"node_modules/nasawds": {
- "version": "4.0.2-beta.1",
- "resolved": "https://registry.npmjs.org/nasawds/-/nasawds-4.0.2-beta.1.tgz",
- "integrity": "sha512-iLfAarVN3Q4UdG2Chfl6Ay1qoq2QPeGWupaFXf+7UO3Uaaqxihl6T2jn+/gofPckg5RN9vrx3aVlfRjStA+b5w==",
- "dev": true
+ "version": "4.0.63",
+ "resolved": "https://registry.npmjs.org/nasawds/-/nasawds-4.0.63.tgz",
+ "integrity": "sha512-3nZn1ZZuTGteaiuDB0E56EEk0c9OmbSgZsUkNIE6/lGz7a7ebvzmptgow1KXBBjjGykLZx/jf1aUhyuvC10QSg==",
+ "dev": true,
+ "license": "CC0-1.0"
},
"node_modules/natural-compare": {
"version": "1.4.0",
@@ -29891,6 +29924,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/receptor/-/receptor-1.0.0.tgz",
"integrity": "sha512-yvVEqVQDNzEmGkluCkEdbKSXqZb3WGxotI/VukXIQ+4/BXEeXVjWtmC6jWaR1BIsmEAGYQy3OTaNgDj2Svr01w==",
+ "license": "CC0-1.0",
"peer": true,
"dependencies": {
"element-closest": "^2.0.1",
@@ -30629,6 +30663,7 @@
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/resolve-id-refs/-/resolve-id-refs-0.1.0.tgz",
"integrity": "sha512-hNS03NEmVpJheF7yfyagNh57XuKc0z+NkSO0oBbeO67o6IJKoqlDfnNIxhjp7aTWwjmSWZQhtiGrOgZXVyM90w==",
+ "license": "CC0-1.0",
"peer": true
},
"node_modules/resolve-pkg-maps": {
@@ -32004,6 +32039,13 @@
"url": "https://opencollective.com/unts"
}
},
+ "node_modules/tabbable": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+ "license": "MIT",
+ "peer": true
+ },
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index 6240886e3..931b7db0e 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
"@remix-run/css-bundle": "^2.8.1",
"@remix-run/node": "^2.8.1",
"@remix-run/react": "^2.8.1",
- "@trussworks/react-uswds": "github:lpsinger/react-uswds#dateFormat",
+ "@trussworks/react-uswds": "github:lpsinger/react-uswds#gcn",
"@xmldom/xmldom": "^0.8.10",
"aws-lambda-ses-forwarder": "github:lpsinger/aws-lambda-ses-forwarder#aws-sdk-v3",
"classnames": "^2.5.1",
@@ -131,7 +131,7 @@
"jest-transform-stub": "^2.0.0",
"lint-staged": "^15.2.5",
"lowlight": "^3.0.0",
- "nasawds": "^4.0.2-beta.1",
+ "nasawds": "^4.0.63",
"npm-run-all": "^4.1.5",
"oidc-provider": "^8.4.3",
"postcss-csso": "^6.0.1",