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

Merge pull request #159 from Safelite/feature/CSR-186_cleanup

Browse source 
Cleaning up props for radio question component
This commit is contained in:
max-dempsey 2022-01-21 09:13:32 -05:00 committed by GitHub
commit 25182730af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 66 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/common-components/button-question/button-question.vue
View file

@ -1,36 +1,35 @@
<template>
<div :class="isVehicleQuestion ? 'button_question' : ''">
<div :class="isOverflowScrollable ? 'button_question' : ''">
<div v-if="questionText" class="mt-6 mb-4 d-flex">
<span class="text-center fs-6 fw-bold w-100">{{
questionText
}}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
<fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
<legend class="sr-only">{{groupName}}</legend>
<div :class="isRow ? 'row g-2' : isColumn ? columnClasses : 'w-100'">
<div :class="getComponentWrapperClasses">
<component :is="buttonType" v-for="answer in answers" :key="answer"
:buttonID="answer.Name ? answer.Name : answer"
@mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
@keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
:buttonID="answer.Name ? answer.Name : answer"
:buttonLabel="answer.Text ? answer.Text : answer"
:buttonLabelSubCopy="answer.SubText"
:textPosition="textPosition"
:isMultiSelect="isMultiSelect"
:groupName="groupName"
:loaderEnabled="loaderEnabled"
:loaderColor="loaderColor"
:loaderPosition="loaderPosition"
:sizeInRem="sizeInRem"
data-test="button"
:groupName="groupName"
:textPosition="textPosition"
screenReaderOnlyText="(opens new window)"
:isMultiSelect="isMultiSelect"
:isHorizontal="isHorizontal"
:ariaLabelBy="ariaLabelBy"
:isWide="isWide"
:isRequired="isRequired"
:buttonImage="answer.AnswerImageUrl"
:buttonImageId="answer.ImageId"
:buttonLabel="answer.Text ? answer.Text : answer"
:altText="altText"
:buttonLabelSubCopy="answer.SubText"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:value="modelValue"
data-test="button"
/>
</div>
</fieldset>
@ -51,6 +50,7 @@ export default {
default: 'listButton'
},
isMultiSelect: Boolean,
groupName: String,
questionText: String,
answers: Array,
textPosition: {
@ -70,25 +70,30 @@ export default {
type: [String, Number],
default: 1.5
},
modelValue: String,
groupName: String,
ariaLabelBy: String,
isRequired: Boolean,
isVehicleQuestion: Boolean,
isHorizontal: Boolean,
isColumn: Boolean,
isRow: Boolean,
buttonImage: String,
buttonImageId: String,
buttonLabel: String,
altText: String,
buttonLabelSubCopy: String,
isOverflowScrollable: Boolean,
isWide: Boolean,
modelValue: String,
},
data() {
return {
vehicleQuestionClasses: 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0',
columnClasses: 'd-flex flex-row p-0'
};
computed: {
getFieldSetClasses(){
return this.isOverflowScrollable ? 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0' : '';
},
getComponentWrapperClasses() {
let classes;
switch(this.buttonType) {
case 'listButton':
classes = 'w-100'
break;
case 'listButtonHorizontal':
classes = 'd-flex flex-row p-0'
break;
case 'listCard':
classes = 'row g-2'
break;
}
return classes;
}
},
methods: {
chooseAnswer(answer) {

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

@ -162,7 +162,7 @@
<legend class="sr-only">Horizontal Checkbox</legend>
<listCard
isMultiSelect
isHorizontal
isWide
buttonImage="windshield-damage.svg"
buttonLabel="Windshield"
altText=""
@ -180,7 +180,7 @@
<legend class="sr-only">Checkbox no Description</legend>
<listCard
isMultiSelect
isHorizontal
isWide
buttonImage="side-window-damage-right-all.svg"
buttonLabel="Side Window"
altText=""
@ -197,7 +197,7 @@
<fieldset>
<legend class="sr-only">Horizontal Radio Button</legend>
<listCard
isHorizontal
isWide
buttonImage="back-glass-damage.svg"
buttonLabel="Rear Window"
altText=""
@ -214,7 +214,7 @@
<fieldset>
<legend class="sr-only">Radio Button no Description</legend>
<listCard
isHorizontal
isWide
buttonImage="windshield-damage.svg"
buttonLabel="Windshield"
altText=""
@ -833,7 +833,7 @@
/>
<buttonQuestion
isMultiSelect
isHorizontal
isWide
:answers="listCardCheckBoxHorizontal"
buttonType="listCard"
ariaLabelBy="horizontal_check_card"
@ -842,7 +842,7 @@
/>
<buttonQuestion
isMultiSelect
isHorizontal
isWide
:answers="listCardCheckBoxHorizontalSubText"
buttonType="listCard"
ariaLabelBy="horizontal_check_card-st"
@ -850,7 +850,7 @@
questionText="With Subtext"
/>
<buttonQuestion
isHorizontal
isWide
:answers="listRadioHorizontal"
buttonType="listCard"
ariaLabelBy="horizontal_radio_card"
@ -858,7 +858,7 @@
questionText="List Card Horizontal as radio"
/>
<buttonQuestion
isHorizontal
isWide
:answers="listRadioHorizontalSubText"
buttonType="listCard"
ariaLabelBy="horizontal_radio_card-st"

2
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -1,10 +1,10 @@
<template>
<buttonQuestion class="radioQuestion"
isOverflowScrollable
:questionText="questionText"
:answers="makes"
groupName="Choose Vehicle Make"
textPosition="text-start"
:isVehicleQuestion="true"
:loaderEnabled="true"
v-model="modelValue"
/>

2
src/layouts/vehicle-model/model-question/model-question.vue
View file

@ -1,10 +1,10 @@
<template>
<buttonQuestion class="radioQuestion"
isOverflowScrollable
:questionText="questionText"
:answers="models"
groupName="Choose Vehicle Model"
textPosition="text-start"
:isVehicleQuestion="true"
:loaderEnabled="true"
v-model="modelValue"
/>

2
src/layouts/vehicle-style/style-question/style-question.vue
View file

@ -1,10 +1,10 @@
<template>
<buttonQuestion class="radioQuestion"
isOverflowScrollable
:questionText="questionText"
:answers="styles"
groupName="Choose Vehicle Style"
textPosition="text-start"
:isVehicleQuestion="true"
:loaderEnabled="true"
v-model="modelValue"
/>

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

@ -1,9 +1,9 @@
<template>
<buttonQuestion class="radioQuestion"
isOverflowScrollable
:questionText="questionText"
:answers="years"
groupName="Choose Vehicle Year"
:isVehicleQuestion="true"
textPosition="text-start"
:loaderEnabled="true"
v-model="modelValue"

29
src/ux-components/list-card/list-card.vue
View file

@ -1,13 +1,13 @@
<template>
<!-- Heavily documented below -->
<div class="col">
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''">
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleChange(value)" :data-focus-target="groupName" />
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
<img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
<p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
<p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
<div v-if="isHorizontal" class="order-2">
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
<img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
<p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
<div v-if="isWide" class="order-2">
<p class="m-0 small">{{buttonLabel}}</p>
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
</div>
@ -25,7 +25,7 @@ export default {
props: {
//Must choose one of the following four options
isMultiSelect: Boolean, //Defines use as checkbox
isHorizontal: Boolean,
isWide: Boolean,
//end must choose
buttonImage: String,//Required: File name of image
buttonImageId: String,
@ -40,10 +40,17 @@ export default {
default: ""
}
},
data(){
return {
columnClasses: "flex-column pt-4 pb-2",
rowClasses: "flex-row py-r ps-3 pe-8"
computed: {
getLabelClasses(){
if(this.isWide) {
let classes = "flex-row py-r ps-3 pe-8";
if(this.buttonLabelSubCopy) {
classes += " checkboxTop"
}
return classes
} else {
return "flex-column pt-4 pb-2";
}
}
},
setup(props) {