From 6526dbbbad91bac5d4aa83ed62ab95c7e7b0171c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 17 Feb 2022 11:21:48 -0500
Subject: [PATCH 01/12] CSR-296: add back glass replace options question

---
 .../button-question/button-question.vue       |  1 +
 .../replace-options-question.vue              |  9 +++---
 src/layouts/vehicle-damage/vehicle-damage.vue | 29 ++++++++++++++++---
 src/ux-components/list-card/list-card.vue     | 16 ++++------
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 417230464..0e17e9de7 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -121,6 +121,7 @@ export default {
     },
   },
   mounted(){
+    // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
     if(Array.isArray(this.answers) && this.answers.length === 1) {
       const newSelectedValues = this.selectedValues;
       newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 31c739b49..9a06e3502 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -2,9 +2,9 @@
     <transition name="fade">
         <div class="replace-options-question">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable && answersToDisplay.length > 0"
                 :questionText="questionText"
-                isMultiSelect
+                :isMultiSelect="isMultiSelect"
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
@@ -42,6 +42,7 @@ export default ({
         filterByVehicleCategory: Boolean,
         groupName: String,
         modelValue: Array,
+        isMultiSelect: Boolean,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
@@ -60,11 +61,11 @@ export default ({
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            return Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
-                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                     }) 
                 : [];
         },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9f6a38650..0d454a754 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,8 +3,25 @@
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
-        <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <damageLocationQuestion
+          ref="damageLocation"
+          v-model="selectedDamageLocations"
+          groupName="DamageLocationQuestion"
+        />
+        <replaceOptionsQuestion
+          ref="driverSideOptions"
+          isAvailable
+          isMultiSelect
+          filterByVehicleCategory
+          v-model="driverSideOptionsData"
+          groupName="DriverSideReplaceOptionsQuestion"
+        />
+        <replaceOptionsQuestion
+          ref="backGlassOptions"
+          isAvailable
+          v-model="selectedRearReplaceOptions"
+          groupName="BackGlassReplaceOptionsQuestion"
+        />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -62,11 +79,14 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
+      vm.$refs.damageLocation.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      );
       vm.$refs.driverSideOptions.initializeComponent(
         resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
       );
-      vm.$refs.damageLocation.initializeComponent(
-        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
       );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
@@ -77,6 +97,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      selectedRearReplaceOptions: [],
     }
   },
   methods: {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7550c9ec4..ae1102f12 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -74,16 +74,6 @@ export default {
     validationRules: String,
     selectedButtonIDs: [Array, String],
   },
-  data(){
-    return {
-      checkValue: Boolean,
-    }
-  },
-  created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
-    }
-  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -96,6 +86,12 @@ export default {
         return "flex-column pt-4 pb-2";
       }
     },
