Merge pull request #8698 from cfpb/tccp/ds-tooltips

Switch to design system tootips in tccp

cfgov/tccp/jinja2/tccp/includes/tooltip.html

@@ -1,9 +1,12 @@
-{% macro tooltip(name, heading=none, body=none, icon="help-round", tabindex="0") -%}
+{% set c = namespace(value=0)%}
 
-<span tabindex="{% if tabindex == False %}0{% else %}-1{% endif %}" data-tooltip>
+{% macro tooltip(name, heading=none, body=none, icon="help-round", tabindex="0") -%}
+{% set id = "tooltip" + c.value | string %}
+{% set c.value = c.value + 1 %}
+<span tabindex="{% if tabindex == False %}0{% else %}-1{% endif %}" data-tooltip={{id}}>
     {{ svg_icon(icon) }}
 </span>
-<template>
+<template id={{id}}>
     {% if heading %}<div class="tippy-heading">{{ heading }}</div>{% endif %}
     {% if body %}<div class="tippy-body">{{ body }}</div>{% endif %}
 </template>

cfgov/unprocessed/apps/ask-cfpb/js/Autocomplete.js

@@ -1,8 +1,4 @@
-import {
-  EventObserver,
-  checkDom,
-  setInitFlag,
-} from '@cfpb/cfpb-design-system';
+import { EventObserver, checkDom, setInitFlag } from '@cfpb/cfpb-design-system';
 import throttle from 'lodash.throttle';
 
 // Class constants

