DIGITAL-48: Show Guide Glossary

* Shows the guide glossary terms in a sidebar.
GSA · Jan 2, 2025 · 88da8ec · 88da8ec
1 parent 972f5f9
commit 88da8ec
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/web/themes/custom/digital_gov/templates/node/node--guides.html.twig b/web/themes/custom/digital_gov/templates/node/node--guides.html.twig
@@ -89,8 +89,9 @@
       {{ include('@digital_gov/partials/guides/guide-content.html.twig') }}
     {% endif %}
     {# NOT-MIGRATED #}
-    {# if .Parent.Params.glossary #}
-    {# partial "core/glossary.html" . #}
-    {# endif #}
+
+    {% if node.field_glossary.target_id %}
+      {{ drupal_view('glossary_accordion', 'guide_overlay', node.field_glossary.target_id) }}
+    {% endif %}
   </article>
 </main>
diff --git a/...ustom/digital_gov/templates/views/views-view--glossary-accordion--guide-overlay.html.twig b/...ustom/digital_gov/templates/views/views-view--glossary-accordion--guide-overlay.html.twig
@@ -0,0 +1,27 @@
+<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="/{{ active_theme_path() }}/static/uswds/img/sprite.svg#close"></use>
+    </svg>
+  </button>
+  {# /* 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"
+    class="dg-glossary__search usa-input"
+    type="text"
+    disabled
+  />
+  <div class="dg-glossary__content" id="dg-glossary__result">
+    {{ rows}}
+  </div>
+</aside>
diff --git a/...s/views/views-view-field--glossary-accordion--guide-overlay--description--value.html.twig b/...s/views/views-view-field--glossary-accordion--guide-overlay--description--value.html.twig
@@ -0,0 +1 @@
+<div id="glossary-term-{{ row.index }}" class="dg-glossary__definition" hidden="">{{ output }}</div>
diff --git a/...l_gov/templates/views/views-view-field--glossary-accordion--guide-overlay--name.html.twig b/...l_gov/templates/views/views-view-field--glossary-accordion--guide-overlay--name.html.twig
@@ -0,0 +1,5 @@
+<button class="dg-glossary__term" aria-controls="glossary-term-0" aria-expanded="false">{{ output }}</button>
+<svg id="glossary-term-{{ row.index }}-icon" class="dg-glossary__icon usa-icon dg-icon dg-icon--large" aria-hidden="true" focusable="false" role="img">
+  <use xlink:href="/{{ active_theme_path() }}/static/uswds/img/sprite.svg#expand_more"></use>
+</svg>
+
diff --git a/web/themes/custom/digital_gov/templates/views/views-view-list.html.twig b/web/themes/custom/digital_gov/templates/views/views-view-list.html.twig
@@ -18,10 +18,10 @@
  * @ingroup themeable
  */
 #}
-{% if attributes -%}
+{% if attributes.storage %}
   {# override: changed div to section #}
   <section{{ attributes }}>
-  {% endif %}
+{% endif %}
   {% if title %}
     <h3>{{ title }}</h3>
   {% endif %}
@@ -36,6 +36,6 @@
 
   </{{ list.type }}>
 
-  {% if attributes -%}
+{% if attributes.storage %}
   </section>
 {% endif %}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div id="glossary-term-{{ row.index }}" class="dg-glossary__definition" hidden="">{{ output }}</div>