max-dempsey
GitHub
commit
5a3850948a
12 changed files with 490 additions and 128 deletions
|
|
@ -19,3 +19,67 @@ describe("buttonQuestion.vue", () => {
|
|||
expect(wrapper.props().modelValue).toBe("2020");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion);
|
||||
await wrapper.setProps({
|
||||
isOverflowScrollable: true,
|
||||
});
|
||||
// Assert
|
||||
const fieldSet = wrapper.find('fieldset');
|
||||
expect(fieldSet.classes()).toContain("overflow-scroll");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should show appropriate classes for button type", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion);
|
||||
await wrapper.setProps({
|
||||
buttonType: "listCard",
|
||||
});
|
||||
// Assert
|
||||
const Div = wrapper.find('fieldset div');
|
||||
expect(Div.classes()).toContain("row");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should trigger event modelValue change on select", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion);
|
||||
await wrapper.setData({
|
||||
modelValueAnswers: ["Windshield"],
|
||||
chosenAnswer: "Windshield"
|
||||
});
|
||||
wrapper.setValue({ answer: wrapper.vm.chosenAnswer });
|
||||
await wrapper.vm.$nextTick();
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{answer: "Windshield"}]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion);
|
||||
await wrapper.setData({
|
||||
modelValueAnswers: ["Windshield", "BackDoor"]
|
||||
});
|
||||
wrapper.vm.isItemChecked(true);
|
||||
// Assert
|
||||
expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object');
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should not trigger event modelValue change on select if checked is false", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion);
|
||||
wrapper.vm.isItemChecked(false);
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]);
|
||||
});
|
||||
});
|
||||
|
|
@ -4,40 +4,37 @@
|
|||
<span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
|
||||
</div>
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
<fieldset
|
||||
class="w-100"
|
||||
:class="getFieldSetClasses"
|
||||
role="radiogroup"
|
||||
:aria-labelledby="groupName ? groupName + '-radio-group' : ''"
|
||||
>
|
||||
<legend class="sr-only">{{ groupName }}</legend>
|
||||
<div :class="getComponentWrapperClasses">
|
||||
<component
|
||||
:is="buttonType"
|
||||
v-for="answer in answers"
|
||||
:key="answer"
|
||||
@mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
|
||||
@keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
|
||||
:buttonID="answer.Name ? answer.Name : answer"
|
||||
:buttonLabel="answer.Text ? answer.Text : answer"
|
||||
:buttonLabelSubCopy="answer.SubText"
|
||||
:textPosition="textPosition"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:groupName="groupName"
|
||||
:loaderEnabled="loaderEnabled"
|
||||
: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)"
|
||||
:value="modelValue"
|
||||
data-test="button"
|
||||
/>
|
||||
</div>
|
||||
<fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
||||
<legend class="sr-only">{{groupName}}</legend>
|
||||
<div :class="getComponentWrapperClasses">
|
||||
<component
|
||||
:is="buttonType"
|
||||
v-for="answer in answers"
|
||||
:key="answer.Name ? answer.Name : answer"
|
||||
@mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
|
||||
@keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
|
||||
@isChecked="isItemChecked"
|
||||
:buttonID="answer.Name ? answer.Name : answer"
|
||||
:value="answer.Name ? answer.Name : answer"
|
||||
:buttonLabel="answer.Text ? answer.Text : answer"
|
||||
:buttonLabelSubCopy="answer.SubText"
|
||||
:textPosition="textPosition"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:groupName="groupName"
|
||||
:loaderEnabled="loaderEnabled"
|
||||
: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'"
|
||||
data-test="button"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +76,7 @@ export default {
|
|||
isRequired: Boolean,
|
||||
isOverflowScrollable: Boolean,
|
||||
isWide: Boolean,
|
||||
modelValue: String,
|
||||
modelValue: [Array, String],
|
||||
},
|
||||
computed: {
|
||||
getFieldSetClasses() {
|
||||
|
|
@ -96,16 +93,34 @@ export default {
|
|||
case "listButtonHorizontal":
|
||||
classes = "d-flex flex-row p-0";
|
||||
break;
|
||||
case "listCard":
|
||||
classes = "row g-2";
|
||||
case 'listCard':
|
||||
classes = 'row justify-content-center g-2'
|
||||
break;
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
modelValueAnswers: [],
|
||||
chosenAnswer: String
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(Array.isArray(this.answers) && this.answers.length === 1) {
|
||||
const onlyAnswer = typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0];
|
||||
this.$emit("update:modelValue", onlyAnswer);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseAnswer(answer) {
|
||||
this.$emit("update:modelValue", answer);
|
||||
this.chosenAnswer = answer;
|
||||
},
|
||||
isItemChecked(val) {
|
||||
// Add or remove item to array of data to emit
|
||||
val ? this.modelValueAnswers.push(this.chosenAnswer) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(this.chosenAnswer), 1);
|
||||
|
||||
this.$emit("update:modelValue", this.modelValueAnswers.length ? this.modelValueAnswers : undefined);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import store from "@/store";
|
||||
jest.mock("@/store", () => { return {}; }, {virtual: true});
|
||||
|
||||
describe("replace-options-question.vue", () => {
|
||||
test("Selected damage option is emitted upon selection.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
|
||||
const damageToSelect = ["Backseat"];
|
||||
|
||||
//Act
|
||||
wrapper.setValue({ modelValue: damageToSelect });
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("replace-options-question.vue", () => {
|
||||
test("Answers to display filtered by data from api.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
|
||||
|
||||
//Act
|
||||
replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
|
||||
|
||||
//Assert
|
||||
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
modelValueProp = ["Windshield"],
|
||||
isAvailale = true,
|
||||
isMultiSelect = false,
|
||||
filterByVehicleCategory = false,
|
||||
groupName = "damageQuestion",
|
||||
cmsQuestionText = "CMS text goes here",
|
||||
cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
|
||||
dataFromStoreApi = [],
|
||||
}) {
|
||||
|
||||
//Mock store
|
||||
store.dispatch = jest.fn(() => dataFromStoreApi);
|
||||
store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
|
||||
const mountOptions = getMountOptions({
|
||||
store: {
|
||||
dispatch: store.dispatch,
|
||||
getters: store.getters,
|
||||
},
|
||||
});
|
||||
|
||||
//Mock props
|
||||
mountOptions.propsData = {
|
||||
modelValue: modelValueProp,
|
||||
isAvailable: isAvailale,
|
||||
isMultiSelect: isMultiSelect,
|
||||
filterByVehicleCategory: filterByVehicleCategory
|
||||
};
|
||||
|
||||
const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
|
||||
|
||||
//Mock CMS content
|
||||
const cmsContent = {
|
||||
groupName: groupName,
|
||||
QuestionText: cmsQuestionText,
|
||||
Answers: cmsAnswers,
|
||||
};
|
||||
const replaceOptions = dataFromStoreApi;
|
||||
return { wrapper, cmsContent, replaceOptions };
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div class="replace-options-question">
|
||||
<buttonQuestion
|
||||
v-if="isAvailable && answersToDisplay.length > 1"
|
||||
:questionText="questionText"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
v-model="modelValue"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import store from "@/store";
|
||||
|
||||
export default ({
|
||||
name: "replaceOptionsQuestion",
|
||||
data(){
|
||||
return {
|
||||
questionText: String,
|
||||
answersFromCms: Array,
|
||||
replaceOptions: Array,
|
||||
groupName: String,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
isAvailable: Boolean,
|
||||
filterByVehicleCategory: Boolean,
|
||||
modelValue: Array,
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent, replaceOptions, groupName){
|
||||
this.groupName = groupName;
|
||||
this.questionText = cmsContent.QuestionText;
|
||||
this.answersFromCms = cmsContent.Answers;
|
||||
this.replaceOptions = replaceOptions;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
answersToDisplay(){
|
||||
return Array.isArray(this.answersFromCms)
|
||||
? this.answersFromCms.filter(ans =>
|
||||
{
|
||||
const name = ans.Name.split('-');
|
||||
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
|
||||
})
|
||||
: [];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(val) {
|
||||
this.$emit("update:modelValue", val);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,7 @@ import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
|
|||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
||||
|
||||
// Supporting Files
|
||||
import { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
|
|
@ -144,7 +145,9 @@ function setupMocks({
|
|||
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
|
||||
baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
|
||||
return Promise.resolve({
|
||||
data: ["Front Window", "Back Window", "Side Window"],
|
||||
driverSideOptions: {
|
||||
availableReplacementOptions: ["Front", "Back", "Side"],
|
||||
}
|
||||
});
|
||||
});
|
||||
const apiResponses = {
|
||||
|
|
@ -159,7 +162,11 @@ function setupMocks({
|
|||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
},
|
||||
damageOptions: ["Front Window", "Back Window", "Side Window"],
|
||||
damageOptions: {
|
||||
driverSideOptions: {
|
||||
availableReplacementOptions: ["Front", "Back", "Side"],
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
|
|
@ -180,6 +187,11 @@ function setupMocks({
|
|||
initializeComponent: jest.fn(),
|
||||
};
|
||||
|
||||
const driverSideOptions = replaceOptionsQuestion
|
||||
driverSideOptions.methods = {
|
||||
initializeComponent: jest.fn(),
|
||||
};
|
||||
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
const wrapper = shallowMount(vehicleDamage, mountOptions);
|
||||
|
||||
|
|
@ -197,5 +209,11 @@ function setupMocks({
|
|||
funnelSubHeaderWrapper.vm.initializeComponent =
|
||||
funnelSubHeader.methods.initializeComponent;
|
||||
|
||||
const driverSideOptionsWrapper = wrapper.findComponent({
|
||||
name: "replaceOptionsQuestion",
|
||||
});
|
||||
driverSideOptionsWrapper.vm.initializeComponent =
|
||||
replaceOptionsQuestion.methods.initializeComponent;
|
||||
|
||||
return { wrapper, apiPromise };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0 position-relative">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
</div>
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" />
|
||||
<funnelSubHeader
|
||||
ref="funnelSubHeader"
|
||||
/>
|
||||
<replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -11,6 +14,7 @@
|
|||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -54,7 +58,11 @@ export default {
|
|||
vm.$refs.funnelSubHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelSubHeaderWidget
|
||||
);
|
||||
// use resultMap.damageOptions for damage options
|
||||
vm.$refs.driverSideOptions.initializeComponent(
|
||||
resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
|
||||
);
|
||||
|
||||
//console.log(resultMap) for damageOptions and cms content data
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -66,6 +74,7 @@ export default {
|
|||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
replaceOptionsQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ export default {
|
|||
props: {
|
||||
modelValue: String,
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ const navigationScenarios = {
|
|||
SELECTED_MODEL: "SELECTED_MODEL",
|
||||
SELECTED_MAKE: "SELECTED_MAKE",
|
||||
SELECTED_STYLE: "SELECTED_STYLE",
|
||||
VEHICLE_DAMAGE: "VEHICLE_DAMAGE",
|
||||
CLICKED_BACK: "CLICKED_BACK",
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,44 @@
|
|||
<template>
|
||||
<div
|
||||
class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
|
||||
@mouseup="handleClick(value)"
|
||||
<div
|
||||
class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
|
||||
@mouseup="handleClick(value)"
|
||||
@keyup.space="handleClick(value)"
|
||||
>
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
v-model="modelValue"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-labelledby="buttonID"
|
||||
<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="[loaderColor, loaderPosition]"
|
||||
<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="[loaderColor, loaderPosition]"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -59,6 +69,7 @@ export default {
|
|||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -76,6 +87,11 @@ export default {
|
|||
this.handleChange(value);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(){
|
||||
this.$emit('isChecked', this.modelValue);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,30 +1,43 @@
|
|||
<template>
|
||||
<div
|
||||
class="list-group list-button d-flex flex-column w-100 mb-2"
|
||||
@mouseup="handleClick(value)"
|
||||
<div
|
||||
class="list-group list-button d-flex flex-column w-100 mb-2"
|
||||
@mouseup="handleClick(value)"
|
||||
@keyup.space="handleClick(value)"
|
||||
>
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-labelledby="buttonID"
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
v-model="modelValue"
|
||||
>
|
||||
<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>
|
||||
<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` }"
|
||||
|
|
@ -52,12 +65,13 @@ export default {
|
|||
loaderEnabled: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number, String],
|
||||
value: {
|
||||
// Field initial value
|
||||
type: String,
|
||||
sizeInRem: [Number,String],
|
||||
value: {
|
||||
// Field initial value
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -75,6 +89,11 @@ export default {
|
|||
this.handleChange(value);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(){
|
||||
this.$emit('isChecked', this.modelValue);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -119,4 +119,67 @@ describe("list-card.vue", () => {
|
|||
|
||||
expect(input.attributes()["aria-required"]).toEqual("true");
|
||||
});
|
||||
|
||||
it("Should return flex row classes if isWide 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",
|
||||
isRequired: true,
|
||||
isWide: true,
|
||||
buttonLabelSubCopy: ""
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8"]);
|
||||
});
|
||||
|
||||
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy 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",
|
||||
isRequired: true,
|
||||
isWide: true,
|
||||
buttonLabelSubCopy: "Button Subcopy"
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8", "checkboxTop"]);
|
||||
});
|
||||
|
||||
it("Should return flex column classes if isWide is false", 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",
|
||||
isRequired: true,
|
||||
isWide: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const label = wrapper.find("label");
|
||||
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,41 +1,39 @@
|
|||
<template>
|
||||
<!-- Heavily documented below -->
|
||||
<div class="col">
|
||||
<div
|
||||
class="list-card w-100 rounded-3 d-flex align-items-center h-100"
|
||||
:class="isWide ? 'horizontal' : ''"
|
||||
@mouseup="handleClick(value)"
|
||||
@keyup.space="handleClick(value)"
|
||||
>
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
class="d-flex w-100 align-items-center px-2 h-100"
|
||||
:class="getLabelClasses"
|
||||
tabindex="-1"
|
||||
<div :class="'col' + colLength">
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100"
|
||||
:class="isWide ? 'horizontal' : ''"
|
||||
@mouseup="handleChange(value)"
|
||||
@keyup.space="handleChange(value)">
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
v-model="modelValue"
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
class="d-flex w-100 align-items-center px-2 h-100"
|
||||
:class="getLabelClasses" tabindex="-1"
|
||||
>
|
||||
<img
|
||||
:id="buttonImageId"
|
||||
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
|
||||
v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
|
||||
<img
|
||||
:id="buttonImageId"
|
||||
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
|
||||
:src="buttonImage"
|
||||
:alt="altText"
|
||||
/>
|
||||
<p
|
||||
v-if="!isWide"
|
||||
class="small order-3"
|
||||
/>
|
||||
<p
|
||||
v-if="!isWide"
|
||||
class="small order-3"
|
||||
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
|
||||
>
|
||||
{{ buttonLabel }}
|
||||
{{buttonLabel}}
|
||||
</p>
|
||||
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
|
||||
{{ buttonLabelSubCopy }}
|
||||
{{buttonLabelSubCopy}}
|
||||
</p>
|
||||
<div v-if="isWide" class="order-2">
|
||||
<p class="m-0 small">{{ buttonLabel }}</p>
|
||||
|
|
@ -72,6 +70,8 @@ export default {
|
|||
type: String,
|
||||
default: "",
|
||||
},
|
||||
colLength: String,
|
||||
modelValue: false,
|
||||
},
|
||||
computed: {
|
||||
getLabelClasses() {
|
||||
|
|
@ -86,6 +86,11 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(){
|
||||
this.$emit('isChecked', this.modelValue);
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { groupName, value } = toRefs(props);
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
|
|
|||
Loading…
Reference in a new issue