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

Merge branch 'develop' into feature/CSR-120_vehicle-banner-2

Browse source
This commit is contained in:
Adam Caouette 2021-12-02 10:29:54 -05:00
commit e3a2ff431e
27 changed files with 394 additions and 278 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
jest.config.js
View file

@ -15,7 +15,7 @@ module.exports = {
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: {
global: {
statements: 60,
statements: 70,
},
},
};

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

@ -1,6 +1,6 @@
<template>
<div class="radio_question">
<div class="needed_car_info mt-4 mb-2 d-flex">
<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>
@ -8,7 +8,7 @@
<div class="w-100 d-flex justify-content-center">
<div class="car_list overflow-scroll position-absolute container-fluid 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" class="mb-2"
<radio v-for="answer in answers" :key="answer"
:radioID="answer"
@click="chooseAnswer(answer)"
loaderColor="blue"
@ -35,4 +35,4 @@ export default {
radio,
},
};
</script>
</script>

29
src/helpers/cms-content-helper.js Normal file
View file

@ -0,0 +1,29 @@
import { storeActions } from "@/constants/store-actions.js";
import { widgetNames } from "@/constants/widget-names.js";
import store from "@/store";
export function fetchCmsContentForPage(fmgPage) {
return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => {
const pageDataFromCms = {
isCmsContentReady: false
};
response.data.Result.forEach((widget) => {
if (Object.values(widgetNames).includes(widget.Type)) {
// If we already have this widget, push it on the collection
if (widget.Type in pageDataFromCms) {
pageDataFromCms[widget.Type].push(widget.Model);
return;
}
pageDataFromCms[widget.Type] = [widget.Model];
}
});
// Our 'Page' is ready because we have data now
pageDataFromCms.isCmsContentReady = true;
return pageDataFromCms;
});
}

53
src/helpers/cms-helper.spec.js Normal file
View file

@ -0,0 +1,53 @@
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { dispatch } from "@/store";
jest.mock("@/store", () => ({
dispatch: jest.fn()
}));
it("cms-content-helper: Should return data from CMS", () => {
// Arrange
const cmsMockData = {
Result: [
{
Type: "VehicleBannerWidget",
Model: {
ImageId: "28452dcb-7762-4cc9-ab09-7643d0b89203",
GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
GenericVehicleImageFilePath: "images/default-source/default-album/blurred-image.jpg"
}
},
{
Type: "PageHeaderWidget",
Model: {
"HeaderText": "Select a year to get started"
}
},
{
Type: "PageHeaderWidget",
Model: {
"HeaderText": "Select a model"
}
},
{
Type: "RadioQuestionWidget",
Model: {
"QuestionText": "What year is your vehicle?"
}
}
]
}
dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
// Act
fetchCmsContentForPage('testPage').then((response) => {
// Assert
expect(response.isCmsContentReady).toBe(true);
expect(response.PageHeaderWidget[0].HeaderText).toEqual('Select a year to get started');
});
});

29
src/helpers/layout-helper.js Normal file
View file

@ -0,0 +1,29 @@
export function settleAllPromises(promiseResultMap) {
// Pull our keys out of the promise 'table'
const promiseNames = Object.entries(promiseResultMap);
return Promise.allSettled(promiseNames.map(e => e[1]).map(n => n.promise))
.then(results => {
const resultMap = {};
// Build a map of the results
for (let i = 0; i < results.length; ++i) {
const promiseName = promiseNames[i][1].resultKey;
// Some Promises like the cms content call don't have a 'data' field
// when returned, so other promises do. Map the results to the object
// so that the object is the return data.
if (results[i].value.data === undefined) {
resultMap[promiseName] = results[i].value
} else {
resultMap[promiseName] = results[i].value.data;
}
}
return resultMap;
});
}

28
src/helpers/layout-helper.spec.js Normal file
View file

