From 5895a13caf0e7b78cf6b274781d7432a5c1a0bd1 Mon Sep 17 00:00:00 2001
From: Nick Lyons <nick.lyons@gsa.gov>
Date: Thu, 29 Feb 2024 17:15:43 -0500
Subject: [PATCH 1/6] Refactored template to hide header when summary box
 component is displayed

---
 .../layouts/partials/core/glossary.html       | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/themes/digital.gov/layouts/partials/core/glossary.html b/themes/digital.gov/layouts/partials/core/glossary.html
index cd1104d054..77d03e8bb2 100644
--- a/themes/digital.gov/layouts/partials/core/glossary.html
+++ b/themes/digital.gov/layouts/partials/core/glossary.html
@@ -1,27 +1,31 @@
-<aside
-  class="dg-glossary__container"
-  aria-describedby="dg-glossary__result"
-  aria-hidden="true"
->
-  <button title="Close glossary" class="dg-glossary__close" disabled>
-    <svg
-      class="usa-icon dg-icon dg-icon--large"
-      aria-hidden="true"
-      focusable="true"
-    >
-      <use xlink:href="{{ "/uswds/img/sprite.svg#close" | relURL }}"></use>
-    </svg>
-  </button>
+{{ if isset .Params "glossary" }}
+  <aside
+    class="dg-glossary__container"
+    aria-describedby="dg-glossary__result"
+    aria-hidden="true"
+  >
+    <button title="Close glossary" class="dg-glossary__close" disabled>
+      <svg
+        class="usa-icon dg-icon dg-icon--large"
+        aria-hidden="true"
+        focusable="true"
+      >
+        <use xlink:href="{{ "/uswds/img/sprite.svg#close" | relURL }}"></use>
+      </svg>
+    </button>
 
-  <h2>Glossary</h2>
-  <label for="dg-glossary__search" class="usa-label">Search for a term:</label>
-  <input
-    id="dg-glossary__search"
-    class="dg-glossary__search usa-input"
-    type="text"
-    disabled
-  />
-  <div class="dg-glossary__content" id="dg-glossary__result">
-    <ul class="dg-glossary__list add-list-reset"></ul>
-  </div>
-</aside>
+    <h2>Glossary</h2>
+    <label for="dg-glossary__search" class="usa-label"
+      >Search for a term:</label
+    >
+    <input
+      id="dg-glossary__search"
+      class="dg-glossary__search usa-input"
+      type="text"
+      disabled
+    />
+    <div class="dg-glossary__content" id="dg-glossary__result">
+      <ul class="dg-glossary__list add-list-reset"></ul>
+    </div>
+  </aside>
+{{ end }}

From 24d20a49882b101bfcf96dba0829bcabfb8f197d Mon Sep 17 00:00:00 2001
From: Nick Lyons <nick.lyons@gsa.gov>
Date: Thu, 29 Feb 2024 17:45:29 -0500
Subject: [PATCH 2/6] Refactored conditional to check for nil

---
 themes/digital.gov/layouts/partials/core/glossary.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/digital.gov/layouts/partials/core/glossary.html b/themes/digital.gov/layouts/partials/core/glossary.html
index 77d03e8bb2..6bc23ab63b 100644
--- a/themes/digital.gov/layouts/partials/core/glossary.html
+++ b/themes/digital.gov/layouts/partials/core/glossary.html
@@ -1,4 +1,4 @@
-{{ if isset .Params "glossary" }}
+{{ if ne .Params.glossary nil }}
   <aside
     class="dg-glossary__container"
     aria-describedby="dg-glossary__result"

From f69c7cd513ad099191943f35b5346157b7a1d9d4 Mon Sep 17 00:00:00 2001
From: Nick Lyons <nick.lyons@gsa.gov>
Date: Fri, 1 Mar 2024 10:38:59 -0500
Subject: [PATCH 3/6] Fixed logic to hide header

- [x] tested when glossary is not enabled
- [x] tested when glossary is enabled with summary box
- [x] updated glossary.html to set header class for tagetting to hide in
  summary-box.js
