From 57b2262843db8724ecbfbcc6cef0906d736f2834 Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Fri, 7 Aug 2020 18:22:47 +0530
Subject: Add info icon for informational alert

-Add new style carbon icon for informational alert
-Change alert icon position from center to top

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: If32d712db16472ce9a78e04e5871d0b799bb5895
---
 src/assets/styles/bmc/custom/_alert.scss |  8 +++++++-
 src/components/Global/Alert.vue          | 18 ++++++++++++++----
 src/components/Global/StatusIcon.vue     |  8 +++++++-
 3 files changed, 28 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 1d28f2ae..741eb692 100644
--- a/src/assets/styles/bmc/custom/_alert.scss
+++ b/src/assets/styles/bmc/custom/_alert.scss
@@ -17,7 +17,7 @@
 
     .alert-icon {
       display: inline-flex;
-      align-items: center;
+      align-items: flex-start;
       margin-right: $spacer;
       margin-bottom: $spacer;
 
@@ -50,6 +50,12 @@
       fill: theme-color("info");
     }
 
+    &.alert-success {
+      border-left-color: theme-color("success");
+      background-color: $success-light;
+      fill: theme-color("success");
+    }
+
     &.alert-danger {
       border-left-color: theme-color("danger");
       background-color: $danger-light;
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
index 2008536a..a049a08b 100644
--- a/src/components/Global/Alert.vue
+++ b/src/components/Global/Alert.vue
@@ -1,12 +1,22 @@
 <template>
   <b-alert :show="show" :variant="variant" :class="{ small }">
-    <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon">
+    <div
+      v-if="
+        variant == 'info' ||
+          variant == 'success' ||
+          variant == 'warning' ||
+          variant == 'danger'
+      "
+      class="alert-icon"
+    >
       <status-icon :status="variant" />
     </div>
-    <div class="alert-content d-inline-flex align-items-center">
-      <div class="alert-msg"><slot /></div>
+    <div class="alert-content">
+      <div class="alert-msg">
+        <slot />
+      </div>
     </div>
-    <div class="alert-action d-inline-flex align-items-center">
+    <div class="alert-action">
       <slot name="action"></slot>
     </div>
   </b-alert>
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 6de6d310..bf58722a 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -1,6 +1,7 @@
 <template>
   <span :class="['status-icon', status]">
-    <icon-success v-if="status === 'success'" />
+    <icon-info v-if="status === 'info'" />
+    <icon-success v-else-if="status === 'success'" />
     <icon-warning v-else-if="status === 'warning'" />
     <icon-danger v-else-if="status === 'danger'" />
     <icon-secondary v-else />
@@ -8,6 +9,7 @@
 </template>
 
 <script>
+import IconInfo from '@carbon/icons-vue/es/information--filled/20';
 import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
 import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
 import IconError from '@carbon/icons-vue/es/error--filled/20';
@@ -16,6 +18,7 @@ import IconMisuse from '@carbon/icons-vue/es/misuse/20';
 export default {
   name: 'StatusIcon',
   components: {
+    IconInfo: IconInfo,
     iconSuccess: IconCheckmark,
     iconDanger: IconMisuse,
     iconSecondary: IconError,
@@ -33,6 +36,9 @@ export default {
 <style lang="scss" scoped>
 .status-icon {
   vertical-align: text-bottom;
+  &.info {
+    fill: theme-color('info');
+  }
   &.success {
     fill: theme-color('success');
   }
-- 
cgit v1.2.3