@asd20/ui-next 2.31.2 → 2.31.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.31.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.31.2...ui-next-v2.31.3) (2026-10-09)
+
+
+### Bug Fixes
+
+* fix test specification for handbook modal ([407d79b](https://github.com/academydistrict20/asd20-ui-next/commit/407d79b2ebe68319661551bddf8944da777a25fc))
+* move download button for handbooks into header; add handbook help button ([4d0ccc9](https://github.com/academydistrict20/asd20-ui-next/commit/4d0ccc9765b68c79492458603954f85418d68895))
+
 ## [2.31.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.31.1...ui-next-v2.31.2) (2026-10-09)
 
 ## [2.31.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.31.0...ui-next-v2.31.1) (2026-10-08)

package/package.json

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

package/src/components/organisms/Asd20PageHeader/index.vue

@@ -140,35 +140,41 @@
     </aside>
 
     <div
-      v-if="callsToAction.length > 0"
+      v-if="hasCallsToAction"
       class="asd20-page-header__call-to-action"
+      :class="{ 'asd20-page-header__call-to-action--custom': $slots['calls-to-action'] }"
     >
-      <asd20-button
-        v-if="callsToAction.length >= 1"
+      <slot
+        name="calls-to-action"
         :size="mq === 'sm' ? 'sm' : 'lg'"
-        :label="callsToAction[0].label"
-        :icon="callsToAction[0].icon"
-        :link="callsToAction[0].url"
-        :tracking-code="callsToAction[0].trackingCode"
-        :public-form-id="callsToAction[0].publicFormId"
-        reversed
-        horizontal
-        centered
-        highlighted
-      />
-      <asd20-button
-        v-if="callsToAction.length >= 2"
-        :size="mq === 'sm' ? 'sm' : 'lg'"
-        :label="callsToAction[1].label"
-        :icon="callsToAction[1].icon"
-        :link="callsToAction[1].url"
-        :tracking-code="callsToAction[1].trackingCode"
-        :public-form-id="callsToAction[1].publicFormId"
-        reversed
-        horizontal
-        centered
-        highlighted
-      />
+      >
+        <asd20-button
+          v-if="callsToAction.length >= 1"
+          :size="mq === 'sm' ? 'sm' : 'lg'"
+          :label="callsToAction[0].label"
+          :icon="callsToAction[0].icon"
+          :link="callsToAction[0].url"
+          :tracking-code="callsToAction[0].trackingCode"
+          :public-form-id="callsToAction[0].publicFormId"
+          reversed
+          horizontal
+          centered
+          highlighted
+        />
+        <asd20-button
+          v-if="callsToAction.length >= 2"
+          :size="mq === 'sm' ? 'sm' : 'lg'"
+          :label="callsToAction[1].label"
+          :icon="callsToAction[1].icon"
+          :link="callsToAction[1].url"
+          :tracking-code="callsToAction[1].trackingCode"
+          :public-form-id="callsToAction[1].publicFormId"
+          reversed
+          horizontal
+          centered
+          highlighted
+        />
+      </slot>
     </div>
     <div
       v-if="fullscreen"
@@ -229,11 +235,12 @@ export default {
     classes() {
       return {
         'asd20-page-header--fullscreen': this.fullscreen,
-        'asd20-page-header--has-cta': this.callsToAction
-          ? this.callsToAction.length > 0
-          : false,
+        'asd20-page-header--has-cta': this.hasCallsToAction,
       }
     },
+    hasCallsToAction() {
+      return Boolean(this.$slots['calls-to-action']) || this.callsToAction.length > 0
+    },
     isDetailPage() {
       if (typeof window === 'undefined') return false
       return (
@@ -503,7 +510,7 @@ export default {
     z-index: 1;
     display: flex;
 
-    .asd20-button {
+    :deep(.asd20-button) {
       box-sizing: border-box;
       flex-shrink: 1;
       min-height: space(2);
@@ -706,7 +713,7 @@ export default {
 
     &__call-to-action {
       margin: space(-1) 60vw space(-1) space(3);
-      .asd20-button {
+      :deep(.asd20-button) {
         font-size: 1rem !important;
         flex-shrink: 0;
         padding: 0.25rem 2rem;
@@ -812,11 +819,25 @@ export default {
 
     &__call-to-action {
       margin: space(-1) 60vw space(-1) space(3);
-      .asd20-button {
+      :deep(.asd20-button) {
         font-size: 1rem !important;
         flex-shrink: 0;
       }
     }
   }
 }
+// Keep custom interactive CTAs usable when labels wrap on narrow screens.
+.asd20-page-header .asd20-page-header__call-to-action--custom {
+  flex-wrap: wrap;
+  gap: space(0.5);
+  margin-right: space(1);
+
+  :deep(.asd20-button) {
+    min-height: 44px;
+  }
+
+  :deep(.asd20-button:not(:last-child)) {
+    margin-right: 0;
+  }
+}
 </style>

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

@@ -35,6 +35,22 @@
       :language-code="languageCode"
       @update:languageCode="$emit('update:languageCode', $event)"
     >
+      <template #calls-to-action="{ size }">
+        <slot
+          name="header-actions"
+          :size="size"
+        />
+        <asd20-button
+          label="Handbook Help"
+          :size="size"
+          aria-haspopup="dialog"
+          data-asd20-print-hide
+          reversed
+          horizontal
+          centered
+          @click="handbookHelpOpen = true"
+        />
+      </template>
       <template #top>
         <asd20-notification-group
           class="asd20-notification-group--floating"
@@ -49,6 +65,45 @@
 
     <slot name="document-actions" />
 
+    <div
+      class="asd20-template-handbook__help"
+      data-asd20-print-hide
+    >
+      <asd20-modal
+        :open="handbookHelpOpen"
+        title="All About Handbooks"
+        dismissable
+        windowed
+        @update:open="handbookHelpOpen = $event"
+      >
+        <asd20-viewport
+          class="asd20-template-handbook__help-content"
+          scrollable
+        >
+          <h3>Handbook Downloads</h3>
+          <p>
+            Our handbooks are available on our website and as a PDF download. We continuously update our handbooks and you'll always see the latest version online. Since downloaded or printed documents can become out-of-date, always check the online version for the most recent information.
+          </p>
+          <p>
+            When you download a PDF of the handbook, it may be dated prior to the date you download it. That's because there are no changes since that date.
+          </p>
+          <p>
+            We ask families to acknowledge that they've read the handbook prior to the start of the school year.
+          </p>
+          <h3>Alternate Languages</h3>
+          <p>
+            Our handbooks are presented in English. You can use the translate button at the top of the page to view the handbook in your preferred language.
+          </p>
+          <p>
+            <strong>Coming Soon:</strong> if you are viewing the handbook in a language other than English, and click Download PDF, you'll get a handbook version in that selected language.
+          </p>
+          <p>
+            Translations are automated and are not verified by a native speaker.
+          </p>
+        </asd20-viewport>
+      </asd20-modal>
+    </div>
+
     <asd20-print-header
       v-if="documentPrint"
       :organization-title="organization?.title || organization?.name || ''"
@@ -204,6 +259,9 @@
 import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
 import Asd20Messaging from '../../../components/atoms/Asd20Messaging'
 import Asd20Icon from '../../../components/atoms/Asd20Icon'
+import Asd20Button from '../../atoms/Asd20Button'
+import Asd20Modal from '../../molecules/Asd20Modal'
+import Asd20Viewport from '../../atoms/Asd20Viewport'
 import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
 import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
 import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
@@ -222,6 +280,9 @@ export default {
     Asd20SkipTo,
     Asd20Messaging,
     Asd20Icon,
+    Asd20Button,
+    Asd20Modal,
+    Asd20Viewport,
     Asd20PageHeader,
     Asd20SiteNavigation,
     Asd20NotificationGroup,
@@ -245,6 +306,7 @@ export default {
     selectedMessageId: null,
     expandedTopicId: null,
     topicsOpen: false,
+    handbookHelpOpen: false,
   }),
   computed: {
     handbookDocument() {
@@ -337,6 +399,20 @@ export default {
   min-width: 0;
   margin-top: space(2.25);
 
+  &__help .asd20-modal {
+    max-width: 44rem;
+    color: var(--website-page__foreground-color);
+  }
+
+  &__help-content {
+    padding: space(1);
+
+    p {
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+  }
+
   &__layout {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
@@ -519,6 +595,8 @@ export default {
 
 @media print {
   .asd20-template-handbook {
+    &__help,
+    .asd20-page-header__call-to-action,
     &__index {
       display: none;
     }