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 1/5] 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>

From 57bc0d5484bbb51f2ec3cbeacb5e25419deffbc7 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 18 Jul 2022 17:03:54 -0400
Subject: [PATCH 2/5] WIP

---
 .../radio-service-package.vue                 | 73 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/radio-service-package/radio-service-package.vue b/src/ux-components/radio-service-package/radio-service-package.vue
index c7075a9a2..187adfe2b 100644
--- a/src/ux-components/radio-service-package/radio-service-package.vue
+++ b/src/ux-components/radio-service-package/radio-service-package.vue
@@ -1,7 +1,46 @@
 <template>
 <div class="package-wrapper">
   <input type="radio" name="test-radio" id="testradio">
-  <label for="testradio">Economy service</label>
+  <label for="testradio">
+    <div class="package-specs">
+        <p class="m-0">Economy service</p>
+        <ul>
+          <li>New replacement windshield</li>
+          <li>Expert installation</li>
+          <li>Nationwide lifetime warranty</li>
+        </ul>
+    </div>
+  </label>
+</div>
+<div class="package-wrapper">
+  <input type="radio" name="test-radio" id="testradio-2">
+  <label for="testradio-2">
+    <div class="package-specs">
+        <p class="mb-2">Standard service</p>
+        <p class="sub-label m-0">most popular</p>
+        <ul>
+          <li>New replacement windshield</li>
+          <li>Expert installation</li>
+          <li>Nationwide lifetime warranty</li>
+          <li>New wiper blades</li>
+        </ul>
+    </div>
+  </label>
+</div>
+<div class="package-wrapper">
+  <input type="radio" name="test-radio" id="testradio-3">
+  <label for="testradio-3">
+    <div class="package-specs">
+        <p class="mb-2">Premium service</p>
+        <ul>
+          <li>New replacement windshield</li>
+          <li>Expert installation</li>
+          <li>Nationwide lifetime warranty</li>
+          <li>New wiper blades</li>
+          <li>Rain Defense&trade; treatment</li>
+        </ul>
+    </div>
+  </label>
 </div>
 </template>
 
