INSR-7765 Heritage Policy Vehicle changes

src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue

@@ -2,7 +2,6 @@
     <buttonQuestion
     ref="policyVehiclesQuestion"
     v-model="selectedVehicleVin"
-    :questionText="questionText"
     groupName="policyVehiclesQuestionOption"
     buttonTypeString="listButton"
     isOverflowScrollable
@@ -25,9 +24,6 @@ export default ({
     },
     emits: ['update:modelValue'],
     computed: {
-        questionText() {
-            return this.getCmsContent('PolicyVehiclesQuestion', 'QuestionText');
-        },
         answers() {
             const policyVehiclesAnswerFromCMS = this.getCmsContent('PolicyVehiclesQuestion', 'Answers');
             const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerFromCMS];

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -13,11 +13,20 @@
             <div class="iss-heritage-container-width">
                 <div class="policy-vehicles-container iss-heritage-content-container-width">
                     <div class="select-car-form rounded text-center">
+                        <siteSubHeader
+                            cmsWidgetName="SiteSubHeaderWidget"
+                            class="mt-4" />
                         <policyVehiclesQuestion
                             v-model="selectedVehicleVin"
                             cmsWidgetName="PolicyVehiclesQuestion"
                             :vehicles="VehiclesForQuestions"
-                            :validationRules="rules.optionRequired" />
+                            :validationRules="rules.optionRequired"
+                            class="mb-2"/>
+                        <buttonMain
+                            :variant="buttonVariants.primary"
+                            buttonText="Add another vehicle"
+                            class="w-100"
+                            @clickEvent="addAnotherVehicle" />
                         <alert
                             v-if="displayNoServiceAlert"
                             ref="AlertNoService"
@@ -59,10 +68,15 @@ import {
 } from '@/helpers/policy-vehicle-helper';
 import coverageType from '@/constants/coverage-type';
 import alert from '@/ux-components/alert/alert.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
+import buttonVariants from '@/constants/button-variants';
 
 export default {
     name: 'policy-vehicles',
     components: {
+        buttonMain,
+        siteSubHeader,
         siteHeader,
         siteFooter,
         policyVehiclesQuestion,
@@ -90,7 +104,8 @@ export default {
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
             },
-            displayNoServiceAlert: false
+            displayNoServiceAlert: false,
+            buttonVariants
         };
     },
     computed: {
@@ -274,6 +289,10 @@ export default {
                     data: responseError.data
                 };
             }
+        },
+        async addAnotherVehicle() {
+            this.selectedVehicleVin = vehicleSelectionOptions.VEHICLE_NOT_LISTED;
+            await this.forwardButtonAction();
         }
     }
 };

src/styles/shared-input-button-styles.scss

@@ -5,7 +5,7 @@
         &.list-button,
         &.list-button-horizontal,
         &.list-card {
-            &:not(.selected) {
+            &:not(.selected):not(.no-hover) {
                 position: relative;
                 z-index: 5;
                 @include box-shadow-hover($blue-300);

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

@@ -2,7 +2,7 @@
   <baseInputButton
       v-bind="$props"
       v-model="selectedValue"
-      buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
+      buttonWrapperClasses="list-group base-input-button list-button no-hover d-flex flex-column w-100 mb-2">
       <div
           :aria-label="buttonLabel"
           class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
@@ -67,6 +67,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$heritage-border-radius: 60px;
+$heritage-border-color: #CACBCC;
+$heritage-box-shadow: 0 1px 5px rgba($black, 0.2);
+$heritage-checked-background-color: #e7f1f6;
+$heritage-checked-border-color: #0070d1;
+
 .loader {
   position: absolute;
 }
@@ -75,26 +81,11 @@ export default {
   input[type="radio"],
   input[type="checkbox"] {
       position: static; //override bootstrap
-
-      &:focus-visible + .list-button-content {
-          box-shadow: 0 0 0 2.5px $blue;
-      }
-      &:focus + .list-button-content {
-          box-shadow: 0 0 0 2.5px $blue;
-      }
       &:checked + .list-button-content {
-          color: $black;
+          background: $heritage-checked-background-color;
-          font-weight: 500;
+          border-color: $heritage-checked-border-color;
-          background: $blue-100;
           box-shadow: 0 0 0 1px $blue;
       }
-      &:checked:focus + .list-button-content {
-          box-shadow: 0 0 0 2.5px $blue;
-      }
-      &:checked + .list-button-content p,
-      &:checked + .list-button-content span {
-          font-weight: 500;
-      }
       &:checked + .list-button-content span:nth-child(2) {
           font-weight: 400;
           color: $gray-600;
@@ -102,19 +93,20 @@ export default {
   }
 }
 .list-button-content {
-  color: $gray-600;
+  color: $black;
+  font-weight: $font-weight-semibold;
   position: relative;
   background: $white;
   transition: all 150ms linear;
-  border-radius: $border-radius-lg;
+  border-radius: $heritage-border-radius;
-  border: 1px solid $gray-500;
+  border: 1px solid $heritage-border-color;
+  box-shadow: $heritage-box-shadow;
   width: 100%;
   outline: none;
 
   span {
       &.small {
-          font-size: 0.75rem;
+          color: $darker-gray;
-          color: $gray-550;
       }
   }
 }