Merge branch 'brm-image-button-updates' into feature/branch-merge

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,28 @@
+.radio-card {
+  input[type=radio] {
+    &:focus + label {
+      background-color: $white;
+      box-shadow: 0px 0px 0px 4px $blue-600;
+    }
+    &:focus-visible + label {
+      background-color: $white;
+      box-shadow: 0px 0px 0px 4px $blue-600;
+    }
+    &:checked + label {
+      background-color: $blue-100;
+      border: 1px solid $blue-600;
+    }
+    &.invalid + label {
+      background-color: $white;
+      border: 1px solid $red-500;
+    }
+  }
+  label {
+    background: $white;
+    border: 1px solid $gray-400;
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0px 0px 0px 6px $blue-100;
+    }
+  }
+}

src/assets/scss/custom.scss

@@ -21,3 +21,4 @@
 @import "./components/_SelectCar"; 
 @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" class="position-absolute opacity-0" v-bind:class="className" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
+      <label v-bind:for="radioID" class="rounded-3 d-flex flex-column align-items-center w-100">
+        <img class="px-3 pt-3 pb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:alt="altText"/>
+        <span class="mt-auto mb-2">{{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','className'],
+  data() {
+    return {
+      picked: "picked"
+    };
+  }
+}
+</script>