Merge branch 'develop' into feature/humphries/INSR-7768

src/digital-components/textbox-question/textbox-question.vue

@@ -271,8 +271,8 @@ input::-webkit-date-and-time-value {
     }
     .form-test-error span {
         color: #d4281c;
-        font-size: 0.875rem;
+        font-size: 1rem;
-        font-weight: 500;
+        font-weight: 400;
     }
 
     .input-wrapper {

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/common-styles.scss

@@ -191,7 +191,7 @@ $heritage-btn-width: 9.0625rem; // 145px
 
 .btn {
     position: relative;
-    --bs-btn-font-weight: #{$font-weight-bolder};
+    --bs-btn-font-weight: 600;
     min-height: $heritage-btn-height;
     min-width: $heritage-btn-width;
     letter-spacing: inherit;
@@ -203,10 +203,10 @@ $heritage-btn-width: 9.0625rem; // 145px
     @include heritage-btn-variant('secondary', $white, $heritage-blue-secondary, transparent, true);
     @include heritage-btn-link('link', $blue, transparent, $heritage-blue-secondary);
 
-    @include heritage-btn-size('lg', 0.625rem,  1.25rem, 20px, $heritage-btn-border-radius);
+    @include heritage-btn-size('lg', 0.625rem,  1.25rem);
-    @include heritage-btn-size('md', 7px, 15px, 15px, $heritage-btn-border-radius);
+    @include heritage-btn-size('md', 7px, 15px);
-    @include heritage-btn-size('sm', 3px,  6px, 12px, $heritage-btn-border-radius);
+    @include heritage-btn-size('sm', 3px,  6px);
-    @include heritage-btn-size('xs', 1px,  5px, 12px, $heritage-btn-border-radius);
+    @include heritage-btn-size('xs', 1px,  5px);
 
     &.btn-link {
         --bs-btn-padding-x: 0px;

src/styles/mixins/customMixins.scss

@@ -44,9 +44,9 @@
   }
 }
 
-@mixin heritage-btn-size($size, $y-padding, $x-padding, $font-size, $border-radius) {
+@mixin heritage-btn-size($size, $y-padding, $x-padding) {
   &.btn-#{$size} {
-    @include button-size($y-padding, $x-padding, $font-size, $border-radius);
+    @include button-size($y-padding, $x-padding, $font-size-base, $heritage-btn-border-radius);
   }
 }
 

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

@@ -1,5 +1,15 @@
 .base-input-button {
     &:not(:disabled):hover {
         cursor: pointer;
+
+        &.list-button,
+        &.list-button-horizontal,
+        &.list-card {
+            &: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 d-flex flex-column w-100">
+      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;
 }
@@ -76,20 +82,10 @@ export default {
   input[type="radio"],
   input[type="checkbox"] {
       position: static; //override bootstrap
-
-      &:focus-within + .list-button-content {
-          border: $border-input-focus;
-      }
-
       &:checked + .list-button-content {
-          color: $black;
+          background: $heritage-checked-background-color;
-          font-weight: 500;
+          border-color: $heritage-checked-border-color;
-          background: #e7f1f6;
+          box-shadow: 0 0 0 1px $blue;
-          border-color: $heritage-blue-primary;
-      }
-      &:checked + .list-button-content p,
-      &:checked + .list-button-content span {
-          font-weight: 500;
       }
       &:checked + .list-button-content span:nth-child(2) {
           font-weight: 400;
@@ -98,12 +94,14 @@ 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-xl;
+  border-radius: $heritage-border-radius;
-  border: 1px solid $gray-350;
+  border: 1px solid $heritage-border-color;
+  box-shadow: $heritage-box-shadow;
   width: 100%;
   outline: none;
   box-shadow: $box-shadow-input;
@@ -112,8 +110,7 @@ export default {
 
   span {
       &.small {
-          font-size: 0.75rem;
+          color: $darker-gray;
-          color: $gray-550;
       }
   }
 }