@asd20/ui-next 2.21.0 → 2.21.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.21.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.1...ui-next-v2.21.2) (2026-08-12)
+
+
+### Bug Fixes
+
+* constrain single message images to message container ([18a1065](https://github.com/academydistrict20/asd20-ui-next/commit/18a1065ab9295e377c2ae9e879fe8ef557d0d396))
+
+## [2.21.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.0...ui-next-v2.21.1) (2026-08-12)
+
+
+### Bug Fixes
+
+* rename 'commtool' button; add 'submit good news button' ([5f6a976](https://github.com/academydistrict20/asd20-ui-next/commit/5f6a9761975d7f79f51d3801089a889a7ec0395f))
+
 # [2.21.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.20.1...ui-next-v2.21.0) (2026-08-10)
 
 

package/package.json

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

package/src/components/atoms/Asd20RichBodyContent/index.vue

@@ -158,6 +158,15 @@ export default {
     margin-bottom: 0;
   }
 
+  :deep(.asd20-message-image) {
+    box-sizing: border-box;
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1rem auto;
+    object-fit: contain;
+  }
+
   :deep(.asd20-message-image-gallery) {
     box-sizing: border-box;
     max-width: 100%;

package/src/components/atoms/Asd20RichBodyContent/messageDocumentRenderer.js

@@ -771,8 +771,8 @@ function renderTable(node) {
   )}</tbody></table></div>`
 }
 
-function renderImage(attrs) {
-  return `<img${attribute('src', attrs.src)}${attribute(
+function renderImage(attrs, className = '') {
+  return `<img${attribute('class', className)}${attribute('src', attrs.src)}${attribute(
     'alt',
     attrs.alt,
     true
@@ -811,11 +811,11 @@ function renderStandardNode(node) {
   }
   if (node.type === 'listItem') return `<li>${renderChildren(node)}</li>`
   if (node.type === 'image') {
-    return renderImage(node.attrs)
+    return renderImage(node.attrs, 'asd20-message-image')
   }
   if (node.type === 'imageGallery') {
     return `<figure class="asd20-message-image-gallery" data-cc-node="image-gallery"><div class="asd20-message-image-gallery__images" data-cc-gallery-images="">${node.attrs.images
-      .map(renderImage)
+      .map(image => renderImage(image))
       .join('')}</div></figure>`
   }
   if (node.type === 'videoEmbed') {

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

@@ -44,6 +44,7 @@
         :loading="!Array.isArray(stories)"
         :cards="storyCards"
         :slides-per-view="3"
+        :show-good-news-button="isEmployeeWebsite"
         card-type="Feature"
       ></Asd20SwiperFeed>
     </intersect>
@@ -109,7 +110,7 @@ export default {
       if (!Array.isArray(this.announcements)) return []
 
       // If the organization id is not the employee org:
-      if (this.organizationId !== '7ab6f0b0-3304-11ef-92d6-ed16a99dd422') {
+      if (!this.isEmployeeWebsite) {
         return this.announcements.map(a =>
           mapMessageToCard(
             a,
@@ -144,6 +145,10 @@ export default {
       })
     },
 
+    isEmployeeWebsite() {
+      return this.organizationId === '7ab6f0b0-3304-11ef-92d6-ed16a99dd422'
+    },
+
     storyCards() {
       if (!Array.isArray(this.stories)) return []
       return this.stories.map(s =>

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

@@ -66,7 +66,11 @@
     <div class="feed-buttons">
       <asd20-button
         v-if="link && linkLabel && (cards.length >= 10 || cardType === 'Event')"
-        :class="showProtectedContentButtons ? 'secondary-button' : ''"
+        :class="
+          showProtectedContentButtons || showGoodNewsButton
+            ? 'secondary-button'
+            : ''
+        "
         :label="linkLabel"
         :link="link"
         size="md"
@@ -89,7 +93,7 @@
       <asd20-button
         v-if="showProtectedContentButtons"
         class="secondary-button"
-        label="Communication Tool Form"
+        label="Request an Announcement"
         link="https://forms.office.com/Pages/ResponsePage.aspx?id=zcp1lGYYyky2X9rtmQDNB-eqaTnt2ZBNtZ1N5vhrzHNUNFBHNlNBOUJaN1VXQjhDRzBVQVdOS1pVQSQlQCN0PWcu"
         size="md"
         horizontal
@@ -97,6 +101,17 @@
         transparent
         centered
       />
+      <asd20-button
+        v-if="showGoodNewsButton"
+        class="secondary-button"
+        label="Submit Good News"
+        link="https://forms.cloud.microsoft/r/kxvn15bNEA"
+        size="md"
+        horizontal
+        bordered
+        transparent
+        centered
+      />
     </div>
   </component>
 </template>
@@ -126,6 +141,7 @@ export default {
     tag: { type: String, default: 'div' },
     cardType: { type: String, default: '' },
     hasProtectedContent: { type: Boolean, default: false },
+    showGoodNewsButton: { type: Boolean, default: false },
   },
 
   data: () => ({