Merge pull request #384 from ovh-ux/master

Sync master to develop

Author: AxelPeter

CHANGELOG.md

@@ -1,3 +1,40 @@
+<a name="2.28.0"></a>
+# [2.28.0](https://github.com/ovh-ux/ovh-ui-angular/compare/v2.27.0...v2.28.0) (2019-04-08)
+
+
+### Bug Fixes
+
+* **oui-navbar:** replace ng-bind with ng-bind-html for menu links ([#383](https://github.com/ovh-ux/ovh-ui-angular/issues/383)) ([2f3f129](https://github.com/ovh-ux/ovh-ui-angular/commit/2f3f129))
+
+
+### Features
+
+* **oui-navbar:** display full menu title on hover ([92a1f5d](https://github.com/ovh-ux/ovh-ui-angular/commit/92a1f5d))
+* **oui-stepper:** add editable attribute ([#381](https://github.com/ovh-ux/ovh-ui-angular/issues/381)) ([87ac063](https://github.com/ovh-ux/ovh-ui-angular/commit/87ac063))
+
+
+
+<a name="2.27.0"></a>
+# [2.27.0](https://github.com/ovh-ux/ovh-ui-angular/compare/v2.26.1...v2.27.0) (2019-04-04)
+
+
+### Bug Fixes
+
+* **oui-select-picker:** update when model changes ([#378](https://github.com/ovh-ux/ovh-ui-angular/issues/378)) ([a59bf96](https://github.com/ovh-ux/ovh-ui-angular/commit/a59bf96))
+* **oui-stepper:** call onSubmit when the form is not valid ([#379](https://github.com/ovh-ux/ovh-ui-angular/issues/379)) ([008583c](https://github.com/ovh-ux/ovh-ui-angular/commit/008583c))
+
+
+
+<a name="2.26.1"></a>
+## [2.26.1](https://github.com/ovh-ux/ovh-ui-angular/compare/v2.26.0...v2.26.1) (2019-03-28)
+
+
+### Bug Fixes
+
+* **oui-tabs:** add button type ([#376](https://github.com/ovh-ux/ovh-ui-angular/issues/376)) ([b8736c1](https://github.com/ovh-ux/ovh-ui-angular/commit/b8736c1))
+
+
+
 <a name="2.26.0"></a>
 # [2.26.0](https://github.com/ovh-ux/ovh-ui-angular/compare/v2.25.1...v2.26.0) (2019-03-26)
 

dist/oui-angular.min.js

@@ -3,7 +3,7 @@
   "description": "A set of maintainable components for the OVH ecosystem (Angular).",
   "license": "BSD-3-Clause",
   "author": "OVH SAS",
-  "version": "2.26.0",
+  "version": "2.28.0",
   "keywords": [
     "angular"
   ],

dist/oui-angular.min.js.map

@@ -13,7 +13,7 @@
         ng-if="::!!$ctrl.headerBreadcrumb"
         ng-bind="::$ctrl.headerBreadcrumb">
     </span>
-    <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
+    <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle" title="{{::$ctrl.headerTitle}}"></h3>
 </header>
 <ul class="oui-navbar-list">
     <li class="oui-navbar-list__item {{::!!menuLink.class ? menuLink.class : null}}"
@@ -35,7 +35,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             ng-href="{{::menuLink.url}}"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
-            <span ng-bind="::menuLink.title"></span>
+            <span ng-bind-html="::menuLink.title"></span>
             <span class="oui-icon oui-icon-external_link" aria-hidden="true"
                 ng-if="::!!menuLink.isExternal">
             </span>
@@ -51,7 +51,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
                 'oui-navbar_desktop-only': !!menuLink.subLinks
             }"
             ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"
-            ng-bind="::menuLink.title"
+            ng-bind-html="::menuLink.title"
             ui-sref="{{::$ctrl.constructor.getFullSref(menuLink)}}"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
@@ -64,7 +64,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             ng-attr-aria-label="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-attr-title="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"
-            ng-bind="::menuLink.title"
+            ng-bind-html="::menuLink.title"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
         </button>
@@ -80,7 +80,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
                 'oui-navbar_mobile-only': !!menuLink.url || !!menuLink.state
             }"
             ng-click="$ctrl.navbarCtrl.toggleMenu(menuLink.name, true)"
-            ng-bind="::menuLink.title"
+            ng-bind-html="::menuLink.title"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
         </button>

package.json

@@ -171,6 +171,7 @@
 | `loading-text`    | string    | @?        | no                | n/a               | n/a       | text for the loading state
 | `loading`         | boolean   | <?        | no                | `true`, `false`   | `false`   | display the loading state
 | `disabled`        | boolean   | <?        | no                | `true`, `false`   | `false`   | disable the step and shrink it
+| `editable`        | boolean   | <?        | no                | `true`, `false`   | `true`    | Define if user can go back on a step and edit it again 
 | `navigation`      | boolean   | <?        | no                | `true`, `false`   | `true`    | show the navigation buttons
 | `skippable`       | boolean   | <?        | no                | `true`, `false`   | `false`   | add button to skip facultative step
 | `valid`           | boolean   | <?        | no                | `true`, `false`   | `true`    | custom validation for the form

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

@@ -62,6 +62,52 @@ describe("ouiStepper", () => {
                 expect(form.hasClass(completeClass)).toBe(false);
             });
 
+            it("should display a editable step", () => {
+                let stepForm;
+                const element = TestUtils.compileTemplate(`
+                    <oui-stepper>
+                        <oui-step-form name='form' on-submit="$ctrl.onSubmitTest(form)"></oui-step-form>
+                    </oui-stepper>`, {
+                    onSubmitTest: (form) => {
+                        stepForm = form;
+                    }
+                });
+                const form = element.find("form").eq(0);
+                $timeout.flush();
+
+                form.triggerHandler("submit");
+
+                // $submitted is settled to false, fake it by access form directly and set it to true
+                stepForm.$submitted = true;
+                element.scope().$digest();
+
+                const editLink = angular.element(element[0].querySelector("button.oui-button.oui-button_link"));
+                expect(editLink.length).toBe(1);
+            });
+
+            it("should display a not-editable step", () => {
+                let stepForm;
+                const element = TestUtils.compileTemplate(`
+                    <oui-stepper>
+                        <oui-step-form name='form' on-submit="$ctrl.onSubmitTest(form)" editable="false"></oui-step-form>
+                    </oui-stepper>`, {
+                    onSubmitTest: (form) => {
+                        stepForm = form;
+                    }
+                });
+                const form = element.find("form").eq(0);
+                $timeout.flush();
+
+                form.triggerHandler("submit");
+
+                // $submitted is settled to false, fake it by access form directly and set it to true
+                stepForm.$submitted = true;
+                element.scope().$digest();
+
+                const editLink = angular.element(element[0].querySelector("button.oui-button.oui-button_link"));
+                expect(editLink.length).toBe(0);
+            });
+
             it("should display a loader", () => {
                 const element = TestUtils.compileTemplate("<oui-stepper><oui-step-form loading></oui-step-form></oui-stepper>");
                 $timeout.flush();

packages/oui-stepper/README.md

@@ -17,6 +17,7 @@ export default {
         submitText: "@?",
 
         disabled: "<?",
+        editable: "<?",
         loading: "<?",
         navigation: "<?",
         skippable: "<?",

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

@@ -13,6 +13,7 @@ export default class StepFormController {
 
     $onInit () {
         addBooleanParameter(this, "disabled");
+        addBooleanParameter(this, "editable");
         addBooleanParameter(this, "skippable");
 
         // Add default name
@@ -23,6 +24,11 @@ export default class StepFormController {
             addDefaultParameter(this, "cancelText", this.translations.cancelButtonLabel);
         }
 
+        // By default, we can edit a step
+        if (angular.isUndefined(this.$attrs.editable)) {
+            this.editable = true;
+        }
+
         // Show validation if no attribute 'navigation'
         if (angular.isUndefined(this.$attrs.navigation)) {
             this.navigation = true;
@@ -58,9 +64,8 @@ export default class StepFormController {
     }
 
     onFormSubmit (form) {
+        this.onSubmit({ form });
         if (form.$valid && this.valid) {
-            this.onSubmit({ form });
-
             // Focus next step
             this.stepperCtrl.addForm(form, this.stepper.index);
         }

packages/oui-stepper/src/step-form/step-form.component.js

@@ -15,7 +15,7 @@
             ng-bind="::$ctrl.translations.optionalLabel">
         </span>
         <button class="oui-button oui-button_link" type="button"
-            ng-if="!$ctrl.stepper.focused && !$ctrl.stepper.disabled && this[$ctrl.name].$submitted"
+            ng-if="!$ctrl.stepper.focused && !$ctrl.stepper.disabled && $ctrl.editable && this[$ctrl.name].$submitted"
             ng-click="$ctrl.setFocus(this[$ctrl.name])"
             ng-bind="::$ctrl.translations.modifyThisStep"></button>
     </header>