Merge branch 'develop' into feature/CSR-269

jest.config.js

@@ -13,6 +13,8 @@ module.exports = {
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/component-test/component-test.vue",
     "!src/layouts/form-test/form-test.vue",
+    "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
+    "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/address-poc/address-poc.vue",
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

src/common-components/button-question/button-question.vue

@@ -32,10 +32,14 @@
               :colLength="this.answers.length < 3 ? '' : '-4'"
               :selectedButtonIDs="selectedValues"
               data-test="button"
+              :validationRules="validationRules"
             />
           </div>
       </fieldset>
     </div>
+    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
+        <error-message :name="groupName"></error-message>
+    </div>
   </div>
 </template>
 
@@ -43,6 +47,8 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
+import { ErrorMessage } from 'vee-validate';
+import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "buttonQuestion",
@@ -76,6 +82,10 @@ export default {
     isOverflowScrollable: Boolean,
     isWide: Boolean,
     modelValue: Array,
+    validationRules: String,
+    name: String,
+    value: String,
+    suppressError: Boolean,
   },
   computed: {
     getFieldSetClasses() {
@@ -95,6 +105,9 @@ export default {
         case 'listCard':
           classes = 'row justify-content-center g-2'
           break;
+        case 'radio':
+          classes = 'ui-radio d-flex'
+          break;
       }
       return classes;
     },
@@ -115,6 +128,9 @@ export default {
     }
   },
   methods: {
+    chooseAnswer(answer) {
+      this.$emit("update:modelValue", answer);
+    },
     handleCheckedChanged(val) {
       if(this.isMultiSelect) {
         // Add or remove item to array of data to emit
@@ -130,6 +146,8 @@ export default {
     listButton,
     listButtonHorizontal,
     listCard,
+    ErrorMessage,
+    radio,
   },
 };
 </script>

src/common-components/funnel-footer/funnel-footer.spec.js

@@ -5,90 +5,50 @@ describe("funnel-footer.vue", () => {
 
   it("Should return footer-link class", async () => {
     // Act
-
       const r = {
         test:"testing",
         clientHeight: 10,
-        classList: {
+        offsetHeight: 24,
-          add: jest.fn(() => ''),
-          remove: jest.fn()
-        },
       };
 
-      global.document.getElementById = jest.fn().mockImplementation(()=> {
+      global.document.querySelector = jest.fn().mockImplementation(()=> {
         return r;
       });
 
       const wrapper = mount(funnelFooter, {
       });
+      wrapper.vm.initializeComponent(cmsContent);
 
       // Assert
       const link = wrapper.find("a");
-      console.log(wrapper.html());
 
       // Expect
-      expect(link.attributes('class')).toContain("footer-link");
+      expect(link.attributes('class')).toContain("footer");
-      expect(global.document.getElementById).toBeCalled();
-      expect(r.classList.add).toBeCalledWith("justify-content-end");
-      expect(r.classList.remove).toBeCalledWith("justify-content-start");
 
   });
 
-  it("Should return link text", async () => {
+  it("Should emit ForwardClicked on button click", async () => {
     // Act
     const wrapper = mount(funnelFooter, {
-      propsData: {
-        text: "Terms of use",
-      },
     });
-
+    wrapper.vm.buttonClick();
     // Assert
-    const link = wrapper.find("a");
+    expect(wrapper.emitted()["ForwardClicked"][0]).toHaveBeenCalled;
-
-    expect(link.text()).toEqual("Terms of use");
   });
 
-  it("Should return class btn-primary", async () => {
+  it("Should emit BackClicked on link click", async () => {
     // Act
     const wrapper = mount(funnelFooter, {
-      propsData: {
-        isPrimary: true,
-      },
     });
-
+    wrapper.vm.linkClick();
     // Assert
-    const input = wrapper.find("button");
+    expect(wrapper.emitted()["BackClicked"][0]).toHaveBeenCalled;
-
-    // Expect
-    expect(input.attributes("class")).toContain("btn-primary");
-  });
-
-  it("Should return class justify-content-end if paddingHeight < 80px", async () => {
-
-    global.document.getElementById = jest.fn().mockImplementation(()=> {
-      return {
-        test:"testing",
-        clientHeight: 10,
-        classList: {
-          add: jest.fn(),
-          remove: jest.fn()
-        }
-      }
-    });
-
-    // Act
-      const wrapper = mount(funnelFooter, {
-        propsData: {
-          footer: true
-        },
-      });
-      const infoBox = document.getElementById('infoBox');
-      // Assert
-      const stacked = wrapper.find("#stacked");
-      wrapper.vm.paddingHeight = 100;
-
-      // Expect
-      expect(stacked.attributes('class')).toContain("justify-content-end");
   });
 
 });
+
+//Mock CMS content
+const cmsContent = {
+  backLink: "text",
+  buttonText: "text",
+};

src/common-components/funnel-footer/funnel-footer.vue

@@ -1,28 +1,44 @@
 <template>
-<div class="container-fluid g-2 footer">
+  <div class="footer pt-4">
-    <div class="row">
+    <div class="container-fluid g-2">
+      <div class="row">
         <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-            &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
+          &copy;&nbsp;{{new Date().getFullYear()}}&nbsp;Safelite Group
         </div>
-    </div>
+      </div>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+      <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
         <div class="col d-flex justify-content-center justify-content-around text-center">
-            <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
+          <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
-            <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
+          <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
-            <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
+          <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
         </div>
+      </div>
     </div>
-</div>
+    <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
-<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
+      <div class="row d-flex flex-row-reverse align-items-center">
-    <div class="row d-flex flex-row-reverse align-items-center">
+        <div class="col-12 button-col d-flex justify-content-end" id="stacked">
-        <div class="col d-flex justify-content-end" id="stacked">
+          <buttonMain
-            <buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
+            isPrimary
+            :buttonText="buttonText"
+            loaderColor="white"
+            sizeInRem="1"
+            :class="isDisabled && 'form-test-invalid'"
+            :aria-disabled="isDisabled"
+            :isDisabled="isDisabled"
+            @click-event="buttonClick"
+          />
         </div>
-        <div class="col">
+        <div class="col-12 link-col py-1">
-            <textLink linkType="navigation" text="back" />
+          <textLink
+          linkType="navigation"
+          :text="backLink"
+          @click-event="linkClick"
+          href="javascript:void(0)"
+          />
         </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -30,53 +46,65 @@ import textLink from "@/ux-components/text-link/text-link";
 import buttonMain from "@/ux-components/button-main/button-main";
 
 export default {
-    name: "funnelFooter",
+  name: "funnelFooter",
-    components: {
+  props: {
-        textLink,
+    isDisabled: Boolean,
-        buttonMain
+  },
-    },
+  components: {
-    data() {
+    textLink,
-        return {
+    buttonMain
-            paddingHeight: 0
+  },
-        }
+  data() {
-    },
+    return {
-    mounted() {
+      paddingHeight: 0,
-        this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+      backLink: "",
-        this.$nextTick(() => {
+      buttonText: "",
-            window.addEventListener('resize', this.onResize);
-        })
-        setTimeout(function () { // Give it a moment to set the date
-            document.getElementById('years').innerHTML += new Date().getFullYear();
-        }, 100);
-        this.checkHeight();
-    },
-    beforeUnmount() {
-        window.removeEventListener('resize', this.onResize);
-    },
-    methods: {
-        onResize() {
-            this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-            this.checkHeight();
-        },
-        checkHeight() {
-            const parentHeight = document.getElementById('infoBox').clientHeight;
-            const wrapper2 = document.getElementById('stacked');
-
-            if (parentHeight > 80) {
-                wrapper2.classList.add("justify-content-start");
-                wrapper2.classList.remove("justify-content-end");
-            } else {
-                wrapper2.classList.add("justify-content-end");
-                wrapper2.classList.remove("justify-content-start");
-            }
-        }
     }
+  },
+  mounted() {
+    this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    })
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  },
+  methods: {
+    onResize() {
+      this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight;
+    },
+    initializeComponent(cmsContent) {
+      this.backLink = cmsContent.BackButtonText;
+      this.buttonText = cmsContent.ForwardButtonText;
+    },
+    buttonClick() {
+      this.$emit("ForwardClicked");
+    },
+    linkClick() {
+      this.$emit("BackClicked");
+    },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-button {
+.footer {
-    min-width: 200px;
+  display: flex;
+  margin-top: auto;
+  .button-col,
+  .link-col,
+  .btn-primary {
     width: 100%;
+  }
+  @media only screen and (min-width: 340px) {
+    .button-col,
+    .link-col {
+      width: 50% !important;
+    }
+    .btn-primary {
+      width: auto;
+    }
+  }
 }
 </style>

src/layouts/address-poc/address-poc.vue

@@ -5,42 +5,51 @@
         <vehicleBanner ref="vehicleBanner"  :displayGenericVehicleImage=true />
       </div>
     </div>
-    <div class="row my-4">
+    <form>
-      <div class="col">
+      <div class="row my-4">
-        <label for="autocomplete">Street address</label>
+        <div class="col">
-        <input ref="autocomplete" 
+          <label for="autocomplete">Street address</label>
-            id="autocomplete"
+          <input ref="autocomplete" 
-            placeholder="Search" 
+              id="autocomplete"
-            class="form-control search-location"
+              placeholder="Search" 
-            type="text" />
+              class="form-control search-location"
+              type="text" 
+              autocomplete="off" />
+        </div>
       </div>
-    </div>
+    </form>
-    <div v-show="showAddressFields" class="row my-4">
+    <form>
-      <div class="col">
+      <div v-show="showAddressFields" class="row my-4">
-        <label for="city">City</label>
+        <div class="col">
-        <input ref="city" 
+          <label for="city">City</label>
-            id="city"
+          <input ref="city" 
-            class="form-control"
+              id="city"
-            type="text" />
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>
       </div>
-    </div> 
+    </form> 
-    <div v-show="showAddressFields" class="row my-4">
+    <form>
-      <div class="col-6">
+      <div v-show="showAddressFields" class="row my-4">
-        <label for="state">State</label>
+        <div class="col-6">
-        <input ref="state" 
+          <label for="state">State</label>
-            id="state"
+          <input ref="state" 
-            class="form-control"
+              id="state"
-            type="text" />
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>
+        <div class="col-6">
+          <label for="zip">Zip</label>
+          <input ref="zip" 
+              id="zip"
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>      
       </div> 
-      <div class="col-6">
+    </form>
-        <label for="zip">Zip</label>
-        <input ref="zip" 
-            id="zip"
-            class="form-control"
-            type="text" />
-      </div>      
-    </div> 
-
     <div v-show="displayVerificationWarning" class="row my-4">
       <div class="col">
         <span style="color: red;">An accurate match may not have have been located. Please verify your address before continuing</span>
@@ -57,7 +66,8 @@
         <input ref="firstName" 
             id="firstName"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div> 
     <div class="row my-4">
@@ -66,7 +76,8 @@
         <input ref="lastName" 
             id="lastName"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div>
     <div class="row my-4">
@@ -75,7 +86,8 @@
         <input ref="email" 
             id="email"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div>            
   </div>

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

@@ -2,7 +2,7 @@
   <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">Inputs</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
       </div>
     </div>
     <div class="row">
@@ -15,6 +15,36 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
+        <p class="m-0">Sample radio button group</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <radio
+          groupName="radio-demo-2"
+          buttonLabel="I'm a radio button!"
+          buttonID="radio-button-a"
+          isRequired
+          value="I'm a radio button!"
+          modelValue="Model Value 1"
+          screenReaderOnlyText="Model Value 1"
+        />
+      </div>
+      <div class="col">
+        <radio
+          groupName="radio-demo-2"
+          buttonLabel="I'm also a radio button!"
+          buttonID="radio-button-b"
+          isRequired
+          value="I'm also a radio button!"
+          modelValue="Model Value 2"
+          screenReaderOnlyText="Model Value 2"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -50,14 +80,17 @@
         <textLink
         linkType=navigation
         text="Navigation Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType="text"
         text="Default Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType=textSmall
         text="Small Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType=footer
@@ -674,19 +707,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3">
-        <textLink navigation="true" text="Navigation Link" /><br /><br />
-        <textLink text="Default Link" /><br /><br />
-        <textLink textSmall="true" text="Small Link" /><br /><br />
-        <textLink footer="true" text="Footer Link" href="https://google.com" />
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@@ -926,16 +946,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Funnel Footer</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <funnelFooter/>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -949,8 +959,8 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
+import radio from "@/ux-components/radio/radio";
 import textLink from "@/ux-components/text-link/text-link";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
   name: "App",
   components: {
@@ -962,9 +972,9 @@ export default {
     vehicleBanner,
     listButtonHorizontal,
     checkbox,
+    radio,
     funnelHeader,
-    textLink,
+    textLink
-    funnelFooter
   },
   data() {
     return {

src/layouts/form-test/form-test.vue

@@ -1,367 +1,164 @@
 <template>
-  <Form
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
-    :validation-schema="schema"
+        <funnelHeader ref="funnelHeader" />
-    @submit="onSubmit"
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
-    @invalid-submit="onInvalidSubmit"
+        <funnelSubHeader ref="funnelSubHeader" />
-    v-slot="{ values, meta }"
+        <Form
-    class="w-50"
+          @submit="onSubmit"
-  >
+          @invalid-submit="onInvalidSubmit"
-    <div class="row g-2 mt-6 mx-4">
+          ref="theForm"
-      <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
+          v-slot="{ values, meta, errors }"
-      <p class="mx-2">
-        NOTE: This page is testing functionality only; styling will not match
-        Figma mocks.
-      </p>
-    </div>
-
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">
-        How many chips are we repairing? (Required)
-      </h4>
-      <fieldset>
-        <div
-          role="radiogroup"
-          aria-labelledby="demo-group"
-          class="d-flex flex-row p-0"
         >        
-          <h4 class="sr-only" id="demo-group">
+            <damageLocationQuestion
-            How many chips are we repairing?
+              ref="damageLocation"
-          </h4>
+              v-model="selectedDamageLocations"
-          <listButtonHorizontal
+              groupName="DamageLocationQuestion"
-            groupName="demo"
+            />
-            aria-required="true"
+            <windshieldOptions
-            buttonID="1"
+              ref="windshieldOptions"
-            buttonLabel="1"
+              :showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
-            value="1"
+              :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
-            buttonLabelSubCopy=""
+            />
-            textPosition="text-center"
+            <alert
-            sizeInRem="1"
+              v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
-            :totalInGroup="3"
+              alertClass="alert-danger"
-            :positionInGroup="1"
+              alertHeadline="You'll need to schedule separate appointments"
-            screenReaderOnlyText=" opens new window"
+              alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
-          />
+              :isDismissible="false"
-          <listButtonHorizontal
+            />
-            groupName="demo"
+            <replaceOptionsQuestion
-            aria-required="true"
+              ref="driverSideOptions"
-            buttonID="2"
+              isAvailable
-            buttonLabel="2"
+              v-model="driverSideOptionsData"
-            value="2"
+              groupName="DriverSideReplaceOptionsQuestion"
-            buttonLabelSubCopy=""
+            />
-            textPosition="text-center"
+            <funnel-footer
-            sizeInRem="1"
+              ref="funnelFooter"
-            :totalInGroup="3"
+              :isDisabled="!meta.valid"
-            :positionInGroup="2"
+            />
-            screenReaderOnlyText=" opens new window"
-          />
-          <listButtonHorizontal
-            groupName="demo"
-            aria-required="true"
-            buttonID="3"
-            buttonLabel="3"
-            value="3"
-            buttonLabelSubCopy=""
-            textPosition="text-center"
-            sizeInRem="1"
-            :totalInGroup="3"
-            :positionInGroup="3"
-            screenReaderOnlyText=" opens new window"
-          />
-        </div>
-      </fieldset>
-      <div class="row px-3 form-test-error">
-        <error-message name="demo"></error-message>
-      </div>
-    </div>
 
-    <div class="row g-2 mt-6 mx-4">
+            <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION  -->
-      <div class="col">
+              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
-        <h4 class="mx-2 mt-4 mb-0">
+              <p>Current Form, values:</p>
-          Which windshield part needs fixed? (Required)
+              <pre>{{ values }}</pre>
-        </h4>
+              <p>Errors:</p>
-        <fieldset>
+              <pre>{{ errors }}</pre>
-          <legend class="sr-only">Which windshield part needs fixed?</legend>
+              <p>Is Form Valid? (Meta.valid):</p>
-          <listButton
+              <pre>{{ meta.valid }}</pre>
-            isMultiSelect
+            </div>
-            buttonID="Single Windshield"
-            buttonLabel="Single Windshield"
-            value="Single Windshield"
-            groupName="demo2"
-          />
-          <listButton
-            isMultiSelect
-            buttonID="Driver Side"
-            buttonLabel="Driver Side"
-            value="Driver Side"
-            groupName="demo2"
-          />
-          <listButton
-            isMultiSelect
-            buttonID="Passenger Side"
-            buttonLabel="Passenger Side"
-            value="Passenger Side"
-            groupName="demo2"
-          />
-        </fieldset>
-      </div>
-      <div class="row px-3 form-test-error">
-        <error-message name="demo2"></error-message>
-      </div>
-    </div>
 
-    <div class="row g-2 mt-6 mx-4">
+        </Form>
-      <div class="col">
-        <h4 class="mx-2 mt-4 mb-0">demo3: Enter your VIN (Required)</h4>
-        <textInput
-          name="demo3"
-          type="text"
-          label="VIN (Required)"
-          :isRequired="true"
-        />
-      </div>
     </div>
-
-    <!-- <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
-      <textInput
-        name="demo4"
-        type="text"
-        label="Numbers Only"
-        :isRequired="true"
-      />
-    </div>
-  </div> -->
-
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
-      <div aria-labelledby="demo5-group" class="d-flex flex-row p-0">
-        <h4 class="sr-only" id="demo5-group">Where's your damage?</h4>
-        <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          value="Windshield"
-          altText=""
-          buttonID="List Card Checkbox a"
-          groupName="demo5"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="side-window-damage-left-all.svg"
-          buttonLabel="Side Door"
-          value="Side Door"
-          altText=""
-          buttonID="List Card Checkbox b"
-          groupName="demo5"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="back-glass-damage.svg"
-          buttonLabel="Rear Window"
-          value="Rear Window"
-          altText=""
-          buttonID="List Card Checkbox c"
-          groupName="demo5"
-        />
-      </div>
-    </div>
-
-    <div class="row px-3 form-test-error">
-      <error-message name="demo5"></error-message>
-    </div>
-
-    <div class="row g-2 mt-6 mx-4">
-      <h4 class="mx-2 mt-4 mb-0">
-        demo6: What's your windshield damage? (Required if demo5 "Windshield" is
-        selected)
-      </h4>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo6-group"
-        class="d-flex flex-row p-0"
-      >
-        <h4 class="sr-only" id="demo6-group">What's your windshield damage?</h4>
-        <listCard
-          isRadio
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Crack"
-          value="Crack"
-          buttonLabelSubCopy="My damage is larger than six inches."
-          altText=""
-          buttonID="Crack Checkbox a"
-          groupName="demo6"
-        />
-        <listCard
-          isRadio
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Chip(s)"
-          value="Chip"
-          buttonLabelSubCopy="I have three or fewer chips smaller than six inches."
-          altText=""
-          buttonID="Chip Checkbox b"
-          groupName="demo6"
-        />
-      </div>
-    </div>
-
-    <div class="row px-3 form-test-error">
-      <error-message name="demo6"></error-message>
-    </div>
-
-    <!-- <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">Password (Required, enter any string)</h4>
-      <textInput
-        name="password"
-        type="text"
-        label="Password (Required)"
-        :isRequired="true"
-      />
-    </div>
-  </div>
-
-  <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">Confirm Password (Required, must match above Password field)</h4>
-      <textInput
-        name="passwordConfirmation"
-        type="text"
-        label="Confirm Password (Required)"
-        :isRequired="true"
-      />
-    </div>
-  </div> -->
-
-    <div class="row px-3 form-test-error" data-focus-target="demoX">
-      <error-message name="demoX"></error-message>
-    </div>
-
-    <div class="g-2 mt-6 mx-4">
-      <button class="mb-6" :class="!meta.valid && 'form-test-invalid'">
-        Get your estimate
-      </button>
-      <p>Current Form Values:</p>
-      <pre>{{ values }}</pre>
-      <p>Is Form Valid? (Meta.valid):</p>
-      <pre>{{ meta.valid }}</pre>
-    </div>
-  </Form>
 </template>
 
 <script>
-import { Form, ErrorMessage } from "vee-validate";
+// Components
-import * as Yup from "yup";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import alert from "@/ux-components/alert/alert";
+
+import { Form } from 'vee-validate';
+
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
 
-import listCard from "@/ux-components/list-card/list-card";
-import textInput from "@/common-components/text-input/text-input";
-import listButton from "@/ux-components/list-button/list-button";
-import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 
 export default {
-  name: "App",
+  name: "form-test",
-  data() {
+  async beforeRouteEnter(to, from, next) {
-    const errorMessages = {
+    // Call APIs
-      demo: "Please select chip(s)",
+    const cmsContentPromise = fetchCmsContentForPage('vehicle-damage');
-      demo2: "Please select a windshield part",
+    const damageOptionsPromise =
-      demo3:
+      baseMixin.methods.dispatchNonBlockingStoreAction(
-        "You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.",
+        storeActions.GET_DAMAGE_OPTIONS,
-      demo4: "Invalid Entry. Must enter only numbers, no letters.",
+        { carId: store.getters.vehicle.carId }
-      demo5: "Please select damage location",
+      );
-    };
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "damageOptions",
+        promise: damageOptionsPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.$refs.funnelHeader.initializeComponent(
+        resultMap.cmsContent.FunnelHeaderWidget
+      );
+      vm.$refs.vehicleBanner.initializeComponent(
+        resultMap.cmsContent.VehicleBannerWidget
+      );
+      vm.$refs.funnelSubHeader.initializeComponent(
+        resultMap.cmsContent.FunnelSubHeaderWidget
+      );
+      vm.$refs.driverSideOptions.initializeComponent(
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      );
+      vm.$refs.damageLocation.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
+    });
+  },
+  data(){
     return {
-      schema: Yup.object()
+      selectedDamageLocations: [],
-        .shape({
+      driverSideOptionsData: [],
-          demo: Yup.string().required(errorMessages.demo),
+    }
-          demo2: Yup.array()
-            .required(errorMessages.demo2)
-            .min(1, errorMessages.demo2),
-          demo3: Yup.string()
-            .uppercase()
-            .required("Please enter a VIN.")
-            .min(17, errorMessages.demo3)
-            .max(17, errorMessages.demo3)
-            .matches("^[^IOQ]+$", errorMessages.demo3),
-          // demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
-          demo5: Yup.array()
-            .required(errorMessages.demo5)
-            .min(1, errorMessages.demo5),
-          demo6: Yup.string().when("demo5", function (demo5, schema, value) {
-            if (demo5) {
-              const demo5String = demo5.toString();
-              if (demo5String.includes("Windshield")) {
-                // make demo6 required
-                return schema.required(
-                  "You must pick an option for Windshield Damage."
-                );
-              }
-              return schema;
-            }
-            return schema;
-          }),
-          demoX: Yup.string().notRequired(),
-          // PASSWORD EXAMPLE, NOT BEING USED NOW
-          // password: Yup.string().min(6).required(),
-          // passwordConfirmation: Yup.string()
-          //  .required()
-          //  .oneOf([Yup.ref("password")], "Passwords do not match"),
-        })
-        .test(
-          "repair-replace-conflict",
-          null, // need to pass null as error message so it won't get added to list of errors
-          function (value) {
-            // whole form test
-            console.log("ALL FORM VALUES: ", value);
-
-            // test problem scenario... return new error if conditions are true, allow submit if not
-            if (value.demo5 && value.demo6) {
-              const demo5String = value.demo5.toString();
-              console.log("demo5String: ", demo5String);
-              console.log("demo6: ", value.demo6);
-
-              if (
-                demo5String.includes("Windshield") &&
-                value.demo5.length > 1 &&
-                value.demo6 == "Chip"
-              ) {
-                return this.createError({
-                  name: "demoX",
-                  message:
-                    "Sorry, at this time we can't schedule a repair and replace at the same time. Please schedule these appointments separately as they are different technicians. Thanks.",
-                  path: "demoX",
-                });
-              }
-              return true;
-            }
-            return true;
-          }
-        ),
-    };
   },
   components: {
-    listCard,
-    listButton,
-    listButtonHorizontal,
-    textInput,
     Form,
-    ErrorMessage,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    damageLocationQuestion,
+    replaceOptionsQuestion,
+    funnelFooter,
+    windshieldOptions,
+    alert,
   },
   methods: {
+    arePagePrerequisitesValid() {
+      return store.getters.vehicle.carId !== null;
+    },
+    resetDependentState() {
+      // Invokes
+      store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
+    },
     onSubmit(values) {
-      window.alert(
+      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
-        "Success! Submitted values: " + JSON.stringify(values, null, 2)
+      console.log('submitted: ', JSON.stringify(values, null ,2));
-      );
-      console.log("submitted: ", JSON.stringify(values, null, 2));
     },
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       console.log("values: ", values);
       console.log("errors: ", errors);
       console.log("results: ", results);
-      // get errorEls and order by alpha
+      // get error names array
-      const errorEls = Object.keys(errors).sort();
+      const errorNames = errors ? Object.keys(errors) : [];
-      const firstErrorEl = errorEls[0];
+      const firstErrorEl = errorNames[0];
-      console.log("firstErrorEl: ", firstErrorEl);
       if (firstErrorEl) {
+        console.log('firstErrorEl: ', firstErrorEl);
         const qsString = "[data-focus-target='" + firstErrorEl + "']";
         document.querySelector(qsString).focus();
       }
@@ -369,13 +166,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-.form-test-error {
-  color: red;
-  font-weight: bold;
-}
-.form-test-invalid {
-  opacity: 0.5;
-}
-</style>

src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js

@@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
       damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
   
       //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' }, {Name: "car-RearWindow"} ])
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
     });
   });
 

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="replace-options-question">
+    <div class="damage-location-question">
         <buttonQuestion
             v-if="answersToDisplay.length > 1"
             :questionText="questionText"
@@ -8,13 +8,24 @@
             :groupName="groupName"
             buttonType="listCard"
             v-model="selectedValues"
+            validationRules="damage-location-required"
         />
+        
     </div>
 </template>
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("damage-location-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select damage location";
+    }
+    return true;
+});
 
 export default ({
     name: "damageLocationQuestion",
@@ -26,7 +37,11 @@ export default ({
         }
     },
     props: {               
+        isMultiSelect: Boolean,
         modelValue: Array,
+        isAvailable: Boolean,
+        filterByVehicleCategory: Boolean,
+        name: String,
         groupName: String,
     },
     methods: {
@@ -34,7 +49,7 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
-        }
+        },
     },
     computed: {
         selectedValues: {
@@ -48,12 +63,12 @@ export default ({
         damageOptionsMap(){
             return {
                 Windshield: true,
-                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
+                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions.length || this.damageOptions.passengerSideOptions.availableReplacementOptions.length,
-                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions.length,
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            return Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
@@ -64,6 +79,6 @@ export default ({
     },
     components: {
         buttonQuestion,
-    }
+    },
 })
 </script>

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -9,6 +9,7 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                validationRules="replace-options-required"
             />
         </div>
     </transition>
@@ -17,6 +18,15 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select window";
+    }
+    return true;
+});
 
 export default ({
     name: "replaceOptionsQuestion",
@@ -38,7 +48,7 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
-        }
+        },
     },
     computed: {
         selectedValues: {

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -1,6 +1,7 @@
 // Components
 import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
@@ -221,6 +222,10 @@ function setupMocks({
 
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
+  };
+
+  funnelFooter.methods = {
+    initializeComponent: jest.fn(),
   }
 
   const mountOptions = getMountOptions(mountOptionsMockData);
@@ -252,5 +257,11 @@ function setupMocks({
   damageLocationQuestionWrapper.vm.initializeComponent =
   damageLocationQuestion.methods.initializeComponent;
 
+  const funnelFooterWrapper = wrapper.findComponent({
+    name: "funnelFooter",
+  });
+
+  funnelFooterWrapper.vm.initializeComponent = funnelFooter.methods.initializeComponent;
+
   return { wrapper, apiPromise };
 }

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

@@ -1,10 +1,11 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-2 position-relative">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
         <windshieldOptions ref="windshieldOptions" v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations" :selectedChipCount="selectedChipCount" />
     </div>
 </template>
@@ -12,6 +13,7 @@
 <script>
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
@@ -71,6 +73,9 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
       console.log("vd: initialize wo");
       vm.$refs.windshieldOptions.initializeComponent(
         resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
@@ -93,7 +98,14 @@ export default {
     resetDependentState() {
       // Invokes
       store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
-    }
+    },
+    backButtonAction() {
+      // route to move backwards
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
+    },
   },
   //computed: {
         // selectedWindshieldDamageType(){
@@ -106,6 +118,7 @@ export default {
     //},
   components: {
     funnelHeader,
+    funnelFooter,
     vehicleBanner,
     funnelSubHeader,
     replaceOptionsQuestion,

src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="windshield-damage-type-question">
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplay.length > 1"
+            :questionText="questionText"
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+            validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+            :suppressError="suppressError"
+        />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
+
+export default ({
+    name: "windshieldDamageTypeQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            damageOptions: Object,
+        }
+    },
+    props: {
+        isMultiSelect: Boolean,
+        modelValue: Array,
+        isAvailable: Boolean,
+        name: String,
+        groupName: String,
+        suppressError: Boolean,
+    },
+    methods: {
+        initializeComponent(cmsContent, damageOptions){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+            this.damageOptions = damageOptions;
+        },
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        damageOptionsMap(){
+            return {
+                Windshield: true,
+                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
+            }
+        },
+        answersToDisplay(){
+            // HARD CODED MOCK DATA FOR NOW
+            return [
+                {
+                    "Name": "Windshield-Crack",
+                    "Text": "Crack",
+                    "SubText": "My damage is larger than six inches.",
+                    "ImageId": "2cf13fbb-22d8-4b61-bd3d-3d413ea58c87",
+                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-replace-desktop-ds.png"
+                },
+                {
+                    "Name": "Windshield-Chip",
+                    "Text": "Chip(s)",
+                    "SubText": "I have three or fewer chips smaller than six inches.",
+                    "ImageId": "faaa14d9-3650-4949-a687-7665962337b8",
+                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-repair-desktop-ds.png"
+                }
+            ]
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+})
+</script>

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

@@ -116,3 +116,5 @@ console.log(this);
     },
 })
 </script>
+
+        suppressError: Boolean,

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-0 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">

src/router/router-constants/routing-table.js

@@ -50,6 +50,15 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+    ],
+  },
 ];
 
 export { routingTable };

src/styles/common-error-styles.scss

@@ -1,10 +1,31 @@
 .has-error {
-  .list-button,
+  &.list-button,
-  .list-card,
+  &.list-card,
-  .list-button-horizontal {
+  &.list-button-horizontal {
     color: $red;
     label {
       border: 1px solid $red;
     }
   }
 }
+
+.form-test-error {
+  color: $red;
+  font-weight: bold;
+}
+
+.form-test-invalid {
+  &.btn.btn-primary {
+    color: $gray;
+    background: $gray-200;
+    cursor: default;
+  }
+  &.btn.btn-primary:hover,
+  &.btn.btn-primary:focus,
+  &.btn.btn-primary:focus-visible {
+    color: $gray;
+    background: $gray-200;
+    box-shadow: none;
+  }
+
+}

src/styles/common-styles.scss

@@ -9,6 +9,11 @@ body {
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
+    &.make-tall {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
   }
   .pointer {
     cursor: pointer;

src/ux-components/button-main/button-main.vue

@@ -1,5 +1,10 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
+  <button
+    :aria-disabled="isDisabled"
+    class="btn d-flex align-items-center py-3 px-2"
+    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
+    @click="clicked()"
+  >
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"
@@ -21,7 +26,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
-    isFloat: Boolean
+    isFloat: Boolean,
   },
   data() {
     return {
@@ -30,8 +35,10 @@ export default {
   },
   methods: {
     clicked() {
-      this.isLoaderDisplayed = true;
+      if (!this.isDisabled) {
-      this.$emit("click-event");
+        this.isLoaderDisplayed = true;
+        this.$emit("click-event");
+      }
     },
   },
   components: {

src/ux-components/checkbox/checkbox.vue

@@ -44,12 +44,15 @@ export default {
     + label {
       display: block;
       position: relative;
+      &:hover {
+        cursor: pointer;
+      }
     }
     + label::before {
       content: "";
       position: relative;
       display: inline-block;
-      margin-right: 10px;
+      margin-right: 8px;
       width: 16px;
       height: 16px;
       background: white;
@@ -71,7 +74,7 @@ export default {
       transform: rotate(-45deg);
     }
     &:hover + label::before {
-      box-shadow: 0 0 0 4px $blue-100;
+      box-shadow: 0 0 0 4px $blue-300;
     }
     &:focus + label::before {
       box-shadow: 0 0 0 2px $blue;

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -153,7 +153,7 @@ export default {
     width: 100%;
     color: $gray-600;
     &:hover {
-      box-shadow: 0 0 0 4px $blue-100;
+      box-shadow: 0 0 0 4px $blue-300;
       cursor: pointer;
       z-index: 2;
     }

src/ux-components/list-button/list-button.vue

@@ -162,7 +162,7 @@ export default {
 
     &:hover {
       @include media-breakpoint-up(sm) {
-        box-shadow: 0 0 0 4px $blue-100;
+        box-shadow: 0 0 0 4px $blue-300;
       }
       cursor: pointer;
     }

src/ux-components/list-card/list-card.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="'col' + colLength">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100"
+    <div 
-    :class="isWide ? 'horizontal' : ''"
+      class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-    @mouseup="handleChange(value)"
+      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
-    @keyup.space="handleChange(value)">
+    >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
         :id="buttonID"
@@ -11,9 +11,10 @@
         :value="buttonID"
         :aria-required="isRequired"
         :data-focus-target="groupName"
+        @click="handleChange(value)"
         v-model="checkValue"
         @change="handleCheckChange"
-       />
+      />
       <label
         :for="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"
@@ -24,7 +25,7 @@
           :class="!isWide ? 'order-1' : 'ms-auto order-3'"
           :src="buttonImage"
           :alt="altText"
-         />
+        />
         <p
           v-if="!isWide"
           class="small order-3"
@@ -32,12 +33,12 @@
         >
           {{buttonLabel}}
         </p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
           {{buttonLabelSubCopy}}
         </p>
         <div v-if="isWide" class="order-2">
           <p class="m-0 small">{{ buttonLabel }}</p>
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
+          <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
             {{ buttonLabelSubCopy }}
           </p>
         </div>
@@ -47,7 +48,6 @@
 </template>
 
 <script>
-import { toRefs } from "vue";
 import { useField } from "vee-validate";
 
 export default {
@@ -71,6 +71,7 @@ export default {
       default: "",
     },
     colLength: String,
+    validationRules: String,
     selectedButtonIDs: [Array, String],
   },
   data(){
@@ -105,15 +106,20 @@ export default {
     }
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange } = useField(groupName, undefined, {
+
+    const { 
+        value: inputValue,
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules, 
+    {
       type: inputType,
-      checkedValue: value,
+      checkedValue: props.value,
     });
     return {
-      checked,
       handleChange,
+      errors,
     };
   },
 };
@@ -131,9 +137,10 @@ export default {
     height: auto;
     width: 6.5rem;
     margin-bottom: 3rem;
+    max-width: 100%;
   }
   &:hover {
-    box-shadow: 0px 0px 0px 6px $blue-100;
+    box-shadow: 0px 0px 0px 4px $blue-300;
     border: 1px solid transparent;
   }
   input[type="checkbox"],
@@ -149,6 +156,9 @@ export default {
       }
       p {
         text-align: center;
+        &.sub-copy {
+          color: $gray-550;
+        }
       }
     }
     &:focus + label {
@@ -236,6 +246,9 @@ export default {
         }
         p {
           text-align: left;
+          &.sub-copy {
+            color: $gray-550;
+          }
         }
       }
     }

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

@@ -0,0 +1,63 @@
+import { shallowMount } from "@vue/test-utils";
+import radio from "./radio";
+import { nextTick } from "vue";
+
+describe("radio.vue", () => {
+  it("Should return group name", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        groupName: "radio-button-test",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().name).toEqual("radio-button-test");
+  });
+
+  it("Should return checkbox id", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonID: "Radio ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("Radio ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "label text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+
+    expect(paragraph.text()).toEqual("label text");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        screenReaderOnlyText: "screenreader text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span");
+
+    expect(paragraph.text()).toEqual("screenreader text");
+  });
+});

src/ux-components/radio/radio.vue

@@ -0,0 +1,138 @@
+<template>
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
+  <div class="ui-radio d-flex">
+    <input
+    type="radio"
+    aria-checked="false"
+    :name="groupName"
+    :id="buttonID"
+    :aria-required="isRequired"
+    :value="value"
+    :v-model="checkValue"
+    @change="handleCheckChanged"
+    />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{
+        screenReaderOnlyText
+      }}</span>
+    </label>
+  </div>
+</template>
+
+<script>
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
+export default {
+  name: "radio",
+  props: {
+    groupName: String,
+    buttonLabel: String,
+    buttonID: String,
+    isRequired: Boolean,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    screenReaderOnlyText: String,
+  },
+  data() {
+    return {
+      checkValue: Boolean,
+    };
+  },
+  created(){
+    if(this.selectedButtonIDs){
+      this.checkValue = this.selectedButtonIDs[0];
+    }
+  },
+  methods: {
+    handleClick(value) {
+      this.handleChange(value);
+    },
+    handleCheckChange(newValue, oldValue){
+      const isInitialization = typeof(oldValue) === 'function';
+      if (!isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+      }
+    }
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const { checked, handleChange, errorMessage } = useField(
+      groupName,
+      undefined,
+      {
+        type: "radio",
+        checkedValue: value,
+      }
+    );
+    return {
+      checked,
+      handleChange,
+      errorMessage,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.ui-radio {
+  position: relative;
+  input[type="radio"] {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    + label {
+      display: block;
+      position: relative;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    + label::before {
+      content: "";
+      position: relative;
+      display: inline-block;
+      margin-right: 8px;
+      width: 16px;
+      height: 16px;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 50%;
+    }
+    &:checked + label::before {
+      background: $white;
+      border: 1px solid $blue;
+    }
+    &:checked + label::after {
+      content: "";
+      position: absolute;
+      top: 8px;
+      left: 3px;
+      height: 6px;
+      width: 6px;
+      transform: rotate(-45deg);
+      border: 5px solid $blue;
+      border-radius: 50%;
+    }
+    &:hover + label::before {
+      box-shadow: 0 0 0 4px $blue-300;
+    }
+    &:focus + label::before {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus:checked + label::before {
+      box-shadow: 0 0 0 2px transparent;
+    }
+    &:disabled + label {
+      color: $gray-200;
+    }
+    &:disabled + label::before {
+      background: $gray-200;
+    }
+  }
+}
+</style>

src/ux-components/text-link/text-link.vue

@@ -13,11 +13,10 @@ export default {
     text: String,
     href: {
       type: String,
-      default: `javascript:void(0)`, //Prevents page jump when value is empty or #
     },
   },
   methods: {
-    handleClick() {
+    handleClick(event) {
       this.$emit("click-event");
     },
   },