+    checkValue() {
+      if(this.selectedButtonIDs){
+        return this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+      }
+      return false;
+    },
   },
   methods: {
     handleCheckChange(newValue, oldValue){

From b14f2c7359fdec33fd740eb219abcfc71fb14663 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 22 Feb 2022 13:11:46 -0500
Subject: [PATCH 02/12] CSR-296: create/clean up unit tests

---
 .../replace-options-question.spec.js          | 180 +++++++++++-------
 .../replace-options-question.vue              |  22 ++-
 .../vehicle-damage/vehicle-damage.spec.js     |  72 +++++--
 src/layouts/vehicle-damage/vehicle-damage.vue |  16 +-
 src/ux-components/list-card/list-card.vue     |  16 +-
 5 files changed, 216 insertions(+), 90 deletions(-)

diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
index df8a16f90..4d18fbd1c 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
@@ -1,76 +1,128 @@
 import { shallowMount } from "@vue/test-utils";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
 import store from "@/store";
 jest.mock("@/store", () => { return {}; }, {virtual: true});
 
 describe("replace-options-question.vue", () => {
-    test("Selected damage option is emitted upon selection.", async () => {
-  
-      //Arrange
-      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
-      const damageToSelect = ["Backseat"];
-  
-      //Act
-      wrapper.setValue({ modelValue: damageToSelect });
-      await wrapper.vm.$nextTick();
-  
-      //Assert
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
-    });
-  });
+  test("Selected damage option is emitted upon selection.", async () => {
 
-  describe("replace-options-question.vue", () => {
-    test("Answers to display filtered by data from api.", async () => {
-  
-      //Arrange
-      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
-  
-      //Act
-      replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
-  
-      //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
-    });
-  });
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+    const damageToSelect = ["Backseat"];
 
-  function setupMocks({
-    modelValueProp = ["Windshield"],
-    isAvailale = true,
-    isMultiSelect = false,
-    filterByVehicleCategory = false,
-    groupName = "damageQuestion",
-    cmsQuestionText = "CMS text goes here",
-    cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
-    dataFromStoreApi = [],
-  }) {
-    
-    //Mock store
-    store.dispatch = jest.fn(() => dataFromStoreApi);
-    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
-    const mountOptions = getMountOptions({
-      store: {
-        dispatch: store.dispatch,
-        getters: store.getters,
+    //Act
+    wrapper.setValue({ modelValue: damageToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+  });
+});
+
+describe("replace-options-question.vue", () => {
+  test("Answers to display filtered by data from api.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
+
+    //Act
+    replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+
+    //Assert
+    expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
+  });
+});
+
+describe("replace-options-question.vue", () => {
+  test("when updateSelectedValues method is called with a single answerToDisplay it will update this.selectedValues", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent, replaceOptions
+     } = setupMocks({ 
+      modelValueProp: [],
+     });
+    wrapper.setData({answersFromCms: [
+      {
+          "Name": "Stationary",
       },
-    });
+      {
+          "Name": "Slider",
+      }
+    ]});
+    wrapper.setData({replaceOptions: ["Stationary"]});
+
+    //Act
+    wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
+
+    //Assert
+    expect(wrapper.vm.selectedValues).toStrictEqual(['Stationary']);
+    
+  });
+});
+
+describe("replace-options-question.vue", () => {
+  test("when isAvailable is true, will run updateSelectedValues method", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent, replaceOptions } = setupMocks({ isAvailable: false, methodsToMock: ["updateSelectedValues"] });
+
+    //Act
+    wrapper.vm.$options.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+    wrapper.vm.$options.watch.isAvailable.call(wrapper.vm, true);
+
+    //Assert
+    expect(replaceOptionsQuestion.methods.updateSelectedValues).toHaveBeenCalled();
+    wrapper.unmount();
+  });
+});
+
+
+
+function setupMocks({
+  modelValueProp = ["Windshield"],
+  isAvailable = true,
+  isMultiSelect = false,
+  filterByVehicleCategory = false,
+  groupName = "damageQuestion",
+  cmsQuestionText = "CMS text goes here",
+  cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
+  dataFromStoreApi = [],
+  methodsToMock = [],
+}) {
   
-    //Mock props
-    mountOptions.propsData = {
-      modelValue: modelValueProp,
-      isAvailable: isAvailale,
-      isMultiSelect: isMultiSelect,
-      filterByVehicleCategory: filterByVehicleCategory
-    };
-   
-    const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+    isAvailable: isAvailable,
+    isMultiSelect: isMultiSelect,
+    filterByVehicleCategory: filterByVehicleCategory
+  };
+
+  //Mock methods
+  methodsToMock.forEach((methodName) => {
+    replaceOptionsQuestion.methods[methodName] = jest.fn();
+  });
   
-    //Mock CMS content
-    const cmsContent = {
-      groupName: groupName,
-      QuestionText: cmsQuestionText,
-      Answers: cmsAnswers,
-    };
-    const replaceOptions = dataFromStoreApi;
-    return { wrapper, cmsContent, replaceOptions };
-  }
\ No newline at end of file
+  const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    groupName: groupName,
+    QuestionText: cmsQuestionText,
+    Answers: cmsAnswers,
+  };
+  const replaceOptions = dataFromStoreApi;
+  return { wrapper, cmsContent, replaceOptions };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 20cd1ba57..419b15f7f 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="fade">
-        <div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXX' : ''">
+        <div class="replace-options-question">
             <buttonQuestion
                 v-if="isAvailable && answersToDisplay.length > 0"
                 isWide
