Develop

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",

packages/oui-action-menu/src/index.spec.js

@@ -25,11 +25,9 @@ describe("ouiActionMenu", () => {
             const element = TestUtils.compileTemplate(
                 `<oui-action-menu>
                   <oui-action-menu-item on-click="$ctrl.clickHandler()">Action 1</oui-action-menu-item>
-                </oui-action-menu>`,
-                {
+                </oui-action-menu>`, {
                     clickHandler: clickSpy
-                }
-            );
+                });
 
             const buttonElement = element[0].querySelector("button");
             expect(buttonElement).toBeTruthy();

packages/oui-angular/src/index.js

@@ -23,8 +23,6 @@ import Pagination from "@oui-angular/oui-pagination/src";
 import Popover from "@oui-angular/oui-popover/src";
 import Progress from "@oui-angular/oui-progress/src";
 import Radio from "@oui-angular/oui-radio/src";
-import RadioGroup from "@oui-angular/oui-radio-group/src";
-import RadioToggleGroup from "@oui-angular/oui-radio-toggle-group/src";
 import Search from "@oui-angular/oui-search/src";
 import Select from "@oui-angular/oui-select/src";
 import SelectPicker from "@oui-angular/oui-select-picker/src";
@@ -64,8 +62,6 @@ export default angular
         Popover,
         Progress,
         Radio,
-        RadioGroup,
-        RadioToggleGroup,
         Search,
         Select,
         SelectPicker,

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

@@ -25,8 +25,6 @@ loadTests(require.context("../../oui-pagination/src/", true, /.*((\.spec)|(index
 loadTests(require.context("../../oui-popover/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-progress/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-radio/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-radio-group/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-radio-toggle-group/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-search/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-select/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-select-picker/src/", true, /.*((\.spec)|(index))$/));

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

@@ -219,8 +219,8 @@ describe("ouiCheckbox", () => {
                 const element = TestUtils.compileTemplate(`
                         <oui-checkbox required="$ctrl.isRequired"></oui-checkbox>
                     `, {
-                    isRequired: true
-                });
+                        isRequired: true
+                    });
 
                 const checkboxElement = getCheckboxInputElement(element);
                 expect(angular.element(checkboxElement).prop("required")).toBe(true);
@@ -230,8 +230,8 @@ describe("ouiCheckbox", () => {
                 const element = TestUtils.compileTemplate(`
                         <oui-checkbox required="$ctrl.isRequired"></oui-checkbox>
                     `, {
-                    isRequired: false
-                });
+                        isRequired: false
+                    });
 
                 const checkboxElement = getCheckboxInputElement(element);
                 expect(angular.element(checkboxElement).prop("required")).toBe(false);
@@ -242,8 +242,8 @@ describe("ouiCheckbox", () => {
                         <oui-checkbox name="checkbox" required="$ctrl.isRequired"></oui-checkbox>
                     </form>
                     `, {
-                    isRequired: true
-                });
+                        isRequired: true
+                    });
 
                 const form = element.scope().form;
                 const checkboxElement = getCheckboxInputElement(element);

packages/oui-criteria-adder/src/index.spec.js

@@ -73,13 +73,14 @@ describe("ouiCriteriaAdder", () => {
             const submitButton = component[0].querySelectorAll("[type=submit]");
             const dropdown = component.find("oui-dropdown");
             const fields = component.find("oui-field");
+            const expectedLength = 3;
 
             expect(form.length).toBe(1);
             expect(triggerButton.length).toBe(1);
             expect(submitButton.length).toBe(1);
             expect(angular.element(triggerButton).attr("oui-dropdown-trigger")).toBeDefined();
             expect(dropdown.length).toBe(1);
-            expect(fields.length).toBe(3);
+            expect(fields.length).toBe(expectedLength);
         });
 
         it("should have an attribute id and name on the form and every inputs/selectors, and removed on the root component", () => {

packages/oui-criteria-container/src/index.spec.js

@@ -66,7 +66,8 @@ describe("ouiCriteriaContainer", () => {
         it("should delete a criteria", () => {
             controller.criteria.push(criterion);
             controller.criteria.push(criterion2);
-            expect(controller.criteria.length).toEqual(2);
+            const expectedLength = 2;
+            expect(controller.criteria.length).toEqual(expectedLength);
 
             controller.remove(criterion);
             expect(controller.criteria.length).toEqual(1);
@@ -87,13 +88,15 @@ describe("ouiCriteriaContainer", () => {
             expect(controller.criteria.length).toEqual(0);
 
             controller.set(criteria);
-            expect(controller.criteria.length).toEqual(2);
+            const expectedLength = 2;
+            expect(controller.criteria.length).toEqual(expectedLength);
         });
 
         it("should delete all criteria", () => {
             controller.criteria.push(criterion);
             controller.criteria.push(criterion2);
-            expect(controller.criteria.length).toEqual(2);
+            const expectedLength = 2;
+            expect(controller.criteria.length).toEqual(expectedLength);
 
             controller.clear();
             expect(controller.criteria.length).toEqual(0);

packages/oui-datagrid/src/filter/filter.spec.js

@@ -83,7 +83,8 @@ describe("Filter", () => {
         it("should apply 1 filter", () => {
             filter = new Filter([textSearchCriterion], columns);
             const filtered = filter.applyFilter(fakeData);
-            expect(filtered.length).toBe(2);
+            const expectedLength = 2;
+            expect(filtered.length).toBe(expectedLength);
         });
     });
 
@@ -92,7 +93,8 @@ describe("Filter", () => {
             it("should find text in object", () => {
                 filter = new Filter([textSearchCriterion], columns);
                 const filtered = filter.applyCriteria(fakeData, textSearchCriterion);
-                expect(filtered.length).toBe(2);
+                const expectedLength = 2;
+                expect(filtered.length).toBe(expectedLength);
             });
         });
 
@@ -106,7 +108,8 @@ describe("Filter", () => {
                         operator: "contains",
                         value: "aaron"
                     });
-                    expect(filtered.length).toBe(2);
+                    const expectedLength = 2;
+                    expect(filtered.length).toBe(expectedLength);
                 });
 
                 it("should filter (negated)", () => {
@@ -117,7 +120,8 @@ describe("Filter", () => {
                         operator: "containsNot",
                         value: "aaron"
                     });
-                    expect(filtered.length).toBe(fakeData.length - 2);
+                    const expectedLength = 2;
+                    expect(filtered.length).toBe(fakeData.length - expectedLength);
                 });
             });
 

packages/oui-datagrid/src/parameters/datagrid-parameters.spec.js

@@ -66,7 +66,7 @@ describe("ouiDatagridParameters", () => {
 
             it("should display a disabled checkbox column when customization is prevented", () => {
                 const columnsElements = getColumns(element);
-                const disabledColumn = getCheckbox(columnsElements, 3);
+                const disabledColumn = getCheckbox(columnsElements, 3); // eslint-disable-line no-magic-numbers
                 expect(disabledColumn.prop("disabled")).toBe(true);
             });
         });
@@ -91,7 +91,7 @@ describe("ouiDatagridParameters", () => {
                 const columnsElements = getColumns(element);
                 const $checkbox1 = getCheckbox(columnsElements, 0);
                 const $checkbox2 = getCheckbox(columnsElements, 1);
-                const $checkbox3 = getCheckbox(columnsElements, 2);
+                const $checkbox3 = getCheckbox(columnsElements, 2); // eslint-disable-line no-magic-numbers
                 const expected = angular.copy(columns);
                 expected[0].hidden = true;
 

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

@@ -190,8 +190,9 @@ describe("ouiDropdown", () => {
                     </oui-dropdown>
                 `);
                 const links = element.find("oui-dropdown-item").find("a");
+                const expectedLength = 2;
 
-                expect(links.length).toBe(2);
+                expect(links.length).toBe(expectedLength);
                 expect(links.hasClass("oui-dropdown-option")).toBeTruthy();
             });
 

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

@@ -425,6 +425,7 @@ describe("ouiField", () => {
         describe("with radio buttons", () => {
             it("should detect all the radio buttons", () => {
                 const name = "protocol";
+                const expectedLength = 3;
 
                 const element = TestUtils.compileTemplate(`
                     <oui-field>
@@ -454,7 +455,7 @@ describe("ouiField", () => {
                 const controller = element.controller("ouiField");
 
                 // There is 3 HTML elements with the same name
-                expect(controller.controls[name].length).toEqual(3);
+                expect(controller.controls[name].length).toEqual(expectedLength);
             });
         });
 

packages/oui-form-actions/src/index.spec.js

@@ -114,8 +114,8 @@ describe("ouiFormActions", () => {
                     on-submit="$ctrl.onSubmitTest()"
                     on-cancel="$ctrl.onCancelTest()">
                 </oui-form-actions>`, {
-                onSubmitTest: jasmine.createSpy("onSubmit")
-            });
+                    onSubmitTest: jasmine.createSpy("onSubmit")
+                });
             component.find("button").eq(0).triggerHandler("click");
 
             expect(component.scope().$ctrl.onSubmitTest).toHaveBeenCalled();
@@ -127,8 +127,8 @@ describe("ouiFormActions", () => {
                     on-submit="$ctrl.onSubmitTest()"
                     on-cancel="$ctrl.onCancelTest()">
                 </oui-form-actions>`, {
-                onCancelTest: jasmine.createSpy("onCancel")
-            });
+                    onCancelTest: jasmine.createSpy("onCancel")
+                });
             component.find("button").eq(1).triggerHandler("click");
 
             expect(component.scope().$ctrl.onCancelTest).toHaveBeenCalled();

packages/oui-message/README.md

@@ -4,28 +4,26 @@
 
 ## Usage
 
-### Information
+### Basic
 
 ```html:preview
 <oui-message type="info">Message</oui-message>
-```
-
-### Success
-
-```html:preview
 <oui-message type="success">Message</oui-message>
+<oui-message type="warning">Message</oui-message>
+<oui-message type="error">Message</oui-message>
 ```
 
-### Warning
+**Note**: Messages of type `info` and `success` are dismissable by default.
 
-```html:preview
-<oui-message type="warning">Message</oui-message>
-```
+### Dismissable
 
-### Error
+You can force the dismissable state by adding `dismissable` attribute.
 
 ```html:preview
-<oui-message type="error">Message</oui-message>
+<oui-message type="info" dismissable="false">Message</oui-message>
+<oui-message type="success" dismissable="false">Message</oui-message>
+<oui-message type="warning" dismissable>Message</oui-message>
+<oui-message type="error" dismissable>Message</oui-message>
 ```
 
 ### Accessibility
@@ -39,5 +37,6 @@
 | Attribute                 | Type      | Binding   | One-time binding  | Values                                | Default   | Description
 | ----                      | ----      | ----      | ----              | ----                                  | ----      | ----
 | `type`                    | string    | @         | yes               | `info`, `success`, `warning`, `error` | n/a       | message type
-| `aria-close-button-label` | function  | @?        | yes               | n/a                                   | n/a       | accessibility label for close button
+| `aria-close-button-label` | string    | @?        | yes               | n/a                                   | n/a       | accessibility label for close button
+| `dismissable`             | boolean   | <?        | yes               | `true`, `false`                       | n/a       | dismissable flag for close button
 | `on-dismissed`            | function  | &?        | no                | n/a                                   | n/a       | dismissed handler

packages/oui-message/src/message.component.js

@@ -8,7 +8,7 @@ export default {
         type: "@",
         ariaCloseButtonLabel: "@?",
         dismissable: "<?",
-        onDismissed: "&?"
+        onDismissed: "&"
     },
     transclude: true
 };

packages/oui-message/src/message.controller.js

@@ -1,4 +1,4 @@
-import { addBooleanParameter } from "@oui-angular/common/component-utils";
+import { addBooleanParameter, addDefaultParameter } from "@oui-angular/common/component-utils";
 
 export default class {
     constructor ($attrs) {
@@ -8,14 +8,13 @@ export default class {
     }
 
     $onInit () {
+        // Guidelines default value for dismissable attribute
+        addDefaultParameter(this, "dismissable", this.type === "info" || this.type === "success");
         addBooleanParameter(this, "dismissable");
     }
 
     dismiss () {
         this.dismissed = true;
-
-        if (this.onDismissed) {
-            this.onDismissed();
-        }
+        this.onDismissed();
     }
 }

packages/oui-message/src/message.html

@@ -1,7 +1,7 @@
 <div ng-if="!$ctrl.dismissed" ng-class=":: 'oui-message oui-message_' + $ctrl.type" role="alert">
     <span class="oui-icon oui-icon_bicolor" ng-class=":: 'oui-icon-' + $ctrl.type + '_circle'" aria-hidden="true"></span>
     <div class="oui-message__body" ng-class=":: 'oui-message__body_' + $ctrl.type" ng-transclude></div>
-    <button ng-if=":: $ctrl.type === 'info' || $ctrl.type === 'success' || $ctrl.dismissable"
+    <button ng-if="::$ctrl.dismissable"
         class="oui-icon oui-icon-close oui-message__close-button"
         type="button"
         ng-click="$ctrl.dismiss()"

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
 <oui-navbar active-link="lorem">
     <oui-navbar-toggler links="$ctrl.togglerLinks"></oui-navbar-toggler>
 </oui-navbar>
 ```
 
+#### As toggler button
+
+```html:preview
+<div class="oui-doc-preview-only">
+    <p>
+        <button class="oui-button oui-button_primary" type="button" ng-class="{
+                'oui-button_primary': $ctrl.togglerLoading,
+                'oui-button_secondary': !$ctrl.togglerLoading
+            }" ng-click="$ctrl.togglerLoading = !$ctrl.togglerLoading">
+            Toggle loading
+        </button>
+    </p>
+</div>
+<oui-navbar active-link="lorem">
+    <oui-navbar-toggler
+        on-click="$ctrl.togglerActive = !$ctrl.togglerActive"
+        active="$ctrl.togglerActive"
+        loading="$ctrl.togglerLoading">
+    </oui-navbar-toggler>
+</oui-navbar>
+<div class="oui-doc-preview-only">
+    <p><strong>active value:</strong> {{!!$ctrl.togglerActive | json}}</p>
+</div>
+```
+
+**Note**: By using this mode, you disable the internal `oui-navbar-backdrop` and toggler navigation.
+
 ## Aside Links
 
 ### With attribute `aside-links`