From 3106273ff238d83ff0b851f9736430e609425e85 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Mon, 25 Oct 2021 17:14:54 -0400
Subject: [PATCH 1/6] WIP Create radio button with image.

---
 src/Funnel1.vue                             | 27 ++++++++++++++++++-
 src/assets/scss/_CustomVariables.scss       |  3 ++-
 src/assets/scss/components/_radio-card.scss | 30 +++++++++++++++++++++
 src/assets/scss/custom.scss                 |  1 +
 src/components/forms/radioCard.vue          | 23 ++++++++++++++++
 5 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/scss/components/_radio-card.scss
 create mode 100644 src/components/forms/radioCard.vue

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index bf4720119..297fda23c 100644
--- a/src/Funnel1.vue
+++ b/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>
diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss
index c7b586303..165e799e9 100644
--- a/src/assets/scss/_CustomVariables.scss
+++ b/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;
diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss
new file mode 100644
index 000000000..8c59c9e68
--- /dev/null
+++ b/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;
+     }
+  }
+}
diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss
index d27b60a05..214b5b0ec 100644
--- a/src/assets/scss/custom.scss
+++ b/src/assets/scss/custom.scss
@@ -20,3 +20,4 @@
 @import "./components/_navbar";
 @import "./components/_buttons";
 @import "./components/_vehicle-image";
+@import "./components/_radio-card";
diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
new file mode 100644
index 000000000..c322dea82
--- /dev/null
+++ b/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>

From 16c0437b9e518155ee8a9b942af0c1ba12e39411 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Mon, 25 Oct 2021 18:07:36 -0400
Subject: [PATCH 2/6] WIP - radioCard updates.

---
 src/assets/scss/components/_radio-card.scss | 18 ++++++++++--------
 src/components/forms/radioCard.vue          |  1 +
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss
index 8c59c9e68..37426e2e5 100644
--- a/src/assets/scss/components/_radio-card.scss
+++ b/src/assets/scss/components/_radio-card.scss
@@ -3,15 +3,17 @@
      position: absolute;
      opacity: 0;
      &:focus + label {
+       background-color: $white;
        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;
-     // }
+     &: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;
+      }
    }
    label {
      display: flex;
@@ -24,7 +26,7 @@
      width: 100%;
      &:hover {
        cursor: pointer;
-       box-shadow: 0px 0px 0px 10px $blue-100;
+       box-shadow: 0px 0px 0px 6px $blue-100;
      }
   }
 }
diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
index c322dea82..9ea04070d 100644
--- a/src/components/forms/radioCard.vue
+++ b/src/components/forms/radioCard.vue
@@ -4,6 +4,7 @@
       <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>
+        <span>Selected: {{ picked }}</span>
     </label>
   </div>
 </template>

From ffd9a427384a2710396bcecea6c38818fabd79bb Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Mon, 25 Oct 2021 18:31:07 -0400
Subject: [PATCH 3/6] WIP - style updates.

---
 src/assets/scss/components/_radio-card.scss | 4 ++++
 src/components/forms/radioCard.vue          | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss
index 37426e2e5..772064dd1 100644
--- a/src/assets/scss/components/_radio-card.scss
+++ b/src/assets/scss/components/_radio-card.scss
@@ -14,6 +14,10 @@
         background-color: $blue-100;
         border: 1px solid $blue-600;
       }
+      &.invalid + label {
+        background-color: $white;
+        border: 1px solid $red-500;
+      }
    }
    label {
      display: flex;
diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
index 9ea04070d..da7b334d7 100644
--- a/src/components/forms/radioCard.vue
+++ b/src/components/forms/radioCard.vue
@@ -1,6 +1,6 @@
 <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"/>
+    <input type="radio" 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">
         <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>
@@ -14,7 +14,7 @@
 <script>
 export default {
   name: 'radioCard',
-  props: ['groupName','radioLabel','radioImage','altText','radioID','tabIndex'],
+  props: ['groupName','radioLabel','radioImage','altText','radioID','tabIndex','className'],
   data() {
     return {
       picked: "picked"

From 715fe43f33b7b6b9958f7413b523b2a09044509e Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Mon, 25 Oct 2021 19:02:46 -0400
Subject: [PATCH 4/6] WIP - css cleanup.

---
 src/assets/scss/components/_radio-card.scss | 56 +++++++++------------
 src/components/forms/radioCard.vue          |  4 +-
 2 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss
index 772064dd1..6b3b1797f 100644
--- a/src/assets/scss/components/_radio-card.scss
+++ b/src/assets/scss/components/_radio-card.scss
@@ -1,36 +1,28 @@
 .radio-card {
   input[type=radio] {
-     position: absolute;
-     opacity: 0;
-     &: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 {
-     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 6px $blue-100;
-     }
+    &: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;
+    }
   }
 }
diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
index da7b334d7..a8793cc5e 100644
--- a/src/components/forms/radioCard.vue
+++ b/src/components/forms/radioCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="col-4 mb-3 d-flex radio-card">
-    <input type="radio" 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">
+    <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="p-3 rounded-3 d-flex flex-column align-items-center w-100">
         <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>
         <span>Selected: {{ picked }}</span>

From f49e49174c6f672680f7a8168331011608d3cdfc Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Mon, 25 Oct 2021 19:08:31 -0400
Subject: [PATCH 5/6] WIP - remove unneeded test code.

---
 src/components/forms/radioCard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
index a8793cc5e..38e781997 100644
--- a/src/components/forms/radioCard.vue
+++ b/src/components/forms/radioCard.vue
@@ -4,7 +4,6 @@
       <label v-bind:for="radioID" class="p-3 rounded-3 d-flex flex-column align-items-center w-100">
         <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>
-        <span>Selected: {{ picked }}</span>
     </label>
   </div>
 </template>

From c7ae2412bef97df880c1f9e4fafed13dd12c22e9 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Tue, 26 Oct 2021 06:48:26 -0400
Subject: [PATCH 6/6] Adjust padding.

---
 src/components/forms/radioCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
index 38e781997..ac6f6875d 100644
--- a/src/components/forms/radioCard.vue
+++ b/src/components/forms/radioCard.vue
@@ -1,9 +1,9 @@
 <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="p-3 rounded-3 d-flex flex-column align-items-center w-100">
-        <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 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>