From ade96382955afc68588504d0796881b82706ab6e Mon Sep 17 00:00:00 2001
From: Tyson Cheung <tyson.cheung@gsa.gov>
Date: Tue, 18 Jun 2024 17:10:30 -0400
Subject: [PATCH 1/6] Implement Summary box for ring shortcode (test)

---
 .../an-introduction-to-digital-governance.md  |  1 +
 .../digital.gov/layouts/shortcodes/ring.html  | 65 +++++++++++++++++++
 2 files changed, 66 insertions(+)

diff --git a/content/resources/an-introduction-to-digital-governance.md b/content/resources/an-introduction-to-digital-governance.md
index bfc7a8439f..0430b646e8 100644
--- a/content/resources/an-introduction-to-digital-governance.md
+++ b/content/resources/an-introduction-to-digital-governance.md
@@ -19,6 +19,7 @@ topics:
 weight: 5
 
 slug: an-introduction-to-digital-governance
+summary_box: true
 
 ---
 
diff --git a/themes/digital.gov/layouts/shortcodes/ring.html b/themes/digital.gov/layouts/shortcodes/ring.html
index 2f14573d85..561e16ab05 100644
--- a/themes/digital.gov/layouts/shortcodes/ring.html
+++ b/themes/digital.gov/layouts/shortcodes/ring.html
@@ -29,3 +29,68 @@ <h2 id="{{ $randomHeaderID }}" class="dg-ring__title">
   </h2>
   {{ .Inner | markdownify }}
 </article>
+
+<script>
+  (function () {
+    const resourceContainer = document.querySelector(
+      ".usa-in-page-nav-container"
+    );
+    if (!resourceContainer) return;
+
+    const summaryBox = document.createElement("div");
+    summaryBox.classList.add("usa-summary-box");
+    summaryBox.setAttribute("role", "region");
+    summaryBox.setAttribute("aria-labelledby", "summary-box-key-information");
+
+    const summaryBoxBody = document.createElement("div");
+    summaryBoxBody.classList.add("usa-summary-box__body");
+
+    const summaryBoxHeading = document.createElement("h2");
+    summaryBoxHeading.classList.add("usa-summary-box__heading");
+    summaryBoxHeading.id = "summary-box-key-information";
+    summaryBoxHeading.textContent = "On this page";
+
+    const summaryBoxText = document.createElement("div");
+    summaryBoxText.classList.add("usa-summary-box__text");
+
+    const tocList = document.createElement("ul");
+    tocList.classList.add("usa-list");
+    summaryBoxText.appendChild(tocList);
+
+    summaryBoxBody.appendChild(summaryBoxHeading);
+    summaryBoxBody.appendChild(summaryBoxText);
+    summaryBox.appendChild(summaryBoxBody);
+
+    resourceContainer.insertBefore(summaryBox, resourceContainer.firstChild);
+
+    /**
+     * Return a list of h2's and ring shortcode titles to display in the summary box
+     * and filter out h2's we do not want to show with the :not selector
+     */
+    const pageHeaders = document.querySelectorAll(
+      "h2:not(.usa-summary-box__heading), .dg-ring__title"
+    );
+
+    /**
+     * Populate the summary box with bulleted list of links created from the current page's h2's and ring shortcode titles
+     */
+    function createSummaryBox() {
+      const summaryBoxFragment = document.createDocumentFragment();
+      pageHeaders.forEach((link) => {
+        const summaryListItem = document.createElement("li");
+        const summaryLink = Object.assign(document.createElement("a"), {
+          class: "usa-summary-box__link",
+          href: `#${link.id || link.firstElementChild.id}`,
+          innerHTML: `${
+            link.textContent || link.firstElementChild.textContent
+          }`,
+        });
+        summaryListItem.appendChild(summaryLink);
+        summaryBoxFragment.appendChild(summaryListItem);
+      });
+      tocList.appendChild(summaryBoxFragment);
+    }
+
+    createSummaryBox();
+  })();
+</script>

From c9a665d4e8845220286d2d0f34796f0a5ae568f4 Mon Sep 17 00:00:00 2001
From: Tyson Cheung <tyson.cheung@gsa.gov>
Date: Thu, 20 Jun 2024 13:00:50 -0400
Subject: [PATCH 2/6] Remove header in in-page nav for rings

---
 .../an-introduction-to-digital-governance.md  |  1 -
 .../digital.gov/layouts/shortcodes/ring.html  | 65 -------------------
 .../digital.gov/src/js/in-page-navigation.js  | 11 ++++
 3 files changed, 11 insertions(+), 66 deletions(-)

