@asd20/ui-next 2.0.20 → 2.0.21

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [2.0.21](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.20...ui-next-v2.0.21) (2026-04-02)
+
 ## [2.0.20](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.19...ui-next-v2.0.20) (2026-04-02)
 
 

package/package.json

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

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

@@ -7,7 +7,7 @@
     <slot name="before" />
 
     <asd20-image-gallery
-      v-if="images.length > 1"
+      v-if="allowSingleImageGallery ? images.length > 0 : images.length > 1"
       title="Images"
       :images="images"
     >
@@ -37,6 +37,7 @@ export default {
     ),
   },
   props: {
+    allowSingleImageGallery: { type: Boolean, default: false },
     images: { type: Array, default: () => [] },
     videos: { type: Array, default: () => [] },
   },

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

@@ -15,7 +15,10 @@
       ></asd20-organization-picker>
       <slot name="top" />
     </div>
-    <div class="asd20-page-header__main">
+    <div
+      class="asd20-page-header__main"
+      :class="{ 'asd20-page-header__main--has-image': imageUrl && !$slots.aside }"
+    >
       <div
         class="asd20-page-header__content"
         :class="headerImageUrl ? 'new-header add-fade' : ''"
@@ -144,7 +147,7 @@
       /> -->
       <asd20-button
         v-if="callsToAction.length >= 1"
-        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+        :size="mq === 'sm' ? 'sm' : 'lg'"
         :label="callsToAction[0].label"
         :icon="callsToAction[0].icon"
         :link="callsToAction[0].url"
@@ -155,7 +158,7 @@
       />
       <asd20-button
         v-if="callsToAction.length >= 2"
-        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+        :size="mq === 'sm' ? 'sm' : 'lg'"
         :label="callsToAction[1].label"
         :icon="callsToAction[1].icon"
         :link="callsToAction[1].url"
@@ -584,6 +587,15 @@ export default {
     }
   }
 }
+
+@media (max-width: 767px) {
+  .asd20-page-header:not(.asd20-page-header--has-cta) {
+    &::after {
+      display: none;
+    }
+  }
+}
+
 @media (min-width: 667px) {
   .asd20-page-header {
     &__image {
@@ -602,7 +614,7 @@ export default {
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1023px) {
   .asd20-page-header {
     .back {
       padding: 0;
@@ -614,9 +626,113 @@ export default {
       right: space(0);
       left: space(4);
       border-bottom-left-radius: 5rem;
+    }
+    &__main--has-image {
+      min-height: 400px;
+    }
+
+    &__main {
+      display: flex;
+      justify-content: space-between;
+      border-bottom-left-radius: 5rem;
+      background: var(--website-header__background-color)
+        var(--website-header__background-style);
+    }
 
+    &__top {
+      display: none;
+    }
+
+    &__tools {
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin-top: 0;
+      .asd20-breadcrumb,
+      .back {
+        margin: 0 !important;
+        order: 1;
+      }
+      .language-and-tools {
+        order: 2;
+      }
+      .asd20-language-loader {
+        order: 2;
+      }
+    }
+    &__content {
+      width: 100%;
+      flex-basis: 50%;
+      flex-grow: 1;
+      padding: 1rem 1rem 1rem 2rem;
+      min-height: clamp(240px, 40vh, 300px);
+      /* margin-right: space(3);*/
+      background: transparent;
+    }
+
+    &__image {
+      display: flex;
+      max-height: 350px;
+      max-width: 45vw;
+      margin-top: 0;
+      margin-bottom: space(-1);
+      border-radius: 0;
+      border-bottom-left-radius: 2rem;
+      overflow: hidden;
+      flex-grow: 1;
+      min-width: 30vw;
+      img {
+        width: 100%;
+        height: 100%;
+        max-height: inherit;
+        object-fit: cover;
+        border-top: none;
+        /* opacity: 0;*/
+      }
+    }
+
+    h1 {
+      font-size: 2rem !important;
+    }
+
+    &__title-content {
+      position: relative;
+      max-width: space(35);
+      /* .asd20-page-header__lead {*/
+      /*   margin-right: 25%;*/
+      /* }*/
+    }
+
+    & :deep(.asd20-organization-picker) {
+      display: flex;
+      margin: space(0) auto space(0) space(0);
+    }
+
+    &__call-to-action {
+      margin: space(-1) 60vw space(-1) space(3);
+      .asd20-button {
+        font-size: 1rem !important;
+        flex-shrink: 0;
+        padding: 0.25rem 2rem;
+      }
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-page-header {
+    .back {
+      padding: 0;
+      margin: 0;
+    }
+    &::after {
+      top: space(6);
+      bottom: space(-2);
+      right: space(0);
+      left: space(4);
+      border-bottom-left-radius: 5rem;
     }
     &__main {
+      display: flex;
       justify-content: space-between;
       border-bottom-left-radius: 5rem;
       background: var(--website-header__background-color)
@@ -637,7 +753,7 @@ export default {
       max-height: 600px;
       margin-top: space(-1);
       margin-bottom: space(-1);
-      border-radius: var(--website-shape__radius-m);
+      border-radius: var(--website-shape__radius-l);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       overflow: hidden;
@@ -694,10 +810,6 @@ export default {
       }
     }
 
-    &__main {
-      display: flex;
-    }
-
     &__call-to-action {
       margin: space(-1) 60vw space(-1) space(3);
       .asd20-button {

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

@@ -95,6 +95,7 @@
 
     <asd20-media-section
       v-if="shouldShowArticleMediaSection"
+      allow-single-image-gallery
       :images="articleGalleryImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/mixins/pageTemplateMixin.js

@@ -251,7 +251,7 @@ export default {
 
     shouldShowArticleMediaSection() {
       return (
-        this.articleGalleryImages.length >= 3 ||
+        this.articleGalleryImages.length > 0 ||
         this.combinedMessageVideos.length > 0
       )
     },