@ -0,0 +1,28 @@
import { settleAllPromises } from "@/helpers/layout-helper";
it("layout-helper: Should settle all promises and return mapped promise results", () => {
// Arrange
const mockPromiseOne = Promise.resolve({ data: "test-data" });
const mockPromiseTwo = Promise.resolve({ data: "test-data-two" });
const promiseResultMap = [
{
resultKey: "MockResultOne",
promise: mockPromiseOne,
},
{
resultKey: "MockResultTwo",
promise: mockPromiseTwo,
},
];
// Act
settleAllPromises(promiseResultMap).then(results => {
// Assert
expect(results.MockResultOne).toEqual('test-data');
expect(results.MockResultTwo).toEqual('test-data-two');
});
})

11
src/helpers/unit-test-helper.js
View file

@ -1,7 +1,7 @@
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
export function getMountOptions(mockData, cmsMockData = null) {
export function getMountOptions(mockData) {
// Define our mocks to attached to the 'global' object for Vue/Jest.
const mocks = {};
@ -18,16 +18,9 @@ export function getMountOptions(mockData, cmsMockData = null) {
}
});
if(cmsMockData){
mocks.GetContentFromCms = jest.fn();
mocks.GetContentFromCms.mockImplementation(() =>
{
return cmsMockData;
});
}
// Mock store actions from js file
mocks.storeActions = storeActions;
const global = {
mocks: mocks,
plugins: [store]

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

@ -38,7 +38,6 @@
<buttonPrimary
buttonText="Primary"
loaderColor="white"
loaderPosition="right"
sizeInRem="1"
/>
</div>
@ -48,7 +47,6 @@
<buttonSecondary
buttonText="Secondary"
loaderColor="white"
loaderPosition="right"
sizeInRem="1"
/>
</div>
@ -65,43 +63,125 @@
errorText="Test error message"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
sizeInRem="1"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group - 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 -->
<div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
<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="select-year-radio-group">Select Vehicle Year</h3>
<radioList
groupName="demo"
<h3 class="visually-hidden" 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.5"
sizeInRem="1"
/>
<radioList
groupName="demo"
<radio
groupName="demo-1"
ariaLabelBy="vehicle-year"
radioID="2020"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
sizeInRem="1"
/>
<radioList
groupName="demo"
<radio
groupName="demo-1"
ariaLabelBy="vehicle-year"
radioID="2019"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1.5"
sizeInRem="1"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group - 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 -->
<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">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"
/>
<radio
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Dodge"
radioLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
<radio
groupName="demo-2"
ariaLabelBy="vehicle-make"
radioID="Ford"
radioLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
</div>
</div>
<div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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">Select Vehicle Year</h3>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="Corvette"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="Testarosa"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
<radio
groupName="demo-3"
ariaLabelBy="vehicle-model"
radioID="S600"
radioLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
/>
</div>
</div>
@ -250,7 +330,7 @@
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
import radioCard from "@/ux-components/radio-card/radio-card";
import listButton from "@/ux-components/list-button/list-button";
import radioList from "@/ux-components/radio-list/radio-list";
import radio from "@/ux-components/radio/radio";
import alert from "@/ux-components/alert/alert";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
export default {
@ -260,7 +340,7 @@
buttonSecondary,
radioCard,
listButton,
radioList,
radio,
alert,
vehicleBanner
},

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

@ -1,27 +1,56 @@
import { shallowMount, flushPromises } from "@vue/test-utils";
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 { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from 'vue'
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn()
}));
describe("vehicle-year.vue", () => {
test("vehicle-year.vue should render data from CMS", async () => {
// Arrange
const cmsMockData = {
PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
// 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?" }],
isCmsContentReady: true,
},
getVehicleYear: [2023, 2022, 2021]
}
const mountOptions = getMountOptions({}, cmsMockData);
// our router information needed.
const to = {
query: {
fmgPage: 'vehicle-year'
}
};
const mountOptions = getMountOptions(mockData);
// our mock implementation of settleAllPromises
settleAllPromises.mockImplementation(() => { return Promise.resolve(mockData);});
// Act
const wrapper = shallowMount(vehicleYear, mountOptions);
await flushPromises();
// 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 = await wrapper.findComponent({name: 'year-question'});
const yearQuestion = wrapper.findComponent({ name: 'year-question' });
expect(yearQuestion.attributes("questiontext")).toEqual("What year is your vehicle?");
});
});

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

