@asd20/ui 3.2.736 → 3.2.738

package/package.json

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

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

@@ -82,6 +82,7 @@ export default {
           icon: 'phone-alt',
           label: 'Phone',
           description: `<a href='tel:${this.group.contactPhone}'>${this.group.contactPhone}</a>`,
+          link: `tel:${this.group.contactPhone}`,
         })
       }
 
@@ -119,6 +120,7 @@ export default {
           description: `<a href='${
             this.group.contactEmail
           }'>${this.group.contactEmail.replace('mailto:', '')}</a>`,
+          link: `mailto:${this.group.contactEmail}`,
         })
       }
 

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

@@ -30,12 +30,8 @@
         </asd20-list-item>
         <asd20-accordion :opened="true" label="Favorites">
           <transition-group name="fade" mode="in-out">
-            <div
-              class="favorite-list-item"
-              v-for="item in trueItems"
-              :key="item.id"
-            >
-              <a :href="item.website">{{ item.label }}</a>
+            <div class="list-item" v-for="item in trueItems" :key="item.id">
+              <asd20-button :link="item.website">{{ item.label }}</asd20-button>
               <button @click="editFavorites(item.id)">
                 <asd20-icon v-show="!item.value" :name="icon" size="md" />
                 <asd20-icon
@@ -54,11 +50,11 @@
         >
           <transition-group name="fade" mode="in-out">
             <div
-              class="favorite-list-item"
+              class="list-item"
               v-for="item in categoryItem.itemsSorted"
               :key="item.id"
             >
-              <a :href="item.website">{{ item.label }}</a>
+              <asd20-button :link="item.website">{{ item.label }}</asd20-button>
               <button @click="editFavorites(item.id)">
                 <asd20-icon v-show="!item.value" :name="icon" size="md" />
                 <asd20-icon
@@ -233,18 +229,24 @@ export default {
   .picker-button {
     // margin: space(0.1) space(0);
   }
-  .favorite-list-item {
+  .list-item {
     display: flex;
     align-items: center;
-    flex-grow: 1;
+    justify-content: space-between;
     a {
       font-size: 1rem;
+      text-align: left;
       color: var(--color__secondary-s30);
       text-decoration: none;
       display: flex;
-      padding: 0 space(1);
-      flex-grow: 1;
+      font-family: var(--website-typography__font-family-body);
+      font-weight: 300;
+      font-size: 0.85rem !important;
+      flex-shrink: 1;
+      // padding: 0 space(1);
+      // flex-grow: 1;
     }
+
     button {
       appearance: none;
       border: 0;
@@ -258,15 +260,15 @@ export default {
     position: relative;
     margin-left: space(0.5);
     padding: space(0.5) space(0.5);
-    &::before {
-      content: '';
-      position: absolute;
-      width: 1px;
-      left: space(-0.125);
-      top: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.125);
-    }
+    // &::before {
+    //   content: '';
+    //   position: absolute;
+    //   width: 1px;
+    //   left: space(-0.125);
+    //   top: 0;
+    //   bottom: 0;
+    //   background: rgba(0, 0, 0, 0.125);
+    // }
   }
   &--reversed {
     color: white;
@@ -286,6 +288,7 @@ export default {
 }
 
 .asd20-picker__modal {
+  border-bottom: 2px solid rgba(235, 235, 235, 0.8);
   .district-link {
     margin-left: space(0.5) !important;
     font-weight: bold;
@@ -312,6 +315,10 @@ export default {
   //   margin-left: space(1);
   //   width: auto;
   // }
+  &::v-deep .asd20-modal {
+    height: 100%;
+    overflow-y: auto !important;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -325,7 +332,7 @@ export default {
       width: 40vw;
       min-width: 400px;
       flex-grow: 0;
-      height: min-content;
+      // height: min-content;
     }
     height: auto;
   }

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

@@ -157,7 +157,7 @@ export default {
     }
   },
   methods: {
-     initNotifications(incomingNotifications) {
+    initNotifications(incomingNotifications) {
       // filter out old notifications that are no longer present in incoming notifications
       this.notificationsFromIndex = this.notificationsFromIndex.filter(n =>
         incomingNotifications.find(n2 => n2.id === n.id)
@@ -462,7 +462,7 @@ export default {
 
   &--banner .pagination {
     position: absolute;
-    z-index: 100;
+    z-index: 199;
     right: 0.5rem;
     bottom: 0.5rem;
     color: white;