@asd20/ui 3.2.984 → 3.2.986

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.984",
+  "version": "3.2.986",
   "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/atoms/Asd20Messaging/index.vue

@@ -121,10 +121,6 @@ export default {
 
 .asd20-messaging {
   box-sizing: border-box;
-  // &:first-child:last-child p:not(.lead) {
-  //   columns: 2;
-  //   column-gap: space(1);
-  // }
 
   &__heading {
     @include asd20-font(
@@ -154,10 +150,6 @@ export default {
     );
   }
 
-  // &::v-deep p {
-  //   @include asd20-font(0.75, var(--website-typography__font-family-headlines));
-  // }
-
   &__button-group {
     display: flex;
     flex-wrap: wrap;
@@ -189,24 +181,23 @@ export default {
       & > img {
         display: block;
         width: 100%;
-        // max-height: 350px;
+        height: 300px;
         object-fit: cover;
       }
     }
   }
 }
-
-// @media (min-width: 768px) {
-//   .asd20-messaging {
-//     &--fullscreen {
-//       .message-image {
-//         img {
-//           max-height: 450px;
-//         }
-//       }
-//     }
-//   }
-// }
+@media (min-width: 768px) {
+  .asd20-messaging {
+    &--fullscreen {
+      .message-image {
+        img {
+          height: 500px;
+        }
+      }
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-messaging {

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/Asd20PageContent/index.vue

@@ -12,14 +12,13 @@
   >
     <slot name="before"></slot>
 
-    <section class="primary-messaging-section">
-      <!-- omit messagetitle is polluting other templates (groupTemplate), making primary messages invisible. -->
-      <!-- <asd20-messaging
-        :class="primaryMessages.length < 2 ? 'omitMessageTitle' : ''"
-        v-for="(messaging, index) in formattedPrimaryMessages"
-        :key="index"
-        v-bind="messaging"
-      ></asd20-messaging> -->
+    <section
+      :class="
+        formattedPrimaryMessages.length < 3
+          ? 'primary-messaging-section wide-message'
+          : 'primary-messaging-section'
+      "
+    >
       <asd20-messaging
         v-for="(messaging, index) in formattedPrimaryMessages"
         :key="index"
@@ -127,35 +126,10 @@ export default {
     background: var(--color__tertiary);
   }
 
-  // .asd20-messaging {
-  //   padding-bottom: space(1);
-  //   border-bottom: 10px solid var(--color__tertiary);
-  // }
-
   .asd20-messaging:not(:last-child) {
-    margin-bottom: space(2);
+    margin-bottom: space(1);
   }
 
-  // &--grid {
-  //   .primary-messaging-section,
-  //   .secondary-messaging-section {
-  //     --minimum-column-width: 480px;
-  //     --gutter: #{space(1)};
-  //     display: flex;
-  //     flex-wrap: wrap;
-  //     margin: calc(var(--gutter) * -1);
-
-  //     &::v-deep > * {
-  //       flex: 0 1 var(--minimum-column-width);
-  //       margin: var(--gutter) !important;
-  //       // max-width: 60%;
-  //     }
-  //   }
-  // }
-  // &::v-deep .omitMessageTitle .asd20-messaging__heading,
-  // &::v-deep .omitMessageTitle .lead {
-  //   display: none;
-  // }
   &--fullscreen {
     .primary-messaging-section,
     .secondary-messaging-section {
@@ -208,10 +182,6 @@ export default {
       .primary-messaging-section,
       .secondary-messaging-section {
         padding: space(2) space(1) space(2) space(2);
-        // &::v-deep > * {
-        //   flex: 1 1 var(--minimum-column-width);
-        //   margin: var(--gutter) !important;
-        // }
       }
     }
   }
@@ -223,7 +193,6 @@ export default {
     .secondary-messaging-section {
       padding: space(2) space(1) space(2) space(2);
       &::v-deep > * {
-        // flex: 1 1 var(--minimum-column-width);
         margin: space(1) !important;
       }
     }
@@ -234,29 +203,24 @@ export default {
         --gutter: #{space(1)};
         display: flex;
         flex-wrap: wrap;
-        // margin: calc(var(--gutter) * -1);
-        // padding: space(2) space(3);
-
         &::v-deep > * {
           // flex: 1 1 var(--minimum-column-width);
           // margin: var(--gutter) !important;
           max-width: 28%;
         }
       }
+      .wide-message {
+        &::v-deep > * {
+          flex: 1 1 var(--minimum-column-width);
+          max-width: 44%;
+        }
+      }
     }
-    // &::v-deep .omitMessageTitle .asd20-messaging__heading,
-    // &::v-deep .omitMessageTitle .lead {
-    //   display: none;
-    // }
     &--fullscreen {
       .primary-messaging-section,
       .secondary-messaging-section {
-        // --minimum-column-width: 320px;
         --gutter: #{space(1)};
         display: flex;
-        // margin: calc(var(--gutter) * -1);
-        // padding: space(2) space(3);
-
         &::v-deep > * {
           // flex: 1 1 var(--minimum-column-width);
           // margin: var(--gutter) !important;
@@ -274,6 +238,12 @@ export default {
           max-width: 29%;
         }
       }
+      .wide-message {
+        &::v-deep > * {
+          flex: 1 1 var(--minimum-column-width);
+          max-width: 45%;
+        }
+      }
     }
   }
 }

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

@@ -291,10 +291,7 @@ export default {
   .back {
     padding: 0;
     margin-top: space(1);
-    // font-family: var(--website-typography__font-family-body);
-    // line-height: 1.2;
     font-size: 0.85rem;
-    // font-weight: normal;
     min-height: 45px;
     &::v-deep span {
       padding-right: space(0.5);
@@ -320,7 +317,6 @@ export default {
     display: flex;
     justify-content: space-between;
     align-self: center;
-    // margin-top: space(2);
     flex-direction: column;
     .asd20-breadcrumb,
     .back {
@@ -393,10 +389,6 @@ export default {
       display: none;
     }
 
-    // &::v-deep .asd20-district-logo {
-    //   display: none;
-    // }
-
     &::v-deep .notification-group--status {
       margin-top: space(0.5);
       margin-bottom: space(0.5);
@@ -494,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(
@@ -508,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/Asd20WayfindingImageTemplate/index.vue

@@ -223,20 +223,6 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2.06);
-    // .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-notification-group--inline {
     margin-top: space(2) !important;
@@ -254,7 +240,6 @@ export default {
       }
     }
     .asd20-swiper-feed:last-child {
-      // margin-top: space(-1);
       padding-bottom: space(2);
       &::after {
         bottom: space(1);
@@ -263,9 +248,6 @@ export default {
   }
   .asd20-page-content:not(.intro-message) .primary-messaging-section {
     padding: space(1) space(0);
-    .asd20-messaging {
-      // margin-bottom: space(1) !important;
-    }
   }
 
   .intro-message {
@@ -321,13 +303,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;
-      //   }
-      // }
     }
     .asd20-page-content {
       padding: space(1);
@@ -348,25 +323,18 @@ export default {
       width: 100%;
       .asd20-messaging {
         margin-bottom: space(2) !important;
-        // flex-grow: 1;
       }
     }
     .asd20-page-content {
       &--grid {
         .primary-messaging-section,
         .secondary-messaging-section {
-          // --minimum-column-width: 1000px;
           --gutter: #{space(1)};
           display: flex;
           flex-wrap: wrap;
-          // margin: calc(var(--gutter) * -1);
-          // padding: space(2) space(2) space(2) space(3);
         }
       }
     }
-    // .intro-message {
-    //   width: 90%;
-    // }
   }
 }
 </style>