From 5e36b01f319b950a02f218eaf500582d9e87a67d Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 18 Jul 2022 16:03:43 -0400
Subject: [PATCH] WIP

---
 src/layouts/quote/quote.vue                   |  6 +-
 .../radio-service-package.vue                 | 67 +++++++++++++++++++
 2 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/ux-components/radio-service-package/radio-service-package.vue

diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 588244bd7..2b8969d30 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -26,7 +26,7 @@
             isCashOrInsurance
             isRequired
             />
-            <radio/>
+            <radioServicePackage/>
           <funnel-footer
             cmsWidgetName="FunnelFooterWidget"
             :isForwardActionDisabled="!meta.valid"
@@ -46,6 +46,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -98,7 +99,8 @@ export default {
       vehicleBanner,
       funnelSubHeader,
       Form,
-      buttonQuestion
+      buttonQuestion,
+      radioServicePackage
     },
 
 };
diff --git a/src/ux-components/radio-service-package/radio-service-package.vue b/src/ux-components/radio-service-package/radio-service-package.vue
new file mode 100644
index 000000000..c7075a9a2
--- /dev/null
+++ b/src/ux-components/radio-service-package/radio-service-package.vue
@@ -0,0 +1,67 @@
+<template>
+<div class="package-wrapper">
+  <input type="radio" name="test-radio" id="testradio">
+  <label for="testradio">Economy service</label>
+</div>
+</template>
+
+<script>
+export default {
+  name: "radioServicePackage",
+}
+</script>
+
+<style lang="scss">
+.package-wrapper {
+  margin: 0.5rem 0;
+  input[type="radio"] {
+    opacity: 0;
+
+    + label {
+      display: flex;
+      align-items: center;
+      position: relative;
+      cursor: pointer;
+      width: 100%;
+      padding: 1rem;
+      border: 1px solid $gray-300;
+      box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
+      border-radius: .5rem;
+
+      &::before {
+        content: "";
+        margin-right: 1rem;
+        border-radius: 50%;
+        border: 1px solid $blue;
+        width: 18px;
+        height: 18px;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: 20px;
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+      }
+    }
+
+    &:checked {
+      + label {
+        background-color: $blue-100;
+        border: 1px solid $blue;
+      }
+      + label::after {
+        background: $blue;
+      }
+    }
+
+    &:focus {
+      + label::before {
+        border: 2px solid $blue;
+      }
+    }
+  }
+}
+</style>