Merge branch 'develop' of https://github.com/Safelite/DigitalConsumer.ISS into develop

.eslintrc.js

@@ -6,7 +6,9 @@ module.exports = {
   rules: {
     'linebreak-style': 'off',
     'vue/component-definition-name-casing': ['warn', 'kebab-case'],
-    'vue/require-default-prop': 'off'
+    'vue/require-default-prop': 'off',
+    'vue/attribute-hyphenation': ['warn', 'never'],
+    'vue/v-on-event-hyphenation': ['warn', 'never']
   },
   settings: {
     'import/resolver': {

src/layouts/vin-lookup/vin-location-information/vin-location-information.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="vin-location-information">
+  <div class="vin-location-information mt-2">
     <div
-      class="vin-toggle mt-2"
+      class="vin-toggle"
       :class="[isVinLocationDetailVisible ? 'active' : '']"
       @click="handleClickToggle"
     >
-      <TextLink
-        link-type="text"
+      <textLink
+        linkType="text"
         href="#!"
         :text="textForToggle"
       />
@@ -31,12 +31,12 @@
   </div>
 </template>
 <script>
-import TextLink from '@/ux-components/text-link/text-link.vue';
+import textLink from '@/ux-components/text-link/text-link.vue';
 
 export default {
   name: 'vin-location-information',
   components: {
-    TextLink,
+    textLink,
   },
   data() {
     return {

src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue

@@ -1,17 +1,17 @@
 <template>
-  <Alert
-    alert-class="alert-danger"
-    cms-widget-name="AlertVinNotFoundWidget"
+  <alert
+    alertClass="alert-danger"
+    cmsWidgetName="AlertVinNotFoundWidget"
     id="vehicle-not-found-alert"
   />
 </template>
 <script>
-import Alert from '@/ux-components/alert/alert.vue';
+import alert from '@/ux-components/alert/alert.vue';
 
 export default {
   name: 'vehicle-not-found-alert',
   components: {
-    Alert,
+    alert,
   },
 };
 </script>

src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue

@@ -1,20 +1,20 @@
 <template>
-  <Alert
-    alert-class="alert-warning"
-    cms-widget-name="AlertMatchedDifferentVehicleWidget"
-    :manual-copy="body"
-    :manual-headline="header"
+  <alert
+    alertClass="alert-warning"
+    cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+    :manualCopy="body"
+    :manualHeadline="header"
   />
 </template>
 <script>
 import { getDamageString } from '@/helpers/damage-helper';
 
-import Alert from '@/ux-components/alert/alert.vue';
+import alert from '@/ux-components/alert/alert.vue';
 
 export default {
   name: 'vehicle-not-matched-alert',
   components: {
-    Alert,
+    alert,
   },
   inject: ['vehicleFromLookup'],
   computed: {

src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue

@@ -3,24 +3,24 @@
     id="vin-lookup-alerts-wrapper"
     :class="wrapperCssClass"
   >
-    <VehicleNotFoundAlert
+    <vehicleNotFoundAlert
       v-if="isVehicleNotFoundVisible"
     />
-    <VehicleNotMatchedAlert
+    <vehicleNotMatchedAlert
       v-else-if="isVehicleNotMatchedVisible"
     />
   </div>
 </template>
 <script>
 import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-import VehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
-import VehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
+import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
+import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
 
 export default {
   name: 'vin-lookup-alerts',
   components: {
-    VehicleNotFoundAlert,
-    VehicleNotMatchedAlert,
+    vehicleNotFoundAlert,
+    vehicleNotMatchedAlert,
   },
   props: {
     activeAlertType: {

src/layouts/vin-lookup/vin-lookup.vue

@@ -1,36 +1,36 @@
 <template>
   <Form
     @submit="onSubmit"
-    @invalid-submit="onInvalidSubmit"
+    @invalidSubmit="onInvalidSubmit"
     v-slot="{ meta }"
   >
     <div class="page-container-grouped-styles overflow-auto">
-      <SiteHeader
-        cms-widget-name="SiteHeaderWidget"
+      <siteHeader
+        cmsWidgetName="SiteHeaderWidget"
       />
-      <VehicleBanner
-        cms-widget-name="VehicleBannerWidget"
-        :display-generic-vehicle-image="false"
+      <vehicleBanner
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
       />
-      <SiteSubHeader
-        cms-widget-name="SiteSubHeaderWidget"
+      <siteSubHeader
+        cmsWidgetName="SiteSubHeaderWidget"
       />
       <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <VinLookupAlerts
-          :active-alert-type="activeVehicleLookupAlertType"
+        <vinLookupAlerts
+          :activeAlertType="activeVehicleLookupAlertType"
         />
 
-        <VinQuestion
+        <vinQuestion
           v-model="vin"
         />
 
-        <VinLocationInformation />
+        <vinLocationInformation />
 
-        <SiteFooter
-          cms-widget-name="SiteFooterWidget"
-          :is-forward-action-disabled="!meta.valid"
-          @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction"
+        <siteFooter
+          cmsWidgetName="SiteFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @backClicked="backButtonAction"
+          @forwardClicked="forwardButtonAction"
           ref="siteFooter"
         />
       </div>
@@ -48,28 +48,28 @@ import { settleAllPromises } from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
 
 // Import Component
-import BaseFormMixin from '@/mixins/base-form-mixin';
+import baseFormMixin from '@/mixins/base-form-mixin';
 import { Form } from 'vee-validate';
-import SiteFooter from '@/common-components/site-footer/site-footer.vue';
-import SiteHeader from '@/common-components/site-header/site-header.vue';
-import SiteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
-import VehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
-import VinLocationInformation from './vin-location-information/vin-location-information.vue';
-import VinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
-import VinQuestion from './vin-question/vin-question.vue';
+import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import vinLocationInformation from './vin-location-information/vin-location-information.vue';
+import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
+import vinQuestion from './vin-question/vin-question.vue';
 
 export default {
   name: 'vin-lookup',
-  mixins: [BaseFormMixin],
+  mixins: [baseFormMixin],
   components: {
-    SiteFooter,
-    SiteHeader,
-    SiteSubHeader,
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
     Form,
-    VehicleBanner,
-    VinLocationInformation,
-    VinLookupAlerts,
-    VinQuestion,
+    vehicleBanner,
+    vinLocationInformation,
+    vinLookupAlerts,
+    vinQuestion,
   },
   setup() {
     const mainStore = useMainStore();

src/layouts/vin-lookup/vin-question/vin-question.vue

@@ -1,12 +1,13 @@
 <template>
-  <TextboxQuestion
+  <textboxQuestion
     v-model="vin"
-    cms-widget-name="VinNumberQuestionWidget"
-    disable-auto-fill
-    input-id="vin-question"
-    is-required
-    max-length="17"
-    validation-rules="vin-required|vin-format"
+    cmsWidgetName="VinNumberQuestionWidget"
+    disableAutoFill
+    id="vin-question-wrapper"
+    inputId="vin-question"
+    isRequired
+    maxLength="17"
+    validationRules="vin-required|vin-format"
   />
 </template>
 <script>
@@ -16,7 +17,7 @@ import { regex, required } from '@/helpers/validation-rules';
 import { errorMessages } from '@/constants/error-messages';
 
 // Import Component(s)
-import TextboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
+import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
 
 defineRule('vin-required', required(errorMessages.VIN_REQUIRED));
 defineRule('vin-format', regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
@@ -28,7 +29,7 @@ export default {
   },
   emits: ['update:modelValue'],
   components: {
-    TextboxQuestion,
+    textboxQuestion,
   },
   computed: {
     vin: {
@@ -42,3 +43,11 @@ export default {
   },
 };
 </script>
+<style>
+#vin-question-wrapper .form-test-error {
+  /**
+  Override extra margin-bottom in the error message in TextboxQuestion
+  */
+  margin-bottom: 0 !important;
+}
+</style>

src/styles/common-error-styles.scss

@@ -161,20 +161,20 @@ html {
   }
 
   .form-test-invalid {
-      &.btn.btn-primary {
-          color: $gray-600;
-          background: $gray-200;
-          cursor: pointer;
-          pointer-events: all;
-          font-weight: $font-weight-normal;
-      }
-      &.btn.btn-primary:hover {
-          background: $gray-200;
-          box-shadow: none;
-      }
-      &.btn.btn-primary:focus,
-      &.btn.btn-primary:focus-visible {
-          box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
-      }
-  }
+    &.btn.btn-primary {
+        color: $gray-600;
+        background: $gray-200;
+        cursor: pointer;
+        pointer-events: all;
+        font-weight: $font-weight-normal;
+    }
+    &.btn.btn-primary:hover,
+    &.btn.btn-primary:focus {
+        background: $gray-200;
+        box-shadow: none;
+    }
+    &.btn.btn-primary:focus-visible {
+        box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $gray-700;
+    }
+}
 }

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

@@ -1,7 +1,7 @@
 <template>
     <button
         :aria-disabled="isDisabled"
-        class="btn d-flex align-items-center py-3 px-4 delay"
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
         :class="[
             isPrimary ? 'btn-primary' : 'btn-secondary',
             isFloat ? 'float-end' : '',