@asd20/ui 3.2.399 → 3.2.402

package/package.json

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

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

@@ -93,7 +93,7 @@ export default {
 
 .asd20-modal-container {
   position: fixed;
-  z-index: 1001;
+  z-index: 1000;
   top: 0;
   bottom: 0;
   left: 0;

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

@@ -46,7 +46,7 @@ export default {
 @import '../../../design/_variables.scss';
 .asd20-app-header {
   position: relative;
-  // z-index: 100;
+  z-index: 100;
   display: flex;
   align-items: center;
   flex-shrink: 0;

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

@@ -19,7 +19,10 @@
       </div>
     </div>
 
-    <div v-if="imageUrl && !$slots.aside" class="asd20-school-homepage-header__image">
+    <div
+      v-if="imageUrl && !$slots.aside"
+      class="asd20-school-homepage-header__image"
+    >
       <img :src="imageUrl" :alt="imageCaption" />
     </div>
 
@@ -138,7 +141,7 @@ export default {
     z-index: 101;
     background: white;
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     flex-direction: row;
     align-items: center;
     padding: space(0.25) space(0.5);
@@ -159,6 +162,16 @@ export default {
     }
     &::v-deep .notification-group--floating {
       margin-right: 0;
+      .bell {
+        z-index: 1000;
+        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;
+        }
+      }
     }
   }
 
@@ -166,7 +179,7 @@ export default {
     position: relative;
     color: var(--website-header__title-color);
     @include asd20-font(
-      2.0,
+      2,
       var(--website-typography__font-family-headlines),
       1.2,
       700

package/src/components/templates/Asd20ArticleDigestTemplate/index.stories.js

@@ -34,7 +34,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

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

@@ -374,6 +374,22 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
   .feed-title {
     margin: space(1) 0 0 space(1);
   }
@@ -429,6 +445,17 @@ export default {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .feed-title {
       margin-left: 0;
     }

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

@@ -375,6 +375,22 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
   .feed-title {
     margin: space(1) 0 0 0;
   }
@@ -446,6 +462,17 @@ export default {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .feed-title {
       margin-left: 0;
     }

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

@@ -182,10 +182,25 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
   .notification-group--inline {
     margin: space(1);
   }
-
   .asd20-widgets-section {
     background: var(--website-page__alternate-background-color);
     background-image: var(--website-texture__default);
@@ -198,6 +213,17 @@ export default {
   .asd20-template-article {
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
     }

package/src/components/templates/Asd20DetailAlternateTemplate/index.stories.js

@@ -27,7 +27,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

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

@@ -197,6 +197,22 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
 
   .notification-group--inline {
     margin-bottom: space(3);
@@ -225,6 +241,17 @@ export default {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .notification-group--inline {
       flex-basis: 100%;
       margin: space(2) space(3) space(0) space(3);

package/src/components/templates/Asd20DetailTemplate/index.stories.js

@@ -27,7 +27,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

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

@@ -176,20 +176,28 @@ export default {
 .asd20-template-detail {
   @include typography;
   @include template;
-  // h2 {
-  //   @include asd20-font(
-  //     1.15,
-  //     var(--website-typography__font-family-headlines),
-  //     1.2,
-  //     700
-  //   );
-  // }
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
 }
 
 @media (min-width: 1024px) {
@@ -197,8 +205,21 @@ export default {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
+      flex-basis: 100%;
+      margin-bottom: 0 !important;
     }
 
     .asd20-page-content {
@@ -213,10 +234,6 @@ export default {
         background: none;
       }
     }
-    .notification-group--inline {
-      flex-basis: 100%;
-      margin-bottom: 0 !important;
-    }
     .primary-messaging-section {
       max-width: 50vw;
     }

package/src/components/templates/Asd20DistrictHomeTemplate/index.stories.js

@@ -27,7 +27,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

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

@@ -296,8 +296,20 @@ export default {
       }
     }
 
-    & /deep/ .notification-group--floating {
+    .notification-group--floating {
       margin-right: 0;
+      .bell {
+        z-index: 1000;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+        svg {
+          fill: var(--color__accent);
+        }
+        span {
+          background: var(--color__accent);
+          top: inherit;
+          right: inherit;
+        }
+      }
     }
     .header-notifications {
       display: flex;
@@ -346,6 +358,15 @@ export default {
       z-index: 3;
       display: flex;
       justify-content: space-between;
+      .notification-group--floating {
+        .bell {
+          span {
+            background: var(--color__accent);
+            top: -0.5em;
+            right: -0.5em;
+          }
+        }
+      }
       .asd20-district-logo {
         margin: space(1) space(1) space(1) space(1);
         line-height: 2;

package/src/components/templates/Asd20DistrictVideoTemplate/index.stories.js

@@ -27,7 +27,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

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

@@ -1,7 +1,7 @@
 <template>
   <div class="asd20-district-video-template">
     <!-- Skip Nav -->
-    <asd20-skip-to />
+    <!-- <asd20-skip-to /> -->
 
     <!-- Banner Notifications -->
     <client-only>
@@ -88,8 +88,9 @@
       <slot name="page-footer" />
 
       <!-- analytics requested by Kyle Blakely -->
-      <img src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi">
-
+      <img
+        src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi"
+      />
     </asd20-page-footer>
   </div>
 </template>
@@ -165,6 +166,20 @@ export default {
     top: space(2);
   }
 }
+.asd20-notification-group--floating {
+  .bell {
+    z-index: 1000;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+    svg {
+      fill: var(--color__accent);
+    }
+    span {
+      background: var(--color__accent);
+      top: inherit;
+      right: inherit;
+    }
+  }
+}
 
 @media (min-width: 667px) {
   .asd20-district-video-template {
@@ -180,6 +195,15 @@ export default {
     display: block;
     margin-left: space(3);
     margin-top: 0;
+    .notification-group--floating {
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
   }
   #site-navigation .asd20-district-logo {
     display: none;

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

@@ -170,6 +170,22 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
 
   .asd20-file-page-section {
     background-position-y: top;
@@ -185,6 +201,17 @@ export default {
   .asd20-template-file-list {
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .asd20-page-content {
       margin-top: space(1);
     }

package/src/components/templates/Asd20LoginsTemplate/index.stories.js

@@ -192,7 +192,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

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

@@ -291,16 +291,29 @@ export default {
   }
   .asd20-page-header {
     margin-bottom: space(0) !important;
+    .asd20-page-header__tools {
+    }
   }
   .notification-group--floating {
     position: absolute;
-    right: space(0.5);
-    top: space(2.25);
+    right: space(0.85);
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
   }
   .notification-group--inline {
     margin: space(1);
   }
-
   .asd20-widgets-section {
     background: var(--website-page__alternate-background-t70);
     background-image: var(--website-texture__default);
@@ -321,6 +334,11 @@ export default {
 }
 @media (min-width: 450px) {
   .asd20-template-logins {
+    // .notification-group--floating {
+    //   position: absolute;
+    //   right: space(0.85);
+    //   top: space(4.25);
+    // }
     .logins-list {
       display: flex;
       flex-direction: row;
@@ -337,8 +355,15 @@ export default {
     margin-top: 0;
     .notification-group--floating {
       position: absolute;
-      right: space(4);
-      top: space(4.5);
+      right: space(1.85);
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
     }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);

package/src/components/templates/Asd20ProfileTemplate/index.stories.js

@@ -27,7 +27,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

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

@@ -444,6 +444,22 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
 }
 
 .asd20-school-details {
@@ -518,6 +534,17 @@ export default {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
     }

package/src/components/templates/Asd20SalaryCalculatorTemplate/index.stories.js

@@ -27,7 +27,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

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

@@ -660,20 +660,29 @@ export default {
 .asd20-salary-calculator-template {
   @include typography;
   @include template;
-  // h2 {
-  //   @include asd20-font(
-  //     1.15,
-  //     var(--website-typography__font-family-headlines),
-  //     1.2,
-  //     700
-  //   );
-  // }
+
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
   .salary-calculator {
     margin: space(2);
     .asd20-button {
@@ -693,6 +702,17 @@ export default {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
     }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="asd20-school-home-template">
     <!-- Skip Nav -->
-    <asd20-skip-to></asd20-skip-to>
+    <!-- <asd20-skip-to></asd20-skip-to> -->
 
     <!-- Banner Notifications -->
     <client-only>
@@ -207,6 +207,20 @@ export default {
   .pickerContainer {
     display: none;
   }
+  .asd20-notification-group--floating {
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
 
   &::v-deep .widgets-section {
     background: var(--website-page__alternate-background-t70);
@@ -239,6 +253,15 @@ export default {
     //   background: white;
     //   top: space(2);
     // }
+    .notification-group--floating {
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     .pickerContainer {
       display: flex;
       .optionalLogo {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="asd20-school-home-video-template">
     <!-- Skip Nav -->
-    <asd20-skip-to></asd20-skip-to>
+    <!-- <asd20-skip-to></asd20-skip-to> -->
 
     <!-- Banner Notifications -->
     <client-only>
@@ -202,10 +202,23 @@ export default {
     right: space(0.5);
     top: space(0.5) !important;
   }
+
   .asd20-notification-group--floating {
     position: absolute;
     right: space(0.5);
     top: space(2) !important;
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
   }
 
   .asd20-quicklinks-menu {
@@ -255,7 +268,14 @@ export default {
     }
     .asd20-notification-group--floating {
       right: space(4);
-      top: space(7.5) !important;
+      top: space(7.5);
+      .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
     }
     .asd20-notification-group--status {
       order: 0;

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

@@ -190,10 +190,37 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      z-index: 1000;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125);
+      svg {
+        fill: var(--color__accent);
+      }
+      span {
+        background: var(--color__accent);
+        top: inherit;
+        right: inherit;
+      }
+    }
+  }
 }
 
 @media (min-width: 1024px) {
   .asd20-template-wayfinding {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+            .bell {
+        span {
+          background: var(--color__accent);
+          top: -0.5em;
+          right: -0.5em;
+        }
+      }
+    }
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;