feat(notification-banner): support long polling and css custom variables (#158)

* feat: enhanced banner to support custom styling

* Added long polling feature

* fixes lint errors

* Added validation for new props, updated vss var name, fixed documentation

Author: rmathis

@uportal/notification-banner/README.md

@@ -27,3 +27,83 @@ npm run build
 ```
 npm run lint
 ```
+
+## Attributes
+
+`<notification-banner>` takes the following attributes:
+
+### `notification-api-url`
+
+Url to connect notification-endpoint. Defaults to `/NotificationPortlet/api/v2/notifications`.
+
+```html
+<notification-banner
+    notification-api-url="/NotificationPortlet/api/v2/notifications"
+></notification-banner>
+```
+
+### `user-info-api-url`
+
+Url to connect to oidc. The default for this value is `/uPortal/api/v5-1/userinfo`.
+
+```html
+<notification-banner user-info-api-url="/uPortal/api/v5-1/userinfo"></notification-banner>
+```
+
+### `notificationVariant`
+
+Bootstrap variant of 'alert' component to style notification items. Default is 'info'. Can be set to 'custom' to add 'alert-custom' class which will allow styling according to theming section below.
+
+```html
+<notification-banner notificationVariant="info"></notification-banner>
+```
+
+### `notificationIcon`
+
+Icon displayed next to heading. Supports "info" and "exclamation-triangle" from Font Awesome.
+
+```html
+<notification-banner notificationIcon="info"></notification-banner>
+```
+
+### `notificationIconSize`
+
+Icon size for Font Awesome icon displayed next to heading.
+
+```html
+<notification-banner notificationIconSize="2x"></notification-banner>
+```
+
+### `filter`
+
+Query string parameter to append to api call to retrieve notifications.
+
+```html
+<notification-banner notificationIconSize="2x"></notification-banner>
+```
+
+### `debug`
+
+Skips oidc call for api token.
+
+```html
+<notification-banner debug></notification-banner>
+```
+
+### Theming
+
+Currently this component supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) for overriding button colors. Defining the following variables will change the colors for the component accordingly. They will fall back to the colors described below.
+
+You should define this in your custom stylesheet.
+
+```css
+:root {
+    --notif-banner-heading-text-color: white; /* text color of notification item heading */
+    --notif-banner-body-text-color: white; /* text color of notification item body  */
+    --notif-banner-bg-color: darkred; /* background color of notification items */
+    --notif-banner-border-color: darkred; /* border color of notification items */
+    --notif-banner-border-radius: 0; /* border radius of notification items */
+    --notif-banner-item-margin: 0 0 1px 0; /* margin between notification items */
+    --notif-banner-container-margin: 0; /* margin around notification item list */
+}
+```

@uportal/notification-banner/src/App.vue

@@ -1,7 +1,11 @@
 <template>
     <div id="app">
         <img alt="Vue logo" src="./assets/logo.png" />
-        <NotificationBanner debug="true" notificationApiUrl="sample-notifications.json" />
+        <NotificationBanner debug="true"
+            notificationVariant="success"
+            notificationApiUrl="sample-notifications.json"
+            filter="user=foobar"
+            notificationIcon="info" />
     </div>
 </template>
 
@@ -25,4 +29,5 @@ export default {
     color: #2c3e50;
     margin-top: 60px;
 }
+
 </style>

@uportal/notification-banner/src/components/NotificationBanner.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="notification-banner">
-        <b-alert v-for="(notification, index) in notifications" :key="index" varient="info" show>
+        <b-alert v-for="(notification, index) in notifications" :key="index" :varient="notificationVariant" :class="{'alert-custom': customVariant}" show>
             <h4>
-                <font-awesome-icon icon="info" />
+                <font-awesome-icon :icon="notificationIcon" :size="notificationIconSize" />
                 {{ notification.title }}
             </h4>
             <span v-html="notification.body" />
@@ -12,21 +12,27 @@
 
 <script>
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faInfo } from '@fortawesome/free-solid-svg-icons/faInfo';
+import { faInfo, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import bAlert from 'bootstrap-vue/es/components/alert/alert';
 import oidc from '@uportal/open-id-connect';
 import { get } from 'axios';
 
-library.add(faInfo);
+library.add(faInfo, faExclamationTriangle);
+
+const variants = ['info', 'primary', 'success', 'danger', 'warning', 'secondary', 'light', 'dark'];
+const icons = ['info', 'exclamation-triangle'];
+const sizes = ['xs', 'sm', 'lg', ...[...Array(10).keys()].map(k => `${k + 1}x`)];
+
+const validator = (list) => (value) => list.indexOf(value) !== -1
 
 export default {
     name: 'NotificationBanner',
 
     props: {
         debug: {
-            type: Boolean,
-            default: false
+            type: String,
+            default: 'false'
         },
         userInfoApiUrl: {
             type: String,
@@ -36,9 +42,28 @@ export default {
             type: String,
             default: '/NotificationPortlet/api/v2/notifications'
         },
+        notificationVariant: {
+            type: String,
+            default: 'info',
+            validator: validator(variants)
+        },
+        notificationIcon: {
+            type: String,
+            default: 'info',
+            validator: validator(icons)
+        },
+        notificationIconSize: {
+            type: String,
+            default: '1x',
+            validator: validator(sizes)
+        },
         filter: {
             type: String,
-            default: ''
+            default: '',
+        },
+        refresh: {
+            type: String,
+            default: '0'
         }
     },
 
@@ -54,14 +79,24 @@ export default {
         };
     },
 
+    computed: {
+        isDebug: function () {
+            return this.debug === 'true' ? true : false;
+        },
+        customVariant: function () {
+            const { notificationVariant } = this;
+            return variants.indexOf(notificationVariant) === -1;
+        }
+    },
+
     methods: {
         async fetchNotifications() {
             // read props
-            const { debug, notificationApiUrl, filter, userInfoApiUrl } = this;
+            const { notificationApiUrl, filter, userInfoApiUrl } = this;
 
             try {
                 // Obtain an OIDC Id Token, except in debug mode
-                const { encoded: token } = debug
+                const { encoded: token } = this.isDebug
                     ? { encoded: null }
                     : await oidc({ userInfoApiUrl });
 
@@ -81,6 +116,14 @@ export default {
                 // eslint-disable-next-line no-console
                 console.error(err);
             }
+
+            if (this.refresh !== '0') {
+                const { refresh } = this;
+                const time = parseInt(refresh);
+
+                setTimeout(() => this.fetchNotifications(), time);
+            }
+
         }
     },
 
@@ -103,7 +146,21 @@ export default {
 
     // custom styles
     margin: 1rem;
+    margin: var(--notif-banner-container-margin, 1rem);
     text-align: left;
+
+    .alert.alert-custom {
+        background: var(--notif-banner-bg-color, grey);
+        color: var(--notif-banner-body-text-color, white);
+        border-color: var(--notif-banner-border-color, var(--notif-banner-bg-color, grey));
+        border-radius: var(--notif-banner-border-radius, 0.25rem);
+        margin: var(--notif-banner-item-margin, 1rem);
+
+        > h4 {
+            color: var(--notif-banner-heading-text-color, white);
+            margin-top: 0;
+        }
+    }
 }
 
 .notification-banner svg {