diff --git a/package-lock.json b/package-lock.json index f0cf0ac10..bfc6c1f68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,11 +15,13 @@ "core-js": "^3.6.5", "http-status-codes": "^2.1.4", "jest-junit": "^13.0.0", + "vee-validate": "^4.5.7", "vue": "^3.0.0", "vue-plugin-load-script": "^2.1.0", "vue-router": "^4.0.11", "vuex": "^4.0.2", - "vuex-persistedstate": "^4.1.0" + "vuex-persistedstate": "^4.1.0", + "yup": "^0.32.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", @@ -1632,7 +1634,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz", "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==", - "dev": true, "dependencies": { "regenerator-runtime": "^0.13.4" }, @@ -4166,6 +4167,11 @@ "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.178", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz", + "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==" + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -16453,8 +16459,12 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -16974,6 +16984,11 @@ "dev": true, "optional": true }, + "node_modules/nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "node_modules/nanoid": { "version": "3.1.30", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", @@ -18974,6 +18989,11 @@ "node": ">= 6" } }, + "node_modules/property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "node_modules/proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -19352,8 +19372,7 @@ "node_modules/regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "node_modules/regenerator-transform": { "version": "0.14.5", @@ -22340,6 +22359,17 @@ "node": ">= 0.8" } }, + "node_modules/vee-validate": { + "version": "4.5.7", + "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.5.7.tgz", + "integrity": "sha512-EcpvOikBP5LlRIKwULfwRDeyIaERuOJztZUPWRmSIeWpeQWD6hs9qQ8A3CmVVteqEohbUM07gV/ea8lPXCfCJQ==", + "dependencies": { + "@vue/devtools-api": "^6.0.0-beta.15" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vendors": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz", @@ -24319,6 +24349,28 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", "dev": true + }, + "node_modules/yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/yup/node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=" } }, "dependencies": { @@ -25421,7 +25473,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz", "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.4" } @@ -27496,6 +27547,11 @@ "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==", "dev": true }, + "@types/lodash": { + "version": "4.14.178", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz", + "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==" + }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -37445,8 +37501,12 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, "lodash.debounce": { "version": "4.0.8", @@ -37888,6 +37948,11 @@ "dev": true, "optional": true }, + "nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "nanoid": { "version": "3.1.30", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", @@ -39538,6 +39603,11 @@ "sisteransi": "^1.0.5" } }, + "property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -39856,8 +39926,7 @@ "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "regenerator-transform": { "version": "0.14.5", @@ -42300,6 +42369,14 @@ "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", "dev": true }, + "vee-validate": { + "version": "4.5.7", + "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.5.7.tgz", + "integrity": "sha512-EcpvOikBP5LlRIKwULfwRDeyIaERuOJztZUPWRmSIeWpeQWD6hs9qQ8A3CmVVteqEohbUM07gV/ea8lPXCfCJQ==", + "requires": { + "@vue/devtools-api": "^6.0.0-beta.15" + } + }, "vendors": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz", @@ -43914,6 +43991,27 @@ "dev": true } } + }, + "yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "requires": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + }, + "dependencies": { + "toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=" + } + } } } } diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 6c82ab6bb..d96886088 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -1,29 +1,38 @@ @@ -774,6 +888,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import funnelHeader from "@/common-components/funnel-header/funnel-header"; import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal"; import checkbox from "@/ux-components/checkbox/checkbox"; +import buttonQuestion from "@/common-components/button-question/button-question" export default { name: "App", components: { @@ -787,10 +902,75 @@ export default { listButtonHorizontal, checkbox, funnelHeader, + buttonQuestion }, data() { return { years: [2023, 2022, 2021, 2020], + checkboxAnswers: ['Checkbox Answer 1', 'Checkbox Answer 2', 'Checkbox Answer 3'], + radioAnswers: ['Radio Answer 1', 'Radio Answer 2', 'Radio Answer 3'], + horizontalCheckboxAnswers: ['HCB Answer 1', 'HCB Answer 2', 'HCB Answer 3'], + horizontalRadioAnswers: ['HR Answer 1', 'HR Answer 2', 'HR Answer 3'], + listCardCheckBox: [{ + Name: 'List-Card-CB', + Text: "List Card CB", + SubText: "checkbox", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }], + listCardRadio: [{ + Name: 'List-Card-R', + Text: "List Card R", + SubText: "Radio", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }], + listCardCheckBoxHorizontalSubText: [{ + Name: 'List-Card-CBHst', + Text: "List Card CBHst", + SubText: "With Subtext", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }], + listCardCheckBoxHorizontal: [{ + Name: 'List-Card-CBH', + Text: "List Card CBH", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }], + listRadioHorizontalSubText: [{ + Name: 'List-Card-RHst', + Text: "List Card RHst", + SubText: "With Subtext", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }], + listRadioHorizontal: [{ + Name: 'List-Card-RH', + Text: "List Card RH", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }], + listCardGroup: [{ + Name: 'Side-Window-1', + Text: "Side Window", + SubText: "With Subtext", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }, + { + Name: 'Side-Window-2', + Text: "Side Window", + SubText: "With Subtext that is more than one line", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }, + { + Name: 'Side-Window-3', + Text: "Side Window", + ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', + AnswerImageUrl: "side-window-damage-right-all.svg" + }], }; }, }; diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue index c3e0f0cdd..2df7ee70f 100644 --- a/src/layouts/form-test/form-test.vue +++ b/src/layouts/form-test/form-test.vue @@ -25,6 +25,7 @@ groupName="demo" aria-required="true" buttonID="1" + buttonLabel="1" value="1" buttonLabelSubCopy="" textPosition="text-center" @@ -37,6 +38,7 @@ groupName="demo" aria-required="true" buttonID="2" + buttonLabel="2" value="2" buttonLabelSubCopy="" textPosition="text-center" @@ -49,6 +51,7 @@ groupName="demo" aria-required="true" buttonID="3" + buttonLabel="3" value="3" buttonLabelSubCopy="" textPosition="text-center" @@ -71,18 +74,21 @@ diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index ac6ff45bb..eaa6b7306 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -3,6 +3,9 @@ :questionText="questionText" :answers="makes" groupName="Choose Vehicle Make" + textPosition="text-start" + :isVehicleQuestion="true" + :loaderEnabled="true" v-model="modelValue" /> diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 68d23bc16..bb50872d6 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -3,6 +3,9 @@ :questionText="questionText" :answers="models" groupName="Choose Vehicle Model" + textPosition="text-start" + :isVehicleQuestion="true" + :loaderEnabled="true" v-model="modelValue" /> diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index a9bbd9fbf..d14b39599 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -3,6 +3,9 @@ :questionText="questionText" :answers="styles" groupName="Choose Vehicle Style" + textPosition="text-start" + :isVehicleQuestion="true" + :loaderEnabled="true" v-model="modelValue" /> diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 6399abb0c..98538a361 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -3,6 +3,9 @@ :questionText="questionText" :answers="years" groupName="Choose Vehicle Year" + :isVehicleQuestion="true" + textPosition="text-start" + :loaderEnabled="true" v-model="modelValue" /> diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index e6d47f3fb..91e4e1f6c 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -183,37 +183,4 @@ describe("list-button-horizontal.vue", () => { }); - it("Should return first item if first item in group", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - positionInGroup: 1 - }, - }); - - // Assert - - const label = wrapper.find("label"); - - expect(label.attributes('class')).toContain("first-item"); - - }); - - it("Should return last item if last item in group", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - positionInGroup: 3, - totalInGroup: 3 - }, - }); - - // Assert - - const label = wrapper.find("label"); - - expect(label.attributes('class')).toContain("last-item"); - - }); - }); diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 5be79c49c..9bdeee4b8 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -1,53 +1,11 @@ - @@ -60,17 +18,17 @@ import loader from "@/ux-components/loader/loader"; export default { name: "listButtonHorizontal", props: { - isMultiSelect: Boolean, /* Defines use as checkbox */ - groupName: String, /* Required, unique for each button GROUP */ - buttonID: String, /* Required, unique for each button. Used for button id, label and