@asd20/ui 3.2.1029 → 3.2.1031

package/package.json

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

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

@@ -94,6 +94,13 @@ export default {
     &__overlay-label ::after {
       margin-right: space(1);
     }
+    .asd20-icon {
+      margin-left: space(0.25);
+      width: 32px !important;
+      height: 32px !important;
+      --line-color: var(--website-icon__line-color) !important;
+      --fill-color: var(--website-menu__icon-fill-color) !important;
+    }
   }
 }
 </style>

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

@@ -68,28 +68,7 @@ export default {
 
   methods: {
     share() {
-      // if (typeof window !== undefined && navigator.share) {
-      //   const h1 = document.getElementsByTagName('h1')[0]
-      //   const pageTitle = document.getElementsByTagName('title')[0]
-      //   const title = h1 ? h1.innerText : pageTitle.text
-      //   const url = document.querySelector('link[rel=canonical]')
-      //     ? document.querySelector('link[rel=canonical]').href
-      //     : document.location.href
-
-      //   this.showMenu = false
-
-      //   navigator
-      //     .share({
-      //       title,
-      //       url,
-      //     })
-      //     .then(() => {
-      //       console.log('Thanks for sharing!')
-      //     })
-      //     .catch(console.error)
-      // } else {
       this.showMenu = !this.showMenu
-      // }
     },
     openShareLink(urlTemplate) {
       this.showMenu = false
@@ -172,7 +151,7 @@ export default {
       padding-right: 0.5rem;
     }
     .asd20-icon {
-      --line-color: var(--website-icon__icon-line-color) !important;
+      --line-color: var(--website-icon__line-color) !important;
       --fill-color: var(--website-menu__icon-fill-color) !important;
     }
     &:hover,

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

@@ -311,7 +311,7 @@ export default {
       &::v-deep .asd20-icon {
         width: 32px !important;
         height: 32px !important;
-        --line-color: var(--website-icon__icon-line-color) !important;
+        --line-color: var(--website-icon__line-color) !important;
         --fill-color: var(--website-menu__icon-fill-color) !important;
       }
       &:hover,
@@ -324,15 +324,8 @@ export default {
       width: max-content;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 3rem;
-      padding: 0 1em 0 0.5em;
       &::v-deep .asd20-select-input {
         color: var(--website-page__foreground-color) !important;
-        .asd20-icon {
-          width: 32px !important;
-          height: 32px !important;
-          --line-color: var(--website-icon__icon-line-color) !important;
-          --fill-color: var(--website-menu__icon-fill-color) !important;
-        }
       }
     }
     .asd20-language-loader {
@@ -375,7 +368,7 @@ export default {
     z-index: 1;
     position: relative;
     color: var(--website-header__foreground-color);
-    padding: space(1.5) space(1) space(3) space(1);
+    padding: space(1.5) space(0.5) space(3) space(0.5);
     background: var(--website-header__background-color)
       var(--website-header__background-style);
     // background: var(--website-header__background-color) var(--imageBackground)

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

@@ -41,7 +41,9 @@
       "
       @click.native="$emit('toggle-all')"
     >
-      <span v-if="totalDismissedNotifications > 0" aria-hidden="true">{{ totalDismissedNotifications }}</span>
+      <span v-if="totalDismissedNotifications > 0" aria-hidden="true">{{
+        totalDismissedNotifications
+      }}</span>
     </asd20-button>
 
     <div
@@ -100,7 +102,7 @@ export default {
       notificationsFromIndex: [],
       enterActiveClass: 'fade-in',
       leaveActiveClass: 'fade-out',
-    };
+    }
   },
 
   computed: {
@@ -112,29 +114,29 @@ export default {
       ]
     },
     showControls() {
-      return this.notifications.length > 1;
+      return this.notifications.length > 1
     },
-    nextTitle () {
+    nextTitle() {
       return `Go to notification ${
         this.index + 1 > this.notificationsFromIndex.length - 1
           ? 1
           : this.index + 2
       } of ${this.notificationsFromIndex.length}`
     },
-    prevTitle () {
+    prevTitle() {
       return `Go to notification ${
         this.index - 1 < 0 ? this.notificationsFromIndex.length : this.index
       } of ${this.notificationsFromIndex.length}`
-    }
+    },
   },
   created() {
-    this.initNotifications(this.notifications);
+    this.initNotifications(this.notifications)
   },
 
   watch: {
-    notifications: function(value) {
-      this.initNotifications(value);
-    }
+    notifications: function (value) {
+      this.initNotifications(value)
+    },
   },
   methods: {
     initNotifications(incomingNotifications) {
@@ -146,24 +148,28 @@ export default {
       const newNotifications = incomingNotifications
         .filter(n => !this.notificationsFromIndex.find(n2 => n2.id === n.id))
         .map(newN => ({
-          ...newN, 
+          ...newN,
           key: Math.random().toString(36).substr(2, 9),
-          ariaHidden: true
+          ariaHidden: true,
         }))
       // take care of notifications that match and keep their existing key value to prevent animations from occurring
       for (const [oldIndex, oldNotification] of Object.entries(
         this.notificationsFromIndex
       )) {
-        const matchingUpdatedNotification = (incomingNotifications || []).find(n => n.id === oldNotification.id)
-        if(matchingUpdatedNotification) {
+        const matchingUpdatedNotification = (incomingNotifications || []).find(
+          n => n.id === oldNotification.id
+        )
+        if (matchingUpdatedNotification) {
           this.notificationsFromIndex[oldIndex] = {
             ...matchingUpdatedNotification,
-            key: this.notificationsFromIndex[oldIndex].key
+            key: this.notificationsFromIndex[oldIndex].key,
           }
         }
       }
       // put new notifications at the beginning of the array
-      this.notificationsFromIndex = newNotifications.concat(this.notificationsFromIndex)
+      this.notificationsFromIndex = newNotifications.concat(
+        this.notificationsFromIndex
+      )
       // if(this.index > this.notificationsFromIndex.length -1 )
       if (
         newNotifications.length > 0 ||
@@ -175,13 +181,11 @@ export default {
     },
     next() {
       const newIndex =
-        this.index < this.notifications.length - 1 ? this.index + 1 : 0;
+        this.index < this.notifications.length - 1 ? this.index + 1 : 0
 
-      const topItem = this.notificationsFromIndex[0];
+      const topItem = this.notificationsFromIndex[0]
 
-      topItem.key = Math.random()
-        .toString(36)
-        .substr(2, 9);
+      topItem.key = Math.random().toString(36).substr(2, 9)
 
       if (this.groupType === 'banner') {
         this.enterActiveClass = ''
@@ -192,13 +196,13 @@ export default {
       }
 
       // Remove top item
-      this.notificationsFromIndex.splice(0, 1);
+      this.notificationsFromIndex.splice(0, 1)
 
       // Add top item to bottom
-      this.notificationsFromIndex.push(topItem);
+      this.notificationsFromIndex.push(topItem)
 
       // Update the index
-      this.index = newIndex;
+      this.index = newIndex
     },
     previous() {
       if (this.groupType === 'banner') {
@@ -211,31 +215,29 @@ export default {
 
       const notifications = this.notifications.map(n => ({
         ...n,
-        key: this.notificationsFromIndex.find(n2 => n2.title === n.title).key
-      }));
+        key: this.notificationsFromIndex.find(n2 => n2.title === n.title).key,
+      }))
       const replacementIndex =
-        this.index > 0 ? this.index - 1 : this.notifications.length - 1;
+        this.index > 0 ? this.index - 1 : this.notifications.length - 1
 
       const newItem = {
         ...notifications[replacementIndex],
-        key: Math.random()
-          .toString(36)
-          .substr(2, 9)
+        key: Math.random().toString(36).substr(2, 9),
       }
 
       // Remove old item
-      notifications.splice(replacementIndex, 1);
+      notifications.splice(replacementIndex, 1)
 
       // Add top item to top
-      notifications.unshift(newItem);
+      notifications.unshift(newItem)
 
-      this.notificationsFromIndex = notifications;
+      this.notificationsFromIndex = notifications
 
       // Update the index
-      this.index = replacementIndex;
-    }
-  }
-};
+      this.index = replacementIndex
+    },
+  },
+}
 </script>
 
 <style lang="scss">
@@ -287,12 +289,9 @@ export default {
     }
 
     svg {
-      width: 100%;
-      height: 100%;
-      // color: #000000;
-      // fill: #80B3C0;
-      // fill: var(--color__accent);
-      color: var(--website-icon__icon-line-color) !important;
+      width: 32px;
+      height: 32px;
+      color: var(--website-icon__line-color) !important;
       fill: var(--website-menu__icon-fill-color) !important;
     }
 
@@ -384,7 +383,8 @@ export default {
     border-radius: var(--website-shape__radius-m);
     &:first-child {
       z-index: 9;
-      .asd20-notification__content, g {
+      .asd20-notification__content,
+      g {
         transition: all 0.5s;
         opacity: 1;
         align-self: initial !important;
@@ -401,7 +401,8 @@ export default {
         overflow-y: hidden;
         transform: translateY(#{0.75 * ($i - 1)}rem)
           scale(#{1 - (($i - 1) * 0.05)});
-        .asd20-notification__content, g {
+        .asd20-notification__content,
+        g {
           transition: all 0.5s;
           opacity: 0.5;
         }
@@ -444,7 +445,7 @@ export default {
     left: 0.5rem;
   }
 
-   &--top-left {
+  &--top-left {
     position: fixed;
     top: 0.5rem;
     left: 0.5rem;
@@ -461,15 +462,6 @@ export default {
       fill: #ffffff;
     }
   }
-  &--banner .notifications {
-    // flex-direction: column;
-    // position: absolute;
-    // top: calc(100% + 0.5rem);
-    // right: 0;
-    // left: auto;
-    // width: 100%;
-    // display: flex;
-  }
   &--banner .notification {
     transition: all 0.25s;
     top: 0;
@@ -634,11 +626,11 @@ export default {
 
 @keyframes swoop-in {
   0% {
-    transform: scale(0.0);
+    transform: scale(0);
     opacity: 0;
   }
   100% {
-    transform: scale(1.0);
+    transform: scale(1);
     opacity: 1;
   }
 }

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

@@ -341,7 +341,7 @@ export default {
         &::v-deep .asd20-icon {
           width: 32px !important;
           height: 32px !important;
-          --line-color: var(--website-icon__icon-line-color) !important;
+          --line-color: var(--website-icon__line-color) !important;
           --fill-color: var(--website-menu__icon-fill-color) !important;
         }
         &:hover,
@@ -354,15 +354,8 @@ export default {
         width: max-content;
         background: rgba(255, 255, 255, 0.9);
         border-radius: 3rem;
-        padding: 0 1em 0 0.5em;
         &::v-deep .asd20-select-input {
           color: var(--website-page__foreground-color) !important;
-          .asd20-icon {
-            width: 32px !important;
-            height: 32px !important;
-            --line-color: var(--website-icon__icon-line-color) !important;
-            --fill-color: var(--website-menu__icon-fill-color) !important;
-          }
         }
       }
     }
@@ -410,7 +403,7 @@ export default {
     background: var(--website-header__background-color)
       var(--website-header__background-style);
     color: var(--website-header__foreground-color);
-    padding: space(1) space(1) space(1) space(1);
+    padding: space(1) space(0.5);
     z-index: 1;
     &::v-deep .asd20-breadcrumb {
       margin: space(1) 0;

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

@@ -410,7 +410,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .notification-group--inline {
     margin: space(2) space(1) space(1) space(1);

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

@@ -423,7 +423,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .notification-group--inline {
     margin: space(2) space(1) space(1) space(1);

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

@@ -331,7 +331,7 @@ export default {
     keywords: { type: String, default: '' },
     selectedCategories: { type: Array, default: () => [] },
   },
-  data: function() {
+  data: function () {
     return {
       numberToShow: 25,
       counter: 1,
@@ -466,7 +466,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .feed-title {
     margin: space(1) 0 0 0;

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

@@ -190,7 +190,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
 }
 

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

@@ -314,7 +314,7 @@ export default {
     selectedCategories: { type: Array, default: () => [] },
     // categoryOptions: { type: Array, default: () => [] },
   },
-  data: function() {
+  data: function () {
     return {
       numberToShow: 100,
       counter: 1,
@@ -408,7 +408,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-page-content {
     display: block;

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

@@ -246,6 +246,7 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2);
+    right: space(0.75);
   }
 }
 

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

@@ -239,6 +239,7 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2);
+    right: space(0.75);
   }
 }
 

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

@@ -241,7 +241,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
 }
 

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

@@ -262,11 +262,8 @@ export default {
         &__overlay-label {
           display: none;
         }
-        &::v-deep .asd20-icon {
-          width: 32px !important;
-          height: 32px !important;
-          --line-color: var(--website-icon__icon-line-color) !important;
-          --fill-color: var(--website-menu__icon-fill-color) !important;
+        .asd20-icon {
+          margin-left: 0;
         }
       }
     }

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

@@ -275,12 +275,6 @@ export default {
         &__overlay-label {
           // display: none;
         }
-        &::v-deep .asd20-icon {
-          width: 32px !important;
-          height: 32px !important;
-          --line-color: var(--website-icon__icon-line-color) !important;
-          --fill-color: var(--website-menu__icon-fill-color) !important;
-        }
       }
     }
     .asd20-language-loader {

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

@@ -371,8 +371,8 @@ export default {
   }
   .notification-group--floating {
     position: absolute;
-    right: space(0.85);
-    top: space(2.0375);
+    right: space(0.75);
+    top: space(1);
     z-index: 101;
   }
   .notification-group--inline {

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

@@ -294,7 +294,7 @@ export default {
     background: rgba(255, 255, 255, 1);
     border-radius: 3rem;
     border: 1px solid var(--website-page__alternate-background-color);
-    .asd20-select-input {
+    &::v-deep .asd20-select-input {
       // padding: 0.25rem 0.25rem;
       color: currentColor;
       font-family: Ariel, Arial, Helvetica, sans-serif;
@@ -304,12 +304,6 @@ export default {
       &__field-wrapper {
         padding: 0 0.5rem;
       }
-      &::v-deep .asd20-icon {
-        width: 32px !important;
-        height: 32px !important;
-        --line-color: var(--website-icon__icon-line-color) !important;
-        --fill-color: var(--website-menu__icon-fill-color) !important;
-      }
     }
   }
   .asd20-language-loader {

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

@@ -240,11 +240,6 @@ export default {
       // right: space(6);
       // top: 0 !important;
     }
-    .asd20-notification-group--status {
-      // position: absolute;
-      // right: space(2);
-      // top: space(0.5) !important;
-    }
     .asd20-language-translation {
       z-index: 2;
       background: rgba(255, 255, 255, 1);
@@ -256,12 +251,6 @@ export default {
         padding: 0.375rem 0.375rem;
         color: currentColor;
         font-family: Arial, Helvetica, sans-serif;
-        .asd20-icon {
-          width: 32px !important;
-          height: 32px !important;
-          --line-color: var(--website-icon__icon-line-color) !important;
-          --fill-color: var(--website-menu__icon-fill-color) !important;
-        }
       }
     }
     .asd20-language-loader {
@@ -277,7 +266,7 @@ export default {
     background: var(--website-page__alternate-background-t70);
     background-image: url('/statics/images/chalk-dark.png');
     background-position-y: top;
-    padding-top: 1px; //fix bug
+    padding-top: 1px;
 
     .placeholder-people {
       box-sizing: border-box;
@@ -295,22 +284,6 @@ export default {
     background-color: var(--website-quick-links__background-color);
   }
 }
-@media (min-width: 667px) {
-  .asd20-school-home-video-template {
-    .asd20-notification-group--status {
-      // right: space(2.5);
-      // top: space(0.5) !important;
-    }
-    .asd20-language-translation {
-      // right: space(1);
-      // top: space(0.5) !important;
-    }
-    .asd20-notification-group--floating {
-      // right: space(1);
-      // top: space(2) !important;
-    }
-  }
-}
 
 @media (min-width: 1024px) {
   .asd20-school-home-video-template {
@@ -342,40 +315,11 @@ export default {
         margin-right: space(0.5);
       }
     }
-    .asd20-notification-group--floating {
-      // right: space(4);
-      // top: space(7.5) !important;
-      // .bell {
-      //   span {
-      //     background: var(--color__accent);
-      //     top: -0.6em !important;
-      //     right: -0.6em !important;
-      //   }
-      // }
-    }
     .asd20-notification-group--status {
       order: 0;
       // right: space(5.5) !important;
       // top: space(6) !important;
     }
-    .asd20-language-translation {
-      // right: space(4) !important;
-      // top: space(6) !important;
-    }
   }
 }
-
-// @media (min-width: 1350px) {
-//   .asd20-school-home-video-template {
-//     .asd20-notification-group--status {
-//       order: 0;
-//       right: space(4) !important;
-//       top: space(6) !important;
-//     }
-//     .asd20-notification-group--floating {
-//       right: space(4);
-//       top: space(8) !important;
-//     }
-//   }
-// }
 </style>

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

@@ -243,7 +243,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-notification-group--inline {
     margin-top: space(2) !important;

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

@@ -221,7 +221,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-notification-group--inline {
     margin-top: space(2) !important;

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

@@ -222,7 +222,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.06);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-notification-group--inline {
     margin-top: space(2) !important;

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

@@ -217,7 +217,8 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2.0375);
+    top: space(2);
+    right: space(0.75);
   }
   .asd20-notification-group--inline {
     margin-top: space(2) !important;