From 549a8b359319b32217ab348ce226e04f39f1596f Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 7 Jan 2022 16:00:34 -0500
Subject: [PATCH 01/21] CSR-254: create form-test page and begin testing
 validation

---
 package.json                                  |   1 +
 src/layouts/form-test/form-test.vue           | 162 ++++++++++++++++++
 src/router/index.js                           |   6 +
 .../list-button-horizontal.vue                |  60 ++++++-
 src/ux-components/list-card/list-card.vue     | 104 +++++++++--
 5 files changed, 317 insertions(+), 16 deletions(-)
 create mode 100644 src/layouts/form-test/form-test.vue

diff --git a/package.json b/package.json
index 58b8837dd..50a9b5760 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
     "jest-junit": "^13.0.0",
+    "vee-validate": "^4.5.7",
     "vue": "^3.0.0",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
new file mode 100644
index 000000000..96bc9bd33
--- /dev/null
+++ b/src/layouts/form-test/form-test.vue
@@ -0,0 +1,162 @@
+<template>
+<Form :validation-schema="schema" @submit="onSubmit" v-slot="{values}">
+  <div class="row px-3">
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <h6 class="mx-2 my-0">How many chips are we repairing?</h6>
+    <div role="radiogroup" aria-labelledby="demo-group" class="d-flex flex-row p-0">
+      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+      <h3 class="sr-only" id="demo-group">
+        How many chips are we repairing?
+      </h3>
+      <listButtonHorizontal
+      groupName="demo"
+      ariaLabelBy="vehicle-model"
+      buttonID="1"
+      value="1"
+      buttonLabelSubCopy=""
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      v-bind:totalInGroup="3"
+      v-bind:positionInGroup="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButtonHorizontal
+      groupName="demo"
+      ariaLabelBy="vehicle-model"
+      buttonID="2"
+      value="2"
+      buttonLabelSubCopy=""
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      v-bind:totalInGroup="3"
+      v-bind:positionInGroup="2"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButtonHorizontal
+      groupName="demo"
+      ariaLabelBy="vehicle-model"
+      buttonID="3"
+      value="3"
+      buttonLabelSubCopy=""
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      v-bind:totalInGroup="3"
+      v-bind:positionInGroup="3"
+      screenReaderOnlyText=" opens new window"
+      />
+    </div>
+    <div class="row px-3">
+      <error-message name="demo"></error-message>
+    </div>
+  </div>
+
+  <div class="row g-2">
+    <div class="col">
+      <h6 class="mx-2 my-4">Which windshield part needs fixed?</h6>
+      <fieldset>
+        <legend class="sr-only">Which windshield part needs fixed?</legend>
+        <listCard
+        isMultiSelectHorizontal
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Single Windshield"
+        value="Single Windshield"
+        altText=""
+        buttonID="List Card Horizontal Checkbox a"
+        groupName="demo2"
+        />
+        <listCard
+        isMultiSelectHorizontal
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Driver Side"
+        value="Driver Side"
+        altText=""
+        buttonID="List Card Horizontal Checkbox b"
+        groupName="demo2"
+        />
+        <listCard
+        isMultiSelectHorizontal
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Passenger Side"
+        value="Passenger Side"
+        altText=""
+        buttonID="List Card Horizontal Checkbox c"
+        groupName="demo2"
+        />
+      </fieldset>
+    </div>
+    <div class="row px-3">
+      <error-message name="demo2"></error-message>
+    </div>
+  </div>
+  
+  <div class="g-2 mx-2 my-4">
+    <button>Get your estimate</button>
+    <p>Values</p>
+    <pre>{{ values }}</pre>
+  </div>
+
+</Form>
+</template>
+
+<script>
+
+import { Form, ErrorMessage } from 'vee-validate';
+
+
+import buttonPrimary from "@/ux-components/button-primary/button-primary";
+import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
+import buttonBack from "@/common-components/button-back/button-back";
+import listCard from "@/ux-components/list-card/list-card";
+import listButton from "@/ux-components/list-button/list-button";
+import alert from "@/ux-components/alert/alert";
+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";
+export default {
+  name: "App",
+  data() {
+    return {
+      schema: { // VALIDATION SETUP
+        demo: (value) => {
+          if (value && value.length > 0) {
+            return true;
+          }
+          return 'Please select chip(s)';
+        },
+        demo2: (value) => {
+          if (value && value.length > 0) {
+            return true;
+          }
+          return 'Please select a windshield part';
+        }
+      }
+    }
+  },
+  components: {
+    // buttonPrimary,
+    // buttonSecondary,
+    // buttonBack,
+    listCard,
+    // listButton,
+    // alert,
+    // vehicleBanner,
+    listButtonHorizontal,
+    Form,
+    ErrorMessage,
+    // checkbox,
+    // funnelHeader,
+  },
+  methods: {
+    onSubmit(values) {
+      console.log('submitted: ', JSON.stringify(values, null ,2));
+    },
+  },
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index c135d60c1..2f4f0daad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
+import FormTest from "@/layouts/form-test/form-test.vue";
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
@@ -17,6 +18,11 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
+  {
+    path: "/form-test", // This is a temporary route for testing.
+    name: "FormTest",
+    component: FormTest,
+  },
   {
     path: "/",
     beforeEnter(to, from, next) {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 97642d2c1..ef5632b5a 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,16 +2,46 @@
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <input
+      type="checkbox"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      @keyup.space="handleClick(value)"
+      @click="handleClick(value)"
+    />
+    <label
+      tabindex="-1"
+      aria-checked="false"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
+      class="d-flex flex-column justify-content-center py-3 px-4"
+      :class="isFirstOrLastButton"
+    >
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
   </label>
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick()" @click="handleClick()" />
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <input
+      type="radio"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      aria-required="true"
+      @keyup.space="handleClick(value)"
+      @click="handleClick(value)"
+    />
+    <label
+      tabindex="-1"
+      aria-checked="false"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
+      class="d-flex flex-column justify-content-center py-3 px-4"
+      :class="isFirstOrLastButton"
+    >
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@@ -21,6 +51,8 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
 import loader from "@/ux-components/loader/loader";
 
 export default {
@@ -39,9 +71,14 @@ export default {
     totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
     positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
     isRequired: Boolean,
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
   },
   data() {
     return {
+      hasError: false,
       isLoaderDisplayed: false,
     };
   },
@@ -49,8 +86,9 @@ export default {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
-    handleClick() {
+    handleClick(value) {
       this.loaderEnabled && this.displayLoader();
+      this.handleChange(value);
     }
   },
   components: {
@@ -67,6 +105,18 @@ export default {
       return className;
     },
   },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange } = useField(groupName, undefined, {
+      type: inputType,
+      checkedValue: value
+    });
+    return {
+      checked,
+      handleChange,
+    };
+  },
 };
 </script>
 
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 68b1c80b0..6d06651f4 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,24 +1,61 @@
 <template>
   <!-- Heavily documented below -->
   <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+    <input
+      type="checkbox"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonLabel"
+      :aria-required="isRequired"
+      @keyup.space="handleChange(value)"
+      @click="handleChange(value)"
+    />
+    <label
+      :for="buttonID"
+      class="d-flex flex-column w-100 align-items-center pt-4 pb-2"
+      tabindex="1"
+    >
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
       <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
   <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+    <input
+      type="radio"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired" 
+      @keyup.space="handleChange(value)"
+      @click="handleChange(value)"
+    />
+    <label
+      :for="buttonID"
+      class="d-flex flex-column w-100 align-items-center pt-4 pb-2"
+      tabindex="1"
+    >
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
       <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
   <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
+    <input
+      type="checkbox"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonLabel"
+      :aria-required="isRequired"
+      @keyup.space="handleChange(value)"
+      @click="handleChange(value)"
+    />
+    <label
+      :for="buttonID"
+      class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8"
+      tabindex="1"
+      :class="{'checkboxTop': buttonLabelSubCopy}"
+    >
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
@@ -27,8 +64,21 @@
     </label>
   </div>
   <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
+    <input
+      type="radio"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonLabel"
+      :aria-required="isRequired"
+      @keyup.space="handleChange(value)"
+      @click="handleChange(value)"
+    />
+    <label
+      :for="buttonID"
+      class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8"
+      tabindex="1"
+      :class="{'checkboxTop': buttonLabelSubCopy}"
+    >
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
@@ -39,6 +89,9 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
+
 export default {
   name: "listCard",
   props: {
@@ -53,9 +106,38 @@ export default {
     isRequired: Boolean, //Required: is aria-required required or not?
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
     buttonID: String,//Required: Unique
-    groupName: String,//Required: Unique
-    buttonLabelSubCopy: String,//Optional: sub tex
-  }
+    groupName: String,//Rquired: Unique
+    buttonLabelSubCopy: String,//Optional: sub text
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
+      if (props.isMultiSelect) {
+        return "checkbox";
+      } else if (props.isRadio) {
+        return "radio";
+      } else if (props.isMultiSelectHorizontal) {
+        return "checkbox";
+      } else if (props.isRadioHorizontal) {
+        return "radio";
+      }
+    }
+    
+    props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange } = useField(groupName, undefined, {
+      type: inputType(),
+      checkedValue: value,
+    });
+
+    return {
+      checked,
+      handleChange,
+    };
+  },
 };
 </script>
 

From 42d2d6334bccf0ef18158aaf6e8ff547b1fbaa4b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 10 Jan 2022 17:38:32 -0500
Subject: [PATCH 02/21] CSR-254: add generic textInput component and add
 validation on form-test

---
 .../text-input/text-input.spec.js             | 38 ++++++++++
 .../text-input/text-input.vue                 | 70 +++++++++++++++++++
 src/layouts/form-test/form-test.vue           | 46 +++++++++---
 .../list-button-horizontal.vue                |  2 +-
 4 files changed, 147 insertions(+), 9 deletions(-)
 create mode 100644 src/common-components/text-input/text-input.spec.js
 create mode 100644 src/common-components/text-input/text-input.vue