diff --git a/content/resources/an-introduction-to-digital-governance.md b/content/resources/an-introduction-to-digital-governance.md
index 0430b646e8..bfc7a8439f 100644
--- a/content/resources/an-introduction-to-digital-governance.md
+++ b/content/resources/an-introduction-to-digital-governance.md
@@ -19,7 +19,6 @@ topics:
 weight: 5
 
 slug: an-introduction-to-digital-governance
-summary_box: true
 
 ---
 
diff --git a/themes/digital.gov/layouts/shortcodes/ring.html b/themes/digital.gov/layouts/shortcodes/ring.html
index 561e16ab05..2f14573d85 100644
--- a/themes/digital.gov/layouts/shortcodes/ring.html
+++ b/themes/digital.gov/layouts/shortcodes/ring.html
@@ -29,68 +29,3 @@ <h2 id="{{ $randomHeaderID }}" class="dg-ring__title">
   </h2>
   {{ .Inner | markdownify }}
 </article>
-
-<script>
-  (function () {
-    const resourceContainer = document.querySelector(
-      ".usa-in-page-nav-container"
-    );
-    if (!resourceContainer) return;
-
-    const summaryBox = document.createElement("div");
-    summaryBox.classList.add("usa-summary-box");
-    summaryBox.setAttribute("role", "region");
-    summaryBox.setAttribute("aria-labelledby", "summary-box-key-information");
-
-    const summaryBoxBody = document.createElement("div");
-    summaryBoxBody.classList.add("usa-summary-box__body");
-
-    const summaryBoxHeading = document.createElement("h2");
-    summaryBoxHeading.classList.add("usa-summary-box__heading");
-    summaryBoxHeading.id = "summary-box-key-information";
-    summaryBoxHeading.textContent = "On this page";
-
-    const summaryBoxText = document.createElement("div");
-    summaryBoxText.classList.add("usa-summary-box__text");
-
-    const tocList = document.createElement("ul");
-    tocList.classList.add("usa-list");
-    summaryBoxText.appendChild(tocList);
-
-    summaryBoxBody.appendChild(summaryBoxHeading);
-    summaryBoxBody.appendChild(summaryBoxText);
-    summaryBox.appendChild(summaryBoxBody);
-
-    resourceContainer.insertBefore(summaryBox, resourceContainer.firstChild);
-
-    /**
-     * Return a list of h2's and ring shortcode titles to display in the summary box
-     * and filter out h2's we do not want to show with the :not selector
-     */
-    const pageHeaders = document.querySelectorAll(
-      "h2:not(.usa-summary-box__heading), .dg-ring__title"
-    );
-
-    /**
-     * Populate the summary box with bulleted list of links created from the current page's h2's and ring shortcode titles
-     */
-    function createSummaryBox() {
-      const summaryBoxFragment = document.createDocumentFragment();
-      pageHeaders.forEach((link) => {
-        const summaryListItem = document.createElement("li");
-        const summaryLink = Object.assign(document.createElement("a"), {
-          class: "usa-summary-box__link",
-          href: `#${link.id || link.firstElementChild.id}`,
-          innerHTML: `${
-            link.textContent || link.firstElementChild.textContent
-          }`,
-        });
-        summaryListItem.appendChild(summaryLink);
-        summaryBoxFragment.appendChild(summaryListItem);
-      });
-      tocList.appendChild(summaryBoxFragment);
-    }
-
-    createSummaryBox();
-  })();
-</script>
diff --git a/themes/digital.gov/src/js/in-page-navigation.js b/themes/digital.gov/src/js/in-page-navigation.js
index 453fd938d2..b2476b8d0c 100644
--- a/themes/digital.gov/src/js/in-page-navigation.js
+++ b/themes/digital.gov/src/js/in-page-navigation.js
@@ -17,4 +17,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
   inPageNavHeader.removeAttribute("tabindex");
   relatedItems.before(inPageNav);
+
+  // Filter out items within .dg-ring
+  navItems.forEach((item) => {
+    const targetId = item.querySelector("a").getAttribute("href").slice(1);
+    const targetElement = document.getElementById(targetId);
+
+    if (targetElement && targetElement.closest(".dg-ring")) {
+      const newItem = item;
+      newItem.style.display = 'none';
+    }
+  });
 });

From 69b63f9131d00f21360c5f25361d15b6a466ba2f Mon Sep 17 00:00:00 2001
From: Tyson Cheung <tyson.cheung@gsa.gov>
Date: Thu, 20 Jun 2024 13:02:49 -0400
Subject: [PATCH 3/6] format prettier

---
 themes/digital.gov/src/js/in-page-navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/digital.gov/src/js/in-page-navigation.js b/themes/digital.gov/src/js/in-page-navigation.js