@@ -16,10 +55,12 @@ export default {
   margin: 0.5rem 0;
   input[type="radio"] {
     opacity: 0;
+    position: absolute;
+    left: -9999px;
 
     + label {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       position: relative;
       cursor: pointer;
       width: 100%;
@@ -27,9 +68,15 @@ export default {
       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;
+      overflow: hidden;
+      min-height: 58px;
+      max-height: 0;
+      transition: max-height .5s ease;
 
       &::before {
         content: "";
+        position: relative;
+        top: 3px;
         margin-right: 1rem;
         border-radius: 50%;
         border: 1px solid $blue;
@@ -41,6 +88,7 @@ export default {
         content: "";
         position: absolute;
         left: 20px;
+        top: 23px;
         border-radius: 50%;
         width: 10px;
         height: 10px;
@@ -51,6 +99,7 @@ export default {
       + label {
         background-color: $blue-100;
         border: 1px solid $blue;
+        max-height: 500px;
       }
       + label::after {
         background: $blue;
@@ -63,5 +112,25 @@ export default {
       }
     }
   }
+
+  .package-specs {
+    display: flex;
+    flex-direction: column;
+
+    p {
+      &.sub-label {
+        color: $green;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  ul {
+    margin: 1rem 0 0 -15px;
+    padding: 0;
+    li {
+      margin-bottom: .5rem;
+    }
+  }
 }
 </style>

From 66303864f0e4d017f5fed21c7f7ff39d7c8a92da Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 19 Jul 2022 16:48:46 -0400
Subject: [PATCH 3/5] WIP

---
 .../radio-service-package.vue                 | 72 +++++++++++++------
 1 file changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/ux-components/radio-service-package/radio-service-package.vue b/src/ux-components/radio-service-package/radio-service-package.vue
index 187adfe2b..2f06d0600 100644
--- a/src/ux-components/radio-service-package/radio-service-package.vue
+++ b/src/ux-components/radio-service-package/radio-service-package.vue
@@ -3,7 +3,7 @@
   <input type="radio" name="test-radio" id="testradio">
   <label for="testradio">
     <div class="package-specs">
-        <p class="m-0">Economy service</p>
+        <p class="m-0">Economy service <span>As little as $0.00</span></p>
         <ul>
           <li>New replacement windshield</li>
           <li>Expert installation</li>
@@ -16,7 +16,7 @@
   <input type="radio" name="test-radio" id="testradio-2">
   <label for="testradio-2">
     <div class="package-specs">
-        <p class="mb-2">Standard service</p>
+        <p class="mb-2">Standard service <span>As little as 59.97</span></p>
         <p class="sub-label m-0">most popular</p>
         <ul>
           <li>New replacement windshield</li>
@@ -31,7 +31,7 @@
   <input type="radio" name="test-radio" id="testradio-3">
   <label for="testradio-3">
     <div class="package-specs">
-        <p class="mb-2">Premium service</p>
+        <p class="mb-2">Premium service <span>As little as $94.97</span></p>
         <ul>
           <li>New replacement windshield</li>
           <li>Expert installation</li>
@@ -71,27 +71,38 @@ export default {
       overflow: hidden;
       min-height: 58px;
       max-height: 0;
-      transition: max-height .5s ease;
+      transition: all .75s ease;
 
-      &::before {
+      &:before {
         content: "";
         position: relative;
-        top: 3px;
+        top: 5px;
         margin-right: 1rem;
         border-radius: 50%;
-        border: 1px solid $blue;
-        width: 18px;
-        height: 18px;
+        border: 1px solid $gray-500;
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
       }
 
-      &::after {
+      &:after {
         content: "";
         position: absolute;
-        left: 20px;
-        top: 23px;
+        left: 19px;
+        top: 24px;
         border-radius: 50%;
         width: 10px;
         height: 10px;
+        min-width: 10px;
+      }
+    }
+
+    &:hover {
+      + label {
+        &:before {
+          border: 1px solid #8E9292;
+          box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
+        }
       }
     }
 
@@ -101,14 +112,23 @@ export default {
         border: 1px solid $blue;
         max-height: 500px;
       }
-      + label::after {
-        background: $blue;
+      + label {
+        &:before {
+          box-shadow: 0px 0px 0px 1px $blue;
+        }
+      }
+      + label {
+        &:after {
+          background: $blue;
+        }
       }
     }
 
     &:focus {
-      + label::before {
-        border: 2px solid $blue;
+      + label {
+        &:before {
+          border: 2px solid $blue;
+        }
       }
     }
   }
@@ -116,20 +136,26 @@ export default {
   .package-specs {
     display: flex;
     flex-direction: column;
+    width: 100%;
 
     p {
+      font-weight: 500;
+      display: flex;
+      justify-content: space-between;
+      span {
+        color: $green;
+      }
       &.sub-label {
         color: $green;
         text-transform: uppercase;
       }
     }
-  }
-
-  ul {
-    margin: 1rem 0 0 -15px;
-    padding: 0;
-    li {
-      margin-bottom: .5rem;
+    ul {
+      margin: 1rem 0 0 -15px;
+      padding: 0;
+      li {
+        margin-bottom: .5rem;
+      }
     }
   }
 }

From c55ee6a15d174699488b4c78bdc70ffe955b5113 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 20 Jul 2022 15:28:05 -0400
Subject: [PATCH 4/5] WIP

---
 .../radio-service-package.vue                 | 306 ++++++++++--------
 1 file changed, 174 insertions(+), 132 deletions(-)

diff --git a/src/ux-components/radio-service-package/radio-service-package.vue b/src/ux-components/radio-service-package/radio-service-package.vue
index 2f06d0600..0654a2c14 100644
--- a/src/ux-components/radio-service-package/radio-service-package.vue
+++ b/src/ux-components/radio-service-package/radio-service-package.vue
@@ -1,160 +1,202 @@
 <template>
-<div class="package-wrapper">
-  <input type="radio" name="test-radio" id="testradio">
-  <label for="testradio">
-    <div class="package-specs">
-        <p class="m-0">Economy service <span>As little as $0.00</span></p>
-        <ul>
-          <li>New replacement windshield</li>
-          <li>Expert installation</li>
-          <li>Nationwide lifetime warranty</li>
-        </ul>
+  <div class="package-main">
+    <a href="#!" class="justify-content-end w-100" :class="[isActive ? 'active' : '']" @click="toggleClass()">Compare packages</a>
+    <div class="package-wrapper">
+      <input type="radio" name="test-radio" id="testradio">
+      <label for="testradio">
+        <div class="package-specs">
+          <p class="m-0">Economy service <span>As little as $0.00</span></p>
+          <ul>
+            <li>New replacement windshield</li>
+            <li>Expert installation</li>
+            <li>Nationwide lifetime warranty</li>
+          </ul>
+        </div>
+      </label>
     </div>
-  </label>
-</div>
-<div class="package-wrapper">
-  <input type="radio" name="test-radio" id="testradio-2">
-  <label for="testradio-2">
-    <div class="package-specs">
-        <p class="mb-2">Standard service <span>As little as 59.97</span></p>
-        <p class="sub-label m-0">most popular</p>
-        <ul>
-          <li>New replacement windshield</li>
-          <li>Expert installation</li>
-          <li>Nationwide lifetime warranty</li>
-          <li>New wiper blades</li>
-        </ul>
+    <div class="package-wrapper">
+      <input type="radio" name="test-radio" id="testradio-2">
+      <label for="testradio-2">
+        <div class="package-specs">
+          <p class="mb-2">Standard service <span>As little as 59.97</span></p>
+          <p class="sub-label m-0">most popular</p>
+          <ul>
+            <li>New replacement windshield</li>
+            <li>Expert installation</li>
+            <li>Nationwide lifetime warranty</li>
+            <li>New wiper blades</li>
+          </ul>
+        </div>
+      </label>
     </div>
-  </label>
-</div>
-<div class="package-wrapper">
-  <input type="radio" name="test-radio" id="testradio-3">
-  <label for="testradio-3">
-    <div class="package-specs">
-        <p class="mb-2">Premium service <span>As little as $94.97</span></p>
-        <ul>
-          <li>New replacement windshield</li>
-          <li>Expert installation</li>
-          <li>Nationwide lifetime warranty</li>
-          <li>New wiper blades</li>
-          <li>Rain Defense&trade; treatment</li>
-        </ul>
+    <div class="package-wrapper">
+      <input type="radio" name="test-radio" id="testradio-3">
+      <label for="testradio-3">
+        <div class="package-specs">
+          <p class="mb-2">Premium service <span>As little as $94.97</span></p>
+          <ul>
+            <li>New replacement windshield</li>
+            <li>Expert installation</li>
+            <li>Nationwide lifetime warranty</li>
+            <li>New wiper blades</li>
+            <li>Rain Defense&trade; treatment</li>
+          </ul>
+        </div>
+      </label>
     </div>
-  </label>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
   name: "radioServicePackage",
+  data() {
+    return {
+      isActive: false,
+    };
+  },
+  methods: {
+    toggleClass: function(event){
+      this.isActive = !this.isActive;
+    }
+  }
 }
 </script>
 
 <style lang="scss">
-.package-wrapper {
-  margin: 0.5rem 0;
-  input[type="radio"] {
-    opacity: 0;
-    position: absolute;
-    left: -9999px;
-
-    + label {
-      display: flex;
-      align-items: flex-start;
-      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;
-      overflow: hidden;
-      min-height: 58px;
-      max-height: 0;
-      transition: all .75s ease;
-
-      &:before {
-        content: "";
-        position: relative;
-        top: 5px;
-        margin-right: 1rem;
-        border-radius: 50%;
-        border: 1px solid $gray-500;
-        width: 16px;
-        height: 16px;
-        min-width: 16px;
-      }
-
-      &:after {
-        content: "";
-        position: absolute;
-        left: 19px;
-        top: 24px;
-        border-radius: 50%;
-        width: 10px;
-        height: 10px;
-        min-width: 10px;
-      }
+.package-main {
+  a {
+    &:after {
+      content: "";
+      transition: all .5s ease;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right center;
+      margin-left: .5rem;
+      width: 16px;
+      height: auto;
     }
-
-    &:hover {
-      + label {
-        &:before {
-          border: 1px solid #8E9292;
-          box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
+    &.active {
+      ~ .package-wrapper {
+        label {
+          max-height: 500px !important;
         }
       }
-    }
-
-    &:checked {
-      + label {
-        background-color: $blue-100;
-        border: 1px solid $blue;
+      &.active:after {
+        transform: rotate(180deg);
+      }
+      &.active + .vin-info {
         max-height: 500px;
-      }
-      + label {
-        &:before {
-          box-shadow: 0px 0px 0px 1px $blue;
-        }
-      }
-      + label {
-        &:after {
-          background: $blue;
-        }
-      }
-    }
-
-    &:focus {
-      + label {
-        &:before {
-          border: 2px solid $blue;
-        }
+        transition: all 250ms ease-in;
+        opacity: 1;
       }
     }
   }
+  .package-wrapper {
+    margin: 0.5rem 0;
+    input[type="radio"] {
+      opacity: 0;
+      position: absolute;
+      left: -9999px;
 
-  .package-specs {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+      + label {
+        display: flex;
+        align-items: flex-start;
+        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;
+        overflow: hidden;
+        min-height: 58px;
+        max-height: 0;
+        transition: all .75s ease;
 
-    p {
-      font-weight: 500;
-      display: flex;
-      justify-content: space-between;
-      span {
-        color: $green;
+        &:before {
+          content: "";
+          position: relative;
+          top: 5px;
+          margin-right: 1rem;
+          border-radius: 50%;
+          border: 1px solid $gray-500;
+          width: 16px;
+          height: 16px;
+          min-width: 16px;
+        }
+
+        &:after {
+          content: "";
+          position: absolute;
+          left: 19px;
+          top: 24px;
+          border-radius: 50%;
+          width: 10px;
+          height: 10px;
+          min-width: 10px;
+        }
       }
-      &.sub-label {
-        color: $green;
-        text-transform: uppercase;
+
+      &:hover {
+        + label {
+          &:before {
+            border: 1px solid #8E9292;
+            box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+
+      &:checked {
+        + label {
+          background-color: $blue-100;
+          border: 1px solid $blue;
+          max-height: 500px;
+        }
+        + label {
+          &:before {
+            box-shadow: 0px 0px 0px 1px $blue;
+          }
+        }
+        + label {
+          &:after {
+            background: $blue;
+          }
+        }
+      }
+
+      &:focus {
+        + label {
+          &:before {
+            border: 2px solid $blue;
+          }
+        }
       }
     }
-    ul {
-      margin: 1rem 0 0 -15px;
-      padding: 0;
-      li {
-        margin-bottom: .5rem;
+
+    .package-specs {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      p {
+        font-weight: 500;
+        display: flex;
+        justify-content: space-between;
+        span {
+          color: $green;
+        }
+        &.sub-label {
+          color: $green;
+          text-transform: uppercase;
+        }
+      }
+      ul {
+        margin: 1rem 0 0 -15px;
+        padding: 0;
+        li {
+          margin-bottom: .5rem;
+        }
       }
     }
   }

From d8a4734ca5ed69b913c0a7ed1aaec85d9ab3f533 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 22 Jul 2022 10:30:14 -0400
Subject: [PATCH 5/5] WIP Expand all package options code setup.

---
 .../radio-service-package.vue                     | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/ux-components/radio-service-package/radio-service-package.vue b/src/ux-components/radio-service-package/radio-service-package.vue
index 0654a2c14..8a00a0b68 100644
--- a/src/ux-components/radio-service-package/radio-service-package.vue
+++ b/src/ux-components/radio-service-package/radio-service-package.vue
@@ -78,9 +78,9 @@ export default {
     }
     &.active {
       ~ .package-wrapper {
-        label {
-          max-height: 500px !important;
-        }
+          .package-specs {
+            max-height: 1000px !important;
+          }
       }
       &.active:after {
         transform: rotate(180deg);
@@ -111,8 +111,6 @@ export default {
         border-radius: .5rem;
         overflow: hidden;
         min-height: 58px;
-        max-height: 0;
-        transition: all .75s ease;
 
         &:before {
           content: "";
@@ -148,6 +146,11 @@ export default {
       }
 
       &:checked {
+        + label {
+          .package-specs {
+            max-height: 1000px;
+          }
+        }
         + label {
           background-color: $blue-100;
           border: 1px solid $blue;
@@ -178,6 +181,8 @@ export default {
       display: flex;
       flex-direction: column;
       width: 100%;
+      max-height: 0;
+      transition: all .75s ease;
 
       p {
         font-weight: 500;