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.spec.js b/src/digital-components/question-chain/question-chain.spec.js index 200aa8cb..6e92a3d1 100644 --- a/src/digital-components/question-chain/question-chain.spec.js +++ b/src/digital-components/question-chain/question-chain.spec.js @@ -24,8 +24,6 @@ function setupMocks({ } ] }) { - Element.prototype.scrollIntoView = jest.fn(); - const mountOptions = getMountOptions({}); mountOptions.propsData = { questionData: questionDataProp @@ -254,20 +252,6 @@ describe('Question Chain component', () => { expect(result).toBeFalsy(); }); - test('should trigger scroll to .current-question if returnedAnswer is a nextQuestion (not a final answer)', async () => { - // Arrange - const { wrapper } = setupMocks({}); - const testReturnedAnswer = '1|nextQuestion|DB10840|No'; - - // Act - wrapper.vm.getQuestionChainAnswerIfComplete(testReturnedAnswer); - - await nextTick(); - - // Assert - expect(Element.prototype.scrollIntoView).toHaveBeenCalled(); - }); - test('should return answer object if returnedAnswer is a final matching answer', async () => { // Arrange const { wrapper } = setupMocks({}); 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/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue index c84575b4..8b96d450 100644 --- a/src/layouts/tpa-submit/tpa-submit.vue +++ b/src/layouts/tpa-submit/tpa-submit.vue @@ -390,6 +390,8 @@ export default { hr { margin: 1.875rem 0rem; + border-top: 1px solid #d4d6d8; + opacity: 1; } .fw-bold { 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/alert/alert.vue b/src/ux-components/alert/alert.vue index 1fa8a155..0537599f 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -11,7 +11,7 @@ - + {{ alertHeadline }}