Add label for number of conditions (#2218)

* add tag to condition summary * tag displays num conditions * move const and update/add tests * change border-radius to rem * rename tag class
CDCgov · Jul 23, 2024 · 9c649bf · 9c649bf
1 parent ca52ae8
commit 9c649bf
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 7 deletions.
diff --git a/containers/ecr-viewer/src/app/tests/components/EcrSummary.test.tsx b/containers/ecr-viewer/src/app/tests/components/EcrSummary.test.tsx
@@ -1,6 +1,8 @@
 import { render } from "@testing-library/react";
 import { axe } from "jest-axe";
-import EcrSummary from "../../view-data/components/EcrSummary";
+import EcrSummary, {
+  numConditionsText,
+} from "../../view-data/components/EcrSummary";
 
 describe("EcrSummary", () => {
   let container: HTMLElement;
@@ -48,7 +50,15 @@ describe("EcrSummary", () => {
   const aboutTheCondition = [
     {
       title: "Reportable Condition",
-      value: "Influenza caused by Influenza A virus subtype H5N1 (disorder)",
+      value: (
+        <div className={"p-list"}>
+          {[
+            "Influenza caused by Influenza A virus subtype H5N1 (disorder)",
+          ].map((displayName) => (
+            <p key={displayName}>{displayName}</p>
+          ))}
+        </div>
+      ),
     },
     {
       title: "RCKMS Rule Summary",
@@ -88,3 +98,42 @@ describe("EcrSummary", () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 });
+
+describe("numConditionsText", () => {
+  const createConditionDetails = (conditions: any[]) => [
+    {
+      title: "Reportable Condition",
+      value: (
+        <div className={"p-list"}>
+          {conditions.map((displayName: string) => (
+            <p key={displayName}>{displayName}</p>
+          ))}
+        </div>
+      ),
+    },
+    {
+      title: "RCKMS Rule Summary",
+      value: "Cough",
+    },
+  ];
+
+  it("Given 0 reportable conditions, should return 0 REPORTABLE CONDITIONS", () => {
+    const conditionDetails = createConditionDetails([]);
+    const result = numConditionsText(conditionDetails);
+    expect(result).toEqual("0 CONDITIONS FOUND");
+  });
+  it("Given 1 reportable condition, should return 1 REPORTABLE CONDITION", () => {
+    const conditionDetails = createConditionDetails(["Influenza"]);
+    const result = numConditionsText(conditionDetails);
+    expect(result).toEqual("1 CONDITION FOUND");
+  });
+  it("Given n reportable conditions, should return n REPORTABLE CONDITIONS", () => {
+    const conditionDetails = createConditionDetails([
+      "Influenza",
+      "COVID-19",
+      "Measles",
+    ]);
+    const result = numConditionsText(conditionDetails);
+    expect(result).toEqual("3 CONDITIONS FOUND");
+  });
+});
diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrSummary.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrSummary.test.tsx.snap
@@ -218,10 +218,20 @@ End: 05/13/2022 9:57 AM UTC
         class="usa-summary-box__body"
       >
         <h2
-          class="summary-box-key-information side-nav-ignore"
+          class="summary-box-key-information side-nav-ignore header-with-tag"
           id="condition-summary"
         >
-          Condition Summary
+          <div>
+            Condition Summary
+          </div>
+          <div>
+            <span
+              class="usa-tag tag-info"
+              data-testid="tag"
+            >
+              1 CONDITION FOUND
+            </span>
+          </div>
         </h2>
         <div
           class="usa-summary-box__text"
@@ -238,7 +248,13 @@ End: 05/13/2022 9:57 AM UTC
               <div
                 class="grid-col-auto maxw7 text-pre-line"
               >
-                Influenza caused by Influenza A virus subtype H5N1 (disorder)
+                <div
+                  class="p-list"
+                >
+                  <p>
+                    Influenza caused by Influenza A virus subtype H5N1 (disorder)
+                  </p>
+                </div>
               </div>
             </div>
             <div

diff --git a/containers/ecr-viewer/src/app/view-data/components/EcrSummary.tsx b/containers/ecr-viewer/src/app/view-data/components/EcrSummary.tsx
@@ -4,6 +4,7 @@ import {
   DataTableDisplay,
   DisplayDataProps,
 } from "@/app/DataDisplay";
+import { Tag } from "@trussworks/react-uswds";
 
 interface EcrSummaryProps {
   patientDetails: DisplayDataProps[];
@@ -64,10 +65,17 @@ const EcrSummary: React.FC<EcrSummaryProps> = ({
         </div>
         <div className="usa-summary-box__body">
           <h2
-            className={"summary-box-key-information side-nav-ignore"}
+            className={
+              "summary-box-key-information side-nav-ignore header-with-tag"
+            }
             id={"condition-summary"}
           >
-            Condition Summary
+            <div>Condition Summary</div>
+            <div>
+              <Tag className="tag-info">
+                {numConditionsText(aboutTheCondition)}
+              </Tag>
+            </div>
           </h2>
           <div className="usa-summary-box__text">
             {aboutTheCondition.map((item) => (
@@ -100,4 +108,27 @@ const EcrSummary: React.FC<EcrSummaryProps> = ({
   );
 };
 
+/**
+ * Returns a formatted string indicating the number of reportable conditions.
+ * @param conditionDetails - An array of objects representing the relevant condition details.
+ * @returns A formatted string that specifies the number of conditions found.
+ */
+export const numConditionsText = (conditionDetails: DisplayDataProps[]) => {
+  let numConditions = 0;
+  const reportableConditions = conditionDetails.find(
+    (item) => item.title === "Reportable Condition",
+  );
+  if (
+    reportableConditions &&
+    React.isValidElement(reportableConditions.value)
+  ) {
+    numConditions = reportableConditions.value.props.children.length;
+  }
+  const conditionsText =
+    numConditions === 1
+      ? `${numConditions} CONDITION FOUND`
+      : `${numConditions} CONDITIONS FOUND`;
+  return conditionsText;
+};
+
 export default EcrSummary;
diff --git a/containers/ecr-viewer/src/styles/custom-styles.scss b/containers/ecr-viewer/src/styles/custom-styles.scss
@@ -426,3 +426,23 @@ ul.usa-sidenav > li.usa-sidenav__item > ul.usa-sidenav__sublist > li.usa-sidenav
     margin-bottom: 0;
   }
 }
+
+.header-with-tag {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tag-info {
+  display: flex;
+  padding: 0.25rem 0.5rem;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 0.125rem;
+  background-color: #99DEEA;
+  font-weight: normal;
+  font-size: 0.875rem;
+  line-height: 100%;
+  color: #111111;
+}