Merge branch 'develop' into feature/CSR-297

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

@@ -124,8 +124,8 @@ export default {
     handleCheckedChanged(val) {
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
-        if(Array.isArray(this.selectedValues)) {
         const newSelectedValues = this.selectedValues;
+        if(Array.isArray(this.selectedValues)) {
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;  
         }

src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js

@@ -32,7 +32,7 @@ describe("replace-options-question.vue", () => {
       await wrapper.vm.$nextTick();
 
       //Assert
-      expect(wrapper.emitted()["update:selectedDoorSides"][0]).toEqual([["DriverSide"]]);
+     expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
     });
   });
 
@@ -43,11 +43,11 @@ describe("replace-options-question.vue", () => {
       const { wrapper } = setupMocks({});
   
       //Act
-      wrapper.vm.selectedDriverSideReplacOptionsValues = ["FrontDoor"]
+      wrapper.vm.selectedDriverSideReplaceOptionsValues = ["FrontDoor"]
       await wrapper.vm.$nextTick();
   
       //Assert
-      expect(wrapper.emitted()["update:selectedDriverSideReplacOptions"][0]).toEqual([["FrontDoor"]]);
+      expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
     });
   });
 
@@ -62,7 +62,7 @@ describe("replace-options-question.vue", () => {
       await wrapper.vm.$nextTick();
   
       //Assert
-      expect(wrapper.emitted()["update:selectedPassengerSideReplaceOptions"][0]).toEqual([["BacktDoor"]]);
+      expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
     });
   });
 

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -13,9 +13,9 @@
             </div>
         </transition>
         
-        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
+        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory isMultiSelect v-model="selectedDriverSideReplaceOptionsValues" />
 
-        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
+        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory isMultiSelect v-model="selectedPassengerSideReplaceOptionsValues" />
     </div>
 </template>
 
