feat(oui-stepper): add new attribute (editable)

By default, after validating a step, user can edit it and update his choice.

<oui-step-form header="Simple step" description="This is a description">

we want to let our developpers decide when this update is possible. Today, user can do it as he wishes, this can be problematic in case of loading for example.

Example:

<oui-step-form header="Simple step" description="This is a description" editable="false">

will result by removing the link: "Modifying this step"

Author: jleveugle

packages/oui-stepper/README.md

@@ -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-stepper/src/index.spec.js

@@ -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/src/step-form/step-form.component.js

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

packages/oui-stepper/src/step-form/step-form.controller.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;

packages/oui-stepper/src/step-form/step-form.html

@@ -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>