@asd20/ui-next 2.35.1 → 2.35.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.35.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.35.2...ui-next-v2.35.3) (2026-11-09)
+
+
+### Bug Fixes
+
+* give transcript requests a prominent alternate path in the student records form ([1250f67](https://github.com/academydistrict20/asd20-ui-next/commit/1250f6773bfa0047a234ea064463408cf4e51713))
+
+## [2.35.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.35.1...ui-next-v2.35.2) (2026-11-04)
+
+
+### Bug Fixes
+
+* restore previous sidebar scroll behavior for handbook template ([ff72930](https://github.com/academydistrict20/asd20-ui-next/commit/ff729302a2596d87928aee3a419e345d841fa910))
+
 ## [2.35.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.35.0...ui-next-v2.35.1) (2026-11-04)
 
 

package/package.json

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

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

@@ -49,8 +49,37 @@
         novalidate
         @submit.prevent="validateBeforeCaptcha"
       >
+        <asd20-public-form-field
+          v-if="requestTypeField"
+          class="asd20-public-form-modal__requester-choice asd20-public-form-modal__records-choice"
+          :field="requestTypeField"
+          :input-id="fieldId('requesterType')"
+          :model-value="values.requesterType"
+          :errors="validationErrors.requesterType || []"
+          :show-pristine-validation-errors="false"
+          @update:modelValue="updateValue('requesterType', $event)"
+        />
+
+        <section v-if="isStudentRecordsForm && values.requesterType === 'transcriptOnly'">
+          <h3>Request a Transcript</h3>
+          <p>
+            For transcripts, graduation verification or replacement diplomas,
+            please use our dedicated Transcripts and Diplomas page.
+          </p>
+          <p>
+            <a :href="transcriptsHref">Go to Transcripts and Diplomas</a>
+          </p>
+        </section>
+
+        <template v-if="isStudentRecordsForm && showRequestFields">
+          <h3>{{ recordsRequestTitle }}</h3>
+          <p v-if="requestTypeDescription">
+            {{ requestTypeDescription }}
+          </p>
+        </template>
+
         <p
-          v-if="formDefinition.introduction"
+          v-if="showRequestFields && formDefinition.introduction"
           class="asd20-public-form-modal__introduction"
         >
           <template v-if="inlineIntroductionParts">
@@ -65,7 +94,7 @@
         </p>
         <p
           v-if="
-            formDefinition.introductionLink &&
+            showRequestFields && formDefinition.introductionLink &&
               !formDefinition.introductionLink.inline
           "
         >
@@ -128,6 +157,7 @@
         </div>
 
         <div
+          v-if="showRequestFields"
           class="asd20-public-form-modal__submit"
           aria-live="polite"
         >
@@ -197,6 +227,29 @@
         </div>
       </form>
     </asd20-viewport>
+
+    <asd20-modal
+      :open="open && showTranscriptReminder"
+      title="Transcript-only request"
+      dismissable
+      @dismiss="showTranscriptReminder = false"
+    >
+      <asd20-viewport scrollable>
+        <p>
+          You selected only a transcript. Most transcript-only requests should be
+          submitted through our Transcripts and Diplomas page.
+        </p>
+        <p>
+          <a :href="transcriptsHref">Go to Transcripts and Diplomas</a>
+        </p>
+        <asd20-button
+          label="Back to request"
+          horizontal
+          bordered
+          @click="showTranscriptReminder = false"
+        />
+      </asd20-viewport>
+    </asd20-modal>
   </asd20-modal>
 </template>
 
@@ -221,6 +274,11 @@ import {
   submitPublicForm,
 } from '../../../helpers/publicForms'
 import createComponentInstanceId from '../../../utils/createComponentInstanceId'
+import {
+  studentRecordsPresentation,
+  studentRecordsSubmissionValues,
+  usesStudentRecordsRouting,
+} from '../../../helpers/studentRecordsRequest'
 
 const DEFAULT_CAPTCHA_SITEKEY = '6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX'
 
@@ -253,6 +311,9 @@ export default {
       instanceId,
       honeypotId: `${instanceId}-website`,
       formDefinition: null,
+      serviceDefinition: null,
+      transcriptsHref: 'https://www.asd20.org/transcripts-and-diplomas/',
+      showTranscriptReminder: false,
       values: {},
       honeypot: '',
       validationErrors: {},
@@ -271,12 +332,15 @@ export default {
     canSubmit() {
       return Boolean(
         this.formDefinition &&
+        this.showRequestFields &&
         !this.sending &&
         validatePublicFormValues(this.formDefinition, this.values).valid
       )
     },
     visibleFields() {
       return (this.formDefinition?.fields || [])
+        .filter(field => !this.isStudentRecordsForm ||
+          (this.showRequestFields && field.name !== 'requesterType'))
         .filter(field => isPublicFormFieldVisible(field, this.values))
         .map(field => ({
           ...field,
@@ -286,6 +350,27 @@ export default {
     modalTitle() {
       return this.formDefinition?.title || 'Public Form'
     },
+    isStudentRecordsForm() {
+      return usesStudentRecordsRouting(this.formDefinition)
+    },
+    requestTypeField() {
+      return this.isStudentRecordsForm
+        ? this.formDefinition.fields.find(field => field.name === 'requesterType')
+        : null
+    },
+    showRequestFields() {
+      return !this.isStudentRecordsForm ||
+        ['schoolTransfer', 'studentRecords'].includes(this.values.requesterType)
+    },
+    recordsRequestTitle() {
+      return this.values.requesterType === 'schoolTransfer'
+        ? 'School Transfer Records Request'
+        : 'Student Records Request (FERPA Requests Only)'
+    },
+    requestTypeDescription() {
+      return this.serviceDefinition?.fields.find(field => field.name === 'requesterType')
+        ?.options.find(option => option.value === this.values.requesterType)?.description
+    },
     inlineIntroductionParts() {
       const introduction = this.formDefinition?.introduction || ''
       const link = this.formDefinition?.introductionLink
@@ -371,6 +456,7 @@ export default {
       this.validationErrors = {}
       this.validationAttempted = false
       this.honeypot = ''
+      this.showTranscriptReminder = false
 
       try {
         const expectedId = normalizeFormId(this.formId)
@@ -387,11 +473,13 @@ export default {
           )
         if (sequence !== this.loadSequence) return
 
-        this.formDefinition = normalized
-        this.values = createPublicFormValues(normalized)
+        this.serviceDefinition = normalized
+        this.formDefinition = studentRecordsPresentation(normalized)
+        this.values = createPublicFormValues(this.formDefinition)
       } catch (_error) {
         if (sequence !== this.loadSequence) return
         this.formDefinition = null
+        this.serviceDefinition = null
         this.definitionError =
           'This form could not be loaded. Please try again later or use another contact option on this page.'
         this.$nextTick(() => this.$refs.definitionError?.focus?.())
@@ -406,6 +494,15 @@ export default {
       return field.showCharacterCount === true
     },
     updateValue(name, value) {
+      if (this.isStudentRecordsForm && name === 'requesterType' && this.values[name] !== value) {
+        this.values.transferRecordTypes = []
+        this.values.otherRecordsDescription = ''
+        this.showTranscriptReminder = false
+        this.validationErrors = {}
+        this.validationAttempted = false
+        this.feedbackMessage = ''
+        this.submissionFailed = false
+      }
       this.values[name] = value
       for (const field of this.formDefinition.fields) {
         if (!isPublicFormFieldVisible(field, this.values)) {
@@ -416,7 +513,7 @@ export default {
       if (this.validationAttempted) this.validate(false)
     },
     validate(focusSummary = true) {
-      if (!this.formDefinition) return false
+      if (!this.formDefinition || !this.showRequestFields) return false
       const result = validatePublicFormValues(this.formDefinition, this.values)
       this.values = result.values
       this.validationErrors = result.errors
@@ -428,12 +525,21 @@ export default {
       return result.valid
     },
     validateBeforeCaptcha(event) {
-      if (this.sending || !this.validate()) {
+      if (this.sending || !this.validate() || this.checkTranscriptOnly()) {
         event?.preventDefault?.()
         return false
       }
       return true
     },
+    checkTranscriptOnly() {
+      if (this.isStudentRecordsForm &&
+        this.values.transferRecordTypes.length === 1 &&
+        this.values.transferRecordTypes[0] === 'academicRecords') {
+        this.showTranscriptReminder = true
+        return true
+      }
+      return false
+    },
     focusField(name) {
       document.getElementById(this.fieldId(name))?.focus?.()
     },
@@ -480,7 +586,7 @@ export default {
       this.$nextTick(() => this.$refs.feedback?.focus?.())
     },
     async submitForm(captchaToken = '') {
-      if (this.sending || !this.validate()) return
+      if (this.sending || !this.validate() || this.checkTranscriptOnly()) return
       if (this.captchaEnabled && !captchaToken) {
         this.showFeedback(
           'Verification is required before submitting this form.'
@@ -494,8 +600,11 @@ export default {
       try {
         const payload = {
           ...(await serializePublicFormValues(
-            this.formDefinition,
-            this.values
+            this.serviceDefinition,
+            validatePublicFormValues(
+              this.serviceDefinition,
+              studentRecordsSubmissionValues(this.serviceDefinition, this.values)
+            ).values
           )),
           website: this.honeypot,
           captchaToken,
@@ -555,6 +664,12 @@ export default {
     align-items: flex-start;
   }
 
+  &__records-choice :deep(legend) {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+
   &__state,
   &__submit {
     align-items: center;

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

@@ -142,9 +142,7 @@
       </p>
 
       <nav
-        ref="topicIndex"
         class="asd20-template-handbook__index"
-        :class="{ 'asd20-template-handbook__index--sticky': indexFitsViewport }"
         aria-label="Handbook topics"
       >
         <slot name="sidebar-status" />
@@ -325,7 +323,6 @@ export default {
     topicsOpen: false,
     handbookHelpOpen: false,
     fragmentEpoch: 0,
-    indexFitsViewport: false,
   }),
   computed: {
     handbookDocument() {
@@ -361,34 +358,19 @@ export default {
   },
   mounted() {
     this.updatePrintLifecycle()
-    if (typeof window.ResizeObserver === 'function') {
-      this.indexResizeObserver = new window.ResizeObserver(this.updateIndexFit)
-      this.indexResizeObserver.observe(this.$refs.topicIndex)
-      this.updateIndexFit()
-    }
-    window.addEventListener('resize', this.updateIndexFit)
     window.addEventListener('hashchange', this.onFragmentChange)
     window.addEventListener('popstate', this.onFragmentChange)
     this.onFragmentChange()
   },
   beforeUnmount() {
     this.fragmentEpoch++
-    this.indexResizeObserver?.disconnect()
-    window.removeEventListener('resize', this.updateIndexFit)
     window.removeEventListener('hashchange', this.onFragmentChange)
     window.removeEventListener('popstate', this.onFragmentChange)
     this.stopPrintLifecycle?.()
   },
   methods: {
-    updateIndexFit() {
-      const index = this.$refs.topicIndex
-      if (!index || !this.indexResizeObserver) return
-      const view = index.ownerDocument.defaultView
-      const inset = parseFloat(view.getComputedStyle(index).top) || 0
-      this.indexFitsViewport = index.getBoundingClientRect().height <= view.innerHeight - inset * 2
-    },
     closeTopics() {
-      const index = this.$refs.topicIndex
+      const index = this.$el.querySelector('.asd20-template-handbook__index')
       const focusContent = this.topicsOpen && index.contains(index.ownerDocument.activeElement)
       this.topicsOpen = false
       return focusContent
@@ -436,6 +418,7 @@ export default {
       }
       const epoch = ++this.fragmentEpoch
       this.selectedMessageId = entry.key
+      this.expandedTopicId = entry.key
       this.topicsOpen = false
       await this.$nextTick()
       await this.$nextTick()
@@ -496,6 +479,7 @@ export default {
     async selectTopic(messageId) {
       const epoch = ++this.fragmentEpoch
       this.selectedMessageId = messageId
+      this.expandedTopicId = this.subtopicsFor(messageId).length ? messageId : null
       const focusContent = this.closeTopics()
       await this.$nextTick()
       if (epoch !== this.fragmentEpoch) return
@@ -709,12 +693,11 @@ export default {
     }
 
     &__index {
+      position: sticky;
       top: space(2);
       align-self: start;
-    }
-
-    &__index--sticky {
-      position: sticky;
+      max-height: calc(100vh - 4rem);
+      overflow-y: auto;
     }
 
     &__index-heading,

package/src/helpers/studentRecordsRequest.js

@@ -0,0 +1,72 @@
+// Presentation for the unified form; the service still accepts its v8 wire fields.
+export function usesStudentRecordsRouting(definition) {
+  return (
+    definition?.id === 'student-records-request' &&
+    definition.fields.some(field =>
+      field.name === 'requesterType' &&
+      field.options?.some(option => option.value === 'schoolTransfer')
+    ) &&
+    definition.fields.some(field => field.name === 'transferRecordTypes')
+  )
+}
+
+export function studentRecordsPresentation(definition) {
+  if (!usesStudentRecordsRouting(definition)) return definition
+
+  return {
+    ...definition,
+    fields: definition.fields
+      .filter(field => field.name !== 'recordsRequested')
+      .map(field => {
+        if (field.name === 'requesterType') {
+          return {
+            ...field,
+            label: 'What records do you need?',
+            options: [
+              {
+                label: 'Transcript or graduation verification only',
+                value: 'transcriptOnly',
+              },
+              { label: 'School transfer records', value: 'schoolTransfer' },
+              { label: 'Other student records', value: 'studentRecords' },
+            ],
+          }
+        }
+        if (field.name === 'transferRecordTypes') {
+          return {
+            ...field,
+            visibleWhen: {
+              fieldName: 'requesterType',
+              values: ['schoolTransfer', 'studentRecords'],
+            },
+          }
+        }
+        return field
+      }),
+  }
+}
+
+export function studentRecordsSubmissionValues(definition, values) {
+  if (
+    !usesStudentRecordsRouting(definition) ||
+    values.requesterType !== 'studentRecords'
+  ) {
+    return values
+  }
+
+  const options = definition.fields.find(
+    field => field.name === 'transferRecordTypes'
+  ).options
+  const labels = values.transferRecordTypes.map(value => {
+    const label = options.find(option => option.value === value).label
+    return value === 'otherRecords'
+      ? `${label}: ${values.otherRecordsDescription}`
+      : label
+  })
+  return {
+    ...values,
+    recordsRequested: labels.join('\n'),
+    transferRecordTypes: [],
+    otherRecordsDescription: '',
+  }
+}