index b2476b8d0c..fa691d2892 100644
--- a/themes/digital.gov/src/js/in-page-navigation.js
+++ b/themes/digital.gov/src/js/in-page-navigation.js
@@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     if (targetElement && targetElement.closest(".dg-ring")) {
       const newItem = item;
-      newItem.style.display = 'none';
+      newItem.style.display = "none";
     }
   });
 });

From d250a403b387996762ca13245d112e8476d4bd95 Mon Sep 17 00:00:00 2001
From: Tyson Cheung <tyson.cheung@gsa.gov>
Date: Thu, 20 Jun 2024 15:22:07 -0400
Subject: [PATCH 4/6] Rebuild scss for ring

---
 themes/digital.gov/src/js/in-page-navigation.js       | 2 +-
 themes/digital.gov/src/scss/new/shortcodes/_ring.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/themes/digital.gov/src/js/in-page-navigation.js b/themes/digital.gov/src/js/in-page-navigation.js
index fa691d2892..9decdcb7dd 100644
--- a/themes/digital.gov/src/js/in-page-navigation.js
+++ b/themes/digital.gov/src/js/in-page-navigation.js
@@ -18,7 +18,7 @@ document.addEventListener("DOMContentLoaded", () => {
   inPageNavHeader.removeAttribute("tabindex");
   relatedItems.before(inPageNav);
 
-  // Filter out items within .dg-ring
+  // Filter out items with ring class
   navItems.forEach((item) => {
     const targetId = item.querySelector("a").getAttribute("href").slice(1);
     const targetElement = document.getElementById(targetId);
diff --git a/themes/digital.gov/src/scss/new/shortcodes/_ring.scss b/themes/digital.gov/src/scss/new/shortcodes/_ring.scss
index 1eb5f9b71a..56bb3a0ba1 100644
--- a/themes/digital.gov/src/scss/new/shortcodes/_ring.scss
+++ b/themes/digital.gov/src/scss/new/shortcodes/_ring.scss
@@ -23,6 +23,7 @@
 
   h2 {
     @include u-font("sans", "lg");
+    font-size: 1.75rem;
     font-weight: font-weight("semibold");
   }
 }

From fe57f2627335330c67bc237b66953266becf5b73 Mon Sep 17 00:00:00 2001
From: Nick Lyons <nick.lyons@gsa.gov>
Date: Fri, 21 Jun 2024 10:45:34 -0400
Subject: [PATCH 5/6] Improved comments for code

---
 themes/digital.gov/src/js/in-page-navigation.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/themes/digital.gov/src/js/in-page-navigation.js b/themes/digital.gov/src/js/in-page-navigation.js
index 9decdcb7dd..d0828cbadc 100644
--- a/themes/digital.gov/src/js/in-page-navigation.js
+++ b/themes/digital.gov/src/js/in-page-navigation.js
@@ -1,3 +1,6 @@
+// Only show the in-page navigation when 3 or more nav items are present on the page
+// Only display h2's as the primary nav items and set h3 and h4 sub-items to display: none
+
 document.addEventListener("DOMContentLoaded", () => {
   const relatedItems = document.querySelector("[data-related-items]");
   const inPageNav = document.querySelector(".usa-in-page-nav__nav");
@@ -18,7 +21,7 @@ document.addEventListener("DOMContentLoaded", () => {
   inPageNavHeader.removeAttribute("tabindex");
   relatedItems.before(inPageNav);
 
-  // Filter out items with ring class
+  // Hide nav links when they are a child of a ring component
   navItems.forEach((item) => {
     const targetId = item.querySelector("a").getAttribute("href").slice(1);
     const targetElement = document.getElementById(targetId);

From 00c4e0ad24839720f9ed5435ff9a7521a59a7d86 Mon Sep 17 00:00:00 2001
From: Tyson Cheung <tyson.cheung@gsa.gov>
Date: Fri, 21 Jun 2024 13:02:17 -0400
Subject: [PATCH 6/6] Minor style changes for header

---
 themes/digital.gov/src/scss/new/shortcodes/_ring.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/digital.gov/src/scss/new/shortcodes/_ring.scss b/themes/digital.gov/src/scss/new/shortcodes/_ring.scss
index 56bb3a0ba1..9d934d64ca 100644
--- a/themes/digital.gov/src/scss/new/shortcodes/_ring.scss
+++ b/themes/digital.gov/src/scss/new/shortcodes/_ring.scss
@@ -10,7 +10,7 @@
   position: relative;
 
   &__title {
-    $font-size: units(3);
+    $font-size: units(4);
 
     background: color("white");
     font-size: $font-size;
@@ -23,7 +23,7 @@
 
   h2 {
     @include u-font("sans", "lg");
-    font-size: 1.75rem;
+    font-size: size("sans", 11);
     font-weight: font-weight("semibold");
   }
 }