diff --git a/src/common-components/text-input/text-input.spec.js b/src/common-components/text-input/text-input.spec.js
new file mode 100644
index 000000000..fcb08d57a
--- /dev/null
+++ b/src/common-components/text-input/text-input.spec.js
@@ -0,0 +1,38 @@
+import { shallowMount } from "@vue/test-utils";
+import textInput from "./text-input";
+
+describe("text-input.vue", () => {
+
+  it("Should render a text input", async () => {
+    // Act
+    const wrapper = shallowMount(textInput, {
+      propsData: {
+        name: "test",
+        label: "unit test label",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.exists()).toBe(true);
+  });
+
+  it("Should return aria-required state", async () => {
+    // Act
+    const wrapper = shallowMount(textInput, {
+      propsData: {
+        name: "test",
+        label: "unit test label",
+        isRequired: true
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes()["aria-required"]).toEqual("true");
+
+  });
+
+});
\ No newline at end of file
diff --git a/src/common-components/text-input/text-input.vue b/src/common-components/text-input/text-input.vue
new file mode 100644
index 000000000..50096a52f
--- /dev/null
+++ b/src/common-components/text-input/text-input.vue
@@ -0,0 +1,70 @@
+<!-- Simple implementation of an input field -->
+<template>
+  <div class="d-flex w-50 mb-2">
+    <input
+      type="text"
+      :name="name"
+      :value="inputValue"
+      :id="name"
+      :aria-required="isRequired"
+      @input="handleChange"
+      @blur="handleBlur"
+    />
+    <label
+      :for="name"
+      :aria-labelledby="name"
+      class="d-flex justify-content-center py-3 px-4"
+    >
+      <span class="m-0">{{label}}</span>
+    </label>
+  </div>
+  <div v-show="errorMessage" class="row px-3 form-test-error">
+    {{ errorMessage }}
+  </div>
+</template>
+
+<script>
+import { useField } from 'vee-validate';
+
+export default {
+  name: "textInput",
+  props: {
+    type: {
+      type: String,
+      default: "text",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    isRequired: Boolean,
+  },
+  setup(props) {
+    const { 
+        value: inputValue,
+        errorMessage,
+        handleBlur,
+        handleChange,
+        meta, 
+    } = useField(props.name, undefined, {
+        initialValue: props.value,
+    });
+    
+    return {
+      handleChange,
+      handleBlur,
+      errorMessage,
+      inputValue,
+      meta,
+    };
+  },
+};
+</script>
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 96bc9bd33..4d0ef09bd 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -1,8 +1,8 @@
 <template>
 <Form :validation-schema="schema" @submit="onSubmit" v-slot="{values}">
-  <div class="row px-3">
+  <div class="row px-3 mt-4">
     <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-    <h6 class="mx-2 my-0">How many chips are we repairing?</h6>
+    <h3 class="mx-2 mt-4 mb-0">How many chips are we repairing?</h3>
     <div role="radiogroup" aria-labelledby="demo-group" class="d-flex flex-row p-0">
       <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
       <h3 class="sr-only" id="demo-group">
@@ -51,14 +51,14 @@
       screenReaderOnlyText=" opens new window"
       />
     </div>
-    <div class="row px-3">
+    <div class="row px-3 form-test-error">
       <error-message name="demo"></error-message>
     </div>
   </div>
 
-  <div class="row g-2">
+  <div class="row g-2 mt-4">
     <div class="col">
-      <h6 class="mx-2 my-4">Which windshield part needs fixed?</h6>
+      <h3 class="mx-2 mt-4 mb-0">Which windshield part needs fixed?</h3>
       <fieldset>
         <legend class="sr-only">Which windshield part needs fixed?</legend>
         <listCard
@@ -90,12 +90,25 @@
         />
       </fieldset>
     </div>
-    <div class="row px-3">
+    <div class="row px-3 form-test-error">
       <error-message name="demo2"></error-message>
     </div>
   </div>
+
+  <div class="row g-2 mt-4">
+    <div class="col">
+      <h3 class="mx-2 mt-4 mb-0">Enter your VIN</h3>
+      <textInput
+        name="demo3"
+        type="text"
+        label="VIN (Required)"
+        :isRequired="true"
+        />
+    </div>
+    <!-- Here, the error block is included in the component level textInput -->
+  </div>
   
-  <div class="g-2 mx-2 my-4">
+  <div class="g-2 mx-2 mt-6">
     <button>Get your estimate</button>
     <p>Values</p>
     <pre>{{ values }}</pre>
@@ -113,12 +126,15 @@ import buttonPrimary from "@/ux-components/button-primary/button-primary";
 import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
 import buttonBack from "@/common-components/button-back/button-back";
 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 alert from "@/ux-components/alert/alert";
 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 { useField } from 'vee-validate';
+
 export default {
   name: "App",
   data() {
@@ -135,7 +151,13 @@ export default {
             return true;
           }
           return 'Please select a windshield part';
-        }
+        },
+        demo3: (value) => {
+          if (value && value.length > 0) {
+            return true;
+          }
+          return 'Invalid VIN. Please enter X, Y, Z...';
+        },
       }
     }
   },
@@ -148,6 +170,7 @@ export default {
     // alert,
     // vehicleBanner,
     listButtonHorizontal,
+    textInput,
     Form,
     ErrorMessage,
     // checkbox,
@@ -160,3 +183,10 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+  .form-test-error {
+    color: red;
+    font-weight: bold;
+  }
+</style>
\ No newline at end of file
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index ef5632b5a..52ecc87e3 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -22,7 +22,7 @@
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-  </label>
+    </label>
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input

From 3c10f75b670fff86e50d5fb85c99e4115166f63b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 11 Jan 2022 14:32:57 -0500
Subject: [PATCH 03/21] CSR-254: grey out button if not validated

---
 src/layouts/form-test/form-test.vue | 144 ++++++++++++++++------------
 1 file changed, 83 insertions(+), 61 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 4d0ef09bd..778e796ed 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -1,5 +1,5 @@
 <template>
-<Form :validation-schema="schema" @submit="onSubmit" v-slot="{values}">
+<Form :validation-schema="schema" @submit="onSubmit" v-slot="{ values, meta }">
   <div class="row px-3 mt-4">
     <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
     <h3 class="mx-2 mt-4 mb-0">How many chips are we repairing?</h3>
@@ -9,46 +9,46 @@
         How many chips are we repairing?
       </h3>
       <listButtonHorizontal
-      groupName="demo"
-      ariaLabelBy="vehicle-model"
-      buttonID="1"
-      value="1"
-      buttonLabelSubCopy=""
-      textPosition="text-center"
-      loaderColor="blue"
-      loaderPosition="right"
-      sizeInRem="1"
-      v-bind:totalInGroup="3"
-      v-bind:positionInGroup="1"
-      screenReaderOnlyText=" opens new window"
+        groupName="demo"
+        ariaLabelBy="vehicle-model"
+        buttonID="1"
+        value="1"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="1"
+        screenReaderOnlyText=" opens new window"
       />
       <listButtonHorizontal
-      groupName="demo"
-      ariaLabelBy="vehicle-model"
-      buttonID="2"
-      value="2"
-      buttonLabelSubCopy=""
-      textPosition="text-center"
-      loaderColor="blue"
-      loaderPosition="right"
-      sizeInRem="1"
-      v-bind:totalInGroup="3"
-      v-bind:positionInGroup="2"
-      screenReaderOnlyText=" opens new window"
+        groupName="demo"
+        ariaLabelBy="vehicle-model"
+        buttonID="2"
+        value="2"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="2"
+        screenReaderOnlyText=" opens new window"
       />
       <listButtonHorizontal
-      groupName="demo"
-      ariaLabelBy="vehicle-model"
-      buttonID="3"
-      value="3"
-      buttonLabelSubCopy=""
-      textPosition="text-center"
-      loaderColor="blue"
-      loaderPosition="right"
-      sizeInRem="1"
-      v-bind:totalInGroup="3"
-      v-bind:positionInGroup="3"
-      screenReaderOnlyText=" opens new window"
+        groupName="demo"
+        ariaLabelBy="vehicle-model"
+        buttonID="3"
+        value="3"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="3"
+        screenReaderOnlyText=" opens new window"
       />
     </div>
     <div class="row px-3 form-test-error">
@@ -62,31 +62,31 @@
       <fieldset>
         <legend class="sr-only">Which windshield part needs fixed?</legend>
         <listCard
-        isMultiSelectHorizontal
-        buttonImage="windshield-damage.svg"
-        buttonLabel="Single Windshield"
-        value="Single Windshield"
-        altText=""
-        buttonID="List Card Horizontal Checkbox a"
-        groupName="demo2"
+          isMultiSelectHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Single Windshield"
+          value="Single Windshield"
+          altText=""
+          buttonID="List Card Horizontal Checkbox a"
+          groupName="demo2"
         />
         <listCard
-        isMultiSelectHorizontal
-        buttonImage="windshield-damage.svg"
-        buttonLabel="Driver Side"
-        value="Driver Side"
-        altText=""
-        buttonID="List Card Horizontal Checkbox b"
-        groupName="demo2"
+          isMultiSelectHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Driver Side"
+          value="Driver Side"
+          altText=""
+          buttonID="List Card Horizontal Checkbox b"
+          groupName="demo2"
         />
         <listCard
-        isMultiSelectHorizontal
-        buttonImage="windshield-damage.svg"
-        buttonLabel="Passenger Side"
-        value="Passenger Side"
-        altText=""
-        buttonID="List Card Horizontal Checkbox c"
-        groupName="demo2"
+          isMultiSelectHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Passenger Side"
+          value="Passenger Side"
+          altText=""
+          buttonID="List Card Horizontal Checkbox c"
+          groupName="demo2"
         />
       </fieldset>
     </div>
@@ -103,15 +103,29 @@
         type="text"
         label="VIN (Required)"
         :isRequired="true"
-        />
+      />
+    </div>
+    <!-- Here, the error block is included in the component level textInput -->
+  </div>
+
+  <div class="row g-2 mt-4">
+    <div class="col">
+      <h3 class="mx-2 mt-4 mb-0">Optional field</h3>
+      <textInput
+        name="demo4"
+        type="text"
+        label="Optional field (Not Required)"
+      />
     </div>
     <!-- Here, the error block is included in the component level textInput -->
   </div>
   
   <div class="g-2 mx-2 mt-6">
-    <button>Get your estimate</button>
-    <p>Values</p>
+    <button :class="!meta.valid && 'form-test-invalid'">Get your estimate</button>
+    <p>Values:</p>
     <pre>{{ values }}</pre>
+    <p>Meta.valid:</p>
+    <pre>{{ meta.valid }}</pre>
   </div>
 
 </Form>
@@ -180,6 +194,11 @@ export default {
     onSubmit(values) {
       console.log('submitted: ', JSON.stringify(values, null ,2));
     },
+    // onInvalidSubmit({ values, errors, results }) {
+    //   console.log("values: ", values);
+    //   console.log("errors: ", errors);
+    //   console.log("results: ", results);
+    // }
   },
 };
 </script>
@@ -189,4 +208,7 @@ export default {
     color: red;
     font-weight: bold;
   }
+  .form-test-invalid {
+    opacity: 0.5;
+  }
 </style>
\ No newline at end of file

From 349c59b7dddf130602c0eb06e1f6d70479544267 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 13 Jan 2022 15:58:19 -0500
Subject: [PATCH 04/21] CSR-254: Implement final stages of form test

---
 package.json                                  |   3 +-
 .../text-input/text-input.vue                 |   3 +-
 src/layouts/form-test/form-test.vue           | 279 +++++++++++++-----
 .../list-button-horizontal.vue                |  19 +-
 src/ux-components/list-card/list-card.vue     |  10 +-
 5 files changed, 229 insertions(+), 85 deletions(-)

diff --git a/package.json b/package.json
index 50a9b5760..0b37dcc0f 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "vue": "^3.0.0",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^4.1.0",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/common-components/text-input/text-input.vue b/src/common-components/text-input/text-input.vue
index 50096a52f..e8d63f9e4 100644
--- a/src/common-components/text-input/text-input.vue
+++ b/src/common-components/text-input/text-input.vue
@@ -1,6 +1,6 @@
 <!-- Simple implementation of an input field -->
 <template>
-  <div class="d-flex w-50 mb-2">
+  <div class="d-flex w-50 mb-2" :class="{ 'has-error': !!errorMessage }">
     <input
       type="text"
       :name="name"
@@ -9,6 +9,7 @@
       :aria-required="isRequired"
       @input="handleChange"
       @blur="handleBlur"
+      :data-focus-target="name"
     />
     <label
       :for="name"
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 778e796ed..e263d91b2 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -1,16 +1,26 @@
 <template>
-<Form :validation-schema="schema" @submit="onSubmit" v-slot="{ values, meta }">
-  <div class="row px-3 mt-4">
-    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-    <h3 class="mx-2 mt-4 mb-0">How many chips are we repairing?</h3>
-    <div role="radiogroup" aria-labelledby="demo-group" class="d-flex flex-row p-0">
-      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-      <h3 class="sr-only" id="demo-group">
+<Form
+  :validation-schema="schema"
+  @submit="onSubmit"
+  @invalid-submit="onInvalidSubmit"
+  v-slot="{ values, meta }"
+>
+  <div class="row g-2 mt-6 mx-4">
+    <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
+  </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>
+    <div
+      role="radiogroup"
+      aria-labelledby="demo-group"
+      class="d-flex flex-row p-0"
+    >
+      <h4 class="sr-only" id="demo-group">
         How many chips are we repairing?
-      </h3>
+      </h4>
       <listButtonHorizontal
         groupName="demo"
-        ariaLabelBy="vehicle-model"
         buttonID="1"
         value="1"
         buttonLabelSubCopy=""
@@ -18,13 +28,12 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="1"
+        :totalInGroup="3"
+        :positionInGroup="1"
         screenReaderOnlyText=" opens new window"
       />
       <listButtonHorizontal
         groupName="demo"
-        ariaLabelBy="vehicle-model"
         buttonID="2"
         value="2"
         buttonLabelSubCopy=""
@@ -32,13 +41,12 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="2"
+        :totalInGroup="3"
+        :positionInGroup="2"
         screenReaderOnlyText=" opens new window"
       />
       <listButtonHorizontal
         groupName="demo"
-        ariaLabelBy="vehicle-model"
         buttonID="3"
         value="3"
         buttonLabelSubCopy=""
@@ -46,8 +54,8 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="3"
+        :totalInGroup="3"
+        :positionInGroup="3"
         screenReaderOnlyText=" opens new window"
       />
     </div>
@@ -56,9 +64,9 @@
     </div>
   </div>
 
-  <div class="row g-2 mt-4">
+  <div class="row g-2 mt-6 mx-4">
     <div class="col">
-      <h3 class="mx-2 mt-4 mb-0">Which windshield part needs fixed?</h3>
+      <h4 class="mx-2 mt-4 mb-0">Which windshield part needs fixed? (Required)</h4>
       <fieldset>
         <legend class="sr-only">Which windshield part needs fixed?</legend>
         <listCard
@@ -95,9 +103,9 @@
     </div>
   </div>
 
-  <div class="row g-2 mt-4">
+  <div class="row g-2 mt-6 mx-4">
     <div class="col">
-      <h3 class="mx-2 mt-4 mb-0">Enter your VIN</h3>
+      <h4 class="mx-2 mt-4 mb-0">demo3: Enter your VIN (Required)</h4>
       <textInput
         name="demo3"
         type="text"
@@ -105,26 +113,134 @@
         :isRequired="true"
       />
     </div>
-    <!-- Here, the error block is included in the component level textInput -->
   </div>
 
-  <div class="row g-2 mt-4">
+  <div class="row g-2 mt-6 mx-4">
     <div class="col">
-      <h3 class="mx-2 mt-4 mb-0">Optional field</h3>
+      <h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
       <textInput
         name="demo4"
         type="text"
-        label="Optional field (Not Required)"
+        label="Numbers Only"
+        :isRequired="true"
       />
     </div>
-    <!-- Here, the error block is included in the component level textInput -->
   </div>
-  
-  <div class="g-2 mx-2 mt-6">
-    <button :class="!meta.valid && 'form-test-invalid'">Get your estimate</button>
-    <p>Values:</p>
+
+  <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
+      role="radiogroup"
+      aria-labelledby="demo-group"
+      class="d-flex flex-row p-0"
+    >
+      <h4 class="sr-only" id="demo-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.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="demo-group"
+      class="d-flex flex-row p-0"
+    >
+      <h4 class="sr-only" id="demo-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>Meta.valid:</p>
+    <p>Is Form Valid? (Meta.valid):</p>
     <pre>{{ meta.valid }}</pre>
   </div>
 
@@ -134,71 +250,87 @@
 <script>
 
 import { Form, ErrorMessage } from 'vee-validate';
+import * as Yup from "yup";
 
-
-import buttonPrimary from "@/ux-components/button-primary/button-primary";
-import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
-import buttonBack from "@/common-components/button-back/button-back";
 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 alert from "@/ux-components/alert/alert";
-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 { useField } from 'vee-validate';
 
 export default {
   name: "App",
   data() {
     return {
-      schema: { // VALIDATION SETUP
-        demo: (value) => {
-          if (value && value.length > 0) {
+      schema: Yup.object().shape({
+        demo: Yup.string().required('Please select chip(s)'),
+        demo2: Yup.array().required('Please select a windshield part'),
+        demo3: Yup.string().required('Invalid VIN. Please enter X, Y, Z...'),
+        demo4: Yup.string().matches('^[0-9]*$', 'Invalid Entry. Must enter only numbers, no letters.'),
+        demo5: Yup.array().required('Please select damage location'),
+        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 'Please select chip(s)';
-        },
-        demo2: (value) => {
-          if (value && value.length > 0) {
-            return true;
-          }
-          return 'Please select a windshield part';
-        },
-        demo3: (value) => {
-          if (value && value.length > 0) {
-            return true;
-          }
-          return 'Invalid VIN. Please enter X, Y, Z...';
-        },
+          return true;
+        }),
       }
-    }
   },
   components: {
-    // buttonPrimary,
-    // buttonSecondary,
-    // buttonBack,
     listCard,
-    // listButton,
-    // alert,
-    // vehicleBanner,
     listButtonHorizontal,
     textInput,
     Form,
     ErrorMessage,
-    // checkbox,
-    // funnelHeader,
   },
   methods: {
     onSubmit(values) {
+      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
       console.log('submitted: ', JSON.stringify(values, null ,2));
     },
-    // onInvalidSubmit({ values, errors, results }) {
-    //   console.log("values: ", values);
-    //   console.log("errors: ", errors);
-    //   console.log("results: ", results);
-    // }
+    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
+      const errorEls = Object.keys(errors).sort();
+      const firstErrorEl = errorEls[0];
+      console.log('firstErrorEl: ', firstErrorEl);
+      if (firstErrorEl) {
+        const qsString = "[data-focus-target='" + firstErrorEl + "']";
+        document.querySelector(qsString).focus();
+      }
+    }
   },
 };
 </script>
@@ -211,4 +343,7 @@ export default {
   .form-test-invalid {
     opacity: 0.5;
   }
+  .has-error {
+    border: 1px solid red;
+  }
 </style>
\ No newline at end of file
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 52ecc87e3..8baa430c8 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,14 +1,16 @@
 <!-- See the component-test.vue page for example implementation -->
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
-  <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
+  <div
+    v-if="isMultiSelect"
+    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+  >
     <input
       type="checkbox"
       :id="buttonID"
       :name="groupName"
       :value="buttonID"
       :aria-required="isRequired"
-      @keyup.space="handleClick(value)"
       @click="handleClick(value)"
     />
     <label
@@ -18,21 +20,25 @@
       :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
       :class="isFirstOrLastButton"
+      :data-focus-target="groupName"
     >
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
     </label>
   </div>
-  <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
+  <div
+    v-else
+    class="col list-group list-button-horizontal d-flex flex-column mb-2"
+  >
     <input
       type="radio"
       :id="buttonID"
       :name="groupName"
       :value="buttonID"
       aria-required="true"
-      @keyup.space="handleClick(value)"
       @click="handleClick(value)"
+      :data-focus-target="groupName"
     />
     <label
       tabindex="-1"
@@ -108,13 +114,14 @@ export default {
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange } = useField(groupName, undefined, {
+    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
       type: inputType,
       checkedValue: value
     });
     return {
       checked,
       handleChange,
+      errorMessage,
     };
   },
 };
@@ -125,8 +132,8 @@ export default {
   input[type="radio"],
   input[type="checkbox"] {
     opacity: 0;
-    position: fixed;
     width: 0;
+    height: 0;
     &:focus-visible + label {
       box-shadow: 0 0 0 2px $blue;
     }
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 6d06651f4..f623a1dbc 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -7,8 +7,8 @@
       :name="groupName"
       :value="buttonLabel"
       :aria-required="isRequired"
-      @keyup.space="handleChange(value)"
       @click="handleChange(value)"
+      :data-focus-target="groupName"
     />
     <label
       :for="buttonID"
@@ -27,8 +27,8 @@
       :name="groupName"
       :value="buttonID"
       :aria-required="isRequired" 
-      @keyup.space="handleChange(value)"
       @click="handleChange(value)"
+      :data-focus-target="groupName"
     />
     <label
       :for="buttonID"
@@ -47,8 +47,8 @@
       :name="groupName"
       :value="buttonLabel"
       :aria-required="isRequired"
-      @keyup.space="handleChange(value)"
       @click="handleChange(value)"
+      :data-focus-target="groupName"
     />
     <label
       :for="buttonID"
@@ -70,8 +70,8 @@
       :name="groupName"
       :value="buttonLabel"
       :aria-required="isRequired"
-      @keyup.space="handleChange(value)"
       @click="handleChange(value)"
+      :data-focus-target="groupName"
     />
     <label
       :for="buttonID"
@@ -159,8 +159,8 @@ export default {
   input[type='checkbox'],
   input[type="radio"] {
     opacity: 0;
-    position: fixed;
     width: 0;
+    height: 0;
     + label {
       display: block;
       position: relative;

From 5a8f2f4526904f6989507b97a8e79d51b69ca261 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 14 Jan 2022 10:11:19 -0500
Subject: [PATCH 05/21] CSR-254: additional tweaks

---
 src/layouts/form-test/form-test.vue             | 17 +++++++----------
 .../list-button-horizontal.vue                  |  5 +----
 src/ux-components/list-card/list-card.vue       |  8 ++++----
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index e263d91b2..98a65ee7e 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -21,12 +21,11 @@
       </h4>
       <listButtonHorizontal
         groupName="demo"
+        aria-required="true"
         buttonID="1"
         value="1"
         buttonLabelSubCopy=""
         textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
         sizeInRem="1"
         :totalInGroup="3"
         :positionInGroup="1"
@@ -34,12 +33,11 @@
       />
       <listButtonHorizontal
         groupName="demo"
+        aria-required="true"
         buttonID="2"
         value="2"
         buttonLabelSubCopy=""
         textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
         sizeInRem="1"
         :totalInGroup="3"
         :positionInGroup="2"
@@ -47,12 +45,11 @@
       />
       <listButtonHorizontal
         groupName="demo"
+        aria-required="true"
         buttonID="3"
         value="3"
         buttonLabelSubCopy=""
         textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
         sizeInRem="1"
         :totalInGroup="3"
         :positionInGroup="3"
@@ -131,10 +128,10 @@
     <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
     <div
       role="radiogroup"
-      aria-labelledby="demo-group"
+      aria-labelledby="demo5-group"
       class="d-flex flex-row p-0"
     >
-      <h4 class="sr-only" id="demo-group">
+      <h4 class="sr-only" id="demo5-group">
         Where's your damage?
       </h4>
       <listCard
@@ -175,10 +172,10 @@
     <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="demo-group"
+      aria-labelledby="demo6-group"
       class="d-flex flex-row p-0"
     >
-      <h4 class="sr-only" id="demo-group">
+      <h4 class="sr-only" id="demo6-group">
         What's your windshield damage?
       </h4>
       <listCard
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 8baa430c8..a2469905f 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -15,7 +15,6 @@
     />
     <label
       tabindex="-1"
-      aria-checked="false"
       :for="buttonID"
       :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
@@ -36,13 +35,12 @@
       :id="buttonID"
       :name="groupName"
       :value="buttonID"
-      aria-required="true"
+      :aria-required="isRequired"
       @click="handleClick(value)"
       :data-focus-target="groupName"
     />
     <label
       tabindex="-1"
-      aria-checked="false"
       :for="buttonID"
       :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
@@ -84,7 +82,6 @@ export default {
   },
   data() {
     return {
-      hasError: false,
       isLoaderDisplayed: false,
     };
   },
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index f623a1dbc..3efe5d1ff 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -13,7 +13,7 @@
     <label
       :for="buttonID"
       class="d-flex flex-column w-100 align-items-center pt-4 pb-2"
-      tabindex="1"
+      tabindex="-1"
     >
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
@@ -33,7 +33,7 @@
     <label
       :for="buttonID"
       class="d-flex flex-column w-100 align-items-center pt-4 pb-2"
-      tabindex="1"
+      tabindex="-1"
     >
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
@@ -53,7 +53,7 @@
     <label
       :for="buttonID"
       class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8"
-      tabindex="1"
+      tabindex="-1"
       :class="{'checkboxTop': buttonLabelSubCopy}"
     >
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -76,7 +76,7 @@
     <label
       :for="buttonID"
       class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8"
-      tabindex="1"
+      tabindex="-1"
       :class="{'checkboxTop': buttonLabelSubCopy}"
     >
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />

From 1958610b2bd4300e979a659c766aa4adefadc0d3 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 14 Jan 2022 16:41:03 -0500
Subject: [PATCH 06/21] CSR-254: fix data-target placement

---
 .../list-button-horizontal/list-button-horizontal.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 8391e8f35..5be79c49c 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -12,6 +12,7 @@
       :value="buttonID"
       :aria-required="isRequired"
       @click="handleClick(value)"
+      :data-focus-target="groupName"
     />
     <label
       tabindex="-1"
@@ -19,7 +20,6 @@
       :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
       :class="isFirstOrLastButton"
-      :data-focus-target="groupName"
     >
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>

From 8108886b1073b0f3269cd68004be7a9faa4f578d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 14 Jan 2022 16:42:38 -0500
Subject: [PATCH 07/21] CSR-254: update list-button w/ vee validate and add to
 form-test layout

---
 src/layouts/form-test/form-test.vue           | 32 ++++-----
 src/ux-components/list-button/list-button.vue | 70 +++++++++++++++++--
 2 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 98a65ee7e..4d9db67f4 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -66,31 +66,22 @@
       <h4 class="mx-2 mt-4 mb-0">Which windshield part needs fixed? (Required)</h4>
       <fieldset>
         <legend class="sr-only">Which windshield part needs fixed?</legend>
-        <listCard
-          isMultiSelectHorizontal
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Single Windshield"
+        <listButton
+          isMultiSelect
+          buttonID="Single Windshield"
           value="Single Windshield"
-          altText=""
-          buttonID="List Card Horizontal Checkbox a"
           groupName="demo2"
         />
-        <listCard
-          isMultiSelectHorizontal
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Driver Side"
+        <listButton
+          isMultiSelect
+          buttonID="Driver Side"
           value="Driver Side"
-          altText=""
-          buttonID="List Card Horizontal Checkbox b"
           groupName="demo2"
         />
-        <listCard
-          isMultiSelectHorizontal
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Passenger Side"
+        <listButton
+          isMultiSelect
+          buttonID="Passenger Side"
           value="Passenger Side"
-          altText=""
-          buttonID="List Card Horizontal Checkbox c"
           groupName="demo2"
         />
       </fieldset>
@@ -127,7 +118,6 @@
   <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
-      role="radiogroup"
       aria-labelledby="demo5-group"
       class="d-flex flex-row p-0"
     >
@@ -145,7 +135,7 @@
         />
         <listCard
           isMultiSelect
-          buttonImage="side-window-damage.svg"
+          buttonImage="side-window-damage-left-all.svg"
           buttonLabel="Side Door"
           value="Side Door"
           altText=""
@@ -251,6 +241,7 @@ import * as Yup from "yup";
 
 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 {
@@ -304,6 +295,7 @@ export default {
   },
   components: {
     listCard,
+    listButton,
     listButtonHorizontal,
     textInput,
     Form,
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index d82486f23..7087ff23f 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,16 +1,42 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
   <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+    <input
+      type="checkbox"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      @click="handleClick(value)"
+      :data-focus-target="groupName"
+    >
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
+      class="d-flex flex-column justify-content-center py-3 px-4"
+    >
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
   </label>
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+    <input
+      type="radio"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      @click="handleClick(value)"
+      :data-focus-target="groupName"
+    >
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
+      class="d-flex flex-column justify-content-center py-3 px-4"
+    >
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@@ -20,6 +46,8 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
 import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
@@ -35,6 +63,10 @@ export default {
     loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
     loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
     sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
   },
   data() {
     return {
@@ -45,12 +77,38 @@ export default {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
-    handleClick() {
+    handleClick(value) {
       this.loaderEnabled && this.displayLoader();
+      this.handleChange(value);
     }
   },
   components: {
     loader,
-  }
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
+      type: inputType,
+      checkedValue: value
+    });
+    return {
+      checked,
+      handleChange,
+      errorMessage,
+    };
+  },
 };
 </script>
+
+<style lang="scss">
+.list-group {
+  &.list-button {
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: static !important; //override bootstrap
+      height: 0;
+    }
+  }
+}
+</style>
\ No newline at end of file

From 0d032ea15e3e28bc9c337e024476d420054e2c6f Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 14 Jan 2022 16:43:32 -0500
Subject: [PATCH 08/21] CSR-254: exclude form-test from jest

---
 jest.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/jest.config.js b/jest.config.js
index 8b510e95c..7a6fcbc01 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -12,6 +12,7 @@ module.exports = {
     "!src/router/**/*.js",
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/component-test/component-test.vue",
+    "!src/layouts/form-test/form-test.vue",
     "!src/layouts/address-poc/address-poc.vue"
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

From d038b44198a3052d101d5bb456b39314ffc50e70 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 17 Jan 2022 14:21:34 -0500
Subject: [PATCH 09/21] CSR-302: move certain scss files to avoid prepend
 duplications

---
 src/App.vue   | 8 ++++++++
 vue.config.js | 5 -----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a44ab87b7..3d665312e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,11 @@
 <template>
   <router-view></router-view>
 </template>
+
+<style lang="scss">
+  @import "./node_modules/bootstrap/scss/bootstrap";
+  @import "@/styles/common-styles.scss";
+  @import "@/styles/common-button-styles.scss";
+  @import "@/styles/common-list-styles.scss";
+  @import "@/styles/common-typography-styles.scss";
+</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 9d9b2401b..0c1664eb5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -14,11 +14,6 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
         @import "@/styles/mixins/customMixins";
-        @import "./node_modules/bootstrap/scss/bootstrap";
-        @import "@/styles/common-styles.scss";
-        @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-list-styles.scss";
-        @import "@/styles/common-typography-styles.scss";
         `,
       },
     },

From 045a77b11acf4214b8558000693b0890371cf0f0 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 17 Jan 2022 14:35:45 -0500
Subject: [PATCH 10/21] CSR-302: add comments and also put change on
 vue.release.config.js

---
 vue.config.js         | 1 +
 vue.release.config.js | 8 ++------
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/vue.config.js b/vue.config.js
index 0c1664eb5..316656ed1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -8,6 +8,7 @@ module.exports = {
     loaderOptions: {
       sass: {
         // Load Order Matters!!!
+        // Note: only include functions, variables and mixins here
         prependData: `
         @import "./node_modules/bootstrap/scss/functions";
         @import "@/styles/ux-variables.scss";
diff --git a/vue.release.config.js b/vue.release.config.js
index c4b18d5dd..43fffb47f 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -7,17 +7,13 @@ module.exports = {
     loaderOptions: {
       sass: {
         // Load Order Matters!!!
+        // Note: only include functions, variables and mixins here
         prependData: `
         @import "./node_modules/bootstrap/scss/functions";
         @import "@/styles/ux-variables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
-        @import "@/styles/mixins/customMixins";
-        @import "./node_modules/bootstrap/scss/bootstrap";
-        @import "@/styles/common-styles.scss";
-        @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-list-styles.scss";
-        @import "@/styles/common-typography-styles.scss";
+        @import "@/styles/mixins/customMixins"; 
         `,
       },
     },

From 85a07de718271fa69ba550514857d2b2c7daf63f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 18 Jan 2022 08:32:22 -0500
Subject: [PATCH 11/21] CSR-186 strip logic from button and card components.

---
 .../list-button-horizontal.vue                | 118 +--------------
 src/ux-components/list-button/list-button.vue | 102 +------------
 src/ux-components/list-card/list-card.vue     | 137 +-----------------
 3 files changed, 22 insertions(+), 335 deletions(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 5be79c49c..14017f07d 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,123 +1,17 @@
-<!-- See the component-test.vue page for example implementation -->
 <template>
-  <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
-  <div
-    v-if="isMultiSelect"
-    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
-  >
-    <input
-      type="checkbox"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired"
-      @click="handleClick(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-      :class="isFirstOrLastButton"
-    >
-      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-    </label>
-  </div>
-  <div
-    v-else
-    class="col list-group list-button-horizontal d-flex flex-column mb-2"
-  >
-    <input
-      type="radio"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired"
-      @click="handleClick(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-      :class="isFirstOrLastButton"
-    >
-      <span class="m-0" :class="textPosition">{{buttonID}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-      <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
+  <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
+    <input type="checkbox" id="buttonID" name="groupName" value="buttonID" aria-required="isRequired"/>
+    <label tabindex="1" for="buttonID" aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+      <span class="m-0">Button ID</span>
+      <span class="sr-only">Screenreader Text</span>
     </label>
   </div>
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useField } from 'vee-validate';
-import loader from "@/ux-components/loader/loader";
 
 export default {
-  name: "listButtonHorizontal",
-  props: {
-    isMultiSelect: Boolean, /* Defines use as checkbox */
-    groupName: String, /* Required, unique for each button GROUP */
-    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
-    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
-    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
-    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
-    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
-    sizeInRem: Number, /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
-    totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
-    positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
-    isRequired: Boolean,
-    value: { // Field initial value
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      isLoaderDisplayed: false,
-    };
-  },
-  methods: {
-    displayLoader() {
-      this.isLoaderDisplayed = true;
-    },
-    handleClick(value) {
-      this.loaderEnabled && this.displayLoader();
-      this.handleChange(value);
-    }
-  },
-  components: {
-    loader,
-  },
-  computed: {
-    isFirstOrLastButton() {
-      let className = "";
-      if (this.positionInGroup == this.totalInGroup) {
-        className = "last-item";
-      } else if (this.positionInGroup == 1) {
-        className = "first-item";
-      }
-      return className;
-    },
-  },
-  setup(props) {
-    const { groupName, value } = toRefs(props);
-    const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
-      type: inputType,
-      checkedValue: value
-    });
-    return {
-      checked,
-      handleChange,
-      errorMessage,
-    };
-  },
+  name: "listButtonHorizontal"
 };
 </script>
 
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 7087ff23f..93e2bec49 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,103 +1,17 @@
 <template>
-  <!-- See the component-test.vue page for example implementation -->
-  <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input
-      type="checkbox"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired"
-      @click="handleClick(value)"
-      :data-focus-target="groupName"
-    >
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-    >
-      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-  </label>
+  <div class="list-group list-button d-flex flex-column w-100 mb-2">
+    <input type="checkbox" id="buttonID" name="groupName" value="buttonID" aria-required="isRequired">
+    <label tabindex="1" for="buttonID" aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+      <span class="m-0">Button ID</span>
+      <span class="m-0 small">Button Label Subcopy</span>
+      <span class="sr-only">Screenreader Text</span>
+    </label>
   </div>
-  <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input
-      type="radio"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired"
-      @click="handleClick(value)"
-      :data-focus-target="groupName"
-    >
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-    >
-      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-    <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-  </label>
-</div>
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useField } from 'vee-validate';
-import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
-  props: {
-    isMultiSelect: Boolean, /* Defines use as checkbox */
-    groupName: String, /* Required, unique for each button GROUP */
-    buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
-    isRequired: Boolean, /* Optional, default is false */
-    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
-    buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
-    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
-    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
-    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
-    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
-    value: { // Field initial value
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      isLoaderDisplayed: false,
-    };
-  },
-  methods: {
-    displayLoader() {
-      this.isLoaderDisplayed = true;
-    },
-    handleClick(value) {
-      this.loaderEnabled && this.displayLoader();
-      this.handleChange(value);
-    }
-  },
-  components: {
-    loader,
-  },
-  setup(props) {
-    const { groupName, value } = toRefs(props);
-    const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
-      type: inputType,
-      checkedValue: value
-    });
-    return {
-      checked,
-      handleChange,
-      errorMessage,
-    };
-  },
 };
 </script>
 
@@ -111,4 +25,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 450151a4d..aca55b49c 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,143 +1,22 @@
 <template>
   <!-- Heavily documented below -->
-  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center h-100">
-    <input
-      type="checkbox"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonLabel"
-      :aria-required="isRequired"
-      @click="handleChange(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      :for="buttonID"
-      class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100"
-      tabindex="-1"
-    >
-      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <p class="small m-0 order-3">{{buttonLabel}}</p>
-      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
-    </label>
-  </div>
-  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center h-100">
-    <input
-      type="radio"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired" 
-      @click="handleChange(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      :for="buttonID"
-      class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100"
-      tabindex="-1"
-    >
-      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
-      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
-    </label>
-  </div>
-  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center h-100">
-    <input
-      type="checkbox"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonLabel"
-      :aria-required="isRequired"
-      @click="handleChange(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      :for="buttonID"
-      class="d-flex flex-row w-100 align-items-center py-r ps-3 pe-8 px-2 h-100"
-      tabindex="-1"
-      :class="{'checkboxTop': buttonLabelSubCopy}"
-    >
-      <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <div class="order-2">
-        <p class="m-0 small">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
-      </div>
-    </label>
-  </div>
-  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center h-100">
-    <input
-      type="radio"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonLabel"
-      :aria-required="isRequired"
-      @click="handleChange(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      :for="buttonID"
-      class="d-flex flex-row w-100 align-items-center py-r ps-3 pe-8 px-2 h-100"
-      tabindex="-1"
-      :class="{'checkboxTop': buttonLabelSubCopy}"
-    >
-      <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <div class="order-2">
-        <p class="m-0 small">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
-      </div>
+  <div class="list-card w-100 rounded-3 d-flex align-items-center h-100">
+    <input type="checkbox" id="buttonID" name="groupName" value="buttonLabel" aria-required="isRequired"/>
+    <label for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100" tabindex="1">
+      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" alt="altText" />
+      <p class="small m-0 order-3">Button Label</p>
+      <p class="fs-7 m-0 order-4">Button Label Subcopy</p>
     </label>
   </div>
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useField } from 'vee-validate';
 
 export default {
   name: "listCard",
   props: {
-    //Must choose one of the following four options
-    isMultiSelect: Boolean, //Defines use as checkbox
-    isRadio: Boolean, //Defines use as radio button
-    isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
-    isRadioHorizontal: Boolean, //Defines use as horizontal radio button
-    //end must choose
-    buttonImage: String,//Required: File name of image
-    buttonLabel: String,//Required: Label text
-    isRequired: Boolean, //Required: is aria-required required or not?
-    altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-    buttonID: String,//Required: Unique
-    groupName: String,//Rquired: Unique
-    buttonLabelSubCopy: String,//Optional: sub text
-    value: { // Field initial value
-      type: String,
-      default: ""
-    }
-  },
-  setup(props) {
-    const { groupName, value } = toRefs(props);
-    const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
-      if (props.isMultiSelect) {
-        return "checkbox";
-      } else if (props.isRadio) {
-        return "radio";
-      } else if (props.isMultiSelectHorizontal) {
-        return "checkbox";
-      } else if (props.isRadioHorizontal) {
-        return "radio";
-      }
-    }
-    
-    props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange } = useField(groupName, undefined, {
-      type: inputType(),
-      checkedValue: value,
-    });
-
-    return {
-      checked,
-      handleChange,
-    };
-  },
+    buttonImage: String
+  }
 };
 </script>
 

