Merge pull request #1002 from Safelite/feature/INSR-7977

INSR-7977: Policy-vehicles UI updates

src/layouts/address-vehicles/address-vehicles.vue

@@ -186,7 +186,7 @@ export default {
         VehiclesForQuestions() {
             // Map API result data, to address-vehicles data structure
             const mappedData = this.VehiclesFromApi.map((v) => {
-                const maskSymbol = 'X';
+                const maskSymbol = '*';
                 const vinStart = maskSymbol.repeat(v.vin.length - 6);
                 const vinEnd = v.vin.substring(v.vin.length - 6);
                 return {

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

@@ -1,13 +1,13 @@
 <template>
     <buttonQuestion
-    ref="policyVehiclesQuestion"
+        ref="policyVehiclesQuestion"
-    v-model="selectedVehicleVin"
+        v-model="selectedVehicleVin"
-    groupName="policyVehiclesQuestionOption"
+        groupName="policyVehiclesQuestionOption"
-    buttonTypeString="listButton"
+        buttonTypeString="listButton"
-    isOverflowScrollable
+        isOverflowScrollable
-    :answers="answers"
+        :answers="answers"
-    isRequired
+        isRequired
-    :validationRules="validationRules" />
+        :validationRules="validationRules" />
 </template>
 <script>
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';

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

@@ -21,7 +21,7 @@
                             cmsWidgetName="PolicyVehiclesQuestion"
                             :vehicles="VehiclesForQuestions"
                             :validationRules="rules.optionRequired"
-                            class="mb-2"/>
+                            class="mb-2" />
                         <buttonMain
                             :variant="buttonVariants.primary"
                             buttonText="Add another vehicle"
@@ -114,7 +114,7 @@ export default {
             const vehicles = this.policyVehicles;
             const mappedData =
                 vehicles?.map((v) => {
-                    const maskSymbol = 'X';
+                    const maskSymbol = '*';
                     const vinStart = maskSymbol.repeat(v.vin.length - 6);
                     const vinEnd = v.vin.substring(v.vin.length - 6);
                     return {
@@ -122,7 +122,7 @@ export default {
                         vehicle: v,
                         Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
                         Name: v.vin,
-                        SubText: `VIN ${vinStart}${vinEnd}`
+                        SubText: `VIN: ${vinStart}${vinEnd}`
                     };
                 }) ?? [];
             return mappedData;
@@ -304,6 +304,10 @@ export default {
         min-height: 1px;
         padding-left: .9375rem;
         padding-right: .9375rem;
+
+        .subheader-secondary p {
+            text-align: left;
+        }
     }
 }
 
@@ -319,4 +323,10 @@ export default {
         }
     }
 }
+
+.list-button-content {
+    span.small {
+        font-size: 1rem;
+    }
+}
 </style>

src/styles/common-validation-styles.scss

@@ -11,6 +11,7 @@ html {
             border: 1px solid $red;
             position: relative;
             z-index: 4;
+            border-radius: 60px;
 
             .button-content {
                 border: none;
@@ -28,6 +29,7 @@ html {
 
         &.list-card {
             border: 1px solid $red;
+            border-radius: 0.5rem;
         }
 
         &.ui-radio {
@@ -48,7 +50,23 @@ html {
 
         // END HOVER
 
-        &.list-button,
+        &.list-button {
+            color: $red;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $red;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $red;
+            }
+
+            &:hover {
+                border-radius: 60px;
+            }
+        }
+
         &.list-card {
             color: $red;
 
@@ -141,6 +159,7 @@ html {
             border: 1px solid $success;
             position: relative;
             z-index: 4;
+            border-radius: 60px;
 
             .button-content {
                 border: none;
@@ -158,6 +177,7 @@ html {
 
         &.list-card {
             border: 1px solid $success;
+            border-radius: 0.5rem;
         }
 
         &.ui-radio {
@@ -178,7 +198,23 @@ html {
 
         // END HOVER
 
-        &.list-button,
+        &.list-button {
+            color: $success;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $success;
+            }
+
+            &:hover {
+                border-radius: 60px;
+            }
+        }
+
         &.list-card {
             color: $success;