From c1badf70f2cc18d8df252894abe4feb9412cb612 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 21 Mar 2023 16:32:40 -0400
Subject: [PATCH] CSR-886: animate new months to fade in

---
 .../date-picker/date-picker.vue               | 181 +++++++++---------
 .../demo-date-picker/demo-date-picker.vue     |   4 +-
 2 files changed, 93 insertions(+), 92 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index d1db69518..f04e48324 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -3,62 +3,65 @@
         <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, 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() }}
+                v-for="month in months"
+                :key="`${month.monthLabel}-${month.yearNum.toString()}-${months.length}`">
+                <div
+                    class="calendar-grid-container position-relative"
+                    :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>
+                    <div
+                        v-if="calendarViewDirection === 'future'"
+                        class="legend caption d-flex align-items-center justify-content-end">
+                        <span class="legend-circle me-1"></span> &equals; Available
+                    </div>
+                    <div class="nav-back ps-3"><button></button></div>
+                    <div class="nav-forward pe-3"><button></button></div>
+                    <!-- Do the days of the weeek need to be read? -->
+                    <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
+                    <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
+                    <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
+                    <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
+                    <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
+                    <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
+                    <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
+                    <div
+                        v-for="date in month.dates"
+                        :key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
+                        class="grid-item radio-wrapper"
+                        :class="[
+                            date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
+                            date.dayClasses,
+                        ]">
+                        <input
+                            :disabled="!isSelectableDate(date.inputValue)"
+                            type="radio"
+                            name="day-of-month"
+                            v-model="selectedDate"
+                            :value="date.inputValue"
+                            :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
+                        <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
+                            <span>{{ date.dateNum.toString() }}</span>
+                        </label>
+                    </div>
+                </div>
             </div>
-            <div
-            v-if="calendarViewDirection === 'future'"
-            class="legend caption d-flex align-items-center justify-content-end">
-            <span class="legend-circle me-1"></span> &equals; Available
-        </div>
-        <div class="nav-back ps-3"><button></button></div>
-        <div class="nav-forward pe-3"><button></button></div>
-        <!-- Do the days of the weeek need to be read? -->
-        <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
-        <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
-        <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
-        <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
-        <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
-        <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
-        <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
-        <div
-        v-for="date in month.dates"
-        :key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
-        class="grid-item radio-wrapper"
-        :class="[
-        date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
-        date.dayClasses,
-        ]">
-        <input
-        :disabled="!isSelectableDate(date.inputValue)"
-        type="radio"
-        name="day-of-month"
-        v-model="selectedDate"
-        :value="date.inputValue"
-        :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
-        <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
-            <span>{{ date.dateNum.toString() }}</span>
-        </label>
+        </fieldset>
     </div>
-</div>
-</div>
-</fieldset>
-
-</div>
-<button
-v-if="calendarViewDirection === 'future'"
-type="button"
-class="btn-link"
-@click="goForward(); toggleClass()">
-View more dates
-</button>
+    <button
+        v-if="calendarViewDirection === 'future'"
+        type="button"
+        class="btn-link"
+        @click="
+            goForward();
+        ">
+        View more dates
+    </button>
 </template>
 
 <script>
