@appscode/design-system 1.0.43-alpha.190 → 1.0.43-alpha.192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.190",
+  "version": "1.0.43-alpha.192",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v2/modal/Modal.vue

@@ -30,7 +30,10 @@
         <!-- modal header end -->
 
         <!-- modal body start  -->
-        <div class="ac-modal-body ac-vscrollbar">
+        <div
+          class="ac-modal-body ac-vscrollbar"
+          data-testid="ac-modal-content-with-scroll"
+        >
           <div class="ac-modal-content">
             <!-- freedom content start  -->
             <slot />

package/vue-components/v2/navbar/User.vue

@@ -26,6 +26,7 @@
             <a
               :href="`${serverDomain}/${user.username}`"
               :title="user.username.toUpperCase()"
+              data-testid="user-profile-link"
               class="line-break-anywhere is-ellipsis-1"
               >{{ user.username.toUpperCase() }}</a
             >
@@ -34,10 +35,16 @@
         </div>
         <transition-group name="list" tag="ul">
           <li key="settings">
-            <a :href="`${serverDomain}/user/settings/`">Settings</a>
+            <a
+              data-testid="user-settings-link"
+              :href="`${serverDomain}/user/settings/`"
+              >Settings</a
+            >
           </li>
           <li v-if="isLoggedinUserAdmin" key="site-admin">
-            <a :href="`${accountsDomain}/admin`">Site Administration</a>
+            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
+              >Site Administration</a
+            >
           </li>
           <li
             v-if="showAccountSwitcher"
@@ -57,9 +64,9 @@
               <span>Switch Account</span>
               <span
                 ><i
-                  :class="
-                    `fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'}`
-                  "
+                  :class="`fa fa-angle-${
+                    dropDownStatus === 'open' ? 'up' : 'down'
+                  }`"
                 ></i
               ></span>
             </a>
@@ -125,10 +132,20 @@
             </transition-group>
           </li>
           <li key="dashboard">
-            <a :href="`${serverDomain}/dashboard`"> Dashboard </a>
+            <a
+              :href="`${serverDomain}/dashboard`"
+              data-testid="user-dashboard-link"
+            >
+              Dashboard
+            </a>
           </li>
           <li key="signout">
-            <a :href="`${accountsDomain}/user/logout`"> Sign out </a>
+            <a
+              :href="`${accountsDomain}/user/logout`"
+              data-testid="signout-link"
+            >
+              Sign out
+            </a>
           </li>
         </transition-group>
       </div>
@@ -142,40 +159,40 @@ export default {
     // active user info
     user: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     serverDomain: {
       type: String,
-      default: ""
+      default: "",
     },
     accountsDomain: {
       type: String,
-      default: ""
+      default: "",
     },
     showAccountSwitcher: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // all available organization list including personal account
     organizations: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     isLoggedinUserAdmin: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
 
   components: {
     NavbarItem: () => import("./NavbarItem.vue"),
-    NavbarItemContent: () => import("./NavbarItemContent.vue")
+    NavbarItemContent: () => import("./NavbarItemContent.vue"),
   },
 
   computed: {
     formattedOrganizations() {
       let activeUser;
-      const filteredList = this.organizations.filter(item => {
+      const filteredList = this.organizations.filter((item) => {
         if (item.username === this.user.username) {
           activeUser = item;
         } else {
@@ -187,13 +204,13 @@ export default {
       filteredList.unshift(activeUser);
 
       return filteredList || [];
-    }
+    },
   },
 
   data() {
     return {
       dropDownStatus: "close",
-      dropDownSectionHeight: null
+      dropDownSectionHeight: null,
     };
   },
 
@@ -210,7 +227,7 @@ export default {
     },
     onMouseLeave() {
       this.dropDownStatus = "close";
-    }
+    },
   },
 
   watch: {
@@ -226,9 +243,9 @@ export default {
         } else {
           this.dropDownSectionHeight = null;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>