From e24de8bf7010de45d7284a7977d530aab76f8618 Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Thu, 5 Jan 2023 21:53:00 -0500
Subject: [PATCH 1/2] Fix whitespace issue reported by QA

---
 .../vin-location-information.vue                         | 4 ++--
 src/layouts/vin-lookup/vin-question/vin-question.vue     | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-location-information/vin-location-information.vue b/src/layouts/vin-lookup/vin-location-information/vin-location-information.vue
index e0c39296..3b1be5ad 100644
--- a/src/layouts/vin-lookup/vin-location-information/vin-location-information.vue
+++ b/src/layouts/vin-lookup/vin-location-information/vin-location-information.vue
@@ -1,7 +1,7 @@
 <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"
     >
diff --git a/src/layouts/vin-lookup/vin-question/vin-question.vue b/src/layouts/vin-lookup/vin-question/vin-question.vue
index 2ca362c8..e3c6e201 100644
--- a/src/layouts/vin-lookup/vin-question/vin-question.vue
+++ b/src/layouts/vin-lookup/vin-question/vin-question.vue
@@ -3,6 +3,7 @@
     v-model="vin"
     cms-widget-name="VinNumberQuestionWidget"
     disable-auto-fill
+    id="vin-question-wrapper"
     input-id="vin-question"
     is-required
     max-length="17"
@@ -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>

From 7e294fa91d8ba9bf895a4629b06fd276aafe8401 Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Fri, 6 Jan 2023 14:47:07 -0500
Subject: [PATCH 2/2] Use camelCase

Use camelCase for component tag and when passing props to match the style in Concept Funnel.
---
 .eslintrc.js                                  |  4 +-
 .../vin-location-information.vue              |  8 +--
 .../vehicle-not-found-alert.vue               | 10 +--
 .../vehicle-not-matched-alert.vue             | 14 ++--
 .../vin-lookup-alerts/vin-lookup-alerts.vue   | 12 ++--
 src/layouts/vin-lookup/vin-lookup.vue         | 66 +++++++++----------
 .../vin-lookup/vin-question/vin-question.vue  | 18 ++---
 7 files changed, 67 insertions(+), 65 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 4e42a29f..aa0da332 100644
--- a/.eslintrc.js
+++ b/.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': {
diff --git a/src/layouts/vin-lookup/vin-location-information/vin-location-information.vue b/src/layouts/vin-lookup/vin-location-information/vin-location-information.vue
index 3b1be5ad..93d78c50 100644
--- a/src/layouts/vin-lookup/vin-location-information/vin-location-information.vue
+++ b/src/layouts/vin-lookup/vin-location-information/vin-location-information.vue
@@ -5,8 +5,8 @@
       :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 {
diff --git a/src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue b/src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
index b0c41194..dba53894 100644
--- a/src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
+++ b/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>
diff --git a/src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue b/src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
index 631a1bc6..7a10a8e9 100644
--- a/src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
+++ b/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: {
diff --git a/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue b/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue
index dc7f919b..1e6e488a 100644
--- a/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue
+++ b/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: {
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 0321b330..7b292243 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/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();
diff --git a/src/layouts/vin-lookup/vin-question/vin-question.vue b/src/layouts/vin-lookup/vin-question/vin-question.vue
index e3c6e201..65a7129b 100644
--- a/src/layouts/vin-lookup/vin-question/vin-question.vue
+++ b/src/layouts/vin-lookup/vin-question/vin-question.vue
@@ -1,13 +1,13 @@
 <template>
-  <TextboxQuestion
+  <textboxQuestion
     v-model="vin"
-    cms-widget-name="VinNumberQuestionWidget"
-    disable-auto-fill
+    cmsWidgetName="VinNumberQuestionWidget"
+    disableAutoFill
     id="vin-question-wrapper"
-    input-id="vin-question"
-    is-required
-    max-length="17"
-    validation-rules="vin-required|vin-format"
+    inputId="vin-question"
+    isRequired
+    maxLength="17"
+    validationRules="vin-required|vin-format"
   />
 </template>
 <script>
@@ -17,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));
@@ -29,7 +29,7 @@ export default {
   },
   emits: ['update:modelValue'],
   components: {
-    TextboxQuestion,
+    textboxQuestion,
   },
   computed: {
     vin: {