@ -1,37 +1,69 @@
<template v-if="isCmsContentReady">
<div class="select-car">
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner />
<pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
<yearQuestion :questionText="radioQuestionWidgets.QuestionText" />
<vehicleBanner />
<pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
<yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" />
</div>
</div>
</div>
</template>
<script>
// Components
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
import pageHeader from "@/ux-components/header/header";
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: {},
};
},
computed: {},
async created() {
const pageContent = await this.GetContentFromCms();
this.pageHeaderWidgets = pageContent.PageHeaderWidget[0];
this.radioQuestionWidgets = pageContent.RadioQuestionWidget[0];
},
components: {
yearQuestion,
pageHeader,
vehicleBanner,
},
name: "vehicle-year",
data() {
return {
pageHeaderWidgets: {},
radioQuestionWidgets: {},
vehicleYears: [],
};
},
computed: {},
beforeRouteEnter(to, from, next) {
// Call APIs
const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
const getVehicleYearPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "getPageContent",
promise: contentPromise,
},
{
resultKey: "getVehicleYear",
promise: getVehicleYearPromise,
},
];
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
vm.radioQuestionWidgets = resultMap.getPageContent.RadioQuestionWidget[0];
vm.vehicleYears = resultMap.getVehicleYear;
});
});
},
components: {
yearQuestion,
pageHeader,
vehicleBanner
},
};
</script>

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