@@ -74,7 +77,6 @@ export default {
     name: "datePicker",
     data() {
         return {
-            isActive: false,
             calendarData: [],
             monthsBeforeToLoadOffset: 0,
             monthsAfterToLoadOffset: 1,
@@ -111,8 +113,8 @@ export default {
     computed: {
         todayDate() {
             return this.todayOverrideDateString
-            ? new Date(this.todayOverrideDateString)
-            : new Date();
+                ? new Date(this.todayOverrideDateString)
+                : new Date();
         },
         months() {
             if (this.calendarData?.length < 1) {
@@ -135,9 +137,6 @@ export default {
         },
     },
     methods: {
-        toggleClass: function (event) {
-            this.isActive = !this.isActive;
-        },
         goForward() {
             if (this.isInitialView) {
                 this.isInitialView = false; // 1st click removes hidden styling
@@ -226,23 +225,23 @@ export default {
 
             const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
             currentWeekStartDateNum =
-            todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
+                todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
             const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
             let monthEndDateNum = monthEndDate.getDate(); // BOTH
             currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
             if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum)
-            monthEndDateNum = currentWeekEndDateNum; // PAST
+                monthEndDateNum = currentWeekEndDateNum; // PAST
             const monthStartDateNum =
-            offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE
+                offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE
             const monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
             const startDateDayIndex = monthStartDate.getDay(); // FUTURE
             const endDateDayIndex = monthEndDate.getDay(); // PAST
 
             if (typeof offset !== "undefined") {
                 if (offset === 0 && direction === "future")
-                firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
+                    firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
                 if (offset === 0 && direction === "past")
-                firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
+                    firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
 
                 while (
                     direction === "future" &&
@@ -280,8 +279,7 @@ export default {
                     }
                 }
             } else {
-                debugger; // eslint-disable-line no-debugger
-                monthClass = monthClass + ' new-month';
+                monthClass = monthClass + " new-month";
             }
 
             if (this.selectableDates === "custom") {
@@ -346,26 +344,23 @@ 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
+            this.isAddingNewMonth = true;
+
             const monthToAdd = this.getMonthData();
             if (this.calendarViewDirection === "future") {
+                let month = this.calendarData[this.calendarData.length - 1];
+                month.monthClass = month.monthClass.replace("new-month", "");
                 this.calendarData.push(monthToAdd);
             }
             if (this.calendarViewDirection === "past") {
+                let month = this.calendarData[0];
+                month.monthClass = month.monthClass.replace("new-month", "");
                 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);
+                this.isAddingNewMonth = false;
+            }, 0.010);
         },
         isSelectableDate(thisDate) {
             const testForDate = (dateInArray) => {
@@ -376,16 +371,16 @@ export default {
                 );
             };
             const isSelectable =
-            this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
+                this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
             return isSelectable;
         },
         updateSelectableDates(monthStart, monthEnd) {
             this.customSelectableDatesCallback(monthStart, monthEnd)?.forEach((newObj) => {
                 const index = this.selectableDatesData.findIndex(
                     (obj) =>
-                    obj.year === newObj.year &&
-                    obj.month === newObj.month &&
-                    obj.date === newObj.date
+                        obj.year === newObj.year &&
+                        obj.month === newObj.month &&
+                        obj.date === newObj.date
                 );
                 if (index === -1) this.selectableDatesData.push(newObj);
             });
@@ -397,14 +392,16 @@ export default {
 <style lang="scss" scoped>
 .date-picker {
     .calendar-grid-container {
-        margin: 0 auto;
+        margin: 4px auto;
         max-width: 414px;
         max-height: 500px;
+        overflow: hidden;
+        transition: all ease 1s;
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         justify-content: center;
         align-items: center;
-        padding: 4px;
+        padding: 0;
 
         .grid-item {
             text-align: center;
@@ -439,6 +436,14 @@ export default {
             text-transform: uppercase;
             font-weight: 300;
             letter-spacing: 0.75px;
+
+            &:after {
+                content: '';
+                position: absolute;
+                width: 100%;
+                margin: 6rem 0 4.2rem 0;
+                border-bottom: 1px solid $gray-300;
+            }
         }
         .legend {
             grid-area: 1 / 5 / 2 / 8;
@@ -610,8 +615,6 @@ export default {
         &.is-adding-new-month {
             &.new-month {
                 max-height: 0;
-                overflow: hidden;
-                transition: all ease 2s;
             }
         }
     }
@@ -677,9 +680,7 @@ export default {
         margin-top: 2rem;
     }
     .new-month {
-        max-height: 500px;
-        overflow: hidden;
-        transition: all ease 10s;
+        max-height: 550px;
     }
 }
 </style>
diff --git a/src/layouts/demo-date-picker/demo-date-picker.vue b/src/layouts/demo-date-picker/demo-date-picker.vue
index 885156d66..49740936d 100644
--- a/src/layouts/demo-date-picker/demo-date-picker.vue
+++ b/src/layouts/demo-date-picker/demo-date-picker.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="page-container-grouped-styles">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <div class="select-car">
-            <div class="select-car-form rounded text-center">
+        <div class="">
+            <div class="rounded text-center">
                 <div class="fade-on-route-transition">
                     <date-picker
                         selectableDates="custom"