From 98303b15b8f09557005030642dbf72fe58e5ce82 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 18 Jan 2022 17:18:12 -0500
Subject: [PATCH 12/21] CSR-254: fix checkbox valid issue

---
 src/layouts/form-test/form-test.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 4d9db67f4..9a0b7f6c0 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -195,7 +195,7 @@
     <error-message name="demo6"></error-message>
   </div>
 
-  <div class="row g-2 mt-6 mx-4">
+  <!-- <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
@@ -217,7 +217,7 @@
         :isRequired="true"
       />
     </div>
-  </div>
+  </div> -->
 
   <div class="row px-3 form-test-error" data-focus-target="demoX">
     <error-message name="demoX"></error-message>
@@ -250,10 +250,10 @@ export default {
     return {
       schema: Yup.object().shape({
         demo: Yup.string().required('Please select chip(s)'),
-        demo2: Yup.array().required('Please select a windshield part'),
+        demo2: Yup.array().required('Please select a windshield part').min(1, 'Please select a windshield part'),
         demo3: Yup.string().required('Invalid VIN. Please enter X, Y, Z...'),
         demo4: Yup.string().matches('^[0-9]*$', 'Invalid Entry. Must enter only numbers, no letters.'),
-        demo5: Yup.array().required('Please select damage location'),
+        demo5: Yup.array().required('Please select damage location').min(1, 'Please select damage location'),
         demo6: Yup.string()
           .when('demo5', function (demo5, schema, value) {
             if (demo5) {

From dd99a541ec399ecfd3eb83bde3567a11207c5d37 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 18 Jan 2022 17:44:12 -0500
Subject: [PATCH 13/21] CSR-254: fixes and tweaks

---
 src/layouts/form-test/form-test.vue | 38 ++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 9a0b7f6c0..894c684ca 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -4,9 +4,11 @@
   @submit="onSubmit"
   @invalid-submit="onInvalidSubmit"
   v-slot="{ values, meta }"
+  class="w-50"
 >
   <div class="row g-2 mt-6 mx-4">
     <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
+    <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">
@@ -103,7 +105,7 @@
     </div>
   </div>
 
-  <div class="row g-2 mt-6 mx-4">
+  <!-- <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
@@ -113,7 +115,7 @@
         :isRequired="true"
       />
     </div>
-  </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>
@@ -247,13 +249,25 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 export default {
   name: "App",
   data() {
+    const errorMessages = {
+      demo: 'Please select chip(s)',
+      demo2: 'Please select a windshield part',
+      demo3: '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.',
+      demo4: 'Invalid Entry. Must enter only numbers, no letters.',
+      demo5: 'Please select damage location',
+    };
     return {
       schema: Yup.object().shape({
-        demo: Yup.string().required('Please select chip(s)'),
-        demo2: Yup.array().required('Please select a windshield part').min(1, 'Please select a windshield part'),
-        demo3: Yup.string().required('Invalid VIN. Please enter X, Y, Z...'),
-        demo4: Yup.string().matches('^[0-9]*$', 'Invalid Entry. Must enter only numbers, no letters.'),
-        demo5: Yup.array().required('Please select damage location').min(1, 'Please select damage location'),
+        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) {
@@ -267,11 +281,11 @@ export default {
             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"),
+        // 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) {

From 9f58e600b6009b79a2b46d23a8971e225faab402 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 18 Jan 2022 21:35:56 -0500
Subject: [PATCH 14/21] CSR-254: remove unused validation rules preventing form
 from valid status

---
 src/layouts/form-test/form-test.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 894c684ca..c3e0f0cdd 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -266,7 +266,7 @@ export default {
           .min(17, errorMessages.demo3)
           .max(17, errorMessages.demo3)
           .matches('^[^IOQ]+$', errorMessages.demo3),
-        demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
+        // 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) {
@@ -282,10 +282,10 @@ export default {
           }),
         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"),
+        // 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) {

From 82b7cdbf99fe5501ce554056def2b6fafdf242b5 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 19 Jan 2022 08:57:39 -0500
Subject: [PATCH 15/21] Update link styles.

---
 src/layouts/component-test/component-test.vue | 12 ++++++---
 src/styles/common-styles.scss                 | 27 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index eada5a2df..9c567aead 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -606,12 +606,18 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
       </div>
     </div>
     <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <a href="#">Text Link</a>
+      <div class="col my-3">
+        <a href="#">Text Link</a> <span>(default text link behavior)</span>
+        <br><br>
+        <a class="small" href="#">Text Link Small</a> <span>(.small)</span>
+        <br><br>
+        <a class="footer-link" href="#">Footer Link</a> <span>(.footer-link)</span>
+        <br><br>
+        <a class="navigation-link" href="#">Navigation Link</a> <span>(.navigation-link)</span>
       </div>
     </div>
     <div class="row my-4">
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 5e1993716..78e82afcb 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -14,8 +14,33 @@ body {
     color: $blue;
     text-decoration: none;
     border-bottom: 1px solid $blue;
+    line-height: 26px;
+    padding: 0 0 4px 0;
+    font-weight: 500;
     &:hover {
-      color: $blue-400;
+      color: $blue;
+      font-weight: 700;
+    }
+    &.small {
+      line-height: 24px;
+    }
+    &.navigation-link {
+      color: $black;
+      border-bottom: 1px solid $black;
+      line-height: 26px;
+    }
+    &.footer-link {
+      color: $gray-500;
+      text-decoration: none;
+      border-bottom: 1px solid transparent;
+      line-height: 20px;
+      padding: 0 0 2px 0;
+      font-weight: 400;
+      font-size: .75rem;
+      &:hover {
+        border-bottom: 1px solid $gray-500;
+        padding: 0 0 2px 0;
+      }
     }
   }
   .pointer {

From 284fc7afe25e0a8cad7c7e733850fd9de77a7d7b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 19 Jan 2022 12:26:18 -0500
Subject: [PATCH 16/21] Add font-weight 700.

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 35da253dd..b926ca739 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

From 70082762bee5763867b68b2ee053ec4b36ae75c3 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 19 Jan 2022 15:23:04 -0500
Subject: [PATCH 17/21] CSR-302: fix styles and make sure loader is set to be
 enabled

---
 src/common-components/button-question/button-question.vue | 2 ++
 src/styles/common-list-styles.scss                        | 3 +++
 src/ux-components/list-button/list-button.vue             | 2 +-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 849f5a353..6c82ab6bb 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -12,6 +12,7 @@
             :buttonID="answer"
             @mouseup="chooseAnswer(answer)"
             @keyup.space="chooseAnswer(answer)"
+            :loaderEnabled="true"
             loaderColor="blue"
             loaderPosition="right"
             sizeInRem="1.5"
@@ -52,6 +53,7 @@ export default {
 
 <style lang="scss" scoped>
 .button_question {
+  color: $black;
   height: calc(100vh - 280px);
 
   .overflow-scroll {
diff --git a/src/styles/common-list-styles.scss b/src/styles/common-list-styles.scss
index d1a27d428..2af95f21a 100644
--- a/src/styles/common-list-styles.scss
+++ b/src/styles/common-list-styles.scss
@@ -12,6 +12,8 @@
         box-shadow: 0 0 0 2px $blue;
       }
       &:checked + label {
+        color: $black;
+        font-weight: 500;
         background: $blue-100;
         box-shadow: 0 0 0 1px $blue;
       }
@@ -20,6 +22,7 @@
       }
     }
     label {
+      color: $gray-600;
       position: relative;
       background: $white;
       transition: all 150ms linear;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 7087ff23f..d4b9820e3 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -106,7 +106,7 @@ export default {
   &.list-button {
     input[type="radio"],
     input[type="checkbox"] {
-      position: static !important; //override bootstrap
+      position: static; //override bootstrap
       height: 0;
     }
   }

From e3b12724298f01b19cc9a8abe099e11b55d2c6ba Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 19 Jan 2022 15:48:38 -0500
Subject: [PATCH 18/21] Reworking button question

---
 package-lock.json                             | 120 ++++++++++++++++--
 .../button-question/button-question.vue       |  66 ++++++++--
 src/layouts/component-test/component-test.vue |  52 +++++++-
 .../make-question/make-question.vue           |   3 +
 .../model-question/model-question.vue         |   3 +
 .../style-question/style-question.vue         |   3 +
 .../year-question/year-question.vue           |   3 +
 .../list-button-horizontal.vue                |  71 ++++++++++-
 src/ux-components/list-button/list-button.vue |  63 ++++++++-
 src/ux-components/list-card/list-card.vue     |  66 ++++++++--
 10 files changed, 405 insertions(+), 45 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f0cf0ac10..bfc6c1f68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,11 +15,13 @@
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
         "jest-junit": "^13.0.0",
+        "vee-validate": "^4.5.7",
         "vue": "^3.0.0",
         "vue-plugin-load-script": "^2.1.0",
         "vue-router": "^4.0.11",
         "vuex": "^4.0.2",
-        "vuex-persistedstate": "^4.1.0"
+        "vuex-persistedstate": "^4.1.0",
+        "yup": "^0.32.11"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -1632,7 +1634,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
       "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -4166,6 +4167,11 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -16453,8 +16459,12 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -16974,6 +16984,11 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "node_modules/nanoid": {
       "version": "3.1.30",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
@@ -18974,6 +18989,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -19352,8 +19372,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
@@ -22340,6 +22359,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vee-validate": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.5.7.tgz",
+      "integrity": "sha512-EcpvOikBP5LlRIKwULfwRDeyIaERuOJztZUPWRmSIeWpeQWD6hs9qQ8A3CmVVteqEohbUM07gV/ea8lPXCfCJQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.15"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
@@ -24319,6 +24349,28 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
+    },
+    "node_modules/yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yup/node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
     }
   },
   "dependencies": {
@@ -25421,7 +25473,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
       "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -27496,6 +27547,11 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -37445,8 +37501,12 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -37888,6 +37948,11 @@
       "dev": true,
       "optional": true
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "nanoid": {
       "version": "3.1.30",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
@@ -39538,6 +39603,11 @@
         "sisteransi": "^1.0.5"
       }
     },
+    "property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -39856,8 +39926,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -42300,6 +42369,14 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "vee-validate": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.5.7.tgz",
+      "integrity": "sha512-EcpvOikBP5LlRIKwULfwRDeyIaERuOJztZUPWRmSIeWpeQWD6hs9qQ8A3CmVVteqEohbUM07gV/ea8lPXCfCJQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.15"
+      }
+    },
     "vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
@@ -43914,6 +43991,27 @@
           "dev": true
         }
       }
+    },
+    "yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "dependencies": {
+        "toposort": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+          "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+        }
+      }
     }
   }
 }
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 849f5a353..9ab1e68b4 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,27 +1,33 @@
 <template>
-  <div class="button_question">
-    <div class="mt-6 mb-4 d-flex">
+  <div :class="isVehicleQuestion ? 'button_question' : ''">
+    <div v-if="questionText" class="mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100">{{
         questionText
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
+      <fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : isHorizontal ? horizontalClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
-          <listButton v-for="answer in answers" :key="answer"
+          <component :is="buttonType" v-for="answer in answers" :key="answer"
             :buttonID="answer"
             @mouseup="chooseAnswer(answer)"
             @keyup.space="chooseAnswer(answer)"
-            loaderColor="blue"
-            loaderPosition="right"
-            sizeInRem="1.5"
+            :loaderEnabled="loaderEnabled"
+            :loaderColor="loaderColor"
+            :loaderPosition="loaderPosition"
+            :sizeInRem="sizeInRem"
             data-test="button"
             :groupName="groupName"
-            textPosition="text-start"
-            :isRequired="true"
+            :textPosition="textPosition"
             :value="modelValue"
             screenReaderOnlyText="(opens new window)"
             :isMultiSelect="isMultiSelect"
+            :ariaLabelBy="ariaLabelBy"
+            :isRequired="isRequired"
+            :buttonImage="buttonImage"
+            :buttonLabel="buttonLabel"
+            :altText="altText"
+            :buttonLabelSubCopy="buttonLabelSubCopy"
           />
       </fieldset>
     </div>
@@ -30,14 +36,52 @@
 
 <script>
 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";
+
 export default {
   name: "buttonQuestion",
   props: {
+    buttonType: {
+      type: String, 
+      default: 'listButton'
+    },
     isMultiSelect: Boolean,
     questionText: String,
     answers: Array,
+    textPosition: {
+      type: String,
+      default: 'text-center'
+    },
+    loaderEnabled: Boolean,
+    loaderColor: {
+      type: String,
+      default: 'blue'
+    },
+    loaderPosition: {
+      type: String, 
+      default: 'right'
+    },
+    sizeInRem: {
+      type: [String, Number], 
+      default: 1.5
+    },
     modelValue: String,
-    groupName: String
+    groupName: String,
+    ariaLabelBy: String,
+    isRequired: Boolean,
+    isVehicleQuestion: Boolean,
+    isHorizontal: Boolean,
+    buttonImage: String,
+    buttonLabel: String,
+    altText: String,
+    buttonLabelSubCopy: String,
+  },
+  data() {
+    return {
+      vehicleQuestionClasses: 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0',
+      horizontalClasses: 'd-flex flex-row p-0'
+    };
   },
   methods: {
     chooseAnswer(answer) {
@@ -46,6 +90,8 @@ export default {
   },
   components: {
     listButton,
+    listButtonHorizontal,
+    listCard
   },
 };
 </script>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index eada5a2df..0d2c2f65f 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -167,7 +167,8 @@
         <fieldset>
           <legend class="sr-only">Horizontal Checkbox</legend>
           <listCard
-          isMultiSelectHorizontal
+          isMultiSelect
+          isHorizontal
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
@@ -184,7 +185,8 @@
         <fieldset>
           <legend class="sr-only">Checkbox no Description</legend>
           <listCard
-          isMultiSelectHorizontal
+          isMultiSelect
+          isHorizontal
           buttonImage="side-window-damage-right-all.svg"
           buttonLabel="Side Window"
           altText=""
@@ -201,7 +203,7 @@
         <fieldset>
           <legend class="sr-only">Horizontal Radio Button</legend>
           <listCard
-          isRadioHorizontal
+          isHorizontal
           buttonImage="back-glass-damage.svg"
           buttonLabel="Rear Window"
           altText=""
@@ -218,7 +220,7 @@
         <fieldset>
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
-          isRadioHorizontal
+          isHorizontal
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
@@ -754,6 +756,42 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
+      </div>
+    </div>
+    <buttonQuestion
+    :answers="checkboxAnswers"
+    :isMultiSelect="true"
+    ariaLabelBy="checkbox"
+    groupName="checkbox-list"
+    questionText="List Button as checkbox"
+   />
+   <buttonQuestion
+    :answers="radioAnswers"
+    ariaLabelBy="radio"
+    groupName="radio-list"
+    questionText="List Button as radio"
+   />
+    <buttonQuestion
+    :answers="horizontalCheckboxAnswers"
+    buttonType="listButtonHorizontal"
+    :isMultiSelect="true"
+    :isHorizontal="true"
+    ariaLabelBy="checkbox"
+    groupName="checkbox-list-horizontal"
+    questionText="List Button Horizontal as checkbox"
+   />
+   <buttonQuestion
+    :answers="horizontalRadioAnswers"
+    buttonType="listButtonHorizontal"
+    :isHorizontal="true"
+    ariaLabelBy="radio"
+    groupName="radio-list-horizontal"
+    questionText="List Button Horizontal as radio"
+    sizeInRem="1"
+   />
   </div>
 </template>
 
@@ -768,6 +806,7 @@ 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 buttonQuestion from "@/common-components/button-question/button-question"
 export default {
   name: "App",
   components: {
@@ -781,10 +820,15 @@ export default {
     listButtonHorizontal,
     checkbox,
     funnelHeader,
+    buttonQuestion
   },
   data() {
     return {
       years: [2023, 2022, 2021, 2020],
+      checkboxAnswers: ['Checkbox Answer 1', 'Checkbox Answer 2', 'Checkbox Answer 3'],
+      radioAnswers: ['Radio Answer 1', 'Radio Answer 2', 'Radio Answer 3'],
+      horizontalCheckboxAnswers: ['HCB Answer 1', 'HCB Answer 2', 'HCB Answer 3'],
+      horizontalRadioAnswers: ['HR Answer 1', 'HR Answer 2', 'HR Answer 3'],
     };
   },
 };
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index ac6ff45bb..eaa6b7306 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -3,6 +3,9 @@
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
+    textPosition="text-start"
+    :isVehicleQuestion="true"
+    :loaderEnabled="true"
     v-model="modelValue"
   />
 </template>
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 68d23bc16..bb50872d6 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -3,6 +3,9 @@
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
+    textPosition="text-start"
+    :isVehicleQuestion="true"
+    :loaderEnabled="true"
     v-model="modelValue"
   />
 </template>
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index a9bbd9fbf..d14b39599 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -3,6 +3,9 @@
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
+    textPosition="text-start"
+    :isVehicleQuestion="true"
+    :loaderEnabled="true"
     v-model="modelValue"
   />
 </template>
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 6399abb0c..98538a361 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -3,6 +3,9 @@
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
+    :isVehicleQuestion="true"
+    textPosition="text-start"
+    :loaderEnabled="true"
     v-model="modelValue"
   />
 </template>
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 14017f07d..9a0703d0a 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,17 +1,70 @@
 <template>
   <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
-    <input type="checkbox" id="buttonID" name="groupName" value="buttonID" aria-required="isRequired"/>
-    <label tabindex="1" for="buttonID" aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0">Button ID</span>
-      <span class="sr-only">Screenreader Text</span>
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
+    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+      <span class="m-0" :class="textPosition">{{buttonID}}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
+      <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
     </label>
   </div>
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
+import loader from "@/ux-components/loader/loader";
 
 export default {
-  name: "listButtonHorizontal"
+  name: "listButtonHorizontal",
+  props: {
+    isMultiSelect: Boolean,
+    groupName: String,
+    buttonID: String,
+    screenReaderOnlyText: String,
+    textPosition: String,
+    loaderEnabled: Boolean,
+    loaderColor: String,
+    loaderPosition: String,
+    sizeInRem: [Number, String],
+    isRequired: Boolean,
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isLoaderDisplayed: false,
+    };
+  },
+  methods: {
+    displayLoader() {
+      this.isLoaderDisplayed = true;
+    },
+    handleClick(value) {
+      if(this.loaderEnabled){
+        this.displayLoader();
+      }
+      this.handleChange(value);
+    }
+  },
+  components: {
+    loader,
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
+      type: inputType,
+      checkedValue: value
+    });
+    return {
+      checked,
+      handleChange,
+      errorMessage,
+    };
+  },
+
 };
 </script>
 
@@ -50,11 +103,15 @@ export default {
     + p {
       display: none;
     }
-    &.first-item {
+  }
+  &:first-of-type {
+    label {
       border-bottom-left-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
     }
-    &.last-item {
+  }
+  &:last-of-type {
+    label {
       border-bottom-right-radius: 0.5rem;
       border-top-right-radius: 0.5rem;
     }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 93e2bec49..f90525413 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,17 +1,70 @@
 <template>
   <div class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input type="checkbox" id="buttonID" name="groupName" value="buttonID" aria-required="isRequired">
-    <label tabindex="1" for="buttonID" aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0">Button ID</span>
-      <span class="m-0 small">Button Label Subcopy</span>
-      <span class="sr-only">Screenreader Text</span>
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName">
+    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+      <span class="m-0" :class="textPosition">{{ buttonID }}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
+      <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
   </div>
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
+import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
+  props: {
+    isMultiSelect: Boolean,
+    groupName: String,
+    buttonID: [Number,String],
+    isRequired: Boolean,
+    textPosition: String,
+    buttonLabelSubCopy: String,
+    screenReaderOnlyText: String,
+    loaderEnabled: Boolean,
+    loaderColor: String,
+    loaderPosition: String,
+    sizeInRem: [Number,String],
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isLoaderDisplayed: false,
+    };
+  },
+  methods: {
+    displayLoader() {
+      this.isLoaderDisplayed = true;
+    },
+    handleClick(value) {
+      if(this.loaderEnabled){
+        this.displayLoader();
+      }
+      this.handleChange(value);
+    }
+  },
+  components: {
+    loader,
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
+      type: inputType,
+      checkedValue: value
+    });
+    return {
+      checked,
+      handleChange,
+      errorMessage,
+    };
+  },
 };
 </script>
 
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index aca55b49c..3048812fb 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,22 +1,72 @@
 <template>
   <!-- Heavily documented below -->
-  <div class="list-card w-100 rounded-3 d-flex align-items-center h-100">
-    <input type="checkbox" id="buttonID" name="groupName" value="buttonLabel" aria-required="isRequired"/>
-    <label for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100" tabindex="1">
-      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" alt="altText" />
-      <p class="small m-0 order-3">Button Label</p>
-      <p class="fs-7 m-0 order-4">Button Label Subcopy</p>
+  <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
+    <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
+      <img :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
+      <p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
+      <p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
+      <div v-if="isHorizontal" class="order-2">
+        <p class="m-0 small">{{buttonLabel}}</p>
+        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+      </div>
     </label>
   </div>
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
 
 export default {
   name: "listCard",
   props: {
-    buttonImage: String
-  }
+    //Must choose one of the following four options
+    isMultiSelect: Boolean, //Defines use as checkbox
+    isHorizontal: Boolean,
+    //end must choose
+    buttonImage: String,//Required: File name of image
+    buttonLabel: String,//Required: Label text
+    isRequired: Boolean, //Required: is aria-required required or not?
+    altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
+    buttonID: String,//Required: Unique
+    groupName: String,//Rquired: Unique
+    buttonLabelSubCopy: String,//Optional: sub text
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
+  },
+  data(){
+    return {
+      columnClasses: "flex-column pt-4 pb-2",
+      rowClasses: "flex-row py-r ps-3 pe-8"
+    }
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
+      if (props.isMultiSelect) {
+        return "checkbox";
+      } else if (props.isRadio) {
+        return "radio";
+      } else if (props.isMultiSelectHorizontal) {
+        return "checkbox";
+      } else if (props.isRadioHorizontal) {
+        return "radio";
+      }
+    }
+    
+    props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange } = useField(groupName, undefined, {
+      type: inputType(),
+      checkedValue: value,
+    });
+    return {
+      checked,
+      handleChange,
+    };
+  },
 };
 </script>
 

From 80560902f08b38673f7f1b7adaa6c5bfbd026983 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 20 Jan 2022 09:13:49 -0500
Subject: [PATCH 19/21] Reworking button question widget to work with 3
 different button components

---
 .../button-question/button-question.vue       |  53 ++---
 src/layouts/component-test/component-test.vue | 182 ++++++++++++++----
 .../list-button-horizontal.vue                |   5 +-
 src/ux-components/list-button/list-button.vue |   3 +-
 src/ux-components/list-card/list-card.vue     |  25 +--
 5 files changed, 197 insertions(+), 71 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 9ab1e68b4..3a2442c61 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -6,29 +6,33 @@
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : isHorizontal ? horizontalClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
+      <fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
-          <component :is="buttonType" v-for="answer in answers" :key="answer"
-            :buttonID="answer"
-            @mouseup="chooseAnswer(answer)"
-            @keyup.space="chooseAnswer(answer)"
-            :loaderEnabled="loaderEnabled"
-            :loaderColor="loaderColor"
-            :loaderPosition="loaderPosition"
-            :sizeInRem="sizeInRem"
-            data-test="button"
-            :groupName="groupName"
-            :textPosition="textPosition"
-            :value="modelValue"
-            screenReaderOnlyText="(opens new window)"
-            :isMultiSelect="isMultiSelect"
-            :ariaLabelBy="ariaLabelBy"
-            :isRequired="isRequired"
-            :buttonImage="buttonImage"
-            :buttonLabel="buttonLabel"
-            :altText="altText"
-            :buttonLabelSubCopy="buttonLabelSubCopy"
-          />
+          <div :class="isRow ? 'row g-2' : isColumn ? columnClasses : 'w-100'">
+            <component :is="buttonType" v-for="answer in answers" :key="answer"
+              :buttonID="answer.Name ? answer.Name : answer"
+              @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
+              @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
+              :loaderEnabled="loaderEnabled"
+              :loaderColor="loaderColor"
+              :loaderPosition="loaderPosition"
+              :sizeInRem="sizeInRem"
+              data-test="button"
+              :groupName="groupName"
+              :textPosition="textPosition"
+              screenReaderOnlyText="(opens new window)"
+              :isMultiSelect="isMultiSelect"
+              :isHorizontal="isHorizontal"
+              :ariaLabelBy="ariaLabelBy"
+              :isRequired="isRequired"
+              :buttonImage="answer.AnswerImageUrl"
+              :buttonImageId="answer.ImageId"
+              :buttonLabel="answer.Text ? answer.Text : answer"
+              :altText="altText"
+              :buttonLabelSubCopy="answer.SubText"
+              :value="modelValue"
+            />
+          </div>
       </fieldset>
     </div>
   </div>
@@ -72,7 +76,10 @@ export default {
     isRequired: Boolean,
     isVehicleQuestion: Boolean,
     isHorizontal: Boolean,
+    isColumn: Boolean,
+    isRow: Boolean,
     buttonImage: String,
+    buttonImageId: String,
     buttonLabel: String,
     altText: String,
     buttonLabelSubCopy: String,
@@ -80,7 +87,7 @@ export default {
   data() {
     return {
       vehicleQuestionClasses: 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0',
-      horizontalClasses: 'd-flex flex-row p-0'
+      columnClasses: 'd-flex flex-row p-0'
     };
   },
   methods: {
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 0d2c2f65f..94c3b68e9 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -53,39 +53,33 @@
     <fieldset>
       <legend class="sr-only">Functioning as Checkbox</legend>
       <div class="row g-2">
-        <div class="col-4">
-          <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 1"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description"
-          />
-        </div>
-        <div class="col-4">
-          <listCard
-          isMultiSelect
-          buttonImage="side-window-damage-right-all.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 2"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description with more than one line"
-          />
-        </div>
-        <div class="col-4">
-          <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 3"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy=""
-          />
-        </div>
+        <listCard
+        isMultiSelect
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Windshield"
+        altText=""
+        buttonID="List Card Checkbox 1"
+        groupID="checkbox-demo-1"
+        buttonLabelSubCopy="Description"
+        />
+        <listCard
+        isMultiSelect
+        buttonImage="side-window-damage-right-all.svg"
+        buttonLabel="Windshield"
+        altText=""
+        buttonID="List Card Checkbox 2"
+        groupID="checkbox-demo-1"
+        buttonLabelSubCopy="Description with more than one line"
+        />
+        <listCard
+        isMultiSelect
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Windshield"
+        altText=""
+        buttonID="List Card Checkbox 3"
+        groupID="checkbox-demo-1"
+        buttonLabelSubCopy=""
+        />
       </div>
     </fieldset>
     <div class="row my-4">
@@ -778,7 +772,7 @@
     :answers="horizontalCheckboxAnswers"
     buttonType="listButtonHorizontal"
     :isMultiSelect="true"
-    :isHorizontal="true"
+    isColumn
     ariaLabelBy="checkbox"
     groupName="checkbox-list-horizontal"
     questionText="List Button Horizontal as checkbox"
@@ -786,12 +780,70 @@
    <buttonQuestion
     :answers="horizontalRadioAnswers"
     buttonType="listButtonHorizontal"
-    :isHorizontal="true"
+    isColumn
     ariaLabelBy="radio"
     groupName="radio-list-horizontal"
     questionText="List Button Horizontal as radio"
     sizeInRem="1"
    />
+   <buttonQuestion
+    :answers="listCardCheckBox"
+    buttonType="listCard"
+    isMultiSelect
+    ariaLabelBy="check_card"
+    groupName="check-list-card"
+    questionText="List Card as checkbox"
+   />
+   <buttonQuestion
+    :answers="listCardRadio"
+    buttonType="listCard"
+    ariaLabelBy="radio_card"
+    groupName="radio-card"
+    questionText="List Card as radio"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isHorizontal
+    :answers="listCardCheckBoxHorizontal"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_check_card"
+    groupName="horizontal_check-card"
+    questionText="List Card Horizontal as checkbox"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isHorizontal
+    :answers="listCardCheckBoxHorizontalSubText"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_check_card-st"
+    groupName="horizontal_check-card-st"
+    questionText="With Subtext"
+   />
+   <buttonQuestion
+    isHorizontal
+    :answers="listRadioHorizontal"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card"
+    groupName="horizontal_cradio-card"
+    questionText="List Card Horizontal as radio"
+   />
+   <buttonQuestion
+    isHorizontal
+    :answers="listRadioHorizontalSubText"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card-st"
+    groupName="horizontal_cradio-card-st"
+    questionText="With Subtext"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isRow
+    :answers="listCardGroup"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card-group"
+    groupName="horizontal_cradio-card-group"
+    questionText="In column layout"
+   />
   </div>
 </template>
 
@@ -829,6 +881,66 @@ export default {
       radioAnswers: ['Radio Answer 1', 'Radio Answer 2', 'Radio Answer 3'],
       horizontalCheckboxAnswers: ['HCB Answer 1', 'HCB Answer 2', 'HCB Answer 3'],
       horizontalRadioAnswers: ['HR Answer 1', 'HR Answer 2', 'HR Answer 3'],
+      listCardCheckBox: [{
+        Name: 'List-Card-CB',
+        Text: "List Card CB",
+        SubText: "checkbox",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardRadio: [{
+        Name: 'List-Card-R',
+        Text: "List Card R",
+        SubText: "Radio",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardCheckBoxHorizontalSubText: [{
+        Name: 'List-Card-CBHst',
+        Text: "List Card CBHst",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardCheckBoxHorizontal: [{
+        Name: 'List-Card-CBH',
+        Text: "List Card CBH",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listRadioHorizontalSubText: [{
+        Name: 'List-Card-RHst',
+        Text: "List Card RHst",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listRadioHorizontal: [{
+        Name: 'List-Card-RH',
+        Text: "List Card RH",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardGroup: [{
+        Name: 'Side-Window-1',
+        Text: "Side Window",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      },
+      {
+        Name: 'Side-Window-2',
+        Text: "Side Window",
+        SubText: "With Subtext that is more than one line",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      },
+      {
+        Name: 'Side-Window-3',
+        Text: "Side Window",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
     };
   },
 };
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 9a0703d0a..9bdeee4b8 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,7 +2,8 @@
   <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
     <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0" :class="textPosition">{{buttonID}}</span>
+      <span class="m-0" :class="textPosition">{{buttonLabel}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
       <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
     </label>
@@ -20,6 +21,8 @@ export default {
     isMultiSelect: Boolean,
     groupName: String,
     buttonID: String,
+    buttonLabel: String,
+    buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
     textPosition: String,
     loaderEnabled: Boolean,
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index f90525413..24ffd4b58 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,7 +2,7 @@
   <div class="list-group list-button d-flex flex-column w-100 mb-2">
     <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName">
     <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0" :class="textPosition">{{ buttonID }}</span>
+      <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
       <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
@@ -19,6 +19,7 @@ export default {
   props: {
     isMultiSelect: Boolean,
     groupName: String,
+    buttonLabel: [Number,String],
     buttonID: [Number,String],
     isRequired: Boolean,
     textPosition: String,
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 3048812fb..77d48e206 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,16 +1,18 @@
 <template>
   <!-- Heavily documented below -->
-  <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
-    <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
-      <img :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
-      <p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
-      <p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
-      <div v-if="isHorizontal" class="order-2">
-        <p class="m-0 small">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
-      </div>
-    </label>
+  <div class="col">
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
+      <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
+        <img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
+        <p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
+        <p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
+        <div v-if="isHorizontal" class="order-2">
+          <p class="m-0 small">{{buttonLabel}}</p>
+          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+        </div>
+      </label>
+    </div>
   </div>
 </template>
 
@@ -26,6 +28,7 @@ export default {
     isHorizontal: Boolean,
     //end must choose
     buttonImage: String,//Required: File name of image
+    buttonImageId: String,
     buttonLabel: String,//Required: Label text
     isRequired: Boolean, //Required: is aria-required required or not?
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.

From 0301b0d3e3b6faba275d8acffe56250b2a0e9f52 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 20 Jan 2022 10:10:47 -0500
Subject: [PATCH 20/21] Fixing test pages and unit tests

---
 src/layouts/component-test/component-test.vue | 24 ++++++++
 src/layouts/form-test/form-test.vue           |  6 ++
 .../list-button-horizontal.spec.js            | 33 -----------
 src/ux-components/list-card/list-card.spec.js | 59 -------------------
 src/ux-components/list-card/list-card.vue     | 18 +-----
 5 files changed, 33 insertions(+), 107 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 94c3b68e9..d303d216d 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -243,6 +243,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
+        buttonLabel="2021"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -255,6 +256,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
+        buttonLabel="2020"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -267,6 +269,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
+        buttonLabel="2019"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -286,6 +289,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2018"
+        buttonLabel="2018"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -297,6 +301,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2017"
+        buttonLabel="2017"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -308,6 +313,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2016"
+        buttonLabel="2016"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -333,6 +339,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
+        buttonLabel="Chevrolet"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -345,6 +352,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
+        buttonLabel="Dodge"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -357,6 +365,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
+        buttonLabel="Ford"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -376,6 +385,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Honda"
+        buttonLabel="Honda"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -387,6 +397,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Acura"
+        buttonLabel="Acura"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -398,6 +409,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Infiniti"
+        buttonLabel="Infiniti"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -423,6 +435,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
+        buttonLabel="Corvette"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -435,6 +448,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
+        buttonLabel="Testarosa"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -447,6 +461,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
+        buttonLabel="S600"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -466,6 +481,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Accord"
+        buttonLabel="Accord"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -477,6 +493,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Civic"
+        buttonLabel="Civic"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -488,6 +505,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Ridgeline"
+        buttonLabel="Ridgeline"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -515,6 +533,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
+        buttonLabel="1"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -528,6 +547,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
+        buttonLabel="2"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -541,6 +561,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
+        buttonLabel="3"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -563,6 +584,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="4"
+        buttonLabel="4"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
@@ -576,6 +598,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="5"
+        buttonLabel="5"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
@@ -589,6 +612,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="6"
+        buttonLabel="6"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 4d9db67f4..076dcaac0 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -23,6 +23,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="1"
+        buttonLabel="1"
         value="1"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -35,6 +36,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="2"
+        buttonLabel="2"
         value="2"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -47,6 +49,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="3"
+        buttonLabel="3"
         value="3"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -69,18 +72,21 @@
         <listButton
           isMultiSelect
           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"
         />
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index e6d47f3fb..91e4e1f6c 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -183,37 +183,4 @@ describe("list-button-horizontal.vue", () => {
 
   });
 
-  it("Should return first item if first item in group", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        positionInGroup: 1
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    expect(label.attributes('class')).toContain("first-item");
-
-  });
-
-  it("Should return last item if last item in group", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        positionInGroup: 3,
-        totalInGroup: 3
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    expect(label.attributes('class')).toContain("last-item");
-
-  });
-
 });
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 8438e01b9..3bb6af61c 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -22,65 +22,6 @@ describe("list-card.vue", () => {
     expect(input.attributes().type).toEqual("checkbox");
   });
 
-  it("Should return input type radio if isRadio is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isRadio: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("radio");
-  });
-
-  it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isMultiSelectHorizontal: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg"
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("checkbox");
-
-  });
-
-  it("Should return input type radio if isRadioHorizontal is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isRadioHorizontal: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg"
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("radio");
-
-  });
-
   it("Should return primary label text", async () => {
     // Act
     const wrapper = shallowMount(listCard, {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 77d48e206..c038eef75 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -2,7 +2,7 @@
   <!-- Heavily documented below -->
   <div class="col">
     <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleChange(value)" :data-focus-target="groupName" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
         <img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
         <p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@@ -48,21 +48,9 @@ export default {
   },
   setup(props) {
     const { groupName, value } = toRefs(props);
-    const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
-      if (props.isMultiSelect) {
-        return "checkbox";
-      } else if (props.isRadio) {
-        return "radio";
-      } else if (props.isMultiSelectHorizontal) {
-        return "checkbox";
-      } else if (props.isRadioHorizontal) {
-        return "radio";
-      }
-    }
-    
-    props.isMultiSelect ? "checkbox" : "radio";
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
     const { checked, handleChange } = useField(groupName, undefined, {
-      type: inputType(),
+      type: inputType,
       checkedValue: value,
     });
     return {

From 1b9079163eacf8feee9bdeb8969e82c4f6242059 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 20 Jan 2022 12:35:56 -0500
Subject: [PATCH 21/21] BRM update font weights on hover (links).

---
 src/styles/common-styles.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 78e82afcb..ba18099ff 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -18,11 +18,13 @@ body {
     padding: 0 0 4px 0;
     font-weight: 500;
     &:hover {
-      color: $blue;
-      font-weight: 700;
+      color: $blue-700;
     }
     &.small {
       line-height: 24px;
+      &:hover {
+        color: $blue-700;
+      }
     }
     &.navigation-link {
       color: $black;