@@ -51,6 +51,15 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+                const newSelectedValues = this.selectedValues;
+                newSelectedValues.push(this.answersToDisplay[0].Name);
+                console.log('YES, ONLY ONE, newSelectedValues: ', newSelectedValues)
+                this.selectedValues = newSelectedValues;
+            }
+        },
     },
     computed: {
         selectedValues: {
@@ -71,12 +80,11 @@ export default ({
                 : [];
         },
     },
-    mounted(){
-        // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-            const newSelectedValues = this.selectedValues;
-            newSelectedValues.push(this.answersToDisplay[0].Name);
-            this.selectedValues = newSelectedValues;
+    watch: {
+        isAvailable(val) {
+            console.log('CHANGE DETECTED in isAvailable, val: ', val)
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+            val && this.updateSelectedValues();
         }
     },
     components: {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..0103aa866 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -165,22 +165,61 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+describe("vehicle-damage.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.backButtonAction();
+
+    //Assert
+    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+
+  });
+});
+
+describe("vehicle-damage.vue", () => {
+  test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.selectedDamageLocations = ["Car-RearWindow"];
+
+    //Assert
+    expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
+
+  });
+});
+
 function setupMocks({
   pageHeaderWidgetHeaderText = {},
-  mountOptionsMockData = {},
+  mountOptionsMockData = {
+    router: {
+      navigate: jest.fn(),
+    },
+  },
 }) {
   //Mock api responses
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
-  baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
-    return Promise.resolve({
-      driverSideOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      },
-      windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      },
-    });
-  });
+
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
@@ -199,7 +238,10 @@ function setupMocks({
       },
       windshieldOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+      },
+      backGlassOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
     },
   };
 
@@ -268,6 +310,12 @@ function setupMocks({
   windshieldOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
+  const backGlassOptionsWrapper = wrapper.findAllComponents({
+    name: "replaceOptionsQuestion",
+  }).at(2);
+  backGlassOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
   });
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9cd4cec24..810df1417 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -23,7 +23,7 @@
         />
         <replaceOptionsQuestion
           ref="backGlassOptions"
-          isAvailable
+          :isAvailable="isRearWindowDamageLocation"
           v-model="selectedRearReplaceOptions"
           groupName="BackGlassReplaceOptionsQuestion"
         />
@@ -101,6 +101,20 @@ export default {
       );
     });
   },
