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

Summary

The “Ring” Hugo shortcode adds it to the “On this page” menu in the right sidebar, but the link doesn’t work.

To replicate: click on the “Case Study” or “Additional Resources” sidebar menu link on:

Was developed for the HCD Guide. This only seems to be an issue on Resource pages; not guide or blog pages (example).

Another problem was the the ring.html file has an H2 html tag set for the title, but it displays much smaller than an actual H2 header.

See Trello card 'Fix bug with ring shortcode and menu sidebar'.

Solution

1. Filtered out ring class dg-ring in in-page-nagivation.js.

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";
    }
  });

2. Rebuilt sass because for some reason, content styles for Resource pages was overwriting ring styling.

How To Test

visit any of the preview pages below, check ring headers and style is appropriate	previews
page 1
page 2
page 3

Dev Checklist

[x] PR has correct labels
[x] A11y testing (voice over testing, meets WCAG, run axe tools)
[x] Code is formatted properly

GSA / digitalgov.gov