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

Merge pull request #1032 from Safelite/feature/humphries/INSR-7758

Browse source 
INSR-7758: part-questions parity
This commit is contained in:
AHumphriesSL 2026-01-28 11:52:44 -05:00 committed by GitHub
commit c752c40c27
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 88 additions and 383 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 {

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

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

16
src/digital-components/question-chain/question-chain.spec.js
View file

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

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

@ -17,6 +17,7 @@
:modelValue="q.answerSelected"
isRequired
:validationRules="validationRules"
:buttonTypeString="'listButtonHorizontal'"
@update:modelValue="handleAnswer(q, $event)" />
</transition>
</div>
@ -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 {
};
</script>
<style lang="scss" scoped>
.questionBlock:not(:nth-of-type(1)){
.button-question.radioQuestion >div {
margin-top: 0.73rem;
.questionBlock {
.radioQuestion {
margin-bottom: 1rem;
}
&:not(:first-of-type) {
.radioQuestion {
padding-top: 1rem;
}
}
}
</style>

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

@ -9,6 +9,7 @@
class="mt-4"
cmsWidgetName="SiteSubHeaderWidget" />
<alert
v-if="alertFewMoreQuestionsHeader || alertFewMoreQuestionsCopy"
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
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-color: #CACBCC;
$heritage-box-shadow: 0 1px 5px rgba($black, 0.2);
$heritage-checked-background-color: #e7f1f6;
$heritage-checked-border-color: #0070d1;
.list-button {
@ -119,7 +118,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;
.button-label-copy {

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

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

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

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

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

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

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

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

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

@ -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
$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');
});
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({

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

@ -3,11 +3,10 @@
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',
]">
<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">
<span
class="m-0"
:class="textPosition">
@ -37,195 +36,71 @@ export default {
components: {
baseInputButton
},
mixins: [inputButtonWrapperMixin],
computed: {
isStrongStyling() {
return this.additionalButtonStyling === 'listButtonHorizontalStrong';
}
}
mixins: [inputButtonWrapperMixin]
};
</script>
<style lang="scss" scoped>
.list-button-horizontal {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
height: 0;
opacity: 0;
width: 0;
.list-button-horizontal-content {
padding: 0.625rem;
border: $border-input;
height: 2.875rem;
outline: none;
position: relative;
background: $white;
transition: all 150ms linear;
width: 100%;
color: $gray-600;
.list-button-horizontal-content {
cursor: pointer;
}
&: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;
}
}
span {
font-weight: 400;
color: $darker-gray;
}
}
&:last-of-type {
.list-button-horizontal {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
.list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
//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;
}
}
&.selected {
input + .list-button-horizontal-content {
box-shadow: none;
border: 1px solid $heritage-blue-primary;
background: $blue-100;
span {
color: $black;
font-weight: 600;
}
}
}
&: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;
}
}
&.has-success {
input + .list-button-horizontal-content {
border-color: $success;
}
}
}
.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>

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

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