Grey out a read notification + test it

webapp/components/notifications/Notification/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ds-space
-    :class='{"notification": true, "read": notification.read}'
+    :class="{'notification': true, 'read': notification.read}"
     margin-bottom="x-small"
   >
     <no-ssr>
@@ -62,3 +62,10 @@ export default {
   }
 }
 </script>
+
+<style>
+.notification.read {
+  opacity: 0.6; /* Real browsers */
+  filter: alpha(opacity = 60); /* MSIE */
+}
+</style>

webapp/components/notifications/Notification/spec.js

@@ -46,5 +46,19 @@ describe('Notification', () => {
     it('renders title', () => {
       expect(Wrapper().text()).toContain("It's a title")
     })
+
+    it('has no class "read"', () => {
+      expect(Wrapper().classes()).not.toContain('read')
+    })
+
+    describe('that is read', () => {
+      beforeEach(() => {
+        propsData.notification.read = true
+      })
+
+      it('has class "read"', () => {
+        expect(Wrapper().classes()).toContain('read')
+      })
+    })
   })
 })