@asd20/ui-next 2.31.8 → 2.32.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.32.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.31.8...ui-next-v2.32.0) (2026-10-12)
+
+
+### Features
+
+* share handbook translations with multilingual PDF downloads ([a034f23](https://github.com/academydistrict20/asd20-ui-next/commit/a034f237a2021e92376a0ff511f1380286221266))
+
 ## [2.31.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.31.7...ui-next-v2.31.8) (2026-10-12)
 
 

package/package.json

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

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

@@ -2,6 +2,8 @@
   <div
     class="asd20-handbook-document"
     :data-asd20-document-root="documentId"
+    :lang="languageCode"
+    :dir="languageDirection"
   >
     <header class="asd20-handbook-document__cover">
       <div class="asd20-handbook-document__cover-heading">
@@ -13,10 +15,17 @@
           v-if="organization.logoImageUrl"
           class="asd20-handbook-document__logo"
           :src="organization.logoImageUrl"
-          :alt="`${coverTitle.organizationTitle} logo`"
+          :alt="`${coverTitle.organizationTitle} ${documentLabels.logo || 'logo'}`"
         />
       </div>
       <div class="asd20-handbook-document__cover-body">
+        <p
+          v-if="languageCode !== 'en'"
+          class="asd20-handbook-document__translation-notice"
+        >
+          {{ documentLabels.automatedTranslation }}
+          {{ documentLabels.onlineAuthority }}
+        </p>
         <asd20-messaging
           :body-content="messages[0]?.bodyContent || ''"
           :body-json="messages[0]?.bodyJson || ''"
@@ -24,7 +33,10 @@
         />
       </div>
     </header>
-    <asd20-print-contents :headings="document.headings" />
+    <asd20-print-contents
+      :headings="document.headings"
+      :label="documentLabels.contents || 'Contents'"
+    />
     <main>
       <article
         v-for="entry in document.entries"
@@ -75,11 +87,14 @@ export default {
     printMetadata: { type: Object, default: () => ({}) },
     includeIntroductionBody: { type: Boolean, default: true },
     schoolYear: { type: String, default: '' },
+    languageCode: { type: String, default: 'en' },
+    languageDirection: { type: String, default: 'ltr' },
+    documentLabels: { type: Object, default: () => ({}) },
   },
   computed: {
     document() { return buildHandbookDocument(this.$props) },
     coverTitle() {
-      return handbookCoverTitle(this.organization, this.document.introduction.heading || this.title, this.printMetadata.generatedAt || new Date().toISOString())
+      return handbookCoverTitle(this.organization, this.document.introduction.heading || this.title, this.printMetadata.generatedAt || new Date().toISOString(), this.documentLabels)
     },
   },
 }

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

@@ -34,6 +34,8 @@
       :organization-options="organizationOptions"
       :breadcrumb-links="breadcrumbLinks"
       :language-code="languageCode"
+      :lang="contentLanguageCode || languageCode || 'en'"
+      :dir="contentDirection"
       @update:languageCode="$emit('update:languageCode', $event)"
     >
       <template #calls-to-action="{ size }">
@@ -95,7 +97,10 @@
           <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>
+          <p v-if="translatedPdfAvailable">
+            When the handbook has finished translating, Download PDF provides a version in that language.
+          </p>
+          <p v-else>
             <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>
@@ -123,6 +128,8 @@
 
     <main
       id="handbook-content"
+      :lang="contentLanguageCode || languageCode || 'en'"
+      :dir="contentDirection"
       class="asd20-template-handbook__layout"
       tabindex="-1"
     >
@@ -299,6 +306,9 @@ export default {
   },
   props: {
     documentPrint: { type: Boolean, default: false },
+    contentLanguageCode: { type: String, default: '' },
+    contentDirection: { type: String, default: 'ltr' },
+    translatedPdfAvailable: { type: Boolean, default: false },
     printMetadata: { type: Object, default: () => ({}) },
     publicationDocumentId: { type: String, default: 'handbook' },
     publicationDocumentUrl: { type: String, default: '' },

package/src/helpers/handbookPresentation.js

@@ -30,35 +30,38 @@ export function isDistrictHandbook(organization = {}) {
   )
 }
 
-function handbookTitles(organization, firstMessageTitle) {
+function handbookTitles(organization, firstMessageTitle, labels = {}) {
   const organizationTitle = isDistrictHandbook(organization)
     ? 'Academy District 20'
     : organization.title || organization.name || 'School'
   const handbookTitle = isDistrictHandbook(organization)
-    ? firstMessageTitle || 'School Handbook'
-    : 'School Handbook'
+    ? firstMessageTitle || labels.schoolHandbook || 'School Handbook'
+    : labels.schoolHandbook || 'School Handbook'
   return { organizationTitle, handbookTitle }
 }
 
 export function handbookCoverTitle(
   organization = {},
   firstMessageTitle = '',
-  generatedAt
+  generatedAt,
+  labels = {}
 ) {
-  const { organizationTitle, handbookTitle } = handbookTitles(organization, firstMessageTitle)
+  const { organizationTitle, handbookTitle } = handbookTitles(organization, firstMessageTitle, labels)
   return { organizationTitle, handbookTitle: `${handbookSchoolYear(generatedAt)} ${handbookTitle}` }
 }
 
-export function handbookFooterTitle(organization = {}, firstMessageTitle = '') {
-  const { organizationTitle, handbookTitle } = handbookTitles(organization, firstMessageTitle)
+export function handbookFooterTitle(organization = {}, firstMessageTitle = '', labels = {}) {
+  const { organizationTitle, handbookTitle } = handbookTitles(organization, firstMessageTitle, labels)
   return `${organizationTitle} ${handbookTitle}`
 }
 
 export function handbookDownloadFilename(
   organization = {},
   generatedAt,
-  firstMessageTitle = ''
+  firstMessageTitle = '',
+  language = 'en'
 ) {
+  if (!/^[a-z]{2,3}(?:-[A-Za-z]{2,8})?$/.test(language)) throw new Error('Invalid handbook language.')
   const safe = (value) =>
     String(value || '')
       .replace(/[^a-zA-Z0-9_. ()-]/g, '')
@@ -69,5 +72,5 @@ export function handbookDownloadFilename(
   const title = isDistrictHandbook(organization)
     ? `ASD20 ${safe(firstMessageTitle) || 'School Handbook'}`
     : `${abbreviation ? abbreviation + ' ' : ''}School Handbook`
-  return `${title} - ${year}-${month}-${day}.pdf`
+  return `${title}${language === 'en' ? '' : ` (${language})`} - ${year}-${month}-${day}.pdf`
 }