From 4062f9dea98b2cd8d40d7d366321d88975b73ca8 Mon Sep 17 00:00:00 2001 From: Katie Campbell Downie Date: Mon, 28 Oct 2024 17:26:54 -0500 Subject: [PATCH 01/42] Add Sign In button to header; add /signin page with basic form; redirect to /query from signin page button click --- .../query/components/header/header.module.css | 11 +++ .../app/query/components/header/header.tsx | 26 +++++- query-connector/src/app/signin/page.tsx | 86 +++++++++++++++++++ .../src/app/signin/signinPage.module.scss | 37 ++++++++ query-connector/src/styles/custom-styles.scss | 1 + 5 files changed, 158 insertions(+), 3 deletions(-) create mode 100644 query-connector/src/app/signin/page.tsx create mode 100644 query-connector/src/app/signin/signinPage.module.scss diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index e1ab821f2..355aecad3 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -5,4 +5,15 @@ color: white !important; padding: 0px !important; font: inherit !important; + margin-right: 1rem !important; +} + +.signinButton { + padding: 0.75rem 1.25rem !important; + cursor: pointer; + background: none !important; + border: 2px solid white !important; + border-radius: 4px !important; + color: white !important; + font: inherit !important; } diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 5667dfab3..40b5fd83b 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -2,9 +2,10 @@ import { useEffect, useRef, useState } from "react"; import { Modal, ModalButton } from "../../designSystem/Modal"; -import { ModalRef } from "@trussworks/react-uswds"; +import { ModalRef, Button } from "@trussworks/react-uswds"; import styles from "./header.module.css"; import { metadata } from "@/app/constants"; +import { useRouter, usePathname } from "next/navigation"; /** * Produces the header. * @returns The HeaderComponent component. @@ -17,6 +18,13 @@ export default function HeaderComponent() { setIsClient(true); }, []); + const router = useRouter(); + const path = usePathname() + + const handleClick = () => { + router.push(`/signin`); + }; + return ( <>
@@ -33,7 +41,7 @@ export default function HeaderComponent() { {metadata.title} @@ -48,13 +56,25 @@ export default function HeaderComponent() { marginLeft: "auto", }} > - {isClient && ( + {(path != '/signin' && isClient) && ( )} + {/* TODO: Rework show/hide rules based on actual auth status */} + {(path != '/signin' && path != '/query') && ( + + )}
diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx new file mode 100644 index 000000000..164a24f9d --- /dev/null +++ b/query-connector/src/app/signin/page.tsx @@ -0,0 +1,86 @@ +"use client"; +import React, { useState } from "react"; + +import { + Fieldset, + Label, + TextInput +} from "@trussworks/react-uswds"; + +import { useRouter } from "next/navigation"; +import Image from "next/image"; +import styles from "./signinPage.module.scss"; + +/** + * The sign-in page for Query Connector. + * @returns The SigninPage component. + */ +export default function SigninPage() { + const router = useRouter(); + + const [userName, setUserName] = useState(""); + const [password, setPassword] = useState(""); + + const handleSignin = (event: React.FormEvent) => { + event.preventDefault(); + router.push(`/query`); + } + + return ( +
+
+ Graphic illustrating what TEFCA is +
+
+
+
+
+

Sign in to Query Connector

+

This workspace allows you to sign in with your organizational account.

+
+
+ + { + setUserName(event.target.value); + }} + /> + + { + setPassword(event.target.value); + }} + /> +
+ +
+
+
+
+ ); +} diff --git a/query-connector/src/app/signin/signinPage.module.scss b/query-connector/src/app/signin/signinPage.module.scss new file mode 100644 index 000000000..f2786be44 --- /dev/null +++ b/query-connector/src/app/signin/signinPage.module.scss @@ -0,0 +1,37 @@ +@use "../../styles/_variables" as *; + +.column { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.column-left { + background: #adcfdc; +} + +.signin-button { + margin: 1rem 0rem !important; + width: 100%; +} + +.card { + min-width: 10rem; + max-width: 50%; + color: #5c5c5c; +} + +.image { + max-width: 60%; + max-height: 60%; + min-width: 10rem; +} + +.formText { + text-align: center; +} + +.formInput { + margin: 0.5rem 0rem; +} diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss index 326081d02..b2b05a5a6 100644 --- a/query-connector/src/styles/custom-styles.scss +++ b/query-connector/src/styles/custom-styles.scss @@ -191,6 +191,7 @@ body { grid-template-columns: 1fr; // Defines a single column justify-content: center; // Centers the column in the container background-color: rgba(247, 249, 250, 1); + flex: auto; // Sizes main-body to fill space between header and footer } .home { From 291fa80bccdeae1738392c7e59de46d8fdca89fc Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 28 Oct 2024 22:34:53 +0000 Subject: [PATCH 02/42] [pre-commit.ci] auto fixes from pre-commit hooks --- .../app/query/components/header/header.tsx | 24 +++++++------ query-connector/src/app/signin/page.tsx | 36 +++++++++---------- 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 40b5fd83b..6c2714b41 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -19,7 +19,7 @@ export default function HeaderComponent() { }, []); const router = useRouter(); - const path = usePathname() + const path = usePathname(); const handleClick = () => { router.push(`/signin`); @@ -41,7 +41,11 @@ export default function HeaderComponent() { {metadata.title} @@ -56,7 +60,7 @@ export default function HeaderComponent() { marginLeft: "auto", }} > - {(path != '/signin' && isClient) && ( + {path != "/signin" && isClient && ( )} {/* TODO: Rework show/hide rules based on actual auth status */} - {(path != '/signin' && path != '/query') && ( - diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx index 164a24f9d..bdac8a8c8 100644 --- a/query-connector/src/app/signin/page.tsx +++ b/query-connector/src/app/signin/page.tsx @@ -1,11 +1,7 @@ "use client"; import React, { useState } from "react"; -import { - Fieldset, - Label, - TextInput -} from "@trussworks/react-uswds"; +import { Fieldset, Label, TextInput } from "@trussworks/react-uswds"; import { useRouter } from "next/navigation"; import Image from "next/image"; @@ -24,26 +20,29 @@ export default function SigninPage() { const handleSignin = (event: React.FormEvent) => { event.preventDefault(); router.push(`/query`); - } + }; return (
- Graphic illustrating what TEFCA is + Graphic illustrating what TEFCA is

Sign in to Query Connector

-

This workspace allows you to sign in with your organizational account.

+

+ This workspace allows you to sign in with your organizational + account. +

- From b9ee4b268e0c6c6722e46e952753b7428b9855a4 Mon Sep 17 00:00:00 2001 From: Katie Campbell Downie Date: Tue, 29 Oct 2024 13:02:58 -0500 Subject: [PATCH 03/42] Add gear icon for menu dropdown; go to landing page on Log Out click --- .../query/components/header/header.module.css | 36 ++++++++++++++ .../app/query/components/header/header.tsx | 48 ++++++++++++++++++- 2 files changed, 83 insertions(+), 1 deletion(-) diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index 355aecad3..cbcf4420b 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -17,3 +17,39 @@ color: white !important; font: inherit !important; } + +.menuButton { + cursor: pointer; + background: none !important; + border: none !important; + color: white !important; + padding: 0px !important; + font: inherit !important; + margin: 0 !important; +} + +.menuDropdownContainer { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; +} + +.menuDropdown { + border-radius: 4px !important; + padding: 0.5rem !important; + background: #ffffff !important; + margin: 3.5rem 3rem 0rem 0rem !important; + width: 10rem !important; + box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16); +} + +.menuItem { + color: black !important; + text-decoration: none; + padding: 0.5rem 1rem !important; +} + +.menuItem:hover { + text-decoration: none !important; +} diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 6c2714b41..2fa08b118 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react"; import { Modal, ModalButton } from "../../designSystem/Modal"; -import { ModalRef, Button } from "@trussworks/react-uswds"; +import { ModalRef, Button, Icon } from "@trussworks/react-uswds"; import styles from "./header.module.css"; import { metadata } from "@/app/constants"; import { useRouter, usePathname } from "next/navigation"; @@ -13,6 +13,7 @@ import { useRouter, usePathname } from "next/navigation"; export default function HeaderComponent() { const modalRef = useRef(null); const [isClient, setIsClient] = useState(false); + const [showMenu, setShowMenu] = useState(false); useEffect(() => { setIsClient(true); @@ -25,6 +26,10 @@ export default function HeaderComponent() { router.push(`/signin`); }; + const toggleMenuDropdown = () => { + setShowMenu(!showMenu) + } + return ( <>
@@ -34,6 +39,7 @@ export default function HeaderComponent() { display: "flex", alignItems: "center", justifyContent: "space-between", + height: "4.5rem !important", }} >
@@ -58,6 +64,7 @@ export default function HeaderComponent() { whiteSpace: "nowrap", textAlign: "right", marginLeft: "auto", + display: "flex" }} > {path != "/signin" && isClient && ( @@ -79,6 +86,28 @@ export default function HeaderComponent() { Sign in )} + {(path == "/query") && ( + + )}
@@ -91,6 +120,23 @@ export default function HeaderComponent() { description="It's not! Data inputted into the TEFCA Query Connector is not persisted or stored anywhere." > )} + + {showMenu && ( + + )} ); } From b7a59233c9718546794f13f5daa6e9dedce6c8b5 Mon Sep 17 00:00:00 2001 From: Katie Campbell Downie Date: Tue, 29 Oct 2024 13:14:54 -0500 Subject: [PATCH 04/42] prettier formatting --- query-connector/src/app/query/components/header/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 2fa08b118..8806e6bb4 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -126,7 +126,7 @@ export default function HeaderComponent() {
@@ -123,7 +123,10 @@ export default function HeaderComponent() { {showMenu && (
-
- -
-

Sign in to Query Connector

-

- This workspace allows you to sign in with your organizational - account. -

+ +
+
+

Sign in to Query Connector

+

+ This workspace allows you to sign in with your organizational + account. +

+
+
+
+ + { + handleInput(event); + }} + /> +
+
+ + { + handleInput(event); + }} + /> +
+
-
- - { - setUserName(event.target.value); - }} - /> - - { - setPassword(event.target.value); - }} - /> -
+ +
+ +

