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

CSR-762 Cleanup

Browse source
This commit is contained in:
Katie 2022-09-22 11:32:45 -04:00
parent 14da65ad25
commit 87a4389e13
9 changed files with 403 additions and 1030 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
src/common-components/input-button-wrapper/input-button-wrapper.vue → src/common-components/base-input-button/base-input-button.vue
View file

@ -3,12 +3,6 @@
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId"
@mousedown.left="handleEventAction('click', $event)">
<!-- IBW modelValue: {{ modelValue }} <br />
IBW value: {{value}} <br/> -->
<!-- classes: {{classes}}<br/>
value: {{value}} <br/>
modelValue: {{modelValue}} <br/>
buttonId: {{buttonId}} <br/> -->
<input
:type="inputType"
:id="buttonId"
@ -31,7 +25,7 @@ import { useField } from "vee-validate";
import { toRef } from "vue";
export default {
name: "input-button-wrapper",
name: "base-input-button",
emits: ["change"],
model: {
prop: "modelValue",
@ -81,28 +75,10 @@ export default {
data() {
return {
valueToEmit: null,
hasFirstEventFired: false,
};
},
mounted() {
// console.log({
// isChecked: this.isChecked,
// modelValue: this.modelValue,
// value: this.value,
// });
console.log({
meta: this.meta,
isMultiSelect: this.isMultiSelect,
modelValue: this.modelValue,
isChecked: this.isChecked,
valid: this.meta.valid,
});
// const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked;
if (this.isChecked) {
// console.log("HI THERE");
this.handleChange(this.modelValue);
}
},
@ -114,26 +90,12 @@ export default {
CLICK: "click",
};
console.log({
handleKeypress: eventType,
// hasFirstEventFired: this.hasFirstEventFired,
});
if (this.isMultiSelect) {
// if (true) {
switch (eventType) {
// case eventTypes.CLICK:
case eventTypes.KEYPRESS_SUBMIT:
console.log("clicking");
// this.hasFirstEventFired = true;
this.handleClick(e);
break;
case eventTypes.CHANGE:
console.log(
"selectOnKeypress: ",
this.selectOnKeypress
);
// this.hasFirstEventFired = false;
this.selectOnKeypress
? this.handleClick(e)
: this.handleSelectionChange(e);
@ -143,123 +105,38 @@ export default {
switch (eventType) {
case eventTypes.CLICK:
case eventTypes.KEYPRESS_SUBMIT:
console.log("clicking");
// TODO KO may still need this since GA events, wouldn't want to trigger twice
// this.hasFirstEventFired = true;
this.handleClick(e);
break;
case eventTypes.CHANGE:
console.log(
"selectOnKeypress: ",
this.selectOnKeypress
);
// this.hasFirstEventFired = false;
this.selectOnKeypress
? this.handleClick(e)
: this.handleSelectionChange(e);
break;
}
}
// if (!this.hasFirstEventFired) {
// else {
// this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
// }
// else {
// this.hasFirstEventFired = true;
// this.selectOnKeypress
// ? this.handleClick(e)
// : this.handleSelectionChange(e);
// }
// this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
// this.handleClick(e);
// console.log({
// selectOnKeypress: this.selectOnKeypress,
// event: e,
// eventType: eventType,
// isClick: eventType === "click",
// isKeypress: eventType === "keypress",
// });
// console.log(eventType)
// click => click, keypress
// space => keypressSubmit, keypress
// arrow left/right => keypress
// if selectOnKeypress (YMMS)
// if click => emit event
// if space/enter => emit event
// if arrow => emit event
// else (!selectOnKeypress)
// if click => emit event
// if space/enter => emit event
// if arrow => handleSelection
// if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) {
// this.handleClick(e);
// }
// else {
// this.handleSelectionChange(e);
// }
},
handleSelectionChange(e) {
// console.log("HSC");
// console.log(e);
// console.log(this.value);
// console.log(this.modelValue);
// let isChecked = event.target.checked;
// console.log("BM value: ", this.value);
// let valueToEmit;
// console.log("isMultiselect")
// console.log(this.isMultiSelect)
// console.log({
// modelValue: this.modelValue,
// isMultiselect: this.isMultiSelect
// })
if (
this.isMultiSelect &&
(this.modelValue instanceof Array || this.modelValue == null)
) {
let newValue = this.modelValue ? [...this.modelValue] : [];
// console.log("newValue", newValue)
// console.log({
// newValue: newValue,
// // isChecked: isChecked
// })
if (!newValue.includes(this.value)) {
// console.log("isChecked")
newValue.push(this.value);
} else {
// console.log("isn't checked")
newValue.splice(newValue.indexOf(this.value), 1);
}
this.valueToEmit = newValue;
} else {
// console.log("not multi");
this.valueToEmit = this.value;
}
console.log("handlingChange", this.valueToEmit);
this.handleChange(this.valueToEmit);
this.pushClickEventToGA();
// if (this.selectOnKeypress) {
// this.handleClick(e)
// }
},
handleClick(e) {
// console.log("handleClick");
this.handleSelectionChange(e);
// console.log("HC");
// console.log({
// eventEmitting: e,
// valueToEmit: this.valueToEmit,
// });
this.$emit("change", this.valueToEmit);
},
pushClickEventToGA() {
@ -284,7 +161,7 @@ export default {
return this.isMultiSelect ? "checkbox" : "radio";
},
buttonId() {
return `${this.groupName} ${JSON.stringify(this.value)}`;
return `${this.groupName}-${JSON.stringify(this.value).replace(" ", "-")}`;
},
},
setup(props) {
@ -294,41 +171,18 @@ export default {
type: inputType,
validateOnValueUpdate: false,
validateOnMount: false,
// checkedValue: props.value,
// potentialInitialValue: props.selectedValues,
};
// Set initialValue for validation setup if pre-selected
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
// if (
// props.selectedValues &&
// (props.selectedValues.includes(props.value) ||
// props.selectedValues.includes(parseInt(props.value)))
// ) {
// fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
// }
// const { handleChange, errors, value } = useField(
// toRef(props, "groupName"),
// toRef(props, "validationRules"),
// fieldOptions
// );
console.log(props.validationRules);
const { handleChange, meta, errors, value } = useField(
toRef(props, "groupName"),
toRef(props, "validationRules"),
fieldOptions
);
// const validateValue = value;
return {
handleChange,
errors,
meta,
// validateValue,
fieldOptions, // only need to expose this for unit test purposes
};
},

99
src/common-components/button-question/button-question.vue
View file

@ -52,34 +52,6 @@
:textPosition="textPosition"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange" />
<!-- <component
:is="buttonType"
@isCheckedChanged="handleCheckedChanged"
:buttonID="answer.Name ? formatString(groupName) + '-' + answer.Name : formatString(groupName) + '-' + getAnswerString(answer, 'Text')"
:value="getValue(answer)"
:buttonLabel="answer.Text ? answer.Text : getAnswerString(answer, 'Name')"
:buttonLabelSubCopy="answer.SubText"
:textPosition="textPosition"
:isMultiSelect="isMultiSelect"
:groupName="formatString(groupName)"
:selectingInitiatesLoad="selectingInitiatesLoad"
:loaderColor="loaderColor"
:loaderPosition="loaderPosition"
:isWide=isWide
:isCashOrInsurance=isCashOrInsurance
:isRequired=isRequired
:buttonImage="answer.AnswerImageUrl"
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="getColLength"
:selectedValues="selectedValues"
data-test="button"
:validationRules="validationRules"
:class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
:valueToLogType="valueToLogType"
/> -->
<!-- For nested questions -->
<transition name="fade" mode="out-in">
<div
@ -150,9 +122,9 @@ export default {
},
data() {
return {
primaryValue: ""
}
},
primaryValue: "",
};
},
computed: {
getFieldSetClasses() {
if (this.isOverflowScrollable) {
@ -202,29 +174,32 @@ export default {
return "";
}
},
// selectedValues: {
// get: function () {
// return this.modelValue;
// },
// set: function (newValue) {
// // this.$emit("update:modelValue", newValue);
// },
// },
buttonsInfo() {
return (this.answers ?? [])?.map((answer) => ({
buttonLabel: answer.Text ?? answer,
altText: answer.Name ? answer.Name : answer,
buttonLabelSubCopy: answer.SubText,
buttonImage: answer.AnswerImageUrl,
buttonImageId: answer.ImageId,
groupName: this.formatString(this.groupName),
value: this.useTextForValue
? answer.Text
: answer.Name ?? answer,
}));
// TODO KO temporary. It should always just be an array
return (Array.isArray(this.answers) ? this.answers : [])?.map(
(answer) => ({
buttonLabel: answer.Text ?? answer,
altText: answer.Name ? answer.Name : answer,
buttonLabelSubCopy: answer.SubText,
buttonImage: answer.AnswerImageUrl,
buttonImageId: answer.ImageId,
groupName: this.formatString(this.groupName),
value: this.useTextForValue
? answer.Text
: answer.Name ?? answer,
})
);
// return (Array.isArray(this.answers) ? this.answers : [])?.map(
// (answer) => ({
// buttonLabel: answer.Text ?? answer,
// altText: answer.Name ? answer.Name : answer,
// buttonLabelSubCopy: answer.SubText,
// buttonImage: answer.AnswerImageUrl,
// buttonImageId: answer.ImageId,
// groupName: this.formatString(this.groupName),
// value: this.useTextForValue
// ? answer.Text
// : answer.Name ?? answer,
// })
// );
},
},
methods: {
@ -249,26 +224,10 @@ export default {
: this.formatString(answer.toString());
}
},
// handleCheckedChanged(val) {
// if (this.selectingInitiatesLoad) {
// this.selectedValues = val.value;
// } else {
// if (Array.isArray(this.selectedValues)) {
// const newSelectedValues = this.selectedValues;
// val.checkValue
// ? newSelectedValues.push(val.value)
// : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
// this.selectedValues = newSelectedValues;
// } else {
// this.selectedValues = val.value;
// }
// }
// this.$emit("isCheckedChanged", val);
// },
handleAnswerChange(primaryAnswerValue) {
console.log({
bqEvent: primaryAnswerValue
})
bqEvent: primaryAnswerValue,
});
this.primaryValue = primaryAnswerValue;
this.$emit("change", primaryAnswerValue);
this.$emit("update:modelValue", primaryAnswerValue);

25
src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
View file

@ -6,39 +6,40 @@
buttonType="listButtonHorizontal"
v-model="selectedValues"
isCashOrInsurance
isRequired
/>
isRequired />
</div>
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default ({
export default {
name: "cashOrInsuranceQuestion",
props: {
props: {
modelValue: String,
groupName: String,
cmsWidgetName: String,
},
computed: {
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
selectedValues: {
get: function() {
get: function () {
// Convert to CMS answer name from bool
var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
var cmsAnswerValue = this.modelValue
? "InsuranceAnswer"
: "CashAnswer";
return cmsAnswerValue;
},
set: function(newValue) {
set: function (newValue) {
// Convert back to bool for parent component
this.$emit("update:modelValue", newValue === "InsuranceAnswer");
}
},
},
},
components: {
buttonQuestion,
},
})
</script>
};
</script>

16
src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
View file

@ -24,21 +24,11 @@ export default ({
name: "windshieldOptions",
mixins: [buttonQuestionWrapperMixin],
props: {
// modelValue: Number,
groupName: String,
isAvailable: Boolean,
validationRules: String,
cmsWidgetName: String,
},
// methods: {
// // TODO KO is this being used? Always three options
// updateSelectedValues() {
// // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
// if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
// this.selectedValues = [this.answersToDisplay[0].Name];
// }
// },
// },
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
@ -47,12 +37,6 @@ export default ({
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
},
// watch: {
// isAvailable(val) {
// // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
// val && this.updateSelectedValues();
// }
// },
components: {
buttonQuestion,
}

1
src/mixins/vehicle-questions-mixin.js
View file

@ -115,7 +115,6 @@ export default {
// if single parts only
const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);
// save to store lineItems.glassParts
// TODO KO
self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
self.$refs.loadingModal.showModal();

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

@ -1,35 +1,35 @@
<template>
<inputButtonWrapper
:buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': isCashOrInsurance }
]"
:isMultiSelect="isMultiSelect"
:modelValue="modelValue"
:value="value"
:groupName="groupName"
:validationRules="validationRules"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange"
>
<!-- <div class="list-group list-button-horizontal d-flex flex-column w-100"
:class="[(errors.length > 0 || hasError) ? 'has-error' : '', isCashOrInsurance ? 'radio-fancy' : '']"
@keyup.space="triggerButton()" @keyup.up="handleKeyupArrow()" @keyup.down="handleKeyupArrow()"
@keyup.left="handleKeyupArrow()" @keyup.right="handleKeyupArrow()"> -->
<div class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
{{ buttonLabelSubCopy }}
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
</div>
<!-- </div> -->
</inputButtonWrapper>
<baseInputButton
:buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': isCashOrInsurance },
]"
:isMultiSelect="isMultiSelect"
:modelValue="modelValue"
:value="value"
:groupName="groupName"
:validationRules="validationRules"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange">
<div
class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
<span
v-if="buttonLabelSubCopy"
class="m-0 small"
:class="textPosition">
{{ buttonLabelSubCopy }}
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[loaderColor, loaderPosition]" />
</div>
</baseInputButton>
</template>
<script>
@ -37,312 +37,230 @@ import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
export default {
name: "listButtonHorizontal",
props: {
isMultiSelect: Boolean,
selectOnKeypress: Boolean,
groupName: String,
buttonID: String,
buttonLabel: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
textPosition: String,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: String,
isRequired: Boolean,
isCashOrInsurance: Boolean,
value: {
// Field initial value
type: String,
default: "",
name: "listButtonHorizontal",
props: {
isMultiSelect: Boolean,
selectOnKeypress: Boolean,
groupName: String,
buttonID: String,
buttonLabel: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
textPosition: String,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: String,
isRequired: Boolean,
isCashOrInsurance: Boolean,
value: {
// Field initial value
type: String,
default: "",
},
validationRules: String,
hasError: Boolean,
valueToLogType: String,
},
validationRules: String,
// selectedValues: [Array, String],
hasError: Boolean,
valueToLogType: String,
},
data() {
return {
isLoaderDisplayed: false,
// checkValue: Boolean,
};
},
// created() {
// if (Array.isArray(this.selectedValues)) {
// this.checkValue = this.isMultiSelect
// ? this.selectedValues.includes(this.value)
// : this.selectedValues[0] == this.value;
// }
// else {
// this.checkValue = this.selectedValues;
// }
// },
methods: {
// isValueSelectedByArray(arr) {
// return this.isMultiSelect
// ? arr.includes(this.value)
// : arr[0];
// },
displayLoader() {
this.isLoaderDisplayed = true;
data() {
return {
isLoaderDisplayed: false,
};
},
handleAnswerChange(e) {
// TODO KO all the buttons have this function
console.log(e)
this.$emit("change", e);
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
},
handleAnswerChange(e) {
this.$emit("change", e);
},
},
components: {
loader,
baseInputButton,
},
// handleInputChange() {
// if (!this.selectingInitiatesLoad) {
// this.handleCheckChange();
// }
// },
// handleKeyupArrow() {
// if (this.isMultiSelect) {
// return; // Prevent arrow keys from doing anything if element is a checkbox
// }
// if (!this.selectingInitiatesLoad) {
// this.handleCheckChange();
// }
// },
// triggerButton() {
// if (this.selectingInitiatesLoad) {
// this.displayLoader();
// this.handleCheckChange();
// }
// this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
// },
// handleCheckChange() {
// const emitEvent = {
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
// value: this.value,
// buttonId: this.buttonID && this.buttonID.toString(),
// };
// this.handleChange(this.value);
// this.$emit("isCheckedChanged", emitEvent);
// this.$emit("update:modelValue", emitEvent);
// }
},
components: {
loader,
inputButtonWrapper
},
// setup(props) {
// const inputType = props.isMultiSelect ? "checkbox" : "radio";
// const fieldOptions = {
// type: inputType,
// checkedValue: props.value,
// potentialInitialValue: props.selectedValues,
// };
// // Set initialValue for validation setup if pre-selected
// // NOTE: props.selectedValues could be an array of strings, or an array of integers...
// if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
// fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
// }
// const {
// handleChange,
// errors,
// value
// } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
// const validateValue = value;
// return {
// handleChange,
// errors,
// validateValue,
// fieldOptions, // only need to expose this for unit test purposes
// };
// },
};
</script>
<style lang="scss">
.list-button-horizontal {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
height: 0;
opacity: 0;
width: 0;
.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;
}
&: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;
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 4 !important;
}
}
+p {
display: none;
}
span {
font-size: .875rem;
}
}
// Cash/Insurance option radio button styling
&.radio-fancy {
.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;
position: absolute;
height: 0;
opacity: 0;
width: 0;
&:focus-visible+.list-button-horizontal-content {
border-radius: 0.5rem;
z-index: 2;
}
.list-button-horizontal-content {
cursor: pointer;
}
&:focus+.list-button-horizontal-content {
z-index: 3;
}
&:focus-visible + .list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 2;
}
&:checked+.list-button-horizontal-content {
&: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;
}
&: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;
box-shadow: none;
color: $white;
background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
border-radius: 0.5rem;
z-index: 5;
}
position: relative;
background: $white;
transition: all 150ms linear;
border: 1px solid $gray-500;
border-radius: 0;
width: 100%;
color: $gray-600;
&:checked:focus+.list-button-horizontal-content {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 4 !important;
}
}
&:checked+.list-button-horizontal-content p:first-child {
font-weight: 500;
}
+ p {
display: none;
}
span {
font-size: 0.875rem;
}
}
}
&.list-button-horizontal {
height: 100%;
label {
height: 100%;
// Cash/Insurance option radio button styling
&.radio-fancy {
.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%;
}
}
}
}
.col {
&:first-of-type {
.list-button-horizontal {
.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
}
&:last-of-type {
.list-button-horizontal {
.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.radio-fancy {
input[type="radio"] {
&:checked+.list-button-horizontal-content {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
&:first-of-type {
.list-button-horizontal {
.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
&:checked:focus+.list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
}
&:last-of-type {
.list-button-horizontal.radio-fancy {
input[type="radio"] {
&:checked+.list-button-horizontal-content {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
&:last-of-type {
.list-button-horizontal {
.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.radio-fancy {
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.radio-fancy {
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;
}
}
}
&:checked:focus+.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
}
}
}
}
</style>

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

@ -1,276 +1,140 @@
<template>
<!-- <div
class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
<!-- <input
:type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID"
:name="groupName"
:value="value"
:aria-required="isRequired"
v-model="checkValue"
:checked="checkValue"
@change="handleInputChange"
> -->
<!-- <label
tabindex="-1"
:for="buttonID"
:aria-label="buttonLabel"
class="d-flex flex-column justify-content-center py-3 px-4"
@mouseup="triggerButton"
> -->
<!-- LB value: {{ value }}<br />
LB modelValue: {{ modelValue }}
LB groupName: {{ groupName }} -->
<!-- , {'has-error': errors.length > 0 || hasError} -->
<!-- <inputButtonWrapper
v-bind="$props"
:classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]"
@change="(e) => $emit('change', e)"
> -->
<inputButtonWrapper
:isMultiSelect="isMultiSelect"
:value="value"
:groupName="groupName"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
:validationRules="validationRules"
@change="handleAnswerChange"
>
<div
tabindex="-1"
:aria-label="buttonLabel"
class="list-button-content d-flex flex-column justify-content-center py-3 px-4"
>
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
{{ buttonLabelSubCopy }}
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[this.loaderColor, this.loaderPosition]"
/>
</div>
</inputButtonWrapper>
<!-- </label> -->
<!-- </div> -->
<baseInputButton
:isMultiSelect="isMultiSelect"
:value="value"
:groupName="groupName"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
:validationRules="validationRules"
@change="handleAnswerChange">
<div
tabindex="-1"
:aria-label="buttonLabel"
class="list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
<span
v-if="buttonLabelSubCopy"
class="m-0 small"
:class="textPosition">
{{ buttonLabelSubCopy }}
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[this.loaderColor, this.loaderPosition]" />
</div>
</baseInputButton>
</template>
<script>
// import { useField } from "vee-validate";
// import { toRef } from "vue";
import loader from "@/ux-components/loader/loader";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
export default {
name: "listButton",
props: {
groupName: String, // TODO KO these shared props should be moved somewhere
buttonLabel: [Number, String],
// buttonID: [Number, String],
isRequired: Boolean,
textPosition: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: {
type: String,
default: "right",
name: "listButton",
props: {
groupName: String,
buttonLabel: [Number, String],
isRequired: Boolean,
textPosition: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: {
type: String,
default: "right",
},
hasError: Boolean,
valueToLogType: String,
validationRules: String,
},
hasError: Boolean,
valueToLogType: String,
validationRules: String,
},
data() {
return {
isLoaderDisplayed: false,
// checkValue: false,
};
},
// mounted() {
// if (Array.isArray(this.validateValue)) {
// this.checkValue = this.isValueSelectedByArray(this.selectedValues);
// const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
// if (this.checkValue != isSelectedByValidator) {
// this.handleChange(this.value);
// }
// }
// else {
// this.checkValue = this.selectedValues == this.value;
// }
// },
emits: ["change"],
methods: {
// isValueSelectedByArray(arr) {
// return this.isMultiSelect
// ? arr.includes(this.value)
// : arr[0];
// },
displayLoader() {
this.isLoaderDisplayed = true;
data() {
return {
isLoaderDisplayed: false,
};
},
handleAnswerChange(e) {
// TODO KO make it work on YMMS with keypresses
// There must be a way to tell the difference between keypress and
// submit via veevalidate. Check out the Form in vehicle-damage
if (this.selectingInitiatesLoad) {
this.displayLoader();
}
// else {
// console.log("lbTest event: ", e);
// // this.$emit("change", e);
// }
console.log(e)
this.$emit("change", e);
methods: {
displayLoader() {
this.isLoaderDisplayed = true;
},
handleAnswerChange(e) {
if (this.selectingInitiatesLoad) {
this.displayLoader();
}
this.$emit("change", e);
},
},
components: {
loader,
baseInputButton,
},
// handleInputChange() {
// if(!this.selectingInitiatesLoad) {
// this.handleCheckChange();
// }
// },
// handleKeyupArrow() {
// if (this.isMultiSelect) {
// return; // Prevent arrow keys from doing anything if element is a checkbox
// }
// },
// triggerButton() {
// if (this.selectingInitiatesLoad) {
// this.displayLoader();
// // this.handleCheckChange();
// }
// // TODO KO THIS IS IMPORTANT
// // Move this to input-button-wrapper?
// // this.pushEventToGA(
// // this.$route.query[queryStrings.FMG_PAGE],
// // this.GaActions.CLICKED,
// // this.value.toString(),
// // true,
// // this.valueToLogType
// // );
// },
// handleCheckChange() {
// const emitEvent = {
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
// value: this.value.toString(),
// buttonId: this.buttonID && this.buttonID.toString(),
// };
// this.handleChange(this.value);
// this.$emit("isCheckedChanged", emitEvent);
// this.$emit("update:modelValue", emitEvent);
// },
},
components: {
loader,
inputButtonWrapper,
},
// setup(props) {
// const inputType = props.isMultiSelect ? "checkbox" : "radio";
// const fieldOptions = {
// type: inputType,
// checkedValue: props.value,
// potentialInitialValue: props.selectedValues,
// };
// // Set initialValue for validation setup if pre-selected
// // NOTE: props.selectedValues could be an array of strings, or an array of integers...
// if (
// props.selectedValues &&
// (props.selectedValues.includes(props.value) ||
// props.selectedValues.includes(parseInt(props.value)))
// ) {
// fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
// }
// const { handleChange, errors, value } = useField(
// toRef(props, "groupName"),
// toRef(props, "validationRules"),
// fieldOptions
// );
// const validateValue = value;
// return {
// handleChange,
// errors,
// validateValue,
// fieldOptions, // only need to expose this for unit test purposes
// };
// },
};
</script>
<style lang="scss" scoped>
.list-group {
&.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
// height: 0;
// opacity: 0;
&.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
&:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
&:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
}
}
.list-button-content {
color: $gray-600;
}
}
}
.list-button-content {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
span {
&.small {
font-size: 0.75rem;
color: $gray-550;
}
}
span {
&.small {
font-size: 0.75rem;
color: $gray-550;
}
}
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
}
cursor: pointer;
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
}
cursor: pointer;
}
+ p {
display: none;
}
}
+ p {
display: none;
}
}
}
</style>

164
src/ux-components/list-card/list-card.vue
View file

@ -1,5 +1,5 @@
<template>
<inputButtonWrapper
<baseInputButton
:buttonWrapperClasses="[
'list-card w-100 rounded-3 d-flex align-items-center h-100',
{ horizontal: isWide },
@ -10,54 +10,24 @@
:groupName="groupName"
:validationRules="validationRules"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange"
>
<!-- <div :class="{ 'h-100': !isWide }">
<div
class="list-card w-100 rounded-3 d-flex align-items-center"
:class="[
'h-100',
isWide ? 'horizontal' : '',
errors.length > 0 || hasError ? 'has-error' : '',
]"
@keyup.space="triggerButton"
@keyup.up="handleKeyupArrow"
@keyup.down="handleKeyupArrow"
@keyup.left="handleKeyupArrow"
@keyup.right="handleKeyupArrow"
> -->
<!-- <input
:type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID"
:name="groupName"
:value="value"
:aria-required="isRequired"
v-model="checkValue"
:checked="checkValue"
@change="handleInputChange"
/> -->
@change="handleAnswerChange">
<div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
:class="getLabelClasses"
>
:class="getLabelClasses">
<img
:id="buttonImageId"
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
:src="buttonImage"
:alt="altText"
/>
:alt="altText" />
<p
v-if="!isWide"
class="small order-3"
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
>
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
{{ buttonLabel }}
</p>
<p
v-if="buttonLabelSubCopy && !isWide"
class="fs-7 m-0 order-4 sub-copy"
>
class="fs-7 m-0 order-4 sub-copy">
{{ buttonLabelSubCopy }}
</p>
<div v-if="isWide" class="order-2">
@ -67,21 +37,19 @@
</p>
</div>
</div>
<!-- </div>
</div> -->
</inputButtonWrapper>
</baseInputButton>
</template>
<script>
import { useField } from "vee-validate";
import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
export default {
name: "listCard",
components: {
inputButtonWrapper,
baseInputButton,
},
props: {
isMultiSelect: Boolean, //Defines use as checkbox
@ -91,7 +59,6 @@ export default {
buttonLabel: String, //Required: Label text
isRequired: Boolean, //Required: is aria-required required or not?
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
// buttonID: String, // TODO KO We don't use this //Required: Unique
groupName: String, //Rquired: Unique
buttonLabelSubCopy: String, //Optional: sub text
value: {
@ -99,32 +66,10 @@ export default {
type: String,
default: "",
},
// colLength: String,
validationRules: String,
// selectedValues: [Array, String],
// hasError: Boolean,
valueToLogType: String,
selectOnKeypress: Boolean,
},
data() {
return {
// checkValue: null,
};
},
// mounted() {
// if (Array.isArray(this.validateValue)) {
// this.checkValue = this.isValueSelectedByArray(this.selectedValues);
// const isSelectedByValidator = this.isValueSelectedByArray(
// this.validateValue
// );
// if (this.checkValue != isSelectedByValidator) {
// this.handleChange(this.value);
// }
// } else {
// this.checkValue = this.selectedValues == this.value;
// }
// },
computed: {
getLabelClasses() {
if (this.isWide) {
@ -139,98 +84,10 @@ export default {
},
},
methods: {
// isValueSelectedByArray(arr) {
// return this.isMultiSelect ? arr.includes(this.value) : arr[0];
// },
// handleInputChange() {
// if (!this.selectingInitiatesLoad) {
// this.handleCheckChange();
// }
// },
// handleKeyupArrow() {
// if (this.isMultiSelect) {
// return; // Prevent arrow keys from doing anything if element is a checkbox
// }
// if (!this.selectingInitiatesLoad) {
// this.handleCheckChange();
// }
// },
// triggerButton() {
// if (this.selectingInitiatesLoad) {
// this.displayLoader();
// this.handleCheckChange();
// }
// this.pushEventToGA(
// this.$route.query[queryStrings.FMG_PAGE],
// this.GaActions.CLICKED,
// this.value.toString(),
// true,
// this.valueToLogType
// );
// },
// handleCheckChange() {
// const emitEvent = {
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
// value: this.value.toString(),
// buttonId: this.buttonID && this.buttonID.toString(),
// };
// this.handleChange(this.value);
// this.$emit("isCheckedChanged", emitEvent);
// },
handleAnswerChange(e) {
// console.log(e)
this.$emit("change", e);
},
},
watch: {
// Changing this will impact pre-selection data loads on vehicle-parts.
// If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
// selectedValues(newVal) {
// if (typeof newVal === "string") {
// this.checkValue = newVal == this.value;
// } else if (newVal !== undefined) {
// this.checkValue = newVal.value;
// }
// },
},
// setup(props) {
// const inputType = props.isMultiSelect ? "checkbox" : "radio";
// const fieldOptions = {
// type: inputType,
// checkedValue: props.value, // EX: "Single" or "Passenger"
// potentialInitialValue: props.selectedValues,
// };
// // Set initialValue for validation setup if pre-selected
// // NOTE: props.selectedValues could be an array of strings, or an array of integers...
// if (
// props.selectedValues &&
// (props.selectedValues.includes(props.value) ||
// props.selectedValues.includes(parseInt(props.value)))
// ) {
// fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
// }
// const { handleChange, errors, value } = useField(
// toRef(props, "groupName"),
// toRef(props, "validationRules"),
// fieldOptions
// );
// // First land on the blank, unselected page, no handleChange
// // Land on page with initial values, handleChange
// const validateValue = value;
// return {
// handleChange,
// errors,
// validateValue,
// fieldOptions, // only need to expose this for unit test purposes
// };
// },
};
</script>
@ -260,9 +117,6 @@ export default {
input[type="checkbox"],
input[type="radio"] {
// opacity: 0;
// width: 0;
// height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
position: absolute;
+ .list-card-content {

68
src/ux-components/radio/radio.vue
View file

@ -1,6 +1,5 @@
<template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<inputButtonWrapper
<baseInputButton
:isMultiSelect="isMultiSelect"
:value="value"
:groupName="groupName"
@ -8,34 +7,17 @@
inputClasses="form-check-input"
:validationRules="validationRules"
@change="handleAnswerChange">
<!-- <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
<!-- <input
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChange"
:checked="checkValue"
:validationRules="validationRules"
/> -->
<div class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText
}}</span>
</div>
<!-- </div> -->
</inputButtonWrapper>
</baseInputButton>
</template>
<script>
import { useField } from "vee-validate";
import { queryStrings } from "@/constants/query-strings";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
export default {
name: "radio",
@ -54,51 +36,9 @@ export default {
validationRules: String,
valueToLogType: String,
},
data() {
return {
// checkValue: Boolean,
};
},
components: {
inputButtonWrapper,
baseInputButton,
},
// created() {
// if (this.selectedValues) {
// this.checkValue = this.selectedValues === this.value;
// this.handleCheckChange();
// } else{
// this.checkValue = false;
// }
// },
methods: {
// handleCheckChange() {
// this.handleChange(this.value);
// const emitEvent = {
// checkValue: this.checkValue,
// value: this.value.toString(),
// buttonID: this.buttonID && this.buttonID.toString(),
// };
// this.$emit("isCheckedChanged", emitEvent);
// this.$emit("update:modelValue", emitEvent);
// this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
// },
},
// setup(props) {
// const inputType = "radio";
// const {
// value: inputValue,
// handleChange,
// errors,
// } = useField(props.groupName, props.validationRules,
// {
// type: inputType,
// checkedValue: props.value,
// });
// return {
// handleChange,
// errors,
// };
// },
};
</script>