WIP

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
     },
 
 };

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>