Feat/onclick header tab

packages/oui-header-tabs/README.md

@@ -84,6 +84,19 @@
 </oui-page-header>
 ```
 
+
+### With action click
+
+```html:preview
+<oui-header-tabs>
+    <oui-header-tabs-item text="Home" href="/#" on-click="$ctrl.onActionClick()"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Page Header" href="/#!/oui-angular/page-header"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Header Tabs" href="/#!/oui-angular/header-tabs" active></oui-header-tabs-item>
+    <oui-header-tabs-item text="Pagination" href="/#!/oui-angular/pagination"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Datagrid" href="/#!/oui-angular/datagrid" on-click="$ctrl.onActionClick()"></oui-header-tabs-item>
+</oui-header-tabs>
+```
+
 ## API
 
 ### oui-header-tabs-item
@@ -97,6 +110,7 @@
 | `active`      | boolean   | <?        | no                | `true`, `false`   | `false`   | manual active flag
 | `disabled`    | boolean   | <?        | yes               | `true`, `false`   | `false`   | disabled flag
 | `external`    | boolean   | <?        | yes               | `true`, `false`   | `false`   | external link flag
+| `on-click`    | function  | &         | no                | n/a               | n/a       | click handler
 
 **Note**: `ui-router` is needed for the attributes `state` and `state-params`.
 

packages/oui-header-tabs/src/header-tabs-item.component.js

@@ -11,6 +11,7 @@ export default {
         stateParams: "<?",
         external: "<?",
         active: "<?",
-        disabled: "<?"
+        disabled: "<?",
+        onClick: "&"
     }
 };

packages/oui-header-tabs/src/header-tabs-item.html

@@ -4,13 +4,15 @@
     <a ng-attr-rel="{{::$ctrl.linkRel}}"
        ng-attr-target="{{::$ctrl.linkTarget}}"
        ng-href="{{::$ctrl.href}}"
-       ng-if="!!$ctrl.href && !$ctrl.disabled">
+       ng-if="!!$ctrl.href && !$ctrl.disabled"
+       ng-click="$ctrl.onClick()">
         <span ng-bind="::$ctrl.text"></span>
         <span class="oui-icon oui-icon-external_link" aria-hidden="true"
               ng-if="::$ctrl.external">
         </span>
     </a>
     <a ng-bind="::$ctrl.text"
+       ng-click="$ctrl.onClick()"
        ng-if="!!$ctrl.state && !$ctrl.disabled"
        ui-sref="{{::$ctrl.getFullSref()}}">
     </a>

packages/oui-header-tabs/src/index.spec.js

@@ -126,5 +126,21 @@ describe("ouiHeaderTabs", () => {
             expect($separator.hasClass("oui-dropdown-menu__divider")).toBe(true);
             expect($separator.attr("role")).toBe("separator");
         });
+
+        it("should call function of onClick attribute, when header tab item is clicked", () => {
+            const clickSpy = jasmine.createSpy("spy");
+            const element = TestUtils.compileTemplate(`
+                <oui-header-tabs>
+                    <oui-header-tabs-item text="Tab" href="/#" on-click="$ctrl.clickHandler()"></oui-header-tabs-item>
+                </oui-header-tabs>`, {
+                    clickHandler: clickSpy
+                }
+            );
+
+            const item = element[0].querySelector(".oui-header-tabs__item a");
+            angular.element(item).triggerHandler("click");
+            expect(clickSpy).toHaveBeenCalled();
+            expect(clickSpy.calls.count()).toEqual(1);
+        });
     });
 });