@asd20/ui 3.2.398 → 3.2.401

package/package.json

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

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(2);
+    .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);
   }
@@ -429,6 +443,10 @@ export default {
     @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(2);
+    .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;
   }
@@ -446,6 +460,10 @@ export default {
     @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(2);
+    .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);
@@ -198,6 +211,10 @@ export default {
   .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(2);
+    .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);
@@ -225,6 +239,10 @@ export default {
     @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,26 @@ 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) !important;
+      svg {
+        fill: var(--color__accent) !important;
+      }
+      span {
+        background: var(--color__accent) !important;
+      }
+    }
+  }
 }
 
 @media (min-width: 1024px) {
@@ -197,8 +203,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 +225,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(2);
+    .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;
@@ -185,6 +199,10 @@ export default {
   .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,28 @@ 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) !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 +333,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 +354,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(2);
+    .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 {
@@ -518,6 +532,10 @@ 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);
     }

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(2);
+    .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 {
@@ -693,6 +700,10 @@ 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);
     }

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