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 1/7] 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>

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

From 9a82787ae3bdee11e7a24732966192474893a507 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 17 Nov 2021 09:13:32 -0500
Subject: [PATCH 3/7] CSR-116 Resolve merge conflict.

---
 src/layouts/componentTest/componentTest.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index 332560b73..376ccc851 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -128,6 +128,16 @@
         />
       </div>
     </div>
+    <div class="my-3">
+      <div class="select-car">
+        <div class="select-car-form">
+          <radioQuestion
+            questionText="What year is your vehicle?"
+            :answers="this.years"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

From b1db0606eebb5f553cf746008e65a391cbb3d900 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 17 Nov 2021 09:35:01 -0500
Subject: [PATCH 4/7] Remove unneeded row.

Discussed with Max, neither of us is sure why this was here.
---
 src/layouts/componentTest/componentTest.vue | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index 01f15ff55..1eafa1e14 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -128,16 +128,6 @@
         />
       </div>
     </div>
-    <div class="my-3">
-      <div class="select-car">
-        <div class="select-car-form">
-          <radioQuestion
-            questionText="What year is your vehicle?"
-            :answers="this.years"
-          />
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 

From b477a6f5f0136761206626f64957d790ed426f85 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 17 Nov 2021 19:13:25 -0500
Subject: [PATCH 5/7] CSR-185 update Alert component.

---
 src/layouts/componentTest/componentTest.vue | 174 ++++++++++++--------
 src/styles/commonAlertStyles.scss           |  47 ------
 src/uxComponents/alert/alert.vue            |  73 ++++++--
 vue.config.js                               |   1 -
 vue.release.config.js                       |   1 -
 5 files changed, 171 insertions(+), 125 deletions(-)
 delete mode 100644 src/styles/commonAlertStyles.scss

diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index 1eafa1e14..8f5316d14 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -1,47 +1,47 @@
-  <template>
+<template>
   <div class="container-fluid container-shadow p-2 rounded-3">
     <div class="row g-2">
       <radioCard
-        radioLabel="Windshield"
-        radioImage="windshield-damage.svg"
-        altText="Windshield"
-        groupName="damageKey"
-        radioID="windshield"
+      radioLabel="Windshield"
+      radioImage="windshield-damage.svg"
+      altText="Windshield"
+      groupName="damageKey"
+      radioID="windshield"
       />
       <radioCard
-        radioLabel="Side Window"
-        radioImage="side-window-damage.svg"
-        altText="Side Window"
-        groupName="damageKey"
-        radioID="sidewindow"
+      radioLabel="Side Window"
+      radioImage="side-window-damage.svg"
+      altText="Side Window"
+      groupName="damageKey"
+      radioID="sidewindow"
       />
       <radioCard
-        radioLabel="Back Glass"
-        radioImage="back-glass-damage.svg"
-        altText="Back Glass"
-        groupName="damageKey"
-        radioID="backglass"
+      radioLabel="Back Glass"
+      radioImage="back-glass-damage.svg"
+      altText="Back Glass"
+      groupName="damageKey"
+      radioID="backglass"
       />
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
-          buttonText="Primary"
+        buttonText="Primary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonSecondary
-          buttonText="Secondary"
+        buttonText="Secondary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <listButton
-          buttonText="List Button"
-          errorText="Test error message"
+        buttonText="List Button"
+        errorText="Test error message"
         />
       </div>
     </div>
@@ -51,22 +51,22 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
         <radioList
-          groupName="demo"
-          ariaLabelBy="vehicle-year"
-          radioID="2021"
-          errorMessage="Test error message"
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2021"
+        errorMessage="Test error message"
         />
         <radioList
-          groupName="demo"
-          ariaLabelBy="vehicle-year"
-          radioID="2020"
-          errorMessage="Test error message"
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2020"
+        errorMessage="Test error message"
         />
         <radioList
-          groupName="demo"
-          ariaLabelBy="vehicle-year"
-          radioID="2019"
-          errorMessage="Test error message"
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2019"
+        errorMessage="Test error message"
         />
       </div>
     </div>
@@ -114,17 +114,61 @@
     </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"
+        <alert
+        alertClass="alert-success"
+        alertHeadline="Dismissible Alert"
+        alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
+        v-bind:isDismissible = "true"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-danger"
+        alertHeadline="NON-Dismissible Alert"
+        alertCopy="This is an example of a NON-DISMISSIBLE alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-warning"
+        alertHeadline="Warning Alert"
+        alertCopy="This is an example of a WARNING alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-info"
+        alertHeadline="Info Alert"
+        alertCopy="This is an example of a INFO alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-danger"
+        alertHeadline="Danger Alert"
+        alertCopy="This is an example of a DANGER alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-success"
+        alertHeadline="No Body Copy Alert"
+        alertCopy=""
+        v-bind:isDismissible = "false"
         />
       </div>
     </div>
