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

Merge branch 'develop' into feature/CSR-222

Browse source
This commit is contained in:
Adam Caouette 2021-12-15 18:16:44 -05:00
commit 29f52c8b4b
14 changed files with 272 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -61,20 +61,18 @@
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
</div>
</div>
<div class="row">
<!-- 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"
>
<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="sr-only" id="demo-1-radio-group">
Select Vehicle Year
</h3>
<listButton
isCheckbox
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2021"
@ -86,6 +84,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2020"
@ -97,6 +96,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2019"
@ -109,23 +109,60 @@
/>
</div>
</div>
<div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div role="checkbox" aria-labelledby="demo-1-checkbox-group" class="col my-3 d-flex flex-column">
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
<listButton
groupName="demo-1-checkbox"
ariaLabelBy="vehicle-year"
buttonID="2018"
isRequired=true
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<listButton
groupName="demo-1-checkbox"
ariaLabelBy="vehicle-year"
buttonID="2017"
isRequired=true
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<listButton
groupName="demo-1-checkbox"
ariaLabelBy="vehicle-year"
buttonID="2016"
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">List Button - Multi-Line</h4>
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
</div>
</div>
<div class="row">
<!-- 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"
>
<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="sr-only" id="demo-2-radio-group">
Select Vehicle Year
</h3>
<h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
<listButton
isCheckbox
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Chevrolet"
@ -137,6 +174,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Dodge"
@ -148,6 +186,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Ford"
@ -160,23 +199,60 @@
/>
</div>
</div>
<div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
<div role="radiogroup" aria-labelledby="demo-2-checkbox-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="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
<listButton
groupName="demo-2-checkbox"
ariaLabelBy="vehicle-make"
buttonID="Honda"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<listButton
groupName="demo-2-checkbox"
ariaLabelBy="vehicle-make"
buttonID="Acura"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<listButton
groupName="demo-2-checkbox"
ariaLabelBy="vehicle-make"
buttonID="Infiniti"
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">List Button - Multi-Line Centered</h4>
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
</div>
</div>
<div class="row">
<!-- 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"
>
<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="sr-only" id="demo-3-radio-group">
Multi-Line Centered
</h3>
<h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
<listButton
isCheckbox
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="Corvette"
@ -188,6 +264,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="Testarosa"
@ -199,6 +276,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButton
isCheckbox
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="S600"
@ -211,23 +289,62 @@
/>
</div>
</div>
<div class="row">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
<div role="radiogroup" aria-labelledby="demo-3-checkbox-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="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
<listButton
groupName="demo-3-checkbox"
ariaLabelBy="vehicle-model"
buttonID="Accord"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<listButton
groupName="demo-3-checkbox"
ariaLabelBy="vehicle-model"
buttonID="Civic"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/>
<listButton
groupName="demo-3-checkbox"
ariaLabelBy="vehicle-model"
buttonID="Ridgeline"
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">List Button Horizontal</h4>
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
</div>
</div>
<div class="row px-3">
<!-- 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"
>
<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="sr-only" id="demo-4-radio-group">
Select Vehicle Year
</h3>
<listButtonHorizontal
isCheckbox
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="1"
@ -241,6 +358,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButtonHorizontal
isCheckbox
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="2"
@ -254,6 +372,7 @@
screenReaderOnlyText="(opens new window)"
/>
<listButtonHorizontal
isCheckbox
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="3"
@ -268,6 +387,55 @@
/>
</div>
</div>
<div class="row px-3">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
<div role="radiogroup" aria-labelledby="demo-4-checkbox-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="sr-only" id="demo-4-checkbox-group">
Select Vehicle Year
</h3>
<listButtonHorizontal
groupName="demo-4-checkbox"
ariaLabelBy="vehicle-model"
buttonID="4"
buttonLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="1"
screenReaderOnlyText="(opens new window)"
/>
<listButtonHorizontal
groupName="demo-4-checkbox"
ariaLabelBy="vehicle-model"
buttonID="5"
buttonLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="2"
screenReaderOnlyText="(opens new window)"
/>
<listButtonHorizontal
groupName="demo-4-checkbox"
ariaLabelBy="vehicle-model"
buttonID="6"
buttonLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="3"
screenReaderOnlyText="(opens new window)"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Text Link</h4>

24
src/layouts/loader-demo/loader-demo.vue
View file

@ -1,24 +0,0 @@
<template>
<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">Loader</h4>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<loader sizeInRem="10" loaderColor="blue" loaderPosition="center" />
</div>
</div>
</div>
</template>
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "App",
components: {
loader,
},
};
</script>

3
src/layouts/vehicle-make/vehicle-make.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<p> Vehicle Make Layout - Do Something Cool Here </p>
</template>

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

@ -73,7 +73,6 @@ function setupMocks({
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
],
isCmsContentReady: true,
},
yearQuestionInitialData: yearQuestionInitialData,
};

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

