@asd20/ui-next 2.29.1 → 2.30.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.30.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.30.0...ui-next-v2.30.1) (2026-10-06)
+
+
+### Bug Fixes
+
+* update styling on student records form ([3c9e73b](https://github.com/academydistrict20/asd20-ui-next/commit/3c9e73b669569aead47346fe52c5df432d1ecbf7))
+
+# [2.30.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.29.1...ui-next-v2.30.0) (2026-10-06)
+
+
+### Features
+
+* refactor student records request workflow; reduce to a single form ([1dda060](https://github.com/academydistrict20/asd20-ui-next/commit/1dda06043264a5e9ca0dd7f5b012a51b4cae52ec))
+
 ## [2.29.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.29.0...ui-next-v2.29.1) (2026-10-05)
 
 

package/package.json

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

package/src/components/molecules/Asd20PublicFormField/index.vue

@@ -1,7 +1,59 @@
 <template>
   <div class="asd20-public-form-field">
+    <div
+      v-if="field.type === 'file'"
+      class="asd20-public-form-field__upload"
+    >
+      <label :for="inputId">{{ displayLabel }}</label>
+      <asd20-button
+        :id="inputId"
+        label="Choose files"
+        horizontal
+        bordered
+        :aria-label="`Choose files for ${field.label.toLowerCase()}`"
+        :aria-describedby="describedBy"
+        :aria-invalid="hasErrors ? 'true' : undefined"
+        @click="$refs.fileInput.click()"
+      />
+      <input
+        :id="`${inputId}-input`"
+        ref="fileInput"
+        type="file"
+        accept=".pdf,application/pdf"
+        multiple
+        hidden
+        :required="field.required"
+        :aria-label="field.label"
+        @change="addFiles"
+      />
+      <div
+        class="asd20-public-form-field__file-selection"
+        aria-live="polite"
+      >
+        <ul
+          v-if="selectedFiles.length"
+          class="asd20-public-form-field__file-list"
+        >
+          <li
+            v-for="(file, index) in selectedFiles"
+            :key="index"
+          >
+            <span>{{ file.name }}</span>
+            <asd20-button
+              label="Remove"
+              text-only
+              :aria-label="`Remove ${file.name}`"
+              @click="removeFile(index)"
+            />
+          </li>
+        </ul>
+        <p v-else>
+          No file chosen
+        </p>
+      </div>
+    </div>
     <asd20-text-area-input
-      v-if="field.type === 'textarea'"
+      v-else-if="field.type === 'textarea'"
       :id="inputId"
       :model-value="modelValue"
       :label="displayLabel"
@@ -39,30 +91,36 @@
       class="asd20-public-form-field__select"
     >
       <label :for="inputId">{{ displayLabel }}</label>
-      <select
-        :id="inputId"
-        :value="modelValue"
-        :required="field.required"
-        :aria-describedby="describedBy"
-        :aria-invalid="hasErrors ? 'true' : undefined"
-        @change="$emit('update:modelValue', $event.target.value)"
-      >
-        <option value="">
-          Please select
-        </option>
-        <option
-          v-for="option in field.options"
-          :key="option.value"
-          :value="option.value"
+      <div class="asd20-public-form-field__select-control">
+        <select
+          :id="inputId"
+          :value="modelValue"
+          :required="field.required"
+          :aria-describedby="describedBy"
+          :aria-invalid="hasErrors ? 'true' : undefined"
+          @change="$emit('update:modelValue', $event.target.value)"
         >
-          {{ option.label }}
-        </option>
-      </select>
+          <option value="">
+            Please select
+          </option>
+          <option
+            v-for="option in field.options"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
     </div>
 
     <fieldset
       v-else-if="field.type === 'radio'"
       class="asd20-public-form-field__choices"
+      :class="{
+        'asd20-public-form-field__choices--described':
+          field.options.some(option => option.description),
+      }"
       :aria-describedby="describedBy"
       :aria-invalid="hasErrors ? 'true' : undefined"
     >
@@ -81,7 +139,13 @@
           :required="field.required"
           @change="$emit('update:modelValue', option.value)"
         />
-        <span>{{ option.label }}</span>
+        <span>
+          <strong class="asd20-public-form-field__option-title">{{ option.label }}</strong>
+          <span
+            v-if="option.description"
+            class="asd20-public-form-field__option-description"
+          >{{ option.description }}</span>
+        </span>
       </label>
     </fieldset>
 
@@ -129,6 +193,7 @@
 </template>
 
 <script>
+import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Checkbox from '../../atoms/Asd20Checkbox'
 import Asd20TextAreaInput from '../Asd20TextAreaInput'
 import Asd20TextInput from '../Asd20TextInput'
@@ -148,10 +213,10 @@ function districtToday() {
 
 export default {
   name: 'Asd20PublicFormField',
-  components: { Asd20Checkbox, Asd20TextAreaInput, Asd20TextInput },
+  components: { Asd20Button, Asd20Checkbox, Asd20TextAreaInput, Asd20TextInput },
   props: {
     field: { type: Object, required: true },
-    modelValue: { type: [String, Boolean], default: '' },
+    modelValue: { type: [String, Boolean, Array], default: '' },
     errors: { type: Array, default: () => [] },
     inputId: { type: String, required: true },
     showCharacterCount: { type: Boolean, default: true },
@@ -164,6 +229,9 @@ export default {
     }
   },
   computed: {
+    selectedFiles() {
+      return Array.isArray(this.modelValue) ? this.modelValue : []
+    },
     dateMaximum() {
       return this.field.type === 'date' && this.field.maxDate === 'today'
         ? districtToday()
@@ -207,6 +275,21 @@ export default {
       )
     },
   },
+  methods: {
+    addFiles(event) {
+      const addedFiles = Array.from(event.target.files || [])
+      if (addedFiles.length) {
+        this.$emit('update:modelValue', [...this.selectedFiles, ...addedFiles])
+      }
+      // The model owns the selection; reset the picker so later choices append
+      // and a removed document can be selected again.
+      event.target.value = ''
+    },
+    removeFile(index) {
+      this.$emit('update:modelValue', this.selectedFiles.filter((_, fileIndex) => fileIndex !== index))
+      this.$nextTick(() => document.getElementById(this.inputId)?.focus())
+    },
+  },
 }
 </script>
 
@@ -214,6 +297,49 @@ export default {
 @use '../../../design/component-stack' as *;
 
 .asd20-public-form-field {
+  &__option-title {
+    font-weight: 700;
+  }
+
+  &__upload {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__file-selection {
+    width: 100%;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  &__file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      align-items: baseline;
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    span {
+      overflow-wrap: anywhere;
+    }
+  }
+
+  &__option-description {
+    display: block;
+    font-weight: normal;
+    margin-top: 0.25rem;
+  }
   // Public intake controls must stay legible on every school theme. Limit the
   // neutral overrides to this wrapper so other site components keep their colors.
   --color__accent: #3d3d3d;
@@ -235,7 +361,24 @@ export default {
     margin-bottom: space(0.125);
   }
 
+  &__select-control {
+    position: relative;
+
+    &::after {
+      border-left: 0.5rem solid transparent;
+      border-right: 0.5rem solid transparent;
+      border-top: 0.5rem solid currentColor;
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
   select {
+    appearance: none;
     background: white;
     border: 2px solid var(--color__accent);
     border-radius: var(--website-shape__radius-s);
@@ -243,6 +386,7 @@ export default {
     color: var(--website-card__reverse-background-color);
     font: inherit;
     padding: space(0.25);
+    padding-right: 3rem;
     width: 100%;
   }
 
@@ -259,6 +403,15 @@ export default {
     margin: space(0.125) 0;
   }
 
+  &__choices--described label {
+    align-items: flex-start;
+  }
+
+  &__choices input[type='radio'] {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+
   &__help,
   &__character-count,
   &__errors {

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

@@ -54,13 +54,21 @@
           class="asd20-public-form-modal__introduction"
         >
           <template v-if="inlineIntroductionParts">
-            {{ inlineIntroductionParts.before }}<a :href="formDefinition.introductionLink.href">{{ formDefinition.introductionLink.label }}</a>{{ inlineIntroductionParts.after }}
+            {{ inlineIntroductionParts.before
+            }}<a :href="formDefinition.introductionLink.href">{{
+              formDefinition.introductionLink.label
+            }}</a>{{ inlineIntroductionParts.after }}
           </template>
           <template v-else>
             {{ formDefinition.introduction }}
           </template>
         </p>
-        <p v-if="formDefinition.introductionLink && !formDefinition.introductionLink.inline">
+        <p
+          v-if="
+            formDefinition.introductionLink &&
+              !formDefinition.introductionLink.inline
+          "
+        >
           <a :href="formDefinition.introductionLink.href">
             {{ formDefinition.introductionLink.label }}
           </a>
@@ -88,7 +96,7 @@
         </div>
 
         <asd20-public-form-field
-          v-for="field in formDefinition.fields"
+          v-for="field in visibleFields"
           :key="field.name"
           :class="{
             'asd20-public-form-modal__requester-choice':
@@ -135,6 +143,7 @@
             >
               <asd20-button
                 :label="formDefinition.submitLabel"
+                :disabled="!canSubmit"
                 horizontal
                 centered
                 bordered
@@ -144,6 +153,7 @@
             <asd20-button
               v-else
               :label="formDefinition.submitLabel"
+              :disabled="!canSubmit"
               horizontal
               centered
               bordered
@@ -199,6 +209,9 @@ import Asd20PublicFormField from '../../molecules/Asd20PublicFormField'
 import Recaptcha from '../../utils/Recaptcha'
 import {
   createPublicFormValues,
+  isPublicFormFieldVisible,
+  isPublicFormFieldRequired,
+  serializePublicFormValues,
   normalizePublicFormDefinition,
   validatePublicFormValues,
 } from '../../../helpers/publicFormDefinition'
@@ -255,6 +268,21 @@ export default {
     }
   },
   computed: {
+    canSubmit() {
+      return Boolean(
+        this.formDefinition &&
+        !this.sending &&
+        validatePublicFormValues(this.formDefinition, this.values).valid
+      )
+    },
+    visibleFields() {
+      return (this.formDefinition?.fields || [])
+        .filter(field => isPublicFormFieldVisible(field, this.values))
+        .map(field => ({
+          ...field,
+          required: isPublicFormFieldRequired(field, this.values),
+        }))
+    },
     modalTitle() {
       return this.formDefinition?.title || 'Public Form'
     },
@@ -288,7 +316,9 @@ export default {
     },
     hasFallbackContact() {
       const fallback = this.formDefinition?.fallbackContact
-      return Boolean(fallback?.instructions || fallback?.email || fallback?.phone)
+      return Boolean(
+        fallback?.instructions || fallback?.email || fallback?.phone
+      )
     },
     showFallbackContact() {
       return this.submissionFailed && this.hasFallbackContact
@@ -377,6 +407,12 @@ export default {
     },
     updateValue(name, value) {
       this.values[name] = value
+      for (const field of this.formDefinition.fields) {
+        if (!isPublicFormFieldVisible(field, this.values)) {
+          this.values[field.name] =
+            field.type === 'checkbox' ? false : field.type === 'file' ? [] : ''
+        }
+      }
       if (this.validationAttempted) this.validate(false)
     },
     validate(focusSummary = true) {
@@ -424,6 +460,12 @@ export default {
       if (status === 429) {
         return 'Too many submissions were received recently. Please wait and try again, or use the contact options listed.'
       }
+      if (
+        status === 502 &&
+        typeof serverMessage === 'string' &&
+        serverMessage.trim()
+      )
+        return serverMessage
       if (status === 502) {
         return 'The form could not be delivered right now. Please try again later or use the contact options listed.'
       }
@@ -440,7 +482,9 @@ export default {
     async submitForm(captchaToken = '') {
       if (this.sending || !this.validate()) return
       if (this.captchaEnabled && !captchaToken) {
-        this.showFeedback('Verification is required before submitting this form.')
+        this.showFeedback(
+          'Verification is required before submitting this form.'
+        )
         return
       }
 
@@ -449,7 +493,10 @@ export default {
       this.submissionFailed = false
       try {
         const payload = {
-          ...this.values,
+          ...(await serializePublicFormValues(
+            this.formDefinition,
+            this.values
+          )),
           website: this.honeypot,
           captchaToken,
         }

package/src/helpers/publicFormDefinition.js

@@ -7,6 +7,7 @@ export const SUPPORTED_PUBLIC_FORM_FIELD_TYPES = Object.freeze([
   'select',
   'radio',
   'checkbox',
+  'file',
 ])
 
 const FIELD_NAME_PATTERN = /^[A-Za-z][A-Za-z0-9_]*$/
@@ -65,7 +66,12 @@ function normalizeOptions(field) {
     if (seen.has(value))
       throw new Error(`${field.label} has duplicate choices.`)
     seen.add(value)
-    return { label, value }
+    const description = boundedText(
+      option?.description,
+      'Option description',
+      1000
+    )
+    return description ? { label, value, description } : { label, value }
   })
 }
 
@@ -100,6 +106,12 @@ function normalizeField(field) {
       'Character-count visibility'
     ),
     options: undefined,
+    visibleWhen: normalizeCondition(field.visibleWhen),
+    requiredUnlessUploaded: boundedText(field.requiredUnlessUploaded, 'Upload field name', 64),
+    requiredWhen:
+      field.requiredWhen == null
+        ? undefined
+        : normalizeConditions(field.requiredWhen),
   }
 
   if (
@@ -122,9 +134,103 @@ function normalizeField(field) {
     type,
     label: normalized.label,
   })
+  if (type === 'file') {
+    if (
+      field.accept !== 'application/pdf' ||
+      field.maxFiles !== 5 ||
+      field.maxFileBytes !== 5 * 1024 * 1024 ||
+      field.maxTotalFileBytes !== 10 * 1024 * 1024
+    ) {
+      throw new Error('The public form has invalid upload limits.')
+    }
+    Object.assign(normalized, {
+      accept: field.accept,
+      maxFiles: field.maxFiles,
+      maxFileBytes: field.maxFileBytes,
+      maxTotalFileBytes: field.maxTotalFileBytes,
+    })
+  }
   return normalized
 }
 
+function normalizeCondition(condition) {
+  if (condition == null) return undefined
+  if (
+    !condition ||
+    typeof condition !== 'object' ||
+    Array.isArray(condition) ||
+    !FIELD_NAME_PATTERN.test(condition.fieldName) ||
+    !Array.isArray(condition.values) ||
+    !condition.values.length ||
+    condition.values.length > MAX_OPTIONS ||
+    condition.values.some(
+      value => typeof value !== 'string' || !OPTION_VALUE_PATTERN.test(value)
+    )
+  ) {
+    throw new Error('The public form has an invalid field condition.')
+  }
+  return { fieldName: condition.fieldName, values: [...condition.values] }
+}
+
+function normalizeConditions(conditions) {
+  if (
+    !Array.isArray(conditions) ||
+    !conditions.length ||
+    conditions.length > MAX_FIELDS ||
+    conditions.some(condition => condition == null)
+  ) {
+    throw new Error('The public form has invalid required conditions.')
+  }
+  return conditions.map(normalizeCondition)
+}
+
+export function isPublicFormFieldVisible(field, values) {
+  return (
+    !field.visibleWhen ||
+    field.visibleWhen.values.includes(String(values[field.visibleWhen.fieldName] || '').trim())
+  )
+}
+
+export function isPublicFormFieldRequired(field, values) {
+  const required = field.required || field.requiredWhen?.some(condition =>
+    condition.values.includes(String(values[condition.fieldName] || '').trim())
+  )
+  const uploaded = field.requiredUnlessUploaded &&
+    Array.isArray(values[field.requiredUnlessUploaded]) &&
+    values[field.requiredUnlessUploaded].length > 0
+  return Boolean(required && !uploaded)
+}
+
+export async function serializePublicFormValues(definition, values) {
+  const result = { ...values }
+  for (const field of definition.fields.filter(
+    field => field.type === 'file'
+  )) {
+    result[field.name] = await Promise.all(
+      (values[field.name] || []).map(
+        file =>
+          new Promise((resolve, reject) => {
+            const reader = new FileReader()
+            reader.onload = () =>
+              resolve({
+                name: file.name,
+                contentType: 'application/pdf',
+                contentBase64: String(reader.result).split(',')[1],
+              })
+            reader.onerror = () =>
+              reject(
+                new Error(
+                  'A supporting document could not be read. Select the document again.'
+                )
+              )
+            reader.readAsDataURL(file)
+          })
+      )
+    )
+  }
+  return result
+}
+
 export function normalizePublicFormDefinition(definition) {
   if (
     !definition ||
@@ -146,6 +252,32 @@ export function normalizePublicFormDefinition(definition) {
   if (names.size !== fields.length)
     throw new Error('The public form contains duplicate field names.')
 
+  for (const field of fields) {
+    if (field.requiredUnlessUploaded) {
+      const upload = fields.find(candidate => candidate.name === field.requiredUnlessUploaded)
+      if (!upload || upload.type !== 'file' || upload === field) {
+        throw new Error('The public form has an invalid upload requirement reference.')
+      }
+    }
+    for (const condition of [
+      field.visibleWhen,
+      ...(field.requiredWhen || []),
+    ].filter(Boolean)) {
+      const dependency = fields.find(
+        candidate => candidate.name === condition.fieldName
+      )
+      if (
+        !dependency ||
+        dependency === field ||
+        !['radio', 'select'].includes(dependency.type) ||
+        condition.values.some(
+          value => !dependency.options.some(option => option.value === value)
+        )
+      ) {
+        throw new Error('The public form has an invalid condition reference.')
+      }
+    }
+  }
   const version = Number(definition.version)
   if (!Number.isInteger(version) || version < 1)
     throw new Error('The public form version is invalid.')
@@ -169,7 +301,8 @@ 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.')
+  if (!FORM_ID_PATTERN.test(id))
+    throw new Error('The public form ID is invalid.')
 
   const introduction = boundedText(
     definition.introduction,
@@ -202,7 +335,9 @@ export function normalizePublicFormDefinition(definition) {
       (!introduction.includes(label) ||
         introduction.indexOf(label) !== introduction.lastIndexOf(label))
     ) {
-      throw new Error('The inline introduction link label must appear once in the introduction.')
+      throw new Error(
+        'The inline introduction link label must appear once in the introduction.'
+      )
     }
     introductionLink = inline ? { label, href, inline: true } : { label, href }
   }
@@ -234,7 +369,7 @@ export function createPublicFormValues(definition) {
   return Object.fromEntries(
     definition.fields.map(field => [
       field.name,
-      field.type === 'checkbox' ? false : '',
+      field.type === 'file' ? [] : field.type === 'checkbox' ? false : '',
     ])
   )
 }
@@ -268,21 +403,47 @@ export function validatePublicFormValues(definition, sourceValues = {}) {
   const values = {}
 
   for (const field of definition.fields) {
+    if (!isPublicFormFieldVisible(field, sourceValues)) {
+      values[field.name] =
+        field.type === 'file' ? [] : field.type === 'checkbox' ? false : ''
+      continue
+    }
+    const required = isPublicFormFieldRequired(field, sourceValues)
     const rawValue = sourceValues[field.name]
     const fieldErrors = []
 
-    if (field.type === 'checkbox') {
+    if (field.type === 'file') {
+      const files = rawValue || []
+      values[field.name] = files
+      if (
+        !Array.isArray(files) ||
+        files.length > field.maxFiles ||
+        files.some(
+          file =>
+            !(file instanceof File) ||
+            !/\.pdf$/i.test(file.name) ||
+            (file.type && file.type !== 'application/pdf') ||
+            file.size > field.maxFileBytes ||
+            file.size === 0
+        ) ||
+        files.reduce((size, file) => size + file.size, 0) >
+          field.maxTotalFileBytes
+      ) {
+        fieldErrors.push(
+          'Upload up to 5 PDF documents, 5 MB each and 10 MB total.'
+        )
+      }
+    } else if (field.type === 'checkbox') {
       const value = rawValue === true
       values[field.name] = value
-      if (field.required && !value)
-        fieldErrors.push(`${field.label} is required.`)
+      if (required && !value) fieldErrors.push(`${field.label} is required.`)
     } else {
       const hasInvalidType = rawValue != null && typeof rawValue !== 'string'
       const value = typeof rawValue === 'string' ? rawValue.trim() : ''
       values[field.name] = field.type === 'email' ? value.toLowerCase() : value
 
       if (hasInvalidType) fieldErrors.push(`${field.label} must be text.`)
-      else if (field.required && !value)
+      else if (required && !value)
         fieldErrors.push(`${field.label} is required.`)
       if (value && field.minLength != null && value.length < field.minLength) {
         fieldErrors.push(