@asd20/ui 3.2.397 → 3.2.400

package/package.json

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

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

@@ -161,14 +161,14 @@ $accent: var(--color__accent);
       margin-top: space(0.125);
       display: block;
       font-size: 0.875rem;
-      margin-left: space(0.375);
+      margin-left: space(0.5);
     }
     .location {
       display: block;
       margin-top: space(0.125);
       margin-bottom: 0;
       font-size: 0.875rem;
-      margin-left: space(0.375);
+      margin-left: space(0.5);
     }
   }
   &--all-day {

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

@@ -17,6 +17,7 @@
         {{ title }}
         <span class="version" v-if="version" v-html="version"></span>
       </div>
+      <asd20-district-logo link="https://www.asd20.org"/>
     </h1>
     <slot />
   </header>
@@ -25,9 +26,11 @@
 <script>
 import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Icon from '../../atoms/Asd20Icon'
+import Asd20DistrictLogo from '../../atoms/Asd20DistrictLogo'
+
 export default {
   name: 'Asd20AppHeader',
-  components: { Asd20Button, Asd20Icon },
+  components: { Asd20Button, Asd20Icon, Asd20DistrictLogo },
   props: {
     title: { type: String, default: '' },
     icon: { type: String, default: '' },
@@ -47,21 +50,28 @@ export default {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--color__tertiary);
   background: white;
   flex-wrap: wrap;
+  border-bottom: 1px solid var(--color__tertiary);
 
   &__title {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     padding: space(0.5) 0;
+    // width: 100vw;
+    // border-bottom: 1px solid var(--color__tertiary);
   }
 
   h1 {
     margin: 0;
     font-size: 1rem;
     color: var(--color__primary);
+    flex-grow: 1;
+    width: 100%;
+    border-bottom: 1px solid var(--color__tertiary);
+    display: flex;
+    align-items: center;
     .asd20-icon {
       margin: 0 space(0.5);
     }
@@ -145,6 +155,14 @@ export default {
 
 @media (max-width: 480px) {
   .asd20-app-header {
+    &__title {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      padding: space(0.5) 0;
+      width: 100vw;
+      border-bottom: 1px solid var(--color__tertiary);
+    }
   }
 }
 </style>

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,20 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(4);
+    .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;
+      }
+    }
+  }
   .feed-title {
     margin: space(1) 0 0 space(1);
   }
@@ -423,12 +437,24 @@ export default {
     margin-left: 0;
   }
 }
+@media (min-width: 470px) {
+  .asd20-template-article-digest {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-template-article-digest {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     .feed-title {
       margin-left: 0;
     }

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

@@ -375,6 +375,20 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(4);
+    .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;
+      }
+    }
+  }
   .feed-title {
     margin: space(1) 0 0 0;
   }
@@ -440,12 +454,24 @@ export default {
     }
   }
 }
+@media (min-width: 470px) {
+  .asd20-template-article-list {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-template-article-list {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     .feed-title {
       margin-left: 0;
     }

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

@@ -182,10 +182,23 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(4);
+    .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;
+      }
+    }
+  }
   .notification-group--inline {
     margin: space(1);
   }
-
   .asd20-widgets-section {
     background: var(--website-page__alternate-background-color);
     background-image: var(--website-texture__default);
@@ -193,11 +206,23 @@ export default {
     padding: space(1) 0;
   }
 }
+@media (min-width: 470px) {
+  .asd20-template-article {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-template-article {
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     .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,20 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(4);
+    .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;
+      }
+    }
+  }
 
   .notification-group--inline {
     margin-bottom: space(3);
@@ -220,11 +234,24 @@ export default {
   }
 }
 
+@media (min-width: 470px) {
+  .asd20-template-detail-alternate {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-template-detail-alternate {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     .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,34 @@ 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(4);
+    .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;
+      }
+    }
+  }
+}
+@media (min-width: 470px) {
+  .asd20-template-detail {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
 }
 
 @media (min-width: 1024px) {
@@ -197,8 +211,14 @@ export default {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
+      flex-basis: 100%;
+      margin-bottom: 0 !important;
     }
 
     .asd20-page-content {
@@ -213,10 +233,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

@@ -298,6 +298,16 @@ export default {
 
     & /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;
+        }
+      }
     }
     .header-notifications {
       display: flex;

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>
@@ -165,6 +165,18 @@ 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) !important;
+    svg {
+      fill: var(--color__accent) !important;
+    }
+    span {
+      background: var(--color__accent) !important;
+    }
+  }
+}
 
 @media (min-width: 667px) {
   .asd20-district-video-template {

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

@@ -170,6 +170,20 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(4);
+    .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;
+      }
+    }
+  }
 
   .asd20-file-page-section {
     background-position-y: top;
@@ -180,11 +194,23 @@ export default {
     padding: space(0) space(0);
   }
 }
+@media (min-width: 470px) {
+  .asd20-template-file-list {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-template-file-list {
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     .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,34 @@ export default {
   }
   .asd20-page-header {
     margin-bottom: space(0) !important;
+    .asd20-page-header__tools {
+      flex-direction: row;
+      .right {
+        order: 2;
+      }
+      .asd20-breadcrumb {
+        order: 1;
+      }
+    }
   }
   .notification-group--floating {
     position: absolute;
-    right: space(0.5);
-    top: space(2.25);
+    right: space(0.85);
+    top: space(4.25);
+    .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;
+      }
+    }
   }
   .notification-group--inline {
     margin: space(1);
   }
-
   .asd20-widgets-section {
     background: var(--website-page__alternate-background-t70);
     background-image: var(--website-texture__default);
@@ -321,6 +339,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 +360,8 @@ export default {
     margin-top: 0;
     .notification-group--floating {
       position: absolute;
-      right: space(4);
-      top: space(4.5);
+      right: space(1.85);
+      top: space(1);
     }
     .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,20 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(4);
+    .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;
+      }
+    }
+  }
 }
 
 .asd20-school-details {
@@ -512,12 +526,24 @@ export default {
     color: asd20-swatch('primary');
   }
 }
+@media (min-width: 470px) {
+  .asd20-template-profile {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-template-profile {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     .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,27 @@ 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(4);
+    .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;
+      }
+    }
+  }
   .salary-calculator {
     margin: space(2);
     .asd20-button {
@@ -688,11 +695,24 @@ export default {
   }
 }
 
+@media (min-width: 470px) {
+  .asd20-salary-calculator-template {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-salary-calculator-template {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     .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,18 @@ 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) !important;
+      svg {
+        fill: var(--color__accent) !important;
+      }
+      span {
+        background: var(--color__accent) !important;
+      }
+    }
+  }
 
   &::v-deep .widgets-section {
     background: var(--website-page__alternate-background-t70);

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,21 @@ 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) !important;
+      svg {
+        fill: var(--color__accent) !important;
+      }
+      span {
+        background: var(--color__accent) !important;
+      }
+    }
   }
 
   .asd20-quicklinks-menu {

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(4);
+    .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;
+      }
+    }
+  }
+}
+
+@media (min-width: 470px) {
+  .asd20-template-wayfinding {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(2);
+    }
+  }
 }
 
 @media (min-width: 1024px) {
   .asd20-template-wayfinding {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;