Merge pull request #5242 from uswds/jm-banner-init

USWDS - Banner: Add accordion dependency
uswds · May 25, 2023 · 10ef49f · 10ef49f
2 parents 0f42460 + 79d626d
commit 10ef49f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/packages/usa-accordion/src/index.js b/packages/usa-accordion/src/index.js
@@ -82,17 +82,26 @@ const accordion = behavior(
   },
   {
     init(root) {
-      select(BUTTON, root).forEach((button) => {
-        const expanded = button.getAttribute(EXPANDED) === "true";
-        toggleButton(button, expanded);
-      });
+      // Check if Banner has previously initialized accordion.
+      if (!this.hasInit) {
+        select(BUTTON, root).forEach((button) => {
+          const expanded = button.getAttribute(EXPANDED) === "true";
+          toggleButton(button, expanded);
+        });
+
+        this.hasInit = true;
+      }
+    },
+    teardown() {
+      this.hasInit = false;
     },
     ACCORDION,
     BUTTON,
     show: showButton,
     hide: hideButton,
     toggle: toggleButton,
     getButtons: getAccordionButtons,
+    hasInit: this.hasInit || false
   }
 );
 

diff --git a/packages/usa-banner/src/index.js b/packages/usa-banner/src/index.js
@@ -1,17 +1,43 @@
 const behavior = require("../../uswds-core/src/js/utils/behavior");
 const { CLICK } = require("../../uswds-core/src/js/events");
 const { prefix: PREFIX } = require("../../uswds-core/src/js/config");
+const accordion = require("../../usa-accordion/src/index");
 
 const HEADER = `.${PREFIX}-banner__header`;
 const EXPANDED_CLASS = `${PREFIX}-banner__header--expanded`;
 
+/**
+ * Toggle expanded banner class.
+ *
+ * @param {*} event - The clicked banner button.
+ */
 const toggleBanner = function toggleEl(event) {
   event.preventDefault();
-  this.closest(HEADER).classList.toggle(EXPANDED_CLASS);
+  event.target.closest(HEADER).classList.toggle(EXPANDED_CLASS);
 };
 
-module.exports = behavior({
-  [CLICK]: {
-    [`${HEADER} [aria-controls]`]: toggleBanner,
+const banner = behavior(
+  {
+    [CLICK]: {
+      [`${HEADER} [aria-controls]`]: toggleBanner,
+    },
   },
-});
+  {
+    init(root) {
+      // Initialize accordion if it hasn't already.
+      // Required for modular import of Banner.
+      if (!accordion.hasInit) {
+        accordion.on(root);
+        accordion.hasInit = true;
+      }
+    },
+    teardown(root) {
+      if (accordion.hasInit) {
+        accordion.off(root);
+        accordion.hasInit = false;
+      }
+    },
+  }
+);
+
+module.exports = banner;
diff --git a/packages/usa-banner/src/test/banner.spec.js b/packages/usa-banner/src/test/banner.spec.js
@@ -1,7 +1,6 @@
 const assert = require("assert");
 const fs = require("fs");
 const banner = require("../index");
-const accordion = require("../../../usa-accordion/src/index");
 
 const TEMPLATE = fs.readFileSync(`${__dirname}/template.html`);
 const EXPANDED = "aria-expanded";
@@ -27,12 +26,10 @@ tests.forEach(({ name, selector: containerSelector }) => {
       button = body.querySelector(".usa-banner__button");
       content = body.querySelector(".usa-banner__content");
       banner.on(containerSelector());
-      accordion.on(containerSelector());
     });
 
     afterEach(() => {
       banner.off(containerSelector());
-      accordion.off(containerSelector());
       body.innerHTML = "";
     });