Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add sub text to eCR Summary & Document headers #2341

Merged
merged 5 commits into from
Aug 8, 2024
Merged

Add sub text to eCR Summary & Document headers #2341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2a7b4b2
add sub-header text
angelathe Aug 7, 2024
930219e
add sub-header text to Loading component
angelathe Aug 7, 2024
6891a5c
update snapshot test
angelathe Aug 7, 2024
a90d845
add top padding to sidenav
angelathe Aug 8, 2024
2a66fc2
update utility class name
angelathe Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 32 additions & 7 deletions containers/ecr-viewer/src/app/tests/components/__snapshots__/LoadingComponent.test.tsx.snap
View file
Open in desktop
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"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fyi, I couldn't use gaps because it gets overruled by the display: block rule

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
2 changes: 1 addition & 1 deletion containers/ecr-viewer/src/app/tests/components/__snapshots__/SideNav.test.tsx.snap
View file
Open in desktop
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
18 changes: 14 additions & 4 deletions containers/ecr-viewer/src/app/view-data/components/LoadingComponent.tsx
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion containers/ecr-viewer/src/app/view-data/components/SideNav.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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;
}
Loading