- [x] set conditional to hide/display glossary.html partial based on
  glossary field set in parent _index.md
---
 themes/digital.gov/layouts/guides/single.html |  4 +-
 themes/digital.gov/layouts/landings/list.html |  5 +-
 .../layouts/partials/core/glossary.html       | 56 +++++++++----------
 themes/digital.gov/src/js/summary-box.js      |  2 +-
 4 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/themes/digital.gov/layouts/guides/single.html b/themes/digital.gov/layouts/guides/single.html
index 8e0b2216f4..cca3374f15 100644
--- a/themes/digital.gov/layouts/guides/single.html
+++ b/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 }}
diff --git a/themes/digital.gov/layouts/landings/list.html b/themes/digital.gov/layouts/landings/list.html
index 89e3110b1a..24558cac62 100644
--- a/themes/digital.gov/layouts/landings/list.html
+++ b/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 }}
diff --git a/themes/digital.gov/layouts/partials/core/glossary.html b/themes/digital.gov/layouts/partials/core/glossary.html
index 6bc23ab63b..6893034a04 100644
--- a/themes/digital.gov/layouts/partials/core/glossary.html
+++ b/themes/digital.gov/layouts/partials/core/glossary.html
@@ -1,31 +1,27 @@
-{{ if ne .Params.glossary nil }}
-  <aside
-    class="dg-glossary__container"
-    aria-describedby="dg-glossary__result"
-    aria-hidden="true"
-  >
-    <button title="Close glossary" class="dg-glossary__close" disabled>
-      <svg
-        class="usa-icon dg-icon dg-icon--large"
-        aria-hidden="true"
-        focusable="true"
-      >
-        <use xlink:href="{{ "/uswds/img/sprite.svg#close" | relURL }}"></use>
-      </svg>
-    </button>
-
-    <h2>Glossary</h2>
-    <label for="dg-glossary__search" class="usa-label"
-      >Search for a term:</label
+<aside
+  class="dg-glossary__container"
+  aria-describedby="dg-glossary__result"
+  aria-hidden="true"
+>
+  <button title="Close glossary" class="dg-glossary__close" disabled>
+    <svg
+      class="usa-icon dg-icon dg-icon--large"
+      aria-hidden="true"
+      focusable="true"
     >
