Merge pull request #126 from Safelite/feature/CSR-222

Feature/CSR-222

src/common-components/button-back/button-back.vue

@@ -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>
 

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -6,16 +6,17 @@
           {{ text }}
         </span>
         <buttonBack
-        v-if="hasBackButton"
-        :backButtonAction="backButtonAction"
-      />
-      </h5>
+          v-if="hasBackButton"
+          :backButtonAccessibleText="backButtonAccessibleText"
+          @click-event="clickEvent"
+        />
+    </h5>
     </div>
   </div>
 </template>
 
 <script>
-import buttonBack from "@/ux-components/button-back/button-back";
+import buttonBack from "@/common-components/button-back/button-back";
 
 export default {
   name: "FunnelSubHeader",
@@ -28,12 +29,14 @@ export default {
     hasBackButton: Boolean,
     backButtonUrl: String,
     backButtonAccessibleText: String,
-    backButtonAction: Function,
   },
   components: {
     buttonBack,
   },
   methods: {
+    clickEvent() {
+      this.$emit('click-event');
+    },
     initializeComponent(cmsContent) {
       this.text = cmsContent.HeaderText;
     }

src/layouts/component-test/component-test.vue

@@ -739,7 +739,7 @@
 <script>
 import buttonPrimary from "@/ux-components/button-primary/button-primary";
 import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
-import buttonBack from "@/ux-components/button-back/button-back";
+import buttonBack from "@/common-components/button-back/button-back";
 import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
 import alert from "@/ux-components/alert/alert";

src/layouts/vehicle-make/vehicle-make.vue

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

src/layouts/vehicle-model/vehicle-model.vue

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

src/layouts/vehicle-style/vehicle-style.vue

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

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -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",
@@ -33,6 +34,7 @@ describe("list-button.vue", () => {
     expect(label.attributes()).toEqual({
       tabindex: "-1",
       for: "2023",
+      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
       "aria-checked": "false",
     });

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -3,7 +3,7 @@
   <!-- 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">
-    <label tabindex="-1" aria-checked="false" :for="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 v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</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" 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()" @click="handleClick()" />
+    <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>
@@ -24,6 +24,7 @@
 
 <script>
 import loader from "@/ux-components/loader/loader";
+
 export default {
   name: "listButtonHorizontal",
   props: {
@@ -34,11 +35,13 @@ 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 {
@@ -49,6 +52,9 @@ export default {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
+    handleClick() {
+      this.loaderEnabled && this.displayLoader();
+    }
   },
   components: {
     loader,
@@ -66,6 +72,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss">
 .list-button-horizontal {
   input[type="radio"],

src/ux-components/list-card/list-card.vue

@@ -43,10 +43,10 @@ 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 +55,7 @@ export default {
     groupName: String,//Rquired: Unique
     buttonLabelSubCopy: String,//Optional: sub text
     hasError: Boolean//Used to show error state
-  }
+  },
 };
 </script>