Create firmware-card component

Create reusable firmware card component that will be
used in the updated firmware page:
https://ibm.invisionapp.com/share/4XNZ0JAMJ7B#/screens/319212821_4-8-D-1_Home

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

3 files changed, 80 insertions, 0 deletions

diff --git a/app/configuration/components/card.js b/app/configuration/components/card.js
new file mode 100644
index 0000000..863c079
--- /dev/null
+++ b/app/configuration/components/card.js
@@ -0,0 +1,51 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   *
+   * firmwareCard Component
+   *
+   */
+
+  /**
+   * Component template
+   */
+  const template = `
+    <div class="card-component">
+      <div class="card__header"
+           ng-class="{
+            'card__header--success' : $ctrl.status === 'success',
+            'card__header--error'   : $ctrl.status === 'error' }">
+        <p class="card__header__label inline">{{$ctrl.headerLabel}}</p>
+        <p class="card__header__value inline">{{$ctrl.headerValue}}</p>
+      </div>
+      <div class="card__body"
+           ng-if="$ctrl.body">
+        <div class="row">
+          <div class="column small-6">
+            <label>BMC Status</label>
+            {{$ctrl.bmcStatus || 'n/a'}}
+          </div>
+          <div class="column small-6">
+            <label>Host status</label>
+            {{$ctrl.hostStatus || 'n/a'}}
+          </div>
+        </div>
+      </div>
+    </div>`
+
+  /**
+   * Register firmwareCard component
+   */
+  angular.module('app.configuration').component('firmwareCard', {
+    template,
+    bindings: {
+      headerLabel: '@',
+      headerValue: '<',
+      status: '<',  // optional, 'success' or 'error'
+      body: '<',    // boolean true to render body content
+      hostStatus: '<',
+      bmcStatus: '<'
+    }
+  })
+})(window.angular);
\ No newline at end of file
diff --git a/app/configuration/styles/card.scss b/app/configuration/styles/card.scss
new file mode 100644
index 0000000..cec00a1
--- /dev/null
+++ b/app/configuration/styles/card.scss
@@ -0,0 +1,27 @@
+.card-component {
+  max-width: 600px;
+  min-width: 300px;
+  display: block;
+}
+
+.card__header {
+  background-color: $background-02;
+  padding: 1rem 1.5rem;
+  * {
+    margin: 0;
+  }
+}
+
+.card__header--success {
+  background-color: $notification-success--light;
+}
+
+.card__header--error {
+  background-color: $accent-04--02;
+}
+
+.card__body {
+  padding: 1rem 1.5rem;
+  border: 1px solid $border-color-01;
+  border-width: 0 1px 1px;
+}
\ No newline at end of file
diff --git a/app/configuration/styles/index.scss b/app/configuration/styles/index.scss
index e532583..3d5feff 100644
--- a/app/configuration/styles/index.scss
+++ b/app/configuration/styles/index.scss
@@ -2,3 +2,5 @@
 @import "./snmp.scss";
 @import "./date-time.scss";
 @import "./firmware.scss";
+@import "./card.scss";
+