Skip to content

Commit

Permalink
Update tooltips per spec (#2998)
Browse files Browse the repository at this point in the history 
* refactor: tooltip content -> children

* feat: add tooltip to accordion sub section

* fix: dynamic min width so tooltip always displays

* feat: add new tooltips

* test: update tests

* fix: add back warning

* test: get dynamic tooltip IDs working with snapshots

* fix: botched merge
  • Loading branch information
@mcmcgrath13
mcmcgrath13 authored Dec 9, 2024
1 parent 4773df9 commit 8f929f8
Show file tree
Hide file tree
Showing 16 changed files with 213 additions and 87 deletions.
1 change: 0 additions & 1 deletion containers/ecr-viewer/src/app/services/ecrMetadataService.ts
View file
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
Original file line number Diff line number Diff line change
Expand Up @@ -599,9 +599,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
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
Original file line number Diff line number Diff line change
Expand Up @@ -975,7 +975,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 @@ -1454,28 +1475,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
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,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 @@ -212,12 +235,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
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
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
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
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

0 comments on commit 8f929f8

Please sign in to comment.