@asd20/ui-next 2.7.3 → 2.7.4

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [2.7.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.3...ui-next-v2.7.4) (2026-05-05)
+
 ## [2.7.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.2...ui-next-v2.7.3) (2026-05-05)
 
 ## [2.7.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.1...ui-next-v2.7.2) (2026-05-05)

package/package.json

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

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

@@ -9,91 +9,60 @@
     @dismiss="$emit('dismiss')"
   >
     <Asd20Viewport scrollable>
-      <template v-if="!sendRejected">
-        <asd20-text-input
-          id="senderName"
-          v-model="emailMessage.senderName"
-          label="Your Full Name"
-          aria-required="true"
-          @validated="validationErrors.senderName = $event"
-        />
-        <asd20-text-input
-          id="senderEmail"
-          v-model="emailMessage.senderEmail"
-          type="email"
-          :validator="validateEmailAddress"
-          label="Your Email Address"
-          aria-required="true"
-          @validated="validationErrors.senderEmail = $event"
-        />
-        <asd20-text-area-input
-          id="messageBody"
-          v-model="emailMessage.messageBody"
-          label="Message"
-          help-text="All fields are required."
-          aria-required="true"
-          @validated="validationErrors.messageBody = $event"
-        />
-        <div
-          class="asd20-compose-email-modal__submit"
-          aria-live="polite"
-        >
-          <Recaptcha
-            v-if="!sending && !sendSucceeded"
-            sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
-            :load-recaptcha-script="true"
-            size="invisible"
-            @verify="captchaVerified"
-          >
-            <asd20-button
-              :disabled="!isValid"
-              label="Send"
-              horizontal
-              centered
-              bordered
-            />
-          </Recaptcha>
-          <asd20-spinner
-            v-else-if="sending"
-            size="sm"
-          />
-          <p
-            v-else
-            class="asd20-compose-email-modal__success"
-            role="status"
-          >
-            Your message was sent.
-          </p>
-        </div>
-      </template>
+      <asd20-text-input
+        id="senderName"
+        v-model="emailMessage.senderName"
+        label="Your Full Name"
+        aria-required="true"
+        @validated="validationErrors.senderName = $event"
+      />
+      <asd20-text-input
+        id="senderEmail"
+        v-model="emailMessage.senderEmail"
+        type="email"
+        :validator="validateEmailAddress"
+        label="Your Email Address"
+        aria-required="true"
+        @validated="validationErrors.senderEmail = $event"
+      />
+      <asd20-text-area-input
+        id="messageBody"
+        v-model="emailMessage.messageBody"
+        label="Message"
+        help-text="All fields are required."
+        aria-required="true"
+        @validated="validationErrors.messageBody = $event"
+      />
       <div
-        v-else
-        class="asd20-compose-email-modal__rejection"
-        role="status"
+        class="asd20-compose-email-modal__submit"
+        aria-live="polite"
       >
-        <p
-          class="asd20-compose-email-modal__rejection-message"
+        <Recaptcha
+          v-if="!sending && !sendSucceeded && !sendRejected"
+          sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
+          :load-recaptcha-script="true"
+          size="invisible"
+          @verify="captchaVerified"
         >
-          Please contact the Academy District 20 Help Desk who can evaluate your
-          request and route it appropriately.
-        </p>
-        <div class="asd20-compose-email-modal__rejection-actions">
           <asd20-button
-            label="Contact Our Help Desk"
-            :link="helpDeskUrl"
+            :disabled="!isValid"
+            label="Send"
             horizontal
             centered
             bordered
           />
-          <asd20-button
-            label="Cancel"
-            horizontal
-            centered
-            bordered
-            transparent
-            @click="$emit('dismiss')"
-          />
-        </div>
+        </Recaptcha>
+        <asd20-spinner
+          v-else-if="sending"
+          size="sm"
+        />
+        <p
+          v-else
+          class="asd20-compose-email-modal__status"
+          role="status"
+        >
+          {{ sendStatusMessage }}
+        </p>
       </div>
     </Asd20Viewport>
   </asd20-modal>
