feat(oui-navbar): allow to animate icon on aside links

packages/oui-navbar/README.md

@@ -349,6 +349,7 @@ It defines the menu in reponsive mode. It will be visible only for screen resolu
 This property is only available for root links of `aside-links`.
 
 - `iconClass`: define `class` of the menu item icon.
+- `iconAnimated`: define if the menu item icon should be animated
 
 ```json
 [{
@@ -357,6 +358,7 @@ This property is only available for root links of `aside-links`.
     "label": String,
     "title": String,
     "iconClass": String,
+    "iconAnimated": Boolean,
     "subLinks": Array[{
         "label": String,
         "title": String,
@@ -379,6 +381,7 @@ This property is only available for root links of `aside-links`.
                 acknowledged: '!true'
             }).length"
             icon-class="{{asideLink.iconClass}}"
+            icon-animated="asideLink.name === 'notifications'"
             on-click="asideLink.onClick"
             ng-repeat="asideLink in $ctrl.asideLinks track by $index"
             ng-class="asideLink.class"
@@ -548,6 +551,7 @@ The property `name` **must be** `"user"`.
 | `text`                | string    | @         | yes               | n/a                                   | n/a       | text of the button
 | `aria-label`          | string    | @?        | yes               | n/a                                   | n/a       | accessibility label of the button
 | `icon-class`          | string    | @?        | yes               | n/a                                   | n/a       | classname of the button icon
+| `icon-animated`        | boolean   | <?        | no                | `true`, `false`                       | `false`   | defines if the menu item icon should be shaking 
 | `icon-badge`          | number    | <?        | no                | n/a                                   | n/a       | number on the badge of the button icon
 | `on-click`            | function  | &         | no                | n/a                                   | n/a       | click callback
 

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

@@ -11,6 +11,7 @@ export default {
         label: "@?ariaLabel",
         iconBadge: "<?",
         iconClass: "@?",
+        iconAnimated: "<?",
         onClick: "&"
     },
     controller,

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

@@ -5,9 +5,11 @@
     ng-class="::!!$ctrl.iconClass ? 'oui-navbar-link_icon' : null"
     ng-click="$ctrl.navbarCtrl.toggleMenu($ctrl.name); $ctrl.onClick();"
     oui-navbar-group="{{::$ctrl.name}}">
-    <span class="oui-icon" aria-hidden="true"
+    <span class="oui-icon {{:: 'navbar-' + $ctrl.iconClass }}" aria-hidden="true"
         ng-if="::!!$ctrl.iconClass"
-        ng-class="::'navbar-' + $ctrl.iconClass">
+        ng-class="{
+            'oui-icon_shake': $ctrl.iconAnimated
+        }">
         <span class="oui-icon__badge"
             ng-if="!!$ctrl.iconBadge"
             ng-bind="$ctrl.iconBadge">

packages/oui-navbar/src/index.spec.data.json

@@ -43,6 +43,7 @@
             "class": "navbar-notification__list",
             "title": "Notifications",
             "iconClass": "oui-icon oui-icon-info_circle",
+            "iconAnimated": true,
             "subLinks": [
               {
                 "subject": "Maecenas id ipsum suscipit",

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

@@ -546,6 +546,12 @@ describe("ouiNavbar", () => {
                 expect(data[userIndex].name).toBe("user");
                 expect(userMenu.hasClass("oui-navbar-menu_user")).toBe(true);
             });
+
+            it("should animate menu item icon", () => {
+                const notificationsIndex = 1;
+                const notificationsMenu = angular.element(menu.children("oui-navbar-dropdown")[notificationsIndex].querySelector(".oui-icon"));
+                expect(notificationsMenu.hasClass("oui-icon_shake")).toBe(true);
+            });
         });
 
         describe("Responsive menu", () => {

packages/oui-navbar/src/navbar.html

@@ -52,6 +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}}"
+        icon-animated="asideLink.iconAnimated ? asideLink.iconAnimated : false"
         on-click="asideLink.onClick()"
         ng-repeat="asideLink in $ctrl.asideLinks track by $index"
         ng-class="::!!asideLink.class ? asideLink.class : null"