From b17419879cc6dcf4b6e80358108d37506dd1a4ab Mon Sep 17 00:00:00 2001
From: Marie JONES <marie.jones@corp.ovh.com>
Date: Wed, 7 Nov 2018 16:56:58 +0100
Subject: [PATCH] feat(oui-navbar): allow to animate icon on aside links

---
 packages/oui-navbar/README.md                               | 4 ++++
 .../oui-navbar/src/dropdown/navbar-dropdown.component.js    | 1 +
 packages/oui-navbar/src/dropdown/navbar-dropdown.html       | 6 ++++--
 packages/oui-navbar/src/index.spec.data.json                | 1 +
 packages/oui-navbar/src/index.spec.js                       | 6 ++++++
 packages/oui-navbar/src/navbar.html                         | 1 +
 6 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/oui-navbar/README.md b/packages/oui-navbar/README.md
index f90107e8..26d6dca1 100644
--- a/packages/oui-navbar/README.md
+++ b/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
 
diff --git a/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js b/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
index 13d1f672..c29daf3f 100644
--- a/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
+++ b/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
@@ -11,6 +11,7 @@ export default {
         label: "@?ariaLabel",
         iconBadge: "<?",
         iconClass: "@?",
+        iconAnimated: "<?",
         onClick: "&"
     },
     controller,
diff --git a/packages/oui-navbar/src/dropdown/navbar-dropdown.html b/packages/oui-navbar/src/dropdown/navbar-dropdown.html
index 117b07fe..8d8279a3 100644
--- a/packages/oui-navbar/src/dropdown/navbar-dropdown.html
+++ b/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">
diff --git a/packages/oui-navbar/src/index.spec.data.json b/packages/oui-navbar/src/index.spec.data.json
index d990b114..3ab25b49 100644
--- a/packages/oui-navbar/src/index.spec.data.json
+++ b/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",
diff --git a/packages/oui-navbar/src/index.spec.js b/packages/oui-navbar/src/index.spec.js
index 76e0ca27..5045b5cc 100644
--- a/packages/oui-navbar/src/index.spec.js
+++ b/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", () => {
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 4ab051c7..bc2d94e8 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/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"