@@ -134,7 +103,6 @@ export default {
     sending: false,
     sendSucceeded: false,
     sendRejected: false,
-    helpDeskUrl: 'https://asd20.org/help-desk',
     emailMessage: {
       senderName: '',
       senderEmail: '',
@@ -143,7 +111,12 @@ export default {
   }),
   computed: {
     modalTitle() {
-      return this.sendRejected ? 'Contact our Help Desk' : 'Send an Email'
+      return 'Send an Email'
+    },
+    sendStatusMessage() {
+      return this.sendRejected
+        ? "Your message couldn't be sent via this form."
+        : 'Your message was sent.'
     },
     isValid() {
       return (
@@ -246,7 +219,7 @@ export default {
         return null
       }
     },
-    isHelpDeskRejection(error) {
+    isModerationRejection(error) {
       return (
         this.getSendEmailResponseData(error)?.code === 'moderation_rejected'
       )
@@ -283,11 +256,11 @@ export default {
       } catch (error) {
         this.sendSucceeded = false
         console.error('Email send failed:', error?.message || error)
-        if (this.isHelpDeskRejection(error)) {
-          this.helpDeskUrl =
-            this.getSendEmailResponseData(error)?.helpDeskUrl ||
-            'https://asd20.org/help-desk'
+        if (this.isModerationRejection(error)) {
+          this.sending = false
           this.sendRejected = true
+          await this.waitForSuccessMessage()
+          this.$emit('dismiss')
           return
         }
         alert(this.getSendEmailFailureMessage(error))
@@ -314,27 +287,11 @@ export default {
     min-height: 3rem;
   }
 
-  &__success {
+  &__status {
     font-weight: 600;
     margin: 0;
     text-align: center;
   }
-
-  &__rejection {
-    display: flex;
-    flex-direction: column;
-    gap: space(1);
-  }
-
-  &__rejection-message {
-    margin: 0;
-  }
-
-  &__rejection-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: space(0.75);
-  }
 }
 
 @media (min-width: 1024px) {

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

@@ -35,7 +35,8 @@ export default {
   background: var(--website-quick-links__background-color);
   min-height: 3vh;
   display: block;
-  padding: space(1) space(0);
+  padding: space(1) space(0.5);
+  gap: 0.25rem;
 
   .asd20-button {
     display: flex;
@@ -43,7 +44,6 @@ export default {
     flex: 1 1;
     justify-content: flex-start;
     width: auto;
-    margin: space(0.5) space(0.5);
     font-size: 0.875rem !important;
     color: var(--website-quick-links__button-foreground-color) !important;
     & :deep(.asd20-button__label) {
@@ -71,17 +71,15 @@ export default {
     flex-wrap: wrap;
     align-items: flex-start;
     min-height: 3vh;
-    padding: space(0.5) space(0);
 
     .asd20-button {
       display: flex;
       flex-direction: column;
       text-align: center;
       flex: 1 1;
-      align-self: start;
-      margin: space(0.5) 0;
+      padding: space(0.5) space(0.25) !important;
       & :deep(.asd20-button__label) {
-        margin-left: space(0);
+        margin-left: 0;
       }
     }
   }
@@ -89,7 +87,7 @@ export default {
 
 @media (min-width: 1024px) {
   .asd20-quicklinks-menu {
-    padding: space(0) space(1);
+    padding: 1rem 1rem;
   }
 }
 </style>

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

@@ -322,8 +322,6 @@ $max: 4rem;
     }
     &__top {
       flex-direction: row;
-      /* justify-content: flex-end;*/
-      /* padding: space(0.25) space(1);*/
       align-items: center !important;
     }
     &__image {
@@ -352,10 +350,7 @@ $max: 4rem;
   .asd20-school-homepage-header {
     display: grid;
     grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(
-        3,
-        space(1)
-      );
+    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(3, space(1));
     margin-bottom: 0;
     &::before {
       content: '';
@@ -368,8 +363,6 @@ $max: 4rem;
       grid-column: 1 / -1;
       grid-row: 7 / -4;
       z-index: 1;
-      /* transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);*/
-      /* border-radius: var(--website-shape__radius-l);*/
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       border-bottom-left-radius: 3rem;
@@ -406,11 +399,6 @@ $max: 4rem;
       & :deep(.asd20-picker) {
         display: flex;
       }
-      /* &::v-deep .notification-group--floating {*/
-      /*   position: absolute;*/
-      /*   top: 9rem;*/
-      /*   right: 5.5rem;*/
-      /* }*/
     }
 
     & :deep(.asd20-notification-group--status) {

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

@@ -534,7 +534,7 @@ $max: 4rem;
 
     &__top {
       margin: 0;
-      padding: space(1) space(3) space(1) space(3);
+      padding: space(0.5) space(3) space(1) space(3);
       grid-column: 1/-1;
       grid-row: 1/7;
       background: transparent;
@@ -618,10 +618,7 @@ $max: 4rem;
   .asd20-school-homepage-video-header {
     display: grid;
     grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(
-        3,
-        space(1)
-      );
+    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(3, space(1));
     margin-bottom: 0;
     .background-video {
       display: block;
@@ -654,7 +651,6 @@ $max: 4rem;
       grid-column: 1 / -1;
       grid-row: 7 / -4;
       z-index: 1;
-      /* transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);*/
       border-radius: var(--website-shape__radius-l);
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -682,7 +678,7 @@ $max: 4rem;
 
     &__top {
       margin: 0;
-      padding: space(1) space(3) space(1) space(3);
+      padding: space(0.5) space(3) space(1) space(3);
       grid-column: 1/-1;
       grid-row: 1/7;
       background: transparent;

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

@@ -476,16 +476,10 @@ export default {
     }
     .pickerContainer {
       display: flex;
-      /* .optionalLogo {*/
-      /*   display: none;*/
-      /* }*/
     }
     .asd20-quicklinks-menu {
-      padding-bottom: space(1);
-      margin: space(-1) 0 0 0;
-      &::after {
-        bottom: space(-4);
-      }
+      margin-top: -1rem;
+      padding: 0 1rem 2rem 1rem;
     }
     .button-group {
       display: flex;

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

@@ -38,40 +38,42 @@
             :organization="organization"
             logo-size="lg"
           />
-          <a
-            v-if="websiteLogoProps"
-            :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
-            @click="onLogoClick($event, websiteLogoProps.logoLink)"
-          >
-            <img
-              class="optionalLogo"
-              :src="
-                websiteLogoProps.logoImageUrl
-                  ? websiteLogoProps.logoImageUrl
-                  : ''
-              "
-              :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
-            />
-          </a>
-          <a
-            v-if="websiteLogoProps2"
-            :href="
-              websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
-            "
-            @click="onLogoClick($event, websiteLogoProps2.logoLink)"
-          >
-            <img
-              class="optionalLogo"
-              :src="
-                websiteLogoProps2.logoImageUrl
-                  ? websiteLogoProps2.logoImageUrl
-                  : ''
-              "
-              :alt="
-                websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
+          <div class="website-logos">
+            <a
+              v-if="websiteLogoProps"
+              :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
+              @click="onLogoClick($event, websiteLogoProps.logoLink)"
+            >
+              <img
+                class="optionalLogo"
+                :src="
+                  websiteLogoProps.logoImageUrl
+                    ? websiteLogoProps.logoImageUrl
+                    : ''
+                "
+                :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
+              />
+            </a>
+            <a
+              v-if="websiteLogoProps2"
+              :href="
+                websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
               "
-            />
-          </a>
+              @click="onLogoClick($event, websiteLogoProps2.logoLink)"
+            >
+              <img
+                class="optionalLogo"
+                :src="
+                  websiteLogoProps2.logoImageUrl
+                    ? websiteLogoProps2.logoImageUrl
+                    : ''
+                "
+                :alt="
+                  websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
+                "
+              />
+            </a>
+          </div>
         </div>
         <div class="notification-translation-container">
           <div class="language-wrapper">
@@ -422,9 +424,17 @@ export default {
     margin-top: 0;
     .pickerContainer {
       display: flex;
-      .optionalLogo {
-        max-width: 12rem;
-        max-height: 6rem;
+      .asd20-organization-picker {
+        display: flex;
+      }
+      .website-logos {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        .optionalLogo {
+          max-width: 12rem;
+          max-height: 6rem;
+        }
       }
     }
     .notification-translation-container {
@@ -434,11 +444,8 @@ export default {
     }
 
     .asd20-quicklinks-menu {
-      padding-bottom: space(1);
-      margin: space(-1) 0 0 0;
-      &::after {
-        bottom: space(-4);
-      }
+      margin-top: -1rem;
+      padding: 0 1rem 2rem 1rem;
     }
     .button-group {
       display: flex;
@@ -448,8 +455,6 @@ export default {
     }
     .asd20-notification-group--status {
       order: 0;
-      /* right: space(5.5) !important;*/
-      /* top: space(6) !important;*/
     }
   }
 }