@asd20/ui 3.2.1030 → 3.2.1032

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.1030",
+  "version": "3.2.1032",
   "private": false,
   "license": "MIT",
   "repository": {

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

@@ -28,9 +28,14 @@
         class="long-description"
         v-html="longDescription"
       />
-      <div v-if="bodyContent" class="asd20-messaging__body-content">
+      <!-- <div v-if="bodyContent" class="asd20-messaging__body-content">
         <component :is="dynamicComponent"></component>
-      </div>
+      </div> -->
+      <div
+        v-if="bodyContent"
+        class="asd20-messaging__body-content"
+        v-html="bodyContent"
+      />
 
       <div
         v-if="callsToAction && callsToAction.length > 0"
@@ -55,6 +60,7 @@ import Asd20Icon from '../Asd20Icon'
 
 export default {
   name: 'Asd20Messaging',
+  inheritAttrs: false,
   components: { Asd20Button, Asd20Icon },
   props: {
     images: { type: Array, default: () => [] },
@@ -81,11 +87,11 @@ export default {
         'asd20-messaging--padded': this.padded,
       }
     },
-    dynamicComponent() {
-      return {
-        template: `<div>${this.bodyContent}</div>`,
-      }
-    },
+    // dynamicComponent() {
+    //   return {
+    //     template: `<div>${this.bodyContent}</div>`,
+    //   }
+    // },
     messageImage() {
       // Get full image
       const messageImages = Array.isArray(this.images) ? this.images : []

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

@@ -22,20 +22,27 @@
         </component>
       </div>
 
-      <p class="asd20-card__date" v-if="date && !emphasizedDate">
+      <div
+        class="asd20-card__date"
+        v-if="!emphasizedDate && (date || (modifiedDate && showModifiedDate))"
+      >
         <asd20-icon name="calendar" size="sm" />
-        <span v-if="modifiedDate && showModifiedDate" class="date-meta">
-          <span>Updated: </span>
-          <span
+
+        <div class="asd20-card__date-lines">
+          <div class="asd20-card__date-line" v-if="date">
+            <span class="label">Published:&nbsp;</span>
+            <time>{{ date }}</time>
+          </div>
+
+          <div
+            class="asd20-card__date-line"
             v-if="modifiedDate && showModifiedDate"
-            v-html="modifiedDate"
-          ></span>
-        </span>
-        <span v-else class="date-meta">
-          <span>Published: </span>
-          <span v-if="date && !emphasizedDate" v-html="date"></span>
-        </span>
-      </p>
+          >
+            <span class="label">Updated:&nbsp;</span>
+            <time>{{ modifiedDate }}</time>
+          </div>
+        </div>
+      </div>
       <p v-if="time" class="asd20-card__time">
         <asd20-icon name="hours-alt" size="sm" />
         <span v-html="time"></span>
@@ -156,8 +163,8 @@ export default {
       const strippedDescription = this.description
         //remove anchor tags but leave anchor text description
         .replace(/<a[^>]*>(.*?)<\/a>/g, '$1')
-        // remove other html tags
-        // .replace(/<[^>]+>/g, '')
+      // remove other html tags
+      // .replace(/<[^>]+>/g, '')
       return truncate(strippedDescription, { length: 150, separator: /,? +/ })
     },
     classes() {
@@ -341,9 +348,10 @@ export default {
     font-size: 0.85rem !important;
     font-weight: bold;
     font-family: var(--website-typography__font-family-headlines);
+    line-height: 1.2;
     display: flex;
     align-items: flex-start;
-    margin-top: space(0.25);
+    margin-top: space(0.5);
     margin-bottom: space(0.25);
     align-items: center;
     .asd20-icon {
@@ -351,17 +359,11 @@ export default {
       margin-left: -0.125em;
       margin-right: space(0.25);
     }
-    .date-meta {
-      font-size: 0.85rem !important;
-    }
   }
   &__time + &__location {
     margin-top: space(0);
     margin-bottom: space(0.25);
   }
-  // &__date {
-  //   margin-right: space(0.5);
-  // }
 
   &--emphasized-date {
     .asd20-card__header {
@@ -425,6 +427,9 @@ export default {
     display: flex;
     flex-wrap: wrap;
     margin-left: space(-0.25);
+    .asd20-tag {
+      padding: 0 space(0.25);
+    }
   }
 
   &__indicators {
@@ -526,18 +531,7 @@ export default {
 
     .asd20-card__header {
       position: relative;
-      // left: 0;
-      // right: 0;
-      // bottom: 100%;
-      // padding: space(1) space(1);
-      // margin-bottom: space(0.5);
       color: var(--website-card__foreground-color);
-
-      // background: linear-gradient(
-      //   0deg,
-      //   rgba(0, 0, 0, 0.5) 70%,
-      //   rgba(0, 0, 0, 0) 100%
-      // );
     }
 
     .asd20-card__date-time,
@@ -555,9 +549,6 @@ export default {
     .asd20-card__title {
       color: var(--website-card__reverse-foreground-color);
     }
-    .asd20-card__link {
-      // color: var(--website-card__reverse-foreground-color) !important;
-    }
   }
 
   &--with-image:not(.asd20-card--seperate-image) {
@@ -574,17 +565,10 @@ export default {
   &--reversed,
   &--with-image:not(.asd20-card--seperate-image) {
     color: var(--website-card__reverse-foreground-color);
-    // .asd20-card__date-time,
-    // .asd20-card__location {
-    //   .asd20-icon {
-    //     --line-color: var(--website-icon__fill-color-reverse);
-    //   }
-    // }
   }
   &--reversed {
     background: var(--website-card__reverse-background-color)
       var(--website-card__reverse-background-style);
-    // box-shadow: none;
     &:hover {
       box-shadow: 0 0 0 0 transparent, var(--website-card__hover-shadow);
       background: var(--website-card__hover-reverse-background-color);
@@ -592,17 +576,9 @@ export default {
     ::v-deep .asd20-icon {
       --line-color: var(--website-card__reverse-foreground-color);
     }
-    // .asd20-card__date-time,
-    // .asd20-card__location {
-    //   &::v-deep .asd20-icon g{
-    //     --line-color: var(--website-icon__fill-color-reverse);
-    //     // --line-color: red;
-    //   }
-    // }
   }
 
   &--expanded-header {
-    // background: var(--website-card__hover-background-color);
     .asd20-card__header {
       flex-grow: 1;
       display: flex;

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

@@ -324,7 +324,6 @@ export default {
       width: max-content;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 3rem;
-      padding: 0 1em 0 0.5em;
       &::v-deep .asd20-select-input {
         color: var(--website-page__foreground-color) !important;
       }
@@ -369,7 +368,7 @@ export default {
     z-index: 1;
     position: relative;
     color: var(--website-header__foreground-color);
-    padding: space(1.5) space(1) space(3) space(1);
+    padding: space(1.5) space(0.5) space(3) space(0.5);
     background: var(--website-header__background-color)
       var(--website-header__background-style);
     // background: var(--website-header__background-color) var(--imageBackground)

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

@@ -41,7 +41,9 @@
       "
       @click.native="$emit('toggle-all')"
     >
-      <span v-if="totalDismissedNotifications > 0" aria-hidden="true">{{ totalDismissedNotifications }}</span>
+      <span v-if="totalDismissedNotifications > 0" aria-hidden="true">{{
+        totalDismissedNotifications
+      }}</span>
     </asd20-button>
 
     <div
@@ -100,7 +102,7 @@ export default {
       notificationsFromIndex: [],
       enterActiveClass: 'fade-in',
       leaveActiveClass: 'fade-out',
-    };
+    }
   },
 
   computed: {
@@ -112,29 +114,29 @@ export default {
       ]
     },
     showControls() {
-      return this.notifications.length > 1;
+      return this.notifications.length > 1
     },
-    nextTitle () {
+    nextTitle() {
       return `Go to notification ${
         this.index + 1 > this.notificationsFromIndex.length - 1
           ? 1
           : this.index + 2
       } of ${this.notificationsFromIndex.length}`
     },
-    prevTitle () {
+    prevTitle() {
       return `Go to notification ${
         this.index - 1 < 0 ? this.notificationsFromIndex.length : this.index
       } of ${this.notificationsFromIndex.length}`
-    }
+    },
   },
   created() {
-    this.initNotifications(this.notifications);
+    this.initNotifications(this.notifications)
   },
 
   watch: {
-    notifications: function(value) {
-      this.initNotifications(value);
-    }
+    notifications: function (value) {
+      this.initNotifications(value)
+    },
   },
   methods: {
     initNotifications(incomingNotifications) {
@@ -146,24 +148,28 @@ export default {
       const newNotifications = incomingNotifications
         .filter(n => !this.notificationsFromIndex.find(n2 => n2.id === n.id))
         .map(newN => ({
-          ...newN, 
+          ...newN,
           key: Math.random().toString(36).substr(2, 9),
-          ariaHidden: true
+          ariaHidden: true,
         }))
       // take care of notifications that match and keep their existing key value to prevent animations from occurring
       for (const [oldIndex, oldNotification] of Object.entries(
         this.notificationsFromIndex
       )) {
-        const matchingUpdatedNotification = (incomingNotifications || []).find(n => n.id === oldNotification.id)
-        if(matchingUpdatedNotification) {
+        const matchingUpdatedNotification = (incomingNotifications || []).find(
+          n => n.id === oldNotification.id
+        )
+        if (matchingUpdatedNotification) {
           this.notificationsFromIndex[oldIndex] = {
             ...matchingUpdatedNotification,
-            key: this.notificationsFromIndex[oldIndex].key
+            key: this.notificationsFromIndex[oldIndex].key,
           }
         }
       }
       // put new notifications at the beginning of the array
-      this.notificationsFromIndex = newNotifications.concat(this.notificationsFromIndex)
+      this.notificationsFromIndex = newNotifications.concat(
+        this.notificationsFromIndex
+      )
       // if(this.index > this.notificationsFromIndex.length -1 )
       if (
         newNotifications.length > 0 ||
@@ -175,13 +181,11 @@ export default {
     },
     next() {
       const newIndex =
-        this.index < this.notifications.length - 1 ? this.index + 1 : 0;
+        this.index < this.notifications.length - 1 ? this.index + 1 : 0
 
-      const topItem = this.notificationsFromIndex[0];
+      const topItem = this.notificationsFromIndex[0]
 
-      topItem.key = Math.random()
-        .toString(36)
-        .substr(2, 9);
+      topItem.key = Math.random().toString(36).substr(2, 9)
 
       if (this.groupType === 'banner') {
         this.enterActiveClass = ''
@@ -192,13 +196,13 @@ export default {
       }
 
       // Remove top item
-      this.notificationsFromIndex.splice(0, 1);
+      this.notificationsFromIndex.splice(0, 1)
 
       // Add top item to bottom
-      this.notificationsFromIndex.push(topItem);
+      this.notificationsFromIndex.push(topItem)
 
       // Update the index
-      this.index = newIndex;
+      this.index = newIndex
     },
     previous() {
       if (this.groupType === 'banner') {
@@ -211,31 +215,29 @@ export default {
 
       const notifications = this.notifications.map(n => ({
         ...n,
-        key: this.notificationsFromIndex.find(n2 => n2.title === n.title).key
-      }));
+        key: this.notificationsFromIndex.find(n2 => n2.title === n.title).key,
+      }))
       const replacementIndex =
-        this.index > 0 ? this.index - 1 : this.notifications.length - 1;
+        this.index > 0 ? this.index - 1 : this.notifications.length - 1
 
       const newItem = {
         ...notifications[replacementIndex],
-        key: Math.random()
-          .toString(36)
-          .substr(2, 9)
+        key: Math.random().toString(36).substr(2, 9),
       }
 
       // Remove old item
-      notifications.splice(replacementIndex, 1);
+      notifications.splice(replacementIndex, 1)
 
       // Add top item to top
-      notifications.unshift(newItem);
+      notifications.unshift(newItem)
 
-      this.notificationsFromIndex = notifications;
+      this.notificationsFromIndex = notifications
 
       // Update the index
-      this.index = replacementIndex;
-    }
-  }
-};
+      this.index = replacementIndex
+    },
+  },
+}
 </script>
 
 <style lang="scss">
@@ -287,8 +289,8 @@ export default {
     }
 
     svg {
-      width: 100%;
-      height: 100%;
+      width: 32px;
+      height: 32px;
       color: var(--website-icon__line-color) !important;
       fill: var(--website-menu__icon-fill-color) !important;
     }
@@ -357,10 +359,9 @@ export default {
     background: rgba(255, 255, 255, 0.85);
     align-self: stretch;
     margin-right: -2rem;
-    // z-index: -1;
     z-index: 8;
     padding-right: 2rem;
-    // padding-left: 0.5rem;
+    padding-left: 0.5rem;
     border-radius: 3rem;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0625);
   }
@@ -381,7 +382,8 @@ export default {
     border-radius: var(--website-shape__radius-m);
     &:first-child {
       z-index: 9;
-      .asd20-notification__content, g {
+      .asd20-notification__content,
+      g {
         transition: all 0.5s;
         opacity: 1;
         align-self: initial !important;
@@ -398,7 +400,8 @@ export default {
         overflow-y: hidden;
         transform: translateY(#{0.75 * ($i - 1)}rem)
           scale(#{1 - (($i - 1) * 0.05)});
-        .asd20-notification__content, g {
+        .asd20-notification__content,
+        g {
           transition: all 0.5s;
           opacity: 0.5;
         }
@@ -441,7 +444,7 @@ export default {
     left: 0.5rem;
   }
 
-   &--top-left {
+  &--top-left {
     position: fixed;
     top: 0.5rem;
     left: 0.5rem;
@@ -458,15 +461,6 @@ export default {
       fill: #ffffff;
     }
   }
-  &--banner .notifications {
-    // flex-direction: column;
-    // position: absolute;
-    // top: calc(100% + 0.5rem);
-    // right: 0;
-    // left: auto;
-    // width: 100%;
-    // display: flex;
-  }
   &--banner .notification {
     transition: all 0.25s;
     top: 0;
@@ -631,11 +625,11 @@ export default {
 
 @keyframes swoop-in {
   0% {
-    transform: scale(0.0);
+    transform: scale(0);
     opacity: 0;
   }
   100% {
-    transform: scale(1.0);
+    transform: scale(1);
     opacity: 1;
   }
 }

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

@@ -6,8 +6,8 @@
       (formattedPrimaryMessages.length > 0 &&
         primaryMessages[0].bodyContent &&
         primaryMessages[0].bodyContent !== '<p></p>') ||
-        formattedPrimaryMessages.length > 1 ||
-        forceDisplay
+      formattedPrimaryMessages.length > 1 ||
+      forceDisplay
     "
   >
     <slot name="before"></slot>
@@ -45,15 +45,37 @@
 <script>
 import Asd20Messaging from '../../atoms/Asd20Messaging'
 
+// function formatMessage(
+//   message,
+//   omitBodyContent,
+//   omitDetailLink,
+//   omitCallsToAction
+// ) {
+//   return {
+//     ...message,
+//     bodyContent: omitBodyContent ? '' : message.bodyContent,
+//     detailLink: omitDetailLink ? '' : message.detailLink,
+//     callsToAction: omitCallsToAction ? [] : message.callsToAction,
+//   }
+// }
+
 function formatMessage(
   message,
   omitBodyContent,
   omitDetailLink,
   omitCallsToAction
 ) {
+  // Prefer existing bodyContent, else fall back to bodyHtml
+  const body = omitBodyContent
+    ? ''
+    : message.bodyContent || message.bodyHtml || ''
+
+  // Strip bodyHtml so it doesn't "fall through" as a root attribute
+  const { bodyHtml, ...rest } = message
+
   return {
-    ...message,
-    bodyContent: omitBodyContent ? '' : message.bodyContent,
+    ...rest,
+    bodyContent: body,
     detailLink: omitDetailLink ? '' : message.detailLink,
     callsToAction: omitCallsToAction ? [] : message.callsToAction,
   }

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

@@ -354,7 +354,6 @@ export default {
         width: max-content;
         background: rgba(255, 255, 255, 0.9);
         border-radius: 3rem;
-        padding: 0 1em 0 0.5em;
         &::v-deep .asd20-select-input {
           color: var(--website-page__foreground-color) !important;
         }
@@ -404,7 +403,7 @@ export default {
     background: var(--website-header__background-color)
       var(--website-header__background-style);
     color: var(--website-header__foreground-color);
-    padding: space(1) space(1) space(1) space(1);
+    padding: space(1) space(0.5);
     z-index: 1;
     &::v-deep .asd20-breadcrumb {
       margin: space(1) 0;

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

@@ -77,6 +77,7 @@ export default {
       text-align: center;
       flex: 1 1;
       align-self: start;
+      margin: space(0.5) 0;
       &::v-deep .asd20-button__label {
         margin-left: space(0);
       }
@@ -87,8 +88,6 @@ export default {
 @media (min-width: 1024px) {
   .asd20-quicklinks-menu {
     padding: space(0) space(1);
-    .asd20-button {
-    }
   }
 }
 </style>

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

@@ -214,7 +214,7 @@ export default {
   .asd20-swiper-feed {
     .feed-buttons {
       flex-direction: row;
-      margin-left: space(1);
+      margin-left: 0;
     }
     .secondary-button {
       margin: 0 0 0 space(0.5);
@@ -240,7 +240,7 @@ export default {
       font-size: 1rem !important;
     }
     .feed-buttons {
-      margin-left: space(3);
+      margin-left: space(2);
     }
   }
 }

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

@@ -262,7 +262,7 @@ export default {
         border-radius: var(--website-shape__radius-m) 0 0 var(--website-shape__radius-m);
         /* Make sure it sits behind the messaging card */
         z-index: -1;
-        animation: slide_left2 2.5s ease-in-out 0s both;
+        animation: slide_left2 2s ease-in-out 0s both;
       }
     }
     &::v-deep .asd20-messaging__button-group {

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

@@ -410,7 +410,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .notification-group--inline {
     margin: space(2) space(1) space(1) space(1);

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

@@ -423,7 +423,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .notification-group--inline {
     margin: space(2) space(1) space(1) space(1);

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

@@ -331,7 +331,7 @@ export default {
     keywords: { type: String, default: '' },
     selectedCategories: { type: Array, default: () => [] },
   },
-  data: function() {
+  data: function () {
     return {
       numberToShow: 25,
       counter: 1,
@@ -466,7 +466,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .feed-title {
     margin: space(1) 0 0 0;

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

@@ -190,7 +190,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
 }
 

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

@@ -314,7 +314,7 @@ export default {
     selectedCategories: { type: Array, default: () => [] },
     // categoryOptions: { type: Array, default: () => [] },
   },
-  data: function() {
+  data: function () {
     return {
       numberToShow: 100,
       counter: 1,
@@ -408,7 +408,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-page-content {
     display: block;

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

@@ -246,6 +246,7 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2);
+    right: space(0.75);
   }
 }
 

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

@@ -239,6 +239,7 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2);
+    right: space(0.75);
   }
 }
 

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

@@ -241,7 +241,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
 }
 

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

@@ -371,8 +371,8 @@ export default {
   }
   .notification-group--floating {
     position: absolute;
-    right: space(0.85);
-    top: space(2.0375);
+    right: space(0.75);
+    top: space(1);
     z-index: 101;
   }
   .notification-group--inline {

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

@@ -243,7 +243,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-notification-group--inline {
     margin-top: space(2) !important;

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

@@ -221,7 +221,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-notification-group--inline {
     margin-top: space(2) !important;

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

@@ -222,7 +222,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.06);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-notification-group--inline {
     margin-top: space(2) !important;

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

@@ -217,7 +217,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-notification-group--inline {
     margin-top: space(2) !important;

package/src/data/page-queries/digest-page-query-result.json

@@ -897,7 +897,7 @@
         "id": "f4656914-9ec6-1811-aa5d-31f532f483d5",
         "title": "Discovery Canyon Campus High School",
         "educationLevels": ["High"],
-        "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/dcc_logo.jpg",
+        "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/DCC.png",
         "website": "https://dcchigh.asd20.org"
     }, {
         "id": "b6341b18-f4b9-311d-614c-a0ee36eb3254",

package/src/data/page-queries/landing-page-query-result.json

@@ -124,7 +124,7 @@
               "isCover": false,
               "files": [{
                   "name": "full",
-                  "url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images//full/dcc_boys_swimming_1200x800.jpg"
+                  "url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images/supports-for-academic-success/full/AEES_student_selects_book_1280x582_2023-06-12T18_54_25.jpg"
                 },
                 {
                   "name": "thumbnail-md",
@@ -161,7 +161,7 @@
                 {
                   "name": "full",
                   "filename": "PES Accredidation Hero_1280x711_2023-08-29T21_16_58.jpg",
-                  "url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images/accredited-with-distinction/full/PES Accredidation Hero_1280x711_2023-08-29T21_16_58.jpg"
+                  "url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images/supports-for-academic-success/full/AEES_student_selects_book_1280x582_2023-06-12T18_54_25.jpg"
                 }
               ],
               "metadata": {

package/src/data/page-queries/school-home-page-query-result.json

@@ -980,7 +980,7 @@
     "id": "26eaf390-d8ab-11e9-a3a8-5de5bba4f125",
     "title": "Academy District 20",
     "educationLevels": [],
-    "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/asd20logo.png",
+    "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/ASD20.png",
     "website": "https://www.asd20.org"
   }, {
     "id": "10a1d179-6149-064e-7034-36c1a1e7f790",

package/src/data/page-queries/story-index-page-query-result.json

@@ -853,7 +853,7 @@
         "id": "f4656914-9ec6-1811-aa5d-31f532f483d5",
         "title": "Discovery Canyon Campus High School",
         "educationLevels": ["High"],
-        "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/dcc_logo.jpg",
+        "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/DCC.png",
         "website": "https://dcchigh.asd20.org"
     }, {
         "id": "b6341b18-f4b9-311d-614c-a0ee36eb3254",

package/src/data/page-queries/sublanding-page-query-result.json

@@ -1576,7 +1576,7 @@
     "id": "f4656914-9ec6-1811-aa5d-31f532f483d5",
     "title": "Discovery Canyon Campus High School",
     "educationLevels": ["High"],
-    "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/dcc_logo.jpg",
+    "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/DCC.png",
     "website": "https://dcchigh.asd20.org"
   }, {
     "id": "b6341b18-f4b9-311d-614c-a0ee36eb3254",

package/src/helpers/mapMessageToCard.js

@@ -1,5 +1,17 @@
 import { format, parseISO } from 'date-fns'
 
+function formatApDate(iso) {
+  try {
+    const d = parseISO(iso)
+    if (isNaN(d)) return ''
+    const m = format(d, 'MMM') // locale-dependent; assumes en-US -> 'May'
+    const mOut = m === 'May' ? m : `${m}.`
+    return `${mOut} ${format(d, 'd, yyyy')}`
+  } catch {
+    return ''
+  }
+}
+
 export default function mapMessageToCard(
   message,
   options = {},
@@ -53,28 +65,42 @@ export default function mapMessageToCard(
   let modifiedDate = ''
   let time = ''
 
+  // if (message.publishDateTime) {
+  //   try {
+  //     const parsed = parseISO(message.publishDateTime)
+  //     if (!isNaN(parsed)) {
+  //       date = format(parsed, 'MMM. d, yyyy')
+  //       time = format(parsed, 'h:mm aa')
+  //     }
+  //   } catch (e) {
+  //     date = ''
+  //     time = ''
+  //   }
+  // }
+
   if (message.publishDateTime) {
+    date = formatApDate(message.publishDateTime)
     try {
       const parsed = parseISO(message.publishDateTime)
-      if (!isNaN(parsed)) {
-        date = format(parsed, 'MMM. d, yyyy')
-        time = format(parsed, 'h:mm aa')
-      }
-    } catch (e) {
-      date = ''
-      time = ''
+      if (!isNaN(parsed)) time = format(parsed, 'h:mm aa')
+    } catch {
+      /* ignore */
     }
   }
 
+  // if (message.modifiedDateTime) {
+  //   try {
+  //     const parsed = parseISO(message.modifiedDateTime)
+  //     if (!isNaN(parsed)) {
+  //       modifiedDate = format(parsed, 'MMM. d, yyyy')
+  //     }
+  //   } catch (e) {
+  //     modifiedDate = ''
+  //   }
+  // }
+
   if (message.modifiedDateTime) {
-    try {
-      const parsed = parseISO(message.modifiedDateTime)
-      if (!isNaN(parsed)) {
-        modifiedDate = format(parsed, 'MMM. d, yyyy')
-      }
-    } catch (e) {
-      modifiedDate = ''
-    }
+    modifiedDate = formatApDate(message.modifiedDateTime)
   }
 
   return Object.assign(