@asd20/ui-next 2.28.1 → 2.29.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.29.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.28.1...ui-next-v2.29.0) (2026-10-02)
+
+
+### Features
+
+* **handbook:** add expandable H2 subtopics to index ([ac65b77](https://github.com/academydistrict20/asd20-ui-next/commit/ac65b778538ea118855cb876d712909ae038a679))
+
 ## [2.28.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.28.0...ui-next-v2.28.1) (2026-10-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.28.1",
+  "version": "2.29.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/templates/Asd20HandbookTemplate/index.vue

@@ -78,13 +78,50 @@
             v-for="message in topicMessages"
             :key="message.id"
           >
-            <button
-              type="button"
-              :aria-current="activeMessage && activeMessage.id === message.id ? 'true' : null"
-              @click="selectTopic(message.id)"
+            <div class="asd20-template-handbook__topic-row">
+              <button
+                class="asd20-template-handbook__topic-button"
+                type="button"
+                :aria-current="activeMessage && activeMessage.id === message.id ? 'true' : null"
+                @click="selectTopic(message.id)"
+              >
+                {{ message.heading || message.title }}
+              </button>
+              <button
+                v-if="subtopicsFor(message.id).length"
+                class="asd20-template-handbook__expand-button"
+                type="button"
+                :aria-expanded="expandedTopicId === message.id"
+                :aria-controls="`handbook-subtopics-${message.id}`"
+                :aria-label="`${expandedTopicId === message.id ? 'Hide' : 'Show'} sections in ${message.heading || message.title}`"
+                @click="toggleTopic(message.id)"
+              >
+                <asd20-icon
+                  name="chevron"
+                  size="sm"
+                  focusable="false"
+                />
+              </button>
+            </div>
+            <ol
+              v-if="subtopicsFor(message.id).length"
+              v-show="expandedTopicId === message.id"
+              :id="`handbook-subtopics-${message.id}`"
+              class="asd20-template-handbook__subtopics"
             >
-              {{ message.heading || message.title }}
-            </button>
+              <li
+                v-for="subtopic in subtopicsFor(message.id)"
+                :key="subtopic.index"
+              >
+                <button
+                  class="asd20-template-handbook__subtopic-button"
+                  type="button"
+                  @click="selectSubtopic(message.id, subtopic.index)"
+                >
+                  {{ subtopic.label }}
+                </button>
+              </li>
+            </ol>
           </li>
         </ol>
       </nav>
@@ -92,6 +129,7 @@
       <article
         v-for="message in topicMessages"
         :key="message.id"
+        :data-message-id="message.id"
         class="asd20-template-handbook__topic"
         :class="{ 'is-active': activeMessage && activeMessage.id === message.id }"
       >
@@ -133,6 +171,7 @@
 <script>
 import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
 import Asd20Messaging from '../../../components/atoms/Asd20Messaging'
+import Asd20Icon from '../../../components/atoms/Asd20Icon'
 import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
 import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
 import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
@@ -145,6 +184,7 @@ export default {
   components: {
     Asd20SkipTo,
     Asd20Messaging,
+    Asd20Icon,
     Asd20PageHeader,
     Asd20SiteNavigation,
     Asd20NotificationGroup,
@@ -154,6 +194,8 @@ export default {
   mixins: [pageTemplateMixin],
   data: () => ({
     selectedMessageId: null,
+    expandedTopicId: null,
+    subtopicsByMessageId: {},
     topicsOpen: false,
   }),
   computed: {
@@ -169,13 +211,61 @@ export default {
         || null
     },
   },
+  watch: {
+    messages: {
+      handler() {
+        this.$nextTick(() => this.refreshSubtopics())
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => this.refreshSubtopics())
+  },
   methods: {
     topicSummary(message) {
       return message.shortDescription || message.summary || ''
     },
-    selectTopic(messageId) {
+    topicArticle(messageId) {
+      return Array.from(this.$el.querySelectorAll('.asd20-template-handbook__topic'))
+        .find(article => article.dataset.messageId === String(messageId))
+    },
+    subtopicsFor(messageId) {
+      return this.subtopicsByMessageId[messageId] || []
+    },
+    refreshSubtopics() {
+      const nextSubtopics = {}
+      this.topicMessages.forEach(message => {
+        const article = this.topicArticle(message.id)
+        if (!article) return
+        const headings = Array.from(article.querySelectorAll('.asd20-rich-body-content h2'))
+        const subtopics = headings
+          .map((heading, index) => ({ index, label: heading.textContent.trim() }))
+          .filter(subtopic => subtopic.label)
+        if (subtopics.length) nextSubtopics[message.id] = subtopics
+      })
+      if (JSON.stringify(nextSubtopics) !== JSON.stringify(this.subtopicsByMessageId)) {
+        this.subtopicsByMessageId = nextSubtopics
+      }
+    },
+    toggleTopic(messageId) {
+      this.expandedTopicId = this.expandedTopicId === messageId ? null : messageId
+    },
+    async selectTopic(messageId) {
       this.selectedMessageId = messageId
+      this.expandedTopicId = this.subtopicsFor(messageId).length ? messageId : null
       this.topicsOpen = false
+      await this.$nextTick()
+      this.topicArticle(messageId)?.scrollIntoView({ block: 'start' })
+    },
+    async selectSubtopic(messageId, headingIndex) {
+      this.selectedMessageId = messageId
+      this.expandedTopicId = messageId
+      this.topicsOpen = false
+      await this.$nextTick()
+      const article = this.topicArticle(messageId)
+      const headings = article?.querySelectorAll('.asd20-rich-body-content h2')
+      headings?.[headingIndex]?.scrollIntoView({ block: 'start' })
     },
   },
 }
@@ -227,8 +317,49 @@ export default {
     padding: 0;
   }
 
-  &__index ol.is-open {
+  &__index ol.is-open,
+  &__index ol.is-open ol.asd20-template-handbook__subtopics {
+    display: block;
+  }
+
+  &__subtopics {
+    padding-left: space(0.75) !important;
+  }
+
+  &__topic-row {
+    display: flex;
+    align-items: stretch;
+  }
+
+  &__topic-button {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__expand-button {
+    display: grid;
+    place-items: center;
+    flex: 0 0 44px;
+    min-height: 44px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+  }
+
+  &__expand-button .asd20-icon {
     display: block;
+    color: inherit;
+    transform: rotate(90deg);
+    transition: transform 180ms ease-in-out;
+  }
+
+  &__expand-button[aria-expanded='true'] .asd20-icon {
+    transform: rotate(180deg);
+  }
+
+  &__subtopic-button {
+    font-size: 0.9em !important;
   }
 
   &__index-heading {
@@ -241,7 +372,8 @@ export default {
     cursor: pointer;
   }
 
-  &__index li button {
+  &__topic-button,
+  &__subtopic-button {
     display: block;
     width: 100%;
     min-height: 44px;
@@ -276,6 +408,11 @@ export default {
 
   &__topic {
     min-width: 0;
+    scroll-margin-top: space(2);
+  }
+
+  &__topic .asd20-rich-body-content h2 {
+    scroll-margin-top: space(2);
   }
 
   &__topic:not(.is-active) {
@@ -287,8 +424,8 @@ export default {
   .asd20-template-handbook {
     &__layout {
       grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
-      gap: space(3);
-      padding: space(3);
+      gap: space(2);
+      padding: space(2);
     }
 
     &__index {
@@ -314,6 +451,17 @@ export default {
   .asd20-template-handbook {
     margin-left: space(3);
     margin-top: 0;
+    &__layout {
+      grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr);
+      gap: space(3);
+      padding: space(3);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .asd20-template-handbook__expand-button .asd20-icon {
+    transition: none;
   }
 }