+  computed: {
+    isRearWindowDamageLocation() {
+      if (this.selectedDamageLocations) {
+        const myTest = this.selectedDamageLocations.some(selectedDamages => 
+          {
+              const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
+              return Boolean(categoryAndGlass[1].toUpperCase() === "REARWINDOW");
+          });
+        return myTest;
+      } else {
+        return false;
+      }
+    },
+  },
   data(){
     return {
       selectedDamageLocations: [],
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index e42e1b7cb..45de35317 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -85,12 +85,16 @@ export default {
         return "flex-column pt-4 pb-2";
       }
     },
-    checkValue() {
-      if(this.selectedButtonIDs){
-        return this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
-      }
-      return false;
-    },
+  },
+  data(){
+    return {
+      checkValue: Boolean,
+    }
+  },
+  created(){
+    if(this.selectedButtonIDs){
+      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    }
   },
   methods: {
     handleCheckChange(newValue, oldValue){

From 01d446d1f2562a3373ed2583ddf26d6c2883b7fc Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 22 Feb 2022 15:07:44 -0500
Subject: [PATCH 03/12] WIP Don't merge.

---
 .../textbox-question/textbox-question.spec.js | 95 +++++++++++++++++++
 .../textbox-question/textbox-question.vue     | 53 +++++++++++
 src/layouts/component-test/component-test.vue | 40 +++++++-
 src/styles/common-error-styles.scss           | 11 +++
 4 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 src/common-components/textbox-question/textbox-question.spec.js
 create mode 100644 src/common-components/textbox-question/textbox-question.vue

diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js
new file mode 100644
index 000000000..954df5fa4
--- /dev/null
+++ b/src/common-components/textbox-question/textbox-question.spec.js
@@ -0,0 +1,95 @@
+import { shallowMount } from "@vue/test-utils";
+import textboxQuestion from "./textbox-question";
+import { nextTick } from "vue";
+
+describe("textboxQuestion.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        isDisabled: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes()["aria-disabled"]).toEqual("true");
+  });
+
+  it("Should render a text input", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        name: "test",
+        label: "unit test label",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.exists()).toBe(true);
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        labelText: "label text",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.text()).toEqual("label text");
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return placeholder text", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        placeholderText: "placeholder text",
+      },
+    });
+
+    // Assert
+    const placeholder = wrapper.find("input");
+
+    expect(placeholder.text()).toEqual("placeholder text");
+  });
+
+});
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
new file mode 100644
index 000000000..35d8d69f2
--- /dev/null
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="textbox-question">
+    <label :for="inputId" class="form-label">{{labelText}}</label>
+    <input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
+    <p class="mt-1 mb-0">There has been an error!</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "textboxQuestion",
+  props: {
+    isEnabled: Boolean,
+    isDisabled: Boolean,
+    modelValue: String,
+    labelText: String,
+    placeholderText: String,
+    inputId: String,
+    isRequired: Boolean,
+  }
+};
+</script>
+
+<style lang="scss">
+.textbox-question {
+  .form-label {
+    margin-bottom: .25rem;
+  }
+  .form-control {
+    border: 1px solid $gray-500;
+    border-radius: .5rem;
+    min-height: 3rem;
+    &::placeholder {
+      color: $gray-500;
+    }
+    &:focus {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:disabled,
+    &.disabled {
+      background-color: $gray-100;
+      &:hover {
+        box-shadow: 0 0 0 4px transparent;
+        border: 1px solid $gray-500;
+      }
+    }
+    &:hover {
+      border: 1px solid transparent;
+      box-shadow: 0 0 0 4px $blue-300;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index e18664bec..12e9f75b8 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,5 +1,41 @@
   <template>
     <div class="container-fluid container-shadow p-2 rounded-3">
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Textbox Input</h4>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Placeholder"
+            inputID="test-text-input"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">Disabled</h6>
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Disabled"
+            inputID="test-text-input"
+            isDisabled
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With Error (class="has-error"):</h6>
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Placeholder"
+            inputID="test-text-input"
+            class="has-error"
+          />
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
@@ -1040,6 +1076,7 @@
   import checkbox from "@/ux-components/checkbox/checkbox";
   import radio from "@/ux-components/radio/radio";
   import textLink from "@/ux-components/text-link/text-link";
+  import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   export default {
     name: "App",
     components: {
@@ -1051,7 +1088,8 @@
       listButtonHorizontal,
       checkbox,
       radio,
-      textLink
+      textLink,
+      textboxQuestion,
     },
     data() {
       return {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 4b9a18114..14b201e05 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -32,6 +32,17 @@
       border: 1px solid $blue;
     }
   }
+  &.textbox-question {
+    p {
+      color: $red;
+    }
+    input {
+      border: 1px solid $red;
+      &:focus {
+        border: 1px solid transparent;
+      }
+    }
+  }
 }
 
 .form-test-error {

From 45f61fc2f169e78375a6c2a98eb1cf6a475d5172 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 22 Feb 2022 16:57:03 -0500
Subject: [PATCH 04/12] WIP don't merge.

---
 .../dropdown-question.spec.js                 | 95 +++++++++++++++++++
 .../dropdown-question/dropdown-question.vue   | 60 ++++++++++++
 .../textbox-question/textbox-question.vue     |  1 -
 src/layouts/component-test/component-test.vue | 37 +++++++-
 src/styles/common-error-styles.scss           |  6 +-
 5 files changed, 195 insertions(+), 4 deletions(-)
 create mode 100644 src/common-components/dropdown-question/dropdown-question.spec.js
 create mode 100644 src/common-components/dropdown-question/dropdown-question.vue

diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js b/src/common-components/dropdown-question/dropdown-question.spec.js
new file mode 100644
index 000000000..c38a445ef
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.spec.js
@@ -0,0 +1,95 @@
+import { shallowMount } from "@vue/test-utils";
+import textboxQuestion from "./textbox-question";
+import { nextTick } from "vue";
+
+describe("dropdownQuestion.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        isDisabled: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes()["aria-disabled"]).toEqual("true");
+  });
+
+  it("Should render a text input", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        name: "test",
+        label: "unit test label",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.exists()).toBe(true);
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        labelText: "label text",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.text()).toEqual("label text");
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return placeholder text", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        placeholderText: "placeholder text",
+      },
+    });
+
+    // Assert
+    const placeholder = wrapper.find("input");
+
+    expect(placeholder.text()).toEqual("placeholder text");
+  });
+
+});
diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
new file mode 100644
index 000000000..7481d43f1
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="dropdown-question">
+    <label :for="inputId" class="form-label">{{labelText}}</label>
+    <select class="form-select" aria-label="Default select example" :id="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
+      <option selected>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <p class="mt-1 mb-0">There has been an error!</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dropdownQuestion",
+  props: {
+    isDisabled: Boolean,
+    modelValue: String,
+    labelText: String,
+    inputId: String,
+    isRequired: Boolean,
+  }
+};
+</script>
+
+<style lang="scss">
+.dropdown-question {
+  .form-label {
+    margin-bottom: .25rem;
+  }
+  .form-select {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
+    border: 1px solid $gray-500;
+    border-radius: .5rem;
+    min-height: 3rem;
+    option[selected] {
+      color: $gray-500;
+      background-color: red;
+    }
+    &:focus {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:disabled,
+    &.disabled {
+      background-color: $gray-100;
+      filter: grayscale(100%);
+      opacity: .65;
+      &:hover {
+        box-shadow: 0 0 0 4px transparent;
+        border: 1px solid $gray-500;
+      }
+    }
+    &:hover {
+      border: 1px solid transparent;
+      box-shadow: 0 0 0 4px $blue-300;
+    }
+  }
+}
+</style>
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 35d8d69f2..9df4c19e7 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -10,7 +10,6 @@
 export default {
   name: "textboxQuestion",
   props: {
-    isEnabled: Boolean,
     isDisabled: Boolean,
     modelValue: String,
     labelText: String,
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 12e9f75b8..4a8547a26 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,7 +2,7 @@
     <div class="container-fluid container-shadow p-2 rounded-3">
       <div class="row my-4">
         <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Textbox Input</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Text Input</h4>
         </div>
       </div>
       <div class="row">
@@ -36,6 +36,39 @@
           />
         </div>
       </div>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (select)</h4>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">Disabled</h6>
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+            isDisabled
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With Error (class="has-error"):</h6>
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+            class="has-error"
+          />
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
@@ -1077,6 +1110,7 @@
   import radio from "@/ux-components/radio/radio";
   import textLink from "@/ux-components/text-link/text-link";
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+  import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   export default {
     name: "App",
     components: {
@@ -1090,6 +1124,7 @@
       radio,
       textLink,
       textboxQuestion,
+      dropdownQuestion,
     },
     data() {
       return {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 14b201e05..670591d11 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -32,11 +32,13 @@
       border: 1px solid $blue;
     }
   }
-  &.textbox-question {
+  &.textbox-question,
+  &.dropdown-question {
     p {
       color: $red;
     }
-    input {
+    input,
+    select {
       border: 1px solid $red;
       &:focus {
         border: 1px solid transparent;

From 9ef19e889e3e322444f07c66239dc948043647ad Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 22 Feb 2022 17:45:20 -0500
Subject: [PATCH 05/12] CSR-296: fix accessibility issue with fieldset

---
 src/common-components/button-question/button-question.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index e96f15df5..c828f9ff9 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -4,7 +4,7 @@
       <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
+      <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
             <component

From c114e4b00449e079774566b8ee4964a603643b9c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 23 Feb 2022 08:12:31 -0500
Subject: [PATCH 06/12] CSR-365 text input and select input components.

---
 .../dropdown-question/dropdown-question.vue   |  3 ++-
 src/layouts/component-test/component-test.vue | 20 +++++++++----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 7481d43f1..7793a01ad 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -38,7 +38,8 @@ export default {
       color: $gray-500;
       background-color: red;
     }
-    &:focus {
+    &:focus,
+    &:focus-visible {
       box-shadow: 0 0 0 2px $blue;
     }
     &:disabled,
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 4a8547a26..d75266010 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -8,7 +8,7 @@
       <div class="row">
         <div class="col">
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Placeholder"
             inputID="test-text-input"
           />
@@ -18,7 +18,7 @@
         <div class="col">
           <h6 class="my-4">Disabled</h6>
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Disabled"
             inputID="test-text-input"
             isDisabled
@@ -29,7 +29,7 @@
         <div class="col">
           <h6 class="my-4">With Error (class="has-error"):</h6>
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Placeholder"
             inputID="test-text-input"
             class="has-error"
@@ -38,14 +38,14 @@
       </div>
       <div class="row my-4">
         <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (select)</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (Select)</h4>
         </div>
       </div>
       <div class="row">
         <div class="col">
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-1"
           />
         </div>
       </div>
@@ -53,8 +53,8 @@
         <div class="col">
           <h6 class="my-4">Disabled</h6>
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-2"
             isDisabled
           />
         </div>
@@ -63,8 +63,8 @@
         <div class="col">
           <h6 class="my-4">With Error (class="has-error"):</h6>
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-3"
             class="has-error"
           />
         </div>

From 413bb0352ab5b104b5e1de3b1311555764028473 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 23 Feb 2022 08:19:08 -0500
Subject: [PATCH 07/12] Update unit tests.

---
 .../dropdown-question.spec.js                 | 24 ++++---------------
 .../textbox-question/textbox-question.spec.js | 14 -----------
 2 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js b/src/common-components/dropdown-question/dropdown-question.spec.js
index c38a445ef..0d1095c94 100644
--- a/src/common-components/dropdown-question/dropdown-question.spec.js
+++ b/src/common-components/dropdown-question/dropdown-question.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from "@vue/test-utils";
-import textboxQuestion from "./textbox-question";
+import dropdownQuestion from "./dropdown-question";
 import { nextTick } from "vue";
 
 describe("dropdownQuestion.vue", () => {
@@ -13,7 +13,7 @@ describe("dropdownQuestion.vue", () => {
     });
 
     // Assert
-    const input = wrapper.find("input");
+    const input = wrapper.find("select");
 
     // Expect
     expect(input.attributes()["aria-disabled"]).toEqual("true");
@@ -29,7 +29,7 @@ describe("dropdownQuestion.vue", () => {
     });
 
     // Assert
-    const input = wrapper.find("input");
+    const input = wrapper.find("select");
 
     expect(input.exists()).toBe(true);
   });
@@ -43,7 +43,7 @@ describe("dropdownQuestion.vue", () => {
     });
 
     // Assert
-    const input = wrapper.find("input");
+    const input = wrapper.find("select");
 
     // Expect
     expect(input.attributes().id).toEqual("input ID");
@@ -72,24 +72,10 @@ describe("dropdownQuestion.vue", () => {
     });
 
     // Assert
-    const input = wrapper.find("input");
+    const input = wrapper.find("select");
 
     // Expect
     expect(input.attributes().id).toEqual("input ID");
   });
 
-  it("Should return placeholder text", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        placeholderText: "placeholder text",
-      },
-    });
-
-    // Assert
-    const placeholder = wrapper.find("input");
-
-    expect(placeholder.text()).toEqual("placeholder text");
-  });
-
 });
diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js
index 954df5fa4..721fba9d5 100644
--- a/src/common-components/textbox-question/textbox-question.spec.js
+++ b/src/common-components/textbox-question/textbox-question.spec.js
@@ -78,18 +78,4 @@ describe("textboxQuestion.vue", () => {
     expect(input.attributes().id).toEqual("input ID");
   });
 
-  it("Should return placeholder text", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      propsData: {
-        placeholderText: "placeholder text",
-      },
-    });
-
-    // Assert
-    const placeholder = wrapper.find("input");
-
-    expect(placeholder.text()).toEqual("placeholder text");
-  });
-
 });

