Fix modal formatting (#2315)

* progress on modal styling * progress on Safari focus * Final modal styling, initially disable next button, Safari focus * DRY out modal button definition and ensure next button is disabled whenever modal is opened * Fix use case query labels * Only highlight fields that truly have have data to be auto populated * Fix phone number auto fill * Update e2e tests to handle the next button being disabled initially * Move modal options map into constants.ts
CDCgov · Aug 14, 2024 · 57ccaa2 · 57ccaa2
1 parent 627f432
commit 57ccaa2
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 80 deletions.
diff --git a/containers/tefca-viewer/e2e/query_workflow.spec.ts b/containers/tefca-viewer/e2e/query_workflow.spec.ts
@@ -40,6 +40,9 @@ test.describe("querying with the TryTEFCA viewer", () => {
     page,
   }) => {
     await page.getByRole("button", { name: "Go to the demo" }).click();
+    await page
+      .getByRole("button", { name: "Newborn screening follow-up" })
+      .click();
     await page.getByRole("button", { name: "Next" }).click();
 
     // Check that the info alert is visible and contains the correct text
@@ -103,6 +106,11 @@ test.describe("querying with the TryTEFCA viewer", () => {
 
   test("unsuccessful user query: no patients", async ({ page }) => {
     await page.getByRole("button", { name: "Go to the demo" }).click();
+    await page
+      .getByRole("button", {
+        name: "Gather social determinants of health for a patient",
+      })
+      .click();
     await page.getByRole("button", { name: "Next" }).click();
     await page
       .getByLabel("Query", { exact: true })
@@ -129,6 +137,9 @@ test.describe("querying with the TryTEFCA viewer", () => {
     page,
   }) => {
     await page.getByRole("button", { name: "Go to the demo" }).click();
+    await page
+      .getByRole("button", { name: "Syphilis case investigation" })
+      .click();
     await page.getByRole("button", { name: "Next" }).click();
 
     await page.getByLabel("Query", { exact: true }).selectOption("syphilis");

diff --git a/containers/tefca-viewer/src/app/constants.ts b/containers/tefca-viewer/src/app/constants.ts
@@ -11,6 +11,19 @@ export const UseCases = [
 ] as const;
 export type USE_CASES = (typeof UseCases)[number];
 
+/**
+ * Map of use cases to their corresponding modal options labels.
+ */
+
+export const modalOptions: Record<USE_CASES, string> = {
+  chlamydia: "Chlamydia case investigation",
+  gonorrhea: "Gonorrhea case investigation",
+  syphilis: "Syphilis case investigation",
+  cancer: "Cancer case investigation",
+  "newborn-screening": "Newborn screening follow-up",
+  "social-determinants": "Gather social determinants of health for a patient",
+};
+
 /**
  * The FHIR servers that can be used in the app
  */
@@ -31,7 +44,7 @@ export type DemoDataFields = {
   LastName: string;
   DOB: string;
   MRN: string;
-  Phone?: string;
+  Phone: string;
   FhirServer: FHIR_SERVERS;
   UseCase: USE_CASES;
 };
@@ -65,6 +78,7 @@ export const demoData: Record<PatientType, DemoDataFields> = {
     LastName: "JMC",
     DOB: "2001-05-07",
     MRN: "b50z-wayszq-ofib",
+    Phone: "",
     FhirServer: "JMC Meld: Direct",
     UseCase: "chlamydia",
   },
@@ -73,6 +87,7 @@ export const demoData: Record<PatientType, DemoDataFields> = {
     LastName: "JMC",
     DOB: "1998-05-31",
     MRN: "JMC-1002",
+    Phone: "",
     FhirServer: "JMC Meld: Direct",
     UseCase: "gonorrhea",
   },

diff --git a/containers/tefca-viewer/src/app/page.tsx b/containers/tefca-viewer/src/app/page.tsx
@@ -12,6 +12,7 @@ import {
 } from "@trussworks/react-uswds";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
+import { modalOptions } from "./constants";
 
 /**
  * The landing page for the TEFCA Viewer.
@@ -37,6 +38,7 @@ export default function LandingPage() {
 
   const handleOptionClick = (option: string) => {
     setSelectedOption(option);
+    document.getElementById(option)?.focus();
   };
 
   return (
@@ -112,6 +114,7 @@ export default function LandingPage() {
                 modalRef={modalRef}
                 opener
                 title="Go to the demo"
+                onClick={() => setSelectedOption(null)}
               >
                 Go to the demo
               </ModalToggleButton>
@@ -133,70 +136,35 @@ export default function LandingPage() {
           onPointerEnterCapture={undefined}
           onPointerLeaveCapture={undefined}
         >
-          <ModalHeading
-            id="data-usage-policy-modal-heading"
-            style={{ fontSize: "1.25rem" }}
-          >
+          <ModalHeading id="data-usage-policy-modal-heading">
             Customize your demo experience
           </ModalHeading>
           <div className="usa-prose">
             <p id="modal-2-description">
-              Select a scenario to see how you might use the TEFCA Query
-              Connector and what kind of data would be returned.
+              Select a scenario to see what kinds of data you can gather using
+              the TEFCA Query Connector.
             </p>
             <div className="modal-options">
-              <Button
-                type="button"
-                className={`modal-option ${selectedOption === "chlamydia"}`}
-                onClick={() => handleOptionClick("chlamydia")}
-              >
-                Chlamydia case investigation
-              </Button>
-              <Button
-                type="button"
-                className={`modal-option ${selectedOption === "gonorrhea"}`}
-                onClick={() => handleOptionClick("gonorrhea")}
-              >
-                Gonorrhea case investigation
-              </Button>
-              <Button
-                type="button"
-                className={`modal-option ${selectedOption === "syphilis"}`}
-                onClick={() => handleOptionClick("syphilis")}
-              >
-                Syphilis case investigation
-              </Button>
-              <Button
-                type="button"
-                className={`modal-option ${selectedOption === "cancer"}`}
-                onClick={() => handleOptionClick("cancer")}
-              >
-                Cancer case investigation
-              </Button>
-              <Button
-                type="button"
-                className={`modal-option ${
-                  selectedOption === "newborn-screening"
-                }`}
-                onClick={() => handleOptionClick("newborn-screening")}
-              >
-                Newborn screening follow-up
-              </Button>
-              <Button
-                type="button"
-                className={`modal-option ${
-                  selectedOption === "social-determinants" ? "selected" : ""
-                }`}
-                onClick={() => handleOptionClick("social-determinants")}
-              >
-                Gather social determinants of health for a patient
-              </Button>
+              {Object.keys(modalOptions).map((option) => (
+                <Button
+                  type="button"
+                  className={`modal-option ${
+                    selectedOption === option ? "selected" : ""
+                  }`}
+                  id={option}
+                  onClick={() => handleOptionClick(option)}
+                >
+                  {modalOptions[option as keyof typeof modalOptions]}
+                </Button>
+              ))}
             </div>
           </div>
           <ModalFooter>
             <Button
-              className="get-started-button"
+              className="next-button"
               type="button"
+              id="next-button"
+              disabled={!selectedOption}
               onClick={handleClick}
             >
               Next

diff --git a/containers/tefca-viewer/src/app/query/components/SearchForm.tsx b/containers/tefca-viewer/src/app/query/components/SearchForm.tsx
@@ -80,9 +80,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
         setLastName(data.LastName);
         setDOB(data.DOB);
         setMRN(data.MRN);
-        if (data.Phone) {
-          setPhone(data.Phone);
-        }
+        setPhone(data.Phone);
         setFhirServer(data.FhirServer as FHIR_SERVERS);
         setUseCase(data.UseCase as USE_CASES);
         setAutofilled(highlightAutofilled);
@@ -306,7 +304,8 @@ const SearchForm: React.FC<SearchFormProps> = ({
                   setFirstName(event.target.value);
                 }}
                 style={{
-                  backgroundColor: autofilled ? autofillColor : undefined,
+                  backgroundColor:
+                    autofilled && firstName ? autofillColor : undefined,
                 }}
               />
             </div>
@@ -322,7 +321,8 @@ const SearchForm: React.FC<SearchFormProps> = ({
                   setLastName(event.target.value);
                 }}
                 style={{
-                  backgroundColor: autofilled ? autofillColor : undefined,
+                  backgroundColor:
+                    autofilled && lastName ? autofillColor : undefined,
                 }}
               />
             </div>
@@ -342,7 +342,8 @@ const SearchForm: React.FC<SearchFormProps> = ({
                   setPhone(event.target.value);
                 }}
                 style={{
-                  backgroundColor: autofilled ? autofillColor : undefined,
+                  backgroundColor:
+                    autofilled && phone ? autofillColor : undefined,
                 }}
               />
             </div>
@@ -365,7 +366,8 @@ const SearchForm: React.FC<SearchFormProps> = ({
                       setDOB(event.target.value);
                     }}
                     style={{
-                      backgroundColor: autofilled ? autofillColor : undefined,
+                      backgroundColor:
+                        autofilled && dob ? autofillColor : undefined,
                     }}
                   />
                 </div>
@@ -439,7 +441,8 @@ const SearchForm: React.FC<SearchFormProps> = ({
                   setMRN(event.target.value);
                 }}
                 style={{
-                  backgroundColor: autofilled ? autofillColor : undefined,
+                  backgroundColor:
+                    autofilled && mrn ? autofillColor : undefined,
                 }}
               />
             </div>

diff --git a/containers/tefca-viewer/src/styles/custom-styles.scss b/containers/tefca-viewer/src/styles/custom-styles.scss
@@ -286,7 +286,7 @@ body {
   margin-top: auto;
 }
 
-.get-started-button {
+.next-button {
   max-width: 10em;
 }
 
@@ -476,39 +476,72 @@ html {
 }
 
 .custom-modal {
-  width: 80%;
-  max-width: 640px;
-  padding: 0.25rem;
-  margin: auto;
+  max-width: 704px;
+}
+
+.usa-modal--lg {
+  background-color: #edeff0;
+  padding-top: 0;
+}
+
+.usa-modal__content {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.usa-modal__main {
+  margin: 0 auto;
+  padding-top: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-bottom: 2rem !important;
+}
+
+.usa-modal__heading {
+  font-family: "Source Sans Pro Web" !important;
+  font-size: 1.219rem !important;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-bottom: 1rem;
 }
 
 .modal-options {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 20px;
   margin-top: 1rem;
   justify-content: space-around;
-}
-
-.usa-modal--lg {
-  background-color: #edeff0;
-}
-
-.custom-modal .usa-modal__main {
-  padding-bottom: 1.25rem;
-  padding-top: 1.25rem;
-  width: 100%;
-  max-width: 40rem;
+  line-height: 4;
+  align-items: stretch;
 }
 
 .modal-option {
-  flex: 1 1 30%;
+  flex: 1;
   background-color: white;
   border: 2px solid #005ea2;
   padding: 2rem;
   text-align: center;
   cursor: pointer;
   color: #1a4480;
+  align-self: stretch;
+  margin: 0;
+  aspect-ratio : 1.27;
+  font-family: "Source Sans Pro Web" !important;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  padding: 1.6rem;
+}
+
+#modal-2-description{
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 162%; /* 25.92px */
+  max-width: 100%;
+  margin-bottom: 2.5rem;
 }
 
 .modal-option:hover,