feat(oui-navbar): allow actions on navbar menu links

packages/oui-navbar/README.md

@@ -250,6 +250,7 @@ This property is only available for root links of `main-links`.
     "title": String,
     "url": String<Url>,
     "isPrimary": Boolean,
+    "click": Function,
     "subLinks": Array[{
         "label": String,
         "title": String,
@@ -595,3 +596,4 @@ The property `name` **must be** `"user"`.
 | `state`               | string    | @?        | yes               | n/a                                   | n/a       | state of the link
 | `state-params`        | object    | <?        | yes               | n/a                                   | n/a       | state-params of the link
 | `variant`             | string    | @?        | yes               | `primary`, `secondary`, `tertiary`    | n/a       | style modifier of the link
+| `on-click`            | function  | &         | no                | n/a                                   | n/a       | click callback

packages/oui-navbar/src/index.spec.js

@@ -655,5 +655,35 @@ describe("ouiNavbar", () => {
                 expect(toggler.attr("aria-expanded")).toBe("false");
             });
         });
+
+        describe("Links", () => {
+            const data = mockData.mainLinks[0];
+
+            it("should call click callback", () => {
+                const onClickSpy = jasmine.createSpy("onClickSpy");
+                const navbar = testUtils.compileTemplate(
+                    `<oui-navbar>
+                        <oui-navbar-main>
+                            <oui-navbar-link name="name"
+                                             text="title"
+                                             href="url"
+                                             on-click="$ctrl.onClick()">
+                            </oui-navbar-link>
+                        <oui-navbar-main>
+                    </oui-navbar>`, {
+                        name: data.name,
+                        title: data.title,
+                        url: data.url,
+                        onClick: onClickSpy
+                    });
+
+                $timeout.flush();
+
+                const link = angular.element(navbar[0].querySelector(".oui-navbar-link"));
+                link.triggerHandler("click");
+
+                expect(onClickSpy).toHaveBeenCalled();
+            });
+        });
     });
 });

packages/oui-navbar/src/link/navbar-link.component.js

@@ -12,7 +12,8 @@ export default {
         state: "@?",
         stateParams: "<?",
         label: "@?ariaLabel",
-        variant: "@?"
+        variant: "@?",
+        onClick: "&"
     },
     controller,
     template

packages/oui-navbar/src/link/navbar-link.html

@@ -9,7 +9,8 @@
         'oui-navbar-link_tertiary': $ctrl.variant === 'tertiary'
     }"
     ng-href="{{::$ctrl.href}}"
-    ng-bind="::$ctrl.text">
+    ng-bind="::$ctrl.text"
+    ng-click="$ctrl.onClick()">
 </a>
 <a class="oui-navbar-link"
     ng-if="::!!$ctrl.state"
@@ -23,5 +24,6 @@
     }"
     ng-bind="::$ctrl.text"
     ui-sref="{{::$ctrl.getFullSref()}}"
-    ui-sref-active="oui-navbar-link_active">
+    ui-sref-active="oui-navbar-link_active"
+    ng-click="$ctrl.onClick()">
 </a>

packages/oui-navbar/src/menu/navbar-menu.html

@@ -31,7 +31,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
                 'oui-navbar_desktop-only': !!menuLink.subLinks,
                 'oui-navbar-link_external': !!menuLink.isExternal
             }"
-            ng-click="$ctrl.navbarCtrl.toggleMenu()"
+            ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"
             ng-href="{{::menuLink.url}}"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
@@ -50,7 +50,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             ng-class="::{
                 'oui-navbar_desktop-only': !!menuLink.subLinks
             }"
-            ng-click="$ctrl.navbarCtrl.toggleMenu()"
+            ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"
             ng-bind="::menuLink.title"
             ui-sref="{{::$ctrl.constructor.getFullSref(menuLink)}}"
             oui-navbar-group="{{::$ctrl.menuName}}"
@@ -60,7 +60,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
 
         <!-- Button (click) -->
         <button class="oui-navbar-link" type="button"
-            ng-if="::(!menuLink.subLinks && !!menuLink.click)"
+            ng-if="::(!menuLink.subLinks && !!menuLink.click && !menuLink.state  && !menuLink.url)"
             ng-attr-aria-label="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-attr-title="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"

packages/oui-navbar/src/navbar.html

@@ -34,7 +34,8 @@
         variant="{{::managerLink.isPrimary ? 'primary' : 'secondary'}}"
         aria-label="{{::!!managerLink.label ? managerLink.label : null}}"
         ng-repeat="managerLink in ::$ctrl.mainLinks track by $index"
-        ng-class="::!!managerLink.class ? managerLink.class : null">
+        ng-class="::!!managerLink.class ? managerLink.class : null"
+        on-click="managerLink.click()">
     </oui-navbar-link>
 </div>
 <!-- /Main Links -->
@@ -51,7 +52,7 @@
         aria-label="{{::!!asideLink.label ? asideLink.label : null}}"
         icon-badge="(asideLink.subLinks | filter: {isActive: 'true', acknowledged: '!true'}).length"
         icon-class="{{::!!asideLink.iconClass ? asideLink.iconClass : null}}"
-        on-click="asideLink.onClick"
+        on-click="asideLink.onClick()"
         ng-repeat="asideLink in $ctrl.asideLinks track by $index"
         ng-class="::!!asideLink.class ? asideLink.class : null"
         ng-switch="::asideLink.name">