CSR-762 WIP

src/common-components/button-question/button-question.vue

@@ -42,7 +42,7 @@
             v-for="answer in answers"
             :key="answer.Name ? answer.Name : answer"
           >
-            <component
+          <component
               :is="buttonType"
               :buttonLabel="
                 answer.Text ? answer.Text : getAnswerString(answer, 'Name')
@@ -50,10 +50,11 @@
               :buttonLabelSubCopy="answer.SubText"
               :isMultiSelect="isMultiSelect"
               :groupName="groupName"
-              :value="answer.Value"
+              :value="answer.Name"
               :modelValue="modelValue"
-              @change="e => handleSelectionChange(e, answer.Value)"
+              @change="(e) => test(e)"
             />
+            
             <!-- <component
               :is="buttonType"
               @isCheckedChanged="handleCheckedChanged"
@@ -111,7 +112,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from "vee-validate";
 import radio from "@/ux-components/radio/radio";
-import testButton from "@/common-components/test-button.vue";
+// import buttonWrap
 
 export default {
   name: "buttonQuestion",
@@ -205,7 +206,6 @@ export default {
   },
   methods: {
     formatString(str) {
-      console.log(str);
       return str?.replace(" ", "-");
     },
     getValue(answer) {
@@ -242,28 +242,40 @@ export default {
       }
       this.$emit("isCheckedChanged", val);
     },
-    handleSelectionChange(event, value) {
+    test(event) {
-      console.log(value)
+      console.log(event)
-      console.log("BQ handleSelectionChange: ", event)
+      this.$emit("update:modelValue", event);
-      let isChecked = event.target.checked;
-      if (this.isMultiSelect && this.modelValue instanceof Array) {
-        let newValue = [...this.modelValue];
-        const toggledValue = event.target.value;
-        console.log("A: ", this.modelValue)
-        console.log("isChecked: ", isChecked)
-        console.log("value: ", event.target.value)
-        if (isChecked) {
-          newValue.push(toggledValue);
-        } else {
-          newValue.splice(newValue.indexOf(toggledValue), 1);
-        }
-        console.log("handleCheckboxChange: ", newValue);
-        this.$emit("update:modelValue", newValue);
-      } else {
-        console.log("handleRadioChange: ", isChecked);
-        this.$emit("update:modelValue", value);
-      }
     },
+    // test(event, value) {
+    //   console.log(value)
+    //   console.log("BQ event: ", event)
+    //   let isChecked = event.target?.checked;
+    //   let valueToEmit;
+    //   if (this.isMultiSelect && this.modelValue instanceof Array) {
+    //     let newValue = [...this.modelValue];
+    //     const toggledValue = event.target?.value;
+    //     console.log("A: ", this.modelValue)
+    //     console.log("isChecked: ", isChecked)
+    //     console.log("value: ", toggledValue)
+    //     if (isChecked) {
+    //       newValue.push(toggledValue);
+    //     } else {
+    //       newValue.splice(newValue.indexOf(toggledValue), 1);
+    //     }
+    //     console.log("handleCheckboxChange: ", newValue);
+    //     // this.$emit("update:modelValue", newValue);
+    //     // this.$emit("update:value", newValue)
+
+    //     valueToEmit = newValue;
+    //   } else {
+    //     console.log("handleRadioChange: ", isChecked);
+    //     // this.$emit("update:modelValue", value);
+    //     valueToEmit = value;
+    //   }
+
+    //   console.log("BQ emitting: ", valueToEmit)
+    //   this.$emit("update:modelValue", valueToEmit);
+    // },
   },
   components: {
     listButton,
@@ -271,7 +283,7 @@ export default {
     listCard,
     ErrorMessage,
     radio,
-    testButton,
+    // testButton,
   },
 };
 </script>

src/common-components/button-wrapper/button-wrapper.vue

@@ -0,0 +1,28 @@
+<template>
+  <label :class="classes" :for="buttonId">
+    classes: {{classes}}<br/>
+    value: {{value}} <br/>
+    modelValue: {{modelValue}} <br/>
+    buttonId: {{buttonId}} <br/>
+    <input
+      :type="inputType"
+      
+      :id="buttonId"
+      :name="groupName"
+      :aria-required="isRequired"
+      :value="value"
+      :checked="isChecked"
+      @change="handleSelectionChange"
+    />
+
+    <slot></slot>
+  </label>
+</template>
+
+<script>
+import buttonMixin from "@/mixins/button-mixin";
+export default {
+  name: "button-wrapper",
+  mixins: [buttonMixin],
+};
+</script>

src/common-components/test-button.vue

@@ -1,35 +0,0 @@
-<template>
-  <label :class="{ classNames }">
-    value: {{value}} <br/>
-    modelValue: {{modelValue}} <br/>
-    isChecked: {{isChecked}} <br/>
-    <input
-      v-if="isMultiSelect"
-      type="checkbox"
-      :id="JSON.stringify(modelValue)"
-      :name="groupName"
-      :aria-required="isRequired"
-      :value="value"
-      :checked="isChecked"
-      @change="handleSelectionChange"
-    />
-    <input
-      v-else
-      type="radio"
-      :id="JSON.stringify(modelValue)"
-      :name="groupName"
-      :aria-required="isRequired"
-      v-model="modelValue"
-      :checked="isChecked"
-      @change="handleSelectionChange"
-    />
-  </label>
-</template>
-
-<script>
-import buttonMixin from "../mixins/button-mixin";
-export default {
-  name: "test-button",
-  mixins: [buttonMixin],
-};
-</script>

src/layouts/test.vue

@@ -1,7 +1,28 @@
 <template>
   <div>
+    <h2>ListButton</h2>
     selectedMultiselectValues: {{ selectedMultiselectValues }}
 
+    <button-question
+      questionText="This is a question?"
+      :answers="sampleAnswers"
+      :isMultiSelect="true"
+      groupName="multiselect-test"
+      v-model="selectedMultiselectValues"
+    ></button-question>
+
+    <br /><br /><br />
+    selectedRadioValue: {{ selectedRadioValue }}
+
+    <button-question
+      questionText="This is another question?"
+      :answers="sampleAnswers"
+      :isMultiSelect="false"
+      groupName="radio-test"
+      v-model="selectedRadioValue"
+    ></button-question>
+    <!-- selectedMultiselectValues: {{ selectedMultiselectValues }}
+
     <button-question
       buttonType="testButton"
       :answers="sampleAnswers"
@@ -19,7 +40,7 @@
       :isMultiSelect="false"
       groupName="radio-test"
       v-model="selectedRadioValue"
-    ></button-question>
+    ></button-question> -->
   </div>
 </template>
 
@@ -33,15 +54,15 @@ export default {
       sampleAnswers: [
         {
           Text: "Part 1",
-          Value: "PART1",
+          Name: "PART1",
         },
         {
           Text: "Part 2",
-          Value: "PART2",
+          Name: "PART2",
         },
         {
           Text: "Part 3",
-          Value: "PART3",
+          Name: "PART3",
         },
       ],
       selectedMultiselectValues: [],

src/mixins/button-mixin.js

@@ -1,4 +1,5 @@
 export default {
+  emits: ["change"],
   model: {
     prop: "modelValue",
     event: "change",
@@ -32,22 +33,36 @@ export default {
       type: String,
       required: true,
     },
+    validationRules: {
+      type: String,
+      required: true,
+    },
+    classes: [String, Array, Object],
   },
-  data() {},
   methods: {
     handleSelectionChange(event) {
+      console.log(event);
+      console.log(this.value);
+      console.log(this.modelValue);
       let isChecked = event.target.checked;
+      console.log("BM value: ", this.value);
+      let valueToEmit;
       if (this.isMultiSelect && this.modelValue instanceof Array) {
         let newValue = [...this.modelValue];
-        if (isChecked && !newValue.includes(this.value)) {
+        if (isChecked && !this.modelValue.includes(this.value)) {
           newValue.push(this.value);
         } else {
           newValue.splice(newValue.indexOf(this.value), 1);
         }
-        this.$emit("change", newValue);
+
+        valueToEmit = newValue;
       } else {
-        this.$emit("change", isChecked);
+        valueToEmit = isChecked;
       }
+
+      console.log("ButtonWrapper is emitting: ", valueToEmit);
+      this.$emit("change", valueToEmit);
+      //   this.$emit("change", event);
     },
   },
   computed: {
@@ -57,5 +72,11 @@ export default {
       }
       return this.modelValue === this.value;
     },
+    inputType() {
+      return this.isMultiSelect ? "checkbox" : "radio";
+    },
+    buttonId() {
+      return JSON.stringify(this.value);
+    },
   },
 };

src/ux-components/list-button/list-button.vue

@@ -1,14 +1,8 @@
 <template>
-  <div
+  <!-- <div
     class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
-    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
+    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
-    @keyup.space="triggerButton"
+  <!-- <input
-    @keyup.enter="triggerButton"
-    @keyup.up="handleKeyupArrow"
-    @keyup.down="handleKeyupArrow"
-    @keyup.left="handleKeyupArrow"
-    @keyup.right="handleKeyupArrow">
-    <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
       :id="buttonID"
       :name="groupName"
@@ -17,39 +11,56 @@
       v-model="checkValue"
       :checked="checkValue"
       @change="handleInputChange"
-    >
+    > -->
-    <label
+  <!-- <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 }}
+  <!-- , {'has-error': errors.length > 0 || hasError} -->
+  <!-- <buttonWrapper
+    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)"
+  > -->
+  LB groupName: {{ groupName }}
+  <buttonWrapper
+    :isMultiSelect="isMultiSelect"
+    :modelValue="modelValue"
+    :value="value"
+    :groupName="groupName"
+    :classes="[
+      'list-group list-button rounded-3 d-flex flex-column w-100 mb-2',
+      { 'has-error': errors.length > 0 || hasError },
+    ]"
+    @change="lbTest"
+  >
+    <div
+      tabindex="-1"
+      :aria-label="buttonLabel"
+      class="list-button-content d-flex flex-column justify-content-center py-3 px-4"
     >
