1 files changed, 36 insertions, 22 deletions
diff --git a/resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue b/resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue
index ff177f7..bfd0a93 100644
--- a/resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue
+++ b/resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue
@@ -1,28 +1,11 @@
-<template>
-    <div class="cw-companion-overlay-wrapper">
-        <div
-            class="cw-companion-overlay"
-            :class="[showCompanion ? 'cw-companion-overlay-in' : '', showCompanion ? '' : 'cw-companion-overlay-out', styleCompanion]"
-            aria-hidden="true"
-        >
-            <div class="cw-companion-overlay-content" v-html="msgCompanion"></div>
-            <button class="cw-compantion-overlay-close" @click="hideCompanion"></button>
-        </div>
-        <div
-            class="sr-only"
-            aria-live="polite"
-            role="log"
-        >
-            <p>{{ msgCompanion }}</p>
-        </div>
-    </div>
-</template>
-
 <script>
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'courseware-companion-overlay',
+    render(createElement) {
+        return null;
+    },
     computed: {
         ...mapGetters({
             showCompanion: 'showCompanionOverlay',
@@ -30,6 +13,24 @@ export default {
             styleCompanion: 'styleCompanionOverlay',
             showToolbar: 'showToolbar',
         }),
+        msgType() {
+            let type = 'info';
+            switch (this.styleCompanion) {
+                case 'special':
+                case 'unsure':
+                    type = 'warning';
+                    break;
+                case 'sad':
+                    type = 'error';
+                    break;
+                case 'happy':
+                    type = 'success';
+                    break
+                case 'pointing':
+                case 'curious':
+            }
+            return type;
+        }
     },
     methods: {
         ...mapActions({
@@ -49,11 +50,24 @@ export default {
             }
         },
         showToolbar(newValue, oldValue) {
-            // hide companion when toolbar is closed 
+            // hide companion when toolbar is closed
             if (oldValue === true && newValue === false) {
                 this.hideCompanion();
             }
+        },
+        msgCompanion: {
+            handler(current) {
+                if (current.trim().length === 0) {
+                    return;
+                }
+                const notification = {
+                    type: this.msgType,
+                    message: current
+                };
+                this.globalEmit('push-system-notification', notification);
+            },
+            immediate: true
         }
-    },
+    }
 };
 </script>