From 7b784bc5bc9fe06246a585557e002f512ef70928 Mon Sep 17 00:00:00 2001
From: Steeve Vandecappelle <steeve.vandecappelle@corp.ovh.com>
Date: Tue, 19 Mar 2019 11:31:15 +0100
Subject: [PATCH] feat(oui-collapsible): add handler on toggle open-close event

---
 packages/oui-collapsible/README.md             |  9 +++++++++
 .../src/collapsible.component.js               |  3 ++-
 .../src/collapsible.controller.js              |  1 +
 packages/oui-collapsible/src/index.spec.js     | 18 ++++++++++++++++++
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/oui-collapsible/README.md b/packages/oui-collapsible/README.md
index 1641c506..534f9bc1 100644
--- a/packages/oui-collapsible/README.md
+++ b/packages/oui-collapsible/README.md
@@ -20,6 +20,14 @@
 </oui-collapsible>
 ```
 
+### Event handler
+
+```html:preview
+<oui-collapsible heading="Title" aria-label="Action" expanded="true" on-toggle="$ctrl.onToggle(expanded)">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper ligula nec fringilla tempor. In rhoncus ullamcorper feugiat. Phasellus vel ipsum vitae neque varius luctus. Proin id iaculis arcu. Fusce justo arcu, egestas vel nulla nec, dictum cursus lacus. Aenean elementum vel odio quis rutrum. In quis tellus in neque vulputate rhoncus vitae ut justo. Ut dignissim varius est in consequat. Donec nisi mauris, pellentesque condimentum congue in, blandit ut arcu. In et elit ipsum.
+</oui-collapsible>
+```
+
 ## API
 
 ### oui-collapsible
@@ -29,3 +37,4 @@
 | `heading`     | string    | @       | no                  | n/a       | n/a       | text of the heading
 | `aria-label`  | string    | @?      | yes                 | n/a       | n/a       | accessibility label
 | `expanded`    | boolean   | <?      | yes                 | n/a       | `false`   | initial expanded state
+| `on-toggle`   | function  | &       | no                  | n/a       | n/a       | on collapsible state changed event handler
diff --git a/packages/oui-collapsible/src/collapsible.component.js b/packages/oui-collapsible/src/collapsible.component.js
index a1fd428b..6fb24213 100644
--- a/packages/oui-collapsible/src/collapsible.component.js
+++ b/packages/oui-collapsible/src/collapsible.component.js
@@ -8,7 +8,8 @@ export default {
         id: "@",
         heading: "@",
         ariaLabel: "@?",
-        expanded: "<?"
+        expanded: "<?",
+        onToggle: "&"
     },
     transclude: true
 };
diff --git a/packages/oui-collapsible/src/collapsible.controller.js b/packages/oui-collapsible/src/collapsible.controller.js
index 5287018f..461e97fd 100644
--- a/packages/oui-collapsible/src/collapsible.controller.js
+++ b/packages/oui-collapsible/src/collapsible.controller.js
@@ -38,5 +38,6 @@ export default class {
 
     toggle () {
         this.expanded = !this.expanded;
+        this.onToggle({ expanded: this.expanded });
     }
 }
diff --git a/packages/oui-collapsible/src/index.spec.js b/packages/oui-collapsible/src/index.spec.js
index 355f157f..25fbdcf7 100644
--- a/packages/oui-collapsible/src/index.spec.js
+++ b/packages/oui-collapsible/src/index.spec.js
@@ -75,5 +75,23 @@ describe("ouiCollapsible", () => {
             const contentEl = bodyEl.querySelector(".custom-content");
             expect(contentEl).toBeTruthy();
         });
+
+        it("should call ontoggle when defined into attributes", () => {
+            const onToggle = jasmine.createSpy("onToggle");
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible heading="Title" aria-label="Action" on-toggle="$ctrl.onToggle(expanded)"></oui-collapsible>`, {
+                onToggle
+            });
+
+            const headerEl = angular.element(getHeaderElement(element));
+
+            // Expand
+            headerEl.triggerHandler("click");
+            expect(onToggle).toHaveBeenCalledWith(true);
+
+            // Collapse
+            headerEl.triggerHandler("click");
+            expect(onToggle).toHaveBeenCalledWith(false);
+        });
     });
 });