Merge pull request #7371 from GSA/nl-fix-glossary-bug

Fix glossary header bug

themes/digital.gov/layouts/guides/single.html

@@ -19,7 +19,9 @@
       {{- else -}}
         {{- partial "core/guides/guide-content.html" . -}}
       {{- end -}}
-      {{- partial "core/glossary.html" . -}}
+      {{- if .Parent.Params.glossary -}}
+        {{- partial "core/glossary.html" . -}}
+      {{- end -}}
     </article>
   </main>
 {{ end }}

themes/digital.gov/layouts/landings/list.html

@@ -9,7 +9,6 @@ <h1>{{- .Params.title -}}</h1>
         </a>
       </div>
     </header>
-
     <article class="dg-landing__body grid-container grid-container-desktop">
       <div>
         {{- .Content -}}
@@ -46,6 +45,8 @@ <h2 class="usa-card__heading">
       {{- end -}}
       {{- partial "core/attribution.html" . -}}
     </article>
-    {{- partial "core/glossary.html" . -}}
+    {{- if .Parent.Params.glossary -}}
+      {{- partial "core/glossary.html" . -}}
+    {{- end -}}
   </main>
 {{ end }}

themes/digital.gov/layouts/partials/core/glossary.html

@@ -1,3 +1,10 @@
+{{/* Display a sidebar of glossary terms populated by a json file used on guide pages.
+
+  Example (click on glossary button):
+  https://digital.gov/guides/hcd/discovery-concepts/
+*/}}
+
+
 <aside
   class="dg-glossary__container"
   aria-describedby="dg-glossary__result"
@@ -12,8 +19,8 @@
       <use xlink:href="{{ "uswds/img/sprite.svg#close" | relURL }}"></use>
     </svg>
   </button>
-
-  <h2>Glossary</h2>
+  {{/* Used as a hook in `summary-box.js`. */}}
+  <h2 class="dg-glossary__header">Glossary</h2>
   <label for="dg-glossary__search" class="usa-label">Search for a term:</label>
   <input
     id="dg-glossary__search"

themes/digital.gov/src/js/summary-box.js

@@ -1,18 +1,28 @@
-// Guide Table of Contents
-// Replaces guidenav.js that used Hugo's .TableOfContents with Summary Box component — https://designsystem.digital.gov/components/summary-box/#package
-// Get all H2's and create a top of the page Table of Contents if shortcode is used on the markdown page
+/**
+ * Guide Table of Contents
+ * Replaces guidenav.js that used Hugo's .TableOfContents with USWDS summary-box — https://designsystem.digital.gov/components/summary-box/#package.
+ * Get all H2's on a page and display a bulleted list of links when setting summary_box: true in the front matter of a guide page.
+ * See a live example used on https://digital.gov/guides/dap/common-questions-about-dap/ that displays this page: content/guides/dap/common-questions-about-dap.md.
 
+ */
 // eslint-disable-next-line func-names
 (function () {
   const guideSummary = document.querySelector(".dg-guide-summary");
 
   if (!guideSummary) return;
 
   const guideSummaryList = guideSummary.querySelector(".usa-list");
+  /**
+   * Return a list of h2's 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-guide__content-header-title)"
+    "h2:not(.usa-summary-box__heading, .dg-guide__content-header-title, .dg-glossary__header)"
   );
 
+  /**
+   * Populate the summary box with bulleted list of links created from the current page's h2's
+   */
   function createSummaryBox() {
     const summaryBoxFragment = document.createDocumentFragment();
     pageHeaders.forEach((link) => {