From e3b12724298f01b19cc9a8abe099e11b55d2c6ba Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 19 Jan 2022 15:48:38 -0500 Subject: [PATCH] Reworking button question --- package-lock.json | 120 ++++++++++++++++-- .../button-question/button-question.vue | 66 ++++++++-- src/layouts/component-test/component-test.vue | 52 +++++++- .../make-question/make-question.vue | 3 + .../model-question/model-question.vue | 3 + .../style-question/style-question.vue | 3 + .../year-question/year-question.vue | 3 + .../list-button-horizontal.vue | 71 ++++++++++- src/ux-components/list-button/list-button.vue | 63 ++++++++- src/ux-components/list-card/list-card.vue | 66 ++++++++-- 10 files changed, 405 insertions(+), 45 deletions(-) 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 849f5a353..9ab1e68b4 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -1,27 +1,33 @@ @@ -768,6 +806,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: { @@ -781,10 +820,15 @@ 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'], }; }, }; 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.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 14017f07d..9a0703d0a 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -1,17 +1,70 @@ @@ -50,11 +103,15 @@ export default { + p { display: none; } - &.first-item { + } + &:first-of-type { + label { border-bottom-left-radius: 0.5rem; border-top-left-radius: 0.5rem; } - &.last-item { + } + &:last-of-type { + label { border-bottom-right-radius: 0.5rem; border-top-right-radius: 0.5rem; } diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 93e2bec49..f90525413 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -1,17 +1,70 @@ diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index aca55b49c..3048812fb 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,22 +1,72 @@