WIP Create radio button with image.

src/Funnel1.vue

@@ -38,6 +38,29 @@
         ariaLabel="Back glass"
       />
     </div>
+    <div class="row mt-5">
+      <radioCard
+        radioLabel="Windshield"
+        radioImage="windshield-damage.svg"
+        altText="Windshield"
+        groupName="damageKey"
+        radioID="windshield"
+      />
+      <radioCard
+        radioLabel="Side Window"
+        radioImage="side-window-damage.svg"
+        altText="Side Window"
+        groupName="damageKey"
+        radioID="sidewindow"
+      />
+      <radioCard
+        radioLabel="Back Glass"
+        radioImage="back-glass-damage.svg"
+        altText="Back Glass"
+        groupName="damageKey"
+        radioID="backglass"
+      />
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
@@ -76,6 +99,7 @@
   import imageButton from './components/imageButton';
   import confetti from './components/confetti';
   import buttonPrimary from './components/buttons/buttonPrimary';
+  import radioCard from './components/forms/radioCard';
 
 
   export default {
@@ -85,7 +109,8 @@
       vehicleImage,
       imageButton,
       confetti,
-      buttonPrimary
+      buttonPrimary,
+      radioCard
     }
   }
 </script>

src/assets/scss/_CustomVariables.scss

@@ -5,7 +5,7 @@ $white:    #FFFFFF;
 $gray-100: #F4F4F4;
 $gray-200: #CACBCC;
 $gray-300: #B3B4B5;
-$gray-400: #525656;//Default Gray (Gray 400)
+$gray-400: #B0B3B3;//Default Gray (Gray 400)
 $black:    #000;
 // scss-docs-end gray-color-variables
 
@@ -21,6 +21,7 @@ $grays: (
 // fusv-enable
 
 // scss-docs-start color-variables
+$blue-100:   #E4F1F7;
 $blue-200:   #E7F1F6;
 $blue-300:   #B9D7E6;
 $blue-400:   #125B7E;

src/assets/scss/components/_radio-card.scss

@@ -0,0 +1,30 @@
+.radio-card {
+  input[type=radio] {
+     position: absolute;
+     opacity: 0;
+     &:focus + label {
+       box-shadow: 0px 0px 0px 4px $blue-600;
+     }
+   }
+  input[type="radio"]:checked + label {
+     background-color: $blue-100;
+     border: 1px solid $blue-600;
+     // &:focus {
+     //   border: 2px solid $blue-600;
+     // }
+   }
+   label {
+     display: flex;
+     align-items: center;
+     flex-direction: column;
+     background: $white;
+     border: 1px solid $gray-400;
+     border-radius: 8px;
+     padding: 8px;
+     width: 100%;
+     &:hover {
+       cursor: pointer;
+       box-shadow: 0px 0px 0px 10px $blue-100;
+     }
+  }
+}

src/assets/scss/custom.scss

@@ -20,3 +20,4 @@
 @import "./components/_navbar";
 @import "./components/_buttons";
 @import "./components/_vehicle-image";
+@import "./components/_radio-card";

src/components/forms/radioCard.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="col-4 mb-3 d-flex radio-card">
+    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
+      <label v-bind:for="radioID">
+        <img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:alt="altText"/>
+        <span class="mt-auto">{{radioLabel}}</span>
+    </label>
+  </div>
+</template>
+
+<!-- tabIndex="x" is available on this component if needed -->
+
+<script>
+export default {
+  name: 'radioCard',
+  props: ['groupName','radioLabel','radioImage','altText','radioID','tabIndex'],
+  data() {
+    return {
+      picked: "picked"
+    };
+  }
+}
+</script>