Merge pull request #335 from ing-bank/fix/issue-302-part-2

fix(calendar): issue 302 part 2 - skipped month

packages/calendar/src/LionCalendar.js

@@ -553,12 +553,21 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
 
   __modifyDate(modify, { dateType, type, mode } = {}) {
     let tmpDate = new Date(this.centralDate);
+    // if we're not working with days, reset
+    // day count to first day of the month
+    if (type !== 'Date') {
+      tmpDate.setDate(1);
+    }
     tmpDate[`set${type}`](tmpDate[`get${type}`]() + modify);
-
+    // if we've reset the day count,
+    // restore day count as best we can
+    if (type !== 'Date') {
+      const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
+      tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays));
+    }
     if (!this.__isEnabledDate(tmpDate)) {
       tmpDate = this.__findBestEnabledDateFor(tmpDate, { mode });
     }
-
     this[dateType] = tmpDate;
   }
 

packages/calendar/test/lion-calendar.test.js

@@ -546,6 +546,31 @@ describe('<lion-calendar>', () => {
         clock.restore();
       });
 
+      it('supports navigating from larger months to smaller ones (day counts)', async () => {
+        // given
+        const inputDate = new Date('2019/08/31');
+        const element = await fixture(html`
+          <lion-calendar .centralDate="${inputDate}"> </lion-calendar>
+        `);
+        // when
+        const remote = new CalendarObject(element);
+        remote.nextMonthButtonEl.click();
+        await element.updateComplete;
+        // then
+        expect(remote.activeMonthAndYear).to.equal('September 2019');
+        expect(remote.centralDayObj.el).dom.to.equal(`
+          <button
+            class="calendar__day-button"
+            tabindex="0"
+            aria-label="30 September 2019 Monday"
+            aria-selected="false"
+            past=""
+            current-month="">
+            30
+          </button>
+        `);
+      });
+
       describe('Accessibility', () => {
         it('navigate buttons have a aria-label and title attribute with accessible label', async () => {
           const el = await fixture(html`