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

Merge branch 'develop' into feature/humphries/INSR-7768

Browse source
This commit is contained in:
Alex Humphries 2026-01-07 15:21:29 -05:00
commit bc56e69bdd
7 changed files with 56 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/digital-components/textbox-question/textbox-question.vue
View file

@ -271,8 +271,8 @@ input::-webkit-date-and-time-value {
}
.form-test-error span {
color: #d4281c;
font-size: 0.875rem;
font-weight: 500;
font-size: 1rem;
font-weight: 400;
}
.input-wrapper {

4
src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
View file

@ -2,7 +2,6 @@
<buttonQuestion
ref="policyVehiclesQuestion"
v-model="selectedVehicleVin"
:questionText="questionText"
groupName="policyVehiclesQuestionOption"
buttonTypeString="listButton"
isOverflowScrollable
@ -25,9 +24,6 @@ export default ({
},
emits: ['update:modelValue'],
computed: {
questionText() {
return this.getCmsContent('PolicyVehiclesQuestion', 'QuestionText');
},
answers() {
const policyVehiclesAnswerFromCMS = this.getCmsContent('PolicyVehiclesQuestion', 'Answers');
const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerFromCMS];

23
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -13,11 +13,20 @@
<div class="iss-heritage-container-width">
<div class="policy-vehicles-container iss-heritage-content-container-width">
<div class="select-car-form rounded text-center">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
<policyVehiclesQuestion
v-model="selectedVehicleVin"
cmsWidgetName="PolicyVehiclesQuestion"
:vehicles="VehiclesForQuestions"
:validationRules="rules.optionRequired" />
:validationRules="rules.optionRequired"
class="mb-2"/>
<buttonMain
:variant="buttonVariants.primary"
buttonText="Add another vehicle"
class="w-100"
@clickEvent="addAnotherVehicle" />
<alert
v-if="displayNoServiceAlert"
ref="AlertNoService"
@ -59,10 +68,15 @@ import {
} from '@/helpers/policy-vehicle-helper';
import coverageType from '@/constants/coverage-type';
import alert from '@/ux-components/alert/alert.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
import buttonVariants from '@/constants/button-variants';
export default {
name: 'policy-vehicles',
components: {
buttonMain,
siteSubHeader,
siteHeader,
siteFooter,
policyVehiclesQuestion,
@ -90,7 +104,8 @@ export default {
rules: {
optionRequired: globalRules.OPTION_REQUIRED
},
displayNoServiceAlert: false
displayNoServiceAlert: false,
buttonVariants
};
},
computed: {
@ -274,6 +289,10 @@ export default {
data: responseError.data
};
}
},
async addAnotherVehicle() {
this.selectedVehicleVin = vehicleSelectionOptions.VEHICLE_NOT_LISTED;
await this.forwardButtonAction();
}
}
};

10
src/styles/common-styles.scss
View file

@ -191,7 +191,7 @@ $heritage-btn-width: 9.0625rem; // 145px
.btn {
position: relative;
--bs-btn-font-weight: #{$font-weight-bolder};
--bs-btn-font-weight: 600;
min-height: $heritage-btn-height;
min-width: $heritage-btn-width;
letter-spacing: inherit;
@ -203,10 +203,10 @@ $heritage-btn-width: 9.0625rem; // 145px
@include heritage-btn-variant('secondary', $white, $heritage-blue-secondary, transparent, true);
@include heritage-btn-link('link', $blue, transparent, $heritage-blue-secondary);
@include heritage-btn-size('lg', 0.625rem, 1.25rem, 20px, $heritage-btn-border-radius);
@include heritage-btn-size('md', 7px, 15px, 15px, $heritage-btn-border-radius);
@include heritage-btn-size('sm', 3px, 6px, 12px, $heritage-btn-border-radius);
@include heritage-btn-size('xs', 1px, 5px, 12px, $heritage-btn-border-radius);
@include heritage-btn-size('lg', 0.625rem, 1.25rem);
@include heritage-btn-size('md', 7px, 15px);
@include heritage-btn-size('sm', 3px, 6px);
@include heritage-btn-size('xs', 1px, 5px);
&.btn-link {
--bs-btn-padding-x: 0px;

4
src/styles/mixins/customMixins.scss
View file

@ -44,9 +44,9 @@
}
}
@mixin heritage-btn-size($size, $y-padding, $x-padding, $font-size, $border-radius) {
@mixin heritage-btn-size($size, $y-padding, $x-padding) {
&.btn-#{$size} {
@include button-size($y-padding, $x-padding, $font-size, $border-radius);
@include button-size($y-padding, $x-padding, $font-size-base, $heritage-btn-border-radius);
}
}

10
src/styles/shared-input-button-styles.scss
View file

@ -1,5 +1,15 @@
.base-input-button {
&:not(:disabled):hover {
cursor: pointer;
&.list-button,
&.list-button-horizontal,
&.list-card {
&:not(.selected):not(.no-hover) {
position: relative;
z-index: 5;
@include box-shadow-hover($blue-300);
}
}
}
}

35
src/ux-components/list-button/list-button.vue
View file

@ -2,7 +2,7 @@
<baseInputButton
v-bind="$props"
v-model="selectedValue"
buttonWrapperClasses="list-group base-input-button list-button d-flex flex-column w-100">
buttonWrapperClasses="list-group base-input-button list-button no-hover d-flex flex-column w-100 mb-2">
<div
:aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
@ -67,6 +67,12 @@ export default {
</script>
<style lang="scss" scoped>
$heritage-border-radius: 60px;
$heritage-border-color: #CACBCC;
$heritage-box-shadow: 0 1px 5px rgba($black, 0.2);
$heritage-checked-background-color: #e7f1f6;
$heritage-checked-border-color: #0070d1;
.loader {
position: absolute;
}
@ -76,20 +82,10 @@ export default {
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
&:focus-within + .list-button-content {
border: $border-input-focus;
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: #e7f1f6;
border-color: $heritage-blue-primary;
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
background: $heritage-checked-background-color;
border-color: $heritage-checked-border-color;
box-shadow: 0 0 0 1px $blue;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
@ -98,12 +94,14 @@ export default {
}
}
.list-button-content {
color: $gray-600;
color: $black;
font-weight: $font-weight-semibold;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-xl;
border: 1px solid $gray-350;
border-radius: $heritage-border-radius;
border: 1px solid $heritage-border-color;
box-shadow: $heritage-box-shadow;
width: 100%;
outline: none;
box-shadow: $box-shadow-input;
@ -112,8 +110,7 @@ export default {
span {
&.small {
font-size: 0.75rem;
color: $gray-550;
color: $darker-gray;
}
}
}