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

Merge pull request #88 from Safelite/CSR-186-radio-button-updates

Browse source 
Csr 186 radio button updates
This commit is contained in:
bmauger 2021-12-10 09:49:43 -05:00 committed by GitHub
commit 91fb99a1a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 196 additions and 257 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,33 +6,22 @@
}}</span> }}</span>
</div> </div>
<div class="w-100 d-flex justify-content-center"> <div class="w-100 d-flex justify-content-center">
<div <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
class=" <legend class="visually-hidden">{{groupName}}</legend>
car_list <radio v-for="answer in answers" :key="answer"
overflow-scroll :radioID="answer"
position-absolute @click="chooseAnswer(answer)"
container-fluid loaderColor="blue"
w-100 loaderPosition="right"
pt-1 sizeInRem="1.5"
" data-test="radio"
role="radiogroup" :groupName="groupName"
aria-labelledby="select-year-radio-group" textPosition="text-start"
> isRequired=true
<h3 class="visually-hidden" id="select-year-radio-group">*</h3> :value="modelValue"
<radio screenReaderOnlyText="(opens new window)"
v-for="answer in answers" />
:key="answer" </fieldset>
: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>
</div> </div>
</template> </template>
@ -45,6 +34,7 @@ export default {
questionText: String, questionText: String,
answers: Array, answers: Array,
modelValue: String, modelValue: String,
groupName: String
}, },
methods: { methods: {
chooseAnswer(answer) { chooseAnswer(answer) {

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

@ -80,31 +80,37 @@
Select Vehicle Year Select Vehicle Year
</h3> </h3>
<radio <radio
groupName="demo-1" groupName="demo-1"
ariaLabelBy="vehicle-year" ariaLabelBy="vehicle-year"
radioID="2021" radioID="2021"
textPosition="text-start" isRequired=true
loaderColor="blue" textPosition="text-start"
loaderPosition="right" loaderColor="blue"
sizeInRem="1" loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
<radio <radio
groupName="demo-1" groupName="demo-1"
ariaLabelBy="vehicle-year" ariaLabelBy="vehicle-year"
radioID="2020" radioID="2020"
textPosition="text-start" isRequired=true
loaderColor="blue" textPosition="text-start"
loaderPosition="right" loaderColor="blue"
sizeInRem="1" loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
<radio <radio
groupName="demo-1" groupName="demo-1"
ariaLabelBy="vehicle-year" ariaLabelBy="vehicle-year"
radioID="2019" radioID="2019"
textPosition="text-start" isRequired=true
loaderColor="blue" textPosition="text-start"
loaderPosition="right" loaderColor="blue"
sizeInRem="1" loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
</div> </div>
</div> </div>
@ -125,34 +131,37 @@
Select Vehicle Year Select Vehicle Year
</h3> </h3>
<radio <radio
groupName="demo-2" groupName="demo-2"
ariaLabelBy="vehicle-make" ariaLabelBy="vehicle-make"
radioID="Chevrolet" radioID="Chevrolet"
radioLabelSubCopy="Test sub-headline" radioLabelSubCopy="Test sub-headline"
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
<radio <radio
groupName="demo-2" groupName="demo-2"
ariaLabelBy="vehicle-make" ariaLabelBy="vehicle-make"
radioID="Dodge" radioID="Dodge"
radioLabelSubCopy="Test sub-headline" radioLabelSubCopy="Test sub-headline"
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
<radio <radio
groupName="demo-2" groupName="demo-2"
ariaLabelBy="vehicle-make" ariaLabelBy="vehicle-make"
radioID="Ford" radioID="Ford"
radioLabelSubCopy="Test sub-headline" radioLabelSubCopy="Test sub-headline"
textPosition="text-start" textPosition="text-start"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
</div> </div>
</div> </div>
@ -173,34 +182,37 @@
Multi-Line Centered Multi-Line Centered
</h3> </h3>
<radio <radio
groupName="demo-3" groupName="demo-3"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="Corvette" radioID="Corvette"
radioLabelSubCopy="Test sub-headline" radioLabelSubCopy="Test sub-headline"
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
<radio <radio
groupName="demo-3" groupName="demo-3"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="Testarosa" radioID="Testarosa"
radioLabelSubCopy="Test sub-headline" radioLabelSubCopy="Test sub-headline"
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
<radio <radio
groupName="demo-3" groupName="demo-3"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="S600" radioID="S600"
radioLabelSubCopy="Test sub-headline" radioLabelSubCopy="Test sub-headline"
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)"
/> />
</div> </div>
</div> </div>
@ -221,40 +233,43 @@
Select Vehicle Year Select Vehicle Year
</h3> </h3>
<radioHorizontal <radioHorizontal
groupName="demo-4" groupName="demo-4"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="1" radioID="1"
radioLabelSubCopy="" radioLabelSubCopy=""
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="1" v-bind:positionInGroup="1"
screenReaderOnlyText="(opens new window)"
/> />
<radioHorizontal <radioHorizontal
groupName="demo-4" groupName="demo-4"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="2" radioID="2"
radioLabelSubCopy="" radioLabelSubCopy=""
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="2" v-bind:positionInGroup="2"
screenReaderOnlyText="(opens new window)"
/> />
<radioHorizontal <radioHorizontal
groupName="demo-4" groupName="demo-4"
ariaLabelBy="vehicle-model" ariaLabelBy="vehicle-model"
radioID="3" radioID="3"
radioLabelSubCopy="" radioLabelSubCopy=""
textPosition="text-center" textPosition="text-center"
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="3" v-bind:positionInGroup="3"
screenReaderOnlyText="(opens new window)"
/> />
</div> </div>
</div> </div>

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

@ -1,16 +1,12 @@
<template> <template v-if="isCmsContentReady">
<siteHeader :imageSrc="siteHeaderWidget.LogoImage" /> <div class="container-fluid shadow rounded-3 p-0">
<div class="select-car"> <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
<div class="select-car-form rounded text-center"> <div class="select-car">
<vehicleBanner <div class="select-car-form rounded text-center">
:vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
/> <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
<pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" /> <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
<yearQuestion </div>
:questionText="radioQuestionWidgets.QuestionText"
:years="vehicleYears"
v-model="selectedYear"
/>
</div> </div>
</div> </div>
</template> </template>
@ -76,8 +72,8 @@ export default {
watch: { watch: {
selectedYear(year) { selectedYear(year) {
this.$store.commit(this.storeMutations.UPDATE_YEAR, year); this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
this.$router.push("?fmgPage=vehicle-make"); this.$router.push('?fmgPage=vehicle-make');
}, }
}, },
components: { components: {
@ -92,12 +88,10 @@ export default {
<style lang="scss"> <style lang="scss">
.select-car { .select-car {
height: calc(100vh - 56px); height: calc(100vh - 56px);
padding: 0 1.5rem;
.car_list { .car_list {
// Height will be determined by overall height of content above list // Height will be determined by overall height of content above list
height: calc(100% - 300px); height: calc(100% - 300px);
padding: 0 1.5rem;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
} }

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

@ -1,8 +1,8 @@
<template> <template>
<radioQuestion <radioQuestion class="radioQuestion"
class="radioQuestion"
:questionText="questionText" :questionText="questionText"
:answers="years" :answers="years"
groupName="Choose Vehicle Year"
v-model="selectedYear" v-model="selectedYear"
/> />
</template> </template>
@ -28,7 +28,7 @@ export default {
watch: { watch: {
selectedYear(val) { selectedYear(val) {
this.$emit("update:modelValue", val); this.$emit("update:modelValue", val);
}, }
}, },
}; };
</script> </script>

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

@ -54,6 +54,7 @@ $gray-200: #E3E4E4;// Used in theme
$gray-300: #D2D4D4; $gray-300: #D2D4D4;
$gray: #B0B3B3;// Default Gray $gray: #B0B3B3;// Default Gray
$gray-500: #8E9292;// Used in theme $gray-500: #8E9292;// Used in theme
$gray-550: #727676;// Used in theme
$gray-600: #4D5151;// Used in theme $gray-600: #4D5151;// Used in theme
$gray-700: #303333;// Used in theme $gray-700: #303333;// Used in theme
$gray-800: #222424;// Used in theme $gray-800: #222424;// Used in theme

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

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

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

@ -1,8 +1,9 @@
<template> <template>
<div <div class="loader"
class="loader" role="alert"
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" aria-label="Loading new page"
v-bind:class="[this.loaderColor, this.loaderPosition]" v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
v-bind:class="[this.loaderColor, this.loaderPosition]"
></div> ></div>
</template> </template>

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

@ -1,39 +1,13 @@
<!-- See the component-test.vue page for example implementation --> <!-- 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> <template>
<!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. --> <!-- 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"> <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
<input <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent"/>
type="radio" <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'>
:id="radioID" <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
:name="groupName" <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
:value="radioID" <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
aria-required="true" <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
@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> </label>
<p class="small">{{ errorMessage }}</p> <p class="small">{{ errorMessage }}</p>
</div> </div>
@ -44,26 +18,17 @@ import loader from "@/ux-components/loader/loader";
export default { export default {
name: "radioHorizontal", name: "radioHorizontal",
props: { props: {
groupName: String /* Required, unique for each radio button GROUP */, groupName: String, /* Required, unique for each radio button GROUP */
radioID: radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
String /* Required, unique for each radio button. Used for button id, label and <label for> */, radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
radioLabelSubCopy: String /* Optional, used for multi-line radio buttons */, screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
textPosition: textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
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 */
errorMessage: loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
String /* Optional, if there is an error message to be displayed */, loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
loaderColor: sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
String /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */, totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */
loaderPosition: positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
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() { data() {
return { return {

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

@ -27,7 +27,7 @@ describe("radio.vue", () => {
type: "radio", type: "radio",
value: "2023", value: "2023",
name: "TestGroup", name: "TestGroup",
"aria-required": "true", "aria-required": "false",
}); });
expect(label.attributes()).toEqual({ expect(label.attributes()).toEqual({

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

@ -1,40 +1,15 @@
<template> <template>
<!-- See the component-test.vue page for example implementation --> <!-- 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"> <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
<input <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
type="radio" <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
:id="radioID" <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
:name="groupName" <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
:value="radioID" <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
aria-required="true" <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
@keyup.space="displayComponent" </label>
/> <p class="small">{{errorMessage}}</p>
<label </div>
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> </template>
<script> <script>
@ -42,22 +17,16 @@ import loader from "@/ux-components/loader/loader";
export default { export default {
name: "radioList", name: "radioList",
props: { props: {
groupName: String /* Required, unique for each radio button GROUP */, groupName: String, /* Required, unique for each radio button GROUP */
radioID: radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
String /* Required, unique for each radio button. Used for button id, label and <label for> */, isRequired: Boolean, /* Optional, default is false */
radioLabelSubCopy: String /* Optional, used for multi-line radio buttons */, screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
textPosition: radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
String /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */, textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
errorMessage: errorMessage: String, /* Optional, if there is an error message to be displayed */
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 */
loaderColor: loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
String /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */, sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
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() { data() {
return { return {
@ -72,6 +41,6 @@ export default {
}, },
components: { components: {
loader, loader,
}, }
}; };
</script> </script>