Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix glossary header bug #7371

Merged
merged 10 commits into from
Mar 26, 2024
4 changes: 3 additions & 1 deletion themes/digital.gov/layouts/guides/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
Comment on lines +22 to +24
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check if .Parent page has glossary field set. This refers to the root _index.md in the guide directory.

</article>
</main>
{{ end }}
5 changes: 3 additions & 2 deletions themes/digital.gov/layouts/landings/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ <h1>{{- .Params.title -}}</h1>
</a>
</div>
</header>

<article class="dg-landing__body grid-container grid-container-desktop">
<div>
{{- .Content -}}
Expand Down Expand Up @@ -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 }}
7 changes: 6 additions & 1 deletion themes/digital.gov/layouts/partials/core/glossary.html
nick-mon1 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
{{/* Display a sidebar of glossary terms populated by a json file used on guide pages
nick-mon1 marked this conversation as resolved.
Show resolved Hide resolved
See example here by clicking on glossary button https://digital.gov/guides/hcd/discovery-concepts/
nick-mon1 marked this conversation as resolved.
Show resolved Hide resolved
*/}}


<aside
class="dg-glossary__container"
aria-describedby="dg-glossary__result"
Expand All @@ -13,7 +18,7 @@
</svg>
</button>

<h2>Glossary</h2>
<h2 class="dg-glossary__header">Glossary</h2>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added class as a hook for the javascript.

nick-mon1 marked this conversation as resolved.
Show resolved Hide resolved
<label for="dg-glossary__search" class="usa-label">Search for a term:</label>
<input
id="dg-glossary__search"
Expand Down
18 changes: 13 additions & 5 deletions themes/digital.gov/src/js/summary-box.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,26 @@
// 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
*/
nick-mon1 marked this conversation as resolved.
Show resolved Hide resolved
// 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)"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This query acts as "blacklist" of headers to not in the summary box component depending on the page it is called from.

);

/**
* Populate the summary box with bulleted list of links created from the current page's h2's
*/
function createSummaryBox() {
nick-mon1 marked this conversation as resolved.
Show resolved Hide resolved
const summaryBoxFragment = document.createDocumentFragment();
pageHeaders.forEach((link) => {
Expand Down