From 6974a6236832f82855e13c14324f3e58a910bfe2 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 16 Nov 2021 18:29:06 -0500
Subject: [PATCH] CSR-185 Create alert/notification component.

Four colors, dismissable/close button.
---
 src/assets/img/icons/close.svg              |  3 ++
 src/layouts/componentTest/componentTest.vue |  4 +-
 src/styles/commonAlertStyles.scss           | 47 +++++++++++++++++++++
 src/styles/uxVariables.scss                 |  2 +-
 src/uxComponents/alert/alert.vue            | 15 ++++---
 vue.config.js                               |  1 +
 vue.release.config.js                       |  1 +
 7 files changed, 63 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/img/icons/close.svg
 create mode 100644 src/styles/commonAlertStyles.scss

diff --git a/src/assets/img/icons/close.svg b/src/assets/img/icons/close.svg
new file mode 100644
index 000000000..e660dc6b8
--- /dev/null
+++ b/src/assets/img/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
+  <path d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"/>
+</svg>
diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index c1b669b59..332560b73 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -117,12 +117,12 @@
         <!--
           Available classes for alertClass:
           alert-sucess (green)
-          alert-dander (red)
+          alert-danger (red)
           alert-warning (yellow)
           alert-info (blue)
         -->
       <alert
-          alertClass="alert-info"
+          alertClass="alert-danger"
           alertHeading="Alert Heading"
           alertText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"
         />
diff --git a/src/styles/commonAlertStyles.scss b/src/styles/commonAlertStyles.scss
new file mode 100644
index 000000000..28e924d93
--- /dev/null
+++ b/src/styles/commonAlertStyles.scss
@@ -0,0 +1,47 @@
+
+.alert {
+  button {
+    display: none;
+  }
+  .btn-close {
+    background: none;
+    opacity: 1;
+  }
+  &.alert-dismissible {
+    button {
+      display: flex;
+    }
+  }
+  &.alert-info {
+    .alert-heading {
+      color: $blue-700;
+    }
+    svg {
+      fill: $blue-700;
+    }
+  }
+  &.alert-danger {
+    .alert-heading {
+      color: $red-700;
+    }
+    svg {
+      fill: $red-700;
+    }
+  }
+  &.alert-warning {
+    .alert-heading {
+      color: $yellow-700;
+    }
+    svg {
+      fill: $yellow-700;
+    }
+  }
+  &.alert-success {
+    .alert-heading {
+      color: $green-700;
+    }
+    svg {
+      fill: $green-700;
+    }
+  }
+}
diff --git a/src/styles/uxVariables.scss b/src/styles/uxVariables.scss
index c4f874598..7998b7a87 100644
--- a/src/styles/uxVariables.scss
+++ b/src/styles/uxVariables.scss
@@ -164,7 +164,7 @@ $box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
 $box-shadow-lg:               0 1rem 3rem rgba($black, .25);//Safelite default
 $box-shadow-inset:            inset 0 1px 2px rgba($black, .075);
 
-
+//Alerts
 $alert-bg-scale:                -90%;
 $alert-border-scale:            -100%;
 $alert-color-scale:             40%;
diff --git a/src/uxComponents/alert/alert.vue b/src/uxComponents/alert/alert.vue
index c9d22f9e2..8e50fd5ca 100644
--- a/src/uxComponents/alert/alert.vue
+++ b/src/uxComponents/alert/alert.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="alert fade show text-center" role="alert"
+  <div class="alert fade show text-center mb-0" role="alert"
     v-bind:isDismissable="isDismissable"
     v-bind:class="[isDismissable ? 'alert-dismissible' : '', this.alertClass]"
     >
-    <strong>{{alertHeading}}</strong>
+    <p class="m-0 fw-bold alert-heading">{{alertHeading}}</p>
     <p class="m-0 text-body">{{alertText}}</p>
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
-    v-bind:class="[isClose ? '' : 'visually-hidden']"
-    ></button>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
+        <path d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"/>
+      </svg>
+    </button>
   </div>
 </template>
 
@@ -21,8 +23,7 @@ export default {
   },
   data() {
     return {
-      isDismissable: true,
-      isClose: true
+      isDismissable: true
     };
   }
 };
diff --git a/vue.config.js b/vue.config.js
index bda41b2dd..ba8d382a1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -27,6 +27,7 @@ module.exports = {
         @import "@/styles/commonRadioStyles.scss";
         @import "@/styles/commonTypographyStyles.scss";
         @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss";
+        @import "@/styles/commonAlertStyles.scss";
         `
       }
     }
diff --git a/vue.release.config.js b/vue.release.config.js
index 5bc60309f..296d833c5 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -17,6 +17,7 @@ module.exports = {
         @import "@/styles/commonRadioStyles.scss";
         @import "@/styles/commonTypographyStyles.scss";
         @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss";
+        @import "@/styles/commonAlertStyles.scss";
         `
       }
     }