jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feautre/CSR-224

Browse source
This commit is contained in:
Frank 2021-12-15 13:25:47 -05:00
commit b1a765fd1c
28 changed files with 700 additions and 703 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/common-components/radio-question/radio-question.spec.js → src/common-components/button-question/button-question.spec.js
View file

@ -1,10 +1,10 @@
import { shallowMount } from "@vue/test-utils";
import radioQuestion from "@/common-components/radio-question/radio-question";
import buttonQuestion from "@/common-components/button-question/button-question";
describe("radioQuestion.vue", () => {
it("Should render the 'questionText' prop value as a span value for the radio question and the 'answer' values should render as text values for radio components.", async () => {
describe("buttonQuestion.vue", () => {
it("Should render the 'questionText' prop value as a span value for the button question and the 'answer' values should render as text values for button components.", async () => {
// Act
const wrapper = shallowMount(radioQuestion);
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
questionText: "Question Text",
answers: ["2023", "2022", "2021"],
@ -16,8 +16,8 @@ describe("radioQuestion.vue", () => {
expect(wrapper.find(".needed_car_info-text").text()).toEqual(
"Question Text"
);
const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
expect(radioButtons.length).toBe(3);
const buttonButtons = wrapper.findAllComponents('[data-test="button"]');
expect(buttonButtons.length).toBe(3);
expect(wrapper.props().modelValue).toBe("2020");
});
});

48
src/common-components/button-question/button-question.vue Normal file
View file

@ -0,0 +1,48 @@
<template>
<div class="button_question">
<div class="needed_car_info mt-6 mb-4 d-flex">
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
questionText
}}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
<legend class="sr-only">{{groupName}}</legend>
<listButton v-for="answer in answers" :key="answer"
:buttonID="answer"
@click="chooseAnswer(answer)"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
data-test="button"
:groupName="groupName"
textPosition="text-start"
isRequired=true
:value="modelValue"
screenReaderOnlyText="(opens new window)"
/>
</fieldset>
</div>
</div>
</template>
<script>
import listButton from "@/ux-components/list-button/list-button";
export default {
name: "buttonQuestion",
props: {
questionText: String,
answers: Array,
modelValue: String,
groupName: String
},
methods: {
chooseAnswer(answer) {
this.$emit("update:modelValue", answer);
},
},
components: {
listButton,
},
};
</script>

58
src/common-components/radio-question/radio-question.vue
View file

@ -1,58 +0,0 @@
<template>
<div class="radio_question">
<div class="needed_car_info mt-5 mb-2 d-flex">
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
questionText
}}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<div
class="
car_list
overflow-scroll
position-absolute
container-fluid
w-100
pt-1
"
role="radiogroup"
aria-labelledby="select-year-radio-group"
>
<h3 class="visually-hidden" id="select-year-radio-group">*</h3>
<radio
v-for="answer in answers"
:key="answer"
:radioID="answer"
@click="chooseAnswer(answer)"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
data-test="radio"
groupName="radio-list"
textPosition="text-start"
:value="modelValue"
/>
</div>
</div>
</div>
</template>
<script>
import radio from "@/ux-components/radio/radio";
export default {
name: "radio-question",
props: {
questionText: String,
answers: Array,
modelValue: String,
},
methods: {
chooseAnswer(answer) {
this.$emit("update:modelValue", answer);
},
},
components: {
radio,
},
};
</script>

2
src/common-components/vehicle-banner/vehicle-banner.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="vehicle_banner mb-3 text-center">
<div class="vehicle_banner mb-4 text-center">
<img
class="vehicle-image img-fluid blurrycar"
:src="vehicleImageSrc"

317
src/layouts/component-test/component-test.vue
View file

@ -2,30 +2,30 @@
<div class="container-fluid container-shadow p-2 rounded-3">
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
<h4 class="m-0 p-2 bg-light rounded">List Card</h4>
</div>
</div>
<div class="row g-2">
<radioCard
radioLabel="Windshield"
radioImage="windshield-damage.svg"
<listCard
buttonLabel="Windshield"
buttonImage="windshield-damage.svg"
altText="Windshield"
groupName="damageKey"
radioID="windshield"
buttonID="windshield"
/>
<radioCard
radioLabel="Side Window"
radioImage="side-window-damage.svg"
<listCard
buttonLabel="Side Window"
buttonImage="side-window-damage.svg"
altText="Side Window"
groupName="damageKey"
radioID="sidewindow"
buttonID="sidewindow"
/>
<radioCard
radioLabel="Back Glass"
radioImage="back-glass-damage.svg"
<listCard
buttonLabel="Back Glass"
buttonImage="back-glass-damage.svg"
altText="Back Glass"
groupName="damageKey"
radioID="backglass"
buttonID="backglass"
/>
</div>
<div class="row my-4">
@ -35,7 +35,10 @@
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonPrimary buttonText="Primary" loaderColor="white" sizeInRem="1" />
<buttonPrimary
buttonText="Primary"
loaderColor="white"
sizeInRem="1" />
</div>
</div>
<div class="row">
@ -47,214 +50,218 @@
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button</h4>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<listButton
buttonText="List Button"
errorText="Test error message"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
<buttonBack/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
</div>
</div>
<div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div
role="radiogroup"
aria-labelledby="demo-1-radio-group"
class="col my-3 d-flex align-items-center flex-column"
>
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="visually-hidden" id="demo-1-radio-group">
<h3 class="sr-only" id="demo-1-radio-group">
Select Vehicle Year
</h3>
<radio
groupName="demo-1"
ariaLabelBy="vehicle-year"
radioID="2021"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2021"
isRequired=true
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<radio
groupName="demo-1"
ariaLabelBy="vehicle-year"
radioID="2020"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2020"
isRequired=true
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<radio
groupName="demo-1"
ariaLabelBy="vehicle-year"
radioID="2019"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2019"
isRequired=true
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
</div>
</div>
<div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div
role="radiogroup"
aria-labelledby="demo-2-radio-group"
class="col my-3 d-flex align-items-center flex-column"
>
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="visually-hidden" id="demo-2-radio-group">
<h3 class="sr-only" id="demo-2-radio-group">
Select Vehicle Year
</h3>
<radio
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Chevrolet"
radioLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Chevrolet"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<radio
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Dodge"
radioLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Dodge"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<radio
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Ford"
radioLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Ford"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
</div>
</div>
<div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div
role="radiogroup"
aria-labelledby="demo-3-radio-group"
class="col my-3 d-flex align-items-center flex-column"
>
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="visually-hidden" id="demo-3-radio-group">
<h3 class="sr-only" id="demo-3-radio-group">
Multi-Line Centered
</h3>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="Corvette"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="Corvette"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="Testarosa"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="Testarosa"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="S600"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
<listButton
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="S600"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4>
<h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
</div>
</div>
<div class="row px-3">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div
role="radiogroup"
aria-labelledby="demo-4-radio-group"
class="d-flex flex-row p-0"
>
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="visually-hidden" id="demo-4-radio-group">
<h3 class="sr-only" id="demo-4-radio-group">
Select Vehicle Year
</h3>
<radioHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
radioID="1"
radioLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="1"
<listButtonHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="1"
buttonLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="1"
screenReaderOnlyText="(opens new window)"
/>
<radioHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
radioID="2"
radioLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="2"
<listButtonHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="2"
buttonLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="2"
screenReaderOnlyText="(opens new window)"
/>
<radioHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
radioID="3"
radioLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="3"
<listButtonHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="3"
buttonLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="3"
screenReaderOnlyText="(opens new window)"
/>
</div>
</div>
@ -414,24 +421,24 @@
<script>
import buttonPrimary from "@/ux-components/button-primary/button-primary";
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
import radioCard from "@/ux-components/radio-card/radio-card";
import buttonBack from "@/ux-components/button-back/button-back";
import listCard from "@/ux-components/list-card/list-card";
import listButton from "@/ux-components/list-button/list-button";
import radio from "@/ux-components/radio/radio";
import alert from "@/ux-components/alert/alert";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import siteHeader from "@/common-components/site-header/site-header";
import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
export default {
name: "App",
components: {
buttonPrimary,
buttonSecondary,
radioCard,
buttonBack,
listCard,
listButton,
radio,
alert,
vehicleBanner,
radioHorizontal,
listButtonHorizontal,
siteHeader,
},
data() {

139
src/layouts/vehicle-year/vehicle-year.spec.js
View file

@ -1,6 +1,7 @@
import { shallowMount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";
@ -10,72 +11,84 @@ jest.mock("@/helpers/layout-helper.js", () => ({
}));
describe("vehicle-year.vue", () => {
test("vehicle-year.vue should render data from CMS", async () => {
// Arrange
test("Year question component is initized with api data", async (done) => {
// Our mock data for our call to settleAllPromises
const mockData = {
getPageContent: {
PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
VehicleBannerWidget: [
{
GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
],
SiteHeaderWidget: [
{
LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
],
isCmsContentReady: true,
},
getVehicleYear: [2023, 2022, 2021],
store: {
commit: jest.fn(),
year: null,
},
router: {
push: jest.fn(),
},
};
//Arange
const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
const yearQuestionInitialData = ["2023", "2022", "2021"];
const { wrapper, apiPromise } = setupMocks( {
radioQuestionCmsContent: radioQuestionCmsContent,
yearQuestionInitialData: yearQuestionInitialData,
} );
// our router information needed.
const to = {
query: {
fmgPage: "vehicle-year",
},
};
//Act
vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
const mountOptions = getMountOptions(mockData);
// our mock implementation of settleAllPromises
settleAllPromises.mockImplementation(() => {
return Promise.resolve(mockData);
//Assert
apiPromise.finally(() => {
expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData);
done();
});
// Act
const wrapper = shallowMount(vehicleYear, mountOptions);
wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
// Call our beforeRouteEnter on the component.
// This passes (c) => c(wrapper.vm) so that next can be called and our
// data can be set.
vehicleYear.beforeRouteEnter.call(wrapper.vm, to, undefined, (c) =>
c(wrapper.vm)
);
await nextTick(); // Wait for the DOM to update.
// Assert
const header = await wrapper.find(".Header");
expect(header.attributes("text")).toEqual("Select a year to get started");
const yearQuestion = wrapper.findComponent({ name: "year-question" });
expect(yearQuestion.attributes("questiontext")).toEqual(
"What year is your vehicle?"
);
});
});
describe("vehicle-year.vue", () => {
test("Page header is passed data from CMS", async (done) => {
//Arange
const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" });
//Act
vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
//Assert
const header = await wrapper.find(".Header");
apiPromise.finally(() => {
expect(header.attributes("text")).toEqual("Select a year to get started");
done();
});
});
});
function setupMocks({
radioQuestionCmsContent = {},
yearQuestionInitialData = {},
pageHeaderWidgetHeaderText = {},
}) {
//Mock api responses
const apiResponses = {
cmsContent: {
PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
RadioQuestionWidget: [radioQuestionCmsContent],
VehicleBannerWidget: [
{
GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
],
SiteHeaderWidget: [
{
LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
],
isCmsContentReady: true,
},
yearQuestionInitialData: yearQuestionInitialData,
};
const apiPromise = Promise.resolve(apiResponses);
settleAllPromises.mockImplementation(() => apiPromise);
//Mock year question methods
yearQuestion.methods = {
loadInitialData: jest.fn(),
initializeComponent: jest.fn(),
};
const mountOptions = getMountOptions({ });
const wrapper = shallowMount(vehicleYear, mountOptions);
const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
return { wrapper, apiPromise };
}

60
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -1,16 +1,12 @@
<template>
<siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner
:vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage"
/>
<pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
<yearQuestion
:questionText="radioQuestionWidgets.QuestionText"
:years="vehicleYears"
v-model="selectedYear"
/>
<template v-if="isCmsContentReady">
<div class="container-fluid shadow rounded-3 p-0">
<siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
<pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
<yearQuestion v-model="selectedYear" ref="yearQuestion" />
</div>
</div>
</div>
</template>
@ -24,15 +20,11 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
export default {
name: "vehicle-year",
data() {
return {
pageHeaderWidgets: {},
radioQuestionWidgets: {},
vehicleYears: [],
siteHeaderWidget: {},
vehicleBannerWidget: {},
selectedYear: null,
@ -41,34 +33,30 @@ export default {
computed: {},
beforeRouteEnter(to, from, next) {
// Call APIs
const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
const getVehicleYearPromise = store.dispatch(
storeActions.GET_VEHICLE_YEARS,
{}
);
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "getPageContent",
promise: contentPromise,
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "getVehicleYear",
promise: getVehicleYearPromise,
resultKey: "yearQuestionInitialData",
promise: yearQuestionInitialDataPromise,
},
];
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
vm.siteHeaderWidget = resultMap.getPageContent.SiteHeaderWidget[0];
vm.radioQuestionWidgets =
resultMap.getPageContent.RadioQuestionWidget[0];
vm.vehicleBannerWidget =
resultMap.getPageContent.VehicleBannerWidget[0];
vm.vehicleYears = resultMap.getVehicleYear;
vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData);
});
});
},
@ -76,8 +64,8 @@ export default {
watch: {
selectedYear(year) {
this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
this.$router.push("?fmgPage=vehicle-make");
},
this.$router.push('?fmgPage=vehicle-make');
}
},
components: {
@ -92,12 +80,10 @@ export default {
<style lang="scss">
.select-car {
height: calc(100vh - 56px);
padding: 0 1.5rem;
.car_list {
// Height will be determined by overall height of content above list
height: calc(100% - 300px);
padding: 0 1.5rem;
-webkit-overflow-scrolling: touch;
}
}

91
src/layouts/vehicle-year/year-question/year-question.spec.js
View file

@ -1,25 +1,80 @@
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
jest.mock("@/store", () => { return {}; }, {virtual: true});
describe("year-question.vue", () => {
test("year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.", async () => {
// Act
const wrapper = shallowMount(yearQuestion);
await wrapper.setProps({
questionText: "What year is your vehicle?",
years: ["2023", "2022", "2021"],
modelValue: "2020",
});
wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
test("Selected year is emitted upon selection.", async () => {
// Assert
const radioQuestion = await wrapper.findComponent({
name: "radioQuestion",
});
expect(radioQuestion.attributes("questiontext")).toBe(
"What year is your vehicle?"
);
expect(radioQuestion.attributes("answers")).toBe("2023,2022,2021");
expect(wrapper.componentVM.modelValue).toBe("2020");
//Arrange
const { wrapper } = setupMocks({ modelValueProp: "2020" });
const yearToSelect = "2021";
//Act
wrapper.setData({ selectedYear: yearToSelect });
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
});
});
describe("year-question.vue", () => {
test("CMS question text is used as radio question text.", async () => {
//Arrange
const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What year is your vehicle?" });
//Act
yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
//Assert
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
expect(buttonQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?");
});
});
describe("year-question.vue", () => {
test("Data from store api are used as radio question answers.", async () => {
//Arrange
const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2023", "2022", "2021"] });
//Act
const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
//Assert
const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
expect(buttonQuestionComponent.attributes("answers")).toBe("2023,2022,2021");
});
});
function setupMocks({
modelValueProp = "1900",
cmsQuestionText = "CMS text goes here",
dataFromStoreApi = [],
}) {
//Mock store
store.dispatch = jest.fn(() => dataFromStoreApi);
const mountOptions = getMountOptions({
store: {
dispatch: store.dispatch,
},
});
//Mock props
mountOptions.propsData = {
modelValue: modelValueProp,
};
const wrapper = shallowMount(yearQuestion, mountOptions);
//Mock CMS content
const cmsContent = {
QuestionText: cmsQuestionText
};
return { wrapper, cmsContent };
}

28
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -1,34 +1,46 @@
<template>
<radioQuestion
class="radioQuestion"
<buttonQuestion class="radioQuestion"
:questionText="questionText"
:answers="years"
groupName="Choose Vehicle Year"
v-model="selectedYear"
/>
</template>
<script>
import radioQuestion from "@/common-components/radio-question/radio-question";
import buttonQuestion from "@/common-components/button-question/button-question";
// Supporting files
import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
export default {
name: "year-question",
data() {
return {
questionText: null,
selectedYear: null,
};
years: Array,
}
},
props: {
questionText: String,
years: Array,
modelValue: String,
},
components: {
radioQuestion,
buttonQuestion,
},
methods: {
loadInitialData() {
return store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
},
initializeComponent(cmsContent, initialData) {
this.questionText = cmsContent.QuestionText;
this.years = initialData;
}
},
watch: {
selectedYear(val) {
this.$emit("update:modelValue", val);
},
}
},
};
</script>

29
src/styles/common-button-styles.scss
View file

@ -53,33 +53,4 @@
border-radius: $border-radius-lg;
}
}
&.list-button {
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
&:hover {
box-shadow: 0 0 0 4px $blue-100;
}
&:focus, // Mouse, touch, stylus focus
&:focus-visible { // Keyboard focus for accessibility
box-shadow: 0 0 0 2px $blue;
}
&:active {
background: $blue-100;
border: 1px solid $blue;
}
+ label {
display: none;
}
&.error {
border: 1px solid $danger;
~ label {
display: flex;
color: $danger;
}
}
}
}

4
src/styles/common-radio-styles.scss → src/styles/common-list-styles.scss
View file

@ -1,5 +1,5 @@
.radiogroup {
&.radio-list-button {
.list-group {
&.list-button {
input[type="radio"] {
opacity: 0;
position: fixed;

9
src/styles/common-styles.scss
View file

@ -25,5 +25,14 @@ body {
.container-fluid {
overflow-x: hidden;
}
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
}
// Hide horizontal scrollbar

2
src/styles/ux-variables.scss
View file

@ -54,6 +54,7 @@ $gray-200: #E3E4E4;// Used in theme
$gray-300: #D2D4D4;
$gray: #B0B3B3;// Default Gray
$gray-500: #8E9292;// Used in theme
$gray-550: #727676;// Used in theme
$gray-600: #4D5151;// Used in theme
$gray-700: #303333;// Used in theme
$gray-800: #222424;// Used in theme
@ -130,6 +131,7 @@ $h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base * .875;
//Border Radius
// Helper classes are rounded, rounded-1, rounded-2, rounded-3
$border-radius: .25rem;
$border-radius-sm: .2rem;
$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course.

0
src/ux-components/radio-card/radio-card.spec.js → src/ux-components/button-back/button-back.spec.js
View file

65
src/ux-components/button-back/button-back.vue Normal file
View file

@ -0,0 +1,65 @@
<template>
<button class="back-button-wrapper d-flex p-0">
<div class="button-back">
<div class="arrow-left"></div>
<div class="box"></div>
</div>
</button>
</template>
<script>
export default {
name: "buttonBack"
};
</script>
<style lang="scss">
.back-button-wrapper {
border: none;
background: transparent;
.button-back {
display: inline-flex;
position: relative;
height: 18px;
width: 23px;
overflow: hidden;
.arrow-left {
position: absolute;
width: 18px;
height: 18px;
left: 4px;
background-color: $gray-550;
transform: rotate(45deg);
border-radius: 4px;
}
.box {
content: "";
position: absolute;
background: $gray-550;
height: 100%;
width: 11px;
display: flex;
justify-content: center;
align-items: center;
left: 12px;
border-radius: 5px;
&:before, &:after {
position: absolute;
left: 1px;
top: 3px;
content: " ";
height: 12px;
width: 2px;
background-color: $white;
border-radius: 2px;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
}
</style>

10
src/ux-components/header/header.vue
View file

@ -1,9 +1,7 @@
<template>
<div class="current_car_info-text">
<div class="d-flex align-items-center justify-content-center">
<h2 class="text-center text-dark fs-5 d-block fw-normal mb-0">
{{ text }}
</h2>
<h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
</div>
</div>
</template>
@ -16,3 +14,9 @@ export default {
},
};
</script>
<style lang="scss">
h2 {
color: $gray-550;
}
</style>

10
src/ux-components/radio-horizontal/radio-horizontal.spec.js → src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -1,12 +1,12 @@
import { shallowMount } from "@vue/test-utils";
import radioHorizontal from "./radio-horizontal";
import listButtonHorizontal from "./list-button-horizontal";
describe("radio.vue", () => {
it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
describe("list-button.vue", () => {
it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
// Act
const wrapper = shallowMount(radioHorizontal, {
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
radioID: "2023",
buttonID: "2023",
groupName: "TestGroup",
loaderColor: "blue",
loaderPosition: "right",

111
src/ux-components/list-button-horizontal/list-button-horizontal.vue Normal file
View file

@ -0,0 +1,111 @@
<!-- 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 class="col list-group list-button-horizontal d-flex flex-column mb-2">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayComponent"/>
<label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
<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="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{ errorMessage }}</p>
</div>
</template>
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "listButtonHorizontal",
props: {
groupName: String, /* Required, unique for each button GROUP */
buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
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 */
errorMessage: String, /* Optional, if there is an error message to be displayed */
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)) */
totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
positionInGroup: Number /* Rquired, position of button in group. Example, 1,2,3 */
},
data() {
return {
isError: false,
display: false,
};
},
methods: {
displayComponent() {
this.display = true;
},
},
components: {
loader,
},
computed: {
isFirstOrLastButton() {
let className = "";
if (this.positionInGroup == this.totalInGroup) {
className = "last-item";
} else if (this.positionInGroup == 1) {
className = "first-item";
}
return className;
},
},
};
</script>
<style lang="scss">
.list-button-horizontal {
input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
&:focus-visible + label {
box-shadow: 0 0 0 2px $blue;
}
&:focus + label {
box-shadow: 0 0 0 2px $blue;
}
&:checked + label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}
}
label {
position: relative;
background: $white;
transition: all 150ms linear;
border: 1px solid $gray-500;
width: 100%;
&:hover {
box-shadow: 0 0 0 4px $blue-100;
cursor: pointer;
z-index: 2;
}
+ p {
display: none;
}
&.error {
border: 1px solid $danger;
+ p {
display: flex;
color: $danger;
}
}
&.first-item {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
&.last-item {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
</style>

48
src/ux-components/list-button/list-button.spec.js
View file

@ -1 +1,47 @@
test.todo("some test to be written in the future");
import { shallowMount } from "@vue/test-utils";
import listButton from "./list-button";
describe("list-button.vue", () => {
it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
buttonID: "2023",
groupName: "TestGroup",
loaderColor: "blue",
loaderPosition: "right",
sizeInRem: "1.5",
errorMessage: "null",
},
});
// Assert
const input = wrapper.find("input");
const label = wrapper.find("label");
const paragraph = wrapper.find("span");
await label.trigger("click");
expect(input.attributes()).toEqual({
id: "2023",
type: "radio",
value: "2023",
name: "TestGroup",
"aria-required": "false",
});
expect(label.attributes()).toEqual({
role: "radio",
tabindex: "-1",
for: "2023",
class: "d-flex flex-column justify-content-center py-3 px-4",
"aria-checked": "false",
});
expect(label.text()).toEqual("2023");
expect(paragraph.text()).toEqual("2023");
expect(wrapper.vm.display).toBe(true);
});
});

53
src/ux-components/list-button/list-button.vue
View file

@ -1,27 +1,15 @@
<template>
<div class="d-flex flex-column w-100">
<button
class="
btn
list-button
d-flex
align-items-center
justify-content-between
py-3
px-4
"
@click="displayComponent"
v-bind:class="[this.isError ? 'error' : '']"
>
<span class="m-0">{{ this.buttonText }}</span>
<loader
v-if="display"
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
v-bind:class="[this.loaderColor, this.loaderPosition]"
/>
</button>
<label class="small mt-1">{{ this.errorText }}</label>
</div>
<!-- See the component-test.vue page for example implementation -->
<div 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" @keyup.space="displayComponent()">
<label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
<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="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{errorMessage}}</p>
</div>
</template>
<script>
@ -29,16 +17,21 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "listButton",
props: {
buttonText: String,
errorText: String,
loaderColor: String,
loaderPosition: String,
sizeInRem: [Number, String],
groupName: String, /* Required, unique for each button GROUP */
buttonID: 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 */
errorMessage: String, /* Optional, if there is an error message to be displayed */
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)) */
},
data() {
return {
display: false,
isError: false,
display: false,
};
},
methods: {
@ -48,6 +41,6 @@ export default {
},
components: {
loader,
},
}
};
</script>

1
src/ux-components/list-card/list-card.spec.js Normal file
View file

@ -0,0 +1 @@
test.todo("some test to be written in the future");

22
src/ux-components/radio-card/radio-card.vue → src/ux-components/list-card/list-card.vue
View file

@ -1,25 +1,25 @@
<template>
<div class="col mb-3 d-flex radio-card">
<div class="col mb-3 d-flex list-card">
<input
type="radio"
class="position-absolute opacity-0"
:class="className"
:id="radioID"
:id="buttonID"
:name="groupName"
:value="radioLabel"
:value="buttonLabel"
v-model="picked"
:tabindex="tabIndex"
/>
<label
v-bind:for="radioID"
v-bind:for="buttonID"
class="rounded-3 d-flex flex-column align-items-center w-100"
>
<img
class="px-3 pt-3 pb-2 mt-auto"
v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
v-bind:alt="altText"
/>
<span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
<span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
</label>
</div>
</template>
@ -28,13 +28,13 @@
<script>
export default {
name: "radioCard",
name: "listCard",
props: [
"groupName",
"radioLabel",
"radioImage",
"buttonLabel",
"buttonImage",
"altText",
"radioID",
"buttonID",
"tabIndex",
"className",
],
@ -46,7 +46,7 @@ export default {
};
</script>
<style lang="scss">
.radio-card {
.list-card {
input[type="radio"] {
&:focus + label {
background-color: $white;

10
src/ux-components/loader/loader.vue
View file

@ -1,8 +1,9 @@
<template>
<div
class="loader"
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
v-bind:class="[this.loaderColor, this.loaderPosition]"
<div class="loader"
role="alert"
aria-label="Loading new page"
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
v-bind:class="[this.loaderColor, this.loaderPosition]"
></div>
</template>
@ -61,6 +62,7 @@ export default {
&.center {
position: absolute;
right: 50%;
transform: translateX(50%);
}
&.right {
position: absolute;

146
src/ux-components/radio-horizontal/radio-horizontal.vue
View file

@ -1,146 +0,0 @@
<!-- See the component-test.vue page for example implementation -->
<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<!-- Example: -->
<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
<!-- Example -->
<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
<template>
<!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
<div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
<input
type="radio"
:id="radioID"
:name="groupName"
:value="radioID"
aria-required="true"
@keyup.space="displayComponent"
/>
<label
role="radio"
tabindex="-1"
aria-checked="false"
:for="radioID"
class="d-flex flex-column justify-content-center py-3 px-4"
:class="isFirstOrLastButton"
@click="displayComponent"
>
<span class="m-0" :class="[this.textPosition]">{{ radioID }}</span>
<span class="m-0 small" :class="[this.textPosition]">{{
radioLabelSubCopy
}}</span>
<loader
v-if="display"
:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
:class="[this.loaderColor, this.loaderPosition]"
/>
</label>
<p class="small">{{ errorMessage }}</p>
</div>
</template>
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "radioHorizontal",
props: {
groupName: String /* Required, unique for each radio button GROUP */,
radioID:
String /* Required, unique for each radio button. Used for button id, label and <label for> */,
radioLabelSubCopy: String /* Optional, used for multi-line radio buttons */,
textPosition:
String /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */,
errorMessage:
String /* Optional, if there is an error message to be displayed */,
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)) */,
totalInGroup:
Number /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */,
positionInGroup:
Number /* Rquired, position of radio button in group. Example, 1,2,3 */,
},
data() {
return {
isError: false,
display: false,
};
},
methods: {
displayComponent() {
this.display = true;
},
},
components: {
loader,
},
computed: {
isFirstOrLastButton() {
let className = "";
if (this.positionInGroup == this.totalInGroup) {
className = "last-item";
} else if (this.positionInGroup == 1) {
className = "first-item";
}
return className;
},
},
};
</script>
<style lang="scss">
.radio-horizontal {
input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
&:focus-visible + label {
box-shadow: 0 0 0 2px $blue;
}
&:focus + label {
box-shadow: 0 0 0 2px $blue;
}
&:checked + label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}
}
label {
position: relative;
background: $white;
transition: all 150ms linear;
border: 1px solid $gray-500;
width: 100%;
&:hover {
box-shadow: 0 0 0 4px $blue-100;
cursor: pointer;
z-index: 2;
}
+ p {
display: none;
}
&.error {
border: 1px solid $danger;
+ p {
display: flex;
color: $danger;
}
}
&.first-item {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
&.last-item {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
</style>

47
src/ux-components/radio/radio.spec.js
View file

@ -1,47 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import radio from "./radio";
describe("radio.vue", () => {
it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
// Act
const wrapper = shallowMount(radio, {
propsData: {
radioID: "2023",
groupName: "TestGroup",
loaderColor: "blue",
loaderPosition: "right",
sizeInRem: "1.5",
errorMessage: "null",
},
});
// Assert
const input = wrapper.find("input");
const label = wrapper.find("label");
const paragraph = wrapper.find("span");
await label.trigger("click");
expect(input.attributes()).toEqual({
id: "2023",
type: "radio",
value: "2023",
name: "TestGroup",
"aria-required": "true",
});
expect(label.attributes()).toEqual({
role: "radio",
tabindex: "-1",
for: "2023",
class: "d-flex flex-column justify-content-center py-3 px-4",
"aria-checked": "false",
});
expect(label.text()).toEqual("2023");
expect(paragraph.text()).toEqual("2023");
expect(wrapper.vm.display).toBe(true);
});
});

77
src/ux-components/radio/radio.vue
View file

@ -1,77 +0,0 @@
<template>
<!-- See the component-test.vue page for example implementation -->
<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<!-- Example: -->
<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
<!-- Example -->
<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
<div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
<input
type="radio"
:id="radioID"
:name="groupName"
:value="radioID"
aria-required="true"
@keyup.space="displayComponent"
/>
<label
role="radio"
tabindex="-1"
aria-checked="false"
:for="radioID"
class="d-flex flex-column justify-content-center py-3 px-4"
@click="displayComponent"
>
<span class="m-0" :class="[this.textPosition]">{{ radioID }}</span>
<span class="m-0 small" :class="[this.textPosition]">{{
radioLabelSubCopy
}}</span>
<loader
v-if="display"
:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
:class="[this.loaderColor, this.loaderPosition]"
/>
</label>
<p class="small">{{ errorMessage }}</p>
</div>
</template>
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "radioList",
props: {
groupName: String /* Required, unique for each radio button GROUP */,
radioID:
String /* Required, unique for each radio button. Used for button id, label and <label for> */,
radioLabelSubCopy: String /* Optional, used for multi-line radio buttons */,
textPosition:
String /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */,
errorMessage:
String /* Optional, if there is an error message to be displayed */,
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)) */,
},
data() {
return {
isError: false,
display: false,
};
},
methods: {
displayComponent() {
this.display = true;
},
},
components: {
loader,
},
};
</script>

2
vue.config.js
View file

@ -17,7 +17,7 @@ module.exports = {
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-button-styles.scss";
@import "@/styles/common-radio-styles.scss";
@import "@/styles/common-list-styles.scss";
@import "@/styles/common-typography-styles.scss";
`,
},

2
vue.release.config.js
View file

@ -16,7 +16,7 @@ module.exports = {
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-button-styles.scss";
@import "@/styles/common-radio-styles.scss";
@import "@/styles/common-list-styles.scss";
@import "@/styles/common-typography-styles.scss";
`,
},