Merge branch 'develop' into feature/CSR-96
This commit is contained in:
Leah Schumann
commit
e6d3f3506e
29 changed files with 754 additions and 446 deletions
|
|
@ -13,6 +13,8 @@ module.exports = {
|
|||
"!src/helpers/unit-test-helper.js",
|
||||
"!src/layouts/component-test/component-test.vue",
|
||||
"!src/layouts/form-test/form-test.vue",
|
||||
"!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
|
||||
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
|
||||
"!src/layouts/address-poc/address-poc.vue",
|
||||
], //! means exclude from coverage.
|
||||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
<fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
||||
<legend class="sr-only">{{groupName}}</legend>
|
||||
<div :class="getComponentWrapperClasses">
|
||||
<component
|
||||
:is="buttonType"
|
||||
v-for="answer in answers"
|
||||
<component
|
||||
:is="buttonType"
|
||||
v-for="answer in answers"
|
||||
:key="answer.Name ? answer.Name : answer"
|
||||
@isCheckedChanged="handleCheckedChanged"
|
||||
:buttonID="answer.Name ? answer.Name : answer"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
:textPosition="textPosition"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:groupName="groupName"
|
||||
:loaderEnabled="loaderEnabled"
|
||||
:selectingInitiatesLoad="selectingInitiatesLoad"
|
||||
:loaderColor="loaderColor"
|
||||
:loaderPosition="loaderPosition"
|
||||
:sizeInRem="sizeInRem"
|
||||
|
|
@ -32,10 +32,14 @@
|
|||
:colLength="this.answers.length < 3 ? '' : '-4'"
|
||||
:selectedButtonIDs="selectedValues"
|
||||
data-test="button"
|
||||
:validationRules="validationRules"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="row mt-2 form-test-error" v-if="!suppressError">
|
||||
<error-message :name="groupName"></error-message>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -43,6 +47,8 @@
|
|||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import { ErrorMessage } from 'vee-validate';
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
|
||||
export default {
|
||||
name: "buttonQuestion",
|
||||
|
|
@ -59,7 +65,7 @@ export default {
|
|||
type: String,
|
||||
default: "text-center",
|
||||
},
|
||||
loaderEnabled: Boolean,
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: {
|
||||
type: String,
|
||||
default: "blue",
|
||||
|
|
@ -76,6 +82,10 @@ export default {
|
|||
isOverflowScrollable: Boolean,
|
||||
isWide: Boolean,
|
||||
modelValue: Array,
|
||||
validationRules: String,
|
||||
name: String,
|
||||
value: String,
|
||||
suppressError: Boolean,
|
||||
},
|
||||
computed: {
|
||||
getFieldSetClasses() {
|
||||
|
|
@ -95,6 +105,9 @@ export default {
|
|||
case 'listCard':
|
||||
classes = 'row justify-content-center g-2'
|
||||
break;
|
||||
case 'radio':
|
||||
classes = 'ui-radio d-flex'
|
||||
break;
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
|
|
@ -115,6 +128,9 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
chooseAnswer(answer) {
|
||||
this.$emit("update:modelValue", answer);
|
||||
},
|
||||
handleCheckedChanged(val) {
|
||||
if(this.isMultiSelect) {
|
||||
// Add or remove item to array of data to emit
|
||||
|
|
@ -122,7 +138,7 @@ export default {
|
|||
val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
|
||||
this.selectedValues = newSelectedValues;
|
||||
} else {
|
||||
this.selectedValues = [val.buttonId]
|
||||
this.selectedValues = [val.buttonId];
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -130,6 +146,8 @@ export default {
|
|||
listButton,
|
||||
listButtonHorizontal,
|
||||
listCard,
|
||||
ErrorMessage,
|
||||
radio,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ describe("funnel-footer.vue", () => {
|
|||
|
||||
it("Should return footer-link class", async () => {
|
||||
// Act
|
||||
|
||||
const r = {
|
||||
test:"testing",
|
||||
clientHeight: 10,
|
||||
|
|
@ -18,43 +17,38 @@ describe("funnel-footer.vue", () => {
|
|||
|
||||
const wrapper = mount(funnelFooter, {
|
||||
});
|
||||
wrapper.vm.initializeComponent(cmsContent);
|
||||
|
||||
// Assert
|
||||
const link = wrapper.find("a");
|
||||
console.log(wrapper.html());
|
||||
|
||||
// Expect
|
||||
expect(link.attributes('class')).toContain("footer");
|
||||
|
||||
});
|
||||
|
||||
it("Should return link text", async () => {
|
||||
it("Should emit ForwardClicked on button click", async () => {
|
||||
// Act
|
||||
const wrapper = mount(funnelFooter, {
|
||||
propsData: {
|
||||
text: "Terms of use",
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.buttonClick();
|
||||
// Assert
|
||||
const link = wrapper.find("a");
|
||||
|
||||
expect(link.text()).toEqual("Terms of use");
|
||||
expect(wrapper.emitted()["ForwardClicked"][0]).toHaveBeenCalled;
|
||||
});
|
||||
|
||||
it("Should return class btn-primary", async () => {
|
||||
it("Should emit BackClicked on link click", async () => {
|
||||
// Act
|
||||
const wrapper = mount(funnelFooter, {
|
||||
propsData: {
|
||||
isPrimary: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.linkClick();
|
||||
// Assert
|
||||
const input = wrapper.find("button");
|
||||
|
||||
// Expect
|
||||
expect(input.attributes("class")).toContain("btn-primary");
|
||||
expect(wrapper.emitted()["BackClicked"][0]).toHaveBeenCalled;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//Mock CMS content
|
||||
const cmsContent = {
|
||||
backLink: "text",
|
||||
buttonText: "text",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,10 +17,24 @@
|
|||
<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
|
||||
<div class="row d-flex flex-row-reverse align-items-center">
|
||||
<div class="col-12 button-col d-flex justify-content-end" id="stacked">
|
||||
<buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
|
||||
<buttonMain
|
||||
isPrimary
|
||||
:buttonText="buttonText"
|
||||
loaderColor="white"
|
||||
sizeInRem="1"
|
||||
:class="isDisabled && 'form-test-invalid'"
|
||||
:aria-disabled="isDisabled"
|
||||
:isDisabled="isDisabled"
|
||||
@click-event="buttonClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 link-col py-1">
|
||||
<textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
|
||||
<textLink
|
||||
linkType="navigation"
|
||||
:text="backLink"
|
||||
@click-event="linkClick"
|
||||
href="javascript:void(0)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,6 +47,9 @@ import buttonMain from "@/ux-components/button-main/button-main";
|
|||
|
||||
export default {
|
||||
name: "funnelFooter",
|
||||
props: {
|
||||
isDisabled: Boolean,
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
buttonMain
|
||||
|
|
@ -62,10 +79,10 @@ export default {
|
|||
this.buttonText = cmsContent.ForwardButtonText;
|
||||
},
|
||||
buttonClick() {
|
||||
this.$emit("forwardClicked");
|
||||
this.$emit("ForwardClicked");
|
||||
},
|
||||
linkClick() {
|
||||
this.$emit("backClicked");
|
||||
this.$emit("BackClicked");
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
h5 {
|
||||
line-height: 32px;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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">Inputs</h4>
|
||||
<h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -15,6 +15,35 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<radio
|
||||
groupName="radio-demo-2"
|
||||
buttonLabel="I'm a radio button!"
|
||||
buttonID="radio-button-a"
|
||||
isRequired
|
||||
value="I'm a radio button!"
|
||||
modelValue="Model Value 1"
|
||||
screenReaderOnlyText="Model Value 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<radio
|
||||
groupName="radio-demo-2"
|
||||
buttonLabel="I'm also a radio button!"
|
||||
buttonID="radio-button-b"
|
||||
isRequired
|
||||
value="I'm also a radio button!"
|
||||
modelValue="Model Value 2"
|
||||
screenReaderOnlyText="Model Value 2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
|
||||
|
|
@ -32,7 +61,7 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonMain buttonText="secondary" loaderColor="white" sizeInRem="1" />
|
||||
<buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -50,14 +79,17 @@
|
|||
<textLink
|
||||
linkType=navigation
|
||||
text="Navigation Link"
|
||||
href="#!"
|
||||
/><br><br>
|
||||
<textLink
|
||||
linkType="text"
|
||||
text="Default Link"
|
||||
href="#!"
|
||||
/><br><br>
|
||||
<textLink
|
||||
linkType=textSmall
|
||||
text="Small Link"
|
||||
href="#!"
|
||||
/><br><br>
|
||||
<textLink
|
||||
linkType=footer
|
||||
|
|
@ -926,6 +958,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
|||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import checkbox from "@/ux-components/checkbox/checkbox";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
export default {
|
||||
name: "App",
|
||||
|
|
@ -938,6 +971,7 @@ export default {
|
|||
vehicleBanner,
|
||||
listButtonHorizontal,
|
||||
checkbox,
|
||||
radio,
|
||||
funnelHeader,
|
||||
textLink
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,367 +1,165 @@
|
|||
<template>
|
||||
<Form
|
||||
:validation-schema="schema"
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit"
|
||||
v-slot="{ values, meta }"
|
||||
class="w-50"
|
||||
>
|
||||
<div class="row g-2 mt-6 mx-4">
|
||||
<h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
|
||||
<p class="mx-2">
|
||||
NOTE: This page is testing functionality only; styling will not match
|
||||
Figma mocks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mt-6 mx-4">
|
||||
<h4 class="mx-2 mt-4 mb-0">
|
||||
How many chips are we repairing? (Required)
|
||||
</h4>
|
||||
<fieldset>
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-group"
|
||||
class="d-flex flex-row p-0"
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<Form
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit"
|
||||
ref="theForm"
|
||||
v-slot="{ values, meta, errors }"
|
||||
>
|
||||
<h4 class="sr-only" id="demo-group">
|
||||
How many chips are we repairing?
|
||||
</h4>
|
||||
<listButtonHorizontal
|
||||
groupName="demo"
|
||||
aria-required="true"
|
||||
buttonID="1"
|
||||
buttonLabel="1"
|
||||
value="1"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
sizeInRem="1"
|
||||
:totalInGroup="3"
|
||||
:positionInGroup="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
groupName="demo"
|
||||
aria-required="true"
|
||||
buttonID="2"
|
||||
buttonLabel="2"
|
||||
value="2"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
sizeInRem="1"
|
||||
:totalInGroup="3"
|
||||
:positionInGroup="2"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
groupName="demo"
|
||||
aria-required="true"
|
||||
buttonID="3"
|
||||
buttonLabel="3"
|
||||
value="3"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
sizeInRem="1"
|
||||
:totalInGroup="3"
|
||||
:positionInGroup="3"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="row px-3 form-test-error">
|
||||
<error-message name="demo"></error-message>
|
||||
</div>
|
||||
</div>
|
||||
<damageLocationQuestion
|
||||
ref="damageLocation"
|
||||
v-model="selectedDamageLocations"
|
||||
groupName="DamageLocationQuestion"
|
||||
/>
|
||||
<windshieldOptions
|
||||
ref="windshieldOptions"
|
||||
:showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
|
||||
:suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
|
||||
/>
|
||||
<alert
|
||||
class="my-3"
|
||||
v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="You'll need to schedule separate appointments"
|
||||
alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians."
|
||||
:isDismissible="false"
|
||||
/>
|
||||
<replaceOptionsQuestion
|
||||
ref="driverSideOptions"
|
||||
isAvailable
|
||||
v-model="driverSideOptionsData"
|
||||
groupName="DriverSideReplaceOptionsQuestion"
|
||||
/>
|
||||
<funnel-footer
|
||||
ref="funnelFooter"
|
||||
:isDisabled="!meta.valid"
|
||||
/>
|
||||
|
||||
<div class="row g-2 mt-6 mx-4">
|
||||
<div class="col">
|
||||
<h4 class="mx-2 mt-4 mb-0">
|
||||
Which windshield part needs fixed? (Required)
|
||||
</h4>
|
||||
<fieldset>
|
||||
<legend class="sr-only">Which windshield part needs fixed?</legend>
|
||||
<listButton
|
||||
isMultiSelect
|
||||
buttonID="Single Windshield"
|
||||
buttonLabel="Single Windshield"
|
||||
value="Single Windshield"
|
||||
groupName="demo2"
|
||||
/>
|
||||
<listButton
|
||||
isMultiSelect
|
||||
buttonID="Driver Side"
|
||||
buttonLabel="Driver Side"
|
||||
value="Driver Side"
|
||||
groupName="demo2"
|
||||
/>
|
||||
<listButton
|
||||
isMultiSelect
|
||||
buttonID="Passenger Side"
|
||||
buttonLabel="Passenger Side"
|
||||
value="Passenger Side"
|
||||
groupName="demo2"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="row px-3 form-test-error">
|
||||
<error-message name="demo2"></error-message>
|
||||
</div>
|
||||
</div>
|
||||
<!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION -->
|
||||
<div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
|
||||
<p>Current Form, values:</p>
|
||||
<pre>{{ values }}</pre>
|
||||
<p>Errors:</p>
|
||||
<pre>{{ errors }}</pre>
|
||||
<p>Is Form Valid? (Meta.valid):</p>
|
||||
<pre>{{ meta.valid }}</pre>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mt-6 mx-4">
|
||||
<div class="col">
|
||||
<h4 class="mx-2 mt-4 mb-0">demo3: Enter your VIN (Required)</h4>
|
||||
<textInput
|
||||
name="demo3"
|
||||
type="text"
|
||||
label="VIN (Required)"
|
||||
:isRequired="true"
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<!-- <div class="row g-2 mt-6 mx-4">
|
||||
<div class="col">
|
||||
<h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
|
||||
<textInput
|
||||
name="demo4"
|
||||
type="text"
|
||||
label="Numbers Only"
|
||||
:isRequired="true"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="row g-2 mt-6 mx-4">
|
||||
<h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
|
||||
<div aria-labelledby="demo5-group" class="d-flex flex-row p-0">
|
||||
<h4 class="sr-only" id="demo5-group">Where's your damage?</h4>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Windshield"
|
||||
value="Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox a"
|
||||
groupName="demo5"
|
||||
/>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="side-window-damage-left-all.svg"
|
||||
buttonLabel="Side Door"
|
||||
value="Side Door"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox b"
|
||||
groupName="demo5"
|
||||
/>
|
||||
<listCard
|
||||
isMultiSelect
|
||||
buttonImage="back-glass-damage.svg"
|
||||
buttonLabel="Rear Window"
|
||||
value="Rear Window"
|
||||
altText=""
|
||||
buttonID="List Card Checkbox c"
|
||||
groupName="demo5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row px-3 form-test-error">
|
||||
<error-message name="demo5"></error-message>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mt-6 mx-4">
|
||||
<h4 class="mx-2 mt-4 mb-0">
|
||||
demo6: What's your windshield damage? (Required if demo5 "Windshield" is
|
||||
selected)
|
||||
</h4>
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo6-group"
|
||||
class="d-flex flex-row p-0"
|
||||
>
|
||||
<h4 class="sr-only" id="demo6-group">What's your windshield damage?</h4>
|
||||
<listCard
|
||||
isRadio
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Crack"
|
||||
value="Crack"
|
||||
buttonLabelSubCopy="My damage is larger than six inches."
|
||||
altText=""
|
||||
buttonID="Crack Checkbox a"
|
||||
groupName="demo6"
|
||||
/>
|
||||
<listCard
|
||||
isRadio
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Chip(s)"
|
||||
value="Chip"
|
||||
buttonLabelSubCopy="I have three or fewer chips smaller than six inches."
|
||||
altText=""
|
||||
buttonID="Chip Checkbox b"
|
||||
groupName="demo6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row px-3 form-test-error">
|
||||
<error-message name="demo6"></error-message>
|
||||
</div>
|
||||
|
||||
<!-- <div class="row g-2 mt-6 mx-4">
|
||||
<div class="col">
|
||||
<h4 class="mx-2 mt-4 mb-0">Password (Required, enter any string)</h4>
|
||||
<textInput
|
||||
name="password"
|
||||
type="text"
|
||||
label="Password (Required)"
|
||||
:isRequired="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mt-6 mx-4">
|
||||
<div class="col">
|
||||
<h4 class="mx-2 mt-4 mb-0">Confirm Password (Required, must match above Password field)</h4>
|
||||
<textInput
|
||||
name="passwordConfirmation"
|
||||
type="text"
|
||||
label="Confirm Password (Required)"
|
||||
:isRequired="true"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="row px-3 form-test-error" data-focus-target="demoX">
|
||||
<error-message name="demoX"></error-message>
|
||||
</div>
|
||||
|
||||
<div class="g-2 mt-6 mx-4">
|
||||
<button class="mb-6" :class="!meta.valid && 'form-test-invalid'">
|
||||
Get your estimate
|
||||
</button>
|
||||
<p>Current Form Values:</p>
|
||||
<pre>{{ values }}</pre>
|
||||
<p>Is Form Valid? (Meta.valid):</p>
|
||||
<pre>{{ meta.valid }}</pre>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, ErrorMessage } from "vee-validate";
|
||||
import * as Yup from "yup";
|
||||
// Components
|
||||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
||||
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
|
||||
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
|
||||
import { Form } from 'vee-validate';
|
||||
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import store from "@/store";
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import textInput from "@/common-components/text-input/text-input";
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
const errorMessages = {
|
||||
demo: "Please select chip(s)",
|
||||
demo2: "Please select a windshield part",
|
||||
demo3:
|
||||
"You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.",
|
||||
demo4: "Invalid Entry. Must enter only numbers, no letters.",
|
||||
demo5: "Please select damage location",
|
||||
};
|
||||
name: "form-test",
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage('vehicle-damage');
|
||||
const damageOptionsPromise =
|
||||
baseMixin.methods.dispatchNonBlockingStoreAction(
|
||||
storeActions.GET_DAMAGE_OPTIONS,
|
||||
{ carId: store.getters.vehicle.carId }
|
||||
);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "damageOptions",
|
||||
promise: damageOptionsPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.$refs.funnelHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelHeaderWidget
|
||||
);
|
||||
vm.$refs.vehicleBanner.initializeComponent(
|
||||
resultMap.cmsContent.VehicleBannerWidget
|
||||
);
|
||||
vm.$refs.funnelSubHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelSubHeaderWidget
|
||||
);
|
||||
vm.$refs.driverSideOptions.initializeComponent(
|
||||
resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
|
||||
);
|
||||
vm.$refs.damageLocation.initializeComponent(
|
||||
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
|
||||
);
|
||||
vm.$refs.funnelFooter.initializeComponent(
|
||||
resultMap.cmsContent.FunnelFooterWidget
|
||||
);
|
||||
});
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
schema: Yup.object()
|
||||
.shape({
|
||||
demo: Yup.string().required(errorMessages.demo),
|
||||
demo2: Yup.array()
|
||||
.required(errorMessages.demo2)
|
||||
.min(1, errorMessages.demo2),
|
||||
demo3: Yup.string()
|
||||
.uppercase()
|
||||
.required("Please enter a VIN.")
|
||||
.min(17, errorMessages.demo3)
|
||||
.max(17, errorMessages.demo3)
|
||||
.matches("^[^IOQ]+$", errorMessages.demo3),
|
||||
// demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
|
||||
demo5: Yup.array()
|
||||
.required(errorMessages.demo5)
|
||||
.min(1, errorMessages.demo5),
|
||||
demo6: Yup.string().when("demo5", function (demo5, schema, value) {
|
||||
if (demo5) {
|
||||
const demo5String = demo5.toString();
|
||||
if (demo5String.includes("Windshield")) {
|
||||
// make demo6 required
|
||||
return schema.required(
|
||||
"You must pick an option for Windshield Damage."
|
||||
);
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
return schema;
|
||||
}),
|
||||
demoX: Yup.string().notRequired(),
|
||||
// PASSWORD EXAMPLE, NOT BEING USED NOW
|
||||
// password: Yup.string().min(6).required(),
|
||||
// passwordConfirmation: Yup.string()
|
||||
// .required()
|
||||
// .oneOf([Yup.ref("password")], "Passwords do not match"),
|
||||
})
|
||||
.test(
|
||||
"repair-replace-conflict",
|
||||
null, // need to pass null as error message so it won't get added to list of errors
|
||||
function (value) {
|
||||
// whole form test
|
||||
console.log("ALL FORM VALUES: ", value);
|
||||
|
||||
// test problem scenario... return new error if conditions are true, allow submit if not
|
||||
if (value.demo5 && value.demo6) {
|
||||
const demo5String = value.demo5.toString();
|
||||
console.log("demo5String: ", demo5String);
|
||||
console.log("demo6: ", value.demo6);
|
||||
|
||||
if (
|
||||
demo5String.includes("Windshield") &&
|
||||
value.demo5.length > 1 &&
|
||||
value.demo6 == "Chip"
|
||||
) {
|
||||
return this.createError({
|
||||
name: "demoX",
|
||||
message:
|
||||
"Sorry, at this time we can't schedule a repair and replace at the same time. Please schedule these appointments separately as they are different technicians. Thanks.",
|
||||
path: "demoX",
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
),
|
||||
};
|
||||
selectedDamageLocations: [],
|
||||
driverSideOptionsData: [],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
listCard,
|
||||
listButton,
|
||||
listButtonHorizontal,
|
||||
textInput,
|
||||
Form,
|
||||
ErrorMessage,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
damageLocationQuestion,
|
||||
replaceOptionsQuestion,
|
||||
funnelFooter,
|
||||
windshieldOptions,
|
||||
alert,
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return store.getters.vehicle.carId !== null;
|
||||
},
|
||||
resetDependentState() {
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
|
||||
},
|
||||
onSubmit(values) {
|
||||
window.alert(
|
||||
"Success! Submitted values: " + JSON.stringify(values, null, 2)
|
||||
);
|
||||
console.log("submitted: ", JSON.stringify(values, null, 2));
|
||||
window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
|
||||
console.log('submitted: ', JSON.stringify(values, null ,2));
|
||||
},
|
||||
onInvalidSubmit({ values, errors, results }) {
|
||||
// identify the first error field and put focus on it
|
||||
console.log("values: ", values);
|
||||
console.log("errors: ", errors);
|
||||
console.log("results: ", results);
|
||||
// get errorEls and order by alpha
|
||||
const errorEls = Object.keys(errors).sort();
|
||||
const firstErrorEl = errorEls[0];
|
||||
console.log("firstErrorEl: ", firstErrorEl);
|
||||
// get error names array
|
||||
const errorNames = errors ? Object.keys(errors) : [];
|
||||
const firstErrorEl = errorNames[0];
|
||||
if (firstErrorEl) {
|
||||
console.log('firstErrorEl: ', firstErrorEl);
|
||||
const qsString = "[data-focus-target='" + firstErrorEl + "']";
|
||||
document.querySelector(qsString).focus();
|
||||
}
|
||||
|
|
@ -369,13 +167,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form-test-error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-test-invalid {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
|
|||
damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
|
||||
|
||||
//Assert
|
||||
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' }, {Name: "car-RearWindow"} ])
|
||||
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="replace-options-question">
|
||||
<div class="damage-location-question">
|
||||
<buttonQuestion
|
||||
v-if="answersToDisplay.length > 1"
|
||||
:questionText="questionText"
|
||||
|
|
@ -8,13 +8,24 @@
|
|||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
v-model="selectedValues"
|
||||
validationRules="damage-location-required"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import store from "@/store";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("damage-location-required", (value) => {
|
||||
if (!value || value.length < 1) {
|
||||
return "Please select damage location";
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
export default ({
|
||||
name: "damageLocationQuestion",
|
||||
|
|
@ -25,8 +36,12 @@ export default ({
|
|||
damageOptions: Object,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
modelValue: Array,
|
||||
isAvailable: Boolean,
|
||||
filterByVehicleCategory: Boolean,
|
||||
name: String,
|
||||
groupName: String,
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -34,7 +49,7 @@ export default ({
|
|||
this.questionText = cmsContent.QuestionText;
|
||||
this.answersFromCms = cmsContent.Answers;
|
||||
this.damageOptions = damageOptions;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selectedValues: {
|
||||
|
|
@ -48,12 +63,12 @@ export default ({
|
|||
damageOptionsMap(){
|
||||
return {
|
||||
Windshield: true,
|
||||
SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
|
||||
RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
|
||||
SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions.length || this.damageOptions.passengerSideOptions.availableReplacementOptions.length,
|
||||
RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions.length,
|
||||
}
|
||||
},
|
||||
answersToDisplay(){
|
||||
return Array.isArray(this.answersFromCms)
|
||||
return Array.isArray(this.answersFromCms)
|
||||
? this.answersFromCms.filter(ans =>
|
||||
{
|
||||
const name = ans.Name.split('-');
|
||||
|
|
@ -64,6 +79,6 @@ export default ({
|
|||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
v-model="selectedValues"
|
||||
validationRules="replace-options-required"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -17,6 +18,15 @@
|
|||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import store from "@/store";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("replace-options-required", (value) => {
|
||||
if (!value || value.length < 1) {
|
||||
return "Please select window";
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
export default ({
|
||||
name: "replaceOptionsQuestion",
|
||||
|
|
@ -38,7 +48,7 @@ export default ({
|
|||
this.questionText = cmsContent.QuestionText;
|
||||
this.answersFromCms = cmsContent.Answers;
|
||||
this.replaceOptions = replaceOptions;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selectedValues: {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
|
||||
<replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
|
||||
<funnelFooter ref="funnelFooter" />
|
||||
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,8 +15,9 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
|||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
||||
import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
|
||||
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
||||
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -86,6 +87,13 @@ export default {
|
|||
// Invokes
|
||||
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
|
||||
},
|
||||
backButtonAction() {
|
||||
// route to move backwards
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_BACK,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="windshield-damage-type-question">
|
||||
<buttonQuestion
|
||||
v-if="isAvailable && answersToDisplay.length > 1"
|
||||
:questionText="questionText"
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
v-model="selectedValues"
|
||||
validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
|
||||
:suppressError="suppressError"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import store from "@/store";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("windshield-damage-required", (value) => {
|
||||
if (!value || value.length < 1) {
|
||||
return "Please select windshield damage";
|
||||
}
|
||||
return true;
|
||||
});
|
||||
defineRule("checkForRepairAndReplace", (value, [other]) => {
|
||||
if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
|
||||
return "checkForRepairAndReplace error"
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
export default ({
|
||||
name: "windshieldDamageTypeQuestion",
|
||||
data(){
|
||||
return {
|
||||
questionText: String,
|
||||
answersFromCms: Array,
|
||||
damageOptions: Object,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
modelValue: Array,
|
||||
isAvailable: Boolean,
|
||||
name: String,
|
||||
groupName: String,
|
||||
suppressError: Boolean,
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent, damageOptions){
|
||||
this.questionText = cmsContent.QuestionText;
|
||||
this.answersFromCms = cmsContent.Answers;
|
||||
this.damageOptions = damageOptions;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selectedValues: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
damageOptionsMap(){
|
||||
return {
|
||||
Windshield: true,
|
||||
SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
|
||||
RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
|
||||
}
|
||||
},
|
||||
answersToDisplay(){
|
||||
// HARD CODED MOCK DATA FOR NOW
|
||||
return [
|
||||
{
|
||||
"Name": "Windshield-Crack",
|
||||
"Text": "Crack",
|
||||
"SubText": "My damage is larger than six inches.",
|
||||
"ImageId": "2cf13fbb-22d8-4b61-bd3d-3d413ea58c87",
|
||||
"AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-replace-desktop-ds.png"
|
||||
},
|
||||
{
|
||||
"Name": "Windshield-Chip",
|
||||
"Text": "Chip(s)",
|
||||
"SubText": "I have three or fewer chips smaller than six inches.",
|
||||
"ImageId": "faaa14d9-3650-4949-a687-7665962337b8",
|
||||
"AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-repair-desktop-ds.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="windshield-options">
|
||||
<windshieldDamageTypeQuestion
|
||||
ref="windshieldDamageType"
|
||||
v-model="selectedWindshieldDamageTypes"
|
||||
groupName="windshieldDamageTypeQuestion"
|
||||
:isAvailable="showWindshieldDamageTypeQuestion"
|
||||
:suppressError="suppressError"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question";
|
||||
|
||||
export default ({
|
||||
name: "windshieldOptions",
|
||||
props: {
|
||||
showWindshieldDamageTypeQuestion: Boolean,
|
||||
suppressError: Boolean,
|
||||
},
|
||||
components: {
|
||||
windshieldDamageTypeQuestion,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
<buttonQuestion
|
||||
class="radioQuestion"
|
||||
isOverflowScrollable
|
||||
selectingInitiatesLoad
|
||||
:questionText="questionText"
|
||||
:answers="makes"
|
||||
groupName="Choose Vehicle Make"
|
||||
textPosition="text-start"
|
||||
:loaderEnabled="true"
|
||||
v-model="selectedValueAsArray"
|
||||
isRequired=true
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<buttonQuestion
|
||||
class="radioQuestion"
|
||||
isOverflowScrollable
|
||||
selectingInitiatesLoad
|
||||
:questionText="questionText"
|
||||
:answers="models"
|
||||
groupName="Choose Vehicle Model"
|
||||
textPosition="text-start"
|
||||
:loaderEnabled="true"
|
||||
v-model="selectedValueAsArray"
|
||||
isRequired=true
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<buttonQuestion
|
||||
class="radioQuestion"
|
||||
isOverflowScrollable
|
||||
selectingInitiatesLoad
|
||||
:questionText="questionText"
|
||||
:answers="styles"
|
||||
groupName="Choose Vehicle Style"
|
||||
textPosition="text-start"
|
||||
:loaderEnabled="true"
|
||||
v-model="selectedValueAsArray"
|
||||
isRequired=true
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<buttonQuestion
|
||||
class="radioQuestion"
|
||||
isOverflowScrollable
|
||||
selectingInitiatesLoad
|
||||
:questionText="questionText"
|
||||
:answers="years"
|
||||
groupName="Choose Vehicle Year"
|
||||
textPosition="text-start"
|
||||
:loaderEnabled="true"
|
||||
v-model="selectedValueAsArray"
|
||||
isRequired=true
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,15 @@ const routingTable = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export { routingTable };
|
||||
|
|
|
|||
|
|
@ -1,10 +1,46 @@
|
|||
.has-error {
|
||||
.list-button,
|
||||
.list-card,
|
||||
.list-button-horizontal {
|
||||
&.list-button,
|
||||
&.list-card {
|
||||
border: 1px solid transparent;
|
||||
color: $red;
|
||||
label {
|
||||
border: 1px solid $red;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
input[type=checkbox]:focus + label,
|
||||
input[type=radio]:focus + label,
|
||||
input[type=checkbox]:checked + label,
|
||||
input[type=radio]:checked + label {
|
||||
box-shadow: 0 0 0 2.5px transparent !important;
|
||||
}
|
||||
&.list-button-horizontal {
|
||||
color: $red;
|
||||
label {
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-test-error {
|
||||
color: $red;
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-test-invalid {
|
||||
&.btn.btn-primary {
|
||||
color: $gray;
|
||||
background: $gray-200;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
&.btn.btn-primary:hover,
|
||||
&.btn.btn-primary:focus,
|
||||
&.btn.btn-primary:focus-visible {
|
||||
color: $gray;
|
||||
background: $gray-200;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-2" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
|
||||
<button
|
||||
:aria-disabled="isDisabled"
|
||||
class="btn d-flex align-items-center py-3 px-4 delay"
|
||||
:class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
|
||||
@click="clicked()"
|
||||
>
|
||||
<span class="m-0">{{ this.buttonText }}</span>
|
||||
<loader
|
||||
class="ms-2"
|
||||
|
|
@ -21,7 +26,7 @@ export default {
|
|||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number, String],
|
||||
isFloat: Boolean
|
||||
isFloat: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -30,8 +35,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
clicked() {
|
||||
this.isLoaderDisplayed = true;
|
||||
this.$emit("click-event");
|
||||
if (!this.isDisabled) {
|
||||
this.isLoaderDisplayed = true;
|
||||
this.$emit("click-event");
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
@ -44,12 +51,10 @@ export default {
|
|||
.btn {
|
||||
&.btn-primary {
|
||||
position: relative;
|
||||
background: $blue-700;
|
||||
@include blue-gradient;
|
||||
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
color: $white;
|
||||
transition: all 150ms linear;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
|
|
@ -64,19 +69,32 @@ export default {
|
|||
outline: none;
|
||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
||||
color: $white;
|
||||
@include blue-gradient;
|
||||
}
|
||||
&:disabled {
|
||||
background: $gray-100 !important;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
$gray-100 0%,
|
||||
$gray-100 100%
|
||||
rgba(6, 87, 124, 1) 0%,
|
||||
rgba(6, 87, 124, 1) 100%
|
||||
);
|
||||
}
|
||||
&:disabled {
|
||||
background: $gray-200 !important;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
$gray-200 0%,
|
||||
$gray-200 100%
|
||||
) !important;
|
||||
color: $gray !important;
|
||||
color: $gray-550 !important;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
&.has-loader {
|
||||
color: $white;
|
||||
background: $blue-700;
|
||||
}
|
||||
&.delay {// fixes flicker while transitioning between states
|
||||
transition: background 0s 0s ease-in-out;
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
|
|
@ -105,6 +123,13 @@ export default {
|
|||
border: 1px solid $gray-300;
|
||||
border-radius: $border-radius-lg;
|
||||
}
|
||||
&.has-loader {
|
||||
color: $white;
|
||||
@include blue-gradient;
|
||||
}
|
||||
&.delay {// fixes flicker while transitioning between states
|
||||
transition: background 0s 0s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,12 +44,15 @@ export default {
|
|||
+ label {
|
||||
display: block;
|
||||
position: relative;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: white;
|
||||
|
|
@ -71,7 +74,7 @@ export default {
|
|||
transform: rotate(-45deg);
|
||||
}
|
||||
&:hover + label::before {
|
||||
box-shadow: 0 0 0 4px $blue-100;
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
&:focus + label::before {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ describe("list-button-horizontal.vue", () => {
|
|||
// Act
|
||||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
loaderEnabled: true,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -99,6 +99,7 @@ describe("list-button-horizontal.vue", () => {
|
|||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
|
@ -113,7 +114,7 @@ describe("list-button-horizontal.vue", () => {
|
|||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
loaderEnabled: true,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -121,6 +122,7 @@ describe("list-button-horizontal.vue", () => {
|
|||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
|
@ -135,7 +137,7 @@ describe("list-button-horizontal.vue", () => {
|
|||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -143,6 +145,7 @@ describe("list-button-horizontal.vue", () => {
|
|||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
|
@ -157,7 +160,7 @@ describe("list-button-horizontal.vue", () => {
|
|||
const wrapper = shallowMount(listButtonHorizontal, {
|
||||
propsData: {
|
||||
sizeInRem: 1,
|
||||
loaderEnabled: true,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -165,6 +168,7 @@ describe("list-button-horizontal.vue", () => {
|
|||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
v-model="checkValue"
|
||||
@change="handleCheckChange"
|
||||
@change="!selectingInitiatesLoad ? handleCheckChange : ''"
|
||||
/>
|
||||
<label
|
||||
tabindex="-1"
|
||||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
buttonLabelSubCopy: String,
|
||||
screenReaderOnlyText: String,
|
||||
textPosition: String,
|
||||
loaderEnabled: Boolean,
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number, String],
|
||||
|
|
@ -88,8 +88,9 @@ export default {
|
|||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
handleClick(value) {
|
||||
if (this.loaderEnabled) {
|
||||
if(this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
this.handleCheckChange();
|
||||
}
|
||||
this.handleChange(value);
|
||||
},
|
||||
|
|
@ -165,6 +166,7 @@ export default {
|
|||
label {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ describe("list-button.vue", () => {
|
|||
// Act
|
||||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
loaderEnabled: true,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -99,6 +99,7 @@ describe("list-button.vue", () => {
|
|||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
|
@ -113,16 +114,15 @@ describe("list-button.vue", () => {
|
|||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
loaderEnabled: true,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
||||
const loader = wrapper.find("loader-stub");
|
||||
|
|
@ -135,7 +135,7 @@ describe("list-button.vue", () => {
|
|||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -143,6 +143,7 @@ describe("list-button.vue", () => {
|
|||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
|
@ -157,7 +158,7 @@ describe("list-button.vue", () => {
|
|||
const wrapper = shallowMount(listButton, {
|
||||
propsData: {
|
||||
sizeInRem: 1,
|
||||
loaderEnabled: true,
|
||||
selectingInitiatesLoad: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -165,6 +166,7 @@ describe("list-button.vue", () => {
|
|||
|
||||
const label = wrapper.find("label");
|
||||
|
||||
wrapper.vm.handleCheckChange = jest.fn();
|
||||
wrapper.vm.handleClick();
|
||||
|
||||
await nextTick();
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
v-model="checkValue"
|
||||
@change="handleCheckChange"
|
||||
@change="!selectingInitiatesLoad ? handleCheckChange : ''"
|
||||
>
|
||||
<label
|
||||
tabindex="-1"
|
||||
|
|
@ -63,7 +63,7 @@ export default {
|
|||
textPosition: String,
|
||||
buttonLabelSubCopy: String,
|
||||
screenReaderOnlyText: String,
|
||||
loaderEnabled: Boolean,
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number,String],
|
||||
|
|
@ -90,8 +90,9 @@ export default {
|
|||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
handleClick(value) {
|
||||
if (this.loaderEnabled) {
|
||||
if(this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
this.handleCheckChange();
|
||||
}
|
||||
this.handleChange(value);
|
||||
},
|
||||
|
|
@ -100,7 +101,7 @@ export default {
|
|||
if (!isInitialization) {
|
||||
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div :class="'col' + colLength">
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100"
|
||||
:class="isWide ? 'horizontal' : ''"
|
||||
@mouseup="handleChange(value)"
|
||||
@keyup.space="handleChange(value)">
|
||||
<div
|
||||
class="list-card w-100 rounded-3 d-flex align-items-center h-100"
|
||||
:class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
|
||||
>
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
|
|
@ -11,9 +11,10 @@
|
|||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
@click="handleChange(value)"
|
||||
v-model="checkValue"
|
||||
@change="handleCheckChange"
|
||||
/>
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
class="d-flex w-100 align-items-center px-2 h-100"
|
||||
|
|
@ -24,7 +25,7 @@
|
|||
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
|
||||
:src="buttonImage"
|
||||
:alt="altText"
|
||||
/>
|
||||
/>
|
||||
<p
|
||||
v-if="!isWide"
|
||||
class="small order-3"
|
||||
|
|
@ -47,7 +48,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs } from "vue";
|
||||
import { useField } from "vee-validate";
|
||||
|
||||
export default {
|
||||
|
|
@ -71,6 +71,7 @@ export default {
|
|||
default: "",
|
||||
},
|
||||
colLength: String,
|
||||
validationRules: String,
|
||||
selectedButtonIDs: [Array, String],
|
||||
},
|
||||
data(){
|
||||
|
|
@ -105,15 +106,20 @@ export default {
|
|||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { groupName, value } = toRefs(props);
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
const { checked, handleChange } = useField(groupName, undefined, {
|
||||
|
||||
const {
|
||||
value: inputValue,
|
||||
handleChange,
|
||||
errors,
|
||||
} = useField(props.groupName, props.validationRules,
|
||||
{
|
||||
type: inputType,
|
||||
checkedValue: value,
|
||||
checkedValue: props.value,
|
||||
});
|
||||
return {
|
||||
checked,
|
||||
handleChange,
|
||||
errors,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
@ -149,6 +155,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: center;
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
|
|
@ -164,6 +171,14 @@ export default {
|
|||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:checked + label {
|
||||
p {
|
||||
color: $black;
|
||||
}
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
|
|||
63
src/ux-components/radio/radio.spec.js
Normal file
63
src/ux-components/radio/radio.spec.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import radio from "./radio";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
describe("radio.vue", () => {
|
||||
it("Should return group name", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(radio, {
|
||||
propsData: {
|
||||
groupName: "radio-button-test",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
// Expect
|
||||
expect(input.attributes().name).toEqual("radio-button-test");
|
||||
});
|
||||
|
||||
it("Should return checkbox id", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(radio, {
|
||||
propsData: {
|
||||
buttonID: "Radio ID",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
// Expect
|
||||
expect(input.attributes().id).toEqual("Radio ID");
|
||||
});
|
||||
|
||||
it("Should return label text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(radio, {
|
||||
propsData: {
|
||||
buttonLabel: "label text",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("p");
|
||||
|
||||
expect(paragraph.text()).toEqual("label text");
|
||||
});
|
||||
|
||||
it("Should return label text", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(radio, {
|
||||
propsData: {
|
||||
screenReaderOnlyText: "screenreader text",
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
const paragraph = wrapper.find("span");
|
||||
|
||||
expect(paragraph.text()).toEqual("screenreader text");
|
||||
});
|
||||
});
|
||||
138
src/ux-components/radio/radio.vue
Normal file
138
src/ux-components/radio/radio.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
|
||||
<div class="ui-radio d-flex">
|
||||
<input
|
||||
type="radio"
|
||||
aria-checked="false"
|
||||
:name="groupName"
|
||||
:id="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:v-model="checkValue"
|
||||
@change="handleCheckChanged"
|
||||
/>
|
||||
<label class="d-flex align-items-center" :for="buttonID">
|
||||
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{
|
||||
screenReaderOnlyText
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs } from "vue";
|
||||
import { useField } from "vee-validate";
|
||||
export default {
|
||||
name: "radio",
|
||||
props: {
|
||||
groupName: String,
|
||||
buttonLabel: String,
|
||||
buttonID: String,
|
||||
isRequired: Boolean,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
screenReaderOnlyText: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkValue: Boolean,
|
||||
};
|
||||
},
|
||||
created(){
|
||||
if(this.selectedButtonIDs){
|
||||
this.checkValue = this.selectedButtonIDs[0];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(value) {
|
||||
this.handleChange(value);
|
||||
},
|
||||
handleCheckChange(newValue, oldValue){
|
||||
const isInitialization = typeof(oldValue) === 'function';
|
||||
if (!isInitialization) {
|
||||
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { groupName, value } = toRefs(props);
|
||||
const { checked, handleChange, errorMessage } = useField(
|
||||
groupName,
|
||||
undefined,
|
||||
{
|
||||
type: "radio",
|
||||
checkedValue: value,
|
||||
}
|
||||
);
|
||||
return {
|
||||
checked,
|
||||
handleChange,
|
||||
errorMessage,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ui-radio {
|
||||
position: relative;
|
||||
input[type="radio"] {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
+ label {
|
||||
display: block;
|
||||
position: relative;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:checked + label::before {
|
||||
background: $white;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
&:checked + label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 3px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
transform: rotate(-45deg);
|
||||
border: 5px solid $blue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover + label::before {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
&:focus + label::before {
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
&:focus:checked + label::before {
|
||||
box-shadow: 0 0 0 2px transparent;
|
||||
}
|
||||
&:disabled + label {
|
||||
color: $gray-200;
|
||||
}
|
||||
&:disabled + label::before {
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,11 +13,10 @@ export default {
|
|||
text: String,
|
||||
href: {
|
||||
type: String,
|
||||
default: `javascript:void(0)`, //Prevents page jump when value is empty or #
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
handleClick(event) {
|
||||
this.$emit("click-event");
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue