diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index d5608cd62..464fcf245 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -3,12 +3,14 @@ import buttonQuestion from "@/common-components/button-question/button-question"
import { nextTick } from "vue";
describe("buttonQuestion.vue", () => {
- it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
+ it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
// Act
- const wrapper = shallowMount(buttonQuestion);
- await wrapper.setProps({
- isOverflowScrollable: true,
+ const wrapper = shallowMount(buttonQuestion, {
+ propsData: {
+ isOverflowScrollable: true,
+ }
});
+
// Assert
const fieldSet = wrapper.find('fieldset');
expect(fieldSet.classes()).toContain("overflow-scroll");
@@ -16,11 +18,12 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
- it("Fieldset classes should contain row if button type is listCard", async () => {
+ it("Fieldset classes should contain row if button type is listCard", () => {
// Act
- const wrapper = shallowMount(buttonQuestion);
- await wrapper.setProps({
- buttonType: "listCard",
+ const wrapper = shallowMount(buttonQuestion, {
+ propsData: {
+ buttonType: "listCard",
+ }
});
// Assert
const Div = wrapper.find('fieldset div');
@@ -29,11 +32,12 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
- it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
+ it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
// Act
- const wrapper = shallowMount(buttonQuestion);
- await wrapper.setProps({
- buttonType: "listButtonHorizontal",
+ const wrapper = shallowMount(buttonQuestion, {
+ propsData: {
+ buttonType: "listButtonHorizontal",
+ }
});
// Assert
const Div = wrapper.find('fieldset div');
@@ -57,12 +61,13 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
- it("Should add values to array on checkbox click", async () => {
+ it("Should add values to array on checkbox click", () => {
// Act
- const wrapper = shallowMount(buttonQuestion);
- await wrapper.setProps({
- modelValue: ["2022", "2021", "2020"],
- isMultiSelect: true
+ const wrapper = shallowMount(buttonQuestion, {
+ propsData: {
+ modelValue: ["2022", "2021", "2020"],
+ isMultiSelect: true,
+ }
});
const val = {isChecked: true, buttonId: "2019", }
wrapper.vm.handleCheckedChanged(val);
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 0e17e9de7..e8cf4a967 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -19,17 +19,16 @@
:textPosition="textPosition"
:isMultiSelect="isMultiSelect"
:groupName="groupName"
- :loaderEnabled="loaderEnabled"
+ :selectingInitiatesLoad="selectingInitiatesLoad"
:loaderColor="loaderColor"
:loaderPosition="loaderPosition"
- :sizeInRem="sizeInRem"
:isWide="isWide"
:isRequired="isRequired"
:buttonImage="answer.AnswerImageUrl"
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
- :colLength="this.answers.length < 3 ? '' : '-4'"
+ :colLength="getColLength"
:selectedButtonIDs="selectedValues"
data-test="button"
:validationRules="validationRules"
@@ -37,7 +36,7 @@
-
@@ -65,7 +64,7 @@ export default {
type: String,
default: "text-center",
},
- loaderEnabled: Boolean,
+ selectingInitiatesLoad: Boolean,
loaderColor: {
type: String,
default: "blue",
@@ -74,17 +73,11 @@ export default {
type: String,
default: "right",
},
- sizeInRem: {
- type: [String, Number],
- default: 1.5,
- },
isRequired: Boolean,
isOverflowScrollable: Boolean,
isWide: Boolean,
modelValue: Array,
validationRules: String,
- name: String,
- value: String,
suppressError: Boolean,
},
computed: {
@@ -111,6 +104,13 @@ export default {
}
return classes;
},
+ getColLength(){
+ if(this.isWide) {
+ return "12"
+ } else {
+ return this.answers.length < 3 ? '' : '-4';
+ }
+ },
selectedValues: {
get: function() {
return this.modelValue;
@@ -120,18 +120,7 @@ export default {
}
},
},
- mounted(){
- // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
- if(Array.isArray(this.answers) && this.answers.length === 1) {
- const newSelectedValues = this.selectedValues;
- newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
- this.selectedValues = newSelectedValues;
- }
- },
methods: {
- chooseAnswer(answer) {
- this.$emit("update:modelValue", answer);
- },
handleCheckedChanged(val) {
if(this.isMultiSelect) {
// Add or remove item to array of data to emit
@@ -139,7 +128,7 @@ export default {
val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
this.selectedValues = newSelectedValues;
} else {
- this.selectedValues = [val.buttonId]
+ this.selectedValues = [val.buttonId];
}
},
},
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index af604ed99..062a3574a 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -21,7 +21,6 @@
isPrimary
:buttonText="buttonText"
loaderColor="white"
- sizeInRem="1"
:class="isDisabled && 'form-test-invalid'"
:aria-disabled="isDisabled"
:isDisabled="isDisabled"
@@ -97,6 +96,10 @@ export default {
.btn-primary {
width: 100%;
}
+ a {
+ display: flex;
+ justify-content: center;
+ }
@media only screen and (min-width: 340px) {
.button-col,
.link-col {
@@ -105,6 +108,10 @@ export default {
.btn-primary {
width: auto;
}
+ a {
+ display: flex;
+ justify-content: flex-start;
+ }
}
}
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 937109111..bc290d473 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -57,7 +57,7 @@ export default {
};
-