@cfpb/cfpb-design-system 3.4.14 → 3.6.0

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.4.14",
+  "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-layout/featured-content-module.scss

@@ -70,26 +70,4 @@
       transform: translateX(-50%);
     }
   }
-
-  // Modifiers
-  &--left {
-    /* Left modifier doesn't have a border/background. If in the future we
-       have a left arranged FCM we'll want to make the border/background
-       its own modifer */
-    border: initial;
-    background-color: initial;
-
-    .o-featured-content-module__visual {
-      left: 0;
-      right: initial;
-    }
-
-    .o-featured-content-module__text {
-      // Tablet and above.
-      @include respond-to-min($bp-sm-min) {
-        padding-left: $fcm-visual-width + $grid-gutter-width;
-        padding-right: math.div($grid-gutter-width, $base-font-size-px) + em;
-      }
-    }
-  }
 }

package/src/components/cfpb-layout/hero.scss

@@ -108,6 +108,7 @@ $hero-desktop-height: 285px;
     &__image-wrapper {
       margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
     }
+
     &--overlay {
       .m-hero__wrapper {
         // Overwrite the image that is set in the markup because
@@ -115,6 +116,7 @@ $hero-desktop-height: 285px;
         background-image: none !important;
       }
     }
+
     &--jumbo {
       .m-hero__wrapper {
         // Keep hero image flush with container on mobile
@@ -130,6 +132,7 @@ $hero-desktop-height: 285px;
     &__heading {
       @include heading-2($is-responsive: false);
     }
+
     &__subhead {
       font-size: $size-iv;
     }
@@ -145,9 +148,11 @@ $hero-desktop-height: 285px;
       padding-left: math.div($grid-gutter-width, 2);
       min-height: $hero-desktop-height - ($grid-gutter-width * 2);
     }
+
     &__text {
-      margin: auto;
+      margin: auto 0;
     }
+
     &__image-wrapper {
       padding-right: math.div($grid-gutter-width, 2);
       padding-left: math.div(
@@ -157,6 +162,7 @@ $hero-desktop-height: 285px;
       display: flex;
       align-items: center;
     }
+
     &--bleeding {
       .m-hero__image-wrapper {
         width: 100%;
@@ -172,11 +178,13 @@ $hero-desktop-height: 285px;
         background-size: cover;
       }
     }
+
     &--overlay {
       .m-hero__image {
         display: none;
       }
     }
+
     &--jumbo {
       .m-hero__wrapper {
         background-position: 50%;
@@ -187,6 +195,7 @@ $hero-desktop-height: 285px;
         display: none;
       }
     }
+
     &--50-50 {
       .m-hero__wrapper {
         grid-template-columns: 1fr 1fr;

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;
+  }
+}