Feat/dynamic step

packages/oui-button/src/button.html

@@ -16,7 +16,7 @@
 >
   <span aria-hidden="true" class="oui-icon oui-icon_circle oui-icon-chevron-left"
     ng-if="::$ctrl.variantNav === 'previous'"></span>
-  <span ng-transclude>{{::$ctrl.text}}</span>
+  <span ng-transclude>{{$ctrl.text}}</span>
   <span aria-hidden="true" class="oui-icon oui-icon_circle oui-icon-chevron-right"
     ng-if="::$ctrl.variantNav === 'next'"></span>
 </button>

packages/oui-stepper/README.md

@@ -167,13 +167,14 @@
 | `description`     | string    | @?        | yes               | n/a               | n/a       | description of the step
 | `cancel-href`     | string    | @?        | yes               | n/a               | n/a       | link url on cancel
 | `cancel-text`     | string    | @?        | yes               | n/a               | n/a       | text for the cancel button
-| `submit-text`     | string    | @?        | yes               | n/a               | `Submit`  | text for the submit button
+| `submit-text`     | string    | @?        | no                | n/a               | `Submit`  | text for the submit button
 | `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
 | `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
+| `position`        | number    | @?        | no                | n/a               | n/a       | position where to insert step if used with ngIf
 | `on-cancel`       | function  | &?        | no                | n/a               | n/a       | cancel step function
 | `on-focus`        | function  | &         | no                | n/a               | n/a       | focused step function
 | `on-submit`       | function  | &         | no                | n/a               | n/a       | submit step function

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

@@ -152,6 +152,38 @@ describe("ouiStepper", () => {
                 // Final condition
                 expect(form2.hasClass(disabledClass)).toBe(false);
             });
+
+            it("should display dynamically steps", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-stepper>
+                        <oui-step-form name="form1"></oui-step-form>
+                        <oui-step-form name="form2" data-ng-if="$ctrl.isForm2" data-position="2"></oui-step-form>
+                        <oui-step-form name="form3"></oui-step-form>
+                    </oui-stepper>`, { isForm2: false });
+
+                $timeout.flush();
+
+                // it should be 2 forms
+                expect(element.find("form").length).toBe(2);
+
+                element.scope().$ctrl.isForm2 = true;
+
+                element.scope().$digest();
+
+                // it should be 3 forms
+                expect(element.find("form").length).toBe(3);
+
+                const form1 = element.find("form").eq(0);
+                const form2 = element.find("form").eq(1);
+                const form3 = element.find("form").eq(2);
+
+                // submit the form and be sure that second form is active
+                element.find("form").eq(0).triggerHandler("submit");
+                element.scope().$digest();
+                expect(form1.hasClass(completeClass)).toBe(true);
+                expect(form2.hasClass(disabledClass)).toBe(false);
+                expect(form3.hasClass(disabledClass)).toBe(true);
+            });
         });
     });
 });

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

@@ -21,6 +21,7 @@ export default {
         navigation: "<?",
         skippable: "<?",
         valid: "<?",
+        position: "@?",
 
         onCancel: "&?",
         onFocus: "&",

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

@@ -51,6 +51,12 @@ export default class StepFormController {
         );
     }
 
+    $onDestroy () {
+        if (this.stepperCtrl) {
+            this.stepperCtrl.removeStep(this);
+        }
+    }
+
     onFormSubmit (form) {
         if (form.$valid && this.valid) {
             this.onSubmit({ form });

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

@@ -45,7 +45,7 @@
             ng-if="$ctrl.navigation"
             ng-show="!$ctrl.loading && $ctrl.stepper.focused">
             <oui-button variant="primary" type="submit"
-                text="{{::$ctrl.submitText || ($ctrl.stepper.last ? $ctrl.translations.submitButtonLabel : $ctrl.translations.nextButtonLabel)}}">
+                text="{{$ctrl.submitText || ($ctrl.stepper.last ? $ctrl.translations.submitButtonLabel : $ctrl.translations.nextButtonLabel)}}">
             </oui-button>
             <oui-button variant="link"
                 ng-if="::!$ctrl.cancelHref && !!$ctrl.onCancel"

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

@@ -24,10 +24,22 @@ export default class {
     }
 
     addStep (step) {
-        this.steps.push(step);
+        if (!step.position) {
+            this.steps.push(step);
+        } else {
+            this.steps.splice(step.position - 1, 0, step);
+        }
+
         this.focusStep(this.currentIndex);
     }
 
+    removeStep (step) {
+        const indexOfStep = this.steps.indexOf(step);
+        if (indexOfStep > -1) {
+            this.steps.splice(indexOfStep, 1);
+        }
+    }
+
     addForm (form, index) {
         this.forms[index] = form;
         this.nextStep();