feat(notification): add notification system

src/Layout.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-layout">
+    <NotificationCard />
     <AppHeader />
     <div class="view-container">
       <BIMDataSpinner class="view-container__loader" v-if="loading" />
@@ -13,11 +14,13 @@ import { contexts, useLoadingContext } from "@/composables/loading";
 // Components
 import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
 import AppHeader from "@/components/specific/app/app-header/AppHeader";
+import NotificationCard from "@/components/generic/notification-card/NotificationCard";
 
 export default {
   components: {
     BIMDataSpinner,
-    AppHeader
+    AppHeader,
+    NotificationCard
   },
   setup() {
     const loading = useLoadingContext(contexts.viewContainer);

src/components/generic/notification-card/NotificationCard.scss

@@ -0,0 +1,64 @@
+.notification-card {
+  display: flex;
+  align-items: center;
+  width: 400px;
+  min-height: 72px;
+  padding: $spacing-unit;
+  border-left: 3px solid;
+  @include box-shadow;
+  background-color: $color-white;
+
+  &__icon {
+    width: 22px;
+  }
+
+  &__text {
+    flex-grow: 1;
+    padding: 0 $spacing-unit;
+
+    &__title {
+      margin-bottom: $spacing-unit/3;
+      font-weight: bold;
+    }
+
+    &__message {
+      font-size: 0.9rem;
+      color: $color-tertiary-dark;
+    }
+  }
+
+  &__btn-close {
+    width: 22px;
+    color: $color-tertiary;
+  }
+
+  /* === State Styles === */
+
+  &--info {
+    border-color: $color-neutral;
+    .notification-card__icon {
+      color: $color-neutral;
+    }
+  }
+
+  &--success {
+    border-color: $color-success;
+    .notification-card__icon {
+      color: $color-success;
+    }
+  }
+
+  &--warning {
+    border-color: $color-warning;
+    .notification-card__icon {
+      color: $color-warning;
+    }
+  }
+
+  &--error {
+    border-color: $color-high;
+    .notification-card__icon {
+      color: $color-high;
+    }
+  }
+}

src/components/generic/notification-card/NotificationCard.vue

@@ -0,0 +1,64 @@
+<template>
+  <teleport to="#notification-container">
+    <transition name="slide-fade-up">
+      <div
+        class="notification-card"
+        :class="`notification-card--${notification.type}`"
+        v-show="showNotification"
+      >
+        <div class="notification-card__icon">
+          <BIMDataIcon :name="notifIcons[notification.type]" size="m" />
+        </div>
+        <div class="notification-card__text">
+          <div class="notification-card__text__title">
+            {{ notification.title }}
+          </div>
+          <div class="notification-card__text__message">
+            {{ notification.message }}
+          </div>
+        </div>
+        <BIMDataButton
+          class="notification-card__btn-close"
+          ghost
+          rounded
+          icon
+          @click="showNotification = false"
+        >
+          <BIMDataIcon name="close" size="s" />
+        </BIMDataButton>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script>
+import { useNotifications } from "@/composables/notifications";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+
+const notifIcons = {
+  info: "information",
+  success: "success",
+  warning: "warning",
+  error: "failed"
+};
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon
+  },
+  setup() {
+    const { showNotification, notification } = useNotifications();
+
+    return {
+      showNotification,
+      notification,
+      notifIcons
+    };
+  }
+}
+</script>
+
+<style scoped lang="scss" src="./NotificationCard.scss"></style>

src/composables/notifications.js

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+import { delay } from "@/utils/async";
+
+const showNotification = ref(false);
+const notification = ref({});
+
+const pushNotification = async (notif, timeout = 5000) => {
+  notification.value = notif;
+  showNotification.value = true;
+  await delay(timeout);
+  showNotification.value = false;
+  notification.value = {};
+};
+
+export function useNotifications() {
+  return {
+    // References
+    showNotification,
+    notification,
+    // Methods
+    pushNotification
+  };
+}

src/styles/global.scss

@@ -24,8 +24,8 @@ html {
     #notification-container {
       position: fixed;
       z-index: 300;
-      top: 0;
-      right: 0;
+      top: $platform-header-height + $spacing-unit;
+      right: $spacing-unit;
     }
   }
 }