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

INSR-7758: part-questions parity

Browse source 
Mostly actually an update to questions-page-layout, question-chain,
button-question and list-button-horizontal, since those are the
actual bulk of what this page.
This commit is contained in:
Alex Humphries 2026-01-27 16:57:37 -05:00
parent fd1620b4c7
commit 4b18f7e06a
13 changed files with 82 additions and 366 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/digital-components/button-question/button-question.vue
View file

@ -355,6 +355,17 @@ export default {
} }
} }
} }
&:has(.list-button-horizontal) {
.question-text {
margin-bottom: .25rem;
font-weight: 600;
}
fieldset {
border-radius: $border-radius-list-button;
box-shadow: $box-shadow-input;
}
}
} }
.small-question-text { .small-question-text {

4
src/digital-components/date-picker/date-picker.vue
View file

@ -868,7 +868,7 @@ export default {
} }
&.selected-date { &.selected-date {
background-color: #e7f1f6; background-color: $background-color-selected;
border: solid 1px #0070d1; border: solid 1px #0070d1;
} }
@ -905,7 +905,7 @@ export default {
cursor: pointer; cursor: pointer;
&.selected-time-slot { &.selected-time-slot {
background-color: #e7f1f6; background-color: $background-color-selected;
border: solid 1px #0070d1; border: solid 1px #0070d1;
color:#000; color:#000;
font-weight: 500; font-weight: 500;

24
src/digital-components/question-chain/question-chain.vue
View file

@ -17,6 +17,7 @@
:modelValue="q.answerSelected" :modelValue="q.answerSelected"
isRequired isRequired
:validationRules="validationRules" :validationRules="validationRules"
:buttonTypeString="'listButtonHorizontal'"
@update:modelValue="handleAnswer(q, $event)" /> @update:modelValue="handleAnswer(q, $event)" />
</transition> </transition>
</div> </div>
@ -84,10 +85,6 @@ export default {
if (!this.modelValue?.length > 0 && this.questions.length > 0) { if (!this.modelValue?.length > 0 && this.questions.length > 0) {
// set this.currentQuestionNum to first valid question // set this.currentQuestionNum to first valid question
this.currentQuestionNum = this.questions[0].questionSequence; this.currentQuestionNum = this.questions[0].questionSequence;
// scroll the next question into view
this.$nextTick(() => {
document.querySelector('.current-question')?.scrollIntoView({ behavior: 'smooth' });
});
} }
}, },
methods: { methods: {
@ -150,12 +147,6 @@ export default {
// update to next question index // update to next question index
// update count to display next question // update count to display next question
this.currentQuestionNum = parseInt(questionAnswer, 10); this.currentQuestionNum = parseInt(questionAnswer, 10);
// scroll the next question into view
this.$nextTick(() => {
document
.querySelector('.current-question')
.scrollIntoView({ behavior: 'smooth' });
});
return false; return false;
} }
// reset current question index (removes .current-question class) // reset current question index (removes .current-question class)
@ -172,11 +163,14 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.questionBlock {
.questionBlock:not(:nth-of-type(1)){ .radioQuestion {
.button-question.radioQuestion >div { margin-bottom: 1rem;
margin-top: 0.73rem; }
&:not(:first-of-type) {
.radioQuestion {
padding-top: 1rem;
}
} }
} }
</style> </style>

1
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -9,6 +9,7 @@
class="mt-4" class="mt-4"
cmsWidgetName="SiteSubHeaderWidget" /> cmsWidgetName="SiteSubHeaderWidget" />
<alert <alert
v-if="alertFewMoreQuestionsHeader || alertFewMoreQuestionsCopy"
ref="alertFewMoreQuestions" ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget" cmsWidgetName="alertWidget"
alertClass="alert-warning" alertClass="alert-warning"

3
src/iss-components/shop-list-button/shop-list-button.vue
View file

@ -110,7 +110,6 @@ export default {
$heritage-border-radius: 60px; $heritage-border-radius: 60px;
$heritage-border-color: #CACBCC; $heritage-border-color: #CACBCC;
$heritage-box-shadow: 0 1px 5px rgba($black, 0.2); $heritage-box-shadow: 0 1px 5px rgba($black, 0.2);
$heritage-checked-background-color: #e7f1f6;
$heritage-checked-border-color: #0070d1; $heritage-checked-border-color: #0070d1;
.list-button { .list-button {
@ -119,7 +118,7 @@ $heritage-checked-border-color: #0070d1;
input[type="checkbox"] { input[type="checkbox"] {
position: static; //override bootstrap position: static; //override bootstrap
&:checked + .list-button-content { &:checked + .list-button-content {
background: $heritage-checked-background-color; background: $background-color-selected;
border-color: $heritage-checked-border-color; border-color: $heritage-checked-border-color;
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
.button-label-copy { .button-label-copy {

4
src/iss-components/site-sub-header/site-sub-header.vue
View file

@ -190,5 +190,9 @@ p {
text-align: left; text-align: left;
} }
} }
:deep(b) {
color: $black;
font-weight: 600;
}
} }
</style> </style>

8
src/layouts/part-questions/part-questions.vue
View file

@ -8,8 +8,6 @@
ref="questionsPageLayout" ref="questionsPageLayout"
v-model="selectedAnswers" v-model="selectedAnswers"
:isMetaValid="meta.valid" :isMetaValid="meta.valid"
:alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
:alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
:questionsData="questionsData" :questionsData="questionsData"
:validationRules="rules.optionRequired" :validationRules="rules.optionRequired"
:index="currentGlassIndex" :index="currentGlassIndex"
@ -70,12 +68,6 @@ export default {
}; };
}, },
computed: { computed: {
AlertFewMoreQuestionsHeader() {
return this.getCmsContent('AlertPartsQuestions', 'HeadlineText');
},
AlertFewMoreQuestionsCopy() {
return this.getCmsContent('AlertPartsQuestions', 'BodyText');
},
pageData() { pageData() {
return useMainStore().pageData(issPageValues.PART_QUESTIONS); return useMainStore().pageData(issPageValues.PART_QUESTIONS);
}, },

118
src/layouts/policy-endorsements/policy-endorsements.vue
View file

@ -192,124 +192,6 @@ export default {
min-height: 1px; min-height: 1px;
padding-left: .9375rem; padding-left: .9375rem;
padding-right: .9375rem; padding-right: .9375rem;
.windshield-chip-count-question {
:deep(.col:first-of-type) {
.list-button-horizontal {
border-bottom-left-radius: $border-radius-list-button;
border-top-left-radius: $border-radius-list-button;
&:hover {
box-shadow: none;
}
.list-button-horizontal-content {
border-bottom-left-radius: $border-radius-list-button;
border-top-left-radius: $border-radius-list-button;
border-right-width: 0;
span {
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
color: #525656;
}
}
&.selected {
.list-button-horizontal-content {
span {
color: #000;
font-weight: 600;
}
}
}
}
}
:deep(.col:last-of-type) {
.list-button-horizontal {
border-bottom-right-radius: $border-radius-list-button;
border-top-right-radius: $border-radius-list-button;
&:hover {
box-shadow: none;
}
.list-button-horizontal-content {
border-bottom-right-radius: $border-radius-list-button;
border-top-right-radius: $border-radius-list-button;
span {
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
color: #525656;
}
}
&.selected {
.list-button-horizontal-content {
span {
font-weight: 600;
color: #000;
}
}
}
}
}
:deep(.list-button-horizontal) {
.list-button-horizontal-content {
padding: 0.625rem;
border: 1px solid #b3b4b5;
height: 2.875rem;
}
&.selected {
.list-button-horizontal-content {
border: 1px solid #0070d1;
box-shadow: none;
}
}
input[type="radio"] {
&:focus + .list-button-horizontal-content {
box-shadow: none;
border: 2.5px solid #0070d1;
outline: none;
}
}
&.has-error {
border: none;
.list-button-horizontal-content {
border: 1px solid #db0020;
}
input[type="radio"] {
&:focus + .list-button-horizontal-content {
border: 2.5px solid #db0020;
}
}
}
}
:deep(fieldset) {
box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
border-radius: $border-radius-list-button;
}
}
:deep(.question-text) {
line-height: 1.5rem;
margin-bottom: .3125rem;
& > span {
text-align: left;
line-height: 1.5rem;
font-weight: 600;
}
}
} }
} }

21
src/styles/common-validation-styles.scss
View file

@ -4,7 +4,6 @@ html {
.has-error { .has-error {
// START HOVER // START HOVER
&.list-button-horizontal,
&.list-button, &.list-button,
&.list-button.list-group, &.list-button.list-group,
&.list-card &.option-label { &.list-card &.option-label {
@ -84,15 +83,6 @@ html {
} }
} }
&.list-button-horizontal {
color: $red;
input[type="checkbox"]:focus+label,
input[type="radio"]:focus+label {
box-shadow: 0 0 1px $red;
}
}
&.grid-item { &.grid-item {
input[type="radio"] { input[type="radio"] {
+label { +label {
@ -150,9 +140,7 @@ html {
} }
.has-success { .has-success {
// START HOVER // START HOVER
&.list-button-horizontal,
&.list-button, &.list-button,
&.list-button.list-group, &.list-button.list-group,
&.list-card &.option-label { &.list-card &.option-label {
@ -232,15 +220,6 @@ html {
} }
} }
&.list-button-horizontal {
color: $success;
input[type="checkbox"]:focus+label,
input[type="radio"]:focus+label {
box-shadow: 0 0 1px $success;
}
}
&.grid-item { &.grid-item {
input[type="radio"] { input[type="radio"] {
+label { +label {

3
src/styles/ux-variables.scss
View file

@ -73,6 +73,7 @@ $cyan: #0dcaf0;
//Heritage //Heritage
$heritage-blue-primary: #0070D1; $heritage-blue-primary: #0070D1;
$heritage-blue-secondary: #167cac; $heritage-blue-secondary: #167cac;
$background-color-selected: #e7f1f6;
// Darker gray // Darker gray
$darker-gray: #525656; $darker-gray: #525656;
@ -233,4 +234,4 @@ $border-input: 1px solid $gray-350;
$border-input-focus: 2.5px solid $heritage-blue-primary; $border-input-focus: 2.5px solid $heritage-blue-primary;
$svg-calendar-error-fill-color: $alert-red-bg; $svg-calendar-error-fill-color: $alert-red-bg;
$svg-calendar-error-stroke-color: '%23db0020'; // URL encoded #db0020 $svg-calendar-error-stroke-color: '%23db0020'; // URL encoded #db0020

16
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -68,22 +68,6 @@ describe('list-button-horizontal.vue', () => {
expect(input.attributes()['aria-required']).toEqual('true'); expect(input.attributes()['aria-required']).toEqual('true');
}); });
it("is cash or insurance button => has 'strong' class", () => {
// Arrange/Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
additionalButtonStyling: 'listButtonHorizontalStrong'
}
}
});
// Assert
const label = wrapper.find('label');
expect(label.classes()).toContain('strong');
});
test('has buttonLabel => displays buttonLabel', () => { test('has buttonLabel => displays buttonLabel', () => {
// Arrange/Act // Arrange/Act
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({

232
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -3,8 +3,7 @@
v-bind="$props" v-bind="$props"
v-model="selectedValue" v-model="selectedValue"
:buttonWrapperClasses="[ :buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100 base-input-button', 'list-group list-button-horizontal d-flex flex-column w-100 base-input-button no-hover',
{ strong: isStrongStyling },
]"> ]">
<div <div
class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-3"> class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-3">
@ -37,195 +36,66 @@ export default {
components: { components: {
baseInputButton baseInputButton
}, },
mixins: [inputButtonWrapperMixin], mixins: [inputButtonWrapperMixin]
computed: {
isStrongStyling() {
return this.additionalButtonStyling === 'listButtonHorizontalStrong';
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list-button-horizontal { .list-button-horizontal {
input[type="radio"], .list-button-horizontal-content {
input[type="checkbox"] { padding: 0.625rem;
position: absolute; border: $border-input;
height: 0; height: 2.875rem;
opacity: 0; outline: none;
width: 0; position: relative;
background: $white;
transition: all 150ms linear;
border: $border-input;
width: 100%;
color: $gray-600;
.list-button-horizontal-content { span {
cursor: pointer; font-weight: 400;
} color: $darker-gray;
&:focus-visible + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 2;
}
&:focus + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 3;
}
&:checked + .list-button-horizontal-content {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
outline: none;
z-index: 2;
span {
font-weight: 500;
color: $black;
}
}
&:checked:focus + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-horizontal-content p:first-child {
font-weight: 500;
}
}
.list-button-horizontal-content {
outline: none;
position: relative;
background: $white;
transition: all 150ms linear;
border: 1px solid $gray-500;
border-radius: 0;
width: 100%;
color: $gray-600;
span {
font-size: 0.875rem;
}
}
// Cash/Insurance option radio button styling
&.strong {
.list-button-horizontal-content {
border: 1px solid $blue-700;
z-index: 2;
color: $blue;
span {
font-size: 1rem;
font-weight: 500;
}
}
.list-button-horizontal-content:hover {
background-color: $blue-700;
color: $white;
box-shadow: none;
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
height: 0;
opacity: 0;
width: 0;
&:focus-visible + .list-button-horizontal-content {
border-radius: 0.5rem;
z-index: 2;
}
&:focus + .list-button-horizontal-content {
z-index: 3;
}
&:checked + .list-button-horizontal-content {
outline: none;
box-shadow: none;
color: $white;
background: linear-gradient(84.45deg, #125b7e 0%, #3b8fb8 100%);
border-radius: 0.5rem;
z-index: 5;
}
&:checked:focus + .list-button-horizontal-content {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&:checked + .list-button-horizontal-content p:first-child {
font-weight: 500;
}
}
}
&.list-button-horizontal {
height: 100%;
label {
height: 100%;
}
}
}
.windshield-chip-count-question {
.col,
.list-group {
border-radius: 0;
&:first-of-type {
.list-button-horizontal {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
} }
}
&:last-of-type { &.selected {
.list-button-horizontal { input + .list-button-horizontal-content {
border-bottom-right-radius: 0.5rem; box-shadow: none;
border-top-right-radius: 0.5rem; border: 1px solid $heritage-blue-primary;
background: $blue-100;
.list-button-horizontal-content { span {
border-bottom-right-radius: 0.5rem; color: $black;
border-top-right-radius: 0.5rem; font-weight: 600;
}
}
}
//Cash/insurance styling
&:first-of-type {
.list-button-horizontal.strong {
input[type="radio"] {
&:checked + .list-button-horizontal-content {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:checked:focus + .list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
}
&:last-of-type {
.list-button-horizontal.strong {
input[type="radio"] {
&:checked + .list-button-horizontal-content {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&:checked:focus + .list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
} }
} }
} }
&:focus-within {
input +.list-button-horizontal-content {
box-shadow: none;
border: 2.5px solid $heritage-blue-primary;
}
}
&.has-error {
input + .list-button-horizontal-content {
border-color: $red;
}
}
}
.col:first-of-type {
.list-button-horizontal-content {
border-bottom-left-radius: $border-radius-list-button;
border-top-left-radius: $border-radius-list-button;
border-right-width: 0;
}
}
.col:last-of-type {
.list-button-horizontal-content {
border-bottom-right-radius: $border-radius-list-button;
border-top-right-radius: $border-radius-list-button;
}
} }
</style> </style>

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

@ -73,7 +73,6 @@ export default {
$heritage-border-radius: 60px; $heritage-border-radius: 60px;
$heritage-border-color: #CACBCC; $heritage-border-color: #CACBCC;
$heritage-box-shadow: 0 1px 5px rgba($black, 0.2); $heritage-box-shadow: 0 1px 5px rgba($black, 0.2);
$heritage-checked-background-color: #e7f1f6;
$heritage-checked-border-color: #0070d1; $heritage-checked-border-color: #0070d1;
.loader { .loader {
@ -85,7 +84,7 @@ $heritage-checked-border-color: #0070d1;
input[type="checkbox"] { input[type="checkbox"] {
position: static; //override bootstrap position: static; //override bootstrap
&:checked + .list-button-content { &:checked + .list-button-content {
background: $heritage-checked-background-color; background: $background-color-selected;
border-color: $heritage-checked-border-color; border-color: $heritage-checked-border-color;
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
&:not(.has-sub-copy) { &:not(.has-sub-copy) {