feat(oui-stepper): add ability to set opened step (#393)

Author: marie-j

packages/oui-stepper/README.md

@@ -98,6 +98,24 @@
 </oui-stepper>
 ```
 
+### Open Steps 
+
+```html:preview
+<oui-stepper
+    current-index="$ctrl.currentStep">
+    <oui-step-form
+        header="Step1">
+        <p>Random content</p>
+    </oui-step-form>
+     <oui-step-form
+        header="Step2">
+        <oui-button variant="link" on-click="$ctrl.currentStep = 0">
+            <span>Go to Step 1</span>
+        </oui-button>
+    </oui-step-form>
+</oui-stepper>
+```
+
 ### Events on `oui-stepper`
 
 **Note**: If you want to access the forms inside `on-finish` callback, you need to use the `forms` variable as below.
@@ -154,6 +172,7 @@
 | ----              | ----      | ----      | ----              | ----              | ----      | ----
 | `name`            | string    | @?        | yes               | n/a               | n/a       | stepper name used to identify step
 | `id`              | string    | @?        | yes               | n/a               | n/a       | stepper id used to identify step
+| `current-index`   | number    | =?        | no                | n/a               | 0         | current step index 
 | `on-init`         | function  | &         | no                | n/a               | n/a       | initialization function
 | `on-finish`       | function  | &         | no                | n/a               | n/a       | submit all steps function
 

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

@@ -230,6 +230,33 @@ describe("ouiStepper", () => {
                 expect(form2.hasClass(disabledClass)).toBe(false);
                 expect(form3.hasClass(disabledClass)).toBe(true);
             });
+
+            it("should open designated step", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-stepper current-index="$ctrl.index">
+                        <oui-step-form name="form1"></oui-step-form>
+                        <oui-step-form name="form2"></oui-step-form>
+                        <oui-step-form name="form3"></oui-step-form>
+                    </oui-stepper>`, { index: 1 });
+
+                $timeout.flush();
+
+                const form1 = element.find("form").eq(0);
+                const form2 = element.find("form").eq(1);
+                const form3 = element.find("form").eq(2);
+
+                expect(form1.scope().$ctrl.stepper.focused).toBe(false);
+                expect(form2.scope().$ctrl.stepper.focused).toBe(true);
+                expect(form3.scope().$ctrl.stepper.focused).toBe(false);
+
+                element.scope().$ctrl.index = 2;
+
+                element.scope().$digest();
+
+                expect(form1.scope().$ctrl.stepper.focused).toBe(false);
+                expect(form2.scope().$ctrl.stepper.focused).toBe(false);
+                expect(form3.scope().$ctrl.stepper.focused).toBe(true);
+            });
         });
     });
 });

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

@@ -6,7 +6,8 @@ export default {
         name: "@",
         id: "@",
         onInit: "&",
-        onFinish: "&"
+        onFinish: "&",
+        currentIndex: "=?"
     },
     controller,
     template,

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

@@ -1,16 +1,19 @@
+import get from "lodash/get";
+
 export default class {
-    constructor ($attrs, $element, $timeout) {
+    constructor ($attrs, $element, $scope, $timeout) {
         "ngInject";
 
         this.$attrs = $attrs;
         this.$element = $element;
+        this.$scope = $scope;
         this.$timeout = $timeout;
     }
 
     $onInit () {
         this.forms = [];
         this.steps = [];
-        this.currentIndex = 0;
+        this.currentIndex = get(this, "currentIndex", 0);
         this.onInit();
     }
 
@@ -21,6 +24,11 @@ export default class {
                 .removeAttr("name")
                 .addClass("oui-stepper")
         );
+
+        this.$scope.$watch(
+            () => this.currentIndex,
+            (index) => this.focusStep(index)
+        );
     }
 
     addStep (step) {