@cfpb/cfpb-design-system 3.5.0 → 3.6.0

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "CFPB's UI framework",
-  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./tooltips": "./src/components/cfpb-tooltips/index.js"
+  },
   "author": {
     "name": "Consumer Financial Protection Bureau",
     "email": "tech@cfpb.gov",
@@ -21,5 +24,8 @@
     "url": "https://github.com/cfpb/design-system/issues"
   },
   "gitHead": "d9b9862ef0a34a0ca6f4835347ac7f202ed50e3e",
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "tippy.js": "6.3.7"
+  }
 }

package/src/components/cfpb-tooltips/index.js

@@ -0,0 +1,79 @@
+/* ==========================================================================
+   Tooltip Organism
+   ========================================================================== */
+
+import tippy from 'tippy.js';
+import { instantiateAll } from '@cfpb/cfpb-design-system';
+
+import * as TooltipStyles from './tooltip.scss';
+
+const BASE_ATTRIBUTE = 'data-tooltip';
+
+/**
+ * Tooltip
+ * @class
+ * @classdesc Initializes a new Tooltip.
+ * @param {HTMLElement} element - The DOM element that should
+ *  activate the tooltip.
+ * @returns {Tooltip} An instance.
+ */
+function Tooltip(element) {
+  const tooltipContent = element.getAttribute(BASE_ATTRIBUTE);
+
+  /**
+   * Set up and create the tooltip.
+   * @returns {Tooltip} An instance.
+   */
+  function init() {
+    tippy(element, {
+      theme: 'cfpb',
+      maxWidth: 450,
+      content: function (reference) {
+        const template = reference.parentElement.querySelector(
+          `#${tooltipContent}`,
+        );
+        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.body.addEventListener('keydown', onKeyDown);
+              },
+              onHide() {
+                document.body.removeEventListener('keydown', onKeyDown);
+              },
+            };
+          },
+        },
+      ],
+    });
+  }
+
+  // Attach public events.
+  this.init = init;
+
+  return this;
+}
+
+Tooltip.BASE_ATTRIBUTE = BASE_ATTRIBUTE;
+Tooltip.init = (scope) =>
+  instantiateAll(`[${Tooltip.BASE_ATTRIBUTE}]`, Tooltip, scope);
+
+export { Tooltip, TooltipStyles };

package/src/components/cfpb-tooltips/tooltip.scss

@@ -0,0 +1,36 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'tippy.js/dist/tippy.css';
+@use 'tippy.js/dist/border.css';
+
+// Custom theme, see https://atomiks.github.io/tippyjs/v6/themes/
+.tippy-box[data-theme='cfpb'] {
+  background-color: var(--gray-5);
+  border: 1px solid var(--gray-40);
+  border-radius: 0;
+  color: var(--black);
+  padding: math.div(15px, $base-font-size-px) + rem;
+
+  .tippy-arrow {
+    color: var(--gray-5);
+  }
+
+  .tippy-heading {
+    font-weight: 500;
+    font-size: math.div(18px, $base-font-size-px) + rem;
+  }
+
+  .tippy-body {
+    font-size: math.div(16px, $base-font-size-px) + rem;
+    margin-top: math.div(15px, $base-font-size-px) + rem;
+  }
+}
+
+[data-tooltip] {
+  cursor: pointer;
+
+  // Hide tooltip trigger elements when JS isn't supported
+  .no-js & {
+    display: none;
+  }
+}