From 0848dafe4880e34117876518bf6c7c5093d2e9e0 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 23 Feb 2022 09:15:50 -0500
Subject: [PATCH 08/12] CSR-296: remove test var

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 5c976591c..b6b3e17a4 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -104,15 +104,11 @@ export default {
   },
   computed: {
     isRearWindowDamageLocation() {
-      if (this.selectedDamageLocations) {
-        const myTest = this.selectedDamageLocations.some(selectedDamages => 
-          {
-              return Boolean(selectedDamages.toUpperCase() === "REARWINDOW");
-          });
-        return myTest;
-      } else {
-        return false;
-      }
+      return Boolean(this.selectedDamageLocations.some(selectedDamages => 
+        {
+          return selectedDamages.toUpperCase() === "REARWINDOW";
+        })
+      );
     },
   },
   data(){

From d661e6b262584f2c860df2086edc95449388b90f Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 09:23:04 -0500
Subject: [PATCH 09/12] Adjusting animation for fade in

---
 src/styles/common-animations.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index 5af3326b8..92f5407ed 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -1,6 +1,9 @@
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.3s ease;
+.fade-enter-active{
+    transition: opacity 0.6s ease;
+}
+
+.fade-leave-active  {
+    transition: opacity 0.3s ease; 
 }
 
 .fade-enter-from,

From 02213cf24d463b09ba50715e2f189d2a3540d6a4 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 23 Feb 2022 09:55:59 -0500
Subject: [PATCH 10/12] CSR-296: remove boolean

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index b6b3e17a4..edbaf3a0c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -104,11 +104,10 @@ export default {
   },
   computed: {
     isRearWindowDamageLocation() {
-      return Boolean(this.selectedDamageLocations.some(selectedDamages => 
+      return this.selectedDamageLocations.some(selectedDamages => 
         {
           return selectedDamages.toUpperCase() === "REARWINDOW";
-        })
-      );
+        });
     },
   },
   data(){

From a6ae6b7aa4d6b6239f12651f0e504295963bd91b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 23 Feb 2022 10:28:51 -0500
Subject: [PATCH 11/12] Update option copy. Update color.

---
 src/common-components/dropdown-question/dropdown-question.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 7793a01ad..bef238272 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -2,7 +2,7 @@
   <div class="dropdown-question">
     <label :for="inputId" class="form-label">{{labelText}}</label>
     <select class="form-select" aria-label="Default select example" :id="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
-      <option selected>Open this select menu</option>
+      <option selected>Placeholder</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
@@ -30,6 +30,7 @@ export default {
     margin-bottom: .25rem;
   }
   .form-select {
+    color: $gray-500;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
     border: 1px solid $gray-500;
     border-radius: .5rem;
@@ -46,7 +47,6 @@ export default {
     &.disabled {
       background-color: $gray-100;
       filter: grayscale(100%);
-      opacity: .65;
       &:hover {
         box-shadow: 0 0 0 4px transparent;
         border: 1px solid $gray-500;

From 1333024b5369a5e6d8fc5c7062ca5c3574398b14 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 12:50:24 -0500
Subject: [PATCH 12/12] Fixing Css animation glitch

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

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 670591d11..b5017fc60 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,10 +1,10 @@
 .has-error {
   &.list-button,
   &.list-card {
-    border: 1px solid transparent;
+    border: 1px solid $red;
     color: $red;
     label {
-      border: 1px solid $red;
+      box-shadow: 0 0 1px $red;
       border-radius: .5rem;
     }
   }