From f8845770e22e40465e6af10457a4681dcf6ba01c Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Tue, 22 Oct 2024 18:05:30 -0400 Subject: [PATCH 01/17] Add PatientSearchHeader to be interchanged with SearchNavigation based on feature flag --- .../src/apps/search/layout/SearchLayout.tsx | 2 ++ .../PatientSearchHeader.tsx | 31 +++++++++++++++++++ .../patient-search-header.module.scss | 21 +++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx create mode 100644 apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss diff --git a/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx b/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx index b9f72c9e34..6b2a9d2a59 100644 --- a/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx +++ b/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx @@ -3,6 +3,7 @@ import { Button } from 'components/button'; import { Loading } from 'components/Spinner'; import { CollapsiblePanel } from 'design-system/collapsible-panel'; import { SearchNavigation } from './navigation/SearchNavigation'; +import { PatientSearchHeader } from './patientSearchHeader/PatientSearchHeader'; import { useSearchInteraction, useSearchResultDisplay } from 'apps/search'; import { SearchLanding } from './landing'; import { SearchResults } from './result'; @@ -58,6 +59,7 @@ const SearchLayout = ({ return (
+
ReactNode; + +type Props = { + className?: string; + actions?: ActionsRenderer; +}; + +const PatientSearchHeader = ({ className, actions }: Props) => { + return ( + + ); +}; + +export { PatientSearchHeader }; diff --git a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss new file mode 100644 index 0000000000..44bf90763b --- /dev/null +++ b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss @@ -0,0 +1,21 @@ +.navigation { + display: flex; + gap: 1rem; + flex-shrink: 0; + z-index: 100; + + h1 { + margin: 0; + } + + .linkContainer { + display: flex; + align-items: center; + gap: 6px; + min-height: 2.75rem; + } + + .links { + flex-grow: 1; + } +} From 32e9c2d54e3fcd305d1388c51f15c259bceb831c Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Tue, 22 Oct 2024 21:26:48 -0400 Subject: [PATCH 02/17] add events, investigations, and lab reports to the configuration and default configuration files --- apps/modernization-ui/src/configuration/configuration.ts | 3 +++ apps/modernization-ui/src/configuration/defaults.ts | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/apps/modernization-ui/src/configuration/configuration.ts b/apps/modernization-ui/src/configuration/configuration.ts index ff38309d1b..04982fe7c8 100644 --- a/apps/modernization-ui/src/configuration/configuration.ts +++ b/apps/modernization-ui/src/configuration/configuration.ts @@ -19,6 +19,9 @@ type SearchView = Toggle & { }; type Search = { + events: Toggle; + investigations: Toggle; + laboratoryReports: Toggle; view: SearchView; }; diff --git a/apps/modernization-ui/src/configuration/defaults.ts b/apps/modernization-ui/src/configuration/defaults.ts index 5643830995..70a26f8eb1 100644 --- a/apps/modernization-ui/src/configuration/defaults.ts +++ b/apps/modernization-ui/src/configuration/defaults.ts @@ -1,6 +1,15 @@ import { Features, Properties, Configuration, Settings, Search } from './configuration'; const search: Search = { + events: { + enabled: true + }, + investigations: { + enabled: true + }, + laboratoryReports: { + enabled: true + }, view: { table: { enabled: false From 5b6463917070c2941c6bfb5d8a42f0e0434252c1 Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Tue, 22 Oct 2024 21:30:44 -0400 Subject: [PATCH 03/17] when features.search.events.enabled is true, patient search 7 beta is shown --- .../src/apps/search/layout/SearchLayout.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx b/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx index 6b2a9d2a59..2b98392b66 100644 --- a/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx +++ b/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx @@ -9,6 +9,7 @@ import { SearchLanding } from './landing'; import { SearchResults } from './result'; import { NoResults } from './result/none'; import { NoInput } from './result/NoInput'; +import { FeatureToggle } from 'feature'; import styles from './search-layout.module.scss'; @@ -59,8 +60,12 @@ const SearchLayout = ({ return (
- - + features.search.events.enabled} + fallback={}> + + +
Date: Tue, 22 Oct 2024 21:44:38 -0400 Subject: [PATCH 04/17] make feature object properties optional since we have a fallback --- apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx b/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx index 2b98392b66..f190c5c379 100644 --- a/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx +++ b/apps/modernization-ui/src/apps/search/layout/SearchLayout.tsx @@ -61,7 +61,7 @@ const SearchLayout = ({ return (
features.search.events.enabled} + guard={(features) => features?.search?.events?.enabled} fallback={}> From aa40cb23c3e0316e97b2414038d4c501fd83f2c7 Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Wed, 23 Oct 2024 10:12:48 -0400 Subject: [PATCH 05/17] create extended tooltip component --- .../PatientSearchHeader.tsx | 5 +++- .../patient-search-header.module.scss | 1 - .../extendedTooltip/ExtendedTooltip.tsx | 27 +++++++++++++++++++ .../extended-tooltip.module.scss | 27 +++++++++++++++++++ 4 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx create mode 100644 apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss diff --git a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx index c17a017b8a..682253cbe4 100644 --- a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx +++ b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import styles from './patient-search-header.module.scss'; import { Link } from '@trussworks/react-uswds'; import { Icon } from 'design-system/icon'; +import ExtendedTooltip from 'design-system/extendedTooltip/ExtendedTooltip'; type ActionsRenderer = () => ReactNode; @@ -19,7 +20,9 @@ const PatientSearchHeader = ({ className, actions }: Props) => {
Go to classic search - + + +
diff --git a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss index 44bf90763b..f647c9605d 100644 --- a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss +++ b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss @@ -11,7 +11,6 @@ .linkContainer { display: flex; align-items: center; - gap: 6px; min-height: 2.75rem; } diff --git a/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx b/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx new file mode 100644 index 0000000000..ff3fbdc801 --- /dev/null +++ b/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx @@ -0,0 +1,27 @@ +import { Tooltip } from '@trussworks/react-uswds'; +import { ReactNode } from 'react'; +import styles from './extended-tooltip.module.scss'; + +type Props = { label?: string; children: ReactNode }; + +const ExtendedTooltip = ({ children }: Props) => { + return ( +
+ +

+ We are modernizing search +
+ To perform an event search or save a new custom queue, continue using classic search. +

+
+ }> + {children} + +
+ ); +}; + +export default ExtendedTooltip; diff --git a/apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss b/apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss new file mode 100644 index 0000000000..c2754b22d4 --- /dev/null +++ b/apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss @@ -0,0 +1,27 @@ +.tooltipContainer { + span { + left: 0% + } + button { + background-color: transparent; + &:hover { + background-color: transparent; + } + } + span { + background-color: transparent; + } +} + +.label { + margin: 0; + padding: 1rem; + text-wrap: wrap; + background-color: white; + color: black; + outline-color: #E6E7E8; + outline-width: 2px; + outline-style: solid; + filter: drop-shadow(0px 2px 4px #b8b8b8); + width: 300px; +} \ No newline at end of file From 619a3f05341c4d2841d5e4bf73137ef77dd6f1bd Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Wed, 23 Oct 2024 10:20:16 -0400 Subject: [PATCH 06/17] make the extended tooltip a more generic component --- .../patientSearchHeader/PatientSearchHeader.tsx | 5 ++++- .../extendedTooltip/ExtendedTooltip.tsx | 17 +++++++++++------ .../extended-tooltip.module.scss | 2 +- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx index 682253cbe4..0ac07c4a3d 100644 --- a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx +++ b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx @@ -20,7 +20,10 @@ const PatientSearchHeader = ({ className, actions }: Props) => {
Go to classic search - +
diff --git a/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx b/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx index ff3fbdc801..cd262fa546 100644 --- a/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx +++ b/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx @@ -2,23 +2,28 @@ import { Tooltip } from '@trussworks/react-uswds'; import { ReactNode } from 'react'; import styles from './extended-tooltip.module.scss'; -type Props = { label?: string; children: ReactNode }; +type Props = { + labelTitle: string; + labelText: string; + position?: 'bottom' | 'top' | 'left' | 'right' | undefined; + children: ReactNode; +}; -const ExtendedTooltip = ({ children }: Props) => { +const ExtendedTooltip = ({ labelTitle, labelText, position, children }: Props) => { return (

- We are modernizing search + {labelTitle}
- To perform an event search or save a new custom queue, continue using classic search. + {labelText}

}> - {children} + {children}
); diff --git a/apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss b/apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss index c2754b22d4..9b8775bd9f 100644 --- a/apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss +++ b/apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss @@ -22,6 +22,6 @@ outline-color: #E6E7E8; outline-width: 2px; outline-style: solid; - filter: drop-shadow(0px 2px 4px #b8b8b8); + filter: drop-shadow(0px 4px 6px #b8b8b8); width: 300px; } \ No newline at end of file From ae03daa1fafc7873f79a043b43794114d6ceab3b Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Wed, 23 Oct 2024 10:25:39 -0400 Subject: [PATCH 07/17] add a basic test for the extended tooltip component. TODO add more behavior tests here. --- .../extendedTooltip/ExtendedTooltip.spec.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.spec.tsx diff --git a/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.spec.tsx b/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.spec.tsx new file mode 100644 index 0000000000..1617c0241b --- /dev/null +++ b/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.spec.tsx @@ -0,0 +1,15 @@ +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; +import ExtendedTooltip from './ExtendedTooltip'; + +describe('when an extended tooltip is displayed', () => { + it('should render with no accessibility violations', async () => { + const { container } = render( + + Contents + + ); + + expect(await axe(container)).toHaveNoViolations(); + }); +}); From e4f35f9e655b19efb53efa532d694472714462c8 Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Wed, 23 Oct 2024 13:23:50 -0400 Subject: [PATCH 08/17] rename enclosing folders and files from ExtendedTooltip to RichTooltip --- .../ExtendedTooltip.spec.tsx => richTooltip/RichTooltip.spec.tsx} | 0 .../ExtendedTooltip.tsx => richTooltip/RichTooltip.tsx} | 0 .../rich-tooltip.module.scss} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename apps/modernization-ui/src/design-system/{extendedTooltip/ExtendedTooltip.spec.tsx => richTooltip/RichTooltip.spec.tsx} (100%) rename apps/modernization-ui/src/design-system/{extendedTooltip/ExtendedTooltip.tsx => richTooltip/RichTooltip.tsx} (100%) rename apps/modernization-ui/src/design-system/{extendedTooltip/extended-tooltip.module.scss => richTooltip/rich-tooltip.module.scss} (100%) diff --git a/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.spec.tsx b/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx similarity index 100% rename from apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.spec.tsx rename to apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx diff --git a/apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx b/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.tsx similarity index 100% rename from apps/modernization-ui/src/design-system/extendedTooltip/ExtendedTooltip.tsx rename to apps/modernization-ui/src/design-system/richTooltip/RichTooltip.tsx diff --git a/apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss b/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss similarity index 100% rename from apps/modernization-ui/src/design-system/extendedTooltip/extended-tooltip.module.scss rename to apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss From b5b3f2f7d432a89baec92e0e05b73d63cab85625 Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Wed, 23 Oct 2024 13:27:08 -0400 Subject: [PATCH 09/17] update file contents to reflect name change from extended tooltip to rich tooltip --- .../layout/patientSearchHeader/PatientSearchHeader.tsx | 6 +++--- .../src/design-system/richTooltip/RichTooltip.spec.tsx | 8 ++++---- .../src/design-system/richTooltip/RichTooltip.tsx | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx index 0ac07c4a3d..fbf78705e4 100644 --- a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx +++ b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import styles from './patient-search-header.module.scss'; import { Link } from '@trussworks/react-uswds'; import { Icon } from 'design-system/icon'; -import ExtendedTooltip from 'design-system/extendedTooltip/ExtendedTooltip'; +import RichTooltip from 'design-system/richTooltip/RichTooltip'; type ActionsRenderer = () => ReactNode; @@ -20,12 +20,12 @@ const PatientSearchHeader = ({ className, actions }: Props) => {
Go to classic search - - +
diff --git a/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx b/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx index 1617c0241b..0a895d7720 100644 --- a/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx +++ b/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx @@ -1,13 +1,13 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; -import ExtendedTooltip from './ExtendedTooltip'; +import RichTooltip from './RichTooltip'; -describe('when an extended tooltip is displayed', () => { +describe('when a rich tooltip is displayed', () => { it('should render with no accessibility violations', async () => { const { container } = render( - + Contents - + ); expect(await axe(container)).toHaveNoViolations(); diff --git a/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.tsx b/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.tsx index cd262fa546..a5e23909ba 100644 --- a/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.tsx +++ b/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.tsx @@ -1,6 +1,6 @@ import { Tooltip } from '@trussworks/react-uswds'; import { ReactNode } from 'react'; -import styles from './extended-tooltip.module.scss'; +import styles from './rich-tooltip.module.scss'; type Props = { labelTitle: string; @@ -9,7 +9,7 @@ type Props = { children: ReactNode; }; -const ExtendedTooltip = ({ labelTitle, labelText, position, children }: Props) => { +const RichTooltip = ({ labelTitle, labelText, position, children }: Props) => { return (
Date: Wed, 23 Oct 2024 13:48:41 -0400 Subject: [PATCH 10/17] fix typo in styling --- .../src/design-system/richTooltip/rich-tooltip.module.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss b/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss index 9b8775bd9f..6e4b74b8fa 100644 --- a/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss +++ b/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss @@ -1,7 +1,4 @@ .tooltipContainer { - span { - left: 0% - } button { background-color: transparent; &:hover { From ee09efba11dd43c4eed2012b2f79adcfa8f2c11c Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Wed, 23 Oct 2024 15:35:39 -0400 Subject: [PATCH 11/17] refine styling a bit --- .../richTooltip/rich-tooltip.module.scss | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss b/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss index 6e4b74b8fa..430107c299 100644 --- a/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss +++ b/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss @@ -1,24 +1,33 @@ .tooltipContainer { button { background-color: transparent; + + &:hover { background-color: transparent; } + &:focus { + outline-color: transparent; + } } + span { background-color: transparent; } } + .label { - margin: 0; - padding: 1rem; + padding-right: 1rem; + padding-left: 1rem; + padding-top: 0.2rem; + padding-bottom: 0.2rem; text-wrap: wrap; background-color: white; color: black; outline-color: #E6E7E8; outline-width: 2px; outline-style: solid; - filter: drop-shadow(0px 4px 6px #b8b8b8); + filter: drop-shadow(0px 2px 4px #9f9f9f); width: 300px; } \ No newline at end of file From 40579e10e5127fb89c22e048f47187862647db6f Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Thu, 24 Oct 2024 10:56:50 -0400 Subject: [PATCH 12/17] change patient search header styling and also rich tooltip styling --- .../patient-search-header.module.scss | 8 ++++ .../richTooltip/rich-tooltip.module.scss | 45 ++++++------------- 2 files changed, 21 insertions(+), 32 deletions(-) diff --git a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss index f647c9605d..3234812e40 100644 --- a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss +++ b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/patient-search-header.module.scss @@ -18,3 +18,11 @@ flex-grow: 1; } } + +.infoIconContainer { + display: flex; + justify-content: center; + align-items: center; + height: 24px; + width: 24px; +} \ No newline at end of file diff --git a/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss b/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss index 430107c299..0cd669d141 100644 --- a/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss +++ b/apps/modernization-ui/src/design-system/richTooltip/rich-tooltip.module.scss @@ -1,33 +1,14 @@ -.tooltipContainer { - button { - background-color: transparent; - - - &:hover { - background-color: transparent; - } - &:focus { - outline-color: transparent; - } - } - - span { - background-color: transparent; - } -} - - -.label { - padding-right: 1rem; - padding-left: 1rem; - padding-top: 0.2rem; - padding-bottom: 0.2rem; - text-wrap: wrap; - background-color: white; - color: black; - outline-color: #E6E7E8; - outline-width: 2px; - outline-style: solid; - filter: drop-shadow(0px 2px 4px #9f9f9f); - width: 300px; +.tooltipcontainer { + position: absolute; + margin: 0; + padding: 16px; + font-size: 14px; + line-height: 20px; + background-color: white; + color: black; + outline-color: #E6E7E8; + outline-width: 1px; + outline-style: solid; + filter: drop-shadow(0px 4px 2px #9f9f9f); + width: 300px; } \ No newline at end of file From 3597145d8d2a16ed6c4eb6bc15bf30c684953bf9 Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Thu, 24 Oct 2024 11:12:49 -0400 Subject: [PATCH 13/17] update test --- .../richTooltip/RichTooltip.spec.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx b/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx index 0a895d7720..e18c376a4d 100644 --- a/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx +++ b/apps/modernization-ui/src/design-system/richTooltip/RichTooltip.spec.tsx @@ -1,15 +1,18 @@ import { render } from '@testing-library/react'; -import { axe } from 'jest-axe'; import RichTooltip from './RichTooltip'; describe('when a rich tooltip is displayed', () => { - it('should render with no accessibility violations', async () => { + it('should render with no errors.', async () => { + const mockRichTooltipAnchorRef: React.RefObject = { + current: document.createElement('div', { is: 'mockRichTooltipAnchorRef' }) + }; const { container } = render( - - Contents - +
+ Contents +
); - expect(await axe(container)).toHaveNoViolations(); + expect(container).toBeTruthy(); + expect(mockRichTooltipAnchorRef.current).toBeTruthy(); }); }); From 93e1e09c4afdf6e66f64ea27f3ad8f056948680c Mon Sep 17 00:00:00 2001 From: benlambert_ignw Date: Thu, 24 Oct 2024 11:30:00 -0400 Subject: [PATCH 14/17] rework the rich tooltip component to allow for much better customizability --- .../PatientSearchHeader.tsx | 19 ++++-- .../design-system/richTooltip/RichTooltip.tsx | 65 ++++++++++++------- .../richTooltip/rich-tooltip.module.scss | 2 +- .../richTooltip/useRichTooltip.ts | 60 +++++++++++++++++ 4 files changed, 116 insertions(+), 30 deletions(-) create mode 100644 apps/modernization-ui/src/design-system/richTooltip/useRichTooltip.ts diff --git a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx index fbf78705e4..387f59e385 100644 --- a/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx +++ b/apps/modernization-ui/src/apps/search/layout/patientSearchHeader/PatientSearchHeader.tsx @@ -1,6 +1,5 @@ -import { ReactNode } from 'react'; +import { ReactNode, useRef } from 'react'; import classNames from 'classnames'; - import styles from './patient-search-header.module.scss'; import { Link } from '@trussworks/react-uswds'; import { Icon } from 'design-system/icon'; @@ -14,18 +13,24 @@ type Props = { }; const PatientSearchHeader = ({ className, actions }: Props) => { + const infoIconRef = useRef(null); + return (