@asd20/ui 3.2.1031 → 3.2.1032

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.1031",
+  "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/Asd20NotificationGroup/index.vue

@@ -359,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);
   }

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/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/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(