Create alert banner component

This reusuable component will help to make sure banner
implementations are consistent and will help reduce
redundant code.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I3a16f65d36c2d61abf54c300e2ed5defeadee298

4 files changed, 93 insertions, 1 deletions

diff --git a/app/common/components/alert-banner.js b/app/common/components/alert-banner.js
new file mode 100644
index 0000000..13f79da
--- /dev/null
+++ b/app/common/components/alert-banner.js
@@ -0,0 +1,60 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   * alertBanner Component
+   */
+
+
+  /**
+   * alertBanner Component controller
+   */
+  const controller = function() {
+    this.status;
+    this.$onInit = () => {
+      switch (this.type) {
+        case 'warn':
+        case 'error':
+          this.status = this.type;
+          break;
+        case 'success':
+          this.status = 'on';
+          break;
+        default:
+      }
+    };
+  };
+
+  /**
+   * alertBanner Component template
+   */
+  const template = `
+    <div  class="alert-banner"
+          ng-class="{
+            'alert-banner--info': $ctrl.type === 'info',
+            'alert-banner--warn': $ctrl.type === 'warn',
+            'alert-banner--error': $ctrl.type === 'error',
+            'alert-banner--success': $ctrl.type === 'success'}">
+      <status-icon
+        ng-if="$ctrl.type !== 'info'"
+        status="{{$ctrl.status}}"
+        class="status-icon">
+      </status-icon>
+      <ng-bind-html
+        ng-bind-html="$ctrl.bannerText || ''">
+      </ng-bind-html>
+    </div>
+  `
+
+  /**
+   * Register alertBanner component
+   */
+  angular.module('app.common.components').component('alertBanner', {
+    template,
+    controller,
+    bindings: {
+      type: '@',       // string 'info', 'warn', 'error' or 'success'
+      bannerText: '<'  // string, can include valid HTML
+    }
+  })
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/styles/components/alert-banner.scss b/app/common/styles/components/alert-banner.scss
new file mode 100644
index 0000000..8df9486
--- /dev/null
+++ b/app/common/styles/components/alert-banner.scss
@@ -0,0 +1,30 @@
+.alert-banner {
+  padding: 1rem 1rem 0.75rem;
+  border-left-width: 3px;
+  border-left-style: solid;
+  display: flex;
+  .status-icon {
+    margin-right: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 1.2rem;
+  }
+}
+
+.alert-banner--error {
+  background-color: $notification-error--light;
+  border-left-color: $notification-error--dark;
+}
+.alert-banner--success {
+  background-color: $notification-success--light;
+  border-left-color: $notification-success--dark;
+}
+.alert-banner--warn {
+  background-color: $notification-warn--light;
+  border-left-color: $notification-warn--dark;
+}
+.alert-banner--info {
+  background-color: $notification-info--light;
+  border-left-color: $notification-info--dark;
+}
\ No newline at end of file
diff --git a/app/common/styles/components/index.scss b/app/common/styles/components/index.scss
index fc36b38..3a4bdb7 100644
--- a/app/common/styles/components/index.scss
+++ b/app/common/styles/components/index.scss
@@ -1,2 +1,3 @@
 @import "./form-elements.scss";
-@import "./table.scss";
\ No newline at end of file
+@import "./table.scss";
+@import "./alert-banner.scss";
\ No newline at end of file
diff --git a/app/index.js b/app/index.js
index 8eec6c5..3b3ab8ac 100644
--- a/app/index.js
+++ b/app/index.js
@@ -72,6 +72,7 @@ import table_actions_component from './common/components/table/table-actions.js'
 import table_toolbar_component from './common/components/table/table-toolbar.js';
 import table_checkbox from './common/components/table/table-checkbox.js';
 import status_icon from './common/components/status-icon.js';
+import alert_banner from './common/components/alert-banner.js';
 
 import login_index from './login/index.js';
 import login_controller from './login/controllers/login-controller.js';