Merge pull request #155 from Safelite/feature/CSR-186_add-logic-to-question-vue
Feature/csr 186 add logic to question vue
This commit is contained in:
max-dempsey
GitHub
commit
908f4b169d
13 changed files with 490 additions and 392 deletions
120
package-lock.json
generated
120
package-lock.json
generated
|
|
@ -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="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,38 @@
|
|||
<template>
|
||||
<div class="button_question">
|
||||
<div class="mt-6 mb-4 d-flex">
|
||||
<div :class="isVehicleQuestion ? 'button_question' : ''">
|
||||
<div v-if="questionText" class="mt-6 mb-4 d-flex">
|
||||
<span class="text-center fs-6 fw-bold w-100">{{
|
||||
questionText
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
<fieldset class="overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
|
||||
<fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
||||
<legend class="sr-only">{{groupName}}</legend>
|
||||
<listButton v-for="answer in answers" :key="answer"
|
||||
:buttonID="answer"
|
||||
@mouseup="chooseAnswer(answer)"
|
||||
@keyup.space="chooseAnswer(answer)"
|
||||
:loaderEnabled="true"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1.5"
|
||||
data-test="button"
|
||||
:groupName="groupName"
|
||||
textPosition="text-start"
|
||||
:isRequired="true"
|
||||
:value="modelValue"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
/>
|
||||
<div :class="isRow ? 'row g-2' : isColumn ? columnClasses : 'w-100'">
|
||||
<component :is="buttonType" v-for="answer in answers" :key="answer"
|
||||
:buttonID="answer.Name ? answer.Name : answer"
|
||||
@mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
|
||||
@keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
|
||||
:loaderEnabled="loaderEnabled"
|
||||
:loaderColor="loaderColor"
|
||||
:loaderPosition="loaderPosition"
|
||||
:sizeInRem="sizeInRem"
|
||||
data-test="button"
|
||||
:groupName="groupName"
|
||||
:textPosition="textPosition"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:isHorizontal="isHorizontal"
|
||||
:ariaLabelBy="ariaLabelBy"
|
||||
:isRequired="isRequired"
|
||||
:buttonImage="answer.AnswerImageUrl"
|
||||
:buttonImageId="answer.ImageId"
|
||||
:buttonLabel="answer.Text ? answer.Text : answer"
|
||||
:altText="altText"
|
||||
:buttonLabelSubCopy="answer.SubText"
|
||||
:value="modelValue"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,14 +40,55 @@
|
|||
|
||||
<script>
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
|
||||
export default {
|
||||
name: "buttonQuestion",
|
||||
props: {
|
||||
buttonType: {
|
||||
type: String,
|
||||
default: 'listButton'
|
||||
},
|
||||
isMultiSelect: Boolean,
|
||||
questionText: String,
|
||||
answers: Array,
|
||||
textPosition: {
|
||||
type: String,
|
||||
default: 'text-center'
|
||||
},
|
||||
loaderEnabled: Boolean,
|
||||
loaderColor: {
|
||||
type: String,
|
||||
default: 'blue'
|
||||
},
|
||||
loaderPosition: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
sizeInRem: {
|
||||
type: [String, Number],
|
||||
default: 1.5
|
||||
},
|
||||
modelValue: String,
|
||||
groupName: String
|
||||
groupName: String,
|
||||
ariaLabelBy: String,
|
||||
isRequired: Boolean,
|
||||
isVehicleQuestion: Boolean,
|
||||
isHorizontal: Boolean,
|
||||
isColumn: Boolean,
|
||||
isRow: Boolean,
|
||||
buttonImage: String,
|
||||
buttonImageId: String,
|
||||
buttonLabel: String,
|
||||
altText: String,
|
||||
buttonLabelSubCopy: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vehicleQuestionClasses: 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0',
|
||||
columnClasses: 'd-flex flex-row p-0'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
chooseAnswer(answer) {
|
||||
|
|
@ -47,6 +97,8 @@ export default {
|
|||
},
|
||||
components: {
|
||||
listButton,
|
||||
listButtonHorizontal,
|
||||
listCard
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -53,39 +53,33 @@
|
|||
<fieldset>
|
||||
<legend class="sr-only">Functioning as Checkbox</legend>
|
||||
<div class="row g-2">
|
||||
<div class="col-4">
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 1"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="side-window-damage-right-all.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 2"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description with more than one line"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 3"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy=""
|
||||
/>
|
||||
</div>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 1"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description"
|
||||
/>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="side-window-damage-right-all.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 2"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy="Description with more than one line"
|
||||
/>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox 3"
|
||||
groupID="checkbox-demo-1"
|
||||
buttonLabelSubCopy=""
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="row my-4">
|
||||
|
|
@ -167,7 +161,8 @@
|
|||
<fieldset>
|
||||
<legend class="sr-only">Horizontal Checkbox</legend>
|
||||
<listCard
|
||||
isMultiSelectHorizontal
|
||||
isMultiSelect
|
||||
isHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
|
|
@ -184,7 +179,8 @@
|
|||
<fieldset>
|
||||
<legend class="sr-only">Checkbox no Description</legend>
|
||||
<listCard
|
||||
isMultiSelectHorizontal
|
||||
isMultiSelect
|
||||
isHorizontal
|
||||
buttonImage="side-window-damage-right-all.svg"
|
||||
buttonLabel="Side Window"
|
||||
altText=""
|
||||
|
|
@ -201,7 +197,7 @@
|
|||
<fieldset>
|
||||
<legend class="sr-only">Horizontal Radio Button</legend>
|
||||
<listCard
|
||||
isRadioHorizontal
|
||||
isHorizontal
|
||||
buttonImage="back-glass-damage.svg"
|
||||
buttonLabel="Rear Window"
|
||||
altText=""
|
||||
|
|
@ -218,7 +214,7 @@
|
|||
<fieldset>
|
||||
<legend class="sr-only">Radio Button no Description</legend>
|
||||
<listCard
|
||||
isRadioHorizontal
|
||||
isHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
altText=""
|
||||
|
|
@ -247,6 +243,7 @@
|
|||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2021"
|
||||
buttonLabel="2021"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -259,6 +256,7 @@
|
|||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2020"
|
||||
buttonLabel="2020"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -271,6 +269,7 @@
|
|||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2019"
|
||||
buttonLabel="2019"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -290,6 +289,7 @@
|
|||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2018"
|
||||
buttonLabel="2018"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -301,6 +301,7 @@
|
|||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2017"
|
||||
buttonLabel="2017"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -312,6 +313,7 @@
|
|||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2016"
|
||||
buttonLabel="2016"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -337,6 +339,7 @@
|
|||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Chevrolet"
|
||||
buttonLabel="Chevrolet"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -349,6 +352,7 @@
|
|||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Dodge"
|
||||
buttonLabel="Dodge"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -361,6 +365,7 @@
|
|||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Ford"
|
||||
buttonLabel="Ford"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -380,6 +385,7 @@
|
|||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Honda"
|
||||
buttonLabel="Honda"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -391,6 +397,7 @@
|
|||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Acura"
|
||||
buttonLabel="Acura"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -402,6 +409,7 @@
|
|||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Infiniti"
|
||||
buttonLabel="Infiniti"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
|
|
@ -427,6 +435,7 @@
|
|||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Corvette"
|
||||
buttonLabel="Corvette"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
|
|
@ -439,6 +448,7 @@
|
|||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Testarosa"
|
||||
buttonLabel="Testarosa"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
|
|
@ -451,6 +461,7 @@
|
|||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="S600"
|
||||
buttonLabel="S600"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
|
|
@ -470,6 +481,7 @@
|
|||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Accord"
|
||||
buttonLabel="Accord"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
|
|
@ -481,6 +493,7 @@
|
|||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Civic"
|
||||
buttonLabel="Civic"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
|
|
@ -492,6 +505,7 @@
|
|||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Ridgeline"
|
||||
buttonLabel="Ridgeline"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
|
|
@ -519,6 +533,7 @@
|
|||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="1"
|
||||
buttonLabel="1"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
|
|
@ -532,6 +547,7 @@
|
|||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="2"
|
||||
buttonLabel="2"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
|
|
@ -545,6 +561,7 @@
|
|||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="3"
|
||||
buttonLabel="3"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
|
|
@ -567,6 +584,7 @@
|
|||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="4"
|
||||
buttonLabel="4"
|
||||
textPosition="text-center"
|
||||
loaderEnabled=true
|
||||
loaderColor="blue"
|
||||
|
|
@ -580,6 +598,7 @@
|
|||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="5"
|
||||
buttonLabel="5"
|
||||
textPosition="text-center"
|
||||
loaderEnabled=true
|
||||
loaderColor="blue"
|
||||
|
|
@ -593,6 +612,7 @@
|
|||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="6"
|
||||
buttonLabel="6"
|
||||
textPosition="text-center"
|
||||
loaderEnabled=true
|
||||
loaderColor="blue"
|
||||
|
|
@ -760,6 +780,100 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
|
||||
</div>
|
||||
</div>
|
||||
<buttonQuestion
|
||||
:answers="checkboxAnswers"
|
||||
:isMultiSelect="true"
|
||||
ariaLabelBy="checkbox"
|
||||
groupName="checkbox-list"
|
||||
questionText="List Button as checkbox"
|
||||
/>
|
||||
<buttonQuestion
|
||||
:answers="radioAnswers"
|
||||
ariaLabelBy="radio"
|
||||
groupName="radio-list"
|
||||
questionText="List Button as radio"
|
||||
/>
|
||||
<buttonQuestion
|
||||
:answers="horizontalCheckboxAnswers"
|
||||
buttonType="listButtonHorizontal"
|
||||
:isMultiSelect="true"
|
||||
isColumn
|
||||
ariaLabelBy="checkbox"
|
||||
groupName="checkbox-list-horizontal"
|
||||
questionText="List Button Horizontal as checkbox"
|
||||
/>
|
||||
<buttonQuestion
|
||||
:answers="horizontalRadioAnswers"
|
||||
buttonType="listButtonHorizontal"
|
||||
isColumn
|
||||
ariaLabelBy="radio"
|
||||
groupName="radio-list-horizontal"
|
||||
questionText="List Button Horizontal as radio"
|
||||
sizeInRem="1"
|
||||
/>
|
||||
<buttonQuestion
|
||||
:answers="listCardCheckBox"
|
||||
buttonType="listCard"
|
||||
isMultiSelect
|
||||
ariaLabelBy="check_card"
|
||||
groupName="check-list-card"
|
||||
questionText="List Card as checkbox"
|
||||
/>
|
||||
<buttonQuestion
|
||||
:answers="listCardRadio"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="radio_card"
|
||||
groupName="radio-card"
|
||||
questionText="List Card as radio"
|
||||
/>
|
||||
<buttonQuestion
|
||||
isMultiSelect
|
||||
isHorizontal
|
||||
:answers="listCardCheckBoxHorizontal"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="horizontal_check_card"
|
||||
groupName="horizontal_check-card"
|
||||
questionText="List Card Horizontal as checkbox"
|
||||
/>
|
||||
<buttonQuestion
|
||||
isMultiSelect
|
||||
isHorizontal
|
||||
:answers="listCardCheckBoxHorizontalSubText"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="horizontal_check_card-st"
|
||||
groupName="horizontal_check-card-st"
|
||||
questionText="With Subtext"
|
||||
/>
|
||||
<buttonQuestion
|
||||
isHorizontal
|
||||
:answers="listRadioHorizontal"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="horizontal_radio_card"
|
||||
groupName="horizontal_cradio-card"
|
||||
questionText="List Card Horizontal as radio"
|
||||
/>
|
||||
<buttonQuestion
|
||||
isHorizontal
|
||||
:answers="listRadioHorizontalSubText"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="horizontal_radio_card-st"
|
||||
groupName="horizontal_cradio-card-st"
|
||||
questionText="With Subtext"
|
||||
/>
|
||||
<buttonQuestion
|
||||
isMultiSelect
|
||||
isRow
|
||||
:answers="listCardGroup"
|
||||
buttonType="listCard"
|
||||
ariaLabelBy="horizontal_radio_card-group"
|
||||
groupName="horizontal_cradio-card-group"
|
||||
questionText="In column layout"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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"
|
||||
}],
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<listButton
|
||||
isMultiSelect
|
||||
buttonID="Single Windshield"
|
||||
buttonLabel="Single Windshield"
|
||||
value="Single Windshield"
|
||||
groupName="demo2"
|
||||
/>
|
||||
<listButton
|
||||
isMultiSelect
|
||||
buttonID="Driver Side"
|
||||
buttonLabel="Driver Side"
|
||||
value="Driver Side"
|
||||
groupName="demo2"
|
||||
/>
|
||||
<listButton
|
||||
isMultiSelect
|
||||
buttonID="Passenger Side"
|
||||
buttonLabel="Passenger Side"
|
||||
value="Passenger Side"
|
||||
groupName="demo2"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
:questionText="questionText"
|
||||
:answers="makes"
|
||||
groupName="Choose Vehicle Make"
|
||||
textPosition="text-start"
|
||||
:isVehicleQuestion="true"
|
||||
:loaderEnabled="true"
|
||||
v-model="modelValue"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
:questionText="questionText"
|
||||
:answers="models"
|
||||
groupName="Choose Vehicle Model"
|
||||
textPosition="text-start"
|
||||
:isVehicleQuestion="true"
|
||||
:loaderEnabled="true"
|
||||
v-model="modelValue"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
:questionText="questionText"
|
||||
:answers="styles"
|
||||
groupName="Choose Vehicle Style"
|
||||
textPosition="text-start"
|
||||
:isVehicleQuestion="true"
|
||||
:loaderEnabled="true"
|
||||
v-model="modelValue"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
:questionText="questionText"
|
||||
:answers="years"
|
||||
groupName="Choose Vehicle Year"
|
||||
:isVehicleQuestion="true"
|
||||
textPosition="text-start"
|
||||
:loaderEnabled="true"
|
||||
v-model="modelValue"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,53 +1,11 @@
|
|||
<!-- See the component-test.vue page for example implementation -->
|
||||
<template>
|
||||
<!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
|
||||
<div
|
||||
v-if="isMultiSelect"
|
||||
class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
@click="handleClick(value)"
|
||||
:data-focus-target="groupName"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-labelledby="buttonID"
|
||||
class="d-flex flex-column justify-content-center py-3 px-4"
|
||||
:class="isFirstOrLastButton"
|
||||
>
|
||||
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
|
||||
<div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
|
||||
<label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="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>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="col list-group list-button-horizontal d-flex flex-column mb-2"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
@click="handleClick(value)"
|
||||
:data-focus-target="groupName"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-labelledby="buttonID"
|
||||
class="d-flex flex-column justify-content-center py-3 px-4"
|
||||
:class="isFirstOrLastButton"
|
||||
>
|
||||
<span class="m-0" :class="textPosition">{{buttonID}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
|
||||
<loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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 <label for> */
|
||||
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
|
||||
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
|
||||
loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
|
||||
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
|
||||
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
|
||||
sizeInRem: Number, /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
|
||||
totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
|
||||
positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
buttonID: String,
|
||||
buttonLabel: String,
|
||||
buttonLabelSubCopy: String,
|
||||
screenReaderOnlyText: String,
|
||||
textPosition: String,
|
||||
loaderEnabled: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number, String],
|
||||
isRequired: Boolean,
|
||||
value: { // Field initial value
|
||||
type: String,
|
||||
|
|
@ -87,24 +45,15 @@ export default {
|
|||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
handleClick(value) {
|
||||
this.loaderEnabled && this.displayLoader();
|
||||
if(this.loaderEnabled){
|
||||
this.displayLoader();
|
||||
}
|
||||
this.handleChange(value);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
computed: {
|
||||
isFirstOrLastButton() {
|
||||
let className = "";
|
||||
if (this.positionInGroup == this.totalInGroup) {
|
||||
className = "last-item";
|
||||
} else if (this.positionInGroup == 1) {
|
||||
className = "first-item";
|
||||
}
|
||||
return className;
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { groupName, value } = toRefs(props);
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
|
@ -118,6 +67,7 @@ export default {
|
|||
errorMessage,
|
||||
};
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -156,11 +106,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,13 @@
|
|||
<template>
|
||||
<!-- See the component-test.vue page for example implementation -->
|
||||
<div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
@click="handleClick(value)"
|
||||
:data-focus-target="groupName"
|
||||
>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-labelledby="buttonID"
|
||||
class="d-flex flex-column justify-content-center py-3 px-4"
|
||||
>
|
||||
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
</label>
|
||||
<div class="list-group list-button d-flex flex-column w-100 mb-2">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName">
|
||||
<label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="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 && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
</label>
|
||||
</div>
|
||||
<div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
@click="handleClick(value)"
|
||||
:data-focus-target="groupName"
|
||||
>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-labelledby="buttonID"
|
||||
class="d-flex flex-column justify-content-center py-3 px-4"
|
||||
>
|
||||
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -52,17 +17,18 @@ import loader from "@/ux-components/loader/loader";
|
|||
export default {
|
||||
name: "listButton",
|
||||
props: {
|
||||
isMultiSelect: Boolean, /* Defines use as checkbox */
|
||||
groupName: String, /* Required, unique for each button GROUP */
|
||||
buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
|
||||
isRequired: Boolean, /* Optional, default is false */
|
||||
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
|
||||
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
|
||||
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
|
||||
loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
|
||||
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
|
||||
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
|
||||
sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
buttonLabel: [Number,String],
|
||||
buttonID: [Number,String],
|
||||
isRequired: Boolean,
|
||||
textPosition: String,
|
||||
buttonLabelSubCopy: String,
|
||||
screenReaderOnlyText: String,
|
||||
loaderEnabled: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number,String],
|
||||
value: { // Field initial value
|
||||
type: String,
|
||||
default: ""
|
||||
|
|
@ -78,7 +44,9 @@ export default {
|
|||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
handleClick(value) {
|
||||
this.loaderEnabled && this.displayLoader();
|
||||
if(this.loaderEnabled){
|
||||
this.displayLoader();
|
||||
}
|
||||
this.handleChange(value);
|
||||
}
|
||||
},
|
||||
|
|
@ -111,4 +79,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,65 +22,6 @@ describe("list-card.vue", () => {
|
|||
expect(input.attributes().type).toEqual("checkbox");
|
||||
});
|
||||
|
||||
it("Should return input type radio if isRadio is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadio: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
});
|
||||
|
||||
it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isMultiSelectHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("checkbox");
|
||||
|
||||
});
|
||||
|
||||
it("Should return input type radio if isRadioHorizontal is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
propsData: {
|
||||
isRadioHorizontal: true,
|
||||
buttonLabel: "Windshield",
|
||||
buttonID: "List Card Checkbox",
|
||||
groupID: "radio-demo-1",
|
||||
groupName: "radio 1",
|
||||
buttonImage: "windshield-damage.svg"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
expect(input.attributes().type).toEqual("radio");
|
||||
|
||||
});
|
||||
|
||||
it("Should return primary label text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(listCard, {
|
||||
|
|
|
|||
|
|
@ -1,90 +1,18 @@
|
|||
<template>
|
||||
<!-- Heavily documented below -->
|
||||
<div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center h-100">
|
||||
<input
|
||||
type="checkbox"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonLabel"
|
||||
:aria-required="isRequired"
|
||||
@click="handleChange(value)"
|
||||
:data-focus-target="groupName"
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100"
|
||||
tabindex="-1"
|
||||
>
|
||||
<img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<p class="small m-0 order-3">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center h-100">
|
||||
<input
|
||||
type="radio"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
@click="handleChange(value)"
|
||||
:data-focus-target="groupName"
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100"
|
||||
tabindex="-1"
|
||||
>
|
||||
<img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center h-100">
|
||||
<input
|
||||
type="checkbox"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonLabel"
|
||||
:aria-required="isRequired"
|
||||
@click="handleChange(value)"
|
||||
:data-focus-target="groupName"
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
class="d-flex flex-row w-100 align-items-center py-r ps-3 pe-8 px-2 h-100"
|
||||
tabindex="-1"
|
||||
:class="{'checkboxTop': buttonLabelSubCopy}"
|
||||
>
|
||||
<img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<div class="order-2">
|
||||
<p class="m-0 small">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center h-100">
|
||||
<input
|
||||
type="radio"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonLabel"
|
||||
:aria-required="isRequired"
|
||||
@click="handleChange(value)"
|
||||
:data-focus-target="groupName"
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
class="d-flex flex-row w-100 align-items-center py-r ps-3 pe-8 px-2 h-100"
|
||||
tabindex="-1"
|
||||
:class="{'checkboxTop': buttonLabelSubCopy}"
|
||||
>
|
||||
<img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
|
||||
<div class="order-2">
|
||||
<p class="m-0 small">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
|
||||
</div>
|
||||
</label>
|
||||
<div class="col">
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleChange(value)" :data-focus-target="groupName" />
|
||||
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
|
||||
<img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
|
||||
<p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
|
||||
<div v-if="isHorizontal" class="order-2">
|
||||
<p class="m-0 small">{{buttonLabel}}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -97,11 +25,10 @@ export default {
|
|||
props: {
|
||||
//Must choose one of the following four options
|
||||
isMultiSelect: Boolean, //Defines use as checkbox
|
||||
isRadio: Boolean, //Defines use as radio button
|
||||
isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
|
||||
isRadioHorizontal: Boolean, //Defines use as horizontal radio button
|
||||
isHorizontal: Boolean,
|
||||
//end must choose
|
||||
buttonImage: String,//Required: File name of image
|
||||
buttonImageId: String,
|
||||
buttonLabel: String,//Required: Label text
|
||||
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.
|
||||
|
|
@ -113,26 +40,19 @@ export default {
|
|||
default: ""
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
columnClasses: "flex-column pt-4 pb-2",
|
||||
rowClasses: "flex-row py-r ps-3 pe-8"
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { groupName, value } = toRefs(props);
|
||||
const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
|
||||
if (props.isMultiSelect) {
|
||||
return "checkbox";
|
||||
} else if (props.isRadio) {
|
||||
return "radio";
|
||||
} else if (props.isMultiSelectHorizontal) {
|
||||
return "checkbox";
|
||||
} else if (props.isRadioHorizontal) {
|
||||
return "radio";
|
||||
}
|
||||
}
|
||||
|
||||
props.isMultiSelect ? "checkbox" : "radio";
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
const { checked, handleChange } = useField(groupName, undefined, {
|
||||
type: inputType(),
|
||||
type: inputType,
|
||||
checkedValue: value,
|
||||
});
|
||||
|
||||
return {
|
||||
checked,
|
||||
handleChange,
|
||||
|
|
|
|||
Loading…
Reference in a new issue