-      <span
+      <span class="m-0" :class="textPosition">
-        class="m-0"
-        :class="textPosition"
-      >
         {{ buttonLabel }}
       </span>
-      <span
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
-        v-if="buttonLabelSubCopy"
-        class="m-0 small"
-        :class="textPosition"
-      >
         {{ buttonLabelSubCopy }}
       </span>
-      <span
+      <span v-if="screenReaderOnlyText" class="sr-only">
-        v-if="screenReaderOnlyText"
-        class="sr-only"
-      >
         {{ screenReaderOnlyText }}
       </span>
       <loader
         v-if="isLoaderDisplayed && selectingInitiatesLoad"
         :class="[this.loaderColor, this.loaderPosition]"
       />
-    </label>
+    </div>
-  </div>
+  </buttonWrapper>
+  <!-- </label> -->
+  <!-- </div> -->
 </template>
 
 <script>
@@ -57,91 +68,99 @@ import { useField } from "vee-validate";
 import { toRef } from "vue";
 import loader from "@/ux-components/loader/loader";
 import { queryStrings } from "@/constants/query-strings";
+import buttonMixin from "@/mixins/button-mixin";
+import buttonWrapper from "@/common-components/button-wrapper/button-wrapper";
 
 export default {
   name: "listButton",
+  mixins: [buttonMixin],
   props: {
-    isMultiSelect: Boolean,
+    // groupName: String,
-    groupName: String,
     buttonLabel: [Number, String],
     buttonID: [Number, String],
-    isRequired: Boolean,
+    // isRequired: Boolean,
     textPosition: String,
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
     selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    value: {
-    // Field initial value
-      type: [String, Number],
-      default: "",
-      },
-    
-    validationRules: String,
-    selectedValues: [Array, String],
     hasError: Boolean,
     valueToLogType: String,
   },
   data() {
     return {
       isLoaderDisplayed: false,
-      checkValue: false,
+      // checkValue: false,
     };
   },
-  mounted() {
+  // mounted() {
-    if (Array.isArray(this.validateValue)) {
+  //   if (Array.isArray(this.validateValue)) {
-      this.checkValue = this.isValueSelectedByArray(this.selectedValues);
+  //     this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-      const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
+  //     const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
-      
+
-      if (this.checkValue != isSelectedByValidator) {
+  //     if (this.checkValue != isSelectedByValidator) {
-        this.handleChange(this.value);
+  //       this.handleChange(this.value);
-      }
+  //     }
-    }
+  //   }
-    else {
+  //   else {
-      this.checkValue = this.selectedValues == this.value;
+  //     this.checkValue = this.selectedValues == this.value;
-    }
+  //   }
-  },
+  // },
+  emits: ["change"],
   methods: {
-    isValueSelectedByArray(arr) {
+    // isValueSelectedByArray(arr) {
-      return this.isMultiSelect
+    //   return this.isMultiSelect
-        ? arr.includes(this.value)
+    //     ? arr.includes(this.value)
-        : arr[0];
+    //     : arr[0];
-    },
+    // },
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
-    handleInputChange() {
+    lbTest(e) {
-      if(!this.selectingInitiatesLoad) {
+      console.log("lbTest event: ", e)
-        this.handleCheckChange();
+      this.$emit("change", e);
-      }
+    },  
-    },
+    // handleInputChange() {
-    handleKeyupArrow() {
+    //   if(!this.selectingInitiatesLoad) {
-      if (this.isMultiSelect) {
+    //     this.handleCheckChange();
-        return; // Prevent arrow keys from doing anything if element is a checkbox
+    //   }
-      }
+    // },
-    },
+    // handleKeyupArrow() {
+    //   if (this.isMultiSelect) {
+    //     return; // Prevent arrow keys from doing anything if element is a checkbox
+    //   }
+    // },
     triggerButton() {
-      if(this.selectingInitiatesLoad) {
+      if (this.selectingInitiatesLoad) {
         this.displayLoader();
-        this.handleCheckChange();
+        // 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);
+      // TODO KO THIS IS IMPORTANT
-      this.$emit("isCheckedChanged", emitEvent);
+      this.pushEventToGA(
-      this.$emit("update:modelValue", emitEvent);
+        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,
+    buttonWrapper,
   },
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
@@ -154,15 +173,19 @@ export default {
 
     // 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)))) {
+    if (
-      fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
+      props.selectedValues &&
+      (props.selectedValues.includes(props.value) ||
+        props.selectedValues.includes(parseInt(props.value)))
+    ) {
+      fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
     }
 
-    const {
+    const { handleChange, errors, value } = useField(
-      handleChange,
+      toRef(props, "groupName"),
-      errors,
+      toRef(props, "validationRules"),
-      value
+      fieldOptions
-    } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
+    );
 
     const validateValue = value;
 
@@ -186,32 +209,32 @@ export default {
       height: 0;
       opacity: 0;
 
-      &:focus-visible + label {
+      &:focus-visible + .list-button-content {
         box-shadow: 0 0 0 2.5px $blue;
       }
-      &:focus + label {
+      &:focus + .list-button-content {
         box-shadow: 0 0 0 2.5px $blue;
       }
-      &:checked + label {
+      &:checked + .list-button-content {
         color: $black;
         font-weight: 500;
         background: $blue-100;
         box-shadow: 0 0 0 1px $blue;
       }
-      &:checked:focus + label {
+      &:checked:focus + .list-button-content {
         box-shadow: 0 0 0 2.5px $blue;
       }
-      &:checked + label p,
+      &:checked + .list-button-content p,
-      &:checked + label span {
+      &:checked + .list-button-content span {
         font-weight: 500;
       }
-      &:checked + label span:nth-child(2) {
+      &:checked + .list-button-content span:nth-child(2) {
         font-weight: 400;
         color: $gray-600;
       }
     }
   }
-  label {
+  .list-button-content {
     color: $gray-600;
     position: relative;
     background: $white;
@@ -223,7 +246,7 @@ export default {
 
     span {
       &.small {
-        font-size: .75rem;
+        font-size: 0.75rem;
         color: $gray-550;
       }
     }