Merge pull request #49 from Safelite/csr-116-message-component

CSR-116 Alert/Notification Component

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>

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-danger (red)
+          alert-warning (yellow)
+          alert-info (blue)
+        -->
+      <alert
+          alertClass="alert-danger"
+          alertHeading="Alert Heading"
+          alertText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"
+        />
+      </div>
+    </div>
     <div class="my-3">
       <div class="select-car">
         <div class="select-car-form">
@@ -131,6 +147,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: {
@@ -138,7 +155,8 @@ export default {
     buttonSecondary,
     radioCard,
     listButton,
-    radioList
+    radioList,
+    alert
   },
   data() {
     return {

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;
+    }
+  }
+}

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);
+
+//Alerts
+$alert-bg-scale:                -90%;
+$alert-border-scale:            -100%;
+$alert-color-scale:             40%;

src/uxComponents/alert/alert.spec.js

@@ -0,0 +1 @@
+test.todo('some test to be written in the future');

src/uxComponents/alert/alert.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="alert fade show text-center mb-0" role="alert"
+    v-bind:isDismissable="isDismissable"
+    v-bind:class="[isDismissable ? 'alert-dismissible' : '', this.alertClass]"
+    >
+    <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">
+      <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>
+
+<script>
+export default {
+  name: "alert",
+  props: {
+    alertHeading: String,
+    alertText: String,
+    alertClass: String
+  },
+  data() {
+    return {
+      isDismissable: true
+    };
+  }
+};
+</script>

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";
         `
       }
     }

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";
         `
       }
     }