@asd20/ui 3.2.1030 → 3.2.1031

package/package.json

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

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

@@ -324,7 +324,6 @@ 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;
       }
@@ -369,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,8 +289,8 @@ export default {
     }
 
     svg {
-      width: 100%;
-      height: 100%;
+      width: 32px;
+      height: 32px;
       color: var(--website-icon__line-color) !important;
       fill: var(--website-menu__icon-fill-color) !important;
     }
@@ -381,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;
@@ -398,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;
         }
@@ -441,7 +445,7 @@ export default {
     left: 0.5rem;
   }
 
-   &--top-left {
+  &--top-left {
     position: fixed;
     top: 0.5rem;
     left: 0.5rem;
@@ -458,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;
@@ -631,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

@@ -354,7 +354,6 @@ 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;
         }
@@ -404,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/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/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;