Merge pull request #51 from Safelite/CSR-185-component-updates

CSR-185 update Alert component.

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,19 +147,68 @@
         <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
+        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">
-        <!--
-          Available classes for alertClass:
-          alert-sucess (green)
-          alert-danger (red)
-          alert-warning (yellow)
-          alert-info (blue)
-        -->
         <alert
         alertClass="alert-danger"
-          alertHeading="Alert Heading"
+        alertHeadline="NON-Dismissible Alert"
-          alertText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"
+        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>

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"
+    :class="[ isDismissible ? 'alert-dismissible' : '', this.alertClass ]"
-    v-bind:class="[isDismissable ? 'alert-dismissible' : '', this.alertClass]"
     >
-    <p class="m-0 fw-bold alert-heading">{{alertHeading}}</p>
+    <p class="m-0 fw-bold alert-heading">{{alertHeadline}}</p>
-    <p class="m-0 text-body">{{alertText}}</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,
+    alertHeadline: String,
-    alertText: 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";
         `
       }
     }