Merge pull request #7727 from GSA/tc-fix-ring-shortcode

Remove ring header from in-page-nav, fix style bug for h2

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");
@@ -17,4 +20,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
   inPageNavHeader.removeAttribute("tabindex");
   relatedItems.before(inPageNav);
+
+  // 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);
+
+    if (targetElement && targetElement.closest(".dg-ring")) {
+      const newItem = item;
+      newItem.style.display = "none";
+    }
+  });
 });

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,6 +23,7 @@
 
   h2 {
     @include u-font("sans", "lg");
+    font-size: size("sans", 11);
     font-weight: font-weight("semibold");
   }
 }