CSR-185 update Alert component.

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>

src/styles/commonAlertStyles.scss

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

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>

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

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