From 2720e5f8b5d9493317aee794cc251bc27a1d8388 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 22 Nov 2024 16:42:42 -0600
Subject: [PATCH 01/54] feat(shs-5963: start adding drupal behaviours to js
 files

---
 .../carousel-slides/carousel-slides-height.js | 182 +++++++++---------
 .../humsci_basic/src/js/shared/tables/wrap.js |  58 +++---
 2 files changed, 127 insertions(+), 113 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
index 10c729b917..733438271c 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
@@ -1,91 +1,99 @@
 // This work below applies uniform height to both the Hero Layered Slider (formerly Carousel),
 // the Hero Gradient Slider paragraph component slides.
 // and the Spotlight Slider.
-const slides = document.querySelectorAll('.paragraph--type--hs-carousel, .paragraph--type--hs-gradient-hero-slider, .paragraph--type--hs-sptlght-slder');
-// Find slick arrow from hsCarousel.
-const slidesTextboxClasses = '.hb-hero-overlay__text, .hb-gradient-hero__text, .hb-spotlight__text';
-let timeOutFunctionId; // a numeric ID which is used by clearTimeOut to reset the timer
-
-// @boolean to determine if the textBox is a spotlight textBox
-const isSpotlightTextBox = (textBox) => textBox.classList.contains('hb-spotlight__text');
-const setMinHeight = (textBox, maxBoxHeight) => textBox.setAttribute('style', `min-height: ${maxBoxHeight}px`);
-
-// Set the height of all text boxes within a slider to that
-// of the tallest text box
-const restrictHeight = () => {
-  let boxHeightArray;
-  let maxBoxHeight;
-
-  slides.forEach((slide) => {
-    // array must have a default entry of 0 for the banner components
-    // and must be declare within the loop to set a baseline for each indiviual slider on a page
-    boxHeightArray = [0];
-
-    // Find all the textBoxes inside each slider
-    const textBoxes = slide.querySelectorAll(slidesTextboxClasses);
-
-    // Loop through all the textBoxes and gather their heights into an array
-    textBoxes.forEach((textBox) => {
-      // Clear any inline styles that may have been set previously
-      // This is necessary to determine the default height of text boxes
-      textBox.removeAttribute('style');
-
-      let boxHeight = textBox.offsetHeight;
-
-      // Parse boxHeight to be a number that can be used to set the min-height value
-      boxHeight = parseInt(boxHeight, 10);
-
-      // Create an array containing all the heights of textBoxes
-      boxHeightArray.push(boxHeight);
-    });
-
-    // Find largest number in array of textBoxes
-    maxBoxHeight = Math.max(...boxHeightArray);
-
-    // Give all textBoxes the same height
-    textBoxes.forEach((textBox) => setMinHeight(textBox, maxBoxHeight));
-
-    // Give sickArrowWrapper a top that changes according to the height when resizing the window.
-    const slickArrowWrapper = slide.querySelector('.slick__arrow');
-    if (slide.classList.contains('paragraph--type--hs-carousel') && slickArrowWrapper) {
-      setMinHeight(slickArrowWrapper, maxBoxHeight);
-    }
-
-    // If the textBoxes are spotlight textBoxes, then give them the same height on all screen sizes
-    textBoxes.forEach((textBox) => {
-      const classicSpotlight = slide.querySelector('.hb-spotlight--classic');
-      if (isSpotlightTextBox(textBox) && classicSpotlight) {
-        setMinHeight(textBox, maxBoxHeight);
+(function (Drupal) {
+  Drupal.behaviors.restrictHeightBehavior = {
+    attach(context) {
+      const slides = context.querySelectorAll('.paragraph--type--hs-carousel, .paragraph--type--hs-gradient-hero-slider, .paragraph--type--hs-sptlght-slder');
+      // Find slick arrow from hsCarousel.
+      const slidesTextboxClasses = '.hb-hero-overlay__text, .hb-gradient-hero__text, .hb-spotlight__text';
+      let timeOutFunctionId; // a numeric ID which is used by clearTimeOut to reset the timer
+
+      // @boolean to determine if the textBox is a spotlight textBox
+      const isSpotlightTextBox = (textBox) => textBox.classList.contains('hb-spotlight__text');
+      const setMinHeight = (textBox, maxBoxHeight) => textBox.setAttribute('style', `min-height: ${maxBoxHeight}px`);
+
+      // Set the height of all text boxes within a slider to that
+      // of the tallest text box
+      const restrictHeight = () => {
+        let boxHeightArray;
+        let maxBoxHeight;
+
+        slides.forEach((slide) => {
+          // array must have a default entry of 0 for the banner components and must be
+          // declare within the loop to set a baseline for each indiviual slider on a page
+          boxHeightArray = [0];
+
+          // Find all the textBoxes inside each slider
+          const textBoxes = slide.querySelectorAll(slidesTextboxClasses);
+
+          // Loop through all the textBoxes and gather their heights into an array
+          textBoxes.forEach((textBox) => {
+            // Clear any inline styles that may have been set previously
+            // This is necessary to determine the default height of text boxes
+            textBox.removeAttribute('style');
+
+            let boxHeight = textBox.offsetHeight;
+
+            // Parse boxHeight to be a number that can be used to set the min-height value
+            boxHeight = parseInt(boxHeight, 10);
+
+            // Create an array containing all the heights of textBoxes
+            boxHeightArray.push(boxHeight);
+          });
+
+          // Find largest number in array of textBoxes
+          maxBoxHeight = Math.max(...boxHeightArray);
+
+          // Give all textBoxes the same height
+          textBoxes.forEach((textBox) => setMinHeight(textBox, maxBoxHeight));
+
+          // Give sickArrowWrapper a top that changes according
+          // to the height when resizing the window.
+          const slickArrowWrapper = slide.querySelector('.slick__arrow');
+          if (slide.classList.contains('paragraph--type--hs-carousel') && slickArrowWrapper) {
+            setMinHeight(slickArrowWrapper, maxBoxHeight);
+          }
+
+          // If the textBoxes are spotlight textBoxes,
+          // then give them the same height on all screen sizes
+          textBoxes.forEach((textBox) => {
+            const classicSpotlight = slide.querySelector('.hb-spotlight--classic');
+            if (isSpotlightTextBox(textBox) && classicSpotlight) {
+              setMinHeight(textBox, maxBoxHeight);
+            }
+          });
+
+          // Find all spotlights texBoxes wrappers to give them the same height on all screen sizes
+          const expandedSpotlights = slide.querySelectorAll('.hb-spotlight--expanded');
+          if (expandedSpotlights) {
+            expandedSpotlights.forEach((expandedSpotlight) => {
+              const expandedSpotlightWrapper = expandedSpotlight.querySelector('.hb-spotlight__wrapper');
+              setMinHeight(expandedSpotlightWrapper, maxBoxHeight);
+            });
+          }
+
+          // Find images inside each slider.
+          const imageWrapper = slide.querySelector('.hb-spotlight__image-wrapper');
+          if (slide.classList.contains('paragraph--type--hs-sptlght-slder') && !imageWrapper) {
+            slide.classList.add('paragraph--type--hs-sptlght-slder--no-image');
+          }
+        });
+      };
+
+      const clearTimeoutOnResize = () => {
+        // Watch for when the browser window resizes, then run the restrictHeight
+        // function to reset the height of the text boxes
+        window.addEventListener('resize', () => {
+          clearTimeout(timeOutFunctionId);
+          timeOutFunctionId = setTimeout(restrictHeight, 100);
+        });
+      };
+
+      if (slides.length > 0) {
+        restrictHeight();
+        clearTimeoutOnResize();
       }
-    });
-
-    // Find all spotlights texBoxes wrappers to give them the same height on all screen sizes
-    const expandedSpotlights = slide.querySelectorAll('.hb-spotlight--expanded');
-    if (expandedSpotlights) {
-      expandedSpotlights.forEach((expandedSpotlight) => {
-        const expandedSpotlightWrapper = expandedSpotlight.querySelector('.hb-spotlight__wrapper');
-        setMinHeight(expandedSpotlightWrapper, maxBoxHeight);
-      });
-    }
-
-    // Find images inside each slider.
-    const imageWrapper = slide.querySelector('.hb-spotlight__image-wrapper');
-    if (slide.classList.contains('paragraph--type--hs-sptlght-slder') && !imageWrapper) {
-      slide.classList.add('paragraph--type--hs-sptlght-slder--no-image');
-    }
-  });
-};
-
-const clearTimeoutOnResize = () => {
-  // Watch for when the browser window resizes, then run the restrictHeight
-  // function to reset the height of the text boxes
-  window.addEventListener('resize', () => {
-    clearTimeout(timeOutFunctionId);
-    timeOutFunctionId = setTimeout(restrictHeight, 100);
-  });
-};
-
-if (slides.length > 0) {
-  restrictHeight();
-  clearTimeoutOnResize();
-}
+    },
+  };
+}(Drupal));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
index 776c4ac0e6..e3d50dcf10 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
@@ -1,31 +1,37 @@
-/**
- * Wrap every table in a class that will allow us to create more responsive styling
- */
+(function (Drupal) {
+  Drupal.behaviors.wrapTableElements = {
+    attach(context) {
+      /**
+      * Wrap every table in a class that will allow us to create more responsive styling
+      */
 
-/**
- * Wrap each element in a new parent
- * @param elements
- * @param wrapper
- */
-function wrapElement(element) {
-  // Create a new div with a special class name
-  const wrapper = document.createElement('div');
-  wrapper.className = 'hb-table-wrap';
+      /**
+      * Wrap each element in a new parent
+      * @param elements
+      * @param wrapper
+      */
+      function wrapElement(element) {
+        // Create a new div with a special class name
+        const wrapper = context.createElement('div');
+        wrapper.className = 'hb-table-wrap';
 
-  element.parentNode.insertBefore(wrapper, element);
-  wrapper.appendChild(element);
-}
+        element.parentNode.insertBefore(wrapper, element);
+        wrapper.appendChild(element);
+      }
 
-// Select every table element
-const elements = document.querySelectorAll('table');
-const uiPatternTable = document.querySelectorAll('.hb-table-pattern');
+      // Select every table element
+      const elements = context.querySelectorAll('table');
+      const uiPatternTable = context.querySelectorAll('.hb-table-pattern');
 
-// Wrap every table element
-for (let i = 0; i < elements.length; i++) {
-  wrapElement(elements[i]);
-}
+      // Wrap every table element
+      for (let i = 0; i < elements.length; i++) {
+        wrapElement(elements[i]);
+      }
 
-// Wrap every table UI pattern
-for (let i = 0; i < uiPatternTable.length; i++) {
-  wrapElement(uiPatternTable[i]);
-}
+      // Wrap every table UI pattern
+      for (let i = 0; i < uiPatternTable.length; i++) {
+        wrapElement(uiPatternTable[i]);
+      }
+    },
+  };
+}(Drupal));

From 7f21bd6472d0aec5168f45432c5df0cf1c9ff171 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 15:10:09 -0600
Subject: [PATCH 02/54] feat(shs-5693): add drupal befaviours to navigation and
 table js

---
 .../shared/navigation/collapse-main-menu.js   |  64 +++++-----
 .../navigation/main-menu-nested-toggler.js    | 112 +++++++++---------
 .../js/shared/navigation/main-menu-toggle.js  |  72 ++++++-----
 .../js/shared/navigation/secondary-toggler.js |  44 ++++---
 .../src/js/shared/tables/scope.js             |  38 +++---
 .../src/js/shared/tables/table-pattern.js     |  45 ++++---
 6 files changed, 207 insertions(+), 168 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
index 805fd8ceb8..482c5a95c7 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
@@ -4,37 +4,43 @@ import changeNav from './change-nav';
 // which allows users who have JavaScript disabled to navigate.
 // This script collapses the pre-expanded menus so
 // it's ready to use for those w/ JavaScript enabled.
-const mainToggle = document.querySelector('.hb-main-nav__toggle');
-const mainNavContent = document.querySelector('.hb-main-nav__menu-lv1');
-const nestedTogglers = document.querySelectorAll('.hb-nested-toggler');
-const isBelowMobileNavBreakpoint = (window.innerWidth < 992);
+(function (Drupal) {
+  Drupal.behaviors.collapseMainMenu = {
+    attach(context) {
+      const mainToggle = context.querySelector('.hb-main-nav__toggle');
+      const mainNavContent = context.querySelector('.hb-main-nav__menu-lv1');
+      const nestedTogglers = context.querySelectorAll('.hb-nested-toggler');
+      const isBelowMobileNavBreakpoint = (window.innerWidth < 992);
 
-// Collapse the main hamburger nav on mobile.
-if (isBelowMobileNavBreakpoint && mainToggle) {
-  changeNav(mainToggle, mainNavContent, false);
-}
+      // Collapse the main hamburger nav on mobile.
+      if (isBelowMobileNavBreakpoint && mainToggle) {
+        changeNav(mainToggle, mainNavContent, false);
+      }
 
-// Collapse the subnavs at all screen sizes.
-if (nestedTogglers) {
-  for (let i = 0; i < nestedTogglers.length; i += 1) {
-    const toggler = nestedTogglers[i];
-    const togglerID = toggler.getAttribute('id');
-    const togglerContent = document.querySelector('[aria-labelledby="'.concat(togglerID, '"]'));
-    const subnavIsActive = !!toggler.parentNode.classList.contains('hb-main-nav__item--active-trail');
+      // Collapse the subnavs at all screen sizes.
+      if (nestedTogglers) {
+        for (let i = 0; i < nestedTogglers.length; i += 1) {
+          const toggler = nestedTogglers[i];
+          const togglerID = toggler.getAttribute('id');
+          const togglerContent = context.querySelector('[aria-labelledby="'.concat(togglerID, '"]'));
+          const subnavIsActive = !!toggler.parentNode.classList.contains('hb-main-nav__item--active-trail');
 
-    if (!togglerContent) {
-      continue;
-    }
+          if (!togglerContent) {
+            continue;
+          }
 
-    // On page load, all menus in the active section should be expanded on mobile.
-    // All other menus should be hidden.
-    const isExpanded = !!((subnavIsActive && isBelowMobileNavBreakpoint));
-    changeNav(toggler, togglerContent, isExpanded);
-  }
-}
+          // On page load, all menus in the active section should be expanded on mobile.
+          // All other menus should be hidden.
+          const isExpanded = !!((subnavIsActive && isBelowMobileNavBreakpoint));
+          changeNav(toggler, togglerContent, isExpanded);
+        }
+      }
 
-// Now that we've manually collapsed the main nav and subnavs,
-// we can remove the "still loading" class and disable the CSS-powered menu suppression.
-if (mainToggle) {
-  document.querySelector('.hb-main-nav--is-still-loading').classList.remove('hb-main-nav--is-still-loading');
-}
+      // Now that we've manually collapsed the main nav and subnavs,
+      // we can remove the "still loading" class and disable the CSS-powered menu suppression.
+      if (mainToggle) {
+        context.querySelector('.hb-main-nav--is-still-loading').classList.remove('hb-main-nav--is-still-loading');
+      }
+    },
+  };
+}(Drupal));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
index 5d4d6c6d1e..cc51e2a309 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
@@ -1,61 +1,67 @@
 import changeNav from './change-nav';
 import togglerHandler from './toggler-handler';
 
-const togglers = document.querySelectorAll('.hb-nested-toggler');
-const mobileNavBreakpoint = 992;
-
-if (togglers) {
-  for (let i = 0; i < togglers.length; i += 1) {
-    let windowWidth = window.innerWidth;
-    const toggler = togglers[i];
-    const togglerID = toggler.getAttribute('id');
-    const togglerContent = document.querySelector('[aria-labelledby="'.concat(togglerID, '"]'));
-    const togglerParent = toggler.parentNode;
-
-    // Togglers should always have content but in the event that they don't we
-    // don't want the rest of the togglers on the page to break.
-    if (!togglerContent) {
-      continue;
-    }
-
-    toggler.addEventListener('click', (e) => togglerHandler(e, toggler, togglerContent));
-
-    // Some togglers will be anchor tags instead of buttons and they should behave
-    // like a button when the spacebar is pressed
-    toggler.addEventListener('keydown', (e) => {
-      // 32 is the keycode for the spacebar
-      if (e.which !== 32) {
-        return;
-      }
+(function (Drupal) {
+  Drupal.behaviors.NestedToggler = {
+    attach(context) {
+      const togglers = context.querySelectorAll('.hb-nested-toggler');
+      const mobileNavBreakpoint = 992;
 
-      e.preventDefault();
+      if (togglers) {
+        for (let i = 0; i < togglers.length; i += 1) {
+          let windowWidth = window.innerWidth;
+          const toggler = togglers[i];
+          const togglerID = toggler.getAttribute('id');
+          const togglerContent = context.querySelector('[aria-labelledby="'.concat(togglerID, '"]'));
+          const togglerParent = toggler.parentNode;
 
-      const isExpanded = e.target.getAttribute('aria-expanded') === 'true';
-      changeNav(toggler, togglerContent, !isExpanded);
-    });
+          // Togglers should always have content but in the event that they don't we
+          // don't want the rest of the togglers on the page to break.
+          if (!togglerContent) {
+            continue;
+          }
 
-    // At larger screen sizes:
-    // =========================================================================
-    // All menus collapse when resizing larger than the lg breakpoint
-    window.addEventListener('resize', () => {
-      windowWidth = window.innerWidth;
+          toggler.addEventListener('click', (e) => togglerHandler(e, toggler, togglerContent));
 
-      // When resizing from mobile to desktop, show the navigation
-      if (windowWidth >= mobileNavBreakpoint) {
-        changeNav(toggler, togglerContent, false);
-      }
-    });
-
-    // We want to close open dropdowns on desktop when the following events happen
-    // on the body, outside of the toggler component:
-    // 1. (focusin) When tabbing through the navigation the previously opened dropdown closes
-    // 2. (click) When clicking outside of the dropdown area it will close
-    ['focusin', 'click'].forEach((event) => {
-      document.body.addEventListener(event, (e) => {
-        if (windowWidth >= mobileNavBreakpoint && !togglerParent.contains(e.target)) {
-          changeNav(toggler, togglerContent, false);
+          // Some togglers will be anchor tags instead of buttons and they should behave
+          // like a button when the spacebar is pressed
+          toggler.addEventListener('keydown', (e) => {
+            // 32 is the keycode for the spacebar
+            if (e.which !== 32) {
+              return;
+            }
+
+            e.preventDefault();
+
+            const isExpanded = e.target.getAttribute('aria-expanded') === 'true';
+            changeNav(toggler, togglerContent, !isExpanded);
+          });
+
+          // At larger screen sizes:
+          // =========================================================================
+          // All menus collapse when resizing larger than the lg breakpoint
+          window.addEventListener('resize', () => {
+            windowWidth = window.innerWidth;
+
+            // When resizing from mobile to desktop, show the navigation
+            if (windowWidth >= mobileNavBreakpoint) {
+              changeNav(toggler, togglerContent, false);
+            }
+          });
+
+          // We want to close open dropdowns on desktop when the following events happen
+          // on the body, outside of the toggler component:
+          // 1. (focusin) When tabbing through the navigation the previously opened dropdown closes
+          // 2. (click) When clicking outside of the dropdown area it will close
+          ['focusin', 'click'].forEach((event) => {
+            document.body.addEventListener(event, (e) => {
+              if (windowWidth >= mobileNavBreakpoint && !togglerParent.contains(e.target)) {
+                changeNav(toggler, togglerContent, false);
+              }
+            }, false);
+          });
         }
-      }, false);
-    });
-  }
-}
+      }
+    },
+  };
+}(Drupal));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
index b5c61856c4..ac4a60c61a 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
@@ -1,40 +1,48 @@
 import changeNav from './change-nav';
 
-const menuToggle = document.querySelector('.hb-main-nav__toggle');
-const mainMenu = document.querySelector('.hb-main-nav__menu-lv1');
-const mobileNavBreakpoint = 992;
-let windowWidth;
-let wasDesktopSize;
+(function (Drupal) {
+  Drupal.behaviors.toggleNavigation = {
+    attach(context) {
+      const menuToggle = context.querySelector('.hb-main-nav__toggle');
+      const mainMenu = context.querySelector('.hb-main-nav__menu-lv1');
+      const mobileNavBreakpoint = 992;
+      let windowWidth;
+      let wasDesktopSize;
 
-if (menuToggle) {
-  // Toggle the nav when the the button is clicked
-  menuToggle.addEventListener('click', () => {
-    const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
+      if (menuToggle) {
+        // Toggle the nav when the the button is clicked
+        menuToggle.addEventListener('click', () => {
+          const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
 
-    changeNav(menuToggle, mainMenu, !isExpanded);
-  });
+          changeNav(menuToggle, mainMenu, !isExpanded);
+        });
 
-  // Handle the showing/hiding of the nav when resizing the browser
-  window.addEventListener('resize', () => {
-    windowWidth = window.innerWidth;
+        // Handle the showing/hiding of the nav when resizing the browser
+        window.addEventListener('resize', () => {
+          windowWidth = window.innerWidth;
 
-    // When resizing from mobile to desktop, ensure navigation is displayed, not hidden
-    // If wasDesktopSize is false, it means we haven't gotten there yet and will to run this check
-    // Otherwise, if wasDesktopSize is true,
-    // we are above the mobileNavBreakpoint and don't need to keep showingNav
-    if (windowWidth >= mobileNavBreakpoint && !wasDesktopSize) {
-      changeNav(menuToggle, mainMenu, true);
-      wasDesktopSize = true;
-    }
+          // When resizing from mobile to desktop, ensure navigation is displayed, not hidden
+          // If wasDesktopSize is false, it means we haven't gotten there yet
+          // and will to run this check
+          // Otherwise, if wasDesktopSize is true,
+          // we are above the mobileNavBreakpoint and don't need to keep showingNav
+          if (windowWidth >= mobileNavBreakpoint && !wasDesktopSize) {
+            changeNav(menuToggle, mainMenu, true);
+            wasDesktopSize = true;
+          }
 
-    // When resizing from desktop to mobile, hide the navigation
-    if (windowWidth < mobileNavBreakpoint && wasDesktopSize) {
-      changeNav(menuToggle, mainMenu, false);
+          // When resizing from desktop to mobile, hide the navigation
+          if (windowWidth < mobileNavBreakpoint && wasDesktopSize) {
+            changeNav(menuToggle, mainMenu, false);
 
-      // This keeps the navigation from collapsing every time the screen is resized
-      // below remains the mobileNavBreakpoint
-      // After the first time we resize to below the mobileNavBreakpoint, reset wasDesktopSize var
-      wasDesktopSize = false;
-    }
-  });
-}
+            // This keeps the navigation from collapsing every time the screen is resized
+            // below remains the mobileNavBreakpoint
+            // After the first time we resize to below the mobileNavBreakpoint,
+            // reset wasDesktopSize var
+            wasDesktopSize = false;
+          }
+        });
+      }
+    },
+  };
+}(Drupal));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
index ff99e25a24..e133fd5a48 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
@@ -1,26 +1,32 @@
 import changeNav from './change-nav';
 import togglerHandler from './toggler-handler';
 
-const togglers = document.querySelectorAll('.hb-secondary-toggler');
+(function (Drupal) {
+  Drupal.behaviors.secondaryToggleNavigation = {
+    attach(context) {
+      const togglers = context.querySelectorAll('.hb-secondary-toggler');
 
-if (togglers) {
-  for (let i = 0; i < togglers.length; i += 1) {
-    const toggler = togglers[i];
-    const togglerID = toggler.getAttribute('id');
-    const togglerContent = document.querySelector('[aria-labelledby="'.concat(togglerID, '"]'));
-    const togglerParent = toggler.parentNode;
-    const activeTrail = togglerParent.classList.contains('hb-secondary-nav__item--active-trail');
+      if (togglers) {
+        for (let i = 0; i < togglers.length; i += 1) {
+          const toggler = togglers[i];
+          const togglerID = toggler.getAttribute('id');
+          const togglerContent = document.querySelector('[aria-labelledby="'.concat(togglerID, '"]'));
+          const togglerParent = toggler.parentNode;
+          const activeTrail = togglerParent.classList.contains('hb-secondary-nav__item--active-trail');
 
-    // Togglers should always have content but in the event that they don't we
-    // don't want the rest of the togglers on the page to break.
-    if (!togglerContent) {
-      continue;
-    }
+          // Togglers should always have content but in the event that they don't we
+          // don't want the rest of the togglers on the page to break.
+          if (!togglerContent) {
+            continue;
+          }
 
-    if (!activeTrail) {
-      changeNav(toggler, togglerContent, false);
-    }
+          if (!activeTrail) {
+            changeNav(toggler, togglerContent, false);
+          }
 
-    toggler.addEventListener('click', (e) => togglerHandler(e, toggler, togglerContent));
-  }
-}
+          toggler.addEventListener('click', (e) => togglerHandler(e, toggler, togglerContent));
+        }
+      }
+    },
+  };
+}(Drupal));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
index 3eff2a5cd6..0edefcd8ca 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
@@ -3,21 +3,27 @@
  * This improves table accessibility
  */
 
-/**
- * Set a specific scope attribute value on each element
- * @param elements
- * @param scope
- */
-function setScopeOnElements(elements, scope) {
-  for (let i = 0; i < elements.length; i++) {
-    elements[i].setAttribute('scope', scope);
-  }
-}
+(function (Drupal) {
+  Drupal.behaviors.addTableScopeAttributes = {
+    attach(context) {
+    /**
+     * Set a specific scope attribute value on each element
+     * @param elements
+     * @param scope
+     */
+      function setScopeOnElements(elements, scope) {
+        for (let i = 0; i < elements.length; i++) {
+          elements[i].setAttribute('scope', scope);
+        }
+      }
 
-// set scope attribute on column headers
-const columnEls = document.querySelectorAll('thead th');
-setScopeOnElements(columnEls, 'col');
+      // set scope attribute on column headers
+      const columnEls = context.querySelectorAll('thead th');
+      setScopeOnElements(columnEls, 'col');
 
-// set scope attribute on row headers
-const rowEls = document.querySelectorAll('tbody th');
-setScopeOnElements(rowEls, 'row');
+      // set scope attribute on row headers
+      const rowEls = context.querySelectorAll('tbody th');
+      setScopeOnElements(rowEls, 'row');
+    },
+  };
+}(Drupal));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
index 84a3521db8..dfb0b63dfd 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
@@ -1,25 +1,32 @@
 // account for different ways in which a table heading may be declared
-const div = 'div.hb-table-pattern__header > div.hb-table-pattern__row > div';
-const span = 'div.hb-table-pattern__header > div.hb-table-pattern__row > span';
-const paragraph = 'div.hb-table-pattern__header > div.hb-table-pattern__row > p';
 
-// retrieve table column headings
-const columnHeaders = document.querySelectorAll(`${div}, ${span}, ${paragraph}`);
+(function (Drupal) {
+  Drupal.behaviors.updateTableHeaders = {
+    attach(context) {
+      const div = 'div.hb-table-pattern__header > div.hb-table-pattern__row > div';
+      const span = 'div.hb-table-pattern__header > div.hb-table-pattern__row > span';
+      const paragraph = 'div.hb-table-pattern__header > div.hb-table-pattern__row > p';
 
-// retrieve all rows
-const tableRows = document.querySelectorAll('.hb-table-row');
+      // retrieve table column headings
+      const columnHeaders = context.querySelectorAll(`${div}, ${span}, ${paragraph}`);
 
-if (tableRows) {
-  // For each row in the table
-  for (let i = 0; i < tableRows.length; i += 1) {
-    // find the row headers in each cell
-    const tableRowHeaders = tableRows[i].querySelectorAll('.hb-table-row__heading');
+      // retrieve all rows
+      const tableRows = context.querySelectorAll('.hb-table-row');
 
-    // we need h to step through columnHeaders and get the correct heading text
-    for (let h = 0; h < tableRowHeaders.length; h += 1) {
-      if (tableRowHeaders[h].innerHTML !== '') {
-        tableRowHeaders[h].innerHTML = columnHeaders[h].innerHTML;
+      if (tableRows) {
+      // For each row in the table
+        for (let i = 0; i < tableRows.length; i += 1) {
+        // find the row headers in each cell
+          const tableRowHeaders = tableRows[i].querySelectorAll('.hb-table-row__heading');
+
+          // we need h to step through columnHeaders and get the correct heading text
+          for (let h = 0; h < tableRowHeaders.length; h += 1) {
+            if (tableRowHeaders[h].innerHTML !== '') {
+              tableRowHeaders[h].innerHTML = columnHeaders[h].innerHTML;
+            }
+          }
+        }
       }
-    }
-  }
-}
+    },
+  };
+}(Drupal));

From bbe6a41afcec820494e4720253f1a67f512dfadb Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 16:00:59 -0600
Subject: [PATCH 03/54] feat(shs-5693): add drupal befaviours to equal height
 grid js

---
 .../src/js/shared/equal-height-grid/index.js  | 106 +++++++++---------
 1 file changed, 56 insertions(+), 50 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
index 54c4d03343..cb01909fb3 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
@@ -1,59 +1,65 @@
 import equalHeightGrid from './equal-height-grid';
 import resetHeightGrid from './reset-height-grid';
 
-const applyStretchClass = () => {
-  const hasStretchClass = document.querySelector('.hb-stretch-vertical-linked-cards');
-  const verticalLinkedCardTitles = [...document.querySelectorAll('.hb-vertical-linked-card__title')];
-  const cardCollections = document.querySelectorAll('.ptype-hs-collection, .ptype-hs-priv-collection');
+(function (Drupal) {
+  Drupal.behaviors.hbStretchVerticalLinkedCards = {
+    attach(context) {
+      const applyStretchClass = () => {
+        const hasStretchClass = context.querySelector('.hb-stretch-vertical-linked-cards');
+        const verticalLinkedCardTitles = [...context.querySelectorAll('.hb-vertical-linked-card__title')];
+        const cardCollections = context.querySelectorAll('.ptype-hs-collection, .ptype-hs-priv-collection');
 
-  // Matches the $su-breakpoint-sm variable. Screen sizes smaller than this variable
-  // stack all grid columns making it unnecessary to set a height on cards.
-  // See: https://github.com/SU-SWS/decanter/blob/master/core/src/scss/utilities/variables/core/_breakpoints.scss
-  const smallScreenBreakpoint = 576;
+        // Matches the $su-breakpoint-sm variable. Screen sizes smaller than this variable
+        // stack all grid columns making it unnecessary to set a height on cards.
+        // See: https://github.com/SU-SWS/decanter/blob/master/core/src/scss/utilities/variables/core/_breakpoints.scss
+        const smallScreenBreakpoint = 576;
 
-  Array.prototype.forEach.call(cardCollections, (collection) => {
-    const verticalLinkedCards = [...collection.querySelectorAll('.hb-vertical-linked-card')];
-    // Reset any min-heights that were previously set.
-    // We need to do this so cards will not have a height set when resizing to small
-    // screen sizes.
-    if (hasStretchClass && verticalLinkedCards.length > 0) {
-      resetHeightGrid(verticalLinkedCards);
-    }
+        Array.prototype.forEach.call(cardCollections, (collection) => {
+          const verticalLinkedCards = [...collection.querySelectorAll('.hb-vertical-linked-card')];
+          // Reset any min-heights that were previously set.
+          // We need to do this so cards will not have a height set when resizing to small
+          // screen sizes.
+          if (hasStretchClass && verticalLinkedCards.length > 0) {
+            resetHeightGrid(verticalLinkedCards);
+          }
 
-    // Reset any min-heights that were previously set.
-    // Because not all Vertical Linked Cards will have a title, this needs a separate
-    // if statement.
-    if (hasStretchClass && verticalLinkedCardTitles.length > 0) {
-      resetHeightGrid(verticalLinkedCardTitles);
-    }
+          // Reset any min-heights that were previously set.
+          // Because not all Vertical Linked Cards will have a title, this needs a separate
+          // if statement.
+          if (hasStretchClass && verticalLinkedCardTitles.length > 0) {
+            resetHeightGrid(verticalLinkedCardTitles);
+          }
 
-    // Only set heights for certain screen sizes
-    if (hasStretchClass && window.innerWidth >= smallScreenBreakpoint) {
-      if (verticalLinkedCardTitles.length > 0) {
-        // Make the vertical linked card titles AND cards the same max height.
-        // The title height has to be set first because it influences the final
-        // height of the card.
-        equalHeightGrid(verticalLinkedCardTitles)
-          .then(() => equalHeightGrid(verticalLinkedCards))
-          .catch((result) => console.error('issue loading equal height cards', result));
-      } else if (verticalLinkedCards.length > 0) {
-        // Since card titles are not required we still want to run the equal height
-        // function on remaining cards
-        equalHeightGrid(verticalLinkedCards);
-      }
-    }
-  });
-};
+          // Only set heights for certain screen sizes
+          if (hasStretchClass && window.innerWidth >= smallScreenBreakpoint) {
+            if (verticalLinkedCardTitles.length > 0) {
+              // Make the vertical linked card titles AND cards the same max height.
+              // The title height has to be set first because it influences the final
+              // height of the card.
+              equalHeightGrid(verticalLinkedCardTitles)
+                .then(() => equalHeightGrid(verticalLinkedCards))
+                .catch((result) => console.error('issue loading equal height cards', result));
+            } else if (verticalLinkedCards.length > 0) {
+              // Since card titles are not required we still want to run the equal height
+              // function on remaining cards
+              equalHeightGrid(verticalLinkedCards);
+            }
+          }
+        });
+      };
 
-// Wait a 1 sec for page to load in before setting heights
-setTimeout(() => {
-  applyStretchClass();
-}, 1000);
+      // Wait a 1 sec for page to load in before setting heights
+      setTimeout(() => {
+        applyStretchClass();
+      }, 1000);
 
-// Recalculate when the window is resized
-window.addEventListener('resize', () => {
-  // Wait a half of a second before setting the heights
-  setTimeout(() => {
-    applyStretchClass();
-  }, 500);
-});
+      // Recalculate when the window is resized
+      window.addEventListener('resize', () => {
+        // Wait a half of a second before setting the heights
+        setTimeout(() => {
+          applyStretchClass();
+        }, 500);
+      });
+    },
+  };
+}(Drupal));

From e69bbcff643051af58f4c1729ac61b7d42540166 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 16:14:39 -0600
Subject: [PATCH 04/54] feat(shs-5693): add drupal befaviours to video with
 caption js

---
 .../src/js/shared/media/video-with-caption.js | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js b/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
index 3a893f0688..76c693a9a3 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
@@ -2,17 +2,23 @@
 // This causes issues when there is a video in a figure because the video no longer
 // fills the entire space of the container.
 // This JS sets a width of 100% to figures that contain videos.
-const videos = document.querySelectorAll('.field-media-oembed-video');
+(function (Drupal) {
+  Drupal.behaviors.videoWithCaptionBehavior = {
+    attach(context) {
+      const videos = context.querySelectorAll('.field-media-oembed-video');
 
-if (videos && videos.length > 0) {
-  for (let i = 0; i < videos.length; i++) {
-    const video = videos[i];
-    if (video.parentNode && video.parentNode.parentNode && video.parentNode.parentNode.nodeName === 'FIGURE') {
-      const figure = video.parentNode.parentNode;
+      if (videos && videos.length > 0) {
+        for (let i = 0; i < videos.length; i++) {
+          const video = videos[i];
+          if (video.parentNode && video.parentNode.parentNode && video.parentNode.parentNode.nodeName === 'FIGURE') {
+            const figure = video.parentNode.parentNode;
 
-      if (figure.classList.contains('caption')) {
-        figure.style.width = '100%';
+            if (figure.classList.contains('caption')) {
+              figure.style.width = '100%';
+            }
+          }
+        }
       }
-    }
-  }
-}
+    },
+  };
+}(Drupal));

From 7146a06fa320a912133dec9910c301621fb2337c Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 16:30:08 -0600
Subject: [PATCH 05/54] feat(shs-5693): add drupal behavior to page scroll js

---
 .../src/js/shared/animation/page-scroll.js    | 76 ++++++++++---------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js b/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
index 3ac6ef6c37..0343c7121e 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
@@ -1,39 +1,45 @@
-const animationEnhancements = document.querySelector('.hb-has-animation-enhancements');
-const experimentalFeaturesClass = document.querySelector('.hb-experimental');
-const experimentalClassesToAnimate = [document.querySelectorAll('.hs-font-lead')];
+(function (Drupal) {
+  Drupal.behaviors.pageScrollBehavior = {
+    attach(context) {
+      const animationEnhancements = context.querySelector('.hb-has-animation-enhancements');
+      const experimentalFeaturesClass = context.querySelector('.hb-experimental');
+      const experimentalClassesToAnimate = [context.querySelectorAll('.hs-font-lead')];
 
-// The classes of items we want to add animations to
-const classesToAnimate = [
-  document.querySelectorAll('.hb-gradient-hero'),
-  document.querySelectorAll('.hb-gradient-hero__text'),
-  document.querySelectorAll('.hb-gradient-hero__image-wrapper'),
-  document.querySelectorAll('.field-hs-gradient-hero-image'),
-  document.querySelectorAll('.hb-hero-overlay'),
-  document.querySelectorAll('.hb-hero-overlay__text'),
-  document.querySelectorAll('.hb-hero-overlay__image-wrapper'),
-  document.querySelectorAll('.field-hs-hero-image'),
-  document.querySelectorAll('.hs-font-splash'),
-];
+      // The classes of items we want to add animations to
+      const classesToAnimate = [
+        context.querySelectorAll('.hb-gradient-hero'),
+        context.querySelectorAll('.hb-gradient-hero__text'),
+        context.querySelectorAll('.hb-gradient-hero__image-wrapper'),
+        context.querySelectorAll('.field-hs-gradient-hero-image'),
+        context.querySelectorAll('.hb-hero-overlay'),
+        context.querySelectorAll('.hb-hero-overlay__text'),
+        context.querySelectorAll('.hb-hero-overlay__image-wrapper'),
+        context.querySelectorAll('.field-hs-hero-image'),
+        context.querySelectorAll('.hs-font-splash'),
+      ];
 
-if (experimentalFeaturesClass) {
-  classesToAnimate.push(experimentalClassesToAnimate);
-}
+      if (experimentalFeaturesClass) {
+        classesToAnimate.push(experimentalClassesToAnimate);
+      }
 
-// check if top of element is in viewport
-const isElementVisible = new IntersectionObserver((items) => {
-  items.forEach((item) => {
-    if (item.intersectionRatio > 0) {
-      item.target.classList.add('animate');
-    }
-  });
-});
-
-if (animationEnhancements) {
-  classesToAnimate.forEach((items) => {
-    if (items) {
-      items.forEach((item) => {
-        isElementVisible.observe(item);
+      // check if top of element is in viewport
+      const isElementVisible = new IntersectionObserver((items) => {
+        items.forEach((item) => {
+          if (item.intersectionRatio > 0) {
+            item.target.classList.add('animate');
+          }
+        });
       });
-    }
-  });
-}
+
+      if (animationEnhancements) {
+        classesToAnimate.forEach((items) => {
+          if (items) {
+            items.forEach((item) => {
+              isElementVisible.observe(item);
+            });
+          }
+        });
+      }
+    },
+  };
+}(Drupal));

From 7ac23def4df457cd6fdbb10322c0a2ad24f7dd80 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 16:45:56 -0600
Subject: [PATCH 06/54] feat(shs-5693): add drupal behavior to expanded
 collapse timeline js

---
 .../timeline/expand-collapse-timeline.js      | 113 +++++++++---------
 1 file changed, 58 insertions(+), 55 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
index 4e3938451c..e5bf02a5f6 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
@@ -1,72 +1,75 @@
 // Timelines are expanded by default
 // Find when a timeline has been set to collapsed so that we can
 // adjust the default attribute values
-const timelineCollapsed = document.querySelectorAll('.hb-timeline__collapsed');
+(function (Drupal) {
+  Drupal.behaviors.pageScrollBehavior = {
+    attach(context) {
+      const timelineCollapsed = context.querySelectorAll('.hb-timeline__collapsed');
 
-// Find timeline items are are open inside of timelineCollapsed and close them!
-timelineCollapsed.forEach((timeline) => {
-  // let items;
-  // let summaries;
+      // Find timeline items are are open inside of timelineCollapsed and close them!
+      timelineCollapsed.forEach((timeline) => {
+        // Find all the timeline items inside of the collapsed timeline
+        const items = timeline.querySelectorAll('.hb-timeline-item');
 
-  // Find all the timeline items inside of the collapsed timeline
-  const items = timeline.querySelectorAll('.hb-timeline-item');
+        // Remove open attribute from these items
+        items.forEach((item) => {
+          item.removeAttribute('open');
+        });
 
-  // Remove open attribute from these items
-  items.forEach((item) => {
-    item.removeAttribute('open');
-  });
+        // Find the summary element and update the aria attribute values
+        const summaries = timeline.querySelectorAll('.hb-timeline-item__summary');
 
-  // Find the summary element and update the aria attribute values
-  const summaries = timeline.querySelectorAll('.hb-timeline-item__summary');
+        summaries.forEach((summary) => {
+          summary.setAttribute('aria-expanded', 'false');
+          summary.setAttribute('aria-pressed', 'false');
+        });
+      });
 
-  summaries.forEach((summary) => {
-    summary.setAttribute('aria-expanded', 'false');
-    summary.setAttribute('aria-pressed', 'false');
-  });
-});
+      // When a user clicks on a timeline, update the aria properties accordingly
+      const timelineItems = context.querySelectorAll('.hb-timeline-item');
 
-// When a user clicks on a timeline, update the aria properties accordingly
-const timelineItems = document.querySelectorAll('.hb-timeline-item');
+      if (timelineItems) {
+        timelineItems.forEach((timelineItem) => {
+          const summary = timelineItem.querySelector('.hb-timeline-item__summary');
 
-if (timelineItems) {
-  timelineItems.forEach((timelineItem) => {
-    const summary = timelineItem.querySelector('.hb-timeline-item__summary');
+          // Find the value of aria-expanded for a timeline item summary
+          let ariaExpanded = summary.getAttribute('aria-expanded');
 
-    // Find the value of aria-expanded for a timeline item summary
-    let ariaExpanded = summary.getAttribute('aria-expanded');
+          // Update aria values!
+          summary.addEventListener(('keypress', 'click'), () => {
+            if (ariaExpanded === 'true') {
+              summary.setAttribute('aria-expanded', 'false');
+              summary.setAttribute('aria-pressed', 'false');
+            } else {
+              summary.setAttribute('aria-expanded', 'true');
+              summary.setAttribute('aria-pressed', 'true');
+            }
 
-    // Update aria values!
-    summary.addEventListener(('keypress', 'click'), () => {
-      if (ariaExpanded === 'true') {
-        summary.setAttribute('aria-expanded', 'false');
-        summary.setAttribute('aria-pressed', 'false');
-      } else {
-        summary.setAttribute('aria-expanded', 'true');
-        summary.setAttribute('aria-pressed', 'true');
+            // Retain updated value for the aria-expanded attribute
+            ariaExpanded = summary.getAttribute('aria-expanded');
+          });
+        });
       }
 
-      // Retain updated value for the aria-expanded attribute
-      ariaExpanded = summary.getAttribute('aria-expanded');
-    });
-  });
-}
+      const searchQuery = new URLSearchParams(window.location.search);
+      const params = Object.fromEntries(searchQuery.entries());
 
-const searchQuery = new URLSearchParams(window.location.search);
-const params = Object.fromEntries(searchQuery.entries());
+      function toggleTimelineFromSearch() {
+        const searchTerm = params.search.toLowerCase();
 
-function toggleTimelineFromSearch() {
-  const searchTerm = params.search.toLowerCase();
-
-  timelineItems.forEach((timeline) => {
-    if (timeline.textContent.toLowerCase().includes(searchTerm)) {
-      const summary = timeline.querySelector('summary');
-      timeline.setAttribute('open', '');
-      summary.setAttribute('aria-expanded', 'true');
-      summary.setAttribute('aria-pressed', 'true');
-    }
-  });
-}
+        timelineItems.forEach((timeline) => {
+          if (timeline.textContent.toLowerCase().includes(searchTerm)) {
+            const summary = timeline.querySelector('summary');
+            timeline.setAttribute('open', '');
+            summary.setAttribute('aria-expanded', 'true');
+            summary.setAttribute('aria-pressed', 'true');
+          }
+        });
+      }
 
-if (Object.keys(params).length && Object.prototype.hasOwnProperty.call(params, 'search')) {
-  toggleTimelineFromSearch();
-}
+      if (Object.keys(params).length && Object.prototype.hasOwnProperty.call(params, 'search')) {
+        toggleTimelineFromSearch();
+      }
+    },
+  };
+}(Drupal));

From 6554921cd8f22ced6a9f10db7ee553c6ab35776f Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 17:03:41 -0600
Subject: [PATCH 07/54] feat(shs-5693): add drupal behavior to accordion toggle
 all js

---
 .../shared/accordion/accordion-toggle-all.js  | 152 +++++++++---------
 1 file changed, 79 insertions(+), 73 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js b/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
index 4140ccab4a..178b819a93 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
@@ -1,102 +1,108 @@
+(function (Drupal) {
 /**
  * Loops through a list of accordions and either opens or closes all items
  *
  * @param {array} expects a list of accordion elements
  * @param {string} expects a string that specifies if all accordions should be opened or closed
  */
-function toggleAllAccordions(accordionList, command) {
-  if (command === 'closeAll') {
-    accordionList.forEach((accordion) => {
-      accordion.removeAttribute('open');
-    });
-  } else {
-    accordionList.forEach((accordion) => {
-      accordion.setAttribute('open', '');
-    });
+  function toggleAllAccordions(accordionList, command) {
+    if (command === 'closeAll') {
+      accordionList.forEach((accordion) => {
+        accordion.removeAttribute('open');
+      });
+    } else {
+      accordionList.forEach((accordion) => {
+        accordion.setAttribute('open', '');
+      });
+    }
   }
-}
 
-/**
+  /**
  * Creates a button element that can act as a toggle for all accordions on a page.
  *
  * @return {element}
  */
-function createToggle() {
-  const toggleButton = document.createElement('Button');
-  toggleButton.innerText = 'Expand All';
-  toggleButton.classList.add('hb-link');
-  toggleButton.classList.add('hb-accordion-toggle-all');
+  function createToggle() {
+    const toggleButton = document.createElement('Button');
+    toggleButton.innerText = 'Expand All';
+    toggleButton.classList.add('hb-link');
+    toggleButton.classList.add('hb-accordion-toggle-all');
 
-  return toggleButton;
-}
+    return toggleButton;
+  }
 
-/**
+  /**
  * Updates the all toggle buttons when one has been clicked depending on whether
  * or not all accordions are being opened or closed.
  * @param {array} expects the list of all accordion toggle buttons on the page
  * @param {string} expects a string that specifies if all accordions should be opened or closed
  */
-function updateToggle(toggleList, command) {
-  toggleList.forEach((toggleButton) => {
-    if (command === 'closeAll') {
-      toggleButton.innerText = 'Expand All';
-    } else {
-      toggleButton.innerText = 'Collapse All';
-    }
-  });
-}
+  function updateToggle(toggleList, command) {
+    toggleList.forEach((toggleButton) => {
+      if (command === 'closeAll') {
+        toggleButton.innerText = 'Expand All';
+      } else {
+        toggleButton.innerText = 'Collapse All';
+      }
+    });
+  }
 
-// Create a list of all accordions on the page
-const accordionList = [...document.querySelectorAll('details')];
+  Drupal.behaviors.accordionToggleAllBehavior = {
+    attach(context) {
+      // Create a list of all accordions on the page
+      const accordionList = [...context.querySelectorAll('details')];
 
-if (accordionList.length >= 1) {
-  let allExpanded = false;
+      if (accordionList.length >= 1) {
+        let allExpanded = false;
 
-  // Loop through each accordion item
-  // If the toggle all class is present create a toggle button and place it above
-  // the accordion instance.
-  accordionList.forEach((accordion) => {
-    if (accordion.classList.contains('hb-accordion_toggle-all')) {
-      const toggleButton = createToggle();
-      accordion.parentNode.insertBefore(toggleButton, accordion);
-    }
-  });
+        // Loop through each accordion item
+        // If the toggle all class is present create a toggle button and place it above
+        // the accordion instance.
+        accordionList.forEach((accordion) => {
+          if (accordion.classList.contains('hb-accordion_toggle-all')) {
+            const toggleButton = createToggle();
+            accordion.parentNode.insertBefore(toggleButton, accordion);
+          }
+        });
 
-  // Create a list of all toggle buttons generated on the page. This has to run
-  // after the block of code that loops through the accordion lists and creates
-  // the buttons.
-  const allToggleButtons = [...document.querySelectorAll('.hb-accordion-toggle-all')];
+        // Create a list of all toggle buttons generated on the page. This has to run
+        // after the block of code that loops through the accordion lists and creates
+        // the buttons.
+        const allToggleButtons = [...context.querySelectorAll('.hb-accordion-toggle-all')];
 
-  allToggleButtons.forEach((toggleButton) => {
-    toggleButton.addEventListener('click', (e) => {
-      e.preventDefault();
-      if (allExpanded) {
-        toggleAllAccordions(accordionList, 'closeAll');
-        updateToggle(allToggleButtons, 'closeAll');
-        allExpanded = false;
-      } else {
-        toggleAllAccordions(accordionList, 'openAll');
-        updateToggle(allToggleButtons, 'openAll');
-        allExpanded = true;
+        allToggleButtons.forEach((toggleButton) => {
+          toggleButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (allExpanded) {
+              toggleAllAccordions(accordionList, 'closeAll');
+              updateToggle(allToggleButtons, 'closeAll');
+              allExpanded = false;
+            } else {
+              toggleAllAccordions(accordionList, 'openAll');
+              updateToggle(allToggleButtons, 'openAll');
+              allExpanded = true;
+            }
+            toggleButton.scrollIntoView(true);
+          });
+        });
       }
-      toggleButton.scrollIntoView(true);
-    });
-  });
-}
 
-const searchQuery = new URLSearchParams(window.location.search);
-const params = Object.fromEntries(searchQuery.entries());
+      const searchQuery = new URLSearchParams(window.location.search);
+      const params = Object.fromEntries(searchQuery.entries());
 
-function toggleAccordionFromSearch() {
-  const searchTerm = params.search.toLowerCase();
+      function toggleAccordionFromSearch() {
+        const searchTerm = params.search.toLowerCase();
 
-  accordionList.forEach((accordion) => {
-    if (accordion.textContent.toLowerCase().includes(searchTerm)) {
-      accordion.setAttribute('open', '');
-    }
-  });
-}
+        accordionList.forEach((accordion) => {
+          if (accordion.textContent.toLowerCase().includes(searchTerm)) {
+            accordion.setAttribute('open', '');
+          }
+        });
+      }
 
-if (Object.keys(params).length && Object.prototype.hasOwnProperty.call(params, 'search')) {
-  toggleAccordionFromSearch();
-}
+      if (Object.keys(params).length && Object.prototype.hasOwnProperty.call(params, 'search')) {
+        toggleAccordionFromSearch();
+      }
+    },
+  };
+}(Drupal));

From 0f8499cdb50766b98ced08f8227c1d4dc22be044 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 17:20:51 -0600
Subject: [PATCH 08/54] feat(shs-5693): add drupal behavior to linked cards js

---
 .../js/shared/linked-cards/linked-cards.js    | 76 ++++++++++---------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js b/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
index c14d9758bd..70b6ff7879 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
@@ -1,43 +1,47 @@
-(() => {
-  // find all hb-vertical-card elements
-  const cards = document.querySelectorAll('.hb-vertical-card, .hb-card--date-stacked, .hb-vertical-linked-card');
+(function (Drupal) {
+  Drupal.behaviors.linkedCardsBehavior = {
+    attach(context) {
+      // find all hb-vertical-card elements
+      const cards = context.querySelectorAll('.hb-vertical-card, .hb-card--date-stacked, .hb-vertical-linked-card');
 
-  // Loop through each card
-  cards.forEach((card) => {
-    // Find the main link within each card
-    let mainLink = '';
+      // Loop through each card
+      cards.forEach((card) => {
+        // Find the main link within each card
+        let mainLink = '';
 
-    // Logic for vertical card and date stacked card.
-    if (card.querySelector('.hb-card__title a')) {
-      mainLink = card.querySelector('.hb-card__title a');
-    // Logic for vertical linked card.
-    } else {
-      mainLink = card.querySelector(
-        '.hb-vertical-linked-card__title__link',
-      );
-    }
+        // Logic for vertical card and date stacked card.
+        if (card.querySelector('.hb-card__title a')) {
+          mainLink = card.querySelector('.hb-card__title a');
+          // Logic for vertical linked card.
+        } else {
+          mainLink = card.querySelector(
+            '.hb-vertical-linked-card__title__link',
+          );
+        }
 
-    if (!mainLink) {
-      return;
-    }
+        if (!mainLink) {
+          return;
+        }
 
-    // Add a click event listener to each card
-    function handleClick() {
-      mainLink.click();
-    }
+        // Add a click event listener to each card
+        function handleClick() {
+          mainLink.click();
+        }
 
-    // Add a focus event listener to each main link
-    mainLink.addEventListener('focus', () => {
-      // Add a focus state class to card
-      card.classList.add('is-focused');
-    });
+        // Add a focus event listener to each main link
+        mainLink.addEventListener('focus', () => {
+          // Add a focus state class to card
+          card.classList.add('is-focused');
+        });
 
-    // Add a blur event listener to each main link
-    mainLink.addEventListener('blur', () => {
-      // Remove focus state class from card
-      card.classList.remove('is-focused');
-    });
+        // Add a blur event listener to each main link
+        mainLink.addEventListener('blur', () => {
+          // Remove focus state class from card
+          card.classList.remove('is-focused');
+        });
 
-    card.addEventListener('click', handleClick);
-  });
-})();
+        card.addEventListener('click', handleClick);
+      });
+    },
+  };
+}(Drupal));

From 323290ed2c2e4fb58f324d94bb3f90fcd7a21e85 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 18:07:44 -0600
Subject: [PATCH 09/54] feat(shs-5693): add window variable in js

---
 .../src/js/shared/carousel-slides/carousel-slides-height.js   | 4 ++--
 .../humsci_basic/src/js/shared/equal-height-grid/index.js     | 4 ++--
 .../src/js/shared/navigation/main-menu-nested-toggler.js      | 4 ++--
 .../humsci_basic/src/js/shared/navigation/main-menu-toggle.js | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
index 733438271c..e5a00239da 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
@@ -1,7 +1,7 @@
 // This work below applies uniform height to both the Hero Layered Slider (formerly Carousel),
 // the Hero Gradient Slider paragraph component slides.
 // and the Spotlight Slider.
-(function (Drupal) {
+(function (Drupal, window) {
   Drupal.behaviors.restrictHeightBehavior = {
     attach(context) {
       const slides = context.querySelectorAll('.paragraph--type--hs-carousel, .paragraph--type--hs-gradient-hero-slider, .paragraph--type--hs-sptlght-slder');
@@ -96,4 +96,4 @@
       }
     },
   };
-}(Drupal));
+}(Drupal, window));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
index cb01909fb3..e6c81f1514 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
@@ -1,7 +1,7 @@
 import equalHeightGrid from './equal-height-grid';
 import resetHeightGrid from './reset-height-grid';
 
-(function (Drupal) {
+(function (Drupal, window) {
   Drupal.behaviors.hbStretchVerticalLinkedCards = {
     attach(context) {
       const applyStretchClass = () => {
@@ -62,4 +62,4 @@ import resetHeightGrid from './reset-height-grid';
       });
     },
   };
-}(Drupal));
+}(Drupal, window));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
index cc51e2a309..432c07b883 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
@@ -1,7 +1,7 @@
 import changeNav from './change-nav';
 import togglerHandler from './toggler-handler';
 
-(function (Drupal) {
+(function (Drupal, window) {
   Drupal.behaviors.NestedToggler = {
     attach(context) {
       const togglers = context.querySelectorAll('.hb-nested-toggler');
@@ -64,4 +64,4 @@ import togglerHandler from './toggler-handler';
       }
     },
   };
-}(Drupal));
+}(Drupal, window));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
index ac4a60c61a..2a2489f087 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
@@ -1,6 +1,6 @@
 import changeNav from './change-nav';
 
-(function (Drupal) {
+(function (Drupal, window) {
   Drupal.behaviors.toggleNavigation = {
     attach(context) {
       const menuToggle = context.querySelector('.hb-main-nav__toggle');
@@ -45,4 +45,4 @@ import changeNav from './change-nav';
       }
     },
   };
-}(Drupal));
+}(Drupal, window));

From fe238de46ce4f2402494ac34d16eb355b9fa5e1c Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 18:29:57 -0600
Subject: [PATCH 10/54] feat(shs-5693): add drupal behavior to main content
 fallback js

---
 .../main-content-fallback.js                  | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js b/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
index 5c7b691b3b..19a9f198fb 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
@@ -1,14 +1,18 @@
-(() => {
-  // Return if main content target is found, nothing to do.
-  if (document.querySelector('#main-content')) {
-    return;
-  }
+(function (Drupal) {
+  Drupal.behaviors.addMainContentStart = {
+    attach(context) {
+      // Return if main content target is found, nothing to do.
+      if (context.querySelector('#main-content')) {
+        return;
+      }
 
-  const mainElement = document.querySelector('main');
-  if (mainElement) {
-    mainElement.insertAdjacentHTML(
-      'afterbegin',
-      '<div id="main-content" class="visually-hidden" tabindex="-1">Main content start</div>',
-    );
-  }
-})();
+      const mainElement = context.querySelector('main');
+      if (mainElement) {
+        mainElement.insertAdjacentHTML(
+          'afterbegin',
+          '<div id="main-content" class="visually-hidden" tabindex="-1">Main content start</div>',
+        );
+      }
+    },
+  };
+}(Drupal));

From 9fbfbaa9df68aa15a90e24a0d276cc0e967a4c7e Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 18:33:37 -0600
Subject: [PATCH 11/54] feat(shs-5693): add drupal behavior to main content
 fallback js

---
 .../main-content-fallback.js                  |   2 +-
 .../src/js/shared/megamenu/index.js           | 216 +++++++++---------
 2 files changed, 112 insertions(+), 106 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js b/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
index 19a9f198fb..4e054280d7 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
@@ -1,5 +1,5 @@
 (function (Drupal) {
-  Drupal.behaviors.addMainContentStart = {
+  Drupal.behaviors.addMainContentFallback = {
     attach(context) {
       // Return if main content target is found, nothing to do.
       if (context.querySelector('#main-content')) {
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
index d1600a67de..44bd7534fa 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
@@ -1,107 +1,113 @@
-const menu = document.querySelector('.js-megamenu');
-
-// Because all JS is smashed together instead of using libraries,
-// we need to 'if' all the parent variables we create.
-if (menu) {
-  const menuBtnMobile = document.querySelector('.js-megamenu__mobile-btn');
-  const menuList = menu.querySelector('.js-megamenu__list--main');
-  const menuBtns = menu.querySelectorAll('.js-megamenu__toggle');
-  const mobileNavBreakpoint = 992;
-  let windowWidth = window.innerWidth;
-  let isMobile = windowWidth < mobileNavBreakpoint;
-
-  window.addEventListener('resize', () => {
-    windowWidth = window.innerWidth;
-
-    isMobile = windowWidth <= mobileNavBreakpoint;
-  });
-
-  // Toggle util function for expanded menus
-  const toggleMenu = (btn) => {
-    const list = btn.nextElementSibling;
-
-    list.classList.remove('is-expanded');
-    btn.classList.remove('is-expanded');
-    btn.setAttribute('aria-expanded', 'false');
-  };
-
-  // Closes open submenus if another menu btn is clicked.
-  const closeAllSubmenus = (currentBtn) => {
-    menuBtns.forEach((btn) => {
-      if (btn !== currentBtn) {
-        toggleMenu(btn);
+(function (Drupal, window) {
+  Drupal.behaviors.pageScrollBehavior = {
+    attach(context) {
+      const menu = context.querySelector('.js-megamenu');
+
+      // Because all JS is smashed together instead of using libraries,
+      // we need to 'if' all the parent variables we create.
+      if (menu) {
+        const menuBtnMobile = context.querySelector('.js-megamenu__mobile-btn');
+        const menuList = menu.querySelector('.js-megamenu__list--main');
+        const menuBtns = menu.querySelectorAll('.js-megamenu__toggle');
+        const mobileNavBreakpoint = 992;
+        let windowWidth = window.innerWidth;
+        let isMobile = windowWidth < mobileNavBreakpoint;
+
+        window.addEventListener('resize', () => {
+          windowWidth = window.innerWidth;
+
+          isMobile = windowWidth <= mobileNavBreakpoint;
+        });
+
+        // Toggle util function for expanded menus
+        const toggleMenu = (btn) => {
+          const list = btn.nextElementSibling;
+
+          list.classList.remove('is-expanded');
+          btn.classList.remove('is-expanded');
+          btn.setAttribute('aria-expanded', 'false');
+        };
+
+        // Closes open submenus if another menu btn is clicked.
+        const closeAllSubmenus = (currentBtn) => {
+          menuBtns.forEach((btn) => {
+            if (btn !== currentBtn) {
+              toggleMenu(btn);
+            }
+          });
+        };
+
+        // Closes an open menu if user clicks outside
+        document.body.addEventListener('mousedown', (e) => {
+          const isClickInsideMenu = menu.contains(e.target);
+
+          if (!isClickInsideMenu) {
+            menuBtns.forEach((btn) => {
+              toggleMenu(btn);
+            });
+          }
+        });
+
+        // Toggle aria-[anything] attribute from true / false.
+        const toggleAria = (el, aria) => {
+          let x = el.getAttribute(`aria-${aria}`);
+          if (x === 'true') {
+            x = 'false';
+          } else {
+            x = 'true';
+          }
+          el.setAttribute(`aria-${aria}`, x);
+        };
+
+        // Displays nested child menus on mobile
+        const expandMobileSubmenus = () => {
+          const activeParent = context.querySelector('.js-megamenu__active-trail');
+          // Only expand menu tree if active-trail exists.
+          if (activeParent) {
+            const childMenu = activeParent.nextElementSibling;
+            toggleAria(activeParent, 'expanded');
+            activeParent.classList.add('is-expanded');
+            childMenu.classList.add('is-expanded');
+          }
+        };
+
+        if (menuBtnMobile) {
+          // Toggle nav immediately for JS visitors
+          toggleAria(menuBtnMobile, 'expanded');
+
+          if (isMobile) {
+            expandMobileSubmenus();
+          }
+
+          // Toggle the nav when the the button is clicked
+          menuBtnMobile.addEventListener('click', () => {
+            toggleAria(menuBtnMobile, 'expanded');
+
+            if (menuList) {
+              menuList.classList.toggle('is-active');
+            }
+          });
+        }
+
+        menuBtns.forEach((btn) => {
+          btn.addEventListener('click', (e) => {
+            const currentBtn = e.currentTarget;
+            const menuItem = e.currentTarget.parentElement;
+            const subMenu = menuItem.querySelector(
+              '.js-megamenu__expanded-container',
+            );
+            // We want to only close expanded menus on desktop to mimic current
+            // menu functionality.
+            if (!isMobile) {
+              closeAllSubmenus(currentBtn);
+            }
+            toggleAria(currentBtn, 'expanded');
+
+            btn.classList.toggle('is-expanded');
+            subMenu.classList.toggle('is-expanded');
+          });
+        });
       }
-    });
-  };
-
-  // Closes an open menu if user clicks outside
-  document.body.addEventListener('mousedown', (e) => {
-    const isClickInsideMenu = menu.contains(e.target);
-
-    if (!isClickInsideMenu) {
-      menuBtns.forEach((btn) => {
-        toggleMenu(btn);
-      });
-    }
-  });
-
-  // Toggle aria-[anything] attribute from true / false.
-  const toggleAria = (el, aria) => {
-    let x = el.getAttribute(`aria-${aria}`);
-    if (x === 'true') {
-      x = 'false';
-    } else {
-      x = 'true';
-    }
-    el.setAttribute(`aria-${aria}`, x);
+    },
   };
-
-  // Displays nested child menus on mobile
-  const expandMobileSubmenus = () => {
-    const activeParent = document.querySelector('.js-megamenu__active-trail');
-    // Only expand menu tree if active-trail exists.
-    if (activeParent) {
-      const childMenu = activeParent.nextElementSibling;
-      toggleAria(activeParent, 'expanded');
-      activeParent.classList.add('is-expanded');
-      childMenu.classList.add('is-expanded');
-    }
-  };
-
-  if (menuBtnMobile) {
-    // Toggle nav immediately for JS visitors
-    toggleAria(menuBtnMobile, 'expanded');
-
-    if (isMobile) {
-      expandMobileSubmenus();
-    }
-
-    // Toggle the nav when the the button is clicked
-    menuBtnMobile.addEventListener('click', () => {
-      toggleAria(menuBtnMobile, 'expanded');
-
-      if (menuList) {
-        menuList.classList.toggle('is-active');
-      }
-    });
-  }
-
-  menuBtns.forEach((btn) => {
-    btn.addEventListener('click', (e) => {
-      const currentBtn = e.currentTarget;
-      const menuItem = e.currentTarget.parentElement;
-      const subMenu = menuItem.querySelector(
-        '.js-megamenu__expanded-container',
-      );
-      // We want to only close expanded menus on desktop to mimic current
-      // menu functionality.
-      if (!isMobile) {
-        closeAllSubmenus(currentBtn);
-      }
-      toggleAria(currentBtn, 'expanded');
-
-      btn.classList.toggle('is-expanded');
-      subMenu.classList.toggle('is-expanded');
-    });
-  });
-}
+}(Drupal, window));

From 00de244d98d2115d257ac36ee5b995914fbd6dd7 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 18:34:09 -0600
Subject: [PATCH 12/54] feat(shs-5693): add drupal behavior to mega menu js

---
 .../themes/humsci/humsci_basic/src/js/shared/megamenu/index.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
index 44bd7534fa..1abea115c0 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
@@ -1,5 +1,5 @@
 (function (Drupal, window) {
-  Drupal.behaviors.pageScrollBehavior = {
+  Drupal.behaviors.megaMenuBehavior = {
     attach(context) {
       const menu = context.querySelector('.js-megamenu');
 

From 3f5fe06aabedff0bc135f0914696e2f781ee447e Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Wed, 27 Nov 2024 10:28:38 -0600
Subject: [PATCH 13/54] feat(shs-5693): add drupal behavior to editoria11y js

---
 .../src/js/shared/editoria11y/editoria11y.js  | 73 ++++++++++---------
 1 file changed, 40 insertions(+), 33 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/editoria11y/editoria11y.js b/docroot/themes/humsci/humsci_basic/src/js/shared/editoria11y/editoria11y.js
index 454fc293ea..5f53f8ba77 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/editoria11y/editoria11y.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/editoria11y/editoria11y.js
@@ -1,39 +1,46 @@
-/* global ed11yLang, ed11yOnce */
-window.editoria11yOptionsOverride = true;
-window.editoria11yOptions = (options) => {
-  // Change the default button text for the Heading Outline tab.
-  if (ed11yLang && ed11yLang.en) {
-    ed11yLang.en.buttonOutlineContent = 'Heading Outline';
-  }
-  return options;
-};
+(function (Drupal) {
+  Drupal.behaviors.editoria11yOptionsOverride = {
+    // eslint-disable-next-line no-unused-vars
+    attach(context) {
+      /* global ed11yLang, ed11yOnce */
+      window.editoria11yOptionsOverride = true;
+      window.editoria11yOptions = (options) => {
+        // Change the default button text for the Heading Outline tab.
+        if (ed11yLang && ed11yLang.en) {
+          ed11yLang.en.buttonOutlineContent = 'Heading Outline';
+        }
+        return options;
+      };
 
-window.addEventListener('load', () => {
-  // If the editoria11y is not loaded, we don't need to do anything.
-  if (typeof ed11yOnce === 'undefined' || !ed11yOnce) {
-    return;
-  }
+      window.addEventListener('load', () => {
+        // If the editoria11y is not loaded, we don't need to do anything.
+        if (typeof ed11yOnce === 'undefined' || !ed11yOnce) {
+          return;
+        }
 
-  // Editoria11y element is added to the DOM after the load event, we need to
-  // observe the body element for changes.
-  const observer = new MutationObserver((mutationList) => {
-    mutationList.forEach((mutation) => {
-      if (mutation.addedNodes.length && mutation.addedNodes[0].nodeName === 'ED11Y-ELEMENT-PANEL') {
-        // Once we get the element, we update the styles to make the alert button text black.
-        const { shadowRoot } = mutation.addedNodes[0];
-        if (shadowRoot) {
-          const style = document.createElement('style');
-          style.textContent = `
+        // Editoria11y element is added to the DOM after the load event, we need to
+        // observe the body element for changes.
+        const observer = new MutationObserver((mutationList) => {
+          mutationList.forEach((mutation) => {
+            if (mutation.addedNodes.length && mutation.addedNodes[0].nodeName === 'ED11Y-ELEMENT-PANEL') {
+              // Once we get the element, we update the styles to make the alert button text black.
+              const { shadowRoot } = mutation.addedNodes[0];
+              if (shadowRoot) {
+                const style = document.createElement('style');
+                style.textContent = `
             .ed11y-shut.ed11y-errors #ed11y-toggle {
               color: #000000;
             }
           `;
-          shadowRoot.appendChild(style);
-        }
-      }
-    });
-  });
-  observer.observe(document.body, {
-    childList: true,
-  });
-});
+                shadowRoot.appendChild(style);
+              }
+            }
+          });
+        });
+        observer.observe(document.body, {
+          childList: true,
+        });
+      });
+    },
+  };
+}(Drupal));

From e3c1552114b150e6f91045839fa2ba8aca3192df Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Wed, 27 Nov 2024 10:59:04 -0600
Subject: [PATCH 14/54] feat(shs-5693): remove commented code

---
 .../src/js/shared/equal-height-grid/equal-height-grid.js     | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/equal-height-grid.js b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/equal-height-grid.js
index 68e41a2ddc..8342ffd1ca 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/equal-height-grid.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/equal-height-grid.js
@@ -5,11 +5,6 @@ const equalHeightGrid = (elements) => {
     // Create array with all of the heights of each element
     const elementHeights = Array.prototype.map.call(elements, (el) => el.scrollHeight);
 
-    // Create array with _unique_ height values
-    // const uniqueHeights = elementHeights.filter((height, index, array) => {
-    //   return array.indexOf(height) == index;
-    // });
-
     return new Promise((resolve) => {
       const maxHeight = Math.max.apply(null, elementHeights);
       const tallestElementIndex = elementHeights.indexOf(maxHeight);

From edf990e21d3b3b06b0b09e1e41310f175f7f26be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Wed, 27 Nov 2024 14:11:44 -0600
Subject: [PATCH 15/54] feat(shs-5963): update webpack configuration to allow
 compilation of indiviual JS files

---
 .gitignore                                    |  4 +-
 .../humsci/humsci_basic/webpack.config.js     | 42 ++++++++++++++++---
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 117a3a4530..5aa3e4c368 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,8 +62,8 @@ docroot/themes/humsci/humsci_colorful/css/humsci_colorful-ckeditor.css
 docroot/themes/humsci/humsci_traditional/css/humsci_traditional-ckeditor.css
 docroot/themes/humsci/humsci_colorful/css/humsci_colorful-preview.css
 docroot/themes/humsci/humsci_traditional/css/humsci_traditional-preview.css
-docroot/themes/humsci/humsci_traditional/js/index.js
-docroot/themes/humsci/humsci_colorful/js/index.js
+docroot/themes/humsci/humsci_traditional/js
+docroot/themes/humsci/humsci_colorful/js
 # Ignore build artifacts
 deployment_identifier
 /deploy
diff --git a/docroot/themes/humsci/humsci_basic/webpack.config.js b/docroot/themes/humsci/humsci_basic/webpack.config.js
index df58480b11..b8cdc9c3b2 100644
--- a/docroot/themes/humsci/humsci_basic/webpack.config.js
+++ b/docroot/themes/humsci/humsci_basic/webpack.config.js
@@ -2,17 +2,49 @@
 const path = require('path');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
-const srcDir = path.resolve(__dirname, 'src/');
+const srcDir = path.resolve(__dirname, 'src/js/');
+
+// Shared JS files. Used in both traditional and colorful themes.
+const shared = {
+  accordion: 'shared/accordion/accordion-toggle-all.js',
+  addtocal: 'shared/addtocal/addtocal.js',
+};
+
+// Colorful and traditional theme specific JS files.
+const colorful = {};
+const traditional = {};
 
 module.exports = {
   mode: 'production',
-  entry: {
-    humsci_colorful: `${srcDir}/js/colorful/colorful.js`,
-    humsci_traditional: `${srcDir}/js/traditional/traditional.js`,
+  entry() {
+    const entries = {};
+    // Shared files have two entries, one for each theme.
+    Object.keys(shared).forEach((key) => {
+      const file = shared[key];
+      entries[`humsci_traditional.${key}`] = path.resolve(srcDir, file);
+      entries[`humsci_colorful.${key}`] = path.resolve(srcDir, file);
+    });
+
+    // Traditional theme specific files.
+    Object.keys(traditional).forEach((key) => {
+      const file = shared[key];
+      entries[`humsci_traditional.${key}`] = path.resolve(srcDir, file);
+    });
+
+    // Colorful theme specific files.
+    Object.keys(colorful).forEach((key) => {
+      const file = shared[key];
+      entries[`humsci_colorful.${key}`] = path.resolve(srcDir, file);
+    });
+
+    return entries;
   },
   plugins: [new ESLintPlugin()],
   output: {
-    filename: (pathData) => `${pathData.chunk.name}/js/index.js`,
+    filename(pathData) {
+      const [theme, filename] = pathData.chunk.name.split('.');
+      return `${theme}/js/${filename}.js`;
+    },
     path: path.resolve(__dirname, '../'),
   },
   module: {

From 70ab7c2c3bd685fadf9fd6fd430cac37614964d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Wed, 27 Nov 2024 14:31:58 -0600
Subject: [PATCH 16/54] fix(shs-5963): change how theme shared js is handled

---
 .gitignore                                           | 1 +
 docroot/themes/humsci/humsci_basic/webpack.config.js | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5aa3e4c368..2582940bad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,6 +62,7 @@ docroot/themes/humsci/humsci_colorful/css/humsci_colorful-ckeditor.css
 docroot/themes/humsci/humsci_traditional/css/humsci_traditional-ckeditor.css
 docroot/themes/humsci/humsci_colorful/css/humsci_colorful-preview.css
 docroot/themes/humsci/humsci_traditional/css/humsci_traditional-preview.css
+docroot/themes/humsci/humsci_basic/dist/js
 docroot/themes/humsci/humsci_traditional/js
 docroot/themes/humsci/humsci_colorful/js
 # Ignore build artifacts
diff --git a/docroot/themes/humsci/humsci_basic/webpack.config.js b/docroot/themes/humsci/humsci_basic/webpack.config.js
index b8cdc9c3b2..aa4e5689fe 100644
--- a/docroot/themes/humsci/humsci_basic/webpack.config.js
+++ b/docroot/themes/humsci/humsci_basic/webpack.config.js
@@ -21,8 +21,7 @@ module.exports = {
     // Shared files have two entries, one for each theme.
     Object.keys(shared).forEach((key) => {
       const file = shared[key];
-      entries[`humsci_traditional.${key}`] = path.resolve(srcDir, file);
-      entries[`humsci_colorful.${key}`] = path.resolve(srcDir, file);
+      entries[`shared.${key}`] = path.resolve(srcDir, file);
     });
 
     // Traditional theme specific files.
@@ -43,9 +42,10 @@ module.exports = {
   output: {
     filename(pathData) {
       const [theme, filename] = pathData.chunk.name.split('.');
-      return `${theme}/js/${filename}.js`;
+      const themePath = theme === 'shared' ? 'dist/js' : `../${theme}/js`;
+      return `${themePath}/${filename}.js`;
     },
-    path: path.resolve(__dirname, '../'),
+    path: path.resolve(__dirname, '.'),
   },
   module: {
     rules: [

From 4e02ad3164d9d91f0153c0589dfb2af0ffb3eaf4 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Thu, 28 Nov 2024 14:33:23 -0600
Subject: [PATCH 17/54] feat(shs-5693): add shared files in webpack and
 attached files in menu

---
 .../humsci/humsci_basic/humsci_basic.info.yml |  6 ------
 .../humsci_basic/humsci_basic.libraries.yml   | 12 ++++++++++-
 .../templates/menus/menu--main.html.twig      |  2 ++
 .../menus/menu--menu-block--main.html.twig    |  2 ++
 .../humsci/humsci_basic/webpack.config.js     | 20 +++++++++++++++++++
 .../humsci_colorful.libraries.yml             |  2 --
 .../humsci_traditional.libraries.yml          |  2 --
 7 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
index 7958d3d5b3..e5348657f4 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
@@ -27,9 +27,3 @@ libraries-override:
     css:
       layout:
         css/three-column-w-image.css: false
-
-#  we_megamenu/form.we-mega-menu-frontend:
-#    css:
-#      theme:
-#        assets/css/we_megamenu_backend.css: false
-#        assets/includes/bootstrap/css/bootstrap.min.css: false
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 0b4e3e3428..10f6f22ae3 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -1,3 +1,13 @@
+mainmenu:
+  js:
+    dist/js/mainmenutoggle.js: {}
+    dist/js/mainmenunestedtoggler.js: {}
+    dist/js/collapsemainmenu.js: {}
+
 search:
   js:
-    src/js/shared/search/search-expand.js: {}
+    dist/js/search.js: {}
+
+secondarymenu:
+  js:
+    dist/js/secondarytoggler.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig b/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
index f0b2bb1d05..470cbd061a 100644
--- a/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
@@ -15,6 +15,8 @@
  */
 #}
 
+{{ attach_library('humsci_basic/mainmenu') }}
+
 {% if use_hs_megamenu %}
   {# Twig megamenu attributes #}
   {% set attributes = attributes.addClass(['megamenu', 'js-megamenu']) %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/menus/menu--menu-block--main.html.twig b/docroot/themes/humsci/humsci_basic/templates/menus/menu--menu-block--main.html.twig
index c60ebe3128..5feaa5503f 100644
--- a/docroot/themes/humsci/humsci_basic/templates/menus/menu--menu-block--main.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/menus/menu--menu-block--main.html.twig
@@ -2,6 +2,8 @@
 {# The main and only way it is used on the site now is to create secondary nav #}
 {%- import "@humsci_basic/menus/macros/secondary-nav-menu.twig" as menus -%}
 
+{{ attach_library('humsci_basic/secondarymenu') }}
+
 {% apply spaceless %}
   {% if items is iterable %}
     {{ menus.secondary_nav_menu(items, 1, 'hb-secondary-nav') }}
diff --git a/docroot/themes/humsci/humsci_basic/webpack.config.js b/docroot/themes/humsci/humsci_basic/webpack.config.js
index aa4e5689fe..a2ec9ce952 100644
--- a/docroot/themes/humsci/humsci_basic/webpack.config.js
+++ b/docroot/themes/humsci/humsci_basic/webpack.config.js
@@ -8,6 +8,26 @@ const srcDir = path.resolve(__dirname, 'src/js/');
 const shared = {
   accordion: 'shared/accordion/accordion-toggle-all.js',
   addtocal: 'shared/addtocal/addtocal.js',
+  pagescroll: 'shared/animation/page-scroll.js',
+  carouselslidesheight: 'shared/carousel-slides/carousel-slides-height.js',
+  editoria11y: 'shared/editoria11y/editoria11y.js',
+  equalheightgrid: 'shared/equal-height-grid/index.js',
+  linkedcards: 'shared/linked-cards/linked-cards.js',
+  maincontentfallback: 'shared/main-content-fallback/main-content-fallback.js',
+  videowithcaption: 'shared/media/video-with-caption.js',
+  megamenu: 'shared/megamenu/index.js',
+  mainmenutoggle: 'shared/navigation/main-menu-toggle.js',
+  mainmenunestedtoggler: 'shared/navigation/main-menu-nested-toggler.js',
+  collapsemainmenu: 'shared/navigation/collapse-main-menu.js',
+  secondarytoggler: 'shared/navigation/secondary-toggler.js',
+  colorbox: 'shared/photo-album/colorbox.js',
+  preferedreducedmotion: 'shared/prefered-reduced-motion/prefered-reduced-motion.js',
+  search: 'shared/search/search-expand.js',
+  tablescope: 'shared/tables/scope.js',
+  tablepattern: 'shared/tables/table-pattern.js',
+  tablewrap: 'shared/tables/wrap.js',
+  timeline: 'shared/timeline/expand-collapse-timeline.js',
+  verticaltabs: 'shared/vertical-tabs/vertical-tabs.js',
 };
 
 // Colorful and traditional theme specific JS files.
diff --git a/docroot/themes/humsci/humsci_colorful/humsci_colorful.libraries.yml b/docroot/themes/humsci/humsci_colorful/humsci_colorful.libraries.yml
index 2cf48f35a9..8ff3369e4c 100644
--- a/docroot/themes/humsci/humsci_colorful/humsci_colorful.libraries.yml
+++ b/docroot/themes/humsci/humsci_colorful/humsci_colorful.libraries.yml
@@ -2,8 +2,6 @@ base:
   css:
     theme:
       css/humsci_colorful.css: {}
-  js:
-    js/index.js: {}
   dependencies:
     - core/modernizr
 
diff --git a/docroot/themes/humsci/humsci_traditional/humsci_traditional.libraries.yml b/docroot/themes/humsci/humsci_traditional/humsci_traditional.libraries.yml
index f762992c4b..ff6597f2b0 100644
--- a/docroot/themes/humsci/humsci_traditional/humsci_traditional.libraries.yml
+++ b/docroot/themes/humsci/humsci_traditional/humsci_traditional.libraries.yml
@@ -2,8 +2,6 @@ base:
   css:
     theme:
       css/humsci_traditional.css: {}
-  js:
-    js/index.js: {}
   dependencies:
     - core/modernizr
 

From 75a5bfa05592bc712c93036d8ae07d8f3dbb760b Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Thu, 28 Nov 2024 17:08:48 -0600
Subject: [PATCH 18/54] feat(shs-5693): attached files in accordion, heros,
 spotlights and text area

---
 .../themes/humsci/humsci_basic/humsci_basic.libraries.yml | 8 ++++++++
 .../components/paragraph--hs-text-area.html.twig          | 3 +++
 .../templates/components/pattern-accordion.html.twig      | 3 +++
 .../templates/components/pattern-gradient-hero.html.twig  | 4 ++++
 .../components/pattern-hero-text-overlay.html.twig        | 3 +++
 .../templates/components/pattern-spotlight.html.twig      | 3 +++
 docroot/themes/humsci/humsci_basic/webpack.config.js      | 2 +-
 7 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-accordion.html.twig
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 10f6f22ae3..41060bd1f1 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -1,9 +1,17 @@
+accordion:
+  js:
+    dist/js/accordion.js: {}
+
 mainmenu:
   js:
     dist/js/mainmenutoggle.js: {}
     dist/js/mainmenunestedtoggler.js: {}
     dist/js/collapsemainmenu.js: {}
 
+pagescrollanimations:
+  js:
+    dist/js/pagescrollanimations.js: {}
+
 search:
   js:
     dist/js/search.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig
new file mode 100644
index 0000000000..65d0cee95c
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig
@@ -0,0 +1,3 @@
+{{ attach_library('humsci_basic/pagescrollanimations') }}
+
+{% include '@humsci_basic/components/paragraph.html.twig' %}
\ No newline at end of file
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-accordion.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-accordion.html.twig
new file mode 100644
index 0000000000..15eb4835ec
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-accordion.html.twig
@@ -0,0 +1,3 @@
+{{ attach_library('humsci_basic/accordion') }}
+
+{% include '@hs_layouts/accordion/accordion.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
new file mode 100644
index 0000000000..540526af94
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
@@ -0,0 +1,4 @@
+{{ attach_library('humsci_basic/pagescrollanimations') }}
+
+{% include '@hs_layouts/gradient-hero/gradient-hero.html.twig' %}
+
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
new file mode 100644
index 0000000000..87a13f6a1c
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
@@ -0,0 +1,3 @@
+{{ attach_library('humsci_basic/pagescrollanimations') }}
+
+{% include '@hs_layouts/hero-text-overlay/hero-text-overlay.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
new file mode 100644
index 0000000000..cc44f318df
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
@@ -0,0 +1,3 @@
+{{ attach_library('humsci_basic/pagescrollanimations') }}
+
+{% include '@hs_layouts/spotlight/spotlight.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/webpack.config.js b/docroot/themes/humsci/humsci_basic/webpack.config.js
index a2ec9ce952..27fab65b84 100644
--- a/docroot/themes/humsci/humsci_basic/webpack.config.js
+++ b/docroot/themes/humsci/humsci_basic/webpack.config.js
@@ -8,7 +8,7 @@ const srcDir = path.resolve(__dirname, 'src/js/');
 const shared = {
   accordion: 'shared/accordion/accordion-toggle-all.js',
   addtocal: 'shared/addtocal/addtocal.js',
-  pagescroll: 'shared/animation/page-scroll.js',
+  pagescrollanimations: 'shared/animation/page-scroll.js',
   carouselslidesheight: 'shared/carousel-slides/carousel-slides-height.js',
   editoria11y: 'shared/editoria11y/editoria11y.js',
   equalheightgrid: 'shared/equal-height-grid/index.js',

From ccba6d684bfaaae5a534d2cff76fa251fe8d187b Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 29 Nov 2024 17:17:58 -0600
Subject: [PATCH 19/54] feat(shs-5693): attached files in heros and spotlights

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 .../templates/components/pattern-gradient-hero.html.twig      | 1 +
 .../templates/components/pattern-hero-text-overlay.html.twig  | 1 +
 .../templates/components/pattern-spotlight.html.twig          | 2 +-
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 41060bd1f1..f60ec0782d 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -2,6 +2,10 @@ accordion:
   js:
     dist/js/accordion.js: {}
 
+carouselslidesheight:
+  js:
+    dist/js/carouselslidesheight.js: {}
+
 mainmenu:
   js:
     dist/js/mainmenutoggle.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
index 540526af94..99414cd74c 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
@@ -1,4 +1,5 @@
 {{ attach_library('humsci_basic/pagescrollanimations') }}
+{{ attach_library('humsci_basic/carouselslidesheight') }}
 
 {% include '@hs_layouts/gradient-hero/gradient-hero.html.twig' %}
 
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
index 87a13f6a1c..b4bb5267b6 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
@@ -1,3 +1,4 @@
 {{ attach_library('humsci_basic/pagescrollanimations') }}
+{{ attach_library('humsci_basic/carouselslidesheight') }}
 
 {% include '@hs_layouts/hero-text-overlay/hero-text-overlay.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
index cc44f318df..d9cdab36ae 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
@@ -1,3 +1,3 @@
-{{ attach_library('humsci_basic/pagescrollanimations') }}
+{{ attach_library('humsci_basic/carouselslidesheight') }}
 
 {% include '@hs_layouts/spotlight/spotlight.html.twig' %}

From 51d05f8735f1106c8ee7297df34bc2e8ed054c82 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 29 Nov 2024 18:24:17 -0600
Subject: [PATCH 20/54] feat(shs-5693): attached files for tables in wysiwyg
 and views

---
 .../humsci/humsci_basic/humsci_basic.libraries.yml     |  4 ++++
 docroot/themes/humsci/humsci_basic/humsci_basic.theme  | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index f60ec0782d..1d6d66a9fb 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -23,3 +23,7 @@ search:
 secondarymenu:
   js:
     dist/js/secondarytoggler.js: {}
+
+tablewrap:
+  js:
+    dist/js/tablewrap.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index d1faba0402..b232c0a674 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -220,6 +220,7 @@ function humsci_basic_preprocess_we_megamenu_frontend(&$vars) {
  */
 function humsci_basic_preprocess_views_view(&$variables) {
   $view = $variables['view'];
+  $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
 
   switch ($view->id()) {
     case 'hs_default_search':
@@ -250,3 +251,12 @@ function humsci_basic_preprocess_paragraph(&$variables) {
   }
   $variables['content']['field_hs_view'][0]['#heading_tag'] = $heading_tag;
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function humsci_basic_preprocess_field(&$variables) {
+  if ($variables['field_name'] == 'field_hs_text_area') {
+    $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
+  }
+}

From 9b51bc6819a9f8eaaec6e7a38cb7c38483237303 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 29 Nov 2024 18:28:55 -0600
Subject: [PATCH 21/54] feat(shs-5693): attached files for tables in wysiwyg

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 docroot/themes/humsci/humsci_basic/humsci_basic.theme         | 1 +
 2 files changed, 5 insertions(+)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 1d6d66a9fb..5b88efff14 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -24,6 +24,10 @@ secondarymenu:
   js:
     dist/js/secondarytoggler.js: {}
 
+tablescope:
+  js:
+    dist/js/tablescope.js: {}
+
 tablewrap:
   js:
     dist/js/tablewrap.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index b232c0a674..782afc0c16 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -258,5 +258,6 @@ function humsci_basic_preprocess_paragraph(&$variables) {
 function humsci_basic_preprocess_field(&$variables) {
   if ($variables['field_name'] == 'field_hs_text_area') {
     $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
+    $variables['#attached']['library'][] = 'humsci_basic/tablescope';
   }
 }

From 3991f051905ce27ddd82414298527af4b0c26552 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 29 Nov 2024 18:30:43 -0600
Subject: [PATCH 22/54] feat(shs-5693): attached files for tables in views

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 docroot/themes/humsci/humsci_basic/humsci_basic.theme         | 1 +
 2 files changed, 5 insertions(+)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 5b88efff14..a39a5b4f21 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -24,6 +24,10 @@ secondarymenu:
   js:
     dist/js/secondarytoggler.js: {}
 
+tablepattern:
+  js:
+    dist/js/tablepattern.js: {}
+
 tablescope:
   js:
     dist/js/tablescope.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index 782afc0c16..7258828d31 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -221,6 +221,7 @@ function humsci_basic_preprocess_we_megamenu_frontend(&$vars) {
 function humsci_basic_preprocess_views_view(&$variables) {
   $view = $variables['view'];
   $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
+  $variables['#attached']['library'][] = 'humsci_basic/tablepattern';
 
   switch ($view->id()) {
     case 'hs_default_search':

From 4b0b16b73ca8d2d69381bbdcb7d68cb3bfa5eedb Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 29 Nov 2024 18:52:50 -0600
Subject: [PATCH 23/54] feat(shs-5693): attached files for timeline

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 .../src/js/shared/timeline/expand-collapse-timeline.js        | 2 +-
 .../templates/components/pattern-timeline.html.twig           | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-timeline.html.twig

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index a39a5b4f21..e6e3b2aeb0 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -35,3 +35,7 @@ tablescope:
 tablewrap:
   js:
     dist/js/tablewrap.js: {}
+
+timeline:
+  js:
+    dist/js/timeline.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
index e5bf02a5f6..fb67d8524c 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
@@ -2,7 +2,7 @@
 // Find when a timeline has been set to collapsed so that we can
 // adjust the default attribute values
 (function (Drupal) {
-  Drupal.behaviors.pageScrollBehavior = {
+  Drupal.behaviors.timelineCollapseBehavior = {
     attach(context) {
       const timelineCollapsed = context.querySelectorAll('.hb-timeline__collapsed');
 
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-timeline.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-timeline.html.twig
new file mode 100644
index 0000000000..4bf51fd054
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-timeline.html.twig
@@ -0,0 +1,3 @@
+{{ attach_library('humsci_basic/timeline') }}
+
+{% include '@hs_layouts/timeline/timeline.html.twig' %}

From 1ec4c6696fbd2c71165a62e443bbc973b2d85b66 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Fri, 29 Nov 2024 19:00:03 -0600
Subject: [PATCH 24/54] feat(shs-5693): attached files for equal height in
 vertical linked cards

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 .../templates/components/paragraph--hs-collection.html.twig   | 2 ++
 .../components/paragraph--hs-priv-collection.html.twig        | 2 ++
 3 files changed, 8 insertions(+)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index e6e3b2aeb0..128d92bdcb 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -6,6 +6,10 @@ carouselslidesheight:
   js:
     dist/js/carouselslidesheight.js: {}
 
+equalheightgrid:
+  js:
+    dist/js/equalheightgrid.js: {}
+
 mainmenu:
   js:
     dist/js/mainmenutoggle.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-collection.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-collection.html.twig
index a7d2bcd1fb..ba0e754f20 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-collection.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-collection.html.twig
@@ -38,6 +38,8 @@
  * @ingroup themeable
  */
 #}
+{{ attach_library('humsci_basic/equalheightgrid') }}
+
 {% set raised_cards = false %}
 {% if paragraph.field_raised_cards.value == true %}
    {% set raised_cards = true %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-priv-collection.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-priv-collection.html.twig
index 51c1c4eb7e..d6db986c83 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-priv-collection.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-priv-collection.html.twig
@@ -38,6 +38,8 @@
  * @ingroup themeable
  */
 #}
+{{ attach_library('humsci_basic/equalheightgrid') }}
+
 {%
   set classes = [
     'paragraph',

From 786f38ee68ce7cc4001d9e07deb63bde31902d87 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 11:04:28 -0600
Subject: [PATCH 25/54] feat(shs-5693): attached file for linked cards

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 .../components/pattern-date-stacked-vertical-card.html.twig   | 3 +++
 .../templates/components/pattern-gradient-hero.html.twig      | 1 -
 .../templates/components/pattern-vertical-card.html.twig      | 3 +++
 .../templates/components/pattern-vertical-link-card.html.twig | 4 ++++
 5 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-date-stacked-vertical-card.html.twig
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-card.html.twig
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-link-card.html.twig

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 128d92bdcb..0414425fe6 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -10,6 +10,10 @@ equalheightgrid:
   js:
     dist/js/equalheightgrid.js: {}
 
+linkedcards:
+  js:
+    dist/js/linkedcards.js: {}
+
 mainmenu:
   js:
     dist/js/mainmenutoggle.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-date-stacked-vertical-card.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-date-stacked-vertical-card.html.twig
new file mode 100644
index 0000000000..4fd3af72ef
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-date-stacked-vertical-card.html.twig
@@ -0,0 +1,3 @@
+{{ attach_library('humsci_basic/linkedcards') }}
+
+{% include '@hs_layouts/date-stacked-vertical-card/date-stacked-vertical-card.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
index 99414cd74c..989c9cf059 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
@@ -2,4 +2,3 @@
 {{ attach_library('humsci_basic/carouselslidesheight') }}
 
 {% include '@hs_layouts/gradient-hero/gradient-hero.html.twig' %}
-
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-card.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-card.html.twig
new file mode 100644
index 0000000000..45013a7781
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-card.html.twig
@@ -0,0 +1,3 @@
+{{ attach_library('humsci_basic/linkedcards') }}
+
+{% include '@hs_layouts/vertical-card/vertical-card.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-link-card.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-link-card.html.twig
new file mode 100644
index 0000000000..fa5cf4e40b
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-link-card.html.twig
@@ -0,0 +1,4 @@
+{{ attach_library('humsci_basic/linkedcards') }}
+
+{% include '@hs_layouts/vertical-link-card/vertical-link-card.html.twig' %}
+

From 25f83278c77b878eed832f69b4c0825f55fa7074 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 12:19:03 -0600
Subject: [PATCH 26/54] feat(shs-5693): attached file for main content fallback

---
 docroot/themes/humsci/humsci_basic/humsci_basic.info.yml      | 3 ++-
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
index e5348657f4..cfef7c1133 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
@@ -4,7 +4,8 @@ description: A base for visually distinctive HumSci themes.
 package: 'Humanities & Sciences'
 core_version_requirement: ^9.4 || ^10
 'base theme': stable9
-# libraries: Libraries are loaded via sub-themes
+libraries:
+  - humsci_basic/maincontentfallback
 
 regions:
   page_top: 'Page top'
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 0414425fe6..561f8b555a 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -14,6 +14,10 @@ linkedcards:
   js:
     dist/js/linkedcards.js: {}
 
+maincontentfallback:
+  js:
+    dist/js/maincontentfallback.js: {}
+
 mainmenu:
   js:
     dist/js/mainmenutoggle.js: {}

From aff9c2a85e2facb8107963112199ea3b78cbbd4b Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 14:18:20 -0600
Subject: [PATCH 27/54] feat(shs-5693): attached file for mega menu

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 561f8b555a..c4ba5c2d7c 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -23,6 +23,7 @@ mainmenu:
     dist/js/mainmenutoggle.js: {}
     dist/js/mainmenunestedtoggler.js: {}
     dist/js/collapsemainmenu.js: {}
+    dist/js/megamenu.js: {}
 
 pagescrollanimations:
   js:

From 68da5c822ddfc4e706112e192ed01fcf70696c25 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 14:20:42 -0600
Subject: [PATCH 28/54] feat(shs-5693): attached file for editiora11y

---
 docroot/themes/humsci/humsci_basic/humsci_basic.info.yml      | 1 +
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
index cfef7c1133..f6b89b4e86 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
@@ -6,6 +6,7 @@ core_version_requirement: ^9.4 || ^10
 'base theme': stable9
 libraries:
   - humsci_basic/maincontentfallback
+  - humsci_basic/editoria11y
 
 regions:
   page_top: 'Page top'
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index c4ba5c2d7c..9175aeb37e 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -6,6 +6,10 @@ carouselslidesheight:
   js:
     dist/js/carouselslidesheight.js: {}
 
+editoria11y:
+  js:
+    dist/js/editoria11y.js: {}
+
 equalheightgrid:
   js:
     dist/js/equalheightgrid.js: {}

From e1a7c7c8d0da62474566be781d06d0cd75d660e9 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 15:49:38 -0600
Subject: [PATCH 29/54] feat(shs-5693): attached file for prefered reduced
 motion and add to cal

---
 .../humsci/humsci_basic/humsci_basic.libraries.yml    |  8 ++++++++
 docroot/themes/humsci/humsci_basic/humsci_basic.theme | 11 +++++++++++
 .../prefered-reduced-motion.js                        |  2 +-
 .../components/pattern-gradient-hero.html.twig        |  1 +
 .../components/pattern-hero-text-overlay.html.twig    |  1 +
 .../templates/components/pattern-spotlight.html.twig  |  1 +
 6 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 9175aeb37e..a8a2b3720d 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -2,6 +2,10 @@ accordion:
   js:
     dist/js/accordion.js: {}
 
+addtocal:
+  js:
+    dist/js/addtocal.js: {}
+
 carouselslidesheight:
   js:
     dist/js/carouselslidesheight.js: {}
@@ -33,6 +37,10 @@ pagescrollanimations:
   js:
     dist/js/pagescrollanimations.js: {}
 
+preferedreducedmotion:
+  js:
+    dist/js/preferedreducedmotion.js: {}
+
 search:
   js:
     dist/js/search.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index 7258828d31..4a85570fbf 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -235,6 +235,10 @@ function humsci_basic_preprocess_views_view(&$variables) {
  */
 function humsci_basic_preprocess_paragraph(&$variables) {
   $paragraph = $variables['paragraph'];
+  // Attach library to stanford gallery
+  if ($paragraph->bundle() == 'stanford_gallery') {
+    $variables['#attached']['library'][] = 'humsci_basic/preferedreducedmotion';
+  }
   if ($paragraph->bundle() != 'hs_view') {
     return NULL;
   }
@@ -262,3 +266,10 @@ function humsci_basic_preprocess_field(&$variables) {
     $variables['#attached']['library'][] = 'humsci_basic/tablescope';
   }
 }
+
+/**
+ * Implements hook_preprocess_ENTITY__BUNDLE().
+ */
+function humsci_basic_preprocess_node__hs_event(&$variables) {
+  $variables['#attached']['library'][] = 'humsci_basic/addtocal';
+}
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/prefered-reduced-motion/prefered-reduced-motion.js b/docroot/themes/humsci/humsci_basic/src/js/shared/prefered-reduced-motion/prefered-reduced-motion.js
index 7e0e5dc026..c5880af66e 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/prefered-reduced-motion/prefered-reduced-motion.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/prefered-reduced-motion/prefered-reduced-motion.js
@@ -1,5 +1,5 @@
 (function ($, Drupal, window) {
-  Drupal.behaviors.mySlickBehavior = {
+  Drupal.behaviors.preferedReducedMotionBehavior = {
     attach(context) {
       // Check for reduced motion preference
       const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
index 989c9cf059..e52df599f2 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
@@ -1,4 +1,5 @@
 {{ attach_library('humsci_basic/pagescrollanimations') }}
 {{ attach_library('humsci_basic/carouselslidesheight') }}
+{{ attach_library('humsci_basic/preferedreducedmotion') }}
 
 {% include '@hs_layouts/gradient-hero/gradient-hero.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
index b4bb5267b6..1087e3c8a3 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
@@ -1,4 +1,5 @@
 {{ attach_library('humsci_basic/pagescrollanimations') }}
 {{ attach_library('humsci_basic/carouselslidesheight') }}
+{{ attach_library('humsci_basic/preferedreducedmotion') }}
 
 {% include '@hs_layouts/hero-text-overlay/hero-text-overlay.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
index d9cdab36ae..4bd3471ba9 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
@@ -1,3 +1,4 @@
 {{ attach_library('humsci_basic/carouselslidesheight') }}
+{{ attach_library('humsci_basic/preferedreducedmotion') }}
 
 {% include '@hs_layouts/spotlight/spotlight.html.twig' %}

From d20ea84d7e9deeec1a31e99e9a4a8e2503b1a5cf Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 17:10:49 -0600
Subject: [PATCH 30/54] feat(shs-5693): attached file for table wrap and table
 scope in text area tables and add drupal behavior to vertical tabs

---
 .../js/shared/vertical-tabs/vertical-tabs.js  | 31 ++++++++++++-------
 .../humsci_colorful.libraries.yml             |  2 --
 .../humsci_traditional.libraries.yml          |  2 --
 .../su_humsci_gin_admin.theme                 | 10 ++++++
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js b/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js
index b4972b1cc2..8d2d434e36 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js
@@ -1,13 +1,20 @@
-function closeDetails() {
-  // Close Revision Information Details element in Layout Builder by default.
-  if (document.querySelector('.layout-builder-form')) {
-    const details = document.querySelector('.layout-builder-form details');
-    if (details) {
-      details.removeAttribute('open');
-    }
-  }
-}
+(function (Drupal) {
+  Drupal.behaviors.addTableScopeAttributes = {
+    // eslint-disable-next-line no-unused-vars
+    attach(context) {
+      function closeDetails() {
+      // Close Revision Information Details element in Layout Builder by default.
+        if (document.querySelector('.layout-builder-form')) {
+          const details = document.querySelector('.layout-builder-form details');
+          if (details) {
+            details.removeAttribute('open');
+          }
+        }
+      }
 
-document.addEventListener('DOMContentLoaded', () => {
-  closeDetails(document);
-});
+      document.addEventListener('DOMContentLoaded', () => {
+        closeDetails(document);
+      });
+    },
+  };
+}(Drupal));
diff --git a/docroot/themes/humsci/humsci_colorful/humsci_colorful.libraries.yml b/docroot/themes/humsci/humsci_colorful/humsci_colorful.libraries.yml
index 8ff3369e4c..d62b7b5571 100644
--- a/docroot/themes/humsci/humsci_colorful/humsci_colorful.libraries.yml
+++ b/docroot/themes/humsci/humsci_colorful/humsci_colorful.libraries.yml
@@ -14,5 +14,3 @@ admin-preview:
   css:
     theme:
       css/humsci_colorful-preview.css: {}
-  js:
-    js/index.js: {}
diff --git a/docroot/themes/humsci/humsci_traditional/humsci_traditional.libraries.yml b/docroot/themes/humsci/humsci_traditional/humsci_traditional.libraries.yml
index ff6597f2b0..5be0f7afc0 100644
--- a/docroot/themes/humsci/humsci_traditional/humsci_traditional.libraries.yml
+++ b/docroot/themes/humsci/humsci_traditional/humsci_traditional.libraries.yml
@@ -14,5 +14,3 @@ admin-preview:
   css:
     theme:
       css/humsci_traditional-preview.css: {}
-  js:
-    js/index.js: {}
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
index 41239305a5..6feee0cbe7 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
+++ b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
@@ -53,3 +53,13 @@ function su_humsci_gin_admin_preprocess(&$variables, $hook) {
   $variables['wrapper_attributes'] = new Attribute();
   $variables['wrapper_attributes']->addClass($classes);
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function su_humsci_gin_admin_preprocess_field(&$variables) {
+  if ($variables['field_name'] == 'field_hs_text_area') {
+    $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
+    $variables['#attached']['library'][] = 'humsci_basic/tablescope';
+  }
+}

From 743a58a89cfc49c6d394a55875fe4520abb29f16 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 17:21:31 -0600
Subject: [PATCH 31/54] feat(shs-5963): add carousel slides heights and
 prefered reduced motion in previews

---
 .../templates/pattern/pattern-gradient-hero.html.twig          | 3 +++
 .../templates/pattern/pattern-hero-text-overlay.html.twig      | 3 +++
 .../templates/pattern/pattern-spotlight.html.twig              | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-gradient-hero.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-gradient-hero.html.twig
index d3955eaad7..e06d995fba 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-gradient-hero.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-gradient-hero.html.twig
@@ -1,3 +1,6 @@
+{{ attach_library('humsci_basic/carouselslidesheight') }}
+{{ attach_library('humsci_basic/preferedreducedmotion') }}
+
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes}}>
     {% include '@hs_layouts/gradient-hero/gradient-hero.html.twig' %}
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-hero-text-overlay.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-hero-text-overlay.html.twig
index e14696ff20..f2dd33b901 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-hero-text-overlay.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-hero-text-overlay.html.twig
@@ -1,3 +1,6 @@
+{{ attach_library('humsci_basic/carouselslidesheight') }}
+{{ attach_library('humsci_basic/preferedreducedmotion') }}
+
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-hero-image')}}>
     {% include '@hs_layouts/hero-text-overlay/hero-text-overlay.html.twig' %}
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-spotlight.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-spotlight.html.twig
index 9bf500e532..734c9238c5 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-spotlight.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-spotlight.html.twig
@@ -1,3 +1,6 @@
+{{ attach_library('humsci_basic/carouselslidesheight') }}
+{{ attach_library('humsci_basic/preferedreducedmotion') }}
+
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-spotlight')}}>
     {% include '@hs_layouts/spotlight/spotlight.html.twig' %}

From cf4588487ad2d559ceeeea13291320335b0795ba Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 17:27:45 -0600
Subject: [PATCH 32/54] feat(shs-5963): add prefered reduced motion in previews

---
 .../su_humsci_gin_admin/su_humsci_gin_admin.theme     | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
index 6feee0cbe7..ed23330cda 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
+++ b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
@@ -63,3 +63,14 @@ function su_humsci_gin_admin_preprocess_field(&$variables) {
     $variables['#attached']['library'][] = 'humsci_basic/tablescope';
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function su_humsci_gin_admin_preprocess_paragraph(&$variables) {
+  $paragraph = $variables['paragraph'];
+  // Attach library to stanford gallery
+  if ($paragraph->bundle() == 'stanford_gallery') {
+    $variables['#attached']['library'][] = 'humsci_basic/preferedreducedmotion';
+  }
+}

From b859dd48e5cb78d58a9b910e2a0586fbe9cca2d9 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 17:51:45 -0600
Subject: [PATCH 33/54] feat(shs-5963): add equal height grid in previews

---
 .../paragraph/paragraph--hs-priv-collection.html.twig        | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--hs-priv-collection.html.twig

diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--hs-priv-collection.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--hs-priv-collection.html.twig
new file mode 100644
index 0000000000..53387291d7
--- /dev/null
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--hs-priv-collection.html.twig
@@ -0,0 +1,5 @@
+<div class="paragraph-admin-preview">
+  <div{{wrapper_attributes}}>
+    {% include '@humsci_basic/components/paragraph--hs-priv-collection.html.twig' %}
+  </div>
+</div>

From 9d935b5245933c53c82e897867738f0d3a7eed9d Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 17:55:23 -0600
Subject: [PATCH 34/54] feat(shs-5963): add expanded collapse timeline in
 previews

---
 .../templates/pattern/pattern-timeline.html.twig                | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-timeline.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-timeline.html.twig
index f142ddb331..e4d6452845 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-timeline.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-timeline.html.twig
@@ -1,3 +1,5 @@
+{{ attach_library('humsci_basic/timeline') }}
+
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-timeline')}}>
     {% include '@hs_layouts/timeline/timeline.html.twig' %}

From b4eedb924f09fa6b2183b54f738686f74d2c60d7 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 17:57:42 -0600
Subject: [PATCH 35/54] feat(shs-5963): add accordion toggle all in previews

---
 .../templates/pattern/pattern-accordion.html.twig               | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-accordion.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-accordion.html.twig
index afaa069a9d..7861192a02 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-accordion.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-accordion.html.twig
@@ -1,3 +1,5 @@
+{{ attach_library('humsci_basic/accordion') }}
+
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-accordion')}}>
     {% include '@hs_layouts/accordion/accordion.html.twig' %}

From 60ed98921e8d3fbe7e5efe0cc397faf3067b6a9e Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 17:58:56 -0600
Subject: [PATCH 36/54] feat(shs-5963): add linked card script in previews

---
 .../templates/pattern/pattern-vertical-card.html.twig           | 2 ++
 .../templates/pattern/pattern-vertical-link-card.html.twig      | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-card.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-card.html.twig
index acfec90862..c13b32d877 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-card.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-card.html.twig
@@ -1,3 +1,5 @@
+{{ attach_library('humsci_basic/linkedcards') }}
+
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-postcard')}}>
     {% include '@hs_layouts/vertical-card/vertical-card.html.twig' %}
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-link-card.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-link-card.html.twig
index 0a11ac344c..ca1132f187 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-link-card.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-link-card.html.twig
@@ -1,3 +1,5 @@
+{{ attach_library('humsci_basic/linkedcards') }}
+
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-postcard')}}>
     {% include '@hs_layouts/vertical-link-card/vertical-link-card.html.twig' %}

From 4ead2341a567632af4653ae2cdb9a2d7ffa7b600 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 2 Dec 2024 22:29:07 -0600
Subject: [PATCH 37/54] feat(shs-5963): add video with caption

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 docroot/themes/humsci/humsci_basic/humsci_basic.theme         | 1 +
 .../humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme      | 1 +
 3 files changed, 6 insertions(+)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index a8a2b3720d..d0e45de431 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -64,3 +64,7 @@ tablewrap:
 timeline:
   js:
     dist/js/timeline.js: {}
+
+videowithcaption:
+  js:
+    dist/js/videowithcaption.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index 4a85570fbf..b66224ab70 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -264,6 +264,7 @@ function humsci_basic_preprocess_field(&$variables) {
   if ($variables['field_name'] == 'field_hs_text_area') {
     $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
     $variables['#attached']['library'][] = 'humsci_basic/tablescope';
+    $variables['#attached']['library'][] = 'humsci_basic/videowithcaption';
   }
 }
 
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
index ed23330cda..b9593d528e 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
+++ b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
@@ -61,6 +61,7 @@ function su_humsci_gin_admin_preprocess_field(&$variables) {
   if ($variables['field_name'] == 'field_hs_text_area') {
     $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
     $variables['#attached']['library'][] = 'humsci_basic/tablescope';
+    $variables['#attached']['library'][] = 'humsci_basic/videowithcaption';
   }
 }
 

From 63d87c322f925b0dfb1593328acc59c94fd2afe3 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Tue, 3 Dec 2024 10:43:22 -0600
Subject: [PATCH 38/54] feat(shs-5963): attach colorbox script in photoalbum

---
 docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml | 4 ++++
 docroot/themes/humsci/humsci_basic/humsci_basic.theme         | 1 +
 .../humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js | 2 +-
 .../humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme      | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index d0e45de431..cb5b1fc502 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -10,6 +10,10 @@ carouselslidesheight:
   js:
     dist/js/carouselslidesheight.js: {}
 
+colorbox:
+  js:
+    dist/js/colorbox.js: {}
+
 editoria11y:
   js:
     dist/js/editoria11y.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index b66224ab70..181add18fa 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -238,6 +238,7 @@ function humsci_basic_preprocess_paragraph(&$variables) {
   // Attach library to stanford gallery
   if ($paragraph->bundle() == 'stanford_gallery') {
     $variables['#attached']['library'][] = 'humsci_basic/preferedreducedmotion';
+    $variables['#attached']['library'][] = 'humsci_basic/colorbox';
   }
   if ($paragraph->bundle() != 'hs_view') {
     return NULL;
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js b/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js
index 8d2d434e36..db12a99b18 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js
@@ -1,5 +1,5 @@
 (function (Drupal) {
-  Drupal.behaviors.addTableScopeAttributes = {
+  Drupal.behaviors.verticalTabsBehavior = {
     // eslint-disable-next-line no-unused-vars
     attach(context) {
       function closeDetails() {
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
index b9593d528e..5192e1861e 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
+++ b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
@@ -73,5 +73,6 @@ function su_humsci_gin_admin_preprocess_paragraph(&$variables) {
   // Attach library to stanford gallery
   if ($paragraph->bundle() == 'stanford_gallery') {
     $variables['#attached']['library'][] = 'humsci_basic/preferedreducedmotion';
+    $variables['#attached']['library'][] = 'humsci_basic/colorbox';
   }
 }

From fca0f38e643fcb480c6706cc95a779cf6b4b8ef9 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Tue, 3 Dec 2024 11:28:06 -0600
Subject: [PATCH 39/54] feat(shs-5963): move vertical tabs js to hs_layouts and
 attach to it, remove index.js in humsci_basic

---
 .../humsci/hs_layouts/hs_layouts.layouts.yml  |  1 +
 .../hs_layouts/hs_layouts.libraries.yml       | 16 +++++++++++++++
 .../humsci/hs_layouts/js/vertical-tabs.js     | 13 ++++++++++++
 .../humsci_basic/src/js/shared/index.js       | 20 -------------------
 .../js/shared/vertical-tabs/vertical-tabs.js  | 20 -------------------
 .../humsci/humsci_basic/webpack.config.js     |  1 -
 6 files changed, 30 insertions(+), 41 deletions(-)
 create mode 100644 docroot/modules/humsci/hs_layouts/js/vertical-tabs.js
 delete mode 100644 docroot/themes/humsci/humsci_basic/src/js/shared/index.js
 delete mode 100644 docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js

diff --git a/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml b/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
index efef339fd3..3946865c53 100644
--- a/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
+++ b/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
@@ -20,6 +20,7 @@ three_column:
   template: layouts/three-column/three-column
   default_region: main
   class: '\Drupal\hs_layouts\Plugin\Layout\HumsciLayout'
+  library: hs_layouts/verticaltabs
   icon_map:
     - [sidebar_first, main, sidebar_second]
   regions:
diff --git a/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml b/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
index 61d574e51b..3a74c18e98 100644
--- a/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
+++ b/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
@@ -2,10 +2,20 @@ three_column_w_image:
   css:
     layout:
       css/three-column-w-image.css: {}
+  js:
+    js/vertical-tabs.js: {}
+  dependencies:
+    - core/drupal
+
 news_style:
   css:
     layout:
       css/news-style.css: {}
+  js:
+    js/vertical-tabs.js: {}
+  dependencies:
+    - core/drupal
+
 layout_builder_admin:
   css:
     theme:
@@ -20,3 +30,9 @@ images_loaded:
   dependencies:
     - core/jquery
 
+verticaltabs:
+  js:
+    js/vertical-tabs.js: {}
+  dependencies:
+    - core/drupal
+
diff --git a/docroot/modules/humsci/hs_layouts/js/vertical-tabs.js b/docroot/modules/humsci/hs_layouts/js/vertical-tabs.js
new file mode 100644
index 0000000000..cc613d7dbd
--- /dev/null
+++ b/docroot/modules/humsci/hs_layouts/js/vertical-tabs.js
@@ -0,0 +1,13 @@
+function closeDetails() {
+// Close Revision Information Details element in Layout Builder by default.
+  if (document.querySelector('.layout-builder-form')) {
+    const details = document.querySelector('.layout-builder-form details');
+    if (details) {
+      details.removeAttribute('open');
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  closeDetails(document);
+});
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/index.js
deleted file mode 100644
index a22cfc783d..0000000000
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import './carousel-slides/carousel-slides-height';
-import './tables/wrap';
-import './tables/scope';
-import './tables/table-pattern';
-import './navigation/index';
-import './equal-height-grid/index';
-import './media/video-with-caption';
-import './animation/page-scroll';
-import './timeline/expand-collapse-timeline';
-import './accordion/accordion-toggle-all';
-import './linked-cards/linked-cards';
-import './photo-album/colorbox';
-import './editoria11y/editoria11y';
-import './vertical-tabs/vertical-tabs';
-import './addtocal/addtocal';
-import './prefered-reduced-motion/prefered-reduced-motion';
-import './main-content-fallback/main-content-fallback';
-
-// PoC for new megamenu.
-import './megamenu/index';
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js b/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js
deleted file mode 100644
index db12a99b18..0000000000
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/vertical-tabs/vertical-tabs.js
+++ /dev/null
@@ -1,20 +0,0 @@
-(function (Drupal) {
-  Drupal.behaviors.verticalTabsBehavior = {
-    // eslint-disable-next-line no-unused-vars
-    attach(context) {
-      function closeDetails() {
-      // Close Revision Information Details element in Layout Builder by default.
-        if (document.querySelector('.layout-builder-form')) {
-          const details = document.querySelector('.layout-builder-form details');
-          if (details) {
-            details.removeAttribute('open');
-          }
-        }
-      }
-
-      document.addEventListener('DOMContentLoaded', () => {
-        closeDetails(document);
-      });
-    },
-  };
-}(Drupal));
diff --git a/docroot/themes/humsci/humsci_basic/webpack.config.js b/docroot/themes/humsci/humsci_basic/webpack.config.js
index 27fab65b84..857cec1ac5 100644
--- a/docroot/themes/humsci/humsci_basic/webpack.config.js
+++ b/docroot/themes/humsci/humsci_basic/webpack.config.js
@@ -27,7 +27,6 @@ const shared = {
   tablepattern: 'shared/tables/table-pattern.js',
   tablewrap: 'shared/tables/wrap.js',
   timeline: 'shared/timeline/expand-collapse-timeline.js',
-  verticaltabs: 'shared/vertical-tabs/vertical-tabs.js',
 };
 
 // Colorful and traditional theme specific JS files.

From 69a4b593be4a1bd5bd6f38e0d47aad81b66593b9 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Tue, 3 Dec 2024 11:35:33 -0600
Subject: [PATCH 40/54] fix(shs-5963): fix lint theme issue in colorful.js and
 traditional.js

---
 docroot/themes/humsci/humsci_basic/src/js/colorful/colorful.js  | 2 --
 .../humsci/humsci_basic/src/js/traditional/traditional.js       | 2 --
 2 files changed, 4 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/colorful/colorful.js b/docroot/themes/humsci/humsci_basic/src/js/colorful/colorful.js
index 10a3940345..c04f7febd8 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/colorful/colorful.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/colorful/colorful.js
@@ -1,3 +1 @@
-import '../shared/index';
-
 // Add Colorful and Airy specific JS below
diff --git a/docroot/themes/humsci/humsci_basic/src/js/traditional/traditional.js b/docroot/themes/humsci/humsci_basic/src/js/traditional/traditional.js
index dc3f73875d..6a7375be37 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/traditional/traditional.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/traditional/traditional.js
@@ -1,3 +1 @@
-import '../shared/index';
-
 // Add Traditional specific JS below

From 2be08323f0015f800700d0dcd3cb817ec1c23bc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Wed, 4 Dec 2024 15:43:08 -0600
Subject: [PATCH 41/54] fix(shs-5963): fix js files and libraries naming

---
 .../humsci/hs_layouts/hs_layouts.layouts.yml  |  2 +-
 .../hs_layouts/hs_layouts.libraries.yml       |  2 +-
 .../humsci/humsci_basic/humsci_basic.info.yml |  2 +-
 .../humsci_basic/humsci_basic.libraries.yml   | 54 +++++++++----------
 .../humsci/humsci_basic/humsci_basic.theme    | 15 +++---
 .../paragraph--hs-collection.html.twig        |  2 +-
 .../paragraph--hs-priv-collection.html.twig   |  2 +-
 .../paragraph--hs-text-area.html.twig         |  4 +-
 ...ttern-date-stacked-vertical-card.html.twig |  2 +-
 .../pattern-gradient-hero.html.twig           |  6 +--
 .../pattern-hero-text-overlay.html.twig       |  6 +--
 .../components/pattern-spotlight.html.twig    |  4 +-
 .../pattern-vertical-card.html.twig           |  2 +-
 .../pattern-vertical-link-card.html.twig      |  2 +-
 .../templates/menus/menu--main.html.twig      |  5 +-
 .../menus/menu--menu-block--main.html.twig    |  2 +-
 .../humsci/humsci_basic/webpack.config.js     | 28 +++++-----
 .../su_humsci_gin_admin.theme                 | 10 ++--
 .../pattern/pattern-gradient-hero.html.twig   |  4 +-
 .../pattern-hero-text-overlay.html.twig       |  4 +-
 .../pattern/pattern-spotlight.html.twig       |  4 +-
 .../pattern/pattern-vertical-card.html.twig   |  2 +-
 .../pattern-vertical-link-card.html.twig      |  2 +-
 23 files changed, 82 insertions(+), 84 deletions(-)

diff --git a/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml b/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
index 3946865c53..bb29c9051e 100644
--- a/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
+++ b/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
@@ -20,7 +20,7 @@ three_column:
   template: layouts/three-column/three-column
   default_region: main
   class: '\Drupal\hs_layouts\Plugin\Layout\HumsciLayout'
-  library: hs_layouts/verticaltabs
+  library: hs_layouts/vertical-tabs
   icon_map:
     - [sidebar_first, main, sidebar_second]
   regions:
diff --git a/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml b/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
index 3a74c18e98..620a478579 100644
--- a/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
+++ b/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
@@ -30,7 +30,7 @@ images_loaded:
   dependencies:
     - core/jquery
 
-verticaltabs:
+vertical-tabs:
   js:
     js/vertical-tabs.js: {}
   dependencies:
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
index f6b89b4e86..b585c77238 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.info.yml
@@ -5,7 +5,7 @@ package: 'Humanities & Sciences'
 core_version_requirement: ^9.4 || ^10
 'base theme': stable9
 libraries:
-  - humsci_basic/maincontentfallback
+  - humsci_basic/main-content-fallback
   - humsci_basic/editoria11y
 
 regions:
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index cb5b1fc502..83ef34f881 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -6,9 +6,9 @@ addtocal:
   js:
     dist/js/addtocal.js: {}
 
-carouselslidesheight:
+carousel-slides-height:
   js:
-    dist/js/carouselslidesheight.js: {}
+    dist/js/carousel-slides-height.js: {}
 
 colorbox:
   js:
@@ -18,57 +18,57 @@ editoria11y:
   js:
     dist/js/editoria11y.js: {}
 
-equalheightgrid:
+equal-height-grid:
   js:
-    dist/js/equalheightgrid.js: {}
+    dist/js/equal-height-grid.js: {}
 
-linkedcards:
+linked-cards:
   js:
-    dist/js/linkedcards.js: {}
+    dist/js/linked-cards.js: {}
 
-maincontentfallback:
+main-content-fallback:
   js:
-    dist/js/maincontentfallback.js: {}
+    dist/js/main-content-fallback.js: {}
 
-mainmenu:
+main-menu:
   js:
-    dist/js/mainmenutoggle.js: {}
-    dist/js/mainmenunestedtoggler.js: {}
-    dist/js/collapsemainmenu.js: {}
-    dist/js/megamenu.js: {}
+    dist/js/main-menu-toggle.js: {}
+    dist/js/main-menu-nested-toggler.js: {}
+    dist/js/collapse-main-menu.js: {}
+    dist/js/mega-menu.js: {}
 
-pagescrollanimations:
+page-scroll-animations:
   js:
-    dist/js/pagescrollanimations.js: {}
+    dist/js/page-scroll-animations.js: {}
 
-preferedreducedmotion:
+prefered-reduced-motion:
   js:
-    dist/js/preferedreducedmotion.js: {}
+    dist/js/prefered-reduced-motion.js: {}
 
 search:
   js:
     dist/js/search.js: {}
 
-secondarymenu:
+secondary-menu:
   js:
-    dist/js/secondarytoggler.js: {}
+    dist/js/secondary-toggler.js: {}
 
-tablepattern:
+table-pattern:
   js:
-    dist/js/tablepattern.js: {}
+    dist/js/table-pattern.js: {}
 
-tablescope:
+table-scope:
   js:
-    dist/js/tablescope.js: {}
+    dist/js/table-scope.js: {}
 
-tablewrap:
+table-wrap:
   js:
-    dist/js/tablewrap.js: {}
+    dist/js/table-wrap.js: {}
 
 timeline:
   js:
     dist/js/timeline.js: {}
 
-videowithcaption:
+video-with-caption:
   js:
-    dist/js/videowithcaption.js: {}
+    dist/js/video-with-caption.js: {}
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index 181add18fa..fecd79bed5 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -174,7 +174,6 @@ function _humsci_basic_check_link_access(array &$link_items) {
   }
 }
 
-
 /**
  * Implements hook_preprocess_HOOK() for we_megamenu li.
  */
@@ -220,8 +219,8 @@ function humsci_basic_preprocess_we_megamenu_frontend(&$vars) {
  */
 function humsci_basic_preprocess_views_view(&$variables) {
   $view = $variables['view'];
-  $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
-  $variables['#attached']['library'][] = 'humsci_basic/tablepattern';
+  $variables['#attached']['library'][] = 'humsci_basic/table-wrap';
+  $variables['#attached']['library'][] = 'humsci_basic/table-pattern';
 
   switch ($view->id()) {
     case 'hs_default_search':
@@ -235,9 +234,9 @@ function humsci_basic_preprocess_views_view(&$variables) {
  */
 function humsci_basic_preprocess_paragraph(&$variables) {
   $paragraph = $variables['paragraph'];
-  // Attach library to stanford gallery
+  // Attach library to stanford gallery.
   if ($paragraph->bundle() == 'stanford_gallery') {
-    $variables['#attached']['library'][] = 'humsci_basic/preferedreducedmotion';
+    $variables['#attached']['library'][] = 'humsci_basic/prefered-reduced-motion';
     $variables['#attached']['library'][] = 'humsci_basic/colorbox';
   }
   if ($paragraph->bundle() != 'hs_view') {
@@ -263,9 +262,9 @@ function humsci_basic_preprocess_paragraph(&$variables) {
  */
 function humsci_basic_preprocess_field(&$variables) {
   if ($variables['field_name'] == 'field_hs_text_area') {
-    $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
-    $variables['#attached']['library'][] = 'humsci_basic/tablescope';
-    $variables['#attached']['library'][] = 'humsci_basic/videowithcaption';
+    $variables['#attached']['library'][] = 'humsci_basic/table-wrap';
+    $variables['#attached']['library'][] = 'humsci_basic/table-scope';
+    $variables['#attached']['library'][] = 'humsci_basic/video-with-caption';
   }
 }
 
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-collection.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-collection.html.twig
index ba0e754f20..8e4b3ff8f8 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-collection.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-collection.html.twig
@@ -38,7 +38,7 @@
  * @ingroup themeable
  */
 #}
-{{ attach_library('humsci_basic/equalheightgrid') }}
+{{ attach_library('humsci_basic/equal-height-grid') }}
 
 {% set raised_cards = false %}
 {% if paragraph.field_raised_cards.value == true %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-priv-collection.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-priv-collection.html.twig
index d6db986c83..ef0ed21b00 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-priv-collection.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-priv-collection.html.twig
@@ -38,7 +38,7 @@
  * @ingroup themeable
  */
 #}
-{{ attach_library('humsci_basic/equalheightgrid') }}
+{{ attach_library('humsci_basic/equal-height-grid') }}
 
 {%
   set classes = [
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig
index 65d0cee95c..e9b103b922 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig
@@ -1,3 +1,3 @@
-{{ attach_library('humsci_basic/pagescrollanimations') }}
+{{ attach_library('humsci_basic/page-scroll-animations') }}
 
-{% include '@humsci_basic/components/paragraph.html.twig' %}
\ No newline at end of file
+{% include '@humsci_basic/components/paragraph.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-date-stacked-vertical-card.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-date-stacked-vertical-card.html.twig
index 4fd3af72ef..6f31dda572 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-date-stacked-vertical-card.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-date-stacked-vertical-card.html.twig
@@ -1,3 +1,3 @@
-{{ attach_library('humsci_basic/linkedcards') }}
+{{ attach_library('humsci_basic/linked-cards') }}
 
 {% include '@hs_layouts/date-stacked-vertical-card/date-stacked-vertical-card.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
index e52df599f2..b2c8f1f953 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-gradient-hero.html.twig
@@ -1,5 +1,5 @@
-{{ attach_library('humsci_basic/pagescrollanimations') }}
-{{ attach_library('humsci_basic/carouselslidesheight') }}
-{{ attach_library('humsci_basic/preferedreducedmotion') }}
+{{ attach_library('humsci_basic/page-scroll-animations') }}
+{{ attach_library('humsci_basic/carousel-slides-height') }}
+{{ attach_library('humsci_basic/prefered-reduced-motion') }}
 
 {% include '@hs_layouts/gradient-hero/gradient-hero.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
index 1087e3c8a3..e2a0897c1b 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-hero-text-overlay.html.twig
@@ -1,5 +1,5 @@
-{{ attach_library('humsci_basic/pagescrollanimations') }}
-{{ attach_library('humsci_basic/carouselslidesheight') }}
-{{ attach_library('humsci_basic/preferedreducedmotion') }}
+{{ attach_library('humsci_basic/page-scroll-animations') }}
+{{ attach_library('humsci_basic/carousel-slides-height') }}
+{{ attach_library('humsci_basic/prefered-reduced-motion') }}
 
 {% include '@hs_layouts/hero-text-overlay/hero-text-overlay.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
index 4bd3471ba9..f843657796 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-spotlight.html.twig
@@ -1,4 +1,4 @@
-{{ attach_library('humsci_basic/carouselslidesheight') }}
-{{ attach_library('humsci_basic/preferedreducedmotion') }}
+{{ attach_library('humsci_basic/carousel-slides-height') }}
+{{ attach_library('humsci_basic/prefered-reduced-motion') }}
 
 {% include '@hs_layouts/spotlight/spotlight.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-card.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-card.html.twig
index 45013a7781..f3b5efd05b 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-card.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-card.html.twig
@@ -1,3 +1,3 @@
-{{ attach_library('humsci_basic/linkedcards') }}
+{{ attach_library('humsci_basic/linked-cards') }}
 
 {% include '@hs_layouts/vertical-card/vertical-card.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-link-card.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-link-card.html.twig
index fa5cf4e40b..9a591f0f3d 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-link-card.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-vertical-link-card.html.twig
@@ -1,4 +1,4 @@
-{{ attach_library('humsci_basic/linkedcards') }}
+{{ attach_library('humsci_basic/linked-cards') }}
 
 {% include '@hs_layouts/vertical-link-card/vertical-link-card.html.twig' %}
 
diff --git a/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig b/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
index 470cbd061a..71a99c96c4 100644
--- a/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
@@ -15,15 +15,14 @@
  */
 #}
 
-{{ attach_library('humsci_basic/mainmenu') }}
+{{ attach_library('humsci_basic/main-menu') }}
 
 {% if use_hs_megamenu %}
   {# Twig megamenu attributes #}
   {% set attributes = attributes.addClass(['megamenu', 'js-megamenu']) %}
   {% set attributes = attributes.setAttribute('aria-label', 'main menu') %}
   {% include "@humsci_basic/menus-twig/secondary-menu.twig" %}
-
-  {% else %}
+{% else %}
   {# Legacy Drupal menu #}
   {% set attributes = attributes.addClass(['hb-main-nav', 'su-main-nav', 'hb-main-nav--is-still-loading']) %}
   {% set attributes = attributes.setAttribute('aria-label', 'main menu') %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/menus/menu--menu-block--main.html.twig b/docroot/themes/humsci/humsci_basic/templates/menus/menu--menu-block--main.html.twig
index 5feaa5503f..aa7c76df24 100644
--- a/docroot/themes/humsci/humsci_basic/templates/menus/menu--menu-block--main.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/menus/menu--menu-block--main.html.twig
@@ -2,7 +2,7 @@
 {# The main and only way it is used on the site now is to create secondary nav #}
 {%- import "@humsci_basic/menus/macros/secondary-nav-menu.twig" as menus -%}
 
-{{ attach_library('humsci_basic/secondarymenu') }}
+{{ attach_library('humsci_basic/secondary-menu') }}
 
 {% apply spaceless %}
   {% if items is iterable %}
diff --git a/docroot/themes/humsci/humsci_basic/webpack.config.js b/docroot/themes/humsci/humsci_basic/webpack.config.js
index 857cec1ac5..efd4ffa0d8 100644
--- a/docroot/themes/humsci/humsci_basic/webpack.config.js
+++ b/docroot/themes/humsci/humsci_basic/webpack.config.js
@@ -8,24 +8,24 @@ const srcDir = path.resolve(__dirname, 'src/js/');
 const shared = {
   accordion: 'shared/accordion/accordion-toggle-all.js',
   addtocal: 'shared/addtocal/addtocal.js',
-  pagescrollanimations: 'shared/animation/page-scroll.js',
-  carouselslidesheight: 'shared/carousel-slides/carousel-slides-height.js',
+  'page-scroll-animations': 'shared/animation/page-scroll.js',
+  'carousel-slides-height': 'shared/carousel-slides/carousel-slides-height.js',
   editoria11y: 'shared/editoria11y/editoria11y.js',
-  equalheightgrid: 'shared/equal-height-grid/index.js',
-  linkedcards: 'shared/linked-cards/linked-cards.js',
-  maincontentfallback: 'shared/main-content-fallback/main-content-fallback.js',
-  videowithcaption: 'shared/media/video-with-caption.js',
+  'equal-height-grid': 'shared/equal-height-grid/index.js',
+  'linked-cards': 'shared/linked-cards/linked-cards.js',
+  'main-content-fallback': 'shared/main-content-fallback/main-content-fallback.js',
+  'video-with-caption': 'shared/media/video-with-caption.js',
   megamenu: 'shared/megamenu/index.js',
-  mainmenutoggle: 'shared/navigation/main-menu-toggle.js',
-  mainmenunestedtoggler: 'shared/navigation/main-menu-nested-toggler.js',
-  collapsemainmenu: 'shared/navigation/collapse-main-menu.js',
-  secondarytoggler: 'shared/navigation/secondary-toggler.js',
+  'main-menu-toggle': 'shared/navigation/main-menu-toggle.js',
+  'main-menu-nested-toggler': 'shared/navigation/main-menu-nested-toggler.js',
+  'collapse-main-menu': 'shared/navigation/collapse-main-menu.js',
+  'secondary-toggler': 'shared/navigation/secondary-toggler.js',
   colorbox: 'shared/photo-album/colorbox.js',
-  preferedreducedmotion: 'shared/prefered-reduced-motion/prefered-reduced-motion.js',
+  'prefered-reduced-motion': 'shared/prefered-reduced-motion/prefered-reduced-motion.js',
   search: 'shared/search/search-expand.js',
-  tablescope: 'shared/tables/scope.js',
-  tablepattern: 'shared/tables/table-pattern.js',
-  tablewrap: 'shared/tables/wrap.js',
+  'table-scope': 'shared/tables/scope.js',
+  'table-pattern': 'shared/tables/table-pattern.js',
+  'table-wrap': 'shared/tables/wrap.js',
   timeline: 'shared/timeline/expand-collapse-timeline.js',
 };
 
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
index 5192e1861e..ac943199ca 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
+++ b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
@@ -59,9 +59,9 @@ function su_humsci_gin_admin_preprocess(&$variables, $hook) {
  */
 function su_humsci_gin_admin_preprocess_field(&$variables) {
   if ($variables['field_name'] == 'field_hs_text_area') {
-    $variables['#attached']['library'][] = 'humsci_basic/tablewrap';
-    $variables['#attached']['library'][] = 'humsci_basic/tablescope';
-    $variables['#attached']['library'][] = 'humsci_basic/videowithcaption';
+    $variables['#attached']['library'][] = 'humsci_basic/table-wrap';
+    $variables['#attached']['library'][] = 'humsci_basic/table-scope';
+    $variables['#attached']['library'][] = 'humsci_basic/video-with-caption';
   }
 }
 
@@ -70,9 +70,9 @@ function su_humsci_gin_admin_preprocess_field(&$variables) {
  */
 function su_humsci_gin_admin_preprocess_paragraph(&$variables) {
   $paragraph = $variables['paragraph'];
-  // Attach library to stanford gallery
+  // Attach library to stanford gallery.
   if ($paragraph->bundle() == 'stanford_gallery') {
-    $variables['#attached']['library'][] = 'humsci_basic/preferedreducedmotion';
+    $variables['#attached']['library'][] = 'humsci_basic/prefered-reduced-motion';
     $variables['#attached']['library'][] = 'humsci_basic/colorbox';
   }
 }
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-gradient-hero.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-gradient-hero.html.twig
index e06d995fba..2e1a20a813 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-gradient-hero.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-gradient-hero.html.twig
@@ -1,5 +1,5 @@
-{{ attach_library('humsci_basic/carouselslidesheight') }}
-{{ attach_library('humsci_basic/preferedreducedmotion') }}
+{{ attach_library('humsci_basic/carousel-slides-height') }}
+{{ attach_library('humsci_basic/prefered-reduced-motion') }}
 
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes}}>
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-hero-text-overlay.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-hero-text-overlay.html.twig
index f2dd33b901..f4c84d45c9 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-hero-text-overlay.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-hero-text-overlay.html.twig
@@ -1,5 +1,5 @@
-{{ attach_library('humsci_basic/carouselslidesheight') }}
-{{ attach_library('humsci_basic/preferedreducedmotion') }}
+{{ attach_library('humsci_basic/carousel-slides-height') }}
+{{ attach_library('humsci_basic/prefered-reduced-motion') }}
 
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-hero-image')}}>
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-spotlight.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-spotlight.html.twig
index 734c9238c5..f1a94870f2 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-spotlight.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-spotlight.html.twig
@@ -1,5 +1,5 @@
-{{ attach_library('humsci_basic/carouselslidesheight') }}
-{{ attach_library('humsci_basic/preferedreducedmotion') }}
+{{ attach_library('humsci_basic/carousel-slides-height') }}
+{{ attach_library('humsci_basic/prefered-reduced-motion') }}
 
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-spotlight')}}>
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-card.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-card.html.twig
index c13b32d877..35e20e1f2f 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-card.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-card.html.twig
@@ -1,4 +1,4 @@
-{{ attach_library('humsci_basic/linkedcards') }}
+{{ attach_library('humsci_basic/linked-cards') }}
 
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-postcard')}}>
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-link-card.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-link-card.html.twig
index ca1132f187..aa1e1d48a9 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-link-card.html.twig
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/pattern/pattern-vertical-link-card.html.twig
@@ -1,4 +1,4 @@
-{{ attach_library('humsci_basic/linkedcards') }}
+{{ attach_library('humsci_basic/linked-cards') }}
 
 <div class="paragraph-admin-preview">
   <div{{wrapper_attributes.addClass('paragraph-item', 'ptype-hs-postcard')}}>

From f5dc114a1fae7458bb0acfde93724b7fe680431e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Wed, 4 Dec 2024 16:49:44 -0600
Subject: [PATCH 42/54] fix(shs-5963): fixes in main-menu/megamenu js

---
 .../humsci/humsci_basic/humsci_basic.libraries.yml       | 9 +++++----
 .../shared/navigation/{index.js => main-menu-index.js}   | 1 -
 .../humsci_basic/templates/menus/menu--main.html.twig    | 6 ++++--
 docroot/themes/humsci/humsci_basic/webpack.config.js     | 4 +---
 4 files changed, 10 insertions(+), 10 deletions(-)
 rename docroot/themes/humsci/humsci_basic/src/js/shared/navigation/{index.js => main-menu-index.js} (76%)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index 83ef34f881..cde030a801 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -32,10 +32,11 @@ main-content-fallback:
 
 main-menu:
   js:
-    dist/js/main-menu-toggle.js: {}
-    dist/js/main-menu-nested-toggler.js: {}
-    dist/js/collapse-main-menu.js: {}
-    dist/js/mega-menu.js: {}
+    dist/js/main-menu.js: {}
+
+megamenu:
+  js:
+    dist/js/megamenu.js: {}
 
 page-scroll-animations:
   js:
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-index.js
similarity index 76%
rename from docroot/themes/humsci/humsci_basic/src/js/shared/navigation/index.js
rename to docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-index.js
index 611785dc6b..d1679e07ee 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-index.js
@@ -1,4 +1,3 @@
 import './main-menu-toggle';
 import './main-menu-nested-toggler';
 import './collapse-main-menu';
-import './secondary-toggler';
diff --git a/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig b/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
index 71a99c96c4..d7eee444d2 100644
--- a/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/menus/menu--main.html.twig
@@ -15,14 +15,16 @@
  */
 #}
 
-{{ attach_library('humsci_basic/main-menu') }}
-
 {% if use_hs_megamenu %}
+  {{ attach_library('humsci_basic/megamenu') }}
+
   {# Twig megamenu attributes #}
   {% set attributes = attributes.addClass(['megamenu', 'js-megamenu']) %}
   {% set attributes = attributes.setAttribute('aria-label', 'main menu') %}
   {% include "@humsci_basic/menus-twig/secondary-menu.twig" %}
 {% else %}
+  {{ attach_library('humsci_basic/main-menu') }}
+
   {# Legacy Drupal menu #}
   {% set attributes = attributes.addClass(['hb-main-nav', 'su-main-nav', 'hb-main-nav--is-still-loading']) %}
   {% set attributes = attributes.setAttribute('aria-label', 'main menu') %}
diff --git a/docroot/themes/humsci/humsci_basic/webpack.config.js b/docroot/themes/humsci/humsci_basic/webpack.config.js
index efd4ffa0d8..e875d0ab5e 100644
--- a/docroot/themes/humsci/humsci_basic/webpack.config.js
+++ b/docroot/themes/humsci/humsci_basic/webpack.config.js
@@ -16,9 +16,7 @@ const shared = {
   'main-content-fallback': 'shared/main-content-fallback/main-content-fallback.js',
   'video-with-caption': 'shared/media/video-with-caption.js',
   megamenu: 'shared/megamenu/index.js',
-  'main-menu-toggle': 'shared/navigation/main-menu-toggle.js',
-  'main-menu-nested-toggler': 'shared/navigation/main-menu-nested-toggler.js',
-  'collapse-main-menu': 'shared/navigation/collapse-main-menu.js',
+  'main-menu': 'shared/navigation/main-menu-index.js',
   'secondary-toggler': 'shared/navigation/secondary-toggler.js',
   colorbox: 'shared/photo-album/colorbox.js',
   'prefered-reduced-motion': 'shared/prefered-reduced-motion/prefered-reduced-motion.js',

From d8877ea2fe28bd370868eb0da613b590a1acdc7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Wed, 4 Dec 2024 19:08:39 -0600
Subject: [PATCH 43/54] fix(shs-5963): load wysiwyg related scripts based on
 field type

---
 docroot/themes/humsci/humsci_basic/humsci_basic.theme          | 3 ++-
 .../humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme       | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index fecd79bed5..a4a1c2b371 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -261,7 +261,8 @@ function humsci_basic_preprocess_paragraph(&$variables) {
  * Implements hook_preprocess_HOOK().
  */
 function humsci_basic_preprocess_field(&$variables) {
-  if ($variables['field_name'] == 'field_hs_text_area') {
+  $wysiwyg_types = ['text_long', 'text_with_summary'];
+  if (in_array($variables['field_type'], $wysiwyg_types)) {
     $variables['#attached']['library'][] = 'humsci_basic/table-wrap';
     $variables['#attached']['library'][] = 'humsci_basic/table-scope';
     $variables['#attached']['library'][] = 'humsci_basic/video-with-caption';
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
index ac943199ca..1e99489ee4 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
+++ b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
@@ -58,7 +58,8 @@ function su_humsci_gin_admin_preprocess(&$variables, $hook) {
  * Implements hook_preprocess_HOOK().
  */
 function su_humsci_gin_admin_preprocess_field(&$variables) {
-  if ($variables['field_name'] == 'field_hs_text_area') {
+  $wysiwyg_types = ['text_long', 'text_with_summary'];
+  if (in_array($variables['field_type'], $wysiwyg_types)) {
     $variables['#attached']['library'][] = 'humsci_basic/table-wrap';
     $variables['#attached']['library'][] = 'humsci_basic/table-scope';
     $variables['#attached']['library'][] = 'humsci_basic/video-with-caption';

From 14261e2146fc51e4305c1ddefa8f488d7b0e95d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Thu, 5 Dec 2024 18:13:46 -0600
Subject: [PATCH 44/54] fix(shs-5963): refactor js for handling vertical tabs
 in layout builder forms

---
 .../humsci/hs_layouts/hs_layouts.libraries.yml      | 13 ++-----------
 docroot/modules/humsci/hs_layouts/hs_layouts.module | 10 ++++++++++
 ...ical-tabs.js => layout-builder-vertical-tabs.js} |  0
 3 files changed, 12 insertions(+), 11 deletions(-)
 rename docroot/modules/humsci/hs_layouts/js/{vertical-tabs.js => layout-builder-vertical-tabs.js} (100%)

diff --git a/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml b/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
index 620a478579..18dcf6af85 100644
--- a/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
+++ b/docroot/modules/humsci/hs_layouts/hs_layouts.libraries.yml
@@ -2,19 +2,11 @@ three_column_w_image:
   css:
     layout:
       css/three-column-w-image.css: {}
-  js:
-    js/vertical-tabs.js: {}
-  dependencies:
-    - core/drupal
 
 news_style:
   css:
     layout:
       css/news-style.css: {}
-  js:
-    js/vertical-tabs.js: {}
-  dependencies:
-    - core/drupal
 
 layout_builder_admin:
   css:
@@ -30,9 +22,8 @@ images_loaded:
   dependencies:
     - core/jquery
 
-vertical-tabs:
+layout-builder-vertical-tabs:
   js:
-    js/vertical-tabs.js: {}
+    js/layout-builder-vertical-tabs.js: {}
   dependencies:
     - core/drupal
-
diff --git a/docroot/modules/humsci/hs_layouts/hs_layouts.module b/docroot/modules/humsci/hs_layouts/hs_layouts.module
index 463e1dd9c9..af6be36c69 100644
--- a/docroot/modules/humsci/hs_layouts/hs_layouts.module
+++ b/docroot/modules/humsci/hs_layouts/hs_layouts.module
@@ -35,6 +35,16 @@ function hs_layouts_plugin_filter_block__layout_builder_alter(&$definitions, &$e
   }
 }
 
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function hs_layouts_preprocess_page(&$variables) {
+  // Load layout-builder-vertical-tabs lib in the layout builder override form.
+  if (\Drupal::routeMatch()->getRouteName() == 'layout_builder.overrides.node.view') {
+    $variables['#attached']['library'][] = 'hs_layouts/layout-builder-vertical-tabs';
+  }
+}
+
 /**
  * Implements hook_preprocess().
  */
diff --git a/docroot/modules/humsci/hs_layouts/js/vertical-tabs.js b/docroot/modules/humsci/hs_layouts/js/layout-builder-vertical-tabs.js
similarity index 100%
rename from docroot/modules/humsci/hs_layouts/js/vertical-tabs.js
rename to docroot/modules/humsci/hs_layouts/js/layout-builder-vertical-tabs.js

From e856027e42396cc9626fbe8a5cf6057881b31223 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 9 Dec 2024 18:58:53 -0600
Subject: [PATCH 45/54] fix(shs-5963): add once library to accordion,add to cal
 and page scroll, and remove text area template and attach library of page
 scroll to field

---
 .../humsci_basic/humsci_basic.libraries.yml   | 57 +++++++++++++++++++
 .../humsci/humsci_basic/humsci_basic.theme    |  1 +
 .../shared/accordion/accordion-toggle-all.js  |  7 ++-
 .../src/js/shared/addtocal/addtocal.js        | 51 ++++++++++-------
 .../src/js/shared/animation/page-scroll.js    | 30 +++++-----
 .../paragraph--hs-text-area.html.twig         |  3 -
 6 files changed, 107 insertions(+), 42 deletions(-)
 delete mode 100644 docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
index cde030a801..3913b0ed28 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.libraries.yml
@@ -1,75 +1,132 @@
 accordion:
   js:
     dist/js/accordion.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 addtocal:
   js:
     dist/js/addtocal.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 carousel-slides-height:
   js:
     dist/js/carousel-slides-height.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 colorbox:
   js:
     dist/js/colorbox.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 editoria11y:
   js:
     dist/js/editoria11y.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 equal-height-grid:
   js:
     dist/js/equal-height-grid.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 linked-cards:
   js:
     dist/js/linked-cards.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 main-content-fallback:
   js:
     dist/js/main-content-fallback.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 main-menu:
   js:
     dist/js/main-menu.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 megamenu:
   js:
     dist/js/megamenu.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 page-scroll-animations:
   js:
     dist/js/page-scroll-animations.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 prefered-reduced-motion:
   js:
     dist/js/prefered-reduced-motion.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 search:
   js:
     dist/js/search.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 secondary-menu:
   js:
     dist/js/secondary-toggler.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 table-pattern:
   js:
     dist/js/table-pattern.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 table-scope:
   js:
     dist/js/table-scope.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 table-wrap:
   js:
     dist/js/table-wrap.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 timeline:
   js:
     dist/js/timeline.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
 
 video-with-caption:
   js:
     dist/js/video-with-caption.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index a4a1c2b371..17d72b35c4 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -266,6 +266,7 @@ function humsci_basic_preprocess_field(&$variables) {
     $variables['#attached']['library'][] = 'humsci_basic/table-wrap';
     $variables['#attached']['library'][] = 'humsci_basic/table-scope';
     $variables['#attached']['library'][] = 'humsci_basic/video-with-caption';
+    $variables['#attached']['library'][] = 'humsci_basic/page-scroll-animations';
   }
 }
 
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js b/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
index 178b819a93..bfac2cd845 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
@@ -1,4 +1,4 @@
-(function (Drupal) {
+(function (Drupal, once) {
 /**
  * Loops through a list of accordions and either opens or closes all items
  *
@@ -50,7 +50,7 @@
   Drupal.behaviors.accordionToggleAllBehavior = {
     attach(context) {
       // Create a list of all accordions on the page
-      const accordionList = [...context.querySelectorAll('details')];
+      const accordionList = once('list-of-all-accordions', 'details', context);
 
       if (accordionList.length >= 1) {
         let allExpanded = false;
@@ -105,4 +105,5 @@
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/addtocal/addtocal.js b/docroot/themes/humsci/humsci_basic/src/js/shared/addtocal/addtocal.js
index a1822a65b1..d34d930f29 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/addtocal/addtocal.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/addtocal/addtocal.js
@@ -1,26 +1,33 @@
-function addToCalAria() {
-  const addToCal = document.querySelectorAll('.addtocal');
-  const body = document.querySelector('body');
+(function (Drupal, once) {
+  Drupal.behaviors.accordionToggleAllBehavior = {
+    attach(context) {
+      function addToCalAria() {
+        const addToCal = once('add-to-cal-event', '.addtocal', context);
+        const body = document.querySelector('body');
 
-  // For each .addtocal button, when clicked, change aria-expanded to true.
-  addToCal.forEach((button) => {
-    button.addEventListener('click', () => {
-      if (button.getAttribute('aria-expanded') === 'true') {
-        button.setAttribute('aria-expanded', 'false');
-      } else {
-        button.setAttribute('aria-expanded', 'true');
-      }
-    });
-  });
+        // For each .addtocal button, when clicked, change aria-expanded to true.
+        addToCal.forEach((button) => {
+          button.addEventListener('click', () => {
+            if (button.getAttribute('aria-expanded') === 'true') {
+              button.setAttribute('aria-expanded', 'false');
+            } else {
+              button.setAttribute('aria-expanded', 'true');
+            }
+          });
+        });
 
-  // When the body except button is clicked, change aria-expanded to false.
-  body.addEventListener('click', (e) => {
-    addToCal.forEach((button) => {
-      if (e.target !== button) {
-        button.setAttribute('aria-expanded', 'false');
+        // When the body except button is clicked, change aria-expanded to false.
+        body.addEventListener('click', (e) => {
+          addToCal.forEach((button) => {
+            if (e.target !== button) {
+              button.setAttribute('aria-expanded', 'false');
+            }
+          });
+        });
       }
-    });
-  });
-}
 
-addToCalAria();
+      addToCalAria();
+    },
+  };
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js b/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
index 0343c7121e..d8d66ef12d 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
@@ -1,21 +1,22 @@
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.pageScrollBehavior = {
     attach(context) {
-      const animationEnhancements = context.querySelector('.hb-has-animation-enhancements');
-      const experimentalFeaturesClass = context.querySelector('.hb-experimental');
-      const experimentalClassesToAnimate = [context.querySelectorAll('.hs-font-lead')];
+      // Selectors for elements
+      const animationEnhancements = once('animation-enhancements', '.hb-has-animation-enhancements', context);
+      const experimentalFeaturesClass = once('experimental-features', '.hb-experimental', context);
+      const experimentalClassesToAnimate = once('experimental-classes', '.hs-font-lead', context);
 
       // The classes of items we want to add animations to
       const classesToAnimate = [
-        context.querySelectorAll('.hb-gradient-hero'),
-        context.querySelectorAll('.hb-gradient-hero__text'),
-        context.querySelectorAll('.hb-gradient-hero__image-wrapper'),
-        context.querySelectorAll('.field-hs-gradient-hero-image'),
-        context.querySelectorAll('.hb-hero-overlay'),
-        context.querySelectorAll('.hb-hero-overlay__text'),
-        context.querySelectorAll('.hb-hero-overlay__image-wrapper'),
-        context.querySelectorAll('.field-hs-hero-image'),
-        context.querySelectorAll('.hs-font-splash'),
+        once('gradient-hero', '.hb-gradient-hero', context),
+        once('gradient-hero-text', '.hb-gradient-hero__text', context),
+        once('gradient-hero-image-wrapper', '.hb-gradient-hero__image-wrapper', context),
+        once('gradient-hero-image', '.field-hs-gradient-hero-image', context),
+        once('hero-overlay', '.hb-hero-overlay', context),
+        once('hero-overlay-text', '.hb-hero-overlay__text', context),
+        once('hero-overlay-image-wrapper', '.hb-hero-overlay__image-wrapper', context),
+        once('hero-image', '.field-hs-hero-image', context),
+        once('font-splash', '.hs-font-splash', context),
       ];
 
       if (experimentalFeaturesClass) {
@@ -42,4 +43,5 @@
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig
deleted file mode 100644
index e9b103b922..0000000000
--- a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--hs-text-area.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{{ attach_library('humsci_basic/page-scroll-animations') }}
-
-{% include '@humsci_basic/components/paragraph.html.twig' %}

From fb5bf621bfaffd0c5101324600b192862cc285c8 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Tue, 10 Dec 2024 12:58:12 -0600
Subject: [PATCH 46/54] fix(shs-5963): add once library to carousels and tables
 related script, create templates for tables in views and attach library to
 them

---
 .../humsci/humsci_basic/humsci_basic.theme    |   3 -
 .../carousel-slides/carousel-slides-height.js |   7 +-
 .../src/js/shared/tables/scope.js             |   9 +-
 .../src/js/shared/tables/table-pattern.js     |   9 +-
 .../humsci_basic/src/js/shared/tables/wrap.js |   9 +-
 .../pattern-table-pattern.html.twig           |   4 +
 .../views/views-view-table.html.twig          | 123 ++++++++++++++++++
 7 files changed, 146 insertions(+), 18 deletions(-)
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/pattern-table-pattern.html.twig
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/views/views-view-table.html.twig

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index 17d72b35c4..c63459494a 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -219,9 +219,6 @@ function humsci_basic_preprocess_we_megamenu_frontend(&$vars) {
  */
 function humsci_basic_preprocess_views_view(&$variables) {
   $view = $variables['view'];
-  $variables['#attached']['library'][] = 'humsci_basic/table-wrap';
-  $variables['#attached']['library'][] = 'humsci_basic/table-pattern';
-
   switch ($view->id()) {
     case 'hs_default_search':
       $variables['#attached']['library'][] = 'humsci_basic/search';
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
index e5a00239da..cfc33466c3 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
@@ -1,10 +1,10 @@
 // This work below applies uniform height to both the Hero Layered Slider (formerly Carousel),
 // the Hero Gradient Slider paragraph component slides.
 // and the Spotlight Slider.
-(function (Drupal, window) {
+(function (Drupal, window, once) {
   Drupal.behaviors.restrictHeightBehavior = {
     attach(context) {
-      const slides = context.querySelectorAll('.paragraph--type--hs-carousel, .paragraph--type--hs-gradient-hero-slider, .paragraph--type--hs-sptlght-slder');
+      const slides = once('restrict-height-slides', '.paragraph--type--hs-carousel, .paragraph--type--hs-gradient-hero-slider, .paragraph--type--hs-sptlght-slder', context);
       // Find slick arrow from hsCarousel.
       const slidesTextboxClasses = '.hb-hero-overlay__text, .hb-gradient-hero__text, .hb-spotlight__text';
       let timeOutFunctionId; // a numeric ID which is used by clearTimeOut to reset the timer
@@ -96,4 +96,5 @@
       }
     },
   };
-}(Drupal, window));
+// eslint-disable-next-line no-undef
+}(Drupal, window, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
index 0edefcd8ca..12bca643cb 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
@@ -3,7 +3,7 @@
  * This improves table accessibility
  */
 
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.addTableScopeAttributes = {
     attach(context) {
     /**
@@ -18,12 +18,13 @@
       }
 
       // set scope attribute on column headers
-      const columnEls = context.querySelectorAll('thead th');
+      const columnEls = once('add-table-scope-col', 'thead th', context);
       setScopeOnElements(columnEls, 'col');
 
       // set scope attribute on row headers
-      const rowEls = context.querySelectorAll('tbody th');
+      const rowEls = once('add-table-scope-row', 'tbody th', context);
       setScopeOnElements(rowEls, 'row');
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
index dfb0b63dfd..5326b1c30a 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
@@ -1,6 +1,6 @@
 // account for different ways in which a table heading may be declared
 
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.updateTableHeaders = {
     attach(context) {
       const div = 'div.hb-table-pattern__header > div.hb-table-pattern__row > div';
@@ -8,10 +8,10 @@
       const paragraph = 'div.hb-table-pattern__header > div.hb-table-pattern__row > p';
 
       // retrieve table column headings
-      const columnHeaders = context.querySelectorAll(`${div}, ${span}, ${paragraph}`);
+      const columnHeaders = once('update-table-headers-col', `${div}, ${span}, ${paragraph}`, context);
 
       // retrieve all rows
-      const tableRows = context.querySelectorAll('.hb-table-row');
+      const tableRows = once('update-table-headers-row', '.hb-table-row', context);
 
       if (tableRows) {
       // For each row in the table
@@ -29,4 +29,5 @@
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
index e3d50dcf10..0e79d71aba 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
@@ -1,4 +1,4 @@
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.wrapTableElements = {
     attach(context) {
       /**
@@ -20,8 +20,8 @@
       }
 
       // Select every table element
-      const elements = context.querySelectorAll('table');
-      const uiPatternTable = context.querySelectorAll('.hb-table-pattern');
+      const elements = once('wrap-table', 'table', context);
+      const uiPatternTable = once('wrap-ui-pattern-table', '.hb-table-pattern', context);
 
       // Wrap every table element
       for (let i = 0; i < elements.length; i++) {
@@ -34,4 +34,5 @@
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/pattern-table-pattern.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/pattern-table-pattern.html.twig
new file mode 100644
index 0000000000..e3f7789dd6
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/pattern-table-pattern.html.twig
@@ -0,0 +1,4 @@
+{{ attach_library('humsci_basic/table-wrap') }}
+{{ attach_library('humsci_basic/table-pattern') }}
+
+{% include '@hs_layouts/table-pattern/table-pattern.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/views/views-view-table.html.twig b/docroot/themes/humsci/humsci_basic/templates/views/views-view-table.html.twig
new file mode 100644
index 0000000000..fdb4728682
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/views/views-view-table.html.twig
@@ -0,0 +1,123 @@
+{#
+/**
+ * @file
+ * Default theme implementation for displaying a view as a table.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ *   - class: HTML classes that can be used to style contextually through CSS.
+ * - title : The title of this group of rows.
+ * - header: The table header columns.
+ *   - attributes: Remaining HTML attributes for the element.
+ *   - content: HTML classes to apply to each header cell, indexed by
+ *   the header's key.
+ *   - default_classes: A flag indicating whether default classes should be
+ *     used.
+ * - caption_needed: Is the caption tag needed.
+ * - caption: The caption for this table.
+ * - accessibility_description: Extended description for the table details.
+ * - accessibility_summary: Summary for the table details.
+ * - rows: Table row items. Rows are keyed by row number.
+ *   - attributes: HTML classes to apply to each row.
+ *   - columns: Row column items. Columns are keyed by column number.
+ *     - attributes: HTML classes to apply to each column.
+ *     - content: The column content.
+ *   - default_classes: A flag indicating whether default classes should be
+ *     used.
+ * - responsive: A flag indicating whether table is responsive.
+ * - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
+ *
+ * @see template_preprocess_views_view_table()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('humsci_basic/table-wrap') }}
+{{ attach_library('humsci_basic/table-scope') }}
+
+{%
+  set classes = [
+    'cols-' ~ header|length,
+    responsive ? 'responsive-enabled',
+    sticky ? 'sticky-enabled',
+  ]
+%}
+<table{{ attributes.addClass(classes) }}>
+  {% if caption_needed %}
+    <caption>
+    {% if caption %}
+      {{ caption }}
+    {% else %}
+      {{ title }}
+    {% endif %}
+    {% if (summary_element is not empty) %}
+      {{ summary_element }}
+    {% endif %}
+    </caption>
+  {% endif %}
+  {% if header %}
+    <thead>
+      <tr>
+        {% for key, column in header %}
+          {% if column.default_classes %}
+            {%
+              set column_classes = [
+                'views-field',
+                'views-field-' ~ fields[key],
+              ]
+            %}
+          {% endif %}
+          <th{{ column.attributes.addClass(column_classes).setAttribute('scope', 'col') }}>
+            {%- if column.wrapper_element -%}
+              <{{ column.wrapper_element }}>
+                {%- if column.url -%}
+                  <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
+                {%- else -%}
+                  {{ column.content }}{{ column.sort_indicator }}
+                {%- endif -%}
+              </{{ column.wrapper_element }}>
+            {%- else -%}
+              {%- if column.url -%}
+                <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
+              {%- else -%}
+                {{- column.content }}{{ column.sort_indicator }}
+              {%- endif -%}
+            {%- endif -%}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+  {% endif %}
+  <tbody>
+    {% for row in rows %}
+      <tr{{ row.attributes }}>
+        {% for key, column in row.columns %}
+          {% if column.default_classes %}
+            {%
+              set column_classes = [
+                'views-field'
+              ]
+            %}
+            {% for field in column.fields %}
+              {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
+            {% endfor %}
+          {% endif %}
+          <td{{ column.attributes.addClass(column_classes) }}>
+            {%- if column.wrapper_element -%}
+              <{{ column.wrapper_element }}>
+              {% for content in column.content %}
+                {{ content.separator }}{{ content.field_output }}
+              {% endfor %}
+              </{{ column.wrapper_element }}>
+            {%- else -%}
+              {% for content in column.content %}
+                {{- content.separator }}{{ content.field_output -}}
+              {% endfor %}
+            {%- endif %}
+          </td>
+        {% endfor %}
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>
\ No newline at end of file

From 09100c3db90af0a65885e12aba217c5de9d7e0f4 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Tue, 10 Dec 2024 16:23:24 -0600
Subject: [PATCH 47/54] fix(shs-5963): add once library to main menu scripts

---
 .../src/js/shared/navigation/collapse-main-menu.js    | 11 ++++++-----
 .../js/shared/navigation/main-menu-nested-toggler.js  |  7 ++++---
 .../src/js/shared/navigation/main-menu-toggle.js      |  9 +++++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
index 482c5a95c7..eff72bd034 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
@@ -4,12 +4,12 @@ import changeNav from './change-nav';
 // which allows users who have JavaScript disabled to navigate.
 // This script collapses the pre-expanded menus so
 // it's ready to use for those w/ JavaScript enabled.
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.collapseMainMenu = {
     attach(context) {
-      const mainToggle = context.querySelector('.hb-main-nav__toggle');
-      const mainNavContent = context.querySelector('.hb-main-nav__menu-lv1');
-      const nestedTogglers = context.querySelectorAll('.hb-nested-toggler');
+      const mainToggle = once('main-toggle-navigation', '.hb-main-nav__toggle', context)[0];
+      const mainNavContent = once('main-nav-content', '.hb-main-nav__menu-lv1', context)[0];
+      const nestedTogglers = once('main-nested-togglers', '.hb-nested-toggler', context);
       const isBelowMobileNavBreakpoint = (window.innerWidth < 992);
 
       // Collapse the main hamburger nav on mobile.
@@ -43,4 +43,5 @@ import changeNav from './change-nav';
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
index 432c07b883..ad99c9f65e 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
@@ -1,10 +1,10 @@
 import changeNav from './change-nav';
 import togglerHandler from './toggler-handler';
 
-(function (Drupal, window) {
+(function (Drupal, window, once) {
   Drupal.behaviors.NestedToggler = {
     attach(context) {
-      const togglers = context.querySelectorAll('.hb-nested-toggler');
+      const togglers = once('nested-toggle-navigation', '.hb-nested-toggler', context);
       const mobileNavBreakpoint = 992;
 
       if (togglers) {
@@ -64,4 +64,5 @@ import togglerHandler from './toggler-handler';
       }
     },
   };
-}(Drupal, window));
+// eslint-disable-next-line no-undef
+}(Drupal, window, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
index 2a2489f087..cc60b8785c 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
@@ -1,10 +1,10 @@
 import changeNav from './change-nav';
 
-(function (Drupal, window) {
+(function (Drupal, window, once) {
   Drupal.behaviors.toggleNavigation = {
     attach(context) {
-      const menuToggle = context.querySelector('.hb-main-nav__toggle');
-      const mainMenu = context.querySelector('.hb-main-nav__menu-lv1');
+      const menuToggle = once('toggle-navigation', '.hb-main-nav__toggle', context)[0];
+      const mainMenu = once('main-menu', '.hb-main-nav__menu-lv1', context)[0];
       const mobileNavBreakpoint = 992;
       let windowWidth;
       let wasDesktopSize;
@@ -45,4 +45,5 @@ import changeNav from './change-nav';
       }
     },
   };
-}(Drupal, window));
+// eslint-disable-next-line no-undef
+}(Drupal, window, once));

From 422f0f4c1587207a6d8962008dee1f6ac4794850 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Tue, 10 Dec 2024 17:00:22 -0600
Subject: [PATCH 48/54] fix(shs-5963): add once library to secondary menu
 scripts

---
 .../src/js/shared/navigation/secondary-toggler.js          | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
index e133fd5a48..a186e83ae1 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
@@ -1,10 +1,10 @@
 import changeNav from './change-nav';
 import togglerHandler from './toggler-handler';
 
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.secondaryToggleNavigation = {
     attach(context) {
-      const togglers = context.querySelectorAll('.hb-secondary-toggler');
+      const togglers = once('secondary-toggler', '.hb-secondary-toggler', context);
 
       if (togglers) {
         for (let i = 0; i < togglers.length; i += 1) {
@@ -29,4 +29,5 @@ import togglerHandler from './toggler-handler';
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));

From 818fc065f4695d7f9d668f5f968c0df222297657 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Wed, 11 Dec 2024 10:01:13 -0600
Subject: [PATCH 49/54] fix(shs-5963): add once library to linked cards, equal
 height grid, video with caption and expand collapse timeline scripts

---
 .../src/js/shared/equal-height-grid/index.js          | 11 ++++++-----
 .../src/js/shared/linked-cards/linked-cards.js        |  7 ++++---
 .../src/js/shared/media/video-with-caption.js         |  7 ++++---
 .../js/shared/timeline/expand-collapse-timeline.js    |  9 +++++----
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
index e6c81f1514..02724e0a85 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
@@ -1,13 +1,13 @@
 import equalHeightGrid from './equal-height-grid';
 import resetHeightGrid from './reset-height-grid';
 
-(function (Drupal, window) {
+(function (Drupal, window, once) {
   Drupal.behaviors.hbStretchVerticalLinkedCards = {
     attach(context) {
       const applyStretchClass = () => {
-        const hasStretchClass = context.querySelector('.hb-stretch-vertical-linked-cards');
-        const verticalLinkedCardTitles = [...context.querySelectorAll('.hb-vertical-linked-card__title')];
-        const cardCollections = context.querySelectorAll('.ptype-hs-collection, .ptype-hs-priv-collection');
+        const hasStretchClass = once('has-stretch-vertical-linked-cards', '.hb-stretch-vertical-linked-cards', context)[0];
+        const verticalLinkedCardTitles = once('vertical-linked-card-title', '.hb-vertical-linked-card__title', context);
+        const cardCollections = once('card-collections', '.ptype-hs-collection, .ptype-hs-priv-collection', context);
 
         // Matches the $su-breakpoint-sm variable. Screen sizes smaller than this variable
         // stack all grid columns making it unnecessary to set a height on cards.
@@ -62,4 +62,5 @@ import resetHeightGrid from './reset-height-grid';
       });
     },
   };
-}(Drupal, window));
+// eslint-disable-next-line no-undef
+}(Drupal, window, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js b/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
index 70b6ff7879..8aaaf3e6cf 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
@@ -1,8 +1,8 @@
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.linkedCardsBehavior = {
     attach(context) {
       // find all hb-vertical-card elements
-      const cards = context.querySelectorAll('.hb-vertical-card, .hb-card--date-stacked, .hb-vertical-linked-card');
+      const cards = once('linked-cards-events', '.hb-vertical-card, .hb-card--date-stacked, .hb-vertical-linked-card', context);
 
       // Loop through each card
       cards.forEach((card) => {
@@ -44,4 +44,5 @@
       });
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js b/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
index 76c693a9a3..b1fc4fed0f 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
@@ -2,10 +2,10 @@
 // This causes issues when there is a video in a figure because the video no longer
 // fills the entire space of the container.
 // This JS sets a width of 100% to figures that contain videos.
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.videoWithCaptionBehavior = {
     attach(context) {
-      const videos = context.querySelectorAll('.field-media-oembed-video');
+      const videos = once('videos-with-caption', '.field-media-oembed-video', context);
 
       if (videos && videos.length > 0) {
         for (let i = 0; i < videos.length; i++) {
@@ -21,4 +21,5 @@
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
index fb67d8524c..cacdde2d04 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
@@ -1,10 +1,10 @@
 // Timelines are expanded by default
 // Find when a timeline has been set to collapsed so that we can
 // adjust the default attribute values
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.timelineCollapseBehavior = {
     attach(context) {
-      const timelineCollapsed = context.querySelectorAll('.hb-timeline__collapsed');
+      const timelineCollapsed = once('collapsed-timeline', '.hb-timeline__collapsed', context);
 
       // Find timeline items are are open inside of timelineCollapsed and close them!
       timelineCollapsed.forEach((timeline) => {
@@ -26,7 +26,7 @@
       });
 
       // When a user clicks on a timeline, update the aria properties accordingly
-      const timelineItems = context.querySelectorAll('.hb-timeline-item');
+      const timelineItems = once('timeline-item-event', '.hb-timeline-item', context);
 
       if (timelineItems) {
         timelineItems.forEach((timelineItem) => {
@@ -72,4 +72,5 @@
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));

From 146897cfaa6f4b7216244845007023426b8f41ce Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Wed, 11 Dec 2024 10:26:09 -0600
Subject: [PATCH 50/54] fix(shs-5963): add once library to colorbox.js, remove
 preprocess of paragraph, attach photo album libraries to the template instead

---
 .../humsci/humsci_basic/humsci_basic.theme    |  5 ---
 .../src/js/shared/photo-album/colorbox.js     | 31 ++++++++++---------
 ...graph--stanford-gallery--default.html.twig | 17 ++++++++++
 ...rd-gallery--hs-gallery-slideshow.html.twig | 17 ++++++++++
 .../su_humsci_gin_admin.theme                 | 12 -------
 ...graph--stanford-gallery--default.html.twig |  6 ++++
 ...rd-gallery--hs-gallery-slideshow.html.twig |  5 +++
 7 files changed, 61 insertions(+), 32 deletions(-)
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--default.html.twig
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig
 create mode 100644 docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--stanford-gallery--default.html.twig
 create mode 100644 docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig

diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index c63459494a..32b732d37d 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -231,11 +231,6 @@ function humsci_basic_preprocess_views_view(&$variables) {
  */
 function humsci_basic_preprocess_paragraph(&$variables) {
   $paragraph = $variables['paragraph'];
-  // Attach library to stanford gallery.
-  if ($paragraph->bundle() == 'stanford_gallery') {
-    $variables['#attached']['library'][] = 'humsci_basic/prefered-reduced-motion';
-    $variables['#attached']['library'][] = 'humsci_basic/colorbox';
-  }
   if ($paragraph->bundle() != 'hs_view') {
     return NULL;
   }
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/photo-album/colorbox.js b/docroot/themes/humsci/humsci_basic/src/js/shared/photo-album/colorbox.js
index 2638c71c31..367894df88 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/photo-album/colorbox.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/photo-album/colorbox.js
@@ -1,15 +1,16 @@
-const attachStanfordColorbox = (context) => {
-  const colorboxElement = context.getElementById('colorbox');
-  if (colorboxElement) {
-    const previousButton = context.getElementById('cboxPrevious');
-    const nextButton = context.getElementById('cboxNext');
-    const slideshowButton = context.getElementById('cboxSlideshow');
-    previousButton.textContent = '« Prev';
-    nextButton.textContent = 'Next »';
-    slideshowButton.textContent = 'Slideshow';
-  }
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  attachStanfordColorbox(document);
-});
+(function (Drupal, once) {
+  Drupal.behaviors.attachStanfordColorbox = {
+    attach(context) {
+      const colorboxElement = once('colorbox', '#colorbox', context);
+      if (colorboxElement) {
+        const previousButton = once('cboxPrevious', '#cboxPrevious', context);
+        const nextButton = once('cboxNext', '#cboxNext', context);
+        const slideshowButton = context.getElementById('cboxSlideshow');
+        if (previousButton) previousButton.textContent = '« Prev';
+        if (nextButton) nextButton.textContent = 'Next »';
+        if (slideshowButton) slideshowButton.textContent = 'Slideshow';
+      }
+    },
+  };
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--default.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--default.html.twig
new file mode 100644
index 0000000000..7a66a8be1d
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--default.html.twig
@@ -0,0 +1,17 @@
+{{ attach_library('humsci_basic/colorbox') }}
+
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished'
+  ]
+%}
+{% block paragraph %}
+  <div{{ attributes.addClass(classes) }}>
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
+{% endblock paragraph %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig
new file mode 100644
index 0000000000..db184bbddf
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig
@@ -0,0 +1,17 @@
+{{ attach_library('humsci_basic/prefered-reduced-motion') }}
+
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished'
+  ]
+%}
+{% block paragraph %}
+  <div{{ attributes.addClass(classes) }}>
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
+{% endblock paragraph %}
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
index 1e99489ee4..5cda033960 100644
--- a/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
+++ b/docroot/themes/humsci/su_humsci_gin_admin/su_humsci_gin_admin.theme
@@ -65,15 +65,3 @@ function su_humsci_gin_admin_preprocess_field(&$variables) {
     $variables['#attached']['library'][] = 'humsci_basic/video-with-caption';
   }
 }
-
-/**
- * Implements hook_preprocess_HOOK().
- */
-function su_humsci_gin_admin_preprocess_paragraph(&$variables) {
-  $paragraph = $variables['paragraph'];
-  // Attach library to stanford gallery.
-  if ($paragraph->bundle() == 'stanford_gallery') {
-    $variables['#attached']['library'][] = 'humsci_basic/prefered-reduced-motion';
-    $variables['#attached']['library'][] = 'humsci_basic/colorbox';
-  }
-}
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--stanford-gallery--default.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--stanford-gallery--default.html.twig
new file mode 100644
index 0000000000..747ec9cb5d
--- /dev/null
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--stanford-gallery--default.html.twig
@@ -0,0 +1,6 @@
+<div class="paragraph-admin-preview">
+  <div{{wrapper_attributes}}>
+    {% include '@humsci_basic/components/paragraph--stanford-gallery--default.html.twig' %}
+  </div>
+</div>
+
diff --git a/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig b/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig
new file mode 100644
index 0000000000..b8354c3ad2
--- /dev/null
+++ b/docroot/themes/humsci/su_humsci_gin_admin/templates/paragraph/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig
@@ -0,0 +1,5 @@
+<div class="paragraph-admin-preview">
+  <div{{wrapper_attributes}}>
+    {% include '@humsci_basic/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig' %}
+  </div>
+</div>

From 57eb19b59a315125cd2804f70597fc9867db4fe8 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Wed, 11 Dec 2024 10:48:52 -0600
Subject: [PATCH 51/54] fix(shs-5963): add once library to main content
 fallback and megamenu

---
 .../main-content-fallback/main-content-fallback.js       | 9 +++++----
 .../humsci/humsci_basic/src/js/shared/megamenu/index.js  | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js b/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
index 4e054280d7..6a2a975fe6 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
@@ -1,12 +1,12 @@
-(function (Drupal) {
+(function (Drupal, once) {
   Drupal.behaviors.addMainContentFallback = {
     attach(context) {
       // Return if main content target is found, nothing to do.
-      if (context.querySelector('#main-content')) {
+      if (once('main-content-target', '#main-content', context)[0]) {
         return;
       }
 
-      const mainElement = context.querySelector('main');
+      const mainElement = once('main-element', 'main', context)[0];
       if (mainElement) {
         mainElement.insertAdjacentHTML(
           'afterbegin',
@@ -15,4 +15,5 @@
       }
     },
   };
-}(Drupal));
+// eslint-disable-next-line no-undef
+}(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
index 1abea115c0..d7e7bb5ecd 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
@@ -1,12 +1,12 @@
-(function (Drupal, window) {
+(function (Drupal, window, once) {
   Drupal.behaviors.megaMenuBehavior = {
     attach(context) {
-      const menu = context.querySelector('.js-megamenu');
+      const menu = once('js-mega-menu', '.js-megamenu', context)[0];
 
       // Because all JS is smashed together instead of using libraries,
       // we need to 'if' all the parent variables we create.
       if (menu) {
-        const menuBtnMobile = context.querySelector('.js-megamenu__mobile-btn');
+        const menuBtnMobile = once('js-megamenu-mobile-btn', '.js-megamenu__mobile-btn', context)[0];
         const menuList = menu.querySelector('.js-megamenu__list--main');
         const menuBtns = menu.querySelectorAll('.js-megamenu__toggle');
         const mobileNavBreakpoint = 992;
@@ -110,4 +110,5 @@
       }
     },
   };
-}(Drupal, window));
+// eslint-disable-next-line no-undef
+}(Drupal, window, once));

From 5d857890dd8ce7064564442fd4655ee00f71f952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Fri, 20 Dec 2024 11:32:23 -0600
Subject: [PATCH 52/54] fix(shs-5963): remove incorrect library from hs_layouts
 layouts definition

---
 docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml b/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
index bb29c9051e..efef339fd3 100644
--- a/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
+++ b/docroot/modules/humsci/hs_layouts/hs_layouts.layouts.yml
@@ -20,7 +20,6 @@ three_column:
   template: layouts/three-column/three-column
   default_region: main
   class: '\Drupal\hs_layouts\Plugin\Layout\HumsciLayout'
-  library: hs_layouts/vertical-tabs
   icon_map:
     - [sidebar_first, main, sidebar_second]
   regions:

From 7b4911c2708a120bc7f734c7dfc59a92ab84f772 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Fri, 20 Dec 2024 11:58:14 -0600
Subject: [PATCH 53/54] fix(shs-5963): template fixes

---
 ...aragraph--stanford-gallery--default.html.twig | 16 +---------------
 ...nford-gallery--hs-gallery-slideshow.html.twig | 16 +---------------
 .../templates/views/views-view-table.html.twig   |  2 +-
 3 files changed, 3 insertions(+), 31 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--default.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--default.html.twig
index 7a66a8be1d..a75f6fc294 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--default.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--default.html.twig
@@ -1,17 +1,3 @@
 {{ attach_library('humsci_basic/colorbox') }}
 
-{%
-  set classes = [
-    'paragraph',
-    'paragraph--type--' ~ paragraph.bundle|clean_class,
-    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
-    not paragraph.isPublished() ? 'paragraph--unpublished'
-  ]
-%}
-{% block paragraph %}
-  <div{{ attributes.addClass(classes) }}>
-    {% block content %}
-      {{ content }}
-    {% endblock %}
-  </div>
-{% endblock paragraph %}
+{% include '@humsci_basic/components/paragraph.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig
index db184bbddf..5c0a8f1335 100644
--- a/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/components/paragraph--stanford-gallery--hs-gallery-slideshow.html.twig
@@ -1,17 +1,3 @@
 {{ attach_library('humsci_basic/prefered-reduced-motion') }}
 
-{%
-  set classes = [
-    'paragraph',
-    'paragraph--type--' ~ paragraph.bundle|clean_class,
-    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
-    not paragraph.isPublished() ? 'paragraph--unpublished'
-  ]
-%}
-{% block paragraph %}
-  <div{{ attributes.addClass(classes) }}>
-    {% block content %}
-      {{ content }}
-    {% endblock %}
-  </div>
-{% endblock paragraph %}
+{% include '@humsci_basic/components/paragraph.html.twig' %}
diff --git a/docroot/themes/humsci/humsci_basic/templates/views/views-view-table.html.twig b/docroot/themes/humsci/humsci_basic/templates/views/views-view-table.html.twig
index fdb4728682..66c29bdce1 100644
--- a/docroot/themes/humsci/humsci_basic/templates/views/views-view-table.html.twig
+++ b/docroot/themes/humsci/humsci_basic/templates/views/views-view-table.html.twig
@@ -120,4 +120,4 @@
       </tr>
     {% endfor %}
   </tbody>
-</table>
\ No newline at end of file
+</table>

From d232b3153b8830a901467aca0cac64d6132624b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Fri, 20 Dec 2024 17:19:41 -0600
Subject: [PATCH 54/54] fix(shs-5963): fixes in js scripts and templates

---
 .../themes/humsci/humsci_basic/.eslintrc.json |  4 +-
 .../humsci/humsci_basic/humsci_basic.theme    |  1 -
 .../shared/accordion/accordion-toggle-all.js  | 44 +++++++++-------
 .../src/js/shared/addtocal/addtocal.js        | 46 ++++++++---------
 .../src/js/shared/animation/page-scroll.js    | 50 +++++++++++--------
 .../carousel-slides/carousel-slides-height.js |  1 -
 .../src/js/shared/equal-height-grid/index.js  | 39 ++++++++++-----
 .../js/shared/linked-cards/linked-cards.js    |  7 ++-
 .../main-content-fallback.js                  | 21 ++++----
 .../src/js/shared/media/video-with-caption.js | 13 +++--
 .../src/js/shared/megamenu/index.js           |  7 +--
 .../shared/navigation/collapse-main-menu.js   | 31 ++++++++----
 .../navigation/main-menu-nested-toggler.js    | 24 ++++++---
 .../js/shared/navigation/main-menu-toggle.js  | 11 ++--
 .../js/shared/navigation/secondary-toggler.js |  1 -
 .../src/js/shared/photo-album/colorbox.js     |  9 ++--
 .../prefered-reduced-motion.js                |  3 +-
 .../src/js/shared/tables/scope.js             | 15 +++---
 .../src/js/shared/tables/table-pattern.js     | 43 +++++++++-------
 .../humsci_basic/src/js/shared/tables/wrap.js | 25 ++++------
 .../timeline/expand-collapse-timeline.js      | 22 +++++---
 .../field--field-media-oembed-video.html.twig |  3 ++
 22 files changed, 246 insertions(+), 174 deletions(-)
 create mode 100644 docroot/themes/humsci/humsci_basic/templates/field/field--field-media-oembed-video.html.twig

diff --git a/docroot/themes/humsci/humsci_basic/.eslintrc.json b/docroot/themes/humsci/humsci_basic/.eslintrc.json
index 70d5eee29c..6641eee547 100644
--- a/docroot/themes/humsci/humsci_basic/.eslintrc.json
+++ b/docroot/themes/humsci/humsci_basic/.eslintrc.json
@@ -7,7 +7,9 @@
     "node": true
   },
   "globals": {
-    "Drupal": "readonly"
+    "Drupal": "readonly",
+    "jQuery": "readonly",
+    "once": "readonly"
   },
   "rules": {
     "no-restricted-globals": 0,
diff --git a/docroot/themes/humsci/humsci_basic/humsci_basic.theme b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
index 32b732d37d..ae7d11e541 100644
--- a/docroot/themes/humsci/humsci_basic/humsci_basic.theme
+++ b/docroot/themes/humsci/humsci_basic/humsci_basic.theme
@@ -257,7 +257,6 @@ function humsci_basic_preprocess_field(&$variables) {
   if (in_array($variables['field_type'], $wysiwyg_types)) {
     $variables['#attached']['library'][] = 'humsci_basic/table-wrap';
     $variables['#attached']['library'][] = 'humsci_basic/table-scope';
-    $variables['#attached']['library'][] = 'humsci_basic/video-with-caption';
     $variables['#attached']['library'][] = 'humsci_basic/page-scroll-animations';
   }
 }
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js b/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
index bfac2cd845..93a1717392 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/accordion/accordion-toggle-all.js
@@ -1,10 +1,10 @@
 (function (Drupal, once) {
-/**
- * Loops through a list of accordions and either opens or closes all items
- *
- * @param {array} expects a list of accordion elements
- * @param {string} expects a string that specifies if all accordions should be opened or closed
- */
+  /**
+   * Loops through a list of accordions and either opens or closes all items
+   *
+   * @param {array} expects a list of accordion elements
+   * @param {string} expects a string that specifies if all accordions should be opened or closed
+   */
   function toggleAllAccordions(accordionList, command) {
     if (command === 'closeAll') {
       accordionList.forEach((accordion) => {
@@ -18,10 +18,10 @@
   }
 
   /**
- * Creates a button element that can act as a toggle for all accordions on a page.
- *
- * @return {element}
- */
+   * Creates a button element that can act as a toggle for all accordions on a page.
+   *
+   * @return {element}
+   */
   function createToggle() {
     const toggleButton = document.createElement('Button');
     toggleButton.innerText = 'Expand All';
@@ -32,11 +32,11 @@
   }
 
   /**
- * Updates the all toggle buttons when one has been clicked depending on whether
- * or not all accordions are being opened or closed.
- * @param {array} expects the list of all accordion toggle buttons on the page
- * @param {string} expects a string that specifies if all accordions should be opened or closed
- */
+   * Updates the all toggle buttons when one has been clicked depending on whether
+   * or not all accordions are being opened or closed.
+   * @param {array} expects the list of all accordion toggle buttons on the page
+   * @param {string} expects a string that specifies if all accordions should be opened or closed
+   */
   function updateToggle(toggleList, command) {
     toggleList.forEach((toggleButton) => {
       if (command === 'closeAll') {
@@ -50,7 +50,7 @@
   Drupal.behaviors.accordionToggleAllBehavior = {
     attach(context) {
       // Create a list of all accordions on the page
-      const accordionList = once('list-of-all-accordions', 'details', context);
+      const accordionList = once('accordion', 'details', context);
 
       if (accordionList.length >= 1) {
         let allExpanded = false;
@@ -68,7 +68,11 @@
         // Create a list of all toggle buttons generated on the page. This has to run
         // after the block of code that loops through the accordion lists and creates
         // the buttons.
-        const allToggleButtons = [...context.querySelectorAll('.hb-accordion-toggle-all')];
+        const allToggleButtons = once(
+          'accordion-toggle-all',
+          '.hb-accordion-toggle-all',
+          context,
+        );
 
         allToggleButtons.forEach((toggleButton) => {
           toggleButton.addEventListener('click', (e) => {
@@ -100,10 +104,12 @@
         });
       }
 
-      if (Object.keys(params).length && Object.prototype.hasOwnProperty.call(params, 'search')) {
+      if (
+        Object.keys(params).length
+        && Object.prototype.hasOwnProperty.call(params, 'search')
+      ) {
         toggleAccordionFromSearch();
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/addtocal/addtocal.js b/docroot/themes/humsci/humsci_basic/src/js/shared/addtocal/addtocal.js
index d34d930f29..3cdab82283 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/addtocal/addtocal.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/addtocal/addtocal.js
@@ -1,33 +1,33 @@
 (function (Drupal, once) {
   Drupal.behaviors.accordionToggleAllBehavior = {
     attach(context) {
-      function addToCalAria() {
-        const addToCal = once('add-to-cal-event', '.addtocal', context);
-        const body = document.querySelector('body');
+      const addToCal = once('addtocal', '.addtocal', context);
 
-        // For each .addtocal button, when clicked, change aria-expanded to true.
-        addToCal.forEach((button) => {
-          button.addEventListener('click', () => {
-            if (button.getAttribute('aria-expanded') === 'true') {
-              button.setAttribute('aria-expanded', 'false');
-            } else {
-              button.setAttribute('aria-expanded', 'true');
-            }
-          });
-        });
+      // Do nothing if no add to cal button found.
+      if (addToCal.length === 0) {
+        return;
+      }
 
-        // When the body except button is clicked, change aria-expanded to false.
-        body.addEventListener('click', (e) => {
-          addToCal.forEach((button) => {
-            if (e.target !== button) {
-              button.setAttribute('aria-expanded', 'false');
-            }
-          });
+      // For each .addtocal button, when clicked, change aria-expanded to true.
+      addToCal.forEach((button) => {
+        button.addEventListener('click', () => {
+          if (button.getAttribute('aria-expanded') === 'true') {
+            button.setAttribute('aria-expanded', 'false');
+          } else {
+            button.setAttribute('aria-expanded', 'true');
+          }
         });
-      }
+      });
 
-      addToCalAria();
+      // When the body except button is clicked, change aria-expanded to false.
+      const body = document.querySelector('body');
+      body.addEventListener('click', (e) => {
+        addToCal.forEach((button) => {
+          if (e.target !== button) {
+            button.setAttribute('aria-expanded', 'false');
+          }
+        });
+      });
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js b/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
index d8d66ef12d..65d2aab0e3 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/animation/page-scroll.js
@@ -2,27 +2,40 @@
   Drupal.behaviors.pageScrollBehavior = {
     attach(context) {
       // Selectors for elements
-      const animationEnhancements = once('animation-enhancements', '.hb-has-animation-enhancements', context);
-      const experimentalFeaturesClass = once('experimental-features', '.hb-experimental', context);
-      const experimentalClassesToAnimate = once('experimental-classes', '.hs-font-lead', context);
+      const animationEnhancements = context.querySelector(
+        '.hb-has-animation-enhancements',
+      );
+      const experimentalFeaturesClass = context.querySelector('.hb-experimental');
+      const experimentalClassesToAnimate = ['.hs-font-lead'];
+
+      // If the animation enhancements are not enabled, do nothing.
+      if (!animationEnhancements) {
+        return;
+      }
 
       // The classes of items we want to add animations to
       const classesToAnimate = [
-        once('gradient-hero', '.hb-gradient-hero', context),
-        once('gradient-hero-text', '.hb-gradient-hero__text', context),
-        once('gradient-hero-image-wrapper', '.hb-gradient-hero__image-wrapper', context),
-        once('gradient-hero-image', '.field-hs-gradient-hero-image', context),
-        once('hero-overlay', '.hb-hero-overlay', context),
-        once('hero-overlay-text', '.hb-hero-overlay__text', context),
-        once('hero-overlay-image-wrapper', '.hb-hero-overlay__image-wrapper', context),
-        once('hero-image', '.field-hs-hero-image', context),
-        once('font-splash', '.hs-font-splash', context),
+        '.hb-gradient-hero',
+        '.hb-gradient-hero__text',
+        '.hb-gradient-hero__image-wrapper',
+        '.field-hs-gradient-hero-image',
+        '.hb-hero-overlay',
+        '.hb-hero-overlay__text',
+        '.hb-hero-overlay__image-wrapper',
+        '.field-hs-hero-image',
+        '.hs-font-splash',
       ];
 
       if (experimentalFeaturesClass) {
         classesToAnimate.push(experimentalClassesToAnimate);
       }
 
+      const elementsToAnimate = once(
+        'page-scroll-animate',
+        classesToAnimate.join(','),
+        context,
+      );
+
       // check if top of element is in viewport
       const isElementVisible = new IntersectionObserver((items) => {
         items.forEach((item) => {
@@ -32,16 +45,9 @@
         });
       });
 
-      if (animationEnhancements) {
-        classesToAnimate.forEach((items) => {
-          if (items) {
-            items.forEach((item) => {
-              isElementVisible.observe(item);
-            });
-          }
-        });
-      }
+      elementsToAnimate.forEach((element) => {
+        isElementVisible.observe(element);
+      });
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
index cfc33466c3..35ba27c625 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
@@ -96,5 +96,4 @@
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, window, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
index 02724e0a85..65d9981b3c 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/equal-height-grid/index.js
@@ -4,34 +4,39 @@ import resetHeightGrid from './reset-height-grid';
 (function (Drupal, window, once) {
   Drupal.behaviors.hbStretchVerticalLinkedCards = {
     attach(context) {
-      const applyStretchClass = () => {
-        const hasStretchClass = once('has-stretch-vertical-linked-cards', '.hb-stretch-vertical-linked-cards', context)[0];
-        const verticalLinkedCardTitles = once('vertical-linked-card-title', '.hb-vertical-linked-card__title', context);
-        const cardCollections = once('card-collections', '.ptype-hs-collection, .ptype-hs-priv-collection', context);
-
+      const applyStretchClass = (container) => {
         // Matches the $su-breakpoint-sm variable. Screen sizes smaller than this variable
         // stack all grid columns making it unnecessary to set a height on cards.
         // See: https://github.com/SU-SWS/decanter/blob/master/core/src/scss/utilities/variables/core/_breakpoints.scss
         const smallScreenBreakpoint = 576;
 
-        Array.prototype.forEach.call(cardCollections, (collection) => {
-          const verticalLinkedCards = [...collection.querySelectorAll('.hb-vertical-linked-card')];
+        const cardCollections = container.querySelectorAll(
+          '.ptype-hs-collection, .ptype-hs-priv-collection',
+        );
+
+        cardCollections.forEach((collection) => {
+          const verticalLinkedCards = [
+            ...collection.querySelectorAll('.hb-vertical-linked-card'),
+          ];
           // Reset any min-heights that were previously set.
           // We need to do this so cards will not have a height set when resizing to small
           // screen sizes.
-          if (hasStretchClass && verticalLinkedCards.length > 0) {
+          if (verticalLinkedCards.length > 0) {
             resetHeightGrid(verticalLinkedCards);
           }
 
+          const verticalLinkedCardTitles = [
+            ...collection.querySelectorAll('.hb-vertical-linked-card__title'),
+          ];
           // Reset any min-heights that were previously set.
           // Because not all Vertical Linked Cards will have a title, this needs a separate
           // if statement.
-          if (hasStretchClass && verticalLinkedCardTitles.length > 0) {
+          if (verticalLinkedCardTitles.length > 0) {
             resetHeightGrid(verticalLinkedCardTitles);
           }
 
           // Only set heights for certain screen sizes
-          if (hasStretchClass && window.innerWidth >= smallScreenBreakpoint) {
+          if (window.innerWidth >= smallScreenBreakpoint) {
             if (verticalLinkedCardTitles.length > 0) {
               // Make the vertical linked card titles AND cards the same max height.
               // The title height has to be set first because it influences the final
@@ -47,20 +52,28 @@ import resetHeightGrid from './reset-height-grid';
           }
         });
       };
+      const stretchContainers = once(
+        'stretch-vertical-linked-cards',
+        '.hb-stretch-vertical-linked-cards',
+        context,
+      );
 
       // Wait a 1 sec for page to load in before setting heights
       setTimeout(() => {
-        applyStretchClass();
+        stretchContainers.forEach((container) => {
+          applyStretchClass(container);
+        });
       }, 1000);
 
       // Recalculate when the window is resized
       window.addEventListener('resize', () => {
         // Wait a half of a second before setting the heights
         setTimeout(() => {
-          applyStretchClass();
+          stretchContainers.forEach((container) => {
+            applyStretchClass(container);
+          });
         }, 500);
       });
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, window, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js b/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
index 8aaaf3e6cf..5b28a2513b 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/linked-cards/linked-cards.js
@@ -2,7 +2,11 @@
   Drupal.behaviors.linkedCardsBehavior = {
     attach(context) {
       // find all hb-vertical-card elements
-      const cards = once('linked-cards-events', '.hb-vertical-card, .hb-card--date-stacked, .hb-vertical-linked-card', context);
+      const cards = once(
+        'linked-cards-events',
+        '.hb-vertical-card, .hb-card--date-stacked, .hb-vertical-linked-card',
+        context,
+      );
 
       // Loop through each card
       cards.forEach((card) => {
@@ -44,5 +48,4 @@
       });
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js b/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
index 6a2a975fe6..2558b41521 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/main-content-fallback/main-content-fallback.js
@@ -1,19 +1,22 @@
 (function (Drupal, once) {
   Drupal.behaviors.addMainContentFallback = {
     attach(context) {
-      // Return if main content target is found, nothing to do.
-      if (once('main-content-target', '#main-content', context)[0]) {
+      const [mainElement] = once('main-content-fallback', 'main', context);
+
+      // No main element or behavior already executed.
+      if (!mainElement) {
         return;
       }
 
-      const mainElement = once('main-element', 'main', context)[0];
-      if (mainElement) {
-        mainElement.insertAdjacentHTML(
-          'afterbegin',
-          '<div id="main-content" class="visually-hidden" tabindex="-1">Main content start</div>',
-        );
+      // Return if main content target is found, nothing to do.
+      if (document.querySelector('#main-content')) {
+        return;
       }
+
+      mainElement.insertAdjacentHTML(
+        'afterbegin',
+        '<div id="main-content" class="visually-hidden" tabindex="-1">Main content start</div>',
+      );
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js b/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
index b1fc4fed0f..38ee32f042 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
@@ -5,12 +5,20 @@
 (function (Drupal, once) {
   Drupal.behaviors.videoWithCaptionBehavior = {
     attach(context) {
-      const videos = once('videos-with-caption', '.field-media-oembed-video', context);
+      const videos = once(
+        'video-with-caption',
+        '.field-media-oembed-video',
+        context,
+      );
 
       if (videos && videos.length > 0) {
         for (let i = 0; i < videos.length; i++) {
           const video = videos[i];
-          if (video.parentNode && video.parentNode.parentNode && video.parentNode.parentNode.nodeName === 'FIGURE') {
+          if (
+            video.parentNode
+            && video.parentNode.parentNode
+            && video.parentNode.parentNode.nodeName === 'FIGURE'
+          ) {
             const figure = video.parentNode.parentNode;
 
             if (figure.classList.contains('caption')) {
@@ -21,5 +29,4 @@
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js b/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
index d7e7bb5ecd..148e4d3da0 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/megamenu/index.js
@@ -6,7 +6,7 @@
       // Because all JS is smashed together instead of using libraries,
       // we need to 'if' all the parent variables we create.
       if (menu) {
-        const menuBtnMobile = once('js-megamenu-mobile-btn', '.js-megamenu__mobile-btn', context)[0];
+        const menuBtnMobile = menu.querySelector('.js-megamenu__mobile-btn');
         const menuList = menu.querySelector('.js-megamenu__list--main');
         const menuBtns = menu.querySelectorAll('.js-megamenu__toggle');
         const mobileNavBreakpoint = 992;
@@ -61,7 +61,9 @@
 
         // Displays nested child menus on mobile
         const expandMobileSubmenus = () => {
-          const activeParent = context.querySelector('.js-megamenu__active-trail');
+          const activeParent = context.querySelector(
+            '.js-megamenu__active-trail',
+          );
           // Only expand menu tree if active-trail exists.
           if (activeParent) {
             const childMenu = activeParent.nextElementSibling;
@@ -110,5 +112,4 @@
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, window, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
index eff72bd034..c111e29628 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/collapse-main-menu.js
@@ -7,13 +7,19 @@ import changeNav from './change-nav';
 (function (Drupal, once) {
   Drupal.behaviors.collapseMainMenu = {
     attach(context) {
-      const mainToggle = once('main-toggle-navigation', '.hb-main-nav__toggle', context)[0];
-      const mainNavContent = once('main-nav-content', '.hb-main-nav__menu-lv1', context)[0];
-      const nestedTogglers = once('main-nested-togglers', '.hb-nested-toggler', context);
-      const isBelowMobileNavBreakpoint = (window.innerWidth < 992);
+      const [mainNav] = once('main-nav-collapse', '.hb-main-nav', context);
+
+      if (!mainNav) {
+        return;
+      }
+
+      const mainToggle = mainNav.querySelector('.hb-main-nav__toggle');
+      const mainNavContent = mainNav.querySelector('.hb-main-nav__menu-lv1');
+      const nestedTogglers = mainNav.querySelectorAll('.hb-nested-toggler');
+      const isBelowMobileNavBreakpoint = window.innerWidth < 992;
 
       // Collapse the main hamburger nav on mobile.
-      if (isBelowMobileNavBreakpoint && mainToggle) {
+      if (isBelowMobileNavBreakpoint && mainNavContent && mainToggle) {
         changeNav(mainToggle, mainNavContent, false);
       }
 
@@ -22,8 +28,12 @@ import changeNav from './change-nav';
         for (let i = 0; i < nestedTogglers.length; i += 1) {
           const toggler = nestedTogglers[i];
           const togglerID = toggler.getAttribute('id');
-          const togglerContent = context.querySelector('[aria-labelledby="'.concat(togglerID, '"]'));
-          const subnavIsActive = !!toggler.parentNode.classList.contains('hb-main-nav__item--active-trail');
+          const togglerContent = context.querySelector(
+            '[aria-labelledby="'.concat(togglerID, '"]'),
+          );
+          const subnavIsActive = !!toggler.parentNode.classList.contains(
+            'hb-main-nav__item--active-trail',
+          );
 
           if (!togglerContent) {
             continue;
@@ -31,7 +41,7 @@ import changeNav from './change-nav';
 
           // On page load, all menus in the active section should be expanded on mobile.
           // All other menus should be hidden.
-          const isExpanded = !!((subnavIsActive && isBelowMobileNavBreakpoint));
+          const isExpanded = !!(subnavIsActive && isBelowMobileNavBreakpoint);
           changeNav(toggler, togglerContent, isExpanded);
         }
       }
@@ -39,9 +49,10 @@ import changeNav from './change-nav';
       // Now that we've manually collapsed the main nav and subnavs,
       // we can remove the "still loading" class and disable the CSS-powered menu suppression.
       if (mainToggle) {
-        context.querySelector('.hb-main-nav--is-still-loading').classList.remove('hb-main-nav--is-still-loading');
+        context
+          .querySelector('.hb-main-nav--is-still-loading')
+          .classList.remove('hb-main-nav--is-still-loading');
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
index ad99c9f65e..48fe95c8d8 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-nested-toggler.js
@@ -4,7 +4,7 @@ import togglerHandler from './toggler-handler';
 (function (Drupal, window, once) {
   Drupal.behaviors.NestedToggler = {
     attach(context) {
-      const togglers = once('nested-toggle-navigation', '.hb-nested-toggler', context);
+      const togglers = once('nested-toggler', '.hb-nested-toggler', context);
       const mobileNavBreakpoint = 992;
 
       if (togglers) {
@@ -12,7 +12,9 @@ import togglerHandler from './toggler-handler';
           let windowWidth = window.innerWidth;
           const toggler = togglers[i];
           const togglerID = toggler.getAttribute('id');
-          const togglerContent = context.querySelector('[aria-labelledby="'.concat(togglerID, '"]'));
+          const togglerContent = context.querySelector(
+            `[aria-labelledby="${togglerID}"]`,
+          );
           const togglerParent = toggler.parentNode;
 
           // Togglers should always have content but in the event that they don't we
@@ -54,15 +56,21 @@ import togglerHandler from './toggler-handler';
           // 1. (focusin) When tabbing through the navigation the previously opened dropdown closes
           // 2. (click) When clicking outside of the dropdown area it will close
           ['focusin', 'click'].forEach((event) => {
-            document.body.addEventListener(event, (e) => {
-              if (windowWidth >= mobileNavBreakpoint && !togglerParent.contains(e.target)) {
-                changeNav(toggler, togglerContent, false);
-              }
-            }, false);
+            document.body.addEventListener(
+              event,
+              (e) => {
+                if (
+                  windowWidth >= mobileNavBreakpoint
+                  && !togglerParent.contains(e.target)
+                ) {
+                  changeNav(toggler, togglerContent, false);
+                }
+              },
+              false,
+            );
           });
         }
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, window, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
index cc60b8785c..8a72a5a460 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/main-menu-toggle.js
@@ -3,8 +3,14 @@ import changeNav from './change-nav';
 (function (Drupal, window, once) {
   Drupal.behaviors.toggleNavigation = {
     attach(context) {
-      const menuToggle = once('toggle-navigation', '.hb-main-nav__toggle', context)[0];
-      const mainMenu = once('main-menu', '.hb-main-nav__menu-lv1', context)[0];
+      const [mainNav] = once('main-nav-toggle', '.hb-main-nav', context);
+
+      if (!mainNav) {
+        return;
+      }
+
+      const menuToggle = mainNav.querySelector('.hb-main-nav__toggle');
+      const mainMenu = mainNav.querySelector('.hb-main-nav__menu-lv1');
       const mobileNavBreakpoint = 992;
       let windowWidth;
       let wasDesktopSize;
@@ -45,5 +51,4 @@ import changeNav from './change-nav';
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, window, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
index a186e83ae1..e9ca2a7d33 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/navigation/secondary-toggler.js
@@ -29,5 +29,4 @@ import togglerHandler from './toggler-handler';
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/photo-album/colorbox.js b/docroot/themes/humsci/humsci_basic/src/js/shared/photo-album/colorbox.js
index 367894df88..fbb5a24c3d 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/photo-album/colorbox.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/photo-album/colorbox.js
@@ -1,16 +1,15 @@
 (function (Drupal, once) {
   Drupal.behaviors.attachStanfordColorbox = {
     attach(context) {
-      const colorboxElement = once('colorbox', '#colorbox', context);
+      const [colorboxElement] = once('colorbox', '#colorbox', context);
       if (colorboxElement) {
-        const previousButton = once('cboxPrevious', '#cboxPrevious', context);
-        const nextButton = once('cboxNext', '#cboxNext', context);
-        const slideshowButton = context.getElementById('cboxSlideshow');
+        const previousButton = colorboxElement.querySelector('#cboxPrevious');
+        const nextButton = colorboxElement.querySelector('#cboxNext');
+        const slideshowButton = colorboxElement('#cboxSlideshow');
         if (previousButton) previousButton.textContent = '« Prev';
         if (nextButton) nextButton.textContent = 'Next »';
         if (slideshowButton) slideshowButton.textContent = 'Slideshow';
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/prefered-reduced-motion/prefered-reduced-motion.js b/docroot/themes/humsci/humsci_basic/src/js/shared/prefered-reduced-motion/prefered-reduced-motion.js
index c5880af66e..2e07a80649 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/prefered-reduced-motion/prefered-reduced-motion.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/prefered-reduced-motion/prefered-reduced-motion.js
@@ -26,5 +26,4 @@
       mediaQuery.addEventListener('change', handleReducedMotionPreference);
     },
   };
-// eslint-disable-next-line no-undef
-}(jQuery, Drupal, window, document));
+}(jQuery, Drupal, window));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
index 12bca643cb..cfd3ed228e 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/scope.js
@@ -6,11 +6,11 @@
 (function (Drupal, once) {
   Drupal.behaviors.addTableScopeAttributes = {
     attach(context) {
-    /**
-     * Set a specific scope attribute value on each element
-     * @param elements
-     * @param scope
-     */
+      /**
+       * Set a specific scope attribute value on each element
+       * @param elements
+       * @param scope
+       */
       function setScopeOnElements(elements, scope) {
         for (let i = 0; i < elements.length; i++) {
           elements[i].setAttribute('scope', scope);
@@ -18,13 +18,12 @@
       }
 
       // set scope attribute on column headers
-      const columnEls = once('add-table-scope-col', 'thead th', context);
+      const columnEls = once('table-scope', 'thead th', context);
       setScopeOnElements(columnEls, 'col');
 
       // set scope attribute on row headers
-      const rowEls = once('add-table-scope-row', 'tbody th', context);
+      const rowEls = once('table-scope', 'tbody th', context);
       setScopeOnElements(rowEls, 'row');
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
index 5326b1c30a..dfd81db07b 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/table-pattern.js
@@ -3,31 +3,38 @@
 (function (Drupal, once) {
   Drupal.behaviors.updateTableHeaders = {
     attach(context) {
-      const div = 'div.hb-table-pattern__header > div.hb-table-pattern__row > div';
-      const span = 'div.hb-table-pattern__header > div.hb-table-pattern__row > span';
-      const paragraph = 'div.hb-table-pattern__header > div.hb-table-pattern__row > p';
+      const tables = once('table-pattern', '.hb-table-pattern', context);
 
-      // retrieve table column headings
-      const columnHeaders = once('update-table-headers-col', `${div}, ${span}, ${paragraph}`, context);
+      tables.forEach((table) => {
+        const div = 'div.hb-table-pattern__header > div.hb-table-pattern__row > div';
+        const span = 'div.hb-table-pattern__header > div.hb-table-pattern__row > span';
+        const paragraph = 'div.hb-table-pattern__header > div.hb-table-pattern__row > p';
 
-      // retrieve all rows
-      const tableRows = once('update-table-headers-row', '.hb-table-row', context);
+        // retrieve table column headings
+        const columnHeaders = table.querySelectorAll(
+          `${div}, ${span}, ${paragraph}`,
+        );
 
-      if (tableRows) {
-      // For each row in the table
-        for (let i = 0; i < tableRows.length; i += 1) {
-        // find the row headers in each cell
-          const tableRowHeaders = tableRows[i].querySelectorAll('.hb-table-row__heading');
+        // retrieve all rows
+        const tableRows = table.querySelectorAll('.hb-table-row');
 
-          // we need h to step through columnHeaders and get the correct heading text
-          for (let h = 0; h < tableRowHeaders.length; h += 1) {
-            if (tableRowHeaders[h].innerHTML !== '') {
-              tableRowHeaders[h].innerHTML = columnHeaders[h].innerHTML;
+        if (tableRows) {
+          // For each row in the table
+          for (let i = 0; i < tableRows.length; i += 1) {
+            // find the row headers in each cell
+            const tableRowHeaders = tableRows[i].querySelectorAll(
+              '.hb-table-row__heading',
+            );
+
+            // we need h to step through columnHeaders and get the correct heading text
+            for (let h = 0; h < tableRowHeaders.length; h += 1) {
+              if (tableRowHeaders[h].innerHTML !== '') {
+                tableRowHeaders[h].innerHTML = columnHeaders[h].innerHTML;
+              }
             }
           }
         }
-      }
+      });
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
index 0e79d71aba..5ab125d8f0 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/tables/wrap.js
@@ -2,14 +2,14 @@
   Drupal.behaviors.wrapTableElements = {
     attach(context) {
       /**
-      * Wrap every table in a class that will allow us to create more responsive styling
-      */
+       * Wrap every table in a class that will allow us to create more responsive styling
+       */
 
       /**
-      * Wrap each element in a new parent
-      * @param elements
-      * @param wrapper
-      */
+       * Wrap each element in a new parent
+       * @param elements
+       * @param wrapper
+       */
       function wrapElement(element) {
         // Create a new div with a special class name
         const wrapper = context.createElement('div');
@@ -19,20 +19,13 @@
         wrapper.appendChild(element);
       }
 
-      // Select every table element
-      const elements = once('wrap-table', 'table', context);
-      const uiPatternTable = once('wrap-ui-pattern-table', '.hb-table-pattern', context);
+      // Select every table and table pattern element
+      const elements = once('table-wrap', 'table, .hb-table-pattern', context);
 
-      // Wrap every table element
+      // Wrap every element
       for (let i = 0; i < elements.length; i++) {
         wrapElement(elements[i]);
       }
-
-      // Wrap every table UI pattern
-      for (let i = 0; i < uiPatternTable.length; i++) {
-        wrapElement(uiPatternTable[i]);
-      }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
index cacdde2d04..ddcfa35d26 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/timeline/expand-collapse-timeline.js
@@ -4,7 +4,11 @@
 (function (Drupal, once) {
   Drupal.behaviors.timelineCollapseBehavior = {
     attach(context) {
-      const timelineCollapsed = once('collapsed-timeline', '.hb-timeline__collapsed', context);
+      const timelineCollapsed = once(
+        'collapsed-timeline',
+        '.hb-timeline__collapsed',
+        context,
+      );
 
       // Find timeline items are are open inside of timelineCollapsed and close them!
       timelineCollapsed.forEach((timeline) => {
@@ -17,7 +21,9 @@
         });
 
         // Find the summary element and update the aria attribute values
-        const summaries = timeline.querySelectorAll('.hb-timeline-item__summary');
+        const summaries = timeline.querySelectorAll(
+          '.hb-timeline-item__summary',
+        );
 
         summaries.forEach((summary) => {
           summary.setAttribute('aria-expanded', 'false');
@@ -26,11 +32,13 @@
       });
 
       // When a user clicks on a timeline, update the aria properties accordingly
-      const timelineItems = once('timeline-item-event', '.hb-timeline-item', context);
+      const timelineItems = once('timeline-item', '.hb-timeline-item', context);
 
       if (timelineItems) {
         timelineItems.forEach((timelineItem) => {
-          const summary = timelineItem.querySelector('.hb-timeline-item__summary');
+          const summary = timelineItem.querySelector(
+            '.hb-timeline-item__summary',
+          );
 
           // Find the value of aria-expanded for a timeline item summary
           let ariaExpanded = summary.getAttribute('aria-expanded');
@@ -67,10 +75,12 @@
         });
       }
 
-      if (Object.keys(params).length && Object.prototype.hasOwnProperty.call(params, 'search')) {
+      if (
+        Object.keys(params).length
+        && Object.prototype.hasOwnProperty.call(params, 'search')
+      ) {
         toggleTimelineFromSearch();
       }
     },
   };
-// eslint-disable-next-line no-undef
 }(Drupal, once));
diff --git a/docroot/themes/humsci/humsci_basic/templates/field/field--field-media-oembed-video.html.twig b/docroot/themes/humsci/humsci_basic/templates/field/field--field-media-oembed-video.html.twig
new file mode 100644
index 0000000000..4bc3dbd061
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/field/field--field-media-oembed-video.html.twig
@@ -0,0 +1,3 @@
+{{ attach_library('humsci_basic/video-with-caption') }}
+
+{% include '@humsci_basic/field/field.html.twig' %}