Expand toggle

src/layouts/payment-method/review-dropdown/review-block/review-block.vue

@@ -34,7 +34,6 @@ export default {
     methods: {},
     components: {
         textBlock,
-        textLink,
     },
 };
 </script>

src/layouts/payment-method/review-dropdown/review-dropdown.vue

@@ -1,13 +1,17 @@
 <template>
     <div>
-        <textBlock
-            customText="Appointment Details"
-            typeStyle="label bold"
-            justifyText="justify-text-left"
-            margin="mt-0"
-            class="dark-header" />
-
-        <div class="px-4">
+        <div
+            class="row review-toggle flex align-items-center pt-4"
+            :class="[isExpanded ? 'expanded' : '']"
+            @click="toggleIsExpanded">
+            <a
+                aria-label="expand appointment details"
+                href="javascript:void(0)"
+                class="col d-flex justify-content-between py-0">
+                <span class="label">Appointment details</span>
+            </a>
+        </div>
+        <div class="review-table px-4">
             <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
 
             <hr class="my-0" />
@@ -60,7 +64,9 @@ export default {
     name: "review-dropdown",
     props: {},
     data() {
-        return {};
+        return {
+            isExpanded: false,
+        };
     },
     methods: {
         async loadInitialData() {
@@ -78,6 +84,9 @@ export default {
         initializeComponent(apiResponses) {
             this.$refs.servicePackageReview.initializeComponent(apiResponses.servicePackageData);
         },
+        toggleIsExpanded() {
+            this.isExpanded = !this.isExpanded;
+        },
     },
     computed: {
         vehicleInfo() {
@@ -100,7 +109,6 @@ export default {
         },
     },
     components: {
-        textBlock,
         customerReview,
         damageReview,
         scheduleReview,
@@ -116,4 +124,51 @@ export default {
     color: $black;
     line-height: 1.6;
 }
+
+.review-table {
+    max-height: 0;
+    transition: all 350ms ease-in;
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.review-toggle {
+    margin-bottom: 1rem;
+
+    &.expanded {
+        margin-bottom: 0;
+    }
+
+    &:after {
+        content: "";
+        transition: all 0.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;
+        width: 16px;
+        height: 9px;
+        display: inline-flex;
+        position: relative;
+        right: 0.75rem;
+        margin: 0.5rem 0 0.5rem 1rem;
+        cursor: pointer;
+    }
+    &.expanded:after {
+        transform: rotate(180deg);
+    }
+    &.expanded + .review-table {
+        max-height: 800px;
+        transition: all 150ms ease-in;
+        overflow: hidden;
+        visibility: visible;
+    }
+    a {
+        text-decoration: none;
+    }
+    .label {
+        color: $black;
+        font-weight: 500;
+        line-height: 1.625;
+    }
+}
 </style>