WIP Do not merge.

src/digital-components/date-picker/date-picker.vue

@@ -3,11 +3,13 @@
         <fieldset v-if="months">
             <legend class="sr-only">Date Picker</legend>
             <div
+            class="test-div"
+            :class="[isActive ? '' : 'active']"
             v-for="month in months"
             :key="`${month.monthLabel}-${month.yearNum.toString()}-${months.length}`">
             <div
             class="calendar-grid-container"
-                    :class="[isInitialView === true ? 'initial-view' : '', month.monthClass]">
+            :class="[isInitialView === true ? 'initial-view' : '', month.monthClass, isAddingNewMonth === true ? 'is-adding-new-month' : '']">
             <div class="month-year body-small d-flex align-items-center ps-3 small">
                 {{ month.monthLabel }} {{ month.yearNum.toString() }}
             </div>
@@ -48,14 +50,15 @@
 </div>
 </div>
 </fieldset>
+
+</div>
 <button
 v-if="calendarViewDirection === 'future'"
 type="button"
 class="btn-link"
-            @click="goForward">
+@click="goForward(); toggleClass()">
 View more dates
 </button>
-    </div>
 </template>
 
 <script>
@@ -71,6 +74,7 @@ export default {
     name: "datePicker",
     data() {
         return {
+            isActive: false,
             calendarData: [],
             monthsBeforeToLoadOffset: 0,
             monthsAfterToLoadOffset: 1,
@@ -78,6 +82,7 @@ export default {
             isInitialView: true,
             initialViewRowsToShow: 5,
             initialViewRowsTally: 0,
+            isAddingNewMonth: false,
         };
     },
     props: {
@@ -130,6 +135,9 @@ export default {
         },
     },
     methods: {
+        toggleClass: function (event) {
+            this.isActive = !this.isActive;
+        },
         goForward() {
             if (this.isInitialView) {
                 this.isInitialView = false; // 1st click removes hidden styling
@@ -271,6 +279,9 @@ export default {
                         this.initialViewRowsTally++;
                     }
                 }
+            } else {
+                debugger; // eslint-disable-line no-debugger
+                monthClass = monthClass + ' new-month';
             }
 
             if (this.selectableDates === "custom") {
@@ -335,6 +346,10 @@ export default {
             return monthToAdd;
         },
         addMonthData() {
+            //this.isAddingNewMonth = true;
+            const oldMonth = document.querySelector(".new-month");
+            oldMonth?.classList.remove("new-month");
+            debugger; // eslint-disable-line no-debugger
             const monthToAdd = this.getMonthData();
             if (this.calendarViewDirection === "future") {
                 this.calendarData.push(monthToAdd);
@@ -342,6 +357,15 @@ export default {
             if (this.calendarViewDirection === "past") {
                 this.calendarData.unshift(monthToAdd);
             }
+            let newMonth;
+            this.$nextTick(() => {
+                debugger; // eslint-disable-line no-debugger
+                newMonth = document.querySelector(".new-month");
+                newMonth.classList.add("is-adding-new-month");
+            });
+            setTimeout(() => {
+                newMonth.classList.remove("is-adding-new-month");
+            }, .025);
         },
         isSelectableDate(thisDate) {
             const testForDate = (dateInArray) => {
@@ -371,9 +395,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.date-picker {
     .calendar-grid-container {
         margin: 0 auto;
         max-width: 414px;
+        max-height: 500px;
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         justify-content: center;
@@ -435,6 +461,9 @@ export default {
             justify-content: center;
             align-items: center;
             outline: none;
+            height: 2rem;
+            opacity: 1;
+            transition: ease all 250ms;
 
             input[type="radio"] {
                 position: absolute; //override bootstrap
@@ -571,7 +600,18 @@ export default {
                 display: none;
             }
             .day-hidden {
-            display: none;
+                opacity: 0;
+                height: 0;
+                overflow: hidden;
+                display: flex;
+                margin: 0;
+            }
+        }
+        &.is-adding-new-month {
+            &.new-month {
+                max-height: 0;
+                overflow: hidden;
+                transition: all ease 2s;
             }
         }
     }
@@ -631,4 +671,15 @@ export default {
             }
         }
     }
+    .btn-link {
+        background: transparent;
+        border: none;
+        margin-top: 2rem;
+    }
+    .new-month {
+        max-height: 500px;
+        overflow: hidden;
+        transition: all ease 10s;
+    }
+}
 </style>