Merge pull request #93 from Safelite/feature/SSR-188-v2
Fix whitespace issue reported by QA
This commit is contained in:
commit
f78a8743f5
7 changed files with 78 additions and 67 deletions
|
|
@ -6,7 +6,9 @@ module.exports = {
|
||||||
rules: {
|
rules: {
|
||||||
'linebreak-style': 'off',
|
'linebreak-style': 'off',
|
||||||
'vue/component-definition-name-casing': ['warn', 'kebab-case'],
|
'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: {
|
settings: {
|
||||||
'import/resolver': {
|
'import/resolver': {
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="vin-location-information">
|
<div class="vin-location-information mt-2">
|
||||||
<div
|
<div
|
||||||
class="vin-toggle mt-2"
|
class="vin-toggle"
|
||||||
:class="[isVinLocationDetailVisible ? 'active' : '']"
|
:class="[isVinLocationDetailVisible ? 'active' : '']"
|
||||||
@click="handleClickToggle"
|
@click="handleClickToggle"
|
||||||
>
|
>
|
||||||
<TextLink
|
<textLink
|
||||||
link-type="text"
|
linkType="text"
|
||||||
href="#!"
|
href="#!"
|
||||||
:text="textForToggle"
|
:text="textForToggle"
|
||||||
/>
|
/>
|
||||||
|
|
@ -31,12 +31,12 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import TextLink from '@/ux-components/text-link/text-link.vue';
|
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'vin-location-information',
|
name: 'vin-location-information',
|
||||||
components: {
|
components: {
|
||||||
TextLink,
|
textLink,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<Alert
|
<alert
|
||||||
alert-class="alert-danger"
|
alertClass="alert-danger"
|
||||||
cms-widget-name="AlertVinNotFoundWidget"
|
cmsWidgetName="AlertVinNotFoundWidget"
|
||||||
id="vehicle-not-found-alert"
|
id="vehicle-not-found-alert"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Alert from '@/ux-components/alert/alert.vue';
|
import alert from '@/ux-components/alert/alert.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'vehicle-not-found-alert',
|
name: 'vehicle-not-found-alert',
|
||||||
components: {
|
components: {
|
||||||
Alert,
|
alert,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<Alert
|
<alert
|
||||||
alert-class="alert-warning"
|
alertClass="alert-warning"
|
||||||
cms-widget-name="AlertMatchedDifferentVehicleWidget"
|
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
|
||||||
:manual-copy="body"
|
:manualCopy="body"
|
||||||
:manual-headline="header"
|
:manualHeadline="header"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getDamageString } from '@/helpers/damage-helper';
|
import { getDamageString } from '@/helpers/damage-helper';
|
||||||
|
|
||||||
import Alert from '@/ux-components/alert/alert.vue';
|
import alert from '@/ux-components/alert/alert.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'vehicle-not-matched-alert',
|
name: 'vehicle-not-matched-alert',
|
||||||
components: {
|
components: {
|
||||||
Alert,
|
alert,
|
||||||
},
|
},
|
||||||
inject: ['vehicleFromLookup'],
|
inject: ['vehicleFromLookup'],
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
|
|
@ -3,24 +3,24 @@
|
||||||
id="vin-lookup-alerts-wrapper"
|
id="vin-lookup-alerts-wrapper"
|
||||||
:class="wrapperCssClass"
|
:class="wrapperCssClass"
|
||||||
>
|
>
|
||||||
<VehicleNotFoundAlert
|
<vehicleNotFoundAlert
|
||||||
v-if="isVehicleNotFoundVisible"
|
v-if="isVehicleNotFoundVisible"
|
||||||
/>
|
/>
|
||||||
<VehicleNotMatchedAlert
|
<vehicleNotMatchedAlert
|
||||||
v-else-if="isVehicleNotMatchedVisible"
|
v-else-if="isVehicleNotMatchedVisible"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
||||||
import VehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-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';
|
import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'vin-lookup-alerts',
|
name: 'vin-lookup-alerts',
|
||||||
components: {
|
components: {
|
||||||
VehicleNotFoundAlert,
|
vehicleNotFoundAlert,
|
||||||
VehicleNotMatchedAlert,
|
vehicleNotMatchedAlert,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
activeAlertType: {
|
activeAlertType: {
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,36 @@
|
||||||
<template>
|
<template>
|
||||||
<Form
|
<Form
|
||||||
@submit="onSubmit"
|
@submit="onSubmit"
|
||||||
@invalid-submit="onInvalidSubmit"
|
@invalidSubmit="onInvalidSubmit"
|
||||||
v-slot="{ meta }"
|
v-slot="{ meta }"
|
||||||
>
|
>
|
||||||
<div class="page-container-grouped-styles overflow-auto">
|
<div class="page-container-grouped-styles overflow-auto">
|
||||||
<SiteHeader
|
<siteHeader
|
||||||
cms-widget-name="SiteHeaderWidget"
|
cmsWidgetName="SiteHeaderWidget"
|
||||||
/>
|
/>
|
||||||
<VehicleBanner
|
<vehicleBanner
|
||||||
cms-widget-name="VehicleBannerWidget"
|
cmsWidgetName="VehicleBannerWidget"
|
||||||
:display-generic-vehicle-image="false"
|
:displayGenericVehicleImage="false"
|
||||||
/>
|
/>
|
||||||
<SiteSubHeader
|
<siteSubHeader
|
||||||
cms-widget-name="SiteSubHeaderWidget"
|
cmsWidgetName="SiteSubHeaderWidget"
|
||||||
/>
|
/>
|
||||||
<div class="fade-on-route-transition sub-container make-tall mt-5">
|
<div class="fade-on-route-transition sub-container make-tall mt-5">
|
||||||
<VinLookupAlerts
|
<vinLookupAlerts
|
||||||
:active-alert-type="activeVehicleLookupAlertType"
|
:activeAlertType="activeVehicleLookupAlertType"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<VinQuestion
|
<vinQuestion
|
||||||
v-model="vin"
|
v-model="vin"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<VinLocationInformation />
|
<vinLocationInformation />
|
||||||
|
|
||||||
<SiteFooter
|
<siteFooter
|
||||||
cms-widget-name="SiteFooterWidget"
|
cmsWidgetName="SiteFooterWidget"
|
||||||
:is-forward-action-disabled="!meta.valid"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
@back-clicked="backButtonAction"
|
@backClicked="backButtonAction"
|
||||||
@forward-clicked="forwardButtonAction"
|
@forwardClicked="forwardButtonAction"
|
||||||
ref="siteFooter"
|
ref="siteFooter"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -48,28 +48,28 @@ import { settleAllPromises } from '@/helpers/layout-helper';
|
||||||
import { useMainStore } from '@/store';
|
import { useMainStore } from '@/store';
|
||||||
|
|
||||||
// Import Component
|
// Import Component
|
||||||
import BaseFormMixin from '@/mixins/base-form-mixin';
|
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||||
import { Form } from 'vee-validate';
|
import { Form } from 'vee-validate';
|
||||||
import SiteFooter from '@/common-components/site-footer/site-footer.vue';
|
import siteFooter from '@/common-components/site-footer/site-footer.vue';
|
||||||
import SiteHeader from '@/common-components/site-header/site-header.vue';
|
import siteHeader from '@/common-components/site-header/site-header.vue';
|
||||||
import SiteSubHeader from '@/common-components/site-sub-header/site-sub-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 vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
|
||||||
import VinLocationInformation from './vin-location-information/vin-location-information.vue';
|
import vinLocationInformation from './vin-location-information/vin-location-information.vue';
|
||||||
import VinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
|
import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
|
||||||
import VinQuestion from './vin-question/vin-question.vue';
|
import vinQuestion from './vin-question/vin-question.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'vin-lookup',
|
name: 'vin-lookup',
|
||||||
mixins: [BaseFormMixin],
|
mixins: [baseFormMixin],
|
||||||
components: {
|
components: {
|
||||||
SiteFooter,
|
siteFooter,
|
||||||
SiteHeader,
|
siteHeader,
|
||||||
SiteSubHeader,
|
siteSubHeader,
|
||||||
Form,
|
Form,
|
||||||
VehicleBanner,
|
vehicleBanner,
|
||||||
VinLocationInformation,
|
vinLocationInformation,
|
||||||
VinLookupAlerts,
|
vinLookupAlerts,
|
||||||
VinQuestion,
|
vinQuestion,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const mainStore = useMainStore();
|
const mainStore = useMainStore();
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<TextboxQuestion
|
<textboxQuestion
|
||||||
v-model="vin"
|
v-model="vin"
|
||||||
cms-widget-name="VinNumberQuestionWidget"
|
cmsWidgetName="VinNumberQuestionWidget"
|
||||||
disable-auto-fill
|
disableAutoFill
|
||||||
input-id="vin-question"
|
id="vin-question-wrapper"
|
||||||
is-required
|
inputId="vin-question"
|
||||||
max-length="17"
|
isRequired
|
||||||
validation-rules="vin-required|vin-format"
|
maxLength="17"
|
||||||
|
validationRules="vin-required|vin-format"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -16,7 +17,7 @@ import { regex, required } from '@/helpers/validation-rules';
|
||||||
import { errorMessages } from '@/constants/error-messages';
|
import { errorMessages } from '@/constants/error-messages';
|
||||||
|
|
||||||
// Import Component(s)
|
// 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-required', required(errorMessages.VIN_REQUIRED));
|
||||||
defineRule('vin-format', regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
|
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'],
|
emits: ['update:modelValue'],
|
||||||
components: {
|
components: {
|
||||||
TextboxQuestion,
|
textboxQuestion,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
vin: {
|
vin: {
|
||||||
|
|
@ -42,3 +43,11 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
#vin-question-wrapper .form-test-error {
|
||||||
|
/**
|
||||||
|
Override extra margin-bottom in the error message in TextboxQuestion
|
||||||
|
*/
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue