Merge pull request #426 from MisRob/tabs-updates

KTabsList: Fix incorrect focus state + add a new event

CHANGELOG.md

@@ -3,6 +3,7 @@
 Releases are recorded as git tags in the [Github releases](https://github.com/learningequality/kolibri-design-system/releases) page.
 
 ## Develop (to become version 1.5.x)
+- [#426] - Adds `'click'` event to `KTabsList`
 - [#425] - Adds `pinned` and `notPinned` icons. Updates `cloud` icon to outline
 - [#424] - Adds `laptop` `cloud `and `wifi` icons to KDS
 - [#351] - Wrap `KCheckbox` default slot's content in <label>
@@ -30,6 +31,8 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
 [#384]: https://github.com/learningequality/kolibri-design-system/pull/384
 [#403]: https://github.com/learningequality/kolibri-design-system/pull/403
 [#420]: https://github.com/learningequality/kolibri-design-system/pull/420
+[#424]: https://github.com/learningequality/kolibri-design-system/pull/424
+[#426]: https://github.com/learningequality/kolibri-design-system/pull/426
 
 ## Version 1.4.x
 

lib/tabs/KTabsList.vue

@@ -176,11 +176,8 @@
           if (activeRouteTab !== undefined) {
             const activeRouteTabId = activeRouteTab.dataset.tabid;
             this.emitActivate(activeRouteTabId);
-            this.focusedTabIdx = this.getTabIdx(activeRouteTabId);
           }
         });
-      } else {
-        this.focusedTabIdx = this.getTabIdx(this.activeTabId);
       }
       this.$el.addEventListener('keyup', this.onKeyUp);
     },
@@ -247,6 +244,7 @@
       },
       onClick(tabId, navigate, event) {
         this.focusedTabIdx = this.getTabIdx(tabId);
+        this.emitClick(tabId);
         this.emitActivate(tabId);
         if (navigate) {
           navigate(event);
@@ -272,6 +270,15 @@
          */
         this.$emit('activate', tabId);
       },
+      emitClick(tabId) {
+        /**
+         * Emitted when a tab is clicked. Its payload is the active tab ID.
+         * When compared to the `activate` event, `click` is emitted only when
+         * a user is interacting with tabs, whereas `activate` can be emitted
+         * programatically in addition to user interaction.
+         */
+        this.$emit('click', tabId);
+      },
     },
   };
 

lib/tabs/__tests__/KTabsList.spec.js

@@ -242,6 +242,13 @@ describe(`KTabsList`, () => {
         expect(wrapper.emitted().activate.length).toBe(2);
         expect(wrapper.emitted().activate[1][0]).toBe('tabGroups');
       });
+
+      it(`emits 'click' event with the tab id in the payload`, () => {
+        const links = wrapper.findAll('a');
+        links.at(2).trigger('click');
+        expect(wrapper.emitted().click.length).toBe(1);
+        expect(wrapper.emitted().click[0][0]).toBe('tabGroups');
+      });
     });
   });
 });