-    <input
-      id="dg-glossary__search"
-      class="dg-glossary__search usa-input"
-      type="text"
-      disabled
-    />
-    <div class="dg-glossary__content" id="dg-glossary__result">
-      <ul class="dg-glossary__list add-list-reset"></ul>
-    </div>
-  </aside>
-{{ end }}
+      <use xlink:href="{{ "/uswds/img/sprite.svg#close" | relURL }}"></use>
+    </svg>
+  </button>
+
+  <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"
+    class="dg-glossary__search usa-input"
+    type="text"
+    disabled
+  />
+  <div class="dg-glossary__content" id="dg-glossary__result">
+    <ul class="dg-glossary__list add-list-reset"></ul>
+  </div>
+</aside>
diff --git a/themes/digital.gov/src/js/summary-box.js b/themes/digital.gov/src/js/summary-box.js
index cf1a5b7b9d..2158cd8709 100644
--- a/themes/digital.gov/src/js/summary-box.js
+++ b/themes/digital.gov/src/js/summary-box.js
@@ -10,7 +10,7 @@
 
   const guideSummaryList = guideSummary.querySelector(".usa-list");
   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)"
   );
 
   function createSummaryBox() {

From 6b3b25b7b6e258dc0fd11f0de63b57aa9949f5e7 Mon Sep 17 00:00:00 2001
From: Nick Lyons <nick.lyons@gsa.gov>
Date: Thu, 7 Mar 2024 14:13:09 -0500
Subject: [PATCH 4/6] Added jsdocs to document code

---
 .../layouts/partials/core/glossary.html          |  5 +++++
 themes/digital.gov/src/js/summary-box.js         | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/themes/digital.gov/layouts/partials/core/glossary.html b/themes/digital.gov/layouts/partials/core/glossary.html
index 6893034a04..2351492608 100644
--- a/themes/digital.gov/layouts/partials/core/glossary.html
+++ b/themes/digital.gov/layouts/partials/core/glossary.html
@@ -1,3 +1,8 @@
+{{/* Display a sidebar of glossary terms populated by a json file used on guide pages
+  See example here by clicking on glossary button https://digital.gov/guides/hcd/discovery-concepts/
+*/}}
+
+
 <aside
   class="dg-glossary__container"
   aria-describedby="dg-glossary__result"
diff --git a/themes/digital.gov/src/js/summary-box.js b/themes/digital.gov/src/js/summary-box.js
index 2158cd8709..db18f63374 100644
--- a/themes/digital.gov/src/js/summary-box.js
+++ b/themes/digital.gov/src/js/summary-box.js
@@ -1,7 +1,8 @@
-// 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 and create a top of the page Table of Contents if shortcode is used on the markdown page
+ */
 // eslint-disable-next-line func-names
 (function () {
   const guideSummary = document.querySelector(".dg-guide-summary");
@@ -9,10 +10,17 @@
   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, .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) => {

From e9c8b0f2159956bdd4ad7ae4ab6b63c667dfae1b Mon Sep 17 00:00:00 2001
From: Nick Lyons <nick.lyons@gsa.gov>
Date: Fri, 15 Mar 2024 15:26:45 -0400
Subject: [PATCH 5/6] Updated documentation comments

---
 themes/digital.gov/layouts/partials/core/glossary.html | 8 ++++++--
 themes/digital.gov/src/js/summary-box.js               | 6 ++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/themes/digital.gov/layouts/partials/core/glossary.html b/themes/digital.gov/layouts/partials/core/glossary.html
index 2351492608..1563f4cfe8 100644
--- a/themes/digital.gov/layouts/partials/core/glossary.html
+++ b/themes/digital.gov/layouts/partials/core/glossary.html
@@ -1,5 +1,7 @@
-{{/* Display a sidebar of glossary terms populated by a json file used on guide pages
-  See example here by clicking on glossary button https://digital.gov/guides/hcd/discovery-concepts/
+{{/* 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/
 */}}
 
 
@@ -17,6 +19,8 @@
       <use xlink:href="{{ "/uswds/img/sprite.svg#close" | relURL }}"></use>
     </svg>
   </button>
+  {{/* Used as a hook in `summary-box.js`. */}}
+  <h2 class="dg-glossary__header">Glossary</h2>
 
   <h2 class="dg-glossary__header">Glossary</h2>
   <label for="dg-glossary__search" class="usa-label">Search for a term:</label>
diff --git a/themes/digital.gov/src/js/summary-box.js b/themes/digital.gov/src/js/summary-box.js
index db18f63374..ec6e24dfea 100644
--- a/themes/digital.gov/src/js/summary-box.js
+++ b/themes/digital.gov/src/js/summary-box.js
@@ -1,7 +1,9 @@
 /**
  * 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 and create a top of the page Table of Contents if shortcode is used on the markdown page
+ * 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 () {

From c993905b15e54f172350fa1b3ec407b08cfc164e Mon Sep 17 00:00:00 2001
From: James Mejia <james.mejia@gsa.gov>
Date: Mon, 18 Mar 2024 11:07:29 -0500
Subject: [PATCH 6/6] Remove duplicate h2

---
 themes/digital.gov/layouts/partials/core/glossary.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/themes/digital.gov/layouts/partials/core/glossary.html b/themes/digital.gov/layouts/partials/core/glossary.html
index 056466e9f1..435d2c5809 100644
--- a/themes/digital.gov/layouts/partials/core/glossary.html
+++ b/themes/digital.gov/layouts/partials/core/glossary.html
@@ -20,8 +20,6 @@
     </svg>
   </button>
   {{/* Used as a hook in `summary-box.js`. */}}
-  <h2 class="dg-glossary__header">Glossary</h2>
-
   <h2 class="dg-glossary__header">Glossary</h2>
   <label for="dg-glossary__search" class="usa-label">Search for a term:</label>
   <input