@ -1,4 +1,4 @@
<template v-if="isCmsContentReady">
<template>
<div class="container-fluid shadow rounded-3 p-0">
<funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
<div class="select-car">
@ -23,6 +23,8 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
export default {
name: "vehicle-year",
data() {
@ -67,7 +69,7 @@ export default {
watch: {
selectedYear(year) {
this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
this.$router.push('?fmgPage=vehicle-make');
this.$router.navigate(navigationScenarios.SELECTED_YEAR, this.$route);
}
},

6
src/router/index.js
View file

@ -3,7 +3,6 @@ import { storeActions } from "@/constants/store-actions.js";
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
import { routingTable } from "@/router/router-constants/routing-table.js";
import ComponentTest from "@/layouts/component-test/component-test.vue";
import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
import NotFound from "@/layouts/not-found/not-found.vue";
import store from "@/store";
@ -18,11 +17,6 @@ const routes = [
name: "ComponentTest",
component: ComponentTest,
},
{
path: "/loader-demo", // This is a temporary route for testing.
name: "LoaderDemo",
component: LoaderDemo,
},
{
path: "/",
beforeEnter(to, from, next) {

2
src/router/router-constants/fmgPage-values.js
View file

@ -1,6 +1,8 @@
const fmgPageValues = {
VEHICLE_YEAR: "vehicle-year",
VEHICLE_MAKE: "vehicle-make",
VEHICLE_MODEL: "vehicle-model",
VEHICLE_STYLE: "vehicle-style",
};
export { fmgPageValues };

3
src/router/router-constants/navigation-scenarios.js
View file

@ -1,5 +1,8 @@
const navigationScenarios = {
SELECTED_YEAR: "SELECTED_YEAR",
SELECTED_MODEL: "SELECTED_MODEL",
SELECTED_MAKE: "SELECTED_MAKE",
CLICKED_BACK: "CLICKED_BACK",
};
export { navigationScenarios };

26
src/router/router-constants/routing-table.js
View file

@ -11,6 +11,32 @@ const routingTable = [
},
],
},
{
fmgPageValue: fmgPageValues.VEHICLE_MAKE,
maps: [
{
scenario: navigationScenarios.SELECTED_MAKE,
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
},
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
}
],
},
{
fmgPageValue: fmgPageValues.VEHICLE_MODEL,
maps: [
{
scenario: navigationScenarios.SELECTED_MODEL,
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
},
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
}
],
},
];
export { routingTable };

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

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

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

@ -31,7 +31,6 @@ describe("list-button.vue", () => {
});
expect(label.attributes()).toEqual({
role: "radio",
tabindex: "-1",
for: "2023",
class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
@ -42,6 +41,6 @@ describe("list-button.vue", () => {
expect(paragraph.text()).toEqual("2023");
expect(wrapper.vm.display).toBe(true);
expect(wrapper.vm.isLoaderDisplayed).toBe(true);
});
});

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

@ -1,13 +1,22 @@
<!-- 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'>
<div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
<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>
<div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
<label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{ errorMessage }}</p>
</div>
@ -18,6 +27,7 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "listButtonHorizontal",
props: {
isCheckbox: Boolean,
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 */
@ -33,12 +43,12 @@ export default {
data() {
return {
isError: false,
display: false,
isLoaderDisplayed: false,
};
},
methods: {
displayComponent() {
this.display = true;
displayLoader() {
this.isLoaderDisplayed = true;
},
},
components: {
@ -59,7 +69,8 @@ export default {
</script>
<style lang="scss">
.list-button-horizontal {
input[type="radio"] {
input[type="radio"],
input[type="checkbox"] {
opacity: 0;
position: fixed;
width: 0;

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

@ -31,7 +31,6 @@ describe("list-button.vue", () => {
});
expect(label.attributes()).toEqual({
role: "radio",
tabindex: "-1",
for: "2023",
class: "d-flex flex-column justify-content-center py-3 px-4",
@ -42,6 +41,6 @@ describe("list-button.vue", () => {
expect(paragraph.text()).toEqual("2023");
expect(wrapper.vm.display).toBe(true);
expect(wrapper.vm.isLoaderDisplayed).toBe(true);
});
});

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

@ -1,12 +1,21 @@
<template>
<!-- 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()'>
<div v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{errorMessage}}</p>
</div>
<div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
<label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{errorMessage}}</p>
</div>
@ -17,6 +26,7 @@ import loader from "@/ux-components/loader/loader";
export default {
name: "listButton",
props: {
isCheckbox: Boolean,
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 */
@ -31,12 +41,12 @@ export default {
data() {
return {
isError: false,
display: false,
isLoaderDisplayed: false,
};
},
methods: {
displayComponent() {
this.display = true;
displayLoader() {
this.isLoaderDisplayed = true;
},
},
components: {