@@ -30,10 +30,6 @@ export default ({
         return {
             questionText: String,
             answersFromCms: Array,
-            selectedDoorSides: [],
-            // Child component data
-            selectedDriverSideReplacOptions: [],
-            selectedPassengerSideReplaceOptions: [],
         }
     },
     props: {
@@ -49,11 +45,11 @@ export default ({
             this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
             this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
         },
-        getSideDoorReplacementOptions(){
+        getSideDoorReplacementOptions(selectedDoorSides, selectedDriverSideReplaceOptions, selectedPassengerSideReplaceOptions){
             return {
-                selectedDoorSides: this.selectedDoorSides,
+                selectedDoorSides: selectedDoorSides,
-                selectedDriverSideReplacOptions: this.selectedDriverSideReplacOptions,
+                selectedDriverSideReplaceOptions: selectedDriverSideReplaceOptions,
-                selectedPassengerSideReplaceOptions: this.selectedPassengerSideReplaceOptions
+                selectedPassengerSideReplaceOptions: selectedPassengerSideReplaceOptions
             }
         },
     },
@@ -68,29 +64,26 @@ export default ({
         },
         selectedDoorSidesValues: {
             get: function() {
-                return this.selectedDoorSides;
+                return this.selectedValues.selectedDoorSides;
             },
             set: function(newValue) {
-                this.$emit("update:selectedDoorSides", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions(newValue, this.selectedValues.selectedDriverSideReplaceOptions, this.selectedValues.selectedPassengerSideReplaceOptions);
-                this.selectedValues = this.getSideDoorReplacementOptions();
             }
         },
-        selectedDriverSideReplacOptionsValues: {
+        selectedDriverSideReplaceOptionsValues: {
             get: function() {
-                return this.selectedDriverSideReplacOptions;
+                return this.selectedValues.selectedDriverSideReplaceOptions;
             },
             set: function(newValue) {
-                this.$emit("update:selectedDriverSideReplacOptions", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, newValue, this.selectedValues.selectedPassengerSideReplaceOptions);
-                this.selectedValues = this.getSideDoorReplacementOptions();
             }
         },
         selectedPassengerSideReplaceOptionsValues: {
             get: function() {
-                return this.selectedPassengerSideReplaceOptions;
+                return this.selectedValues.selectedPassengerSideReplaceOptions;
             },
             set: function(newValue) {
-                this.$emit("update:selectedPassengerSideReplaceOptions", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
-                this.selectedValues = this.getSideDoorReplacementOptions();
             }
         },
          answersToDisplay(){
@@ -109,19 +102,12 @@ export default ({
             });
         },
         isDriverSideReplaceOptionsQuestionAvailable(){
-            return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide");
+            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
         },
         isPassengerSideReplaceOptionsQuestionAvailable(){
-            return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide");
+            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
         },
     },
-    mounted() {
-        if(typeof(this.selectedValues) === "object"){
-            this.selectedDoorSides = this.selectedValues.selectedDoorSides;
-            this.selectedDriverSideReplacOptions = this.selectedValues.selectedDriverSideReplacOptions;
-            this.selectedPassengerSideReplaceOptions = this.selectedValues.selectedPassengerSideReplaceOptions;
-        }
-    },
     components: {
         buttonQuestion,
         replaceOptionsQuestion,

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

@@ -115,7 +115,7 @@ export default {
       selectedDamageLocations: [],
       sideDoorOptionsData: {
         selectedDoorSides: [],
-        selectedDriverSideReplacOptions: [],
+        selectedDriverSideReplaceOptions: [],
         selectedPassengerSideReplaceOptions: []
       },
       selectedWindshieldOptions: [],

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

@@ -13,6 +13,7 @@
         />
         <replaceOptionsQuestion ref="replaceOptionsQuestion"
             :isAvailable=isReplaceOptionSelected
+            isMultiSelect
             groupName="WindshieldReplaceOptions"
             v-model="selectedWindshieldReplaceOptionsValues"
         />

src/styles/common-error-styles.scss

@@ -1,7 +1,7 @@
 .has-error {
   &.list-button,
   &.list-card {
-    border: 1px solid $red;
+    border: 1px solid $gray-500;
     color: $red;
     label {
       box-shadow: 0 0 1px $red;

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

@@ -164,6 +164,9 @@ export default {
     + p {
       display: none;
     }
+    span {
+      font-size: .875rem;
+    }
   }
   &:first-of-type {
     label {

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

@@ -126,7 +126,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .list-group {
   &.list-button {
     input[type="radio"],
@@ -147,9 +147,14 @@ export default {
         background: $blue-100;
         box-shadow: 0 0 0 1px $blue;
       }
-      &:checked + label p:first-child {
+      &:checked + label p,
+      &:checked + label span {
         font-weight: 500;
       }
+      &:checked + label span:nth-child(2) {
+        font-weight: 400;
+        color: $gray-600;
+      }
     }
   }
   label {
@@ -161,6 +166,13 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
 
+    span {
+      &.small {
+        font-size: .75rem;
+        color: $gray-550;
+      }
+    }
+
     &:hover {
       @include media-breakpoint-up(sm) {
         box-shadow: 0 0 0 4px $blue-300;

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

@@ -177,6 +177,7 @@ export default {
       }
       .sub-copy {
         color: $gray-600;
+        font-weight: 400;
       }
     }
     + label::before {
@@ -247,6 +248,16 @@ export default {
         margin: -0.25rem 0 0 0;
         left: 0.875rem;
       }
+      &:checked + label {
+        p {
+          color: $black;
+          font-weight: 500;
+        }
+        .sub-copy {
+          color: $gray-600;
+          font-weight: 400;
+        }
+      }
       + label {
         min-height: 48px;
         color: $gray-600;
@@ -254,6 +265,7 @@ export default {
           margin-bottom: 0;
         }
         p {
+          color: $gray-600;
           text-align: left;
           &.sub-copy {
             color: $gray-550;

src/ux-components/radio/radio.vue

@@ -10,7 +10,7 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-      @change="handleCheckChanged()"
+    @change="handleCheckChange()"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>