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

CSR-222: undo accidental code collusion

Browse source
This commit is contained in:
Adam Caouette 2022-01-06 11:23:40 -05:00
parent bc1d0d358e
commit 7761ad879d
2 changed files with 6 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<template> <template>
<!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. --> <!-- 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"> <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" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)"> <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<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"> <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 class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span> <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
@ -11,7 +11,7 @@
<p class="small">{{errorMessage}}</p> <p class="small">{{errorMessage}}</p>
</div> </div>
<div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2"> <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="handleClick(buttonID)" @click="handleClick(buttonID)" /> <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()" @click="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"> <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 class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span> <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
@ -23,8 +23,6 @@
</template> </template>
<script> <script>
import { toRefs } from 'vue';
import { useField } from 'vee-validate';
import loader from "@/ux-components/loader/loader"; import loader from "@/ux-components/loader/loader";
export default { export default {
@ -53,10 +51,6 @@ export default {
methods: { methods: {
displayLoader() { displayLoader() {
this.isLoaderDisplayed = true; this.isLoaderDisplayed = true;
},
handleClick(value) {
this.loaderEnabled && this.displayLoader();
this.handleChange(value);
} }
}, },
components: { components: {
@ -73,17 +67,6 @@ export default {
return className; 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> </script>

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

@ -1,7 +1,7 @@
<template> <template>
<!-- Heavily documented below --> <!-- Heavily documented below -->
<div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}"> <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" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" /> <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
<label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1"> <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" /> <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> <p class="small m-0 order-3">{{buttonLabel}}</p>
@ -9,7 +9,7 @@
</label> </label>
</div> </div>
<div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}"> <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" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" /> <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
<label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1"> <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" /> <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> <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
@ -17,7 +17,7 @@
</label> </label>
</div> </div>
<div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}"> <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" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" /> <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
<label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}"> <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" /> <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
<div class="order-2"> <div class="order-2">
@ -27,7 +27,7 @@
</label> </label>
</div> </div>
<div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}"> <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" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" /> <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
<label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}"> <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" /> <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
<div class="order-2"> <div class="order-2">
@ -39,8 +39,6 @@
</template> </template>
<script> <script>
import { useField } from 'vee-validate';
export default { export default {
name: "listCard", name: "listCard",
props: { props: {
@ -58,17 +56,6 @@ export default {
buttonLabelSubCopy: String,//Optional: sub text buttonLabelSubCopy: String,//Optional: sub text
hasError: Boolean//Used to show error state 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> </script>