Add exports config to DS package

The `exports` field allows multiple entrypoints to be defined instead of
just a single `main` entrypoint. This allows the bundled code to be selectively
imported by developers. For our purposes, we can package the majority of our DS
code into a single file but keep the tooltip code separate. Tooltips are used
on very few pages and they rely on a third party library that we don't want users
to unnecessarily download on every page of cf.gov.

See https://nodejs.org/api/packages.html#package-entry-points

docs/assets/js/main.js

@@ -10,8 +10,8 @@ import {
   AlphaTransition,
   MaxHeightTransition,
   MoveTransition,
-  Tooltip,
 } from '@cfpb/cfpb-design-system';
+import { Tooltip } from '@cfpb/cfpb-design-system/tooltips';
 import Tabs from './tabs.js';
 import redirectBanner from './redirect-banner.js';
 import sidebar from './sidebar.js';

docs/pages/tooltips.md

@@ -10,19 +10,62 @@ description: A tooltip provides short, descriptive information when a user
 variation_groups:
   - variations:
       - variation_is_deprecated: false
-        variation_code_snippet: >+
+        variation_code_snippet: >-
           The APR for the World Bank Platinum Credit Card is 9.7% <span
           data-tooltip="relevant-tooltip">{% include icons/help-round.svg
           %}</span>
 
 
           <template id="relevant-tooltip">
               <div class="tippy-heading">This data is accurate as of June 2023</div>
-              <div class="tippy-body">APRs change over time and are specific to the applicant. Check rates before applying.</div>
+              <div class="tippy-body">
+                  APRs change over time and are specific to the applicant. Check rates before applying.
+              </div>
           </template>
 
+
+          <!--
+
+          Tooltips require a <template> element with an 'id' that matches the 'data-tooltip'
+
+          attribute of the tooltip's trigger element. The template can be anywhere on the page.
+
+
+          Additionally, the tooltip component must be imported independently of the rest of
+
+          the Design System using the namespace '@cfpb/cfpb-design-system/tooltips'.
+
+          For example, your project's JavaScript file might look like:
+
+
+          import {
+            Expandable,
+            ExpandableGroup,
+            Summary,
+            Multiselect,
+          } from '@cfpb/cfpb-design-system';
+
+          import { Tooltip } from '@cfpb/cfpb-design-system/tooltips';
+
+
+          Summary.init();
+
+          Expandable.init();
+
+          ExpandableGroup.init();
+
+          Multiselect.init();
+
+          Tooltip.init();
+
+
+          ...rest of your code
+
+          -->
+        variation_description: ''
+        variation_code_snippet_rendered: ''
     variation_group_name: Standard tooltip
-    variation_group_description: ""
+    variation_group_description: ''
 guidelines: Be judicious in using tooltips and explore other design options that
   keep content visible before choosing to use a tooltip. Only consider using a
   tooltip for short, non-critical information in a space-constrained user
@@ -43,5 +86,5 @@ accessibility: As USWDS states, tooltips are progressive enhancements for the
   doesn’t initialize. When testing tooltips for accessibility, ensure they are
   compliant with [USWDS tooltip accessibility
   tests](https://designsystem.digital.gov/components/tooltip/accessibility-tests/).
-related_items: ""
+related_items: ''
 ---

packages/cfpb-design-system/package.json

@@ -2,7 +2,10 @@
   "name": "@cfpb/cfpb-design-system",
   "version": "3.2.5",
   "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": "[email protected]",
@@ -24,7 +27,7 @@
   "gitHead": "d9b9862ef0a34a0ca6f4835347ac7f202ed50e3e",
   "type": "module",
   "dependencies": {
-      "tippy.js": "6.3.7"
+    "tippy.js": "6.3.7"
   },
   "devDependencies": {
     "auto-changelog": "2.5.0"

packages/cfpb-design-system/src/components/cfpb-tooltips/index.js

@@ -1,6 +1,79 @@
 /* ==========================================================================
-   Design System
-   Tooltips
+   Tooltip Organism
    ========================================================================== */
 
-export { Tooltip } from './tooltip.js';
+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.addEventListener('keydown', onKeyDown);
+              },
+              onHide() {
+                document.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 };

packages/cfpb-design-system/src/index.js

@@ -14,7 +14,6 @@ export * from './components/cfpb-layout';
 export * from './components/cfpb-notifications';
 export * from './components/cfpb-pagination';
 export * from './components/cfpb-tables';
-export * from './components/cfpb-tooltips';
 export * from './components/cfpb-typography';
 
 export * from './utilities';