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 }]" :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId" :for="buttonId"
@mousedown.left="handleEventAction('click', $event)"> @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 <input
:type="inputType" :type="inputType"
:id="buttonId" :id="buttonId"
@ -31,7 +25,7 @@ import { useField } from "vee-validate";
import { toRef } from "vue"; import { toRef } from "vue";
export default { export default {
name: "input-button-wrapper", name: "base-input-button",
emits: ["change"], emits: ["change"],
model: { model: {
prop: "modelValue", prop: "modelValue",
@ -81,28 +75,10 @@ export default {
data() { data() {
return { return {
valueToEmit: null, valueToEmit: null,
hasFirstEventFired: false,
}; };
}, },
mounted() { 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) { if (this.isChecked) {
// console.log("HI THERE");
this.handleChange(this.modelValue); this.handleChange(this.modelValue);
} }
}, },
@ -114,26 +90,12 @@ export default {
CLICK: "click", CLICK: "click",
}; };
console.log({
handleKeypress: eventType,
// hasFirstEventFired: this.hasFirstEventFired,
});
if (this.isMultiSelect) { if (this.isMultiSelect) {
// if (true) {
switch (eventType) { switch (eventType) {
// case eventTypes.CLICK:
case eventTypes.KEYPRESS_SUBMIT: case eventTypes.KEYPRESS_SUBMIT:
console.log("clicking");
// this.hasFirstEventFired = true;
this.handleClick(e); this.handleClick(e);
break; break;
case eventTypes.CHANGE: case eventTypes.CHANGE:
console.log(
"selectOnKeypress: ",
this.selectOnKeypress
);
// this.hasFirstEventFired = false;
this.selectOnKeypress this.selectOnKeypress
? this.handleClick(e) ? this.handleClick(e)
: this.handleSelectionChange(e); : this.handleSelectionChange(e);
@ -143,123 +105,38 @@ export default {
switch (eventType) { switch (eventType) {
case eventTypes.CLICK: case eventTypes.CLICK:
case eventTypes.KEYPRESS_SUBMIT: 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); this.handleClick(e);
break; break;
case eventTypes.CHANGE: case eventTypes.CHANGE:
console.log(
"selectOnKeypress: ",
this.selectOnKeypress
);
// this.hasFirstEventFired = false;
this.selectOnKeypress this.selectOnKeypress
? this.handleClick(e) ? this.handleClick(e)
: this.handleSelectionChange(e); : this.handleSelectionChange(e);
break; 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) { 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 ( if (
this.isMultiSelect && this.isMultiSelect &&
(this.modelValue instanceof Array || this.modelValue == null) (this.modelValue instanceof Array || this.modelValue == null)
) { ) {
let newValue = this.modelValue ? [...this.modelValue] : []; let newValue = this.modelValue ? [...this.modelValue] : [];
// console.log("newValue", newValue)
// console.log({
// newValue: newValue,
// // isChecked: isChecked
// })
if (!newValue.includes(this.value)) { if (!newValue.includes(this.value)) {
// console.log("isChecked")
newValue.push(this.value); newValue.push(this.value);
} else { } else {
// console.log("isn't checked")
newValue.splice(newValue.indexOf(this.value), 1); newValue.splice(newValue.indexOf(this.value), 1);
} }
this.valueToEmit = newValue; this.valueToEmit = newValue;
} else { } else {
// console.log("not multi");
this.valueToEmit = this.value; this.valueToEmit = this.value;
} }
console.log("handlingChange", this.valueToEmit);
this.handleChange(this.valueToEmit); this.handleChange(this.valueToEmit);
this.pushClickEventToGA(); this.pushClickEventToGA();
// if (this.selectOnKeypress) {
// this.handleClick(e)
// }
}, },
handleClick(e) { handleClick(e) {
// console.log("handleClick");
this.handleSelectionChange(e); this.handleSelectionChange(e);
// console.log("HC");
// console.log({
// eventEmitting: e,
// valueToEmit: this.valueToEmit,
// });
this.$emit("change", this.valueToEmit); this.$emit("change", this.valueToEmit);
}, },
pushClickEventToGA() { pushClickEventToGA() {
@ -284,7 +161,7 @@ export default {
return this.isMultiSelect ? "checkbox" : "radio"; return this.isMultiSelect ? "checkbox" : "radio";
}, },
buttonId() { buttonId() {
return `${this.groupName} ${JSON.stringify(this.value)}`; return `${this.groupName}-${JSON.stringify(this.value).replace(" ", "-")}`;
}, },
}, },
setup(props) { setup(props) {
@ -294,41 +171,18 @@ export default {
type: inputType, type: inputType,
validateOnValueUpdate: false, validateOnValueUpdate: false,
validateOnMount: 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( const { handleChange, meta, errors, value } = useField(
toRef(props, "groupName"), toRef(props, "groupName"),
toRef(props, "validationRules"), toRef(props, "validationRules"),
fieldOptions fieldOptions
); );
// const validateValue = value;
return { return {
handleChange, handleChange,
errors, errors,
meta, meta,
// validateValue,
fieldOptions, // only need to expose this for unit test purposes fieldOptions, // only need to expose this for unit test purposes
}; };
}, },

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

@ -52,34 +52,6 @@
:textPosition="textPosition" :textPosition="textPosition"
:selectOnKeypress="selectOnKeypress" :selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange" /> @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 --> <!-- For nested questions -->
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div <div
@ -150,8 +122,8 @@ export default {
}, },
data() { data() {
return { return {
primaryValue: "" primaryValue: "",
} };
}, },
computed: { computed: {
getFieldSetClasses() { getFieldSetClasses() {
@ -202,29 +174,32 @@ export default {
return ""; return "";
} }
}, },
// selectedValues: {
// get: function () {
// return this.modelValue;
// },
// set: function (newValue) {
// // this.$emit("update:modelValue", newValue);
// },
// },
buttonsInfo() { 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 // TODO KO temporary. It should always just be an array
return (Array.isArray(this.answers) ? this.answers : [])?.map( // return (Array.isArray(this.answers) ? this.answers : [])?.map(
(answer) => ({ // (answer) => ({
buttonLabel: answer.Text ?? answer, // buttonLabel: answer.Text ?? answer,
altText: answer.Name ? answer.Name : answer, // altText: answer.Name ? answer.Name : answer,
buttonLabelSubCopy: answer.SubText, // buttonLabelSubCopy: answer.SubText,
buttonImage: answer.AnswerImageUrl, // buttonImage: answer.AnswerImageUrl,
buttonImageId: answer.ImageId, // buttonImageId: answer.ImageId,
groupName: this.formatString(this.groupName), // groupName: this.formatString(this.groupName),
value: this.useTextForValue // value: this.useTextForValue
? answer.Text // ? answer.Text
: answer.Name ?? answer, // : answer.Name ?? answer,
}) // })
); // );
}, },
}, },
methods: { methods: {
@ -249,26 +224,10 @@ export default {
: this.formatString(answer.toString()); : 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) { handleAnswerChange(primaryAnswerValue) {
console.log({ console.log({
bqEvent: primaryAnswerValue bqEvent: primaryAnswerValue,
}) });
this.primaryValue = primaryAnswerValue; this.primaryValue = primaryAnswerValue;
this.$emit("change", primaryAnswerValue); this.$emit("change", primaryAnswerValue);
this.$emit("update:modelValue", primaryAnswerValue); this.$emit("update:modelValue", primaryAnswerValue);

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

@ -6,15 +6,14 @@
buttonType="listButtonHorizontal" buttonType="listButtonHorizontal"
v-model="selectedValues" v-model="selectedValues"
isCashOrInsurance isCashOrInsurance
isRequired isRequired />
/>
</div> </div>
</template> </template>
<script> <script>
import buttonQuestion from "@/common-components/button-question/button-question"; import buttonQuestion from "@/common-components/button-question/button-question";
export default ({ export default {
name: "cashOrInsuranceQuestion", name: "cashOrInsuranceQuestion",
props: { props: {
modelValue: String, modelValue: String,
@ -22,23 +21,25 @@ export default ({
cmsWidgetName: String, cmsWidgetName: String,
}, },
computed: { computed: {
answersFromCms(){ answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, 'Answers'); return this.getCmsContent(this.cmsWidgetName, "Answers");
}, },
selectedValues: { selectedValues: {
get: function() { get: function () {
// Convert to CMS answer name from bool // Convert to CMS answer name from bool
var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer"; var cmsAnswerValue = this.modelValue
? "InsuranceAnswer"
: "CashAnswer";
return cmsAnswerValue; return cmsAnswerValue;
}, },
set: function(newValue) { set: function (newValue) {
// Convert back to bool for parent component // Convert back to bool for parent component
this.$emit("update:modelValue", newValue === "InsuranceAnswer"); this.$emit("update:modelValue", newValue === "InsuranceAnswer");
} },
}, },
}, },
components: { components: {
buttonQuestion, 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", name: "windshieldOptions",
mixins: [buttonQuestionWrapperMixin], mixins: [buttonQuestionWrapperMixin],
props: { props: {
// modelValue: Number,
groupName: String, groupName: String,
isAvailable: Boolean, isAvailable: Boolean,
validationRules: String, validationRules: String,
cmsWidgetName: 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: { computed: {
questionText(){ questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
@ -47,12 +37,6 @@ export default ({
return this.getCmsContent(this.cmsWidgetName, 'Answers'); return this.getCmsContent(this.cmsWidgetName, 'Answers');
}, },
}, },
// watch: {
// isAvailable(val) {
// // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
// val && this.updateSelectedValues();
// }
// },
components: { components: {
buttonQuestion, buttonQuestion,
} }

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

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

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

@ -1,35 +1,35 @@
<template> <template>
<inputButtonWrapper <baseInputButton
:buttonWrapperClasses="[ :buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100', 'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': isCashOrInsurance } { 'radio-fancy': isCashOrInsurance },
]" ]"
:isMultiSelect="isMultiSelect" :isMultiSelect="isMultiSelect"
:modelValue="modelValue" :modelValue="modelValue"
:value="value" :value="value"
:groupName="groupName" :groupName="groupName"
:validationRules="validationRules" :validationRules="validationRules"
:selectOnKeypress="selectOnKeypress" :selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange" @change="handleAnswerChange">
> <div
<!-- <div class="list-group list-button-horizontal d-flex flex-column w-100" class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
:class="[(errors.length > 0 || hasError) ? 'has-error' : '', isCashOrInsurance ? 'radio-fancy' : '']" <span class="m-0" :class="textPosition">
@keyup.space="triggerButton()" @keyup.up="handleKeyupArrow()" @keyup.down="handleKeyupArrow()" {{ buttonLabel }}
@keyup.left="handleKeyupArrow()" @keyup.right="handleKeyupArrow()"> --> </span>
<div class="list-button-horizontal-content d-flex flex-column justify-content-center p-3"> <span
<span class="m-0" :class="textPosition"> v-if="buttonLabelSubCopy"
{{ buttonLabel }} class="m-0 small"
</span> :class="textPosition">
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition"> {{ buttonLabelSubCopy }}
{{ buttonLabelSubCopy }} </span>
</span> <span v-if="screenReaderOnlyText" class="sr-only">
<span v-if="screenReaderOnlyText" class="sr-only"> {{ screenReaderOnlyText }}
{{ screenReaderOnlyText }} </span>
</span> <loader
<loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" /> v-if="isLoaderDisplayed && selectingInitiatesLoad"
</div> :class="[loaderColor, loaderPosition]" />
<!-- </div> --> </div>
</inputButtonWrapper> </baseInputButton>
</template> </template>
<script> <script>
@ -37,312 +37,230 @@ import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader"; import loader from "@/ux-components/loader/loader";
import { toRef } from "vue"; import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings"; 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 { export default {
name: "listButtonHorizontal", name: "listButtonHorizontal",
props: { props: {
isMultiSelect: Boolean, isMultiSelect: Boolean,
selectOnKeypress: Boolean, selectOnKeypress: Boolean,
groupName: String, groupName: String,
buttonID: String, buttonID: String,
buttonLabel: String, buttonLabel: String,
buttonLabelSubCopy: String, buttonLabelSubCopy: String,
screenReaderOnlyText: String, screenReaderOnlyText: String,
textPosition: String, textPosition: String,
selectingInitiatesLoad: Boolean, selectingInitiatesLoad: Boolean,
loaderColor: String, loaderColor: String,
loaderPosition: String, loaderPosition: String,
isRequired: Boolean, isRequired: Boolean,
isCashOrInsurance: Boolean, isCashOrInsurance: Boolean,
value: { value: {
// Field initial value // Field initial value
type: String, type: String,
default: "", default: "",
},
validationRules: String,
hasError: Boolean,
valueToLogType: String,
}, },
validationRules: String, data() {
// selectedValues: [Array, String], return {
hasError: Boolean, isLoaderDisplayed: false,
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;
}, },
handleAnswerChange(e) { methods: {
// TODO KO all the buttons have this function displayLoader() {
this.isLoaderDisplayed = true;
console.log(e) },
this.$emit("change", e); 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> </script>
<style lang="scss"> <style lang="scss">
.list-button-horizontal { .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="radio"],
input[type="checkbox"] { input[type="checkbox"] {
position: absolute; position: absolute;
height: 0; height: 0;
opacity: 0; opacity: 0;
width: 0; width: 0;
&:focus-visible+.list-button-horizontal-content { .list-button-horizontal-content {
border-radius: 0.5rem; cursor: pointer;
z-index: 2; }
}
&:focus+.list-button-horizontal-content { &:focus-visible + .list-button-horizontal-content {
z-index: 3; 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; outline: none;
box-shadow: none; position: relative;
color: $white; background: $white;
background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%); transition: all 150ms linear;
border-radius: 0.5rem; border: 1px solid $gray-500;
z-index: 5; border-radius: 0;
} width: 100%;
color: $gray-600;
&:checked:focus+.list-button-horizontal-content { &:hover {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; @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 { + p {
font-weight: 500; display: none;
} }
span {
font-size: 0.875rem;
}
} }
}
&.list-button-horizontal { // Cash/Insurance option radio button styling
height: 100%; &.radio-fancy {
label { .list-button-horizontal-content {
height: 100%; 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 { .col {
&:first-of-type { &:first-of-type {
.list-button-horizontal { .list-button-horizontal {
.list-button-horizontal-content { .list-button-horizontal-content {
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
border-top-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;
} }
&:checked:focus+.list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
} }
}
&:last-of-type { &:last-of-type {
.list-button-horizontal.radio-fancy { .list-button-horizontal {
input[type="radio"] { .list-button-horizontal-content {
&:checked+.list-button-horizontal-content { border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0; border-top-right-radius: 0.5rem;
border-top-left-radius: 0; }
}
}
//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> </style>

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

@ -1,276 +1,140 @@
<template> <template>
<!-- <div <baseInputButton
class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2" :isMultiSelect="isMultiSelect"
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> --> :value="value"
<!-- <input :groupName="groupName"
:type="isMultiSelect ? 'checkbox' : 'radio'" buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
:id="buttonID" :validationRules="validationRules"
:name="groupName" @change="handleAnswerChange">
:value="value" <div
:aria-required="isRequired" tabindex="-1"
v-model="checkValue" :aria-label="buttonLabel"
:checked="checkValue" class="list-button-content d-flex flex-column justify-content-center py-3 px-4">
@change="handleInputChange" <span class="m-0" :class="textPosition">
> --> {{ buttonLabel }}
<!-- <label </span>
tabindex="-1" <span
:for="buttonID" v-if="buttonLabelSubCopy"
:aria-label="buttonLabel" class="m-0 small"
class="d-flex flex-column justify-content-center py-3 px-4" :class="textPosition">
@mouseup="triggerButton" {{ buttonLabelSubCopy }}
> --> </span>
<!-- LB value: {{ value }}<br /> <span v-if="screenReaderOnlyText" class="sr-only">
LB modelValue: {{ modelValue }} {{ screenReaderOnlyText }}
LB groupName: {{ groupName }} --> </span>
<!-- , {'has-error': errors.length > 0 || hasError} --> <loader
<!-- <inputButtonWrapper v-if="isLoaderDisplayed && selectingInitiatesLoad"
v-bind="$props" :class="[this.loaderColor, this.loaderPosition]" />
:classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]" </div>
@change="(e) => $emit('change', e)" </baseInputButton>
> -->
<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> -->
</template> </template>
<script> <script>
// import { useField } from "vee-validate";
// import { toRef } from "vue";
import loader from "@/ux-components/loader/loader"; 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 { export default {
name: "listButton", name: "listButton",
props: { props: {
groupName: String, // TODO KO these shared props should be moved somewhere groupName: String,
buttonLabel: [Number, String], buttonLabel: [Number, String],
// buttonID: [Number, String], isRequired: Boolean,
isRequired: Boolean, textPosition: String,
textPosition: String, buttonLabelSubCopy: String,
buttonLabelSubCopy: String, screenReaderOnlyText: String,
screenReaderOnlyText: String, selectingInitiatesLoad: Boolean,
selectingInitiatesLoad: Boolean, loaderColor: String,
loaderColor: String, loaderPosition: {
loaderPosition: { type: String,
type: String, default: "right",
default: "right", },
hasError: Boolean,
valueToLogType: String,
validationRules: String,
}, },
hasError: Boolean, data() {
valueToLogType: String, return {
validationRules: String, isLoaderDisplayed: false,
}, };
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;
}, },
handleAnswerChange(e) { methods: {
// TODO KO make it work on YMMS with keypresses displayLoader() {
// There must be a way to tell the difference between keypress and this.isLoaderDisplayed = true;
// submit via veevalidate. Check out the Form in vehicle-damage },
if (this.selectingInitiatesLoad) { handleAnswerChange(e) {
this.displayLoader(); if (this.selectingInitiatesLoad) {
} this.displayLoader();
// else { }
// console.log("lbTest event: ", e);
// // this.$emit("change", e);
// }
console.log(e) this.$emit("change", 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
// }
// },
// 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list-group { .list-group {
&.list-button { &.list-button {
outline: none; outline: none;
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
position: static; //override bootstrap position: static; //override bootstrap
// height: 0;
// opacity: 0;
&:focus-visible + .list-button-content { &:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
} }
&:focus + .list-button-content { &:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
} }
&:checked + .list-button-content { &:checked + .list-button-content {
color: $black; color: $black;
font-weight: 500; font-weight: 500;
background: $blue-100; background: $blue-100;
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
} }
&:checked:focus + .list-button-content { &:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
} }
&:checked + .list-button-content p, &:checked + .list-button-content p,
&:checked + .list-button-content span { &:checked + .list-button-content span {
font-weight: 500; font-weight: 500;
} }
&:checked + .list-button-content span:nth-child(2) { &:checked + .list-button-content span:nth-child(2) {
font-weight: 400; font-weight: 400;
color: $gray-600;
}
}
}
.list-button-content {
color: $gray-600; color: $gray-600;
} position: relative;
} background: $white;
} transition: all 150ms linear;
.list-button-content { border-radius: $border-radius-lg;
color: $gray-600; border: 1px solid $gray-500;
position: relative; width: 100%;
background: $white; outline: none;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
span { span {
&.small { &.small {
font-size: 0.75rem; font-size: 0.75rem;
color: $gray-550; color: $gray-550;
} }
} }
&:hover { &:hover {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300; box-shadow: 0 0 0 4px $blue-300;
} }
cursor: pointer; cursor: pointer;
}
+ p {
display: none;
}
} }
+ p {
display: none;
}
}
} }
</style> </style>

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

@ -1,5 +1,5 @@
<template> <template>
<inputButtonWrapper <baseInputButton
:buttonWrapperClasses="[ :buttonWrapperClasses="[
'list-card w-100 rounded-3 d-flex align-items-center h-100', 'list-card w-100 rounded-3 d-flex align-items-center h-100',
{ horizontal: isWide }, { horizontal: isWide },
@ -10,54 +10,24 @@
:groupName="groupName" :groupName="groupName"
:validationRules="validationRules" :validationRules="validationRules"
:selectOnKeypress="selectOnKeypress" :selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange" @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"
/> -->
<div <div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content" class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
:class="getLabelClasses" :class="getLabelClasses">
>
<img <img
:id="buttonImageId" :id="buttonImageId"
:class="!isWide ? 'order-1' : 'ms-auto order-3'" :class="!isWide ? 'order-1' : 'ms-auto order-3'"
:src="buttonImage" :src="buttonImage"
:alt="altText" :alt="altText" />
/>
<p <p
v-if="!isWide" v-if="!isWide"
class="small order-3" class="small order-3"
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
>
{{ buttonLabel }} {{ buttonLabel }}
</p> </p>
<p <p
v-if="buttonLabelSubCopy && !isWide" v-if="buttonLabelSubCopy && !isWide"
class="fs-7 m-0 order-4 sub-copy" class="fs-7 m-0 order-4 sub-copy">
>
{{ buttonLabelSubCopy }} {{ buttonLabelSubCopy }}
</p> </p>
<div v-if="isWide" class="order-2"> <div v-if="isWide" class="order-2">
@ -67,21 +37,19 @@
</p> </p>
</div> </div>
</div> </div>
<!-- </div> </baseInputButton>
</div> -->
</inputButtonWrapper>
</template> </template>
<script> <script>
import { useField } from "vee-validate"; import { useField } from "vee-validate";
import { toRef } from "vue"; import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings"; 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 { export default {
name: "listCard", name: "listCard",
components: { components: {
inputButtonWrapper, baseInputButton,
}, },
props: { props: {
isMultiSelect: Boolean, //Defines use as checkbox isMultiSelect: Boolean, //Defines use as checkbox
@ -91,7 +59,6 @@ export default {
buttonLabel: String, //Required: Label text buttonLabel: String, //Required: Label text
isRequired: Boolean, //Required: is aria-required required or not? 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. 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 groupName: String, //Rquired: Unique
buttonLabelSubCopy: String, //Optional: sub text buttonLabelSubCopy: String, //Optional: sub text
value: { value: {
@ -99,32 +66,10 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
// colLength: String,
validationRules: String, validationRules: String,
// selectedValues: [Array, String],
// hasError: Boolean,
valueToLogType: String, valueToLogType: String,
selectOnKeypress: Boolean, 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: { computed: {
getLabelClasses() { getLabelClasses() {
if (this.isWide) { if (this.isWide) {
@ -139,98 +84,10 @@ export default {
}, },
}, },
methods: { 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) { handleAnswerChange(e) {
// console.log(e)
this.$emit("change", 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> </script>
@ -260,9 +117,6 @@ export default {
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
// opacity: 0;
// width: 0;
// height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
position: absolute; position: absolute;
+ .list-card-content { + .list-card-content {

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

@ -1,6 +1,5 @@
<template> <template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex --> <baseInputButton
<inputButtonWrapper
:isMultiSelect="isMultiSelect" :isMultiSelect="isMultiSelect"
:value="value" :value="value"
:groupName="groupName" :groupName="groupName"
@ -8,34 +7,17 @@
inputClasses="form-check-input" inputClasses="form-check-input"
:validationRules="validationRules" :validationRules="validationRules"
@change="handleAnswerChange"> @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"> <div class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p> <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{ <span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText screenReaderOnlyText
}}</span> }}</span>
</div> </div>
<!-- </div> --> </baseInputButton>
</inputButtonWrapper>
</template> </template>
<script> <script>
import { useField } from "vee-validate"; import baseInputButton from "@/common-components/base-input-button/base-input-button";
import { queryStrings } from "@/constants/query-strings";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
export default { export default {
name: "radio", name: "radio",
@ -54,51 +36,9 @@ export default {
validationRules: String, validationRules: String,
valueToLogType: String, valueToLogType: String,
}, },
data() {
return {
// checkValue: Boolean,
};
},
components: { 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> </script>