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

Update tooltips per spec #2998

Merged
merged 9 commits into from
Dec 9, 2024
Merged

Update tooltips per spec #2998

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9760f74
refactor: tooltip content -> children
mcmcgrath13 Dec 6, 2024
420105f
feat: add tooltip to accordion sub section
mcmcgrath13 Dec 6, 2024
706622f
fix: dynamic min width so tooltip always displays
mcmcgrath13 Dec 6, 2024
0df72ae
feat: add new tooltips
mcmcgrath13 Dec 6, 2024
fe3a740
test: update tests
mcmcgrath13 Dec 6, 2024
20bde60
fix: add back warning
mcmcgrath13 Dec 6, 2024
6cc954a
test: get dynamic tooltip IDs working with snapshots
mcmcgrath13 Dec 6, 2024
39a3620
Merge branch 'main' into mcm/tooltip-updates
mcmcgrath13 Dec 9, 2024
d082137
fix: botched merge
mcmcgrath13 Dec 9, 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
1 change: 0 additions & 1 deletion containers/ecr-viewer/src/app/services/ecrMetadataService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,6 @@ export const evaluateEcrMetadata = (
},
{
title: "EHR Software Name",
toolTip: "EHR system used by the sending provider.",
value: evaluate(fhirBundle, mappings.ehrSoftware)[0],
},
];
Expand Down
6 changes: 3 additions & 3 deletions containers/ecr-viewer/src/app/services/formatService.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,9 +580,9 @@ export const addCaptionToTable = (
if (React.isValidElement(element) && element.type === "table") {
return React.cloneElement(element, {}, [
<caption key="caption">
<div className="data-title">
<ToolTipElement content={caption} toolTip={toolTip} />
</div>
<ToolTipElement toolTip={toolTip}>
<div className="data-title">{caption}</div>
</ToolTipElement>
</caption>,
...React.Children.toArray(element.props.children),
]);
Expand Down
8 changes: 8 additions & 0 deletions containers/ecr-viewer/src/app/tests/components/Encounter.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import { render } from "@testing-library/react";
import { axe } from "jest-axe";
import EncounterDetails from "../../view-data/components/Encounter";
import React from "react";

describe("Encounter", () => {
let container: HTMLElement;
beforeAll(() => {
const mockChildMethod = jest.fn();
// This gets the dynamic tooltip IDs to show up as stable "[object Object]"
jest.spyOn(React, "useRef").mockReturnValue({
current: {
childMethod: mockChildMethod,
},
});
const encounterData = [
{
title: "Encounter Type",
Expand Down
46 changes: 23 additions & 23 deletions containers/ecr-viewer/src/app/tests/components/__snapshots__/AccordionContent.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -956,7 +956,28 @@ exports[`Snapshot test for Accordion Content Given no data, info message for emp
<div
class="data-title padding-right-1"
>
Miscellaneous Notes
<span
class="usa-tooltip"
data-testid="tooltipWrapper"
>
<div
class="usa-tooltip__trigger usa-tooltip"
data-testid="triggerElement"
tabindex="0"
title=""
>
Miscellaneous Notes
</div>
<span
aria-hidden="true"
class="usa-tooltip__body"
data-testid="tooltipBody"
role="tooltip"
title="Clinical notes from various parts of a medical record. Type of note found here depends on how the provider's EHR system onboarded to send eCR."
>
Clinical notes from various parts of a medical record. Type of note found here depends on how the provider's EHR system onboarded to send eCR.
</span>
</span>
</div>
<div
class="grid-col maxw7 text-pre-line p-list text-italic text-base"
Expand Down Expand Up @@ -1435,28 +1456,7 @@ exports[`Snapshot test for Accordion Content Given no data, info message for emp
<div
class="data-title padding-right-1"
>
<span
class="usa-tooltip"
data-testid="tooltipWrapper"
>
<div
class="usa-tooltip__trigger usa-tooltip short-tooltip"
data-testid="triggerElement"
tabindex="0"
title=""
>
EHR Software Name
</div>
<span
aria-hidden="true"
class="usa-tooltip__body"
data-testid="tooltipBody"
role="tooltip"
title="EHR system used by the sending provider."
>
EHR system used by the sending provider.
</span>
</span>
EHR Software Name
</div>
<div
class="grid-col maxw7 text-pre-line p-list text-italic text-base"
Expand Down
42 changes: 21 additions & 21 deletions containers/ecr-viewer/src/app/tests/components/__snapshots__/Clinical.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,34 +82,34 @@ exports[`Snapshot test for Clinical Notes should match snapshot for table notes
>
<table>
<caption>
<div
class="data-title"
<span
class="usa-tooltip"
data-testid="tooltipWrapper"
>
<span
class="usa-tooltip"
data-testid="tooltipWrapper"
<div
aria-describedby="[object Object]"
class="usa-tooltip__trigger usa-tooltip"
data-testid="triggerElement"
tabindex="0"
title=""
>
<div
aria-describedby="[object Object]"
class="usa-tooltip__trigger usa-tooltip"
data-testid="triggerElement"
tabindex="0"
title=""
class="data-title"
>
Miscellaneous Notes
</div>
<span
aria-hidden="true"
class="usa-tooltip__body"
data-testid="tooltipBody"
id="[object Object]"
role="tooltip"
title="Clinical notes from various parts of a medical record. Type of note found here depends on how the provider's EHR system onboarded to send eCR."
>
Clinical notes from various parts of a medical record. Type of note found here depends on how the provider's EHR system onboarded to send eCR.
</span>
</div>
<span
aria-hidden="true"
class="usa-tooltip__body"
data-testid="tooltipBody"
id="[object Object]"
role="tooltip"
title="Clinical notes from various parts of a medical record. Type of note found here depends on how the provider's EHR system onboarded to send eCR."
>
Clinical notes from various parts of a medical record. Type of note found here depends on how the provider's EHR system onboarded to send eCR.
</span>
</div>
</span>
</caption>
<thead>
<tr>
Expand Down
58 changes: 52 additions & 6 deletions containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrMetadata.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,30 @@ exports[`ECR Metadata should match snapshot 1`] = `
data-testid="table"
>
<caption>
eRSD Warnings
<span
class="usa-tooltip"
data-testid="tooltipWrapper"
>
<div
aria-describedby="[object Object]"
class="usa-tooltip__trigger usa-tooltip"
data-testid="triggerElement"
tabindex="0"
title=""
>
eRSD Warnings
</div>
<span
aria-hidden="true"
class="usa-tooltip__body"
data-testid="tooltipBody"
id="[object Object]"
role="tooltip"
title="Can be used to help you identify healthcare providers that need to update their eRSD (Electronic Reporting and Surveillance Distribution) version."
>
Can be used to help you identify healthcare providers that need to update their eRSD (Electronic Reporting and Surveillance Distribution) version.
</span>
</span>
</caption>
<thead>
<tr>
Expand Down Expand Up @@ -459,12 +482,35 @@ Palmdale, CA
<div
class="gutter-3"
>
<h4
class="usa-summary-box__heading padding-y-105"
id="eicr-custodian-details"
<span
class="usa-tooltip"
data-testid="tooltipWrapper"
>
eICR Custodian Details
</h4>
<div
aria-describedby="[object Object]"
class="usa-tooltip__trigger usa-tooltip short-tooltip"
data-testid="triggerElement"
tabindex="0"
title=""
>
<h4
class="usa-summary-box__heading padding-y-105"
id="eicr-custodian-details"
>
eICR Custodian Details
</h4>
</div>
<span
aria-hidden="true"
class="usa-tooltip__body"
data-testid="tooltipBody"
id="[object Object]"
role="tooltip"
title="Person or organization that generated the eICR Document."
>
Person or organization that generated the eICR Document.
</span>
</span>
<div
class="usa-summary-box__text"
>
Expand Down
66 changes: 56 additions & 10 deletions containers/ecr-viewer/src/app/tests/components/__snapshots__/Encounter.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,35 @@ exports[`Encounter should match snapshot 1`] = `
<div
class="gutter-3"
>
<h4
class="usa-summary-box__heading padding-y-105"
id="facility-details"
<span
class="usa-tooltip"
data-testid="tooltipWrapper"
>
Facility Details
</h4>
<div
aria-describedby="[object Object]"
class="usa-tooltip__trigger usa-tooltip short-tooltip"
data-testid="triggerElement"
tabindex="0"
title=""
>
<h4
class="usa-summary-box__heading padding-y-105"
id="facility-details"
>
Facility Details
</h4>
</div>
<span
aria-hidden="true"
class="usa-tooltip__body"
data-testid="tooltipBody"
id="[object Object]"
role="tooltip"
title="Specific healthcare facility where the encounter took place."
>
Specific healthcare facility where the encounter took place.
</span>
</span>
<div
class="usa-summary-box__text"
>
Expand Down Expand Up @@ -177,12 +200,35 @@ North Canton, MA 02740
<div
class="gutter-3"
>
<h4
class="usa-summary-box__heading padding-y-105"
id="provider-details"
<span
class="usa-tooltip"
data-testid="tooltipWrapper"
>
Provider Details
</h4>
<div
aria-describedby="[object Object]"
class="usa-tooltip__trigger usa-tooltip short-tooltip"
data-testid="triggerElement"
tabindex="0"
title=""
>
<h4
class="usa-summary-box__heading padding-y-105"
id="provider-details"
>
Provider Details
</h4>
</div>
<span
aria-hidden="true"
class="usa-tooltip__body"
data-testid="tooltipBody"
id="[object Object]"
role="tooltip"
title="Person or organization that provided care during the encounter."
>
Person or organization that provided care during the encounter.
</span>
</span>
<div
class="usa-summary-box__text"
>
Expand Down
1 change: 0 additions & 1 deletion containers/ecr-viewer/src/app/tests/services/ecrMetadataService.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ describe("Evaluate Ecr Metadata", () => {
{ title: "EHR Manufacturer Model Name", value: "Epic - Version 10.1" },
{
title: "EHR Software Name",
toolTip: "EHR system used by the sending provider.",
value: "Epic - Version 10.1",
},
]);
Expand Down
4 changes: 2 additions & 2 deletions containers/ecr-viewer/src/app/tests/utils.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,15 +559,15 @@ describe("Utils", () => {
expect(tip.textContent).toInclude("Test child");
});
it("should make a tooltip", () => {
render(<ToolTipElement content={"Item Title"} toolTip={"Tooltip"} />);
render(<ToolTipElement toolTip={"Tooltip"}>Item Title</ToolTipElement>);
const tip = screen.getByTestId("triggerElement");
expect(tip.className).toInclude("short-tooltip");
expect(tip.textContent).toInclude("Item Title");
});
it("should not make the tool tip short if the tip has more than 100 character", () => {
const toolTip =
"1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890";
render(<ToolTipElement content={"Item Title"} toolTip={toolTip} />);
render(<ToolTipElement toolTip={toolTip}>Item Title</ToolTipElement>);
const tip = screen.getByTestId("triggerElement");
expect(tip.className).not.toInclude("short-tooltip");
});
Expand Down
8 changes: 7 additions & 1 deletion containers/ecr-viewer/src/app/view-data/component-utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { ReactNode } from "react";
import classNames from "classnames";
import { toKebabCase } from "../services/formatService";
import { ToolTipElement } from "./components/ToolTipElement";

type AccordionSectionProps = {
children: ReactNode;
Expand Down Expand Up @@ -34,6 +35,7 @@ interface AccordionSubSectionProps {
title: string;
className?: string;
idPrefix?: string;
toolTip?: string;
children: React.ReactNode;
}

Expand All @@ -43,18 +45,22 @@ interface AccordionSubSectionProps {
* @param props.children - The children elements.
* @param [props.className] - Additional CSS classes for customization.
* @param [props.idPrefix] - Optional prefix for the ID.
* @param [props.toolTip] - Optional content for a tooltip.
* @param [props.title] - The title of the subsection.
* @returns React element representing the AccordionSubSection component.
*/
export const AccordionSubSection = ({
title,
className,
idPrefix = "",
toolTip,
children,
}: AccordionSubSectionProps) => {
return (
<div className="gutter-3">
<AccordionH4 id={idPrefix + toKebabCase(title)}>{title}</AccordionH4>
<ToolTipElement toolTip={toolTip}>
<AccordionH4 id={idPrefix + toKebabCase(title)}>{title}</AccordionH4>
</ToolTipElement>
<AccordionDiv className={className}>{children}</AccordionDiv>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const DataDisplay: React.FC<{
<div>
<div className="grid-row">
<div className="data-title padding-right-1">
<ToolTipElement content={item.title} toolTip={item.toolTip} />
<ToolTipElement toolTip={item.toolTip}>{item.title}</ToolTipElement>
</div>
<div
className={classNames(
Expand Down
Loading
Loading