fix(unity-bootstrap-theme): fix long accordion scroll issue

# Conflicts:
#	packages/shared/utils/scroll-helper.d.ts
#	packages/shared/utils/scroll-helper.js
#	packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
#	packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.examples.stories.js
#	packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.templates.stories.js
#	packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.test.js
#	shared/utils/index.js

Author: scott-williams-az

packages/shared/utils/index.d.ts

@@ -6,3 +6,4 @@ export * from "./numbers";
 export * from "./script-utils";
 export * from "./timers";
 export * from "./deep-cloner";
+export * from "./scroll-helper";

packages/shared/utils/index.js

@@ -6,3 +6,4 @@ export * from "./numbers";
 export * from "./script-utils";
 export * from "./timers";
 export * from "./deep-cloner";
+export * from "./scroll-helper";

packages/shared/utils/scroll-helper.d.ts

@@ -0,0 +1 @@
+export function adjustShrinkingElementIfAboveViewport(element: any): void;

packages/shared/utils/scroll-helper.js

@@ -0,0 +1,17 @@
+// @ts-check
+export function adjustShrinkingElementIfAboveViewport(element) {
+  if(element && typeof element.getBoundingClientRect === "function") {
+
+    const {bottom:inViewportHeight, top, } = element.getBoundingClientRect();
+    const {offsetTop } = element;
+    if(top < 0 && inViewportHeight > 0) {
+      const savedStyle = element.style;
+      element.style = `${savedStyle};transition: height 0s !important; overflow:hidden; height:${inViewportHeight}px!important;max-height:${inViewportHeight}px!important`;
+      window.scrollTo({behavior:"instant", top: offsetTop });
+      setTimeout(()=>{
+        element.style = savedStyle;
+        window.scrollTo({behavior:"smooth", top: element.offsetTop - inViewportHeight/2 });
+      }, 50);
+    }
+  }
+}

packages/unity-bootstrap-theme/src/js/collapse.js

@@ -0,0 +1,23 @@
+import { adjustShrinkingElementIfAboveViewport } from "@shared";
+
+import { EventHandler } from "./bootstrap-helper";
+
+function initCollapse() {
+  function accordionClick({target}) {
+    const targetHref = target.getAttribute("href");
+    if (target.getAttribute("data-bs-toggle") !== "collapse" || !targetHref || !targetHref.includes("#")) {
+      return; // Exit the function - not a collapse link
+    }
+
+    /**
+     * Find the first accordion that is currently collapsing or expanding
+     * Function will determine if scroll adjustment is needed
+     */
+    adjustShrinkingElementIfAboveViewport(document.querySelector(".collapsing"));
+  }
+  EventHandler.on(document, "click.uds.collapse", accordionClick);
+}
+
+EventHandler.on(window, "load.uds.collapse", initCollapse);
+
+export { initCollapse };

packages/unity-bootstrap-theme/src/js/unity-bootstrap.js

@@ -5,6 +5,7 @@ import { initCalendar } from "./calendar.js";
 import { initCardBodies } from "./card-bodies.js";
 import { initRankingCard } from "./card-ranking.js";
 import { initChart } from "./charts-and-graphs.js";
+import { initCollapse } from "./collapse.js";
 import { initDataLayer } from "./data-layer.js";
 import { initGlobalHeader } from "./global-header.js";
 import { initHeroesVideo } from "./heroes-video.js";
@@ -19,6 +20,7 @@ const unityBootstrap = {
   initAnchorMenu,
   initBlockquoteAnimation,
   initCalendar,
+  initCollapse,
   initChart,
   initDataLayer,
   initFixedTable,

packages/unity-bootstrap-theme/src/scss/extends/_cards.scss

@@ -696,7 +696,13 @@ Cards - Table of Contents
 7. Accordion
 --------------------------------------------------------------------*/
 .accordion {
-
+  &:focus {
+    outline: none!important;
+    box-shadow: 0 0 0 1px $uds-color-base-gray-7 !important;
+    border: 1px solid $uds-color-base-gray-7 !important;
+    margin: 4px;
+    width: -webkit-fill-available;
+  }
   .accordion-item {
     border-bottom: 1px solid $uds-color-base-gray-3;
     border-top: 1px solid $uds-color-base-gray-3;