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

CSR-222: refactor with emit for click event

Browse source
This commit is contained in:
Adam Caouette 2022-01-05 16:55:10 -05:00
parent 86191a16fe
commit 96a5cdf46e
8 changed files with 73 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/common-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -6,10 +6,10 @@
{{ text }}
</span>
<buttonBack
v-if="hasBackButton"
:backButtonAction="backButtonAction"
:backButtonAccessibleText="backButtonAccessibleText"
/>
v-if="hasBackButton"
:backButtonAccessibleText="backButtonAccessibleText"
@click-event="clickEvent"
/>
</h5>
</div>
</div>
@ -24,11 +24,15 @@ export default {
text: String,
hasBackButton: Boolean,
backButtonAccessibleText: String,
backButtonAction: Function,
},
components: {
buttonBack,
}
},
methods: {
clickEvent() {
this.$emit('click-event');
}
},
};
</script>

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

@ -8,8 +8,8 @@
:text="funnelSubHeaderWidget.HeaderText"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Year"
:backButtonAction="backButtonAction"
class="Header"
@click-event="backButtonAction"
class="Header"
/>
<makeQuestion v-model="selectedMake" ref="makeQuestion" />
</div>
@ -67,7 +67,7 @@ export default {
},
methods: {
backButtonAction: function () {
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}

4
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -8,7 +8,7 @@
:text="funnelSubHeaderWidget.HeaderText"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Make"
:backButtonAction="backButtonAction"
@click-event="backButtonAction"
class="Header"
/>
<modelQuestion v-model="selectedModel" ref="modelQuestion" />
@ -67,7 +67,7 @@ export default {
},
methods: {
backButtonAction: function () {
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}

4
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -8,7 +8,7 @@
:text="funnelSubHeaderWidget.HeaderText"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Model"
:backButtonAction="backButtonAction"
@click-event="backButtonAction"
class="Header"
/>
<styleQuestion v-model="selectedStyle" ref="styleQuestion" />
@ -67,7 +67,7 @@ export default {
},
methods: {
backButtonAction: function () {
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}

12
src/ux-components/button-back/button-back.vue
View file

@ -1,7 +1,6 @@
<template>
<button
v-if="backButtonAction"
@click="backButtonAction"
@click="handleClick"
class="back-button-wrapper p-3"
:aria-label="backButtonAccessibleText"
>
@ -20,12 +19,13 @@ export default {
type: String,
required: true,
default: "",
},
backButtonAction: {
type: Function,
default: null,
}
},
methods: {
handleClick() {
this.$emit('click-event');
}
}
};
</script>

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

@ -10,6 +10,7 @@ describe("list-button.vue", () => {
groupName: "TestGroup",
loaderColor: "blue",
loaderPosition: "right",
loaderEnabled: "true",
sizeInRem: "1.5",
errorMessage: "null",
},
@ -20,7 +21,7 @@ describe("list-button.vue", () => {
const label = wrapper.find("label");
const paragraph = wrapper.find("span");
await label.trigger("click");
await input.trigger("click");
expect(input.attributes()).toEqual({
id: "2023",

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

@ -2,7 +2,7 @@
<template>
<!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
<div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)">
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
@ -11,8 +11,8 @@
<p class="small">{{errorMessage}}</p>
</div>
<div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)" />
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@ -23,7 +23,10 @@
</template>
<script>
import { toRefs } from 'vue';
import { useField } from 'vee-validate';
import loader from "@/ux-components/loader/loader";
export default {
name: "listButtonHorizontal",
props: {
@ -34,15 +37,17 @@ export default {
screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
textPosition: 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 */
loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
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)) */
totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
positionInGroup: Number /* Rquired, position of button in group. Example, 1,2,3 */
positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
isRequired: Boolean,
},
data() {
return {
isError: false,
hasError: false,
isLoaderDisplayed: false,
};
},
@ -50,6 +55,10 @@ export default {
displayLoader() {
this.isLoaderDisplayed = true;
},
handleClick(value) {
this.loaderEnabled && this.displayLoader();
this.handleChange(value);
}
},
components: {
loader,
@ -65,8 +74,20 @@ export default {
return className;
},
},
setup(props) {
const { groupName, buttonID } = toRefs(props);
const { checked, handleChange } = useField(groupName, undefined, {
type: props.isMultiSelect ? "checkbox" : "radio",
checkedValue: buttonID
});
return {
checked,
handleChange,
};
},
};
</script>
<style lang="scss">
.list-button-horizontal {
input[type="radio"],

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

@ -1,7 +1,7 @@
<template>
<!-- Heavily documented below -->
<div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
<label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
<img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
<p class="small m-0 order-3">{{buttonLabel}}</p>
@ -9,7 +9,7 @@
</label>
</div>
<div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
<label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
<img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
<p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
@ -17,7 +17,7 @@
</label>
</div>
<div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
<label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
<img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
<div class="order-2">
@ -27,7 +27,7 @@
</label>
</div>
<div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
<input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
<label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
<img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
<div class="order-2">
@ -39,14 +39,16 @@
</template>
<script>
import { useField } from 'vee-validate';
export default {
name: "listCard",
props: {
//Must choose one of the following four options
isMultiSelect: Boolean,//Defines use as checkbox
isRadio: Boolean,//Defines use as radio button
isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
isRadioHorizontal: Boolean,//Defines use as horizontal radio button
isMultiSelect: Boolean, //Defines use as checkbox
isRadio: Boolean, //Defines use as radio button
isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
isRadioHorizontal: Boolean, //Defines use as horizontal radio button
//end must choose
buttonImage: String,//Optional: File name of image
buttonLabel: String,//Required: Label text
@ -55,7 +57,18 @@ export default {
groupName: String,//Rquired: Unique
buttonLabelSubCopy: String,//Optional: sub text
hasError: Boolean//Used to show error state
}
},
// eslint-disable-next-line vue/no-setup-props-destructure
// setup({ groupName, value }) {
// const { checked, handleChange } = useField(groupName, undefined, {
// type: "radio",
// checkedValue: value
// });
// return {
// checked,
// handleChange,
// };
// },
};
</script>