From 7d100b652b24c935dbff651952d4d52124886fb7 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 15 Nov 2021 16:53:23 -0500
Subject: [PATCH] WIP - alerts component

---
 src/layouts/componentTest/componentTest.vue | 20 +++++++++++++-
 src/styles/uxVariables.scss                 |  5 ++++
 src/uxComponents/alert/alert.spec.js        |  1 +
 src/uxComponents/alert/alert.vue            | 29 +++++++++++++++++++++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/uxComponents/alert/alert.spec.js
 create mode 100644 src/uxComponents/alert/alert.vue

diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index 905a1b1b7..c1b669b59 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -112,6 +112,22 @@
         <h6>h6 Heading</h6>
       </div>
     </div>
+    <div class="row my-2">
+      <div class="col">
+        <!--
+          Available classes for alertClass:
+          alert-sucess (green)
+          alert-dander (red)
+          alert-warning (yellow)
+          alert-info (blue)
+        -->
+      <alert
+          alertClass="alert-info"
+          alertHeading="Alert Heading"
+          alertText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -121,6 +137,7 @@ import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
 import radioCard from "@/uxComponents/radioCard/radioCard";
 import listButton from "@/uxComponents/listButton/listButton";
 import radioList from "@/uxComponents/radioList/radioList";
+import alert from "@/uxComponents/alert/alert";
 export default {
   name: "App",
   components: {
@@ -128,7 +145,8 @@ export default {
     buttonSecondary,
     radioCard,
     listButton,
-    radioList
+    radioList,
+    alert
   },
 };
 </script>
diff --git a/src/styles/uxVariables.scss b/src/styles/uxVariables.scss
index 31ad10d5d..c4f874598 100644
--- a/src/styles/uxVariables.scss
+++ b/src/styles/uxVariables.scss
@@ -163,3 +163,8 @@ $box-shadow:                  0 .5rem 1rem rgba($black, .15);
 $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);
+
+
+$alert-bg-scale:                -90%;
+$alert-border-scale:            -100%;
+$alert-color-scale:             40%;
diff --git a/src/uxComponents/alert/alert.spec.js b/src/uxComponents/alert/alert.spec.js
new file mode 100644
index 000000000..882a68129
--- /dev/null
+++ b/src/uxComponents/alert/alert.spec.js
@@ -0,0 +1 @@
+test.todo('some test to be written in the future');
\ No newline at end of file
diff --git a/src/uxComponents/alert/alert.vue b/src/uxComponents/alert/alert.vue
new file mode 100644
index 000000000..c9d22f9e2
--- /dev/null
+++ b/src/uxComponents/alert/alert.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="alert fade show text-center" role="alert"
+    v-bind:isDismissable="isDismissable"
+    v-bind:class="[isDismissable ? 'alert-dismissible' : '', this.alertClass]"
+    >
+    <strong>{{alertHeading}}</strong>
+    <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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "alert",
+  props: {
+    alertHeading: String,
+    alertText: String,
+    alertClass: String
+  },
+  data() {
+    return {
+      isDismissable: true,
+      isClose: true
+    };
+  }
+};
+</script>