cfgov/unprocessed/apps/tccp/css/main.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
-@use 'tooltip' as *;
 
 @include respond-to-min($bp-sm-min) {
   .o-form__group {

cfgov/unprocessed/apps/tccp/js/index.js

@@ -1,6 +1,6 @@
-import tippy from 'tippy.js';
 import { analyticsSendEvent } from '@cfpb/cfpb-analytics';
 import { behaviorAttach } from '@cfpb/cfpb-design-system';
+import { Tooltip } from '@cfpb/cfpb-design-system/tooltips';
 
 import orderingDropdown from './ordering';
 import webStorageProxy from '../../../js/modules/util/web-storage-proxy';
@@ -28,7 +28,7 @@ function init() {
   // Move the card ordering dropdown below the expandable
   orderingDropdown.move();
   // Initialize any tooltips on the page
-  initializeTooltips();
+  tooltips = Tooltip.init();
   // Reinitialize tooltips after an htmx request replaces DOM nodes
   behaviorAttach(document, 'htmx:afterSwap', initializeAndReport);
 }
@@ -38,7 +38,7 @@ function init() {
  * @param {Event} event - htmx event
  */
 function initializeAndReport(event) {
-  initializeTooltips();
+  tooltips = Tooltip.init();
   reportFilter(event);
   // Attach handler for "Enter" on card details link proxy
   behaviorAttach('card-link-proxy', 'keydown', handleCardLinkProxies);
@@ -68,50 +68,6 @@ function reportFilter(event) {
   });
 }
 
-/**
- * Set up Tippy.js tooltips
- * See https://kabbouchi.github.io/tippyjs-v4-docs/html-content/
- */
-function initializeTooltips() {
-  tooltips = tippy('[data-tooltip]', {
-    theme: 'cfpb',
-    maxWidth: 450,
-    content: function (reference) {
-      const template = reference.nextElementSibling;
-      const container = document.createElement('div');
-      const node = document.importNode(template.content, true);
-      container.appendChild(node);
-      return container;
-    },
-    // See https://atomiks.github.io/tippyjs/v6/plugins/
-    plugins: [
-      {
-        name: 'hideOnEsc',
-        defaultValue: true,
-        fn({ hide }) {
-          /**
-           * Hide when the escape key is pressed.
-           * @param {KeyboardEvent} event - Key down event.
-           */
-          function onKeyDown(event) {
-            if (event.key === 'Escape') {
-              hide();
-            }
-          }
-          return {
-            onShow() {
-              document.addEventListener('keydown', onKeyDown);
-            },
-            onHide() {
-              document.removeEventListener('keydown', onKeyDown);
-            },
-          };
-        },
-      },
-    ],
-  });
-}
-
 /**
  * Handle links that shouldn't be followed when
  * specified children elements are targeted
@@ -122,7 +78,8 @@ function handleIgnoreLinkTargets(event) {
   const ignoredTargets = event.currentTarget?.getAttribute(
     'data-ignore-link-targets',
   );
-  const tooltipIsOpen = tooltips.some((tip) => tip.state.isMounted);
+  const tooltipIsOpen = tooltips.some((tip) => tip.tooltip.state.isMounted);
+
   if (event.target.closest(ignoredTargets) || tooltipIsOpen) {
     event.preventDefault();
   }

cfgov/unprocessed/apps/tccp/package.json

@@ -14,7 +14,6 @@
   "license": "SEE LICENSE IN TERMS.md",
   "type": "module",
   "dependencies": {
-    "htmx.org": "1.9.10",
-    "tippy.js": "6.3.7"
+    "htmx.org": "1.9.10"
   }
 }

cfgov/unprocessed/apps/tccp/yarn.lock

@@ -2,19 +2,7 @@
 # yarn lockfile v1
 
 
-"@popperjs/core@^2.9.0":
-  version "2.11.8"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
-  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
-
 [email protected]:
   version "1.9.10"
   resolved "https://registry.yarnpkg.com/htmx.org/-/htmx.org-1.9.10.tgz#63c67e1e7a447086a3119c156f08722c624aacac"
   integrity sha512-UgchasltTCrTuU2DQLom3ohHrBvwr7OqpwyAVJ9VxtNBng4XKkVsqrv0Qr3srqvM9ZNI3f1MmvVQQqK7KW/bTA==
-
-[email protected]:
-  version "6.3.7"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
-  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
-  dependencies:
-    "@popperjs/core" "^2.9.0"

cfgov/unprocessed/css/main.scss

@@ -9,6 +9,7 @@
 // Import required CF components.
 
 @use '@cfpb/cfpb-design-system/src/' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-tooltips/tooltip' as *;
 
 // Enhancements that are on a migration path to being added to CF.
 // CF Core

cfgov/unprocessed/js/organisms/VideoPlayer.js

@@ -2,11 +2,7 @@
    Video Player Class
    ========================================================================== */
 
-import {
-  checkDom,
-  setInitFlag,
-  EventObserver,
-} from '@cfpb/cfpb-design-system';
+import { checkDom, setInitFlag, EventObserver } from '@cfpb/cfpb-design-system';
 import { formatTimestamp } from '../modules/util/strings.js';
 import youTubeAPI from '../modules/youtube-api.js';
 

cfgov/unprocessed/js/routes/data-research/prepaid-accounts/search-agreements/index.js

@@ -1,7 +1,4 @@
-import {
-  Multiselect,
-  SummaryMinimal,
-} from '@cfpb/cfpb-design-system';
+import { Multiselect, SummaryMinimal } from '@cfpb/cfpb-design-system';
 
 Multiselect.init();
 SummaryMinimal.init();

eslint.config.js

@@ -56,6 +56,7 @@ export default [
         {
           ignore: [
             '@cfpb/cfpb-design-system$',
+            '@cfpb/cfpb-design-system/tooltips$',
             '@cfpb/cfpb-design-system/icons/.+.svg$',
           ],
         },

package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@cfpb/browserslist-config": "0.0.3",
     "@cfpb/cfpb-analytics": "0.3.2",
-    "@cfpb/cfpb-design-system": "3.6.2",
+    "@cfpb/cfpb-design-system": "3.6.3",
     "@csstools/postcss-sass": "5.1.1",
     "@csstools/sass-import-resolve": "1.0.0",
     "autoprefixer": "10.4.20",

yarn.lock

@@ -283,10 +283,10 @@
   resolved "https://registry.yarnpkg.com/@cfpb/cfpb-analytics/-/cfpb-analytics-0.3.2.tgz#3d1e8da7c05cd0d312ae86a3b64e88bc3c3fc12b"
   integrity sha512-0rjHPdAi4emgjMmzKSBHwwRhztxyEk3X8Zay0qRK9pATApsHqBjEJmTn5Npd1ponQQ1m5KEPo3g9kPequOQXSg==
 
-"@cfpb/[email protected].2":
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-design-system/-/cfpb-design-system-3.6.2.tgz#81b1dbc0087c14ec06e7f826003c5dd8d63505ef"
-  integrity sha512-hHJa6UJs5pfuDBg/09kgs5d9C4QQxQ5l22SC+U6yGRD1GdiPtnzxUbYPE0v4x2HPc+6uGUaQPYPuVqd4cqQUvw==
+"@cfpb/[email protected].3":
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/@cfpb/cfpb-design-system/-/cfpb-design-system-3.6.3.tgz#421b87d4ea427ae3cdf7296aadba288f8a0e3ccb"
+  integrity sha512-EAY7rGakAd21x4vkWNIM8+Nkl6xobLiIpIZ2DG14T0GrOAy7GMLsYHJhTrVEWS67dCt0KP/2ykSMLtC88S5IDA==
   dependencies:
     tippy.js "6.3.7"