-
+
+
-
+
-
-
+ class="section__line_gray"
+ />
-
-
-
-
+
-
-
+ class="section__line_gray"
+ />
-
-
-
-
+
-
-
+ class="section__line_gray"
+ />
-
-
-
-
+
-
-
+ class="section__line_gray"
+ />
-
diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/SocialHistory.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/SocialHistory.test.tsx.snap
index d58425719d..42a82880ae 100644
--- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/SocialHistory.test.tsx.snap
+++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/SocialHistory.test.tsx.snap
@@ -11,109 +11,113 @@ exports[`SocialHistory should match snapshot 1`] = `
-
- Social History
-
-
-
+
+ Social History
+
+
+
- Occupation
+
+ Occupation
+
+
+ Nursing, psychiatric, and home health aides
+
- Nursing, psychiatric, and home health aides
-
+ class="section__line_gray"
+ />
-
-
-
-
+
- Tobacco Use
+
+ Tobacco Use
+
+
+ Tobacco smoking consumption unknown
+
- Tobacco smoking consumption unknown
-
+ class="section__line_gray"
+ />
-
-
-
-
+
- Homeless Status
+
+ Homeless Status
+
+
+ unsatisfactory living conditions (finding)
+
- unsatisfactory living conditions (finding)
-
+ class="section__line_gray"
+ />
-
-
-
-
+
- Occupation
+
+ Occupation
+
+
+ Nursing, psychiatric, and home health aides
+
- Nursing, psychiatric, and home health aides
-
+ class="section__line_gray"
+ />
-
-
-
-
+
- Sexual Orientation
+
+ Sexual Orientation
+
+
+ Do not know
+
- Do not know
-
+ class="section__line_gray"
+ />
-
diff --git a/containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx b/containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx
index 5b808cf59f..ba8e257cc2 100644
--- a/containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx
+++ b/containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx
@@ -17,17 +17,21 @@ export interface DisplayDataProps {
* @param props - Props for the component.
* @param props.item - The display data item to be rendered.
* @param [props.className] - Additional class name for styling purposes.
+ * @param [props.themeColor] - Color to use for theming (default="gray").
* @returns - A React element representing the display of data.
*/
export const DataDisplay: React.FC<{
item: DisplayDataProps;
className?: string;
+ themeColor?: string;
}> = ({
item,
className,
+ themeColor = "gray",
}: {
item: DisplayDataProps;
className?: string;
+ themeColor?: string;
}): React.JSX.Element => {
item.dividerLine =
item.dividerLine == null || item.dividerLine == undefined
@@ -49,7 +53,11 @@ export const DataDisplay: React.FC<{
{item.value}
- {item.dividerLine ?
: ""}
+ {item.dividerLine ? (
+
+ ) : (
+ ""
+ )}
);
};
@@ -58,11 +66,13 @@ export const DataDisplay: React.FC<{
* Functional component for displaying (a list of) data tables.
* @param props - Props containing the item to be displayed.
* @param props.item - The data item to be displayed.
+ * @param props.themeColor - The color used in the line (default "gray").
* @returns The JSX element representing the data table display.
*/
export const DataTableDisplay: React.FC<{
item: DisplayDataProps;
-}> = ({ item }): React.JSX.Element => {
+ themeColor?: string;
+}> = ({ item, themeColor = "gray" }): React.JSX.Element => {
item.dividerLine =
item.dividerLine == null || item.dividerLine == undefined
? true
@@ -70,7 +80,11 @@ export const DataTableDisplay: React.FC<{
return (
{item.value}
- {item.dividerLine ?
: ""}
+ {item.dividerLine ? (
+
+ ) : (
+ ""
+ )}
);
};
diff --git a/containers/ecr-viewer/src/app/view-data/components/Demographics.tsx b/containers/ecr-viewer/src/app/view-data/components/Demographics.tsx
index ca50fd2293..3545ac06c2 100644
--- a/containers/ecr-viewer/src/app/view-data/components/Demographics.tsx
+++ b/containers/ecr-viewer/src/app/view-data/components/Demographics.tsx
@@ -1,8 +1,4 @@
-import {
- AccordionSection,
- AccordionH4,
- AccordionDiv,
-} from "../component-utils";
+import { AccordionSection, AccordionSubSection } from "../component-utils";
import React from "react";
import {
DataDisplay,
@@ -22,12 +18,11 @@ interface DemographicsProps {
const Demographics = ({ demographicsData }: DemographicsProps) => {
return (
- Demographics
-
+
{demographicsData.map((item, index) => (
))}
-
+
);
};
diff --git a/containers/ecr-viewer/src/app/view-data/components/EcrSummary.tsx b/containers/ecr-viewer/src/app/view-data/components/EcrSummary.tsx
index 853313aabf..95bf8bfdad 100644
--- a/containers/ecr-viewer/src/app/view-data/components/EcrSummary.tsx
+++ b/containers/ecr-viewer/src/app/view-data/components/EcrSummary.tsx
@@ -90,7 +90,7 @@ const EcrSummary: React.FC
= ({
{patientDetails.map((item) => (
-
+
))}
@@ -103,7 +103,7 @@ const EcrSummary: React.FC
= ({
{encounterDetails.map((item) => (
-
+
))}
diff --git a/containers/ecr-viewer/src/app/view-data/components/LoadingComponent.tsx b/containers/ecr-viewer/src/app/view-data/components/LoadingComponent.tsx
index 4f8f1a1380..794f540b6a 100644
--- a/containers/ecr-viewer/src/app/view-data/components/LoadingComponent.tsx
+++ b/containers/ecr-viewer/src/app/view-data/components/LoadingComponent.tsx
@@ -6,26 +6,30 @@ import {
SideNav,
} from "@trussworks/react-uswds";
import { ExpandCollapseButtons } from "./ExpandCollapseButtons";
-import {
- AccordionDiv,
- AccordionH4,
- AccordionSection,
-} from "../component-utils";
+import { AccordionSection, AccordionSubSection } from "../component-utils";
import Header from "@/app/Header";
import classNames from "classnames";
import PatientBanner from "./PatientBanner";
import { BackButton } from "./BackButton";
+import React from "react";
/**
* Renders the loading blobs in gray or in blue
- * @param numberOfRows - number of rows to render
- * @param isGray - whether you want the gray or blue version
+ * @param props - Props for the component.
+ * @param [props.numberOfRows] - number of rows to render
+ * @param [props.themeColor] - Color to use for theming (default="gray")
* @returns Rows of blobs.
*/
-const renderLoadingBlobs = (numberOfRows: number, isGray: boolean = true) => {
+const LoadingBlobs = ({
+ numberOfRows,
+ themeColor = "gray",
+}: {
+ numberOfRows: number;
+ themeColor?: string;
+}) => {
const rows = Array.from({ length: numberOfRows });
- const loadingBlobStyle = isGray ? "loading-blob-gray" : "loading-blob-blue";
- const sectionLineStyle = isGray ? "section__line_gray" : "section__line";
+ const loadingBlobStyle = `loading-blob-${themeColor}`;
+ const sectionLineStyle = `section__line_${themeColor}`;
return (
@@ -43,22 +47,18 @@ const renderLoadingBlobs = (numberOfRows: number, isGray: boolean = true) => {
- {numberOfRows > 1 ? (
-
- ) : (
- ""
- )}
+ {numberOfRows > 1 &&
}
))}
);
};
-const renderSideNavLoadingItems = () => {
+const SideNavLoadingItems = () => {
const loadingBlobStyle = "loading-blob-gray";
return (
-
+
);
};
@@ -80,32 +80,15 @@ const SideNavLoadingSkeleton = ({
eCR Document,
Patient Info,
- {renderSideNavLoadingItems()}]}
- isSubnav={true}
- >,
- Clinical Info,
- {renderSideNavLoadingItems()}]}
- isSubnav={true}
- >,
- Lab Info,
- {renderSideNavLoadingItems()}]}
- isSubnav={true}
- >,
- eCR Metadata,
- {renderSideNavLoadingItems()}]}
- isSubnav={true}
- >,
- Unavailable Info,
- {renderSideNavLoadingItems()}]}
- isSubnav={true}
- >,
- ]}
+ "Patient Info",
+ "Clinical Info",
+ "Lab Info",
+ "eCR Metadata",
+ "Unavailable Info",
+ ].flatMap((title) => [
+ {title},
+ ]} isSubnav={true}>,
+ ])}
isSubnav={true}
/>,
];
@@ -138,43 +121,49 @@ const EcrSummaryLoadingSkeleton = () => {
Patient Summary
- {renderLoadingBlobs(4, false)}
+
Encounter Summary
- {renderLoadingBlobs(4, false)}
+
Condition Summary
- {renderLoadingBlobs(4, false)}
+
);
};
+const EcrDocumentFiller = ({
+ title,
+ numberOfRows,
+}: {
+ title: string;
+ numberOfRows: number;
+}) => {
+ return (
+
+
+
+
+
+ );
+};
+
/**
* Renders Accordion of the loading state
* @returns A JSX component with rows of blobs.
*/
const AccordionLoadingSkeleton = () => {
- const renderEcrDocumentFiller = (title: string, numberOfRows: number) => {
- return (
-
-
- {title}
-
- {renderLoadingBlobs(numberOfRows)}
-
- );
- };
const accordionItems: any[] = [
{
title: "Patient Info",
expanded: true,
content: (
<>
- {renderEcrDocumentFiller("Demographics", 10)}
- {renderEcrDocumentFiller("Social History", 3)}
+
+
),
headingLevel: "h3",
@@ -184,8 +173,8 @@ const AccordionLoadingSkeleton = () => {
expanded: true,
content: (
<>
- {renderEcrDocumentFiller("Encounter Details", 7)}
- {renderEcrDocumentFiller("Provider Details", 2)}
+
+
),
headingLevel: "h3",
@@ -195,10 +184,13 @@ const AccordionLoadingSkeleton = () => {
expanded: true,
content: (
<>
- {renderEcrDocumentFiller("Symptoms and Problems", 3)}
- {renderEcrDocumentFiller("Treatment Details", 4)}
- {renderEcrDocumentFiller("Immunizations", 1)}
- {renderEcrDocumentFiller("Diagnostic and Vital Signs", 2)}
+
+
+
+
),
headingLevel: "h3",
@@ -206,7 +198,7 @@ const AccordionLoadingSkeleton = () => {
{
title: "Lab Info",
expanded: true,
- content: <>{renderEcrDocumentFiller("Lab Results from", 4)},
+ content:
,
headingLevel: "h3",
},
{
@@ -214,9 +206,9 @@ const AccordionLoadingSkeleton = () => {
expanded: true,
content: (
<>
- {renderEcrDocumentFiller("RR Details", 1)}
- {renderEcrDocumentFiller("eICR Details", 5)}
- {renderEcrDocumentFiller("eICR Custodian Details", 4)}
+
+
+
),
headingLevel: "h3",
@@ -246,10 +238,8 @@ export const EcrLoadingSkeleton = () => {
return (
- {_isNonIntegratedViewer ? (
+ {_isNonIntegratedViewer && (
- ) : (
- ""
)}
diff --git a/containers/ecr-viewer/src/app/view-data/components/SocialHistory.tsx b/containers/ecr-viewer/src/app/view-data/components/SocialHistory.tsx
index edff0c7430..260235aaee 100644
--- a/containers/ecr-viewer/src/app/view-data/components/SocialHistory.tsx
+++ b/containers/ecr-viewer/src/app/view-data/components/SocialHistory.tsx
@@ -1,8 +1,4 @@
-import {
- AccordionSection,
- AccordionH4,
- AccordionDiv,
-} from "../component-utils";
+import { AccordionSection, AccordionSubSection } from "../component-utils";
import React from "react";
import {
DataDisplay,
@@ -23,8 +19,7 @@ interface SocialHistoryProps {
const SocialHistory: React.FC
= ({ socialData }) => {
return (
- Social History
-
+
{socialData.map((item, index) => {
if (item.table) {
return ;
@@ -32,7 +27,7 @@ const SocialHistory: React.FC = ({ socialData }) => {
return ;
}
})}
-
+
);
};
diff --git a/containers/ecr-viewer/src/styles/custom-styles.scss b/containers/ecr-viewer/src/styles/custom-styles.scss
index 3e9e2b4ba1..8453b416d3 100644
--- a/containers/ecr-viewer/src/styles/custom-styles.scss
+++ b/containers/ecr-viewer/src/styles/custom-styles.scss
@@ -39,12 +39,6 @@ $main-min-width: $ecr-viewer-container-min-width + $ecr-viewer-gap + $nav-wrappe
width: auto;
}
-.section__line {
- border-top: 1px solid #99DEEA;
- margin-top: .5rem;
- margin-bottom: .5rem;
-}
-
.vertical-line {
border-left: 1px solid #005EA2;
margin-left: .5rem;
@@ -57,6 +51,12 @@ $main-min-width: $ecr-viewer-container-min-width + $ecr-viewer-gap + $nav-wrappe
margin-bottom: .5rem;
}
+.section__line_blue {
+ border-top: 1px solid #99DEEA;
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+}
+
.card__line {
border-top: 8px solid #EDEFF0;
}
@@ -648,4 +648,4 @@ h3 {
.height-ecrLibrary {
height: calc(100% - 2.45rem - 1.5rem)
-}
\ No newline at end of file
+}