@asd20/ui-next 2.28.0 → 2.29.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Bug Fixes
+
+* allow an intro message on the handbook page; fix unnecessary focus outlines ([e8c8e09](https://github.com/academydistrict20/asd20-ui-next/commit/e8c8e0965f1f4cef4eb2b8ffa9aacb9b82c0ccc0))
+
 # [2.28.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.27.2...ui-next-v2.28.0) (2026-10-02)
 
 

package/package.json

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

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

@@ -23,7 +23,7 @@
 
     <asd20-page-header
       :heading="title"
-      :lead="metaDescription"
+      :lead="handbookLead"
       :organization="organization"
       :organization-options="organizationOptions"
       :breadcrumb-links="breadcrumbLinks"
@@ -75,38 +75,84 @@
           :class="{ 'is-open': topicsOpen }"
         >
           <li
-            v-for="message in messages"
+            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>
 
       <article
-        v-for="message in messages"
+        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 }"
       >
-        <h2
-          tabindex="-1"
-        >
+        <h2>
           {{ message.heading || message.title }}
         </h2>
+        <div
+          v-if="topicSummary(message)"
+          class="asd20-template-handbook__summary"
+          v-html="topicSummary(message)"
+        />
+        <hr
+          v-if="topicSummary(message)"
+          class="asd20-template-handbook__summary-divider"
+        />
         <asd20-messaging
           v-bind="message"
           heading=""
+          short-description=""
           detail-link=""
         />
       </article>
-      <p v-if="!messages.length">
+      <p v-if="!topicMessages.length">
         No handbook topics are available yet.
       </p>
     </main>
@@ -123,9 +169,9 @@
 </template>
 
 <script>
-import { nextTick } from 'vue'
 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'
@@ -138,6 +184,7 @@ export default {
   components: {
     Asd20SkipTo,
     Asd20Messaging,
+    Asd20Icon,
     Asd20PageHeader,
     Asd20SiteNavigation,
     Asd20NotificationGroup,
@@ -147,21 +194,78 @@ export default {
   mixins: [pageTemplateMixin],
   data: () => ({
     selectedMessageId: null,
+    expandedTopicId: null,
+    subtopicsByMessageId: {},
     topicsOpen: false,
   }),
   computed: {
+    handbookLead() {
+      return this.firstMessage?.shortDescription || this.firstMessage?.summary || this.metaDescription
+    },
+    topicMessages() {
+      return this.messages.slice(1)
+    },
     activeMessage() {
-      return this.messages.find(message => message.id === this.selectedMessageId)
-        || this.messages[0]
+      return this.topicMessages.find(message => message.id === this.selectedMessageId)
+        || this.topicMessages[0]
         || null
     },
   },
+  watch: {
+    messages: {
+      handler() {
+        this.$nextTick(() => this.refreshSubtopics())
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => this.refreshSubtopics())
+  },
   methods: {
+    topicSummary(message) {
+      return message.shortDescription || message.summary || ''
+    },
+    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 nextTick()
-      this.$el.querySelector('.asd20-template-handbook__topic.is-active h2')?.focus()
+      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' })
     },
   },
 }
@@ -189,6 +293,23 @@ export default {
     padding: space(2) space(1);
   }
 
+  &__layout:focus:not(.asd20-tab):not([role='tab']):not(.asd20-focus-trap) {
+    outline: none;
+    box-shadow: none !important;
+  }
+
+  &__summary {
+    @include asd20-font(0.75, var(--website-typography__font-family-body), 1.5);
+    margin-bottom: space(0.5);
+  }
+
+  &__summary-divider {
+    margin: 0 0 space(1);
+    border: 0;
+    border-top: 1px solid currentColor;
+    opacity: 0.25;
+  }
+
   &__index ol {
     display: none;
     list-style: none;
@@ -196,10 +317,51 @@ 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 {
     display: none;
   }
@@ -210,7 +372,8 @@ export default {
     cursor: pointer;
   }
 
-  &__index li button {
+  &__topic-button,
+  &__subtopic-button {
     display: block;
     width: 100%;
     min-height: 44px;
@@ -245,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) {
@@ -256,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 {
@@ -283,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;
   }
 }