@asd20/ui 3.2.985 → 3.2.987

package/package.json

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

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

@@ -3,7 +3,7 @@
     :class="[
       'asd20-checkbox',
       { 'asd20-checkbox__no-icon': !icon && !checkbox },
-      { 'asd20-checkbox__checkbox': !icon && checkbox }
+      { 'asd20-checkbox__checkbox': !icon && checkbox },
     ]"
   >
     <input
@@ -37,7 +37,7 @@ export default {
     description: { type: String, default: '' },
     count: { type: Number, default: 0 },
     icon: { type: String, default: '' },
-    checkbox: { type: Boolean, default: false }
+    checkbox: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -46,7 +46,9 @@ export default {
   },
   computed: {
     id() {
-      const base = this.label?.replace(/ /gi, '-').toLowerCase()
+      const base = this.label
+        ? this.label.replace(/ /gi, '-').toLowerCase()
+        : null
       return base && base.length
         ? `asd20-checkbox-${base}`
         : `asd20-checkbox-${this._uid}`
@@ -158,7 +160,6 @@ export default {
       right: unset;
       opacity: 1;
     }
-
   }
 
   input:focus + label:after {

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

@@ -460,10 +460,10 @@ export default {
     margin: space(-1) space(1) space(-1) space(1);
     z-index: 1;
     display: flex;
+
     .asd20-button {
       box-sizing: border-box;
       flex-shrink: 1;
-      // max-width: 40vw;
       min-height: space(2);
       font-size: 0.875rem !important;
       background-color: var(
@@ -474,38 +474,39 @@ export default {
         --website-header__button-foreground-color,
         var(--color__accent-t100)
       );
-      // box-shadow: 2px 2px 2px rgb(50, 50, 50);
       position: relative;
       padding: space(0.5) space(1.5);
       transition: background-color 0.3s ease;
       z-index: 2;
       overflow: hidden;
-      ::before {
+
+      // Vertical accent bar (replaces chevron)
+      &::before {
         content: '';
         position: absolute;
         top: 0;
-        left: 0; /* Align with the button's left edge */
-        width: 20px; /* Default arrow width */
-        height: 100%; /* Match the button's height */
-        clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
-        background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
-        transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
+        left: 0;
+        width: 10px;
+        height: 100%;
+        background-color: var(--color__accent-t40);
+        transition: width 0.3s ease, background-color 0.3s ease;
         z-index: 0;
       }
+
       &:hover,
       &:focus {
         background-color: var(
           --website-header__button-hover-background-color,
-          var(--color__accent-s10)
+          var(--color__accent-t60)
         );
         color: var(
           --website-header__button-hover-foreground-color,
           var(--color__accent-t100)
         );
-        ::before {
-          width: 25px; /* Arrow grows on hover */
-          background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
-          z-index: 0;
+
+        &::before {
+          width: 20px;
+          background-color: var(--color__accent-t60);
         }
       }
 

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

@@ -486,10 +486,10 @@ export default {
     margin: space(-1) space(1) space(-1) space(1);
     z-index: 1;
     display: flex;
+
     .asd20-button {
       box-sizing: border-box;
       flex-shrink: 1;
-      // max-width: 40vw;
       min-height: space(2);
       font-size: 0.875rem !important;
       background-color: var(
@@ -500,38 +500,39 @@ export default {
         --website-header__button-foreground-color,
         var(--color__accent-t100)
       );
-      // box-shadow: 2px 2px 2px rgb(50, 50, 50);
       position: relative;
       padding: space(0.5) space(1.5);
       transition: background-color 0.3s ease;
       z-index: 2;
       overflow: hidden;
-      ::before {
+
+      // Vertical accent bar (replaces chevron)
+      &::before {
         content: '';
         position: absolute;
         top: 0;
-        left: 0; /* Align with the button's left edge */
-        width: 20px; /* Default arrow width */
-        height: 100%; /* Match the button's height */
-        clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
-        background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
-        transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
+        left: 0;
+        width: 10px;
+        height: 100%;
+        background-color: var(--color__accent-t40);
+        transition: width 0.3s ease, background-color 0.3s ease;
         z-index: 0;
       }
+
       &:hover,
       &:focus {
         background-color: var(
           --website-header__button-hover-background-color,
-          var(--color__accent-s10)
+          var(--color__accent-t60)
         );
         color: var(
           --website-header__button-hover-foreground-color,
           var(--color__accent-t100)
         );
-        ::before {
-          width: 25px; /* Arrow grows on hover */
-          background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
-          z-index: 0;
+
+        &::before {
+          width: 20px;
+          background-color: var(--color__accent-t60);
         }
       }
 

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

@@ -8,7 +8,11 @@
           >Hi, {{ userGivenName }}.</span
         >
       </client-only>
-      <asd20-messaging id="main" v-bind="firstMessage" headingTagName="h1"></asd20-messaging>
+      <asd20-messaging
+        id="main"
+        v-bind="firstMessage"
+        headingTagName="h1"
+      ></asd20-messaging>
       <div class="image-container">
         <img
           class="background-image"
@@ -93,7 +97,6 @@ export default {
   animation: leftscroll 4000s infinite linear;
   border-top: 20px solid var(--color__primary);
   border-bottom: 20px solid var(--color__primary);
-
 }
 .asd20-primary-header {
   position: relative;
@@ -133,10 +136,10 @@ export default {
     animation: slide_left 1.25s ease-in-out 1s both;
   }
 
-    // -webkit-background-clip: text;
-    // -webkit-text-fill-color: transparent;
-    // background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
-    // background-size: 30% auto;
+  // -webkit-background-clip: text;
+  // -webkit-text-fill-color: transparent;
+  // background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
+  // background-size: 30% auto;
   &::v-deep .lead {
     @include fluid-type($base-font-size * 1.2, $base-font-size * 1.4);
     color: var(--website-homepage-header__foreground-color);
@@ -153,11 +156,45 @@ export default {
       700
     );
     flex-direction: column;
-    width: 50vw;
-    color: white;
-    // background: white;
-    &:hover {
-      background: var(--color__on-primary-t20);
+    width: 70vw;
+    margin: space(0.5) auto !important;
+    color: var(--website-homepage-header__secondary-button-foreground-color);
+    background: var(
+      --website-homepage-header__secondary-button-background-color
+    );
+    border: none;
+    position: relative;
+    padding: space(0.5) space(1);
+    transition: background-color 0.3s ease;
+    z-index: 2;
+    overflow: hidden;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 10px;
+      height: 100%;
+      background-color: var(--color__accent-t40);
+      transition: width 0.3s ease, background-color 0.3s ease;
+      z-index: 0;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: var(
+        --website-header__button-hover-background-color,
+        var(--color__accent-t60)
+      );
+      color: var(
+        --website-header__button-hover-foreground-color,
+        var(--color__accent-t100)
+      );
+
+      &::before {
+        width: 20px;
+        background-color: var(--color__accent-t60);
+      }
     }
   }
 
@@ -219,6 +256,15 @@ export default {
   }
 }
 
+@media (min-width: 667px) {
+  .asd20-primary-header {
+    &::v-deep .asd20-button {
+      width: 50vw;
+      margin: space(0.5) space(0.5) 0 0 !important;
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .photostrip {
     height: 40vh;
@@ -240,6 +286,7 @@ export default {
       );
       flex-direction: row;
       width: inherit;
+      margin: space(0.5) space(0.5) 0 0 !important;
     }
     .image-container {
       width: auto;

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

@@ -239,32 +239,32 @@ export default {
       transition: background-color 0.3s ease;
       z-index: 2;
       overflow: hidden;
-      ::before {
+      &::before {
         content: '';
         position: absolute;
         top: 0;
-        left: 0; /* Align with the button's left edge */
-        width: 20px; /* Default arrow width */
-        height: 100%; /* Match the button's height */
-        clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
-        background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
-        transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
+        left: 0;
+        width: 10px;
+        height: 100%;
+        background-color: var(--color__accent-t40);
+        transition: width 0.3s ease, background-color 0.3s ease;
         z-index: 0;
       }
+
       &:hover,
       &:focus {
         background-color: var(
           --website-header__button-hover-background-color,
-          var(--color__accent-s10)
+          var(--color__accent-t60)
         );
         color: var(
           --website-header__button-hover-foreground-color,
           var(--color__accent-t100)
         );
-        ::before {
-          width: 25px; /* Arrow grows on hover */
-          background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
-          z-index: 0;
+
+        &::before {
+          width: 20px;
+          background-color: var(--color__accent-t60);
         }
       }
 

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

@@ -298,37 +298,32 @@ export default {
       transition: background-color 0.3s ease;
       z-index: 2;
       overflow: hidden;
-      ::before {
+      &::before {
         content: '';
         position: absolute;
         top: 0;
-        left: 0; /* Align with the button's left edge */
-        width: 20px; /* Default arrow width */
-        height: 100%; /* Match the button's height */
-        clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
-        background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
-        transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
+        left: 0;
+        width: 10px;
+        height: 100%;
+        background-color: var(--color__accent-t40);
+        transition: width 0.3s ease, background-color 0.3s ease;
         z-index: 0;
       }
+
       &:hover,
       &:focus {
         background-color: var(
           --website-header__button-hover-background-color,
-          var(--color__accent-s10)
+          var(--color__accent-t60)
         );
         color: var(
           --website-header__button-hover-foreground-color,
           var(--color__accent-t100)
         );
-        ::before {
-          width: 25px; /* Arrow grows on hover */
-          background-color: rgba(
-            255,
-            255,
-            255,
-            0.3
-          ); /* Darker arrow on hover */
-          z-index: 0;
+
+        &::before {
+          width: 20px;
+          background-color: var(--color__accent-t60);
         }
       }
     }

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

@@ -95,29 +95,32 @@ export default {
     transition: background-color 0.3s ease;
     z-index: 2;
     overflow: hidden;
-    ::before {
+    &::before {
       content: '';
       position: absolute;
       top: 0;
-      left: 0; /* Align with the button's left edge */
-      width: 20px; /* Default arrow width */
-      height: 100%; /* Match the button's height */
-      clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
-      background-color: var(--color__accent); /* Arrow color */
-      transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
+      left: 0;
+      width: 10px;
+      height: 100%;
+      background-color: var(--color__accent-t40);
+      transition: width 0.3s ease, background-color 0.3s ease;
       z-index: 0;
     }
-    &:hover {
-      color: var(
-        --website-homepage-header__secondary-button-hover-foreground-color
+
+    &:hover,
+    &:focus {
+      background-color: var(
+        --website-header__button-hover-background-color,
+        var(--color__accent-t60)
       );
-      background: var(
-        --website-homepage-header__secondary-button-hover-background-color
+      color: var(
+        --website-header__button-hover-foreground-color,
+        var(--color__accent-t100)
       );
-      ::before {
-        width: 25px; /* Arrow grows on hover */
-        background-color: rgba(0, 0, 0, 0.3); /* Darker arrow on hover */
-        z-index: 0;
+
+      &::before {
+        width: 20px;
+        background-color: var(--color__accent-t60);
       }
     }
   }

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

@@ -134,28 +134,33 @@ export default {
     // height: 50px;
     // line-height: 50px;
     transition: background-color 0.3s ease;
-    ::before {
+    &::before {
       content: '';
       position: absolute;
       top: 0;
-      left: 0; /* Align with the button's left edge */
-      width: 20px; /* Default arrow width */
-      height: 100%; /* Match the button's height */
-      clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
-      background-color: var(--color__accent); /* Arrow color */
-      transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
-    }
-    &:hover {
-      color: var(--website-homepage-header__button-hover-foreground-color);
-      background: var(--website-homepage-header__button-hover-background-color);
-      ::before {
-        width: 25px; /* Arrow grows on hover */
-        background-color: rgba(0, 0, 0, 0.3); /* Darker arrow on hover */
-      }
+      left: 0;
+      width: 10px;
+      height: 100%;
+      background-color: var(--color__accent-t40);
+      transition: width 0.3s ease, background-color 0.3s ease;
+      z-index: 0;
     }
+
+    &:hover,
     &:focus {
-      color: var(--website-homepage-header__button-hover-foreground-color);
-      background: var(--website-homepage-header__button-hover-background-color);
+      background-color: var(
+        --website-header__button-hover-background-color,
+        var(--color__accent-t60)
+      );
+      color: var(
+        --website-header__button-hover-foreground-color,
+        var(--color__accent-t100)
+      );
+
+      &::before {
+        width: 20px;
+        background-color: var(--color__accent-t60);
+      }
     }
   }
   .header-messaging-section {

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