+ You have entered an invalid username and/or password +

+
diff --git a/query-connector/src/app/signin/signinPage.module.scss b/query-connector/src/app/signin/signinPage.module.scss index f2786be44..dfaa27e6f 100644 --- a/query-connector/src/app/signin/signinPage.module.scss +++ b/query-connector/src/app/signin/signinPage.module.scss @@ -3,6 +3,7 @@ .column { width: 100%; display: flex; + flex-direction: column; align-items: center; justify-content: center; } @@ -12,26 +13,130 @@ } .signin-button { - margin: 1rem 0rem !important; + margin: 5px 0 5px 0; width: 100%; + padding: 0.75rem 1.25rem 0.75rem 1.25rem; + font-size: 16px; + line-height: 19px; + font-weight: 700; } .card { - min-width: 10rem; - max-width: 50%; + min-width: 50%; + max-width: 25rem; color: #5c5c5c; + margin: 1.5rem; } .image { - max-width: 60%; - max-height: 60%; - min-width: 10rem; + max-height: 66%; + padding: 1.5rem; } -.formText { +@media screen and (max-width: 786px) { + .column-left { + display: none; + } +} + +.formContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0.75rem 2.5rem 0.75rem 2.5rem; +} + +.formContent { + padding: 0.875rem 0 0.875rem 0; + margin: 0.75rem 0 0.75rem 0; +} + +.formHeader { text-align: center; + margin: 0 0 0.5rem 0; + padding: 0 0 0.5rem 0; + + h3 { + font-size: 20px; + line-height: 23.5px; + margin: 0; + padding: 2.25px 0; + } + + p { + font-size: 14px; + line-height: 19px; + font-weight: 400; + padding: 0; + margin: 0; + } +} + +.formFields { + padding: 0.25rem 0 0.25rem 0; + margin: 0 0 1rem 0; +} + +.formInputGroup { + label { + font-size: 14px; + line-height: 19px; + margin-bottom: 0.25rem; + } + + padding-bottom: 0.25rem; } +// .formInputGroup { +// margin-bottom: 0.25rem; +// padding: 0 0 0.75rem 0 !important; +// } + .formInput { - margin: 0.5rem 0rem; + border-radius: 0.25rem; + padding: 0.75rem; + margin: 0; + font-size: 14px; + line-height: 17px; + height: unset; +} + +.formError { + border-radius: 0.25rem; + padding: 0.75rem; + margin: 0; + font-size: 14px; + line-height: 17px; + height: unset; + border: 1px solid #e41d3d !important; +} + +.inlineError { + width: 100%; + display: inline-flex; + color: #e41d3d; + align-items: center; + justify-content: center; + + p { + margin: 0 0 0 0.5rem; + font-size: 14px; + line-height: 19px; + } +} + +.hidden { + visibility: hidden; + width: 100%; + display: inline-flex; + color: #e41d3d; + align-items: center; + justify-content: center; + + p { + margin: 0 0 0 0.5rem; + font-size: 14px; + line-height: 19px; + } } From d128a1bcd55a1bafceb266614aaaf853cdcb3b99 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 31 Oct 2024 22:08:57 +0000 Subject: [PATCH 10/42] [pre-commit.ci] auto fixes from pre-commit hooks --- .../app/query/components/header/header.tsx | 5 +- query-connector/src/app/signin/page.tsx | 111 ++++++++++-------- 2 files changed, 64 insertions(+), 52 deletions(-) diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 677760656..5ba5ee857 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -130,10 +130,7 @@ export default function HeaderComponent() { */}
  • - + Log out
    • diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx index 46291899e..c88bd6c99 100644 --- a/query-connector/src/app/signin/page.tsx +++ b/query-connector/src/app/signin/page.tsx @@ -13,7 +13,7 @@ import styles from "./signinPage.module.scss"; */ export default function SigninPage() { const router = useRouter(); - + type Credentials = { username: string; password: string; @@ -23,23 +23,23 @@ export default function SigninPage() { const [credentials, setCredentials] = useState({ username: "", password: "", - }) + }); const handleInput = (event: React.FormEvent) => { event.preventDefault(); - const attribute = event.currentTarget.getAttribute("name") || "" + const attribute = event.currentTarget.getAttribute("name") || ""; const value = event.currentTarget.value; - + // clear error state when entering input text if (signinError && value != "") { - setSigninError(false) + setSigninError(false); } if (attribute != "") { - setCredentials({...credentials, [attribute]: value}) + setCredentials({ ...credentials, [attribute]: value }); } - } + }; const handleSignin = (event: React.FormEvent) => { event.preventDefault(); @@ -47,7 +47,7 @@ export default function SigninPage() { setSigninError(true); return; } else { - setSigninError(false) + setSigninError(false); } router.push(`/query`); }; @@ -66,7 +66,12 @@ export default function SigninPage() {
    -
    +

    Sign in to Query Connector

    @@ -75,56 +80,66 @@ export default function SigninPage() { account.

    -
    +
    - - { - handleInput(event); - }} - /> + + { + handleInput(event); + }} + />
    - - { - handleInput(event); - }} - /> + + { + handleInput(event); + }} + />
    -
    +
    +
    -
    - -

    - You have entered an invalid username and/or password -

    -
    +
    + +

    You have entered an invalid username and/or password

    +
    From 984b5db5f01d954176a51d16948ad855e155fde5 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Tue, 29 Oct 2024 14:11:31 -0500 Subject: [PATCH 11/42] redirect page --- query-connector/src/app/page.tsx | 4 +-- .../query/components/header/header.module.css | 6 ++++ .../app/query/components/header/header.tsx | 32 ++++++++--------- .../src/app/queryBuilding/page.tsx | 34 +++++++++++++++++++ .../src/app/queryBuilding/query.module.scss | 12 +++++++ 5 files changed, 69 insertions(+), 19 deletions(-) create mode 100644 query-connector/src/app/queryBuilding/page.tsx create mode 100644 query-connector/src/app/queryBuilding/query.module.scss diff --git a/query-connector/src/app/page.tsx b/query-connector/src/app/page.tsx index 62061d0cb..0d54a63e6 100644 --- a/query-connector/src/app/page.tsx +++ b/query-connector/src/app/page.tsx @@ -15,7 +15,7 @@ import Image from "next/image"; export default function LandingPage() { const router = useRouter(); - const handleClick = () => { + const handleGoToDemo = () => { router.push(`/query`); }; @@ -97,7 +97,7 @@ export default function LandingPage() { className="next-button" type="button" id="next-button" - onClick={() => handleClick()} + onClick={() => handleGoToDemo()} > Go to the demo diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index e4b59b2cb..ce86bd0f8 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -54,3 +54,9 @@ .menuItem:hover { text-decoration: none !important; } + +.headerContentContainer { + display: flex; + align-items: center !important; + justify-content: space-between; +} diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 5ba5ee857..082e6da0f 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -2,10 +2,11 @@ import { useEffect, useRef, useState } from "react"; import { Modal, ModalButton } from "../../designSystem/Modal"; -import { ModalRef, Button, Icon } from "@trussworks/react-uswds"; +import { useRouter, usePathname } from "next/navigation"; +import { Button, Icon, ModalRef } from "@trussworks/react-uswds"; import styles from "./header.module.css"; import { metadata } from "@/app/constants"; -import { useRouter, usePathname } from "next/navigation"; +import classNames from "classnames"; /** * Produces the header. * @returns The HeaderComponent component. @@ -35,16 +36,14 @@ export default function HeaderComponent() { <>
    -
    -
    +
    +
    {path != "/signin" && isClient && ( = ({}) => { + const [queryName, setQueryName] = useState(); + + function handleSubmit() { + console.log(queryName); + } + return ( +
    +
    + + { + setQueryName(event.target.value); + }} + /> + +
    +
    + ); +}; + +export default QueryBuilding; diff --git a/query-connector/src/app/queryBuilding/query.module.scss b/query-connector/src/app/queryBuilding/query.module.scss new file mode 100644 index 000000000..dafbcac2c --- /dev/null +++ b/query-connector/src/app/queryBuilding/query.module.scss @@ -0,0 +1,12 @@ +@use "../../styles/variables" as *; + +.queryBuildingContainer { + display: flex; + flex-direction: column; + width: 15rem; + margin: auto; +} + +.queryBuildingContainer > * { + margin-top: $margin-within-group; +} From e819b07d9b9277a53e78660131498b4fcd68d1a1 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Tue, 29 Oct 2024 14:16:36 -0500 Subject: [PATCH 12/42] import --- query-connector/src/app/query/components/header/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 082e6da0f..c210bfbc3 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react"; import { Modal, ModalButton } from "../../designSystem/Modal"; import { useRouter, usePathname } from "next/navigation"; -import { Button, Icon, ModalRef } from "@trussworks/react-uswds"; +import { Button, ModalRef } from "@trussworks/react-uswds"; import styles from "./header.module.css"; import { metadata } from "@/app/constants"; import classNames from "classnames"; From b6548bb7d6863ea9491cb89dd7486f585df197a3 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Tue, 29 Oct 2024 14:18:13 -0500 Subject: [PATCH 13/42] import --- query-connector/src/app/query/components/header/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index c210bfbc3..082e6da0f 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react"; import { Modal, ModalButton } from "../../designSystem/Modal"; import { useRouter, usePathname } from "next/navigation"; -import { Button, ModalRef } from "@trussworks/react-uswds"; +import { Button, Icon, ModalRef } from "@trussworks/react-uswds"; import styles from "./header.module.css"; import { metadata } from "@/app/constants"; import classNames from "classnames"; From 20346a4e188b8c8563d2f060e3a8480202d09745 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Tue, 29 Oct 2024 14:22:05 -0500 Subject: [PATCH 14/42] header styling tweaks --- .../app/query/components/header/header.module.css | 1 + .../src/app/query/components/header/header.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index ce86bd0f8..6ac36cfa7 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -27,6 +27,7 @@ font: inherit !important; margin: 0 !important; height: 1.5rem !important; + width: 1.5rem !important; } .menuDropdownContainer { diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 082e6da0f..af0ab5a9d 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -84,16 +84,14 @@ export default function HeaderComponent() { {path == "/query" && ( +
    +
    + + ); +}; + +export default EmptyQueriesDisplay; diff --git a/query-connector/src/app/queryBuilding/page.tsx b/query-connector/src/app/queryBuilding/page.tsx index 4d630d8e2..9f8d8709d 100644 --- a/query-connector/src/app/queryBuilding/page.tsx +++ b/query-connector/src/app/queryBuilding/page.tsx @@ -2,6 +2,7 @@ import { Button, Fieldset, Label, TextInput } from "@trussworks/react-uswds"; import { useState } from "react"; import styles from "./query.module.scss"; +import EmptyQueriesDisplay from "./emptyState/EmptyQueriesDisplay"; type QueryBuilding = {}; export const QueryBuilding: React.FC = ({}) => { const [queryName, setQueryName] = useState(); @@ -9,22 +10,8 @@ export const QueryBuilding: React.FC = ({}) => { function handleSubmit() {} return (
    -
    - - { - setQueryName(event.target.value); - }} - /> - -
    +

    My queries

    +
    ); }; diff --git a/query-connector/src/app/queryBuilding/query.module.scss b/query-connector/src/app/queryBuilding/query.module.scss index dafbcac2c..5fc3f4d08 100644 --- a/query-connector/src/app/queryBuilding/query.module.scss +++ b/query-connector/src/app/queryBuilding/query.module.scss @@ -7,6 +7,35 @@ margin: auto; } +.queryTitle { + font-size: 2rem; + margin-top: 1rem; + margin-bottom: 2rem; +} .queryBuildingContainer > * { margin-top: $margin-within-group; } + +.emptyStateQueryContainer { + background-color: #edeff0; + height: 27.75rem; + display: flex; + justify-content: center; + align-items: center; +} + +.emptyQueryTitle { + width: fit-content; + margin: 0.5rem 0 1.5rem 0; +} + +.emptyQueryIcon { + width: 7.5rem; + height: 7.5rem; + color: $gray-cool-20; +} + +.createQueryButton { + width: fit-content; + padding: 1rem !important; +} diff --git a/query-connector/src/styles/_variables.scss b/query-connector/src/styles/_variables.scss index a33166aef..7a94293ff 100644 --- a/query-connector/src/styles/_variables.scss +++ b/query-connector/src/styles/_variables.scss @@ -7,3 +7,4 @@ $margin-within-group: 0.75rem; $margin-between-group: 2.5rem; $background-hover-color: #d9e8f680; +$gray-cool-20: #c6cace; diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss index b2b05a5a6..5a5d32611 100644 --- a/query-connector/src/styles/custom-styles.scss +++ b/query-connector/src/styles/custom-styles.scss @@ -1,10 +1,12 @@ @use "uswds-core" as *; @use "_variables" as *; -.section__line { - border-top: 1px solid #99deea; - margin-top: 0.5rem; - margin-bottom: 0.5rem; +h1 { + font-family: family("heading"); +} + +h2 { + font-family: family("body"); } .section__line_gray { @@ -13,10 +15,6 @@ margin-bottom: 0.5rem; } -.card__line { - border-top: 8px solid #edeff0; -} - .maxw7 { max-width: 70%; } @@ -29,98 +27,11 @@ .page-explainer { margin: $margin-within-group 0rem $margin-between-group 0rem; - font-family: family("sans"); - font-size: 1.375rem; - font-style: normal; font-weight: 300; + font-size: 1.375rem; line-height: 150%; } -.data-title { - flex: 0 1 auto; - width: 190px; - font-weight: bold; -} - -.accordion-rr { - border: #111111 1px solid; - border-radius: 0.25rem; - overflow: hidden; - margin-top: 1rem; - padding-bottom: 0.5rem; - - .usa-accordion__button { - &:hover { - background-color: #f0f0f0; - } - - position: relative; - background: white; - padding: 12px; - font-weight: normal; - - &[aria-expanded="true"] { - border-bottom: #111111 1px solid; - } - } - - .usa-accordion__content { - padding: 0; - } -} - -.usa-accordion__content { - margin-top: -80px; -} - -.minimize-container { - position: absolute; - right: 12px; -} - -.list-style-none { - list-style: none; -} - -.ecrTable { - table-layout: fixed; - margin-bottom: 0; - width: 100%; - - td:first-child, - th:first-child { - padding-left: 24px; - } - - td:last-child, - th:last-child { - padding-right: 24px; - } - - td { - padding-top: 14px; - padding-bottom: 14px; - } - - thead th { - border-bottom-color: #a9aeb1; - } - - tr td { - border-bottom: none; - } -} - -.usa-summary-box__body:not(:first-child) .summary-box-key-information { - margin-top: 20px; -} - -.table-caption-margin { - caption { - margin-bottom: 8px; - } -} - .usa-sidenav__item a:not(.usa-sidenav__sublist a) { font-weight: bold; } diff --git a/query-connector/src/styles/uswds-settings.scss b/query-connector/src/styles/uswds-settings.scss index c85dfb5da..5fbd27fb7 100644 --- a/query-connector/src/styles/uswds-settings.scss +++ b/query-connector/src/styles/uswds-settings.scss @@ -33,6 +33,18 @@ $ASSET_PREFIX: ""; // Spacing // Typography $theme-font-path: "../../../../../../dist/fonts", + $theme-font-type-cond: false, + $theme-font-type-icon: false, + $theme-font-type-lang: false, + $theme-font-type-mono: "roboto-mono", + $theme-font-type-sans: "public-sans", + $theme-font-type-serif: "merriweather", + + $theme-font-role-ui: "sans", + $theme-font-role-heading: "serif", + $theme-font-role-body: "sans", + $theme-font-role-code: "mono", + $theme-font-role-alt: "serif", // Utilities ); From a7272fb1870239a56d46d558ac6ba3fa91a585f2 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 18:16:59 -0400 Subject: [PATCH 17/42] rehouse files --- query-connector/e2e/alternate_queries.spec.ts | 2 +- query-connector/e2e/customize_query.spec.ts | 6 +++--- query-connector/e2e/query_workflow.spec.ts | 2 +- query-connector/src/app/query/components/CustomizeQuery.tsx | 2 +- .../src/app/query/components/PatientSearchResults.tsx | 2 +- query-connector/src/app/query/components/ResultsView.tsx | 2 +- query-connector/src/app/query/components/SearchForm.tsx | 2 +- .../patientSearchResults/PatientSearchResultsTable.tsx | 2 +- .../app/query/components/selectQuery/SelectSavedQuery.tsx | 2 +- .../query/{ => components}/stepIndicator/StepIndicator.tsx | 0 .../stepIndicator/stepIndicator.module.scss | 2 +- query-connector/src/app/query/page.tsx | 2 +- 12 files changed, 13 insertions(+), 13 deletions(-) rename query-connector/src/app/query/{ => components}/stepIndicator/StepIndicator.tsx (100%) rename query-connector/src/app/query/{ => components}/stepIndicator/stepIndicator.module.scss (79%) diff --git a/query-connector/e2e/alternate_queries.spec.ts b/query-connector/e2e/alternate_queries.spec.ts index 2f07aef13..9e1436552 100644 --- a/query-connector/e2e/alternate_queries.spec.ts +++ b/query-connector/e2e/alternate_queries.spec.ts @@ -1,6 +1,6 @@ import { test, expect } from "@playwright/test"; import { TEST_URL } from "../playwright-setup"; -import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator"; +import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator"; import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants"; diff --git a/query-connector/e2e/customize_query.spec.ts b/query-connector/e2e/customize_query.spec.ts index b935c528b..79269b15b 100644 --- a/query-connector/e2e/customize_query.spec.ts +++ b/query-connector/e2e/customize_query.spec.ts @@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test"; import { TEST_URL } from "../playwright-setup"; -import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator"; +import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator"; import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants"; @@ -182,8 +182,8 @@ test.describe("querying with the Query Connector", () => { for (let i = 1; i < 6; i++) { const row = obsRows.nth(i); const typeText = await row.locator("td").nth(1).textContent(); - const presentKey = acceptableSdohKeywords.find((key) => - typeText?.toLowerCase().includes(key), + const presentKey = acceptableSdohKeywords.find( + (key) => typeText?.toLowerCase().includes(key), ); expect(presentKey).toBeDefined(); expect(typeText?.includes("chlamydia")).toBeFalsy(); diff --git a/query-connector/e2e/query_workflow.spec.ts b/query-connector/e2e/query_workflow.spec.ts index 2437a4530..9cff37987 100644 --- a/query-connector/e2e/query_workflow.spec.ts +++ b/query-connector/e2e/query_workflow.spec.ts @@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test"; import { TEST_URL } from "../playwright-setup"; -import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator"; +import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator"; import { CONTACT_US_DISCLAIMER_EMAIL, CONTACT_US_DISCLAIMER_TEXT, diff --git a/query-connector/src/app/query/components/CustomizeQuery.tsx b/query-connector/src/app/query/components/CustomizeQuery.tsx index 62990d4c1..9a98ad641 100644 --- a/query-connector/src/app/query/components/CustomizeQuery.tsx +++ b/query-connector/src/app/query/components/CustomizeQuery.tsx @@ -23,7 +23,7 @@ import { countDibbsConceptTypeToVsMapItems, } from "./customizeQuery/customizeQueryUtils"; import Backlink from "./backLink/Backlink"; -import { RETURN_LABEL } from "../stepIndicator/StepIndicator"; +import { RETURN_LABEL } from "./stepIndicator/StepIndicator"; interface CustomizeQueryProps { useCaseQueryResponse: UseCaseQueryResponse; diff --git a/query-connector/src/app/query/components/PatientSearchResults.tsx b/query-connector/src/app/query/components/PatientSearchResults.tsx index 5ac19f407..e4356726e 100644 --- a/query-connector/src/app/query/components/PatientSearchResults.tsx +++ b/query-connector/src/app/query/components/PatientSearchResults.tsx @@ -5,7 +5,7 @@ import { Mode } from "@/app/constants"; import Backlink from "./backLink/Backlink"; import PatientSearchResultsTable from "./patientSearchResults/PatientSearchResultsTable"; import NoPatientsFound from "./patientSearchResults/NoPatientsFound"; -import { RETURN_LABEL } from "@/app/query/stepIndicator/StepIndicator"; +import { RETURN_LABEL } from "@/app/query/components/stepIndicator/StepIndicator"; /** * The props for the PatientSearchResults component. diff --git a/query-connector/src/app/query/components/ResultsView.tsx b/query-connector/src/app/query/components/ResultsView.tsx index 518e3172e..095be31e3 100644 --- a/query-connector/src/app/query/components/ResultsView.tsx +++ b/query-connector/src/app/query/components/ResultsView.tsx @@ -16,7 +16,7 @@ import { USE_CASES, demoQueryValToLabelMap } from "@/app/constants"; import { PAGE_TITLES, RETURN_LABEL, -} from "@/app/query/stepIndicator/StepIndicator"; +} from "@/app/query/components/stepIndicator/StepIndicator"; type ResultsViewProps = { useCaseQueryResponse: UseCaseQueryResponse; diff --git a/query-connector/src/app/query/components/SearchForm.tsx b/query-connector/src/app/query/components/SearchForm.tsx index 5be044800..ce8292c79 100644 --- a/query-connector/src/app/query/components/SearchForm.tsx +++ b/query-connector/src/app/query/components/SearchForm.tsx @@ -17,7 +17,7 @@ import { UseCaseQueryResponse, UseCaseQuery } from "@/app/query-service"; import { fhirServers } from "@/app/fhir-servers"; import styles from "./searchForm/searchForm.module.scss"; import { FormatPhoneAsDigits } from "@/app/format-service"; -import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator"; +import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator"; interface SearchFormProps { useCase: USE_CASES; diff --git a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx b/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx index 293669a94..f13089651 100644 --- a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx +++ b/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx @@ -6,7 +6,7 @@ import { formatMRN, formatName, } from "@/app/format-service"; -import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator"; +import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator"; type PatientSeacrchResultsTableProps = { patients: Patient[]; diff --git a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx b/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx index ccd5f21f2..36634a754 100644 --- a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx +++ b/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx @@ -11,7 +11,7 @@ import { useState } from "react"; import { PAGE_TITLES, RETURN_LABEL, -} from "@/app/query/stepIndicator/StepIndicator"; +} from "@/app/query/components/stepIndicator/StepIndicator"; type SelectSavedQueryProps = { selectedQuery: string; diff --git a/query-connector/src/app/query/stepIndicator/StepIndicator.tsx b/query-connector/src/app/query/components/stepIndicator/StepIndicator.tsx similarity index 100% rename from query-connector/src/app/query/stepIndicator/StepIndicator.tsx rename to query-connector/src/app/query/components/stepIndicator/StepIndicator.tsx diff --git a/query-connector/src/app/query/stepIndicator/stepIndicator.module.scss b/query-connector/src/app/query/components/stepIndicator/stepIndicator.module.scss similarity index 79% rename from query-connector/src/app/query/stepIndicator/stepIndicator.module.scss rename to query-connector/src/app/query/components/stepIndicator/stepIndicator.module.scss index ea9e4024c..53b627ffa 100644 --- a/query-connector/src/app/query/stepIndicator/stepIndicator.module.scss +++ b/query-connector/src/app/query/components/stepIndicator/stepIndicator.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/_variables" as *; +@use "../../../../styles/_variables" as *; .container > ol { justify-content: space-between; diff --git a/query-connector/src/app/query/page.tsx b/query-connector/src/app/query/page.tsx index c01382661..e08b2634b 100644 --- a/query-connector/src/app/query/page.tsx +++ b/query-connector/src/app/query/page.tsx @@ -17,7 +17,7 @@ import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.min.css"; import StepIndicator, { CUSTOMIZE_QUERY_STEPS, -} from "./stepIndicator/StepIndicator"; +} from "./components/stepIndicator/StepIndicator"; import SiteAlert from "./designSystem/SiteAlert"; import { Patient } from "fhir/r4"; From 94107810602fc2606a65bbe25153582d3cdb4eb0 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 18:30:53 -0400 Subject: [PATCH 18/42] lint --- query-connector/e2e/customize_query.spec.ts | 4 ++-- .../app/query/components/header/header.module.css | 3 ++- .../src/app/query/components/header/header.tsx | 15 ++++++++++----- .../emptyState/EmptyQueriesDisplay.tsx | 3 +++ query-connector/src/app/queryBuilding/page.tsx | 8 +++----- 5 files changed, 20 insertions(+), 13 deletions(-) diff --git a/query-connector/e2e/customize_query.spec.ts b/query-connector/e2e/customize_query.spec.ts index 79269b15b..4e2fb2373 100644 --- a/query-connector/e2e/customize_query.spec.ts +++ b/query-connector/e2e/customize_query.spec.ts @@ -182,8 +182,8 @@ test.describe("querying with the Query Connector", () => { for (let i = 1; i < 6; i++) { const row = obsRows.nth(i); const typeText = await row.locator("td").nth(1).textContent(); - const presentKey = acceptableSdohKeywords.find( - (key) => typeText?.toLowerCase().includes(key), + const presentKey = acceptableSdohKeywords.find((key) => + typeText?.toLowerCase().includes(key), ); expect(presentKey).toBeDefined(); expect(typeText?.includes("chlamydia")).toBeFalsy(); diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index 6ac36cfa7..106c30691 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -48,8 +48,9 @@ .menuItem { color: black !important; - text-decoration: none; + text-decoration: none !important; padding: 0.5rem 1rem !important; + cursor: pointer; } .menuItem:hover { diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index a8b223cf2..4bd5e870b 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -32,6 +32,9 @@ export default function HeaderComponent() { }; const backLink = process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/"; + + const isProduction = process.env.NODE_ENV === "production"; + return ( <>
    @@ -120,11 +123,13 @@ export default function HeaderComponent() { id="dropdown-menu" className={`usa-nav__submenu ${styles.menuDropdown}`} > - {/*
  • - - My queries - -
    • */} + {!isProduction && ( +
  • + + My queries + +
    • + )}
  • Log out diff --git a/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx b/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx index b11414877..e8b7dd536 100644 --- a/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx +++ b/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx @@ -1,6 +1,9 @@ import { Button, Icon } from "@trussworks/react-uswds"; import styles from "../query.module.scss"; +/** + * Empty-state component for query building + */ export const EmptyQueriesDisplay: React.FC = () => { return ( <> diff --git a/query-connector/src/app/queryBuilding/page.tsx b/query-connector/src/app/queryBuilding/page.tsx index 9f8d8709d..30b64455f 100644 --- a/query-connector/src/app/queryBuilding/page.tsx +++ b/query-connector/src/app/queryBuilding/page.tsx @@ -1,13 +1,11 @@ "use client"; -import { Button, Fieldset, Label, TextInput } from "@trussworks/react-uswds"; -import { useState } from "react"; import styles from "./query.module.scss"; import EmptyQueriesDisplay from "./emptyState/EmptyQueriesDisplay"; type QueryBuilding = {}; +/** + * Component for Query Building Flow + */ export const QueryBuilding: React.FC = ({}) => { - const [queryName, setQueryName] = useState(); - - function handleSubmit() {} return (

    My queries

    From 10271635b617d91e196bf7709681ca1db437cc36 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 18:32:35 -0400 Subject: [PATCH 19/42] lint pt 2 --- .../src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx | 1 + query-connector/src/app/queryBuilding/page.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx b/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx index e8b7dd536..a73c1c12f 100644 --- a/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx +++ b/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx @@ -3,6 +3,7 @@ import styles from "../query.module.scss"; /** * Empty-state component for query building + * @returns the EmptyQueriesDisplay to render the empty state status */ export const EmptyQueriesDisplay: React.FC = () => { return ( diff --git a/query-connector/src/app/queryBuilding/page.tsx b/query-connector/src/app/queryBuilding/page.tsx index 30b64455f..02658b0f0 100644 --- a/query-connector/src/app/queryBuilding/page.tsx +++ b/query-connector/src/app/queryBuilding/page.tsx @@ -4,6 +4,7 @@ import EmptyQueriesDisplay from "./emptyState/EmptyQueriesDisplay"; type QueryBuilding = {}; /** * Component for Query Building Flow + * @returns The Query Building component flow */ export const QueryBuilding: React.FC = ({}) => { return ( From ed70798db23067d2d1a477b592f30624a0ab3fa7 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 18:36:28 -0400 Subject: [PATCH 20/42] export the thing correctly --- query-connector/src/app/queryBuilding/page.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/query-connector/src/app/queryBuilding/page.tsx b/query-connector/src/app/queryBuilding/page.tsx index 02658b0f0..64f3d1e53 100644 --- a/query-connector/src/app/queryBuilding/page.tsx +++ b/query-connector/src/app/queryBuilding/page.tsx @@ -1,12 +1,11 @@ "use client"; import styles from "./query.module.scss"; import EmptyQueriesDisplay from "./emptyState/EmptyQueriesDisplay"; -type QueryBuilding = {}; /** * Component for Query Building Flow * @returns The Query Building component flow */ -export const QueryBuilding: React.FC = ({}) => { +export const QueryBuilding: React.FC = ({}) => { return (

    My queries

    From 7a8b61a1059250ad9410f2d29b47e96b5873371f Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 19:09:11 -0400 Subject: [PATCH 21/42] font styles --- .../app/query/components/CustomizeQuery.tsx | 4 ++-- .../app/query/components/header/header.tsx | 6 +----- .../PatientSearchResultsTable.tsx | 4 ++-- .../src/app/queryBuilding/query.module.scss | 1 + query-connector/src/styles/_variables.scss | 6 ++++++ query-connector/src/styles/custom-styles.scss | 20 +++++++++++++------ 6 files changed, 26 insertions(+), 15 deletions(-) diff --git a/query-connector/src/app/query/components/CustomizeQuery.tsx b/query-connector/src/app/query/components/CustomizeQuery.tsx index 9a98ad641..71dd52df4 100644 --- a/query-connector/src/app/query/components/CustomizeQuery.tsx +++ b/query-connector/src/app/query/components/CustomizeQuery.tsx @@ -200,9 +200,9 @@ const CustomizeQuery: React.FC = ({

    Customize query

    -

    +

    Query: {demoQueryValToLabelMap[queryType]} -

    +

    {countLabs} labs found, {countMedications} medications found,{" "} {countConditions} conditions found. diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 4bd5e870b..bc14ac78e 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -48,11 +48,7 @@ export default function HeaderComponent() {
    - + {metadata.title} diff --git a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx b/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx index f13089651..274a0c3fb 100644 --- a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx +++ b/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx @@ -29,9 +29,9 @@ const PatientSearchResultsTable: React.FC = ({ return ( <>

    {PAGE_TITLES["patient-results"]}

    -

    +

    The following records match your search. Select a patient to continue. -

    +

    diff --git a/query-connector/src/app/queryBuilding/query.module.scss b/query-connector/src/app/queryBuilding/query.module.scss index 5fc3f4d08..e74010b20 100644 --- a/query-connector/src/app/queryBuilding/query.module.scss +++ b/query-connector/src/app/queryBuilding/query.module.scss @@ -27,6 +27,7 @@ .emptyQueryTitle { width: fit-content; margin: 0.5rem 0 1.5rem 0; + font-family: $sans-serif-font; } .emptyQueryIcon { diff --git a/query-connector/src/styles/_variables.scss b/query-connector/src/styles/_variables.scss index 7a94293ff..bcebac362 100644 --- a/query-connector/src/styles/_variables.scss +++ b/query-connector/src/styles/_variables.scss @@ -1,3 +1,5 @@ +@use "uswds-core" as *; + // taken as values from Figma $query-connector-max-width: 45rem; $query-connector-wide-max-width: 90rem; @@ -8,3 +10,7 @@ $margin-between-group: 2.5rem; $background-hover-color: #d9e8f680; $gray-cool-20: #c6cace; + +$serif-font: family("heading"); +$sans-serif-font: "Public Sans Web", family("body"); +$mono-font: "Consolas", family("mono"); diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss index 5a5d32611..4cb101e76 100644 --- a/query-connector/src/styles/custom-styles.scss +++ b/query-connector/src/styles/custom-styles.scss @@ -1,12 +1,20 @@ @use "uswds-core" as *; @use "_variables" as *; -h1 { - font-family: family("heading"); +h1, +h2 { + font-family: $serif-font; } -h2 { - font-family: family("body"); +body { + font-family: $sans-serif-font; +} + +.siteTitle { + font-family: $mono-font; + color: #e8f5ff !important; + font-size: 1.5rem; + font-weight: 400; } .section__line_gray { @@ -22,13 +30,13 @@ h2 { .page-title { margin: $margin-within-group 0rem; font-weight: 700; - font-size: 2.66rem; + font-size: 2rem; } .page-explainer { margin: $margin-within-group 0rem $margin-between-group 0rem; font-weight: 300; - font-size: 1.375rem; + font-size: 1.125rem; line-height: 150%; } From c2cc3309a3b06f1d599c4507c3ae120bb8e7dc3c Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 19:14:51 -0400 Subject: [PATCH 22/42] change FC styling --- query-connector/src/app/queryBuilding/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/src/app/queryBuilding/page.tsx b/query-connector/src/app/queryBuilding/page.tsx index 64f3d1e53..b1bd95200 100644 --- a/query-connector/src/app/queryBuilding/page.tsx +++ b/query-connector/src/app/queryBuilding/page.tsx @@ -5,7 +5,7 @@ import EmptyQueriesDisplay from "./emptyState/EmptyQueriesDisplay"; * Component for Query Building Flow * @returns The Query Building component flow */ -export const QueryBuilding: React.FC = ({}) => { +export const QueryBuilding: React.FC = () => { return (

    My queries

    From 7dc7deda12032987e3c289c3dc9a91cee35ce1e6 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 19:16:46 -0400 Subject: [PATCH 23/42] don't export --- query-connector/src/app/queryBuilding/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/src/app/queryBuilding/page.tsx b/query-connector/src/app/queryBuilding/page.tsx index b1bd95200..f84d2ab4e 100644 --- a/query-connector/src/app/queryBuilding/page.tsx +++ b/query-connector/src/app/queryBuilding/page.tsx @@ -5,7 +5,7 @@ import EmptyQueriesDisplay from "./emptyState/EmptyQueriesDisplay"; * Component for Query Building Flow * @returns The Query Building component flow */ -export const QueryBuilding: React.FC = () => { +const QueryBuilding: React.FC = () => { return (

    My queries

    From 40c12d9bf6e89e8b8068e28507aba0dd14a4e9f0 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 19:26:40 -0400 Subject: [PATCH 24/42] widen button --- query-connector/src/app/query/components/SearchForm.tsx | 2 +- query-connector/src/styles/custom-styles.scss | 9 +++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/query-connector/src/app/query/components/SearchForm.tsx b/query-connector/src/app/query/components/SearchForm.tsx index ce8292c79..1ba6c7bf1 100644 --- a/query-connector/src/app/query/components/SearchForm.tsx +++ b/query-connector/src/app/query/components/SearchForm.tsx @@ -371,7 +371,7 @@ const SearchForm: React.FC = ({
    - diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss index 4cb101e76..f9fbfa668 100644 --- a/query-connector/src/styles/custom-styles.scss +++ b/query-connector/src/styles/custom-styles.scss @@ -10,6 +10,9 @@ body { font-family: $sans-serif-font; } +.margin-top-between-group { + margin-top: $margin-between-group; +} .siteTitle { font-family: $mono-font; color: #e8f5ff !important; @@ -136,12 +139,6 @@ body { margin-top: 1.5rem; } -.patient-search-button { - margin-top: 2rem; - margin-bottom: 4rem; - max-width: 11em; -} - .text-base-lightest { color: #f0f0f0 !important; } From da78d37dab3f286e42f7c01f4eff7515698c7501 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 19:31:02 -0400 Subject: [PATCH 25/42] remove extra margin --- .../components/customizeQuery/CustomizeQueryAccordionBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx index 911b36069..33d5f78af 100644 --- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx +++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx @@ -35,7 +35,7 @@ const CustomizeQueryAccordionBody: React.FC< > = ({ group, toggleInclude, groupIndex }) => { return (
    - + From 4f8a0272c8fc77c7127a57ecefe661049205507e Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Oct 2024 19:33:12 -0400 Subject: [PATCH 26/42] fix results view styles --- query-connector/src/app/query/components/ResultsView.tsx | 4 ++-- query-connector/src/styles/custom-styles.scss | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/query-connector/src/app/query/components/ResultsView.tsx b/query-connector/src/app/query/components/ResultsView.tsx index 095be31e3..688c8f214 100644 --- a/query-connector/src/app/query/components/ResultsView.tsx +++ b/query-connector/src/app/query/components/ResultsView.tsx @@ -75,12 +75,12 @@ const ResultsView: React.FC = ({

    {PAGE_TITLES["results"]}

    -

    +

    Query: {demoQueryValToLabelMap[selectedQuery]} -

    +

    diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss index f9fbfa668..4207c4b70 100644 --- a/query-connector/src/styles/custom-styles.scss +++ b/query-connector/src/styles/custom-styles.scss @@ -223,6 +223,12 @@ html { } } +.data-title { + flex: 0 1 auto; + width: 190px; + font-weight: bold; +} + .test-query-filler { background: #faf3d1; border: 1px solid #fee685; From a7264f27af4b429060791498c07e81e183cc64ae Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Fri, 1 Nov 2024 13:19:33 -0400 Subject: [PATCH 27/42] fix header and footer styling --- query-connector/src/app/footer.tsx | 70 --- query-connector/src/app/layout.tsx | 2 +- query-connector/src/app/page.tsx | 6 +- .../src/app/query/components/SearchForm.tsx | 2 +- .../query/components/header/header.module.css | 3 +- .../app/query/components/header/header.tsx | 8 +- .../PatientSearchResultsTable.tsx | 2 +- .../resultsView/resultsView.module.scss | 2 +- .../searchForm/searchForm.module.scss | 4 +- .../selectQuery/SelectSavedQuery.tsx | 8 +- .../selectQuery/selectQuery.module.scss | 7 +- .../stepIndicator/stepIndicator.module.scss | 2 +- .../src/app/queryBuilding/query.module.scss | 2 +- query-connector/src/styles/_variables.scss | 7 +- query-connector/src/styles/custom-styles.scss | 436 +++++++++--------- query-connector/src/styles/layout.scss | 2 +- 16 files changed, 257 insertions(+), 306 deletions(-) delete mode 100644 query-connector/src/app/footer.tsx diff --git a/query-connector/src/app/footer.tsx b/query-connector/src/app/footer.tsx deleted file mode 100644 index e0b1a4d48..000000000 --- a/query-connector/src/app/footer.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import Image from "next/image"; - -/** - * Produces the footer. - * @returns The footer component. - */ -export default function FooterComponent() { - return ( -
    -
    -
    -
    -
    -
    - -
    -
    -

    - Centers for Disease Control and Prevention -

    -
    -
    -
    -
    -

    - For more information about this solution, send us an email at{" "} - - dibbs@cdc.gov - -

    -
    -
    -
    -
    -
    -
    - ); -} diff --git a/query-connector/src/app/layout.tsx b/query-connector/src/app/layout.tsx index e360e1dca..8dcc653f9 100644 --- a/query-connector/src/app/layout.tsx +++ b/query-connector/src/app/layout.tsx @@ -1,6 +1,6 @@ import "../styles/styles.scss"; import Header from "./query/components/header/header"; -import Footer from "./footer"; +import Footer from "./query/components/footer/footer"; import { DataProvider } from "./utils"; /** diff --git a/query-connector/src/app/page.tsx b/query-connector/src/app/page.tsx index 0d54a63e6..504840258 100644 --- a/query-connector/src/app/page.tsx +++ b/query-connector/src/app/page.tsx @@ -44,7 +44,9 @@ export default function LandingPage() {
    -

    What is it?

    +

    + What is it? +

    The TEFCA Query Connector aims to streamline the collection of health data using an intuitive querying process that leverages @@ -54,7 +56,7 @@ export default function LandingPage() { quickly retrieve patient records and relevant case information from HCOs without requiring direct connection and onboarding.

    -

    +

    How does it work?

    diff --git a/query-connector/src/app/query/components/SearchForm.tsx b/query-connector/src/app/query/components/SearchForm.tsx index 1ba6c7bf1..82778ab09 100644 --- a/query-connector/src/app/query/components/SearchForm.tsx +++ b/query-connector/src/app/query/components/SearchForm.tsx @@ -371,7 +371,7 @@ const SearchForm: React.FC = ({

    - diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index 106c30691..4eed6e871 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -9,7 +9,7 @@ } .signinButton { - padding: 0.75rem 1.25rem !important; + padding: 0.5rem 1.25rem !important; cursor: pointer; background: none !important; border: 2px solid white !important; @@ -61,4 +61,5 @@ display: flex; align-items: center !important; justify-content: space-between; + height: 4.5rem; } diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index bc14ac78e..f7d7cbbe1 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -38,13 +38,7 @@ export default function HeaderComponent() { return ( <>
    -
    +
    diff --git a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx b/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx index 274a0c3fb..f2d2b3df7 100644 --- a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx +++ b/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx @@ -32,7 +32,7 @@ const PatientSearchResultsTable: React.FC = ({

    The following records match your search. Select a patient to continue.

    -
    Include Code
    +
    diff --git a/query-connector/src/app/query/components/resultsView/resultsView.module.scss b/query-connector/src/app/query/components/resultsView/resultsView.module.scss index 13d13f370..29bdbc6cf 100644 --- a/query-connector/src/app/query/components/resultsView/resultsView.module.scss +++ b/query-connector/src/app/query/components/resultsView/resultsView.module.scss @@ -1,7 +1,7 @@ @use "../../../../styles/_variables" as *; .accordionInstance { - margin-bottom: $margin-between-group; + margin-bottom: $margin--32px; } .accordionWrapper > h3 { diff --git a/query-connector/src/app/query/components/searchForm/searchForm.module.scss b/query-connector/src/app/query/components/searchForm/searchForm.module.scss index 351fa257f..0b0d807a6 100644 --- a/query-connector/src/app/query/components/searchForm/searchForm.module.scss +++ b/query-connector/src/app/query/components/searchForm/searchForm.module.scss @@ -4,11 +4,11 @@ display: flex; width: 100%; align-items: center; - margin-top: 2rem; + margin-top: $margin--32px; } .searchFormContainer { - margin-top: $margin-within-group; + margin-top: $margin--16px; padding: 1.5rem; } diff --git a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx b/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx index 36634a754..0beec1473 100644 --- a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx +++ b/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx @@ -64,7 +64,7 @@ const SelectSavedQuery: React.FC = ({ systems and protect patient privacy. If you would like to customize the query response, click on the "customize query" button. -

    Query

    +

    Query

    {/* Select a query drop down */} = ({ )} {/* Submit Button */} -
    +
    -

    - What is it? -

    +

    What is it?

    The TEFCA Query Connector aims to streamline the collection of health data using an intuitive querying process that leverages @@ -56,7 +54,7 @@ export default function LandingPage() { quickly retrieve patient records and relevant case information from HCOs without requiring direct connection and onboarding.

    -

    +

    How does it work?

    diff --git a/query-connector/src/app/query/components/CustomizeQuery.tsx b/query-connector/src/app/query/components/CustomizeQuery.tsx index 71dd52df4..9a98ad641 100644 --- a/query-connector/src/app/query/components/CustomizeQuery.tsx +++ b/query-connector/src/app/query/components/CustomizeQuery.tsx @@ -200,9 +200,9 @@ const CustomizeQuery: React.FC = ({

    Customize query

    -

    +

    Query: {demoQueryValToLabelMap[queryType]} -

    +

    {countLabs} labs found, {countMedications} medications found,{" "} {countConditions} conditions found. diff --git a/query-connector/src/app/query/components/ResultsView.tsx b/query-connector/src/app/query/components/ResultsView.tsx index 688c8f214..095be31e3 100644 --- a/query-connector/src/app/query/components/ResultsView.tsx +++ b/query-connector/src/app/query/components/ResultsView.tsx @@ -75,12 +75,12 @@ const ResultsView: React.FC = ({

    {PAGE_TITLES["results"]}

    -

    +

    Query: {demoQueryValToLabelMap[selectedQuery]} -

    +

    diff --git a/query-connector/src/app/query/components/SearchForm.tsx b/query-connector/src/app/query/components/SearchForm.tsx index 82778ab09..30e71c10f 100644 --- a/query-connector/src/app/query/components/SearchForm.tsx +++ b/query-connector/src/app/query/components/SearchForm.tsx @@ -371,7 +371,7 @@ const SearchForm: React.FC = ({
    - diff --git a/query-connector/src/app/query/components/footer/footer.module.scss b/query-connector/src/app/query/components/footer/footer.module.scss index 455b68036..2c9a2c668 100644 --- a/query-connector/src/app/query/components/footer/footer.module.scss +++ b/query-connector/src/app/query/components/footer/footer.module.scss @@ -15,7 +15,7 @@ .cdcLogoContainer { display: flex; align-items: center; - gap: $margin--8px; + gap: 0.5rem; } .contactUsContainer { diff --git a/query-connector/src/app/query/components/resultsView/resultsView.module.scss b/query-connector/src/app/query/components/resultsView/resultsView.module.scss index 29bdbc6cf..536ade936 100644 --- a/query-connector/src/app/query/components/resultsView/resultsView.module.scss +++ b/query-connector/src/app/query/components/resultsView/resultsView.module.scss @@ -1,7 +1,7 @@ @use "../../../../styles/_variables" as *; .accordionInstance { - margin-bottom: $margin--32px; + margin-bottom: 2rem; } .accordionWrapper > h3 { diff --git a/query-connector/src/app/query/components/searchForm/searchForm.module.scss b/query-connector/src/app/query/components/searchForm/searchForm.module.scss index 0b0d807a6..62911ffef 100644 --- a/query-connector/src/app/query/components/searchForm/searchForm.module.scss +++ b/query-connector/src/app/query/components/searchForm/searchForm.module.scss @@ -4,11 +4,11 @@ display: flex; width: 100%; align-items: center; - margin-top: $margin--32px; + margin-top: 2rem; } .searchFormContainer { - margin-top: $margin--16px; + margin-top: 1rem; padding: 1.5rem; } diff --git a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx b/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx index 0beec1473..e87ee9fc6 100644 --- a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx +++ b/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx @@ -132,7 +132,7 @@ const SelectSavedQuery: React.FC = ({ )} {/* Submit Button */} -
    +

    Name
    +
    diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss index d3f6a607f..28296a0c2 100644 --- a/query-connector/src/styles/custom-styles.scss +++ b/query-connector/src/styles/custom-styles.scss @@ -53,14 +53,6 @@ h1 { } // Utility classes -.margin-top-5 { - margin-top: 2.5rem; -} - -.margin-top--32px { - margin-top: 2rem; -} - // Numbers correspond to the USWDS spacing classes // https://designsystem.digital.gov/utilities/margin-and-padding/ .margin-top-0-important { From dacccd99199f5ab1539f168951eff97022e58596 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Fri, 1 Nov 2024 17:09:13 -0400 Subject: [PATCH 31/42] fix spacing --- .../src/app/query/components/header/header.module.css | 1 + query-connector/src/styles/custom-styles.scss | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index 4e3a32d01..3474ae1a5 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -62,4 +62,5 @@ margin: 0 !important; padding: 0 !important; height: 4.5rem; + max-width: 100% !important; } diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss index 28296a0c2..7405535e8 100644 --- a/query-connector/src/styles/custom-styles.scss +++ b/query-connector/src/styles/custom-styles.scss @@ -133,7 +133,7 @@ h1 { .container { display: flex; margin: 0 auto; // Centers the container itself if needed - max-width: 640px; + max-width: $query-connector-max-width; column-gap: 2rem; } } @@ -145,7 +145,7 @@ h1 { } .blue-background-container .text-holder { - max-width: 640px; + max-width: $query-connector-max-width; margin: 0 auto; text-align: left; } @@ -171,7 +171,7 @@ h1 { justify-content: center; // Centers the column in the container margin: 0 auto; // Centers the container itself if needed row-gap: 0.1em; // Adjusts the gap between rows/items - max-width: 640px; + max-width: $query-connector-max-width; } .data-title { From 39ab386365843042b512697c1cc09cd2ce158c46 Mon Sep 17 00:00:00 2001 From: Katie Campbell Downie Date: Fri, 1 Nov 2024 16:10:44 -0500 Subject: [PATCH 32/42] responsive header styles --- .../src/app/query/components/header/header.module.css | 5 ++++- query-connector/src/app/query/components/header/header.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index 4e3a32d01..707640a52 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -5,7 +5,8 @@ color: white !important; padding: 0px !important; font: inherit !important; - margin-right: 1rem !important; + margin: 0 0.5rem !important; + text-align: left !important; } .signinButton { @@ -58,8 +59,10 @@ } .headerContentContainer { + display: flex; align-items: center !important; margin: 0 !important; padding: 0 !important; height: 4.5rem; + max-width: 100% !important; } diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 991c92d73..2aa10b1f5 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -43,7 +43,7 @@ export default function HeaderComponent() { )} >
    -
    +
    {metadata.title} From 3ccf3680e1fe6c9f92ee86be7dc50841cd4acd1d Mon Sep 17 00:00:00 2001 From: Katie Campbell Downie Date: Fri, 1 Nov 2024 16:31:27 -0500 Subject: [PATCH 33/42] responsive footer styles --- .../components/footer/footer.module.scss | 27 ++++++++++++----- .../app/query/components/footer/footer.tsx | 30 +++++++++---------- 2 files changed, 33 insertions(+), 24 deletions(-) diff --git a/query-connector/src/app/query/components/footer/footer.module.scss b/query-connector/src/app/query/components/footer/footer.module.scss index 2c9a2c668..c32bda670 100644 --- a/query-connector/src/app/query/components/footer/footer.module.scss +++ b/query-connector/src/app/query/components/footer/footer.module.scss @@ -4,21 +4,32 @@ height: 5rem; display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-start; background-color: $primary-darker; -} - -.footerContainer > div { - flex-grow: 1; + overflow: scroll !important; } .cdcLogoContainer { display: flex; align-items: center; - gap: 0.5rem; + margin-right: 0.5rem; } -.contactUsContainer { +.cdcFooterTextContainer { display: flex; - justify-content: end; + justify-content: space-between; + width: 100%; + + p { + white-space: nowrap; + margin: 0; + overflow: scroll; + } +} + +@media (max-width: 64em) { + .cdcFooterTextContainer { + flex-direction: column; + justify-content: flex-start; + } } diff --git a/query-connector/src/app/query/components/footer/footer.tsx b/query-connector/src/app/query/components/footer/footer.tsx index 47a0cbfcd..ee6025058 100644 --- a/query-connector/src/app/query/components/footer/footer.tsx +++ b/query-connector/src/app/query/components/footer/footer.tsx @@ -9,30 +9,28 @@ import classNames from "classnames"; export default function FooterComponent() { return ( From 9d58fa6c01f515f6b95d20a80ab6f617ee2d5ccb Mon Sep 17 00:00:00 2001 From: Michelle Kang Date: Fri, 1 Nov 2024 17:56:22 -0400 Subject: [PATCH 34/42] spacing changes --- query-connector/src/app/page.module.scss | 14 ++++++++++++++ query-connector/src/app/page.tsx | 14 +++++++------- 2 files changed, 21 insertions(+), 7 deletions(-) create mode 100644 query-connector/src/app/page.module.scss diff --git a/query-connector/src/app/page.module.scss b/query-connector/src/app/page.module.scss new file mode 100644 index 000000000..e076dc817 --- /dev/null +++ b/query-connector/src/app/page.module.scss @@ -0,0 +1,14 @@ +.pageSubtitle { + margin: 2rem 0 0.5rem 0; +} + +.pageSubtitle:last-of-type{ + margin-top: 1.5rem; +} + +.pageContent { + font-weight: 300; + margin-top: 0; + font-size:1rem; + margin-bottom: 0.5rem +} \ No newline at end of file diff --git a/query-connector/src/app/page.tsx b/query-connector/src/app/page.tsx index 0d54a63e6..5607c3f42 100644 --- a/query-connector/src/app/page.tsx +++ b/query-connector/src/app/page.tsx @@ -7,7 +7,7 @@ import { } from "@trussworks/react-uswds"; import { useRouter } from "next/navigation"; import Image from "next/image"; - +import styles from "./page.module.scss" /** * The landing page for the TEFCA Viewer. * @returns The LandingPage component. @@ -25,10 +25,10 @@ export default function LandingPage() {
    -

    +

    Data collection made easier

    -

    +

    The TEFCA Query Connector allows your jurisdiction to query a wide network of healthcare organizations (HCOs) enabled by TEFCA, giving you access to more complete and timely data. @@ -44,8 +44,8 @@ export default function LandingPage() {

    -

    What is it?

    -

    +

    What is it?

    +

    The TEFCA Query Connector aims to streamline the collection of health data using an intuitive querying process that leverages Qualified Health Information Networks (QHINs) within the Trusted @@ -54,10 +54,10 @@ export default function LandingPage() { quickly retrieve patient records and relevant case information from HCOs without requiring direct connection and onboarding.

    -

    +

    How does it work?

    -

    +

    Public health staff can interact with the TEFCA Query Connector manually by entering simple patient details — such as name, date of birth, or medical identifiers — along with a query use case, into From 3b7e7f8154c3f893838f0894cd54dab609ba4132 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 1 Nov 2024 21:56:49 +0000 Subject: [PATCH 35/42] [pre-commit.ci] auto fixes from pre-commit hooks --- query-connector/src/app/page.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/query-connector/src/app/page.tsx b/query-connector/src/app/page.tsx index 5607c3f42..16a3ee215 100644 --- a/query-connector/src/app/page.tsx +++ b/query-connector/src/app/page.tsx @@ -7,7 +7,7 @@ import { } from "@trussworks/react-uswds"; import { useRouter } from "next/navigation"; import Image from "next/image"; -import styles from "./page.module.scss" +import styles from "./page.module.scss"; /** * The landing page for the TEFCA Viewer. * @returns The LandingPage component. @@ -54,9 +54,7 @@ export default function LandingPage() { quickly retrieve patient records and relevant case information from HCOs without requiring direct connection and onboarding.

    -

    - How does it work? -

    +

    How does it work?

    Public health staff can interact with the TEFCA Query Connector manually by entering simple patient details — such as name, date of From 6d5aa4f3fe254e5e9930370d14e9e1e260b2ad1b Mon Sep 17 00:00:00 2001 From: Katie Campbell Downie Date: Fri, 1 Nov 2024 17:05:12 -0500 Subject: [PATCH 36/42] persist dropdown styles at smaller widths --- .../app/query/components/header/header.module.css | 14 +++++++++++++- .../src/app/query/components/header/header.tsx | 4 ++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css index 707640a52..dad369320 100644 --- a/query-connector/src/app/query/components/header/header.module.css +++ b/query-connector/src/app/query/components/header/header.module.css @@ -42,7 +42,7 @@ border-radius: 4px !important; padding: 0.5rem !important; background: #ffffff !important; - margin: 3.5rem 3rem 0rem 0rem !important; + margin: 3.5rem 2rem 0rem 0rem !important; width: 10rem !important; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16); } @@ -52,12 +52,17 @@ text-decoration: none !important; padding: 0.5rem 1rem !important; cursor: pointer; + width: 100%; } .menuItem:hover { text-decoration: none !important; } +.subMenuItem { + display: flex; +} + .headerContentContainer { display: flex; align-items: center !important; @@ -66,3 +71,10 @@ height: 4.5rem; max-width: 100% !important; } + +@media (max-width: 63.99em) { + .menuDropdown { + z-index: 400 !important; + position: absolute; + } +} diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 2aa10b1f5..1219ccd06 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -117,13 +117,13 @@ export default function HeaderComponent() { className={`usa-nav__submenu ${styles.menuDropdown}`} > {!isProduction && ( -
  • +
  • My queries
    • )} -
  • +
  • Log out From d032275844b771fbfedb761309933e4061cf68c2 Mon Sep 17 00:00:00 2001 From: Katie Campbell Downie Date: Fri, 1 Nov 2024 17:52:56 -0500 Subject: [PATCH 37/42] click to hide menu --- .../components/footer/footer.module.scss | 1 - .../app/query/components/header/header.tsx | 25 +++++++++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/query-connector/src/app/query/components/footer/footer.module.scss b/query-connector/src/app/query/components/footer/footer.module.scss index c32bda670..a1da06fc9 100644 --- a/query-connector/src/app/query/components/footer/footer.module.scss +++ b/query-connector/src/app/query/components/footer/footer.module.scss @@ -23,7 +23,6 @@ p { white-space: nowrap; margin: 0; - overflow: scroll; } } diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index 1219ccd06..ad67fc42b 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -13,12 +13,31 @@ import classNames from "classnames"; */ export default function HeaderComponent() { const modalRef = useRef(null); + const menuRef = useRef(null) + const [isClient, setIsClient] = useState(false); const [showMenu, setShowMenu] = useState(false); + const outsideMenuClick = (event: MouseEvent) => { + if ( + showMenu && + menuRef.current && + !menuRef.current.contains(event.target as Node) + ) { + setShowMenu(false); + } + }; + useEffect(() => { setIsClient(true); - }, []); + + document.addEventListener("mousedown", outsideMenuClick); + + return () => { + document.removeEventListener("mousedown", outsideMenuClick); + }; + + }, [showMenu]); const router = useRouter(); const path = usePathname(); @@ -111,7 +130,9 @@ export default function HeaderComponent() { )} {showMenu && ( -
    +

    • Name