diff --git a/package.json b/package.json index c29524a5..3ab57960 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "babel-register": "^6.18.0", "cross-env": "^5.1.0", "css-loader": "^0.28.4", - "eslint": "^3.13.1", + "eslint": "^4.3.0", "eslint-config-ovh": "^0.1.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.9.0", diff --git a/packages/oui-navbar/README.md b/packages/oui-navbar/README.md index 8935a624..86558664 100644 --- a/packages/oui-navbar/README.md +++ b/packages/oui-navbar/README.md @@ -298,12 +298,41 @@ It defines the menu in reponsive mode. It will be visible only for screen resolu ### With component `oui-navbar-toggler` +#### As toggler menu + ```html:preview ``` +#### As toggler button + +```html:preview +
+

+ +

+
+ + + + +
+

active value: {{!!$ctrl.togglerActive | json}}

+
+``` + +**Note**: By using this mode, you disable the internal `oui-navbar-backdrop` and toggler navigation. + ## Aside Links ### With attribute `aside-links` diff --git a/packages/oui-navbar/src/index.spec.js b/packages/oui-navbar/src/index.spec.js index 3635153b..d7d6db88 100644 --- a/packages/oui-navbar/src/index.spec.js +++ b/packages/oui-navbar/src/index.spec.js @@ -581,6 +581,47 @@ describe("ouiNavbar", () => { }); }); + describe("Toggler", () => { + it("should set the toggler active", () => { + const component = testUtils.compileTemplate(` + + `); + const scope = component.scope(); + const toggler = angular.element(component[0].querySelector(".oui-navbar-toggler")); + + expect(toggler.attr("aria-expanded")).toBe("false"); // Check when undefined + + scope.$ctrl.active = true; + scope.$apply(); + expect(toggler.attr("aria-expanded")).toBe("true"); + + scope.$ctrl.active = false; + scope.$apply(); + expect(toggler.attr("aria-expanded")).toBe("false"); + }); + + it("should set the toggler loading", () => { + const component = testUtils.compileTemplate(` + + `); + const scope = component.scope(); + const toggler = angular.element(component[0].querySelector(".oui-navbar-toggler_button")); + + expect(toggler.hasClass("ng-hide")).toBeFalsy(); // ngHide: Check when undefined + expect(angular.element(component[0].querySelector(".oui-navbar-toggler_loading")).length).toBe(0); // ngIf + + scope.$ctrl.loading = true; + scope.$apply(); + expect(toggler.hasClass("ng-hide")).toBeTruthy(); + expect(angular.element(component[0].querySelector(".oui-navbar-toggler_loading")).length).toBe(1); + + scope.$ctrl.loading = false; + scope.$apply(); + expect(toggler.hasClass("ng-hide")).toBeFalsy(); + expect(angular.element(component[0].querySelector(".oui-navbar-toggler_loading")).length).toBe(0); + }); + }); + describe("Backdrop", () => { const data = mockData.mainLinks; diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.component.js b/packages/oui-navbar/src/toggler/navbar-toggler.component.js index 9a4cbff3..8a5833a7 100644 --- a/packages/oui-navbar/src/toggler/navbar-toggler.component.js +++ b/packages/oui-navbar/src/toggler/navbar-toggler.component.js @@ -6,7 +6,10 @@ export default { navbarCtrl: "^^ouiNavbar" }, bindings: { - links: "<" + links: " @@ -10,12 +10,12 @@ - +