From 4b18f7e06a0a70ad15a5a99587ebec6d3bbfd503 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Tue, 27 Jan 2026 16:57:37 -0500 Subject: [PATCH] INSR-7758: part-questions parity 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. --- .../button-question/button-question.vue | 11 + .../date-picker/date-picker.vue | 4 +- .../question-chain/question-chain.vue | 24 +- .../questions-page-layout.vue | 1 + .../shop-list-button/shop-list-button.vue | 3 +- .../site-sub-header/site-sub-header.vue | 4 + src/layouts/part-questions/part-questions.vue | 8 - .../policy-endorsements.vue | 118 --------- src/styles/common-validation-styles.scss | 21 -- src/styles/ux-variables.scss | 3 +- .../list-button-horizontal.spec.js | 16 -- .../list-button-horizontal.vue | 232 ++++-------------- src/ux-components/list-button/list-button.vue | 3 +- 13 files changed, 82 insertions(+), 366 deletions(-) diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index da7eb5c7..68ca6d57 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -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 { diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index b5cd4b77..bdd971cf 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -868,7 +868,7 @@ export default { } &.selected-date { - background-color: #e7f1f6; + background-color: $background-color-selected; border: solid 1px #0070d1; } @@ -905,7 +905,7 @@ export default { cursor: pointer; &.selected-time-slot { - background-color: #e7f1f6; + background-color: $background-color-selected; border: solid 1px #0070d1; color:#000; font-weight: 500; diff --git a/src/digital-components/question-chain/question-chain.vue b/src/digital-components/question-chain/question-chain.vue index 5f72221f..9b16c229 100644 --- a/src/digital-components/question-chain/question-chain.vue +++ b/src/digital-components/question-chain/question-chain.vue @@ -17,6 +17,7 @@ :modelValue="q.answerSelected" isRequired :validationRules="validationRules" + :buttonTypeString="'listButtonHorizontal'" @update:modelValue="handleAnswer(q, $event)" /> @@ -84,10 +85,6 @@ export default { if (!this.modelValue?.length > 0 && this.questions.length > 0) { // set this.currentQuestionNum to first valid question this.currentQuestionNum = this.questions[0].questionSequence; - // scroll the next question into view - this.$nextTick(() => { - document.querySelector('.current-question')?.scrollIntoView({ behavior: 'smooth' }); - }); } }, methods: { @@ -150,12 +147,6 @@ export default { // update to next question index // update count to display next question this.currentQuestionNum = parseInt(questionAnswer, 10); - // scroll the next question into view - this.$nextTick(() => { - document - .querySelector('.current-question') - .scrollIntoView({ behavior: 'smooth' }); - }); return false; } // reset current question index (removes .current-question class) @@ -172,11 +163,14 @@ export default { }; diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue index 6be20312..4ce11fa1 100644 --- a/src/iss-components/questions-page-layout/questions-page-layout.vue +++ b/src/iss-components/questions-page-layout/questions-page-layout.vue @@ -9,6 +9,7 @@ class="mt-4" cmsWidgetName="SiteSubHeaderWidget" /> diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue index 286008c8..8690e91a 100644 --- a/src/layouts/part-questions/part-questions.vue +++ b/src/layouts/part-questions/part-questions.vue @@ -8,8 +8,6 @@ ref="questionsPageLayout" v-model="selectedAnswers" :isMetaValid="meta.valid" - :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader" - :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy" :questionsData="questionsData" :validationRules="rules.optionRequired" :index="currentGlassIndex" @@ -70,12 +68,6 @@ export default { }; }, computed: { - AlertFewMoreQuestionsHeader() { - return this.getCmsContent('AlertPartsQuestions', 'HeadlineText'); - }, - AlertFewMoreQuestionsCopy() { - return this.getCmsContent('AlertPartsQuestions', 'BodyText'); - }, pageData() { return useMainStore().pageData(issPageValues.PART_QUESTIONS); }, diff --git a/src/layouts/policy-endorsements/policy-endorsements.vue b/src/layouts/policy-endorsements/policy-endorsements.vue index abdae24b..944c886a 100644 --- a/src/layouts/policy-endorsements/policy-endorsements.vue +++ b/src/layouts/policy-endorsements/policy-endorsements.vue @@ -192,124 +192,6 @@ export default { min-height: 1px; padding-left: .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; - } - } } } diff --git a/src/styles/common-validation-styles.scss b/src/styles/common-validation-styles.scss index c6cdb6f3..31eead8b 100644 --- a/src/styles/common-validation-styles.scss +++ b/src/styles/common-validation-styles.scss @@ -4,7 +4,6 @@ html { .has-error { // START HOVER - &.list-button-horizontal, &.list-button, &.list-button.list-group, &.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 { input[type="radio"] { +label { @@ -150,9 +140,7 @@ html { } .has-success { - // START HOVER - &.list-button-horizontal, &.list-button, &.list-button.list-group, &.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 { input[type="radio"] { +label { diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 31c55c03..e9455d7f 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -73,6 +73,7 @@ $cyan: #0dcaf0; //Heritage $heritage-blue-primary: #0070D1; $heritage-blue-secondary: #167cac; +$background-color-selected: #e7f1f6; // Darker gray $darker-gray: #525656; @@ -233,4 +234,4 @@ $border-input: 1px solid $gray-350; $border-input-focus: 2.5px solid $heritage-blue-primary; $svg-calendar-error-fill-color: $alert-red-bg; -$svg-calendar-error-stroke-color: '%23db0020'; // URL encoded #db0020 \ No newline at end of file +$svg-calendar-error-stroke-color: '%23db0020'; // URL encoded #db0020 diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index 87e7bd05..d6811c27 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -68,22 +68,6 @@ describe('list-button-horizontal.vue', () => { 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', () => { // Arrange/Act const { wrapper } = setupMocks({ diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 2da30954..b6b7ec26 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -3,8 +3,7 @@ v-bind="$props" v-model="selectedValue" :buttonWrapperClasses="[ - 'list-group list-button-horizontal d-flex flex-column w-100 base-input-button', - { strong: isStrongStyling }, + 'list-group list-button-horizontal d-flex flex-column w-100 base-input-button no-hover', ]">
@@ -37,195 +36,66 @@ export default { components: { baseInputButton }, - mixins: [inputButtonWrapperMixin], - computed: { - isStrongStyling() { - return this.additionalButtonStyling === 'listButtonHorizontalStrong'; - } - } + mixins: [inputButtonWrapperMixin] }; diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 6ef773e2..2a705820 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -73,7 +73,6 @@ export default { $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 { @@ -85,7 +84,7 @@ $heritage-checked-border-color: #0070d1; input[type="checkbox"] { position: static; //override bootstrap &:checked + .list-button-content { - background: $heritage-checked-background-color; + background: $background-color-selected; border-color: $heritage-checked-border-color; box-shadow: 0 0 0 1px $blue; &:not(.has-sub-copy) {