Merge pull request #291 from Safelite/feature/CSR-319

CSR-319: expand Alert component to allow for multiple paragraphs

src/layouts/component-test/component-test.vue

@@ -1129,6 +1129,16 @@
       />
     </div>
   </div>
+  <div class="row my-2">
+    <div class="col">
+      <alert
+      alertClass="alert-success"
+      alertHeadline="Multi-Paragraph Alert"
+      :alertCopy="['This is an example of a MULTI-PARAGRAPH alert, which takes an array of strings instead of a single string value for alertCopy.', 'This is the second item in the array of strings.']"
+      v-bind:isDismissible="false"
+      />
+    </div>
+  </div>
   </div>
   </template>
 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -26,7 +26,7 @@
             v-show="hasRepairReplaceConflict"
             alertClass="alert-danger"
             alertHeadline="You'll need to schedule separate appointments"
-            alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
+            :alertCopy="['Vehicle service requiring both glass repair and replacement must be scheduled separately, as they\'re performed by different technicians.', 'Continue scheduling your first service now, and then come back to schedule the second service.']"
             :isDismissible="false"
           />
           <sideDoorOptions

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -12,7 +12,7 @@
             v-show="showNoReplacementAvailableError"
             alertClass="alert-danger"
             alertHeadline="Service not available"
-            alertCopy="We're sorry, but we currently offer only repair service for your vehicle type. Need help with next steps? Call us at 800-394-0288."
+            :alertCopy="['We\'re sorry, but we currently offer only repair service for your vehicle type.', 'Need help with next steps? Call us at 800-394-0288.']"
             :isDismissible="false"
           />
         <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 

src/ux-components/alert/alert.spec.js

@@ -1 +1,30 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import alert from "./alert";
+
+describe("alert.vue", () => {
+
+  it("Should set isMultiParagraph to true if alertCopy is an array of strings", async () => {
+    // Arrange
+    const wrapper = shallowMount(alert, {
+      propsData: {
+        alertCopy: ["one", "two"]
+      },
+    });
+
+    // Assert
+    expect(wrapper.vm.isMultiParagraph).toBe(true);
+  });
+
+  it("Should set isMultiParagraph to false if alertCopy is a single string", async () => {
+    // Arrange
+    const wrapper = shallowMount(alert, {
+      propsData: {
+        alertCopy: "three"
+      },
+    });
+
+    // Assert
+    expect(wrapper.vm.isMultiParagraph).toBe(false);
+  });
+
+});

src/ux-components/alert/alert.vue

@@ -5,7 +5,12 @@
     :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
   >
     <p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
-    <p class="m-0 text-body small">{{ alertCopy }}</p>
+    <span v-if="isMultiParagraph">
+      <p class="m-1 text-body small" v-for="(para, index) in alertCopy" :key="index">
+        {{ para }}
+      </p>
+    </span>
+    <p class="m-0 text-body small" v-else>{{ alertCopy }}</p>
     <button
       type="button"
       class="btn-close p-2"
@@ -30,7 +35,7 @@ export default {
   name: "alert",
   props: {
     alertHeadline: String,
-    alertCopy: String,
+    alertCopy: [Array, String],
     isDismissible: Boolean,
     /*
     alertClass class names:
@@ -41,6 +46,14 @@ export default {
     */
     alertClass: String,
   },
+  computed: {
+    isMultiParagraph() {
+      if (typeof this.alertCopy == "string") {
+        return false;
+      }
+      return true;
+    }
+  },
 };
 </script>