@asd20/ui-next 2.25.3 → 2.26.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.26.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.26.0...ui-next-v2.26.1) (2026-09-30)
+
+
+### Bug Fixes
+
+* show public form fallback only after submission failure ([7f17021](https://github.com/academydistrict20/asd20-ui-next/commit/7f17021d2e1f4e04fd193fb0e16d80125efe3ae7))
+
+# [2.26.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.25.3...ui-next-v2.26.0) (2026-09-30)
+
+
+### Features
+
+* add school transfer record request form with email workflow ([d92d458](https://github.com/academydistrict20/asd20-ui-next/commit/d92d458838303e7ae5ae600d26d6a6ce88fd748d))
+
 ## [2.25.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.25.2...ui-next-v2.25.3) (2026-09-25)
 
 

package/package.json

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

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

@@ -43,6 +43,9 @@
 
       <form
         v-else-if="formDefinition"
+        :class="{
+          'asd20-public-form-modal__records-form': usesRecordsFormSpacing,
+        }"
         novalidate
         @submit.prevent="validateBeforeCaptcha"
       >
@@ -52,6 +55,11 @@
         >
           {{ formDefinition.introduction }}
         </p>
+        <p v-if="formDefinition.introductionLink">
+          <a :href="formDefinition.introductionLink.href">
+            {{ formDefinition.introductionLink.label }}
+          </a>
+        </p>
 
         <div
           v-if="errorEntries.length"
@@ -77,6 +85,11 @@
         <asd20-public-form-field
           v-for="field in formDefinition.fields"
           :key="field.name"
+          :class="{
+            'asd20-public-form-modal__requester-choice':
+              formDefinition.id === 'student-records-request' &&
+              field.name === 'requesterType',
+          }"
           :field="field"
           :input-id="fieldId(field.name)"
           :model-value="values[field.name]"
@@ -101,26 +114,6 @@
           />
         </div>
 
-        <div
-          v-if="hasFallbackContact"
-          class="asd20-public-form-modal__fallback"
-        >
-          <p>
-            {{
-              formDefinition.fallbackContact.instructions ||
-                'If you cannot submit this form, use one of these contact options:'
-            }}
-          </p>
-          <a
-            v-if="formDefinition.fallbackContact.email"
-            :href="`mailto:${formDefinition.fallbackContact.email}`"
-          >{{ formDefinition.fallbackContact.email }}</a>
-          <a
-            v-if="formDefinition.fallbackContact.phone"
-            :href="fallbackPhoneHref"
-          >{{ formDefinition.fallbackContact.phone }}</a>
-        </div>
-
         <div
           class="asd20-public-form-modal__submit"
           aria-live="polite"
@@ -167,6 +160,26 @@
         >
           {{ feedbackMessage }}
         </div>
+
+        <div
+          v-if="showFallbackContact"
+          class="asd20-public-form-modal__fallback"
+        >
+          <p>
+            {{
+              formDefinition.fallbackContact.instructions ||
+                'If you cannot submit this form, use one of these contact options:'
+            }}
+          </p>
+          <a
+            v-if="formDefinition.fallbackContact.email"
+            :href="`mailto:${formDefinition.fallbackContact.email}`"
+          >{{ formDefinition.fallbackContact.email }}</a>
+          <a
+            v-if="formDefinition.fallbackContact.phone"
+            :href="fallbackPhoneHref"
+          >{{ formDefinition.fallbackContact.phone }}</a>
+        </div>
       </form>
     </asd20-viewport>
   </asd20-modal>
@@ -232,6 +245,7 @@ export default {
       feedbackRole: 'alert',
       sending: false,
       submissionSuccess: false,
+      submissionFailed: false,
       loadSequence: 0,
     }
   },
@@ -239,6 +253,12 @@ export default {
     modalTitle() {
       return this.formDefinition?.title || 'Public Form'
     },
+    usesRecordsFormSpacing() {
+      return [
+        'student-records-request',
+        'school-transfer-transcript-request',
+      ].includes(this.formDefinition?.id)
+    },
     showPristineValidationErrors() {
       return false
     },
@@ -253,7 +273,10 @@ export default {
     },
     hasFallbackContact() {
       const fallback = this.formDefinition?.fallbackContact
-      return Boolean(fallback?.email || fallback?.phone)
+      return Boolean(fallback?.instructions || fallback?.email || fallback?.phone)
+    },
+    showFallbackContact() {
+      return this.submissionFailed && this.hasFallbackContact
     },
     fallbackPhoneHref() {
       const phone = this.formDefinition?.fallbackContact?.phone || ''
@@ -299,6 +322,7 @@ export default {
       this.definitionError = ''
       this.feedbackMessage = ''
       this.submissionSuccess = false
+      this.submissionFailed = false
       this.validationErrors = {}
       this.validationAttempted = false
       this.honeypot = ''
@@ -367,7 +391,7 @@ export default {
     },
     captchaFailed() {
       this.showFeedback(
-        'The verification service could not start. Please try again or use the contact options listed.'
+        'The verification service could not start. Please try again or use another contact option on this page.'
       )
     },
     captchaExpired() {
@@ -407,6 +431,7 @@ export default {
 
       this.sending = true
       this.feedbackMessage = ''
+      this.submissionFailed = false
       try {
         const payload = {
           ...this.values,
@@ -424,6 +449,7 @@ export default {
           definitionVersion: this.formDefinition.version,
         })
       } catch (error) {
+        this.submissionFailed = true
         this.showFeedback(this.failureMessage(error))
       } finally {
         this.sending = false
@@ -453,6 +479,20 @@ export default {
     font-size: 1rem;
   }
 
+  &__records-form :deep(.asd20-text-input),
+  &__records-form :deep(.asd20-text-area-input) {
+    margin-bottom: 0.25rem;
+  }
+
+  &__records-form :deep(.asd20-public-form-field) {
+    margin-bottom: 1rem;
+  }
+
+  &__requester-choice.asd20-public-form-field
+    :deep(fieldset.asd20-public-form-field__choices label) {
+    align-items: flex-start;
+  }
+
   &__state,
   &__submit {
     align-items: center;

package/src/helpers/publicFormDefinition.js

@@ -171,6 +171,25 @@ export function normalizePublicFormDefinition(definition) {
   const id = boundedText(definition.id, 'Form ID', 100, true)
   if (!FORM_ID_PATTERN.test(id)) throw new Error('The public form ID is invalid.')
 
+  let introductionLink
+  if (definition.introductionLink != null) {
+    const label = boundedText(
+      definition.introductionLink.label,
+      'Introduction link label',
+      200,
+      true
+    )
+    const href = boundedText(
+      definition.introductionLink.href,
+      'Introduction link URL',
+      500,
+      true
+    )
+    if (!/^\/[a-z0-9/-]+\/?$/.test(href) || href.startsWith('//'))
+      throw new Error('The introduction link must be a local page path.')
+    introductionLink = { label, href }
+  }
+
   return {
     id,
     version,
@@ -180,6 +199,7 @@ export function normalizePublicFormDefinition(definition) {
       'Form introduction',
       2000
     ),
+    introductionLink,
     submitLabel: boundedText(definition.submitLabel, 'Submit label', 100, true),
     successMessage: boundedText(
       definition.successMessage,