Switch to design-system tooltips 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/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();
+  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();
+  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
@@ -138,9 +94,11 @@ function handleShowMore(event) {
   }
   const results = document.querySelector('.o-filterable-list-results');
   const showMoreFade = document.querySelector('#u-show-more-fade');
-  const nextResult = document.querySelector('[data-js-hook="behavior_faded-card"]');
+  const nextResult = document.querySelector(
+    '[data-js-hook="behavior_faded-card"]',
+  );
   nextResult.setAttribute('tabIndex', '0');
-  nextResult.querySelectorAll('[tabindex="-1"]').forEach( elem => {
+  nextResult.querySelectorAll('[tabindex="-1"]').forEach((elem) => {
     elem.setAttribute('tabIndex', '0');
   });
   results.classList.remove('o-filterable-list-results--partial');

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