@@ -132,26 +176,26 @@
 </template>
 
 <script>
-import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
-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: {
-    buttonPrimary,
-    buttonSecondary,
-    radioCard,
-    listButton,
-    radioList,
-    alert
-  },
-  data() {
-    return {
-      years: [2023, 2022, 2021, 2020],
-    };
-  }
-};
+  import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
+  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: {
+      buttonPrimary,
+      buttonSecondary,
+      radioCard,
+      listButton,
+      radioList,
+      alert
+    },
+    data() {
+      return {
+        years: [2023, 2022, 2021, 2020],
+      };
+    }
+  };
 </script>
diff --git a/src/styles/commonAlertStyles.scss b/src/styles/commonAlertStyles.scss
deleted file mode 100644
index 28e924d93..000000000
--- a/src/styles/commonAlertStyles.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-
-.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/uxComponents/alert/alert.vue b/src/uxComponents/alert/alert.vue
index 8e50fd5ca..cf4322aae 100644
--- a/src/uxComponents/alert/alert.vue
+++ b/src/uxComponents/alert/alert.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="alert fade show text-center mb-0" role="alert"
-    v-bind:isDismissable="isDismissable"
-    v-bind:class="[isDismissable ? 'alert-dismissible' : '', this.alertClass]"
+  :class="[ isDismissible ? 'alert-dismissible' : '', this.alertClass ]"
     >
-    <p class="m-0 fw-bold alert-heading">{{alertHeading}}</p>
-    <p class="m-0 text-body">{{alertText}}</p>
+    <p class="m-0 fw-bold alert-heading">{{alertHeadline}}</p>
+    <p class="m-0 text-body">{{alertCopy}}</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"/>
@@ -17,14 +16,66 @@
 export default {
   name: "alert",
   props: {
-    alertHeading: String,
-    alertText: String,
+    alertHeadline: String,
+    alertCopy: String,
+    isDismissible: Boolean,
+    /*
+    alertClass class names:
+    alert-sucess (green)
+    alert-danger (red)
+    alert-warning (yellow)
+    alert-info (blue)
+    */
     alertClass: String
-  },
-  data() {
-    return {
-      isDismissable: true
-    };
   }
 };
 </script>
+
+<style lang="scss">
+.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;
+    }
+  }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index ba8d382a1..bda41b2dd 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -27,7 +27,6 @@ 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 296d833c5..5bc60309f 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -17,7 +17,6 @@ module.exports = {
         @import "@/styles/commonRadioStyles.scss";
         @import "@/styles/commonTypographyStyles.scss";
         @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss";
-        @import "@/styles/commonAlertStyles.scss";
         `
       }
     }

From 74c169e35353e9e9f3fb9bb93ae7fc1e9048bc01 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 18 Nov 2021 08:43:09 -0500
Subject: [PATCH 6/7] Indent code for proper formatting.

---
 src/uxComponents/alert/alert.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/uxComponents/alert/alert.vue b/src/uxComponents/alert/alert.vue
index cf4322aae..b47d75f3c 100644
--- a/src/uxComponents/alert/alert.vue
+++ b/src/uxComponents/alert/alert.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="alert fade show text-center mb-0" role="alert"
-  :class="[ isDismissible ? 'alert-dismissible' : '', this.alertClass ]"
+    :class="[ isDismissible ? 'alert-dismissible' : '', this.alertClass ]"
     >
     <p class="m-0 fw-bold alert-heading">{{alertHeadline}}</p>
     <p class="m-0 text-body">{{alertCopy}}</p>

From 0d010fc204607bcecf55161f838786ee5f1992a1 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 18 Nov 2021 08:53:56 -0500
Subject: [PATCH 7/7] Add headings and spacing to component test page.

---
 src/layouts/componentTest/componentTest.vue | 40 +++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index 8f5316d14..e577eed59 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="container-fluid container-shadow p-2 rounded-3">
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
+      </div>
+    </div>
     <div class="row g-2">
       <radioCard
       radioLabel="Windshield"
@@ -23,6 +28,11 @@
       radioID="backglass"
       />
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
@@ -37,6 +47,11 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <listButton
@@ -45,6 +60,11 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
+      </div>
+    </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
       <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
@@ -70,11 +90,21 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <a href="#">Text Link</a>
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
+      </div>
+    </div>
     <div class="row my-2">
       <div class="col">
         <p>This is default body copy font size/weight</p>
@@ -82,6 +112,11 @@
         <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
+      </div>
+    </div>
     <div class="row my-2">
       <div class="col">
         <h1>h1 Heading</h1>
@@ -112,6 +147,11 @@
         <h6>h6 Heading</h6>
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
+      </div>
+    </div>
     <div class="row my-2">
       <div class="col">
         <alert