@ -1,28 +1 @@
import { shallowMount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { storeActions } from "@/constants/store-actions.js";
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
describe('year-question.vue', () => {
test('year-question should call API to get years', async () => {
// Arrange
const mockDataAndAction = {
actionList: [{ actionName: storeActions.GET_VEHICLE_YEARS, data: ["2023", "2022", "2021"],
},
],
};
const mountOptions = getMountOptions(mockDataAndAction);
// Act
const wrapper = shallowMount(yearQuestion, mountOptions);
await wrapper.setProps({questionText: 'What year is your vehicle?'})
await flushPromises();
// 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');
});
});
test.todo("some test to be written in the future");

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

@ -9,16 +9,9 @@ export default {
name: "year-question",
props: {
questionText: String,
},
data() {
return {
years: [],
};
years: Array
},
created() {
this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE_YEARS, {}).then((response) => {
this.years = response.data;
});
},
components: {
radioQuestion,

24
src/mixins/base-mixin.js
View file

@ -23,30 +23,6 @@ export default {
return this.$store.dispatch(type, payload);
},
GetContentFromCms() {
return this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA,{ pageName: this.$route.query.fmgPage }).then((response) => {
const pageDataFromCms = {};
response.data.Result.forEach((widget) => {
if (Object.values(this.widgetNames).includes(widget.Type)) {
// If we already have this widget, push it on the collection
if (widget.Type in pageDataFromCms) {
pageDataFromCms[widget.Type].push(widget.Model);
return;
}
pageDataFromCms[widget.Type] = [widget.Model];
}
});
// Our 'Page' is ready because we have data now
this.isCmsContentReady = true;
return pageDataFromCms;
});
},
},
computed: {
storeActions() {

55
src/mixins/base-mixin.spec.js
View file

@ -1,7 +1,6 @@
import baseMixin from "@/mixins/base-mixin"
import { storeActions } from "@/constants/store-actions.js";
import { widgetNames } from "@/constants/widget-names.js";
import { flushPromises } from "@vue/test-utils";
describe("baseMixin.js", () => {
test('dispatchNonblockingStoreAction: calls dispatch with type and payload', () => {
@ -23,60 +22,6 @@ describe("baseMixin.js", () => {
expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
});
test('GetContentFromCms: Should return mapped data and call dispatchNonblockingStoreAction', async () => {
const mixIn = getMixInInstance({});
// Mock dispatch action
mixIn.methods.dispatchNonBlockingStoreAction = jest.fn();
mixIn.methods.dispatchNonBlockingStoreAction.mockImplementation((action) => {
if (action === 'getPageData') {
return Promise.resolve({
data: {
Result: [
{
Type: "PageConfigWidget",
Model: {
LayoutNames: [
"None",
"vehicle-year"
],
LayoutStyle: "vehicle-year"
}
},
{
Type: "RadioQuestionWidget",
Model: {
"QuestionText": "What year is your vehicle?"
}
},
{
Type: "RadioQuestionWidget",
Model: {
"QuestionText": "This is a second radio question"
}
},
{
Type: "PageHeaderWidget",
Model: {
"HeaderText": "Select a year to get started"
}
}
]
},
});
}
});
const result = await mixIn.methods.GetContentFromCms();
await flushPromises();
expect(mixIn.methods.dispatchNonBlockingStoreAction).toBeCalledWith(storeActions.GET_PAGE_DATA, { pageName: 'test-page'});
expect(result.PageHeaderWidget[0].HeaderText).toEqual('Select a year to get started');
});
})
function getMixInInstance({ isDispatchSuccess = true }) {

7
src/store/index.js
View file

@ -9,6 +9,11 @@ export default createStore({
storage: window.sessionStorage,
}),
],
// IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
// * The CMS can reference the fields by name
// * Return users may have a previous "version" of the model, and we don't want
// them to have a breaking experience, because the model might have changed.
state: {
order: {
vehicle: {
@ -63,6 +68,8 @@ export default createStore({
experiments: null,
}
},
// See IMPORTANT note at top of "state" declaration.
mutations: {
updateVehicleImage(state, data) {
state.order.vehicle.imageSrc = data.imgSrc;

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

@ -6,7 +6,6 @@
@include blue-gradient;
border: none;
border-radius: $border-radius-lg;
height: 48px;
color: $white;
transition: all 150ms linear;
&:hover {
@ -33,7 +32,6 @@
background: transparent;
border: 1px solid $blue;
border-radius: $border-radius-lg;
height: 48px;
color: $blue;
transition: all 150ms linear;
&:hover {
@ -58,7 +56,6 @@
&.list-button {
position: relative;
background: $white;
height: 48px;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;

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

@ -14,11 +14,13 @@
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}
}
label {
position: relative;
background: $white;
min-height: 3rem;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;

4
src/styles/common-typography-styles.scss
View file

@ -34,7 +34,7 @@ h6,.h6 {
}
label {
line-height: 1.625;
line-height: 1.5;
font-weight: 400;
}
@ -54,4 +54,4 @@ caption {
font-size: 1rem !important;
line-height: 1.4;
font-weight: 500;
}
}

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

@ -136,17 +136,18 @@ $border-radius-lg: .5rem;//Used for buttons. Can be used for other th
$border-radius-pill: 50rem;
//Spacing
// Seven spacers available instead of the usual 5
// 8 spacers available instead of the usual 5
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 2,
6: $spacer * 2.5,
7: $spacer * 3,
1: $spacer * .25, /* 4px */
2: $spacer * .5, /* 8px */
3: $spacer * .75, /* 12px */
4: $spacer * 1, /* 16px */
5: $spacer * 1.5, /* 24px */
6: $spacer * 2, /* 32px */
7: $spacer * 2.5, /* 40px */
8: $spacer * 3, /* 48px */
);
//Grid breakpoints

4
src/ux-components/button-primary/button-primary.vue
View file

@ -2,10 +2,10 @@
<button
:disabled="isDisabled"
:aria-disabled="isDisabled"
class="btn btn-primary d-flex align-items-center"
class="btn btn-primary d-flex align-items-center py-3 px-4"
@click='displayComponent'
>
{{ this.buttonText }}
<span class="m-0">{{ this.buttonText }}</span>
<loader
class="ms-2"
v-if="display"

4
src/ux-components/button-secondary/button-secondary.vue
View file

@ -2,10 +2,10 @@
<button
:disabled="isDisabled"
:aria-disabled="isDisabled"
class="btn btn-secondary d-flex align-items-center"
class="btn btn-secondary d-flex align-items-center py-3 px-4"
@click='displayComponent'
>
{{ this.buttonText }}
<span class="m-0">{{ this.buttonText }}</span>
<loader
class="ms-2"
v-if="display"

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

@ -1,14 +1,14 @@
<template>
<div class="d-flex flex-column w-100">
<button
class="btn list-button d-flex align-items-center justify-content-between"
class="btn list-button d-flex align-items-center justify-content-between py-3 px-4"
@click='displayComponent'
v-bind:class="[
this.isLoading ? 'button-loader' : 'not-loading',
this.isError ? 'error' : '',
]"
>
{{ this.buttonText }}
<span class="m-0">{{ this.buttonText }}</span>
<loader
v-if="display"
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"

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

@ -8,7 +8,7 @@
<script>
export default {
name: "loader",
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem */
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
props: {
sizeInRem: {
type: Number,
@ -18,7 +18,7 @@ export default {
loaderColor: {
type: String
},
/* Position options: center, right, left (OPTIONAL) */
/* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
loaderPosition: {
type: String
}
@ -58,15 +58,16 @@ export default {
}
//Spinner position
&.center {
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
right: 50%;
}
&.right {
margin: 0 0 0 auto;
position: absolute;
right: 1rem;
}
&.left {
margin: 0 auto 0 0;
position: absolute;
left: 1rem;
}
//Spinner color
&:after { //Default spinner color (blue) if no other color is specified from the options below

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

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

51
src/ux-components/radio-list/radio-list.vue
View file

@ -1,51 +0,0 @@
<template>
<div class="radiogroup radio-list-button d-flex flex-column w-100">
<input type="radio"
v-bind:id="radioID"
v-bind:name="groupName"
v-bind:value="radioID">
<label role="radio" tabindex="0" aria-checked="false"
v-bind:for="radioID"
class="mb-2 d-flex align-items-center justify-content-between p-2"
@click='displayComponent'
>{{radioID}}
<loader
v-if="display"
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
v-bind: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",
"ariaLabelBy",
"radioID",
"errorMessage",
"loaderColor",
"loaderPosition",
"sizeInRem"
],
data() {
return {
isError: false,
display: false
};
},
methods: {
displayComponent() {
this.display = true;
},
},
components: {
loader,
},
};
</script>

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

@ -18,7 +18,7 @@ describe("radio.vue", () => {
// Assert
const input = wrapper.find("input");
const label = wrapper.find("label");
const paragraph = wrapper.find("p");
const paragraph = wrapper.find("span");
await label.trigger('click');
@ -33,13 +33,13 @@ describe("radio.vue", () => {
role: "radio",
tabindex: "0",
for: "2023",
class: "d-flex align-items-center justify-content-between p-2",
class: "d-flex flex-column justify-content-center py-3 px-4",
"aria-checked": "false"
});
expect(label.text()).toEqual('2023');
expect(paragraph.text()).toEqual('null');
expect(paragraph.text()).toEqual('2023');
expect(wrapper.vm.display).toBe(true);

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

@ -1,19 +1,17 @@
<template>
<div class="radiogroup radio-list-button d-flex flex-column w-100">
<input type="radio"
:id="radioID"
:name="groupName"
:value="radioID">
<label role="radio" tabindex="0" aria-checked="false"
:for="radioID"
class="d-flex align-items-center justify-content-between p-2"
@click='displayComponent'
>{{radioID}}
<loader
v-if="display"
:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
:class="[this.loaderColor, this.loaderPosition]"
/>
<!-- 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">
<label role="radio" tabindex="0" 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>
@ -24,12 +22,14 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "radioList",
props: [
"groupName",
"radioID",
"errorMessage",
"loaderColor",
"loaderPosition",
"sizeInRem"
"groupName", /* Required, unique for each radio button GROUP */
"radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
"radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
"textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
"errorMessage", /* Optional */
"loaderColor", /* Optional */
"loaderPosition", /* Optional */
"sizeInRem" /* Optional */
],
data() {
return {