From 6580a99dadb48d75369a1a576254057cabe45733 Mon Sep 17 00:00:00 2001
From: Marie JONES <marie.jones@corp.ovh.com>
Date: Thu, 18 Apr 2019 15:50:13 +0200
Subject: [PATCH] feat(oui-stepper): add ability to set opened step

---
 packages/oui-stepper/README.md                | 19 +++++++++++++
 packages/oui-stepper/src/index.spec.js        | 27 +++++++++++++++++++
 packages/oui-stepper/src/stepper.component.js |  3 ++-
 .../oui-stepper/src/stepper.controller.js     | 12 +++++++--
 4 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/packages/oui-stepper/README.md b/packages/oui-stepper/README.md
index 468edea8..b817a5a1 100644
--- a/packages/oui-stepper/README.md
+++ b/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
 
diff --git a/packages/oui-stepper/src/index.spec.js b/packages/oui-stepper/src/index.spec.js
index a135172d..afc7890d 100644
--- a/packages/oui-stepper/src/index.spec.js
+++ b/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);
+            });
         });
     });
 });
diff --git a/packages/oui-stepper/src/stepper.component.js b/packages/oui-stepper/src/stepper.component.js
index e0c7b8ec..c6c091e5 100644
--- a/packages/oui-stepper/src/stepper.component.js
+++ b/packages/oui-stepper/src/stepper.component.js
@@ -6,7 +6,8 @@ export default {
         name: "@",
         id: "@",
         onInit: "&",
-        onFinish: "&"
+        onFinish: "&",
+        currentIndex: "=?"
     },
     controller,
     template,
diff --git a/packages/oui-stepper/src/stepper.controller.js b/packages/oui-stepper/src/stepper.controller.js
index 31edb0c2..4a50bddc 100644
--- a/packages/oui-stepper/src/stepper.controller.js
+++ b/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) {