Skip to content

Commit

Permalink
Add sub text to eCR Summary & Document headers (#2341)
Browse files Browse the repository at this point in the history
* add sub-header text

* add sub-header text to Loading component

* update snapshot test

* add top padding to sidenav

* update utility class name
  • Loading branch information
angelathe authored Aug 8, 2024
1 parent df03e59 commit 75a876e
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`Snapshot test for EcrLoadingSkeleton should match snapshot 1`] = `
class="sticky-nav"
>
<div
class="nav-wrapper"
class="nav-wrapper padding-top-1-25"
>
<nav
class="sticky-nav top-550"
Expand All @@ -25,6 +25,16 @@ exports[`Snapshot test for EcrLoadingSkeleton should match snapshot 1`] = `
class="usa-sidenav"
data-testid="sidenav"
>
<li
class="usa-sidenav__item"
>
<a
class=""
href="#ecr-summary"
>
eCR Summary
</a>
</li>
<li
class="usa-sidenav__item"
>
Expand Down Expand Up @@ -280,12 +290,22 @@ exports[`Snapshot test for EcrLoadingSkeleton should match snapshot 1`] = `
<div
class="ecr-content"
>
<h2
class="margin-bottom-3 side-nav-ignore"
id="ecr-summary"
<div
class="margin-bottom-3"
>
eCR Summary
</h2>
<h2
class="margin-bottom-05"
data-sectionid="ecr-summary"
id="ecr-summary"
>
eCR Summary
</h2>
<div
class="text-base-darker line-height-sans-5"
>
Provides key info upfront to help you understand the eCR at a glance
</div>
</div>
<div
class="info-container"
>
Expand Down Expand Up @@ -594,7 +614,7 @@ exports[`Snapshot test for EcrLoadingSkeleton should match snapshot 1`] = `
data-testid="gridContainer"
>
<div
class="grid-row"
class="grid-row margin-bottom-05"
data-testid="grid"
>
<div
Expand Down Expand Up @@ -634,6 +654,11 @@ exports[`Snapshot test for EcrLoadingSkeleton should match snapshot 1`] = `
</button>
</div>
</div>
<div
class="text-base-darker line-height-sans-5"
>
Displays entire eICR and RR documents to help you dig further into eCR data
</div>
</div>
<div
class="usa-accordion info-container"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`SectionConfig should match the snapshot 1`] = `
<DocumentFragment>
<div
class="nav-wrapper"
class="nav-wrapper padding-top-1-25"
>
<nav
class="sticky-nav top-550"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -170,13 +170,19 @@ export const EcrLoadingSkeleton = () => {
</div>
<div className={"ecr-viewer-container"}>
<div className="ecr-content">
<h2 className="margin-bottom-3 side-nav-ignore" id="ecr-summary">
eCR Summary
</h2>
<div className="margin-bottom-3">
<h2 className="margin-bottom-05" id="ecr-summary">
eCR Summary
</h2>
<div className="text-base-darker line-height-sans-5">
Provides key info upfront to help you understand the eCR at a
glance
</div>
</div>
<EcrSummaryLoadingSkeleton />
<div className="margin-top-10">
<GridContainer className={"padding-0 margin-bottom-3"}>
<Grid row>
<Grid row className="margin-bottom-05">
<Grid>
<h2 className="margin-bottom-0" id="ecr-document">
eCR Document
Expand All @@ -194,6 +200,10 @@ export const EcrLoadingSkeleton = () => {
/>
</Grid>
</Grid>
<div className="text-base-darker line-height-sans-5">
Displays entire eICR and RR documents to help you dig
further into eCR data
</div>
</GridContainer>
<AccordionLoadingSkeleton />
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ const SideNav: React.FC = () => {
let sideNavItems = buildSideNav(sectionConfigs);

return (
<div className="nav-wrapper">
<div className="nav-wrapper padding-top-1-25">
<nav
className={classNames("sticky-nav", {
"top-0": !isNonIntegratedViewer,
Expand Down
18 changes: 14 additions & 4 deletions containers/ecr-viewer/src/app/view-data/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,15 @@ const ECRViewerPage: React.FC = () => {
<div className="content-wrapper">
<SideNav />
<div className={"ecr-viewer-container"}>
<h2 className="margin-bottom-3" id="ecr-summary">
eCR Summary
</h2>
<div className="margin-bottom-3">
<h2 className="margin-bottom-05" id="ecr-summary">
eCR Summary
</h2>
<div className="text-base-darker line-height-sans-5">
Provides key info upfront to help you understand the eCR at
a glance
</div>
</div>
<EcrSummary
patientDetails={
evaluateEcrSummaryPatientDetails(fhirBundle, mappings)
Expand All @@ -131,7 +137,7 @@ const ECRViewerPage: React.FC = () => {
<GridContainer
className={"padding-0 margin-bottom-3 maxw-none"}
>
<Grid row>
<Grid row className="margin-bottom-05">
<Grid>
<h2 className="margin-bottom-0" id="ecr-document">
eCR Document
Expand All @@ -151,6 +157,10 @@ const ECRViewerPage: React.FC = () => {
/>
</Grid>
</Grid>
<div className="text-base-darker line-height-sans-5">
Displays entire eICR and RR documents to help you dig
further into eCR data
</div>
</GridContainer>
<AccordionContent
fhirPathMappings={mappings}
Expand Down
3 changes: 3 additions & 0 deletions containers/ecr-viewer/src/styles/utilities.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,6 @@
width: 25%;
}

.padding-top-1-25 {
padding-top: 0.625rem;
}

0 comments on commit 75a876e

Please sign in to comment.