@asd20/ui-next 2.0.14 → 2.0.16

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.0.16](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.15...ui-next-v2.0.16) (2026-04-01)
+
+
+### Bug Fixes
+
+* fix secondary header image display ([8ed8d6f](https://github.com/academydistrict20/asd20-ui-next/commit/8ed8d6f0e2bedab9e108948963f65cd3daf20972))
+
+## [2.0.15](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.14...ui-next-v2.0.15) (2026-04-01)
+
 ## [2.0.14](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.13...ui-next-v2.0.14) (2026-03-31)
 
 

package/package.json

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

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

@@ -97,7 +97,7 @@
     <div class="white-accent-band">
       <section
         ref="header"
-        class="asd20-secondary-header"
+        :class="headerClasses"
         aria-label="Secondary message"
         :style="secondaryHeaderStyle"
       >
@@ -116,7 +116,7 @@
         </div>
 
         <asd20-messaging
-          v-bind="secondaryMessage"
+          v-bind="secondaryMessageForDisplay"
           fullscreen
         ></asd20-messaging>
       </section>
@@ -151,33 +151,52 @@ export default {
     }
   },
   computed: {
+    headerClasses() {
+      return {
+        'asd20-secondary-header': true,
+        'asd20-secondary-header--hide-desktop-image':
+          !this.shouldShowDesktopInlineImage,
+      }
+    },
     secondaryMessage() {
       return Array.isArray(this.messages) ? this.messages[1] || {} : {}
     },
-    secondaryHeaderImage() {
-      const messageImages = Array.isArray(this.secondaryMessage.images)
+    secondaryMessageImages() {
+      return Array.isArray(this.secondaryMessage.images)
         ? this.secondaryMessage.images
         : []
-      const coverImage = messageImages.find(image => image.isCover)
-      if (!coverImage) return ''
-
-      const coverImageFiles = Array.isArray(coverImage.files)
-        ? coverImage.files
-        : []
-      const coverImageFull = coverImageFiles.find(file => file.name === 'full')
-      if (
-        coverImageFull &&
-        coverImageFull.filename &&
-        coverImageFull.filename.includes('headerimage')
-      ) {
-        return ''
-      }
-
-      return coverImageFull ? coverImageFull.url : coverImage.url || ''
+    },
+    secondaryHeaderImageObject() {
+      return (
+        this.secondaryMessageImages.find(image => image && image.isCover) ||
+        this.secondaryMessageImages[0] ||
+        null
+      )
+    },
+    secondaryHeaderImage() {
+      return this.resolveMessageImageUrl(this.secondaryHeaderImageObject)
     },
     hasSecondaryHeaderImage() {
       return Boolean(this.secondaryHeaderImage)
     },
+    shouldShowDesktopInlineImage() {
+      return Boolean(
+        this.secondaryHeaderImageObject && this.secondaryHeaderImageObject.isCover
+      )
+    },
+    secondaryMessageForDisplay() {
+      if (!this.secondaryHeaderImageObject) return this.secondaryMessage
+
+      return {
+        ...this.secondaryMessage,
+        images: [
+          {
+            ...this.secondaryHeaderImageObject,
+            isCover: true,
+          },
+        ],
+      }
+    },
     secondaryHeaderStyle() {
       if (!this.hasSecondaryHeaderImage) return {}
 
@@ -223,6 +242,13 @@ export default {
     this.teardownParallax()
   },
   methods: {
+    resolveMessageImageUrl(image) {
+      if (!image) return ''
+
+      const imageFiles = Array.isArray(image.files) ? image.files : []
+      const fullImage = imageFiles.find(file => file.name === 'full')
+      return fullImage ? fullImage.url : image.url || ''
+    },
     teardownParallax() {
       this.disableParallax()
       if (this.intersectionObserver) this.intersectionObserver.disconnect()
@@ -552,19 +578,6 @@ export default {
       }
     }
 
-    & :deep(.message-image) {
-      display: none;
-      margin-top: 0;
-      order: 2;
-      max-height: 400px;
-      img {
-        height: auto !important;
-        margin-left: space(1);
-        max-height: 25vw;
-        border-radius: var(--website-shape__radius-m);
-      }
-    }
-
     & :deep(.asd20-messaging__content) {
       order: 1;
       max-width: 60%;
@@ -629,6 +642,29 @@ export default {
       );
       -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 70%);
     }
+
+    & :deep(.message-image) {
+      display: flex;
+      margin-top: 0;
+      order: 2;
+      max-height: 400px;
+      img {
+        height: auto !important;
+        margin-left: space(1);
+        max-height: 25vw;
+        border-radius: var(--website-shape__radius-m);
+      }
+    }
+  }
+
+  .asd20-secondary-header--hide-desktop-image {
+    & :deep(.message-image) {
+      display: none;
+    }
+
+    & :deep(.asd20-messaging__content) {
+      max-width: 60%;
+    }
   }
 }
 </style>

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

@@ -1,15 +1,15 @@
 <template>
   <div class="page-content-404">
-    <h1><small>404</small>We're lost. But, we do have a map.</h1>
+    <!-- <h1><small>404</small>We're lost. But, we do have a map.</h1>
     <p class="lead">
       Let us humbly provide some directions to get you back on track:
-    </p>
-    <!-- <h1><small>404</small>"Not all who wander are lost."</h1>
-    <span><i>~ J.R.R. Tolkien, The Fellowship of the Ring</i></span>
+    </p> -->
+    <h1><small>404</small>"Not all those who wander are lost."</h1>
+    <span><i>~ J. R. R. Tolkien, "The Riddle of Strider," The Fellowship of the Ring</i></span>
     <p class="lead">
       Well, at least in this case, we can't determine your journey's end. Let us
       humbly provide a few options to get you back on track:
-    </p> -->
+    </p>
     <div class="options">
       <asd20-button
         class="option-button"