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] 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;
+        }
       }
     }
   }