@asd20/ui 3.2.986 → 3.2.987

package/package.json

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

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

@@ -254,25 +254,8 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2.0375);
-    // .bell {
-    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-    //   svg {
-    //     fill: var(--color__accent) !important;
-    //   }
-    //   span {
-    //     background: var(--color__accent) !important;
-    //     top: inherit !important;
-    //     right: inherit !important;
-    //     width: 1.2rem !important;
-    //     height: 1.2rem !important;
-    //     font-size: 0.75rem !important;
-    //   }
-    // }
   }
 
-  // .notification-group--inline {
-  //   margin-bottom: space(3);
-  // }
   .asd20-feeds-section--top {
     // margin-top: space(1);
     .asd20-swiper-feed:first-child {
@@ -290,9 +273,6 @@ export default {
       }
     }
   }
-  // .asd20-page-content h2 {
-  //   font-size: 20.8px !important;
-  // }
 }
 
 @media (min-width: 1024px) {
@@ -303,13 +283,6 @@ export default {
     .asd20-notification-group--floating {
       position: absolute;
       top: space(1);
-      // .bell {
-      //   span {
-      //     background: var(--color__accent);
-      //     top: -0.6em !important;
-      //     right: -0.6em !important;
-      //   }
-      // }
     }
     .notification-group--inline {
       flex-basis: 100%;
@@ -320,10 +293,6 @@ export default {
       }
     }
 
-    // .asd20-feeds-section--top {
-    //   margin-top: space(0);
-    // }
-
     .asd20-page-content {
       // margin-top: space(1);
       display: flex;
@@ -343,6 +312,7 @@ export default {
         max-width: 50vw;
         flex: 1 1 0;
         min-width: 0;
+        flex-direction: column;
       }
     }
   }

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

@@ -246,24 +246,7 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2);
-    // .bell {
-    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-    //   svg {
-    //     fill: var(--color__accent) !important;
-    //   }
-    //   span {
-    //     background: var(--color__accent) !important;
-    //     top: inherit !important;
-    //     right: inherit !important;
-    //     width: 1.2rem !important;
-    //     height: 1.2rem !important;
-    //     font-size: 0.75rem !important;
-    //   }
-    // }
   }
-  // .asd20-page-content h2 {
-  //   font-size: 20.8px !important;
-  // }
 }
 
 @media (min-width: 768px) {
@@ -271,20 +254,6 @@ export default {
     .asd20-notification-group--floating {
       position: absolute;
       top: space(0.5);
-      // .bell {
-      //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-      //   svg {
-      //     fill: var(--color__accent) !important;
-      //   }
-      //   span {
-      //     background: var(--color__accent) !important;
-      //     top: inherit !important;
-      //     right: inherit !important;
-      //     width: 1.2rem !important;
-      //     height: 1.2rem !important;
-      //     font-size: 0.75rem !important;
-      //   }
-      // }
     }
   }
 }
@@ -320,7 +289,7 @@ export default {
         padding: space(2) !important;
         flex: 1 1 0;
         min-width: 0;
-        // max-width: 50vw;
+        flex-direction: column;
       }
     }
   }

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

@@ -239,24 +239,7 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2);
-    // .bell {
-    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-    //   svg {
-    //     fill: var(--color__accent) !important;
-    //   }
-    //   span {
-    //     background: var(--color__accent) !important;
-    //     top: inherit !important;
-    //     right: inherit !important;
-    //     width: 1.2rem !important;
-    //     height: 1.2rem !important;
-    //     font-size: 0.75rem !important;
-    //   }
-    // }
   }
-  // .asd20-page-content h2 {
-  //   font-size: 20.8px !important;
-  // }
 }
 
 @media (min-width: 768px) {
@@ -264,20 +247,6 @@ export default {
     .asd20-notification-group--floating {
       position: absolute;
       top: space(0.5);
-      // .bell {
-      //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-      //   svg {
-      //     fill: var(--color__accent) !important;
-      //   }
-      //   span {
-      //     background: var(--color__accent) !important;
-      //     top: inherit !important;
-      //     right: inherit !important;
-      //     width: 1.2rem !important;
-      //     height: 1.2rem !important;
-      //     font-size: 0.75rem !important;
-      //   }
-      // }
     }
   }
 }
@@ -316,6 +285,7 @@ export default {
         max-width: 50vw;
         flex: 1 1 0;
         min-width: 0;
+        flex-direction: column;
       }
     }
 

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

@@ -242,24 +242,7 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2.0375);
-    // .bell {
-    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-    //   svg {
-    //     fill: var(--color__accent) !important;
-    //   }
-    //   span {
-    //     background: var(--color__accent) !important;
-    //     top: inherit !important;
-    //     right: inherit !important;
-    //     width: 1.2rem !important;
-    //     height: 1.2rem !important;
-    //     font-size: 0.75rem !important;
-    //   }
-    // }
   }
-  // .asd20-page-content h2 {
-  //   font-size: 20.8px !important;
-  // }
 }
 
 @media (min-width: 1024px) {
@@ -270,13 +253,6 @@ export default {
     .asd20-notification-group--floating {
       position: absolute;
       top: space(1);
-      // .bell {
-      //   span {
-      //     background: var(--color__accent);
-      //     top: -0.6em !important;
-      //     right: -0.6em !important;
-      //   }
-      // }
     }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
@@ -304,7 +280,7 @@ export default {
         flex: 1;
         flex: 1 1 0;
         min-width: 0;
-        // max-width: 50vw;
+        flex-direction: column;
       }
     }
   }

package/src/mixins/pageTemplateMixin.js

@@ -134,25 +134,66 @@ export default {
       }
     },
 
-    primaryDetailMessages() {
-      // If there are more than 2 or more messages on a detail page
-      // -- Detail Pages
+    // primaryDetailMessages() {
+    //   // If there are more than 2 or more messages on a detail page
+    //   // -- Detail Pages
+
+    //   let originalMessages = JSON.parse(JSON.stringify(this.messages))
+
+    //   let firstMessage = originalMessages[0]
+    //   delete firstMessage.title
+    //   delete firstMessage.heading
+    //   delete firstMessage.summary
+    //   delete firstMessage.shortDescription
+
+    //   let messagesArray = originalMessages.slice(1)
+    //   messagesArray.unshift(firstMessage)
+    //   messagesArray.slice(
+    //     1,
+    //     Math.min(originalMessages.length, this.primaryMessageLimit + 1)
+    //   )
+    //   return messagesArray
+    // },
 
-      let originalMessages = JSON.parse(JSON.stringify(this.messages))
+    primaryDetailMessages() {
+      const originalMessages = JSON.parse(JSON.stringify(this.messages))
+
+      return originalMessages.map((message, index) => {
+        // Clone the message
+        const newMessage = { ...message }
+
+        if (index === 0) {
+          // Strip fields already used in pageHeader
+          delete newMessage.title
+          delete newMessage.heading
+          delete newMessage.summary
+          delete newMessage.shortDescription
+          return newMessage
+        }
 
-      let firstMessage = originalMessages[0]
-      delete firstMessage.title
-      delete firstMessage.heading
-      delete firstMessage.summary
-      delete firstMessage.shortDescription
-
-      let messagesArray = originalMessages.slice(1)
-      messagesArray.unshift(firstMessage)
-      messagesArray.slice(
-        1,
-        Math.min(originalMessages.length, this.primaryMessageLimit + 1)
-      )
-      return messagesArray
+        // Construct title + summary markup if available
+        const titleMarkup = newMessage.title
+          ? `<h2>${newMessage.title}</h2>`
+          : ''
+
+        const summaryMarkup = newMessage.shortDescription
+          ? `<p>${newMessage.shortDescription}</p>`
+          : ''
+
+        // Merge into bodyContent (inserted before existing body)
+        const originalBody = newMessage.bodyContent || ''
+        newMessage.bodyContent = `${titleMarkup}${summaryMarkup}${originalBody}`
+
+        // Remove title/summary fields to prevent accidental rendering
+        delete newMessage.title
+        delete newMessage.heading
+        delete newMessage.summary
+        delete newMessage.shortDescription
+        delete newMessage.detailLink
+        delete newMessage.detailLinkLabel
+
+        return newMessage
+      })
     },
 
     secondaryMessages() {
@@ -215,7 +256,9 @@ export default {
           coverImageFull.filename.includes('headerimage')
         ) {
           imageUrl = null
-          headerImageUrl = coverImageFull ? coverImageFull.url : coverImage.url || ''
+          headerImageUrl = coverImageFull
+            ? coverImageFull.url
+            : coverImage.url || ''
         } else {
           imageUrl = coverImageFull ? coverImageFull.url : coverImage.url || ''
           imageCaption = coverImage.metadata