feat(oui-collapsible): add on-toggle event (#372)

Author: svandecappelle

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

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

@@ -8,7 +8,8 @@ export default {
         id: "@",
         heading: "@",
         ariaLabel: "@?",
-        expanded: "<?"
+        expanded: "<?",
+        onToggle: "&"
     },
     transclude: true
 };

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

@@ -38,5 +38,6 @@ export default class {
 
     toggle () {
         this.expanded = !this.expanded;
+        this.onToggle({ expanded: this.expanded });
     }
 }

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);
+        });
     });
 });