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

Updates to account for dev changes

Browse source
This commit is contained in:
FrankRua 2022-02-22 17:00:09 -05:00
parent d64cd068a2
commit 3361e6818a
4 changed files with 272 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/layouts/nested-radio-poc/nested-radio.vue
View file

@ -1,21 +1,42 @@
<template>
<div class="container-fluid nested-radio">
<div class="container-fluid nested-radio">
<div class="row mb-1">
<div class="col">
<listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint, Blue Shade" buttonID="radio1" />
</div>
<div class="col">
<listCard
groupName="listcard1"
isWide="true"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Green Tint, Blue Shade"
buttonID="radio1"
/>
</div>
</div>
<div class="row mb-1">
<div class="col">
<buttonQuestion buttonType="radio" groupName="Demo Group" buttonID="button1" isRequired value="test button" screenReaderOnlyText="rain sensor, solar, 3rd visor band" :answers="demoArray" questionText="ok now select your features" />
</div>
<div class="col">
<buttonQuestion
buttonType="radio"
groupName="Demo Group"
buttonID="button1"
isRequired
value="test button"
screenReaderOnlyText="rain sensor, solar, 3rd visor band"
:answers="demoArray"
questionText="ok now select your features"
/>
</div>
</div>
<div class="row mb-2">
<div class="col">
<listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint" buttonID="radio2" />
</div>
<div class="col">
<listCard
groupName="listcard1"
isWide="true"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Green Tint"
buttonID="radio2"
/>
</div>
</div>
</div>
</div>
</template>
<script>
@ -33,20 +54,21 @@ export default {
demoArray: [
"rain sensor, solar, 3rd visor band",
"rain sensor, heated glass, solar, 3rd visor band",
]
}
],
};
},
};
</script>
<style lang="scss">
.nested-radio {
.ui-radio {
flex-direction: column;
margin: .25rem 0;
}
.ui-radio {
flex-direction: column;
margin: 0.25rem 0;
}
p {
font-size: .875rem;
}
p {
font-size: 0.875rem;
}
}
</style>

14
src/layouts/vehicle-parts/part-question/part-question.vue
View file

@ -8,6 +8,7 @@
<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
<div class="row my-2">
<div class="col">
<listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
require(`@/assets/img/tints/${getTintSourceImage(
glassLocation,
@ -16,14 +17,17 @@
" :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
</div>
</div>
<div v-if="
<transition name="fade" mode="out-in">
<div v-if="
selectedTint[name] != undefined &&
selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
" class="row my-2">
<div class="col">
<buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" v-on:update:modelValue="EmitPartSelection($event)" />
" class="row my-2" aria-live="polite">
<div class="col">
<buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" v-on:update:modelValue="EmitPartSelection($event)" />
</div>
</div>
</div>
</transition>
</div>
</template>

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

@ -44,36 +44,28 @@
</div>
</label>
</div>
</div>
</div>
</template>
<script>
import {
useField
} from "vee-validate";
import { useField } from "vee-validate";
export default {
name: "listCard",
props: {
isMultiSelect: Boolean, //Defines use as checkbox
isWide: Boolean,
buttonImage: String, //Required: File name of image
buttonImageId: String,
buttonLabel: String, //Required: Label text
isRequired: Boolean, //Required: is aria-required required or not?
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
buttonID: String, //Required: Unique
groupName: String, //Rquired: Unique
buttonLabelSubCopy: String, //Optional: sub text
value: {
// Field initial value
type: String,
default: "",
},
colLength: String,
validationRules: String,
selectedButtonIDs: [Array, String],
hasError: Boolean,
name: "listCard",
props: {
isMultiSelect: Boolean, //Defines use as checkbox
isWide: Boolean,
buttonImage: String, //Required: File name of image
buttonImageId: String,
buttonLabel: String, //Required: Label text
isRequired: Boolean, //Required: is aria-required required or not?
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
buttonID: String, //Required: Unique
groupName: String, //Rquired: Unique
buttonLabelSubCopy: String, //Optional: sub text
value: {
// Field initial value
type: String,
default: "",
},
colLength: String,
validationRules: String,
@ -97,211 +89,178 @@ export default {
if (this.buttonLabelSubCopy) {
classes += " checkboxTop";
}
return classes;
} else {
return "flex-column pt-4 pb-2";
}
},
},
methods: {
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
this.$emit('isCheckedChanged', emitEvent);
this.$emit('update:modelValue', emitEvent);
}
}
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const emitEvent = {
isChecked: this.checkValue,
buttonId: this.buttonID.toString()
};
this.$emit('isCheckedChanged', emitEvent);
this.$emit('update:modelValue', emitEvent);
}
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const {
value: inputValue,
handleChange,
errors,
} = useField(props.groupName, props.validationRules, {
type: inputType,
checkedValue: props.value,
});
return {
handleChange,
errors,
};
},
const {
value: inputValue,
handleChange,
errors,
} = useField(props.groupName, props.validationRules,
{
type: inputType,
checkedValue: props.value,
});
return {
handleChange,
errors,
};
},
};
</script>
<style lang="scss">
.list-card {
border: 1px solid $gray-500;
&.invalid {
//Red border if invalid
border: 1px solid $red;
border: 1px solid $gray-500;
&.invalid {
//Red border if invalid
border: 1px solid $red;
}
img {
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
height: auto;
width: 6.5rem;
margin-bottom: 3rem;
max-width: 100%;
}
&:hover {
box-shadow: 0px 0px 0px 4px $blue-300;
border: 1px solid transparent;
}
input[type="checkbox"],
input[type="radio"] {
opacity: 0;
width: 0;
height: 0;
+ label {
display: block;
position: relative;
&:hover {
cursor: pointer;
}
p {
color: $gray-600;
text-align: center;
&.sub-copy {
color: $gray-550;
}
}
}
&:focus + label {
box-shadow: 0 0 0 2.5px $blue;
border-radius: 0.5rem;
}
&:checked + label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem;
}
&:checked + label {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
}
}
+ label::before {
content: "";
position: absolute;
display: flex;
margin: 0 auto;
width: 1rem;
height: 1rem;
margin: 3rem 0 0 0;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
order: 2;
flex-shrink: 0;
color: $gray-600;
}
+ label.checkboxTop::before {
margin: -1.25rem 0.5rem 0 0 !important;
}
+ label.checkboxTop::after {
margin: -1.5rem 0.5rem 0 0 !important;
}
&:checked + label::before {
background: $blue;
}
&:checked + label::after {
content: "";
position: absolute;
margin: 3.2rem 0 0 0;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 11px;
transform: rotate(-45deg);
}
}
input[type="radio"] {
+ label::before {
content: "";
display: none;
}
+ label::after {
content: "";
display: none;
}
+ label {
img {
margin-bottom: 0;
}
}
}
&.horizontal {
img {
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
height: auto;
width: 6.5rem;
margin-bottom: 3rem;
max-width: 100%;
margin-bottom: 0;
width: 5.5rem;
}
&:hover {
box-shadow: 0px 0px 0px 4px $blue-300;
border: 1px solid transparent;
}
input[type="checkbox"],
input[type="radio"] {
opacity: 0;
width: 0;
height: 0;
+label {
display: block;
position: relative;
&:hover {
cursor: pointer;
}
p {
color: $gray-600;
text-align: center;
&.sub-copy {
color: $gray-550;
}
}
}
&:focus+label {
box-shadow: 0 0 0 2.5px $blue;
border-radius: 0.5rem;
}
&:checked+label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem;
}
&:checked+label {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
}
}
+label::before {
content: "";
position: absolute;
display: flex;
margin: 0 auto;
width: 1rem;
height: 1rem;
margin: 3rem 0 0 0;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
order: 2;
flex-shrink: 0;
color: $gray-600;
}
+label.checkboxTop::before {
margin: -1.25rem 0.5rem 0 0 !important;
}
+label.checkboxTop::after {
margin: -1.5rem 0.5rem 0 0 !important;
}
&:checked+label::before {
background: $blue;
}
&:checked+label::after {
content: "";
position: absolute;
margin: 3.2rem 0 0 0;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 11px;
transform: rotate(-45deg);
}
}
input[type="radio"] {
+label::before {
content: "";
display: none;
}
+label::after {
content: "";
display: none;
}
+label {
img {
margin-bottom: 0;
}
}
}
&.horizontal {
+ label::before {
content: "";
position: relative;
margin: 0 0.5rem 0 0;
order: 1;
}
&:checked + label::after {
content: "";
margin: -0.25rem 0 0 0;
left: 0.875rem;
}
+ label {
min-height: 48px;
color: $gray-600;
img {
margin-bottom: 0;
width: 5.5rem;
margin-bottom: 0;
}
input[type="checkbox"],
input[type="radio"] {
+label::before {
content: "";
position: relative;
margin: 0 0.5rem 0 0;
order: 1;
}
&:checked+label::after {
content: "";
margin: -0.25rem 0 0 0;
left: 0.875rem;
}
+label {
min-height: 48px;
color: $gray-600;
img {
margin-bottom: 0;
}
p {
text-align: left;
&.sub-copy {
color: $gray-550;
}
}
}
p {
text-align: left;
&.sub-copy {
color: $gray-550;
}
}
}
}
}
}
</style>
</style>

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

@ -2,15 +2,15 @@
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
<input
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChanged"
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChanged()"
/>
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@ -18,42 +18,55 @@
screenReaderOnlyText
}}</span>
</label>
</div>
</div>
</template>
<script>
import {
toRefs
} from "vue";
import {
useField
} from "vee-validate";
import { toRefs } from "vue";
import { useField } from "vee-validate";
export default {
name: "radio",
props: {
groupName: String,
buttonLabel: String,
buttonID: String,
isRequired: Boolean,
hasError: Boolean,
value: {
type: [String, Number],
default: "",
},
screenReaderOnlyText: String,
name: "radio",
props: {
groupName: String,
buttonLabel: String,
buttonID: String,
isRequired: Boolean,
value: {
type: [String, Number],
default: "",
},
data() {
return {
checkValue: Boolean,
};
},
handleCheckChange(newValue, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
}
screenReaderOnlyText: String,
hasError: Boolean,
},
data() {
return {
checkValue: Boolean,
};
},
created() {
if (this.selectedButtonIDs) {
this.checkValue = this.selectedButtonIDs[0];
}
},
methods: {
handleClick(value) {
this.handleChange(value);
},
handleCheckChanged(newValue, oldValue) {
const isInitialization = typeof oldValue === "function";
if (!isInitialization) {
const emitEvent = {
checkValue: this.checkValue,
value: this.value.toString(),
buttonID: this.buttonID.toString(),
};
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
}
},
},
setup(props) {
const { groupName, value } = toRefs(props);
const { checked, handleChange, errorMessage } = useField(
@ -72,12 +85,13 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.form-check {
.form-check-input {
border: 1px solid $gray-500;
border-radius: 100%;
margin-right: .5rem;
margin-right: 0.5rem;
&:checked {
background-color: $white;
background-size: 71%;
@ -94,4 +108,4 @@ export default {
}
}
}
</style>
</style>