jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/digital/SSR-178

Browse source
This commit is contained in:
Kroell 2023-01-09 09:21:03 -05:00
commit 97412df60b
9 changed files with 95 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.eslintrc.js
View file

@ -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': {

12
src/layouts/vin-lookup/vin-location-information/vin-location-information.vue
View file

@ -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 {

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

@ -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>

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

@ -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: {

12
src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue
View file

@ -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: {

66
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -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();

27
src/layouts/vin-lookup/vin-question/vin-question.vue
View file

@ -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>

32
src/styles/common-error-styles.scss
View file

@ -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;
}
}
}

2
src/ux-components/button-main/button-main.vue
View file

@ -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' : '',