Merge pull request #208 from Safelite/CSR-341-radio-component

CSR-341 WIP commit to fix back button on vehicle damage page.

src/common-components/funnel-footer/funnel-footer.vue

@@ -20,7 +20,12 @@
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @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>
@@ -62,10 +67,11 @@ export default {
       this.buttonText = cmsContent.ForwardButtonText;
     },
     buttonClick() {
-      this.$emit("forwardClicked");
+      this.$emit("ForwardClicked");
     },
     linkClick() {
-      this.$emit("backClicked");
+      console.log("ff linkClicked");
+      this.$emit("BackClicked");
     },
   }
 };

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

@@ -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,30 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
+        <p>Sample radio button group</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <radio
+          checkboxName="demo radio"
+          buttonID="radio-1"
+          tabIndex="1"
+          checkboxLabel="I'm a radio button"
+        />
+      </div>
+      <div class="col">
+        <radio
+          checkboxName="demo radio"
+          buttonID="radio-2"
+          tabIndex="1"
+          checkboxLabel="I'm a radio button"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -926,6 +950,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 +963,7 @@ export default {
     vehicleBanner,
     listButtonHorizontal,
     checkbox,
+    radio,
     funnelHeader,
     textLink
   },

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -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>
 
@@ -86,6 +86,14 @@ export default {
       // Invokes
       store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
     },
+    backButtonAction() {
+      console.log("vd linkClicked");
+      // route to move backwards
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_BACK,
+        this.$route
+      );
+    },
   },
   components: {
     funnelHeader,

src/router/router-constants/routing-table.js

@@ -50,6 +50,15 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+    ],
+  },
 ];
 
 export { routingTable };

src/ux-components/checkbox/checkbox.vue

@@ -44,6 +44,9 @@ export default {
     + label {
       display: block;
       position: relative;
+      &:hover {
+        cursor: pointer;
+      }
     }
     + label::before {
       content: "";
@@ -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;

src/ux-components/radio/radio.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/ux-components/radio/radio.vue

@@ -0,0 +1,94 @@
+<template>
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
+  <div class="ui-radio d-flex">
+    <input
+      type="radio"
+      aria-checked="false"
+      :name="checkboxName"
+      :id="buttonID"
+      :tabindex="tabIndex"
+      :aria-required="isRequired"
+    />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{
+        screenReaderOnlyText
+      }}</span>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "radio",
+  props: {
+    checkboxName: String,
+    buttonID: String,
+    tabIndex: Number,
+    checkboxLabel: String,
+    screenReaderOnlyText: String,
+    isRequired: Boolean,
+  },
+};
+</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: 10px;
+      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>

src/ux-components/text-link/text-link.vue

@@ -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");
     },
   },