From 910094acb58b7878f40da60a7ae5cd62300ba0f0 Mon Sep 17 00:00:00 2001
From: ganeshkumar1989 <ganeshkumar1989@gmail.com>
Date: Tue, 24 Apr 2018 15:57:54 +0530
Subject: [PATCH 1/7] feat(oui-collapsible): collapsible component addition

---
 packages/oui-angular/src/index.js             |   2 +
 packages/oui-angular/src/index.spec.js        |   1 +
 packages/oui-collapsible/README.md            |  31 ++++
 .../src/collapsible.component.js              |  13 ++
 .../src/collapsible.controller.js             |  22 +++
 packages/oui-collapsible/src/collapsible.html |  13 ++
 packages/oui-collapsible/src/index.js         |   4 +
 packages/oui-collapsible/src/index.spec.js    | 139 ++++++++++++++++++
 8 files changed, 225 insertions(+)
 create mode 100644 packages/oui-collapsible/README.md
 create mode 100644 packages/oui-collapsible/src/collapsible.component.js
 create mode 100644 packages/oui-collapsible/src/collapsible.controller.js
 create mode 100644 packages/oui-collapsible/src/collapsible.html
 create mode 100644 packages/oui-collapsible/src/index.js
 create mode 100644 packages/oui-collapsible/src/index.spec.js

diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js
index 135bbb79..8759a051 100644
--- a/packages/oui-angular/src/index.js
+++ b/packages/oui-angular/src/index.js
@@ -1,6 +1,7 @@
 import "@oui-angular/oui-button/src";
 import "@oui-angular/oui-calendar/src";
 import "@oui-angular/oui-checkbox/src";
+import "@oui-angular/oui-collapsible/src";
 import "@oui-angular/oui-radio/src";
 import "@oui-angular/oui-message/src";
 import "@oui-angular/oui-spinner/src";
@@ -31,6 +32,7 @@ angular.module("oui", [
     "oui.button",
     "oui.calendar",
     "oui.checkbox",
+    "oui.collapsible",
     "oui.radio",
     "oui.message",
     "oui.spinner",
diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js
index b85f44e0..2f41b274 100644
--- a/packages/oui-angular/src/index.spec.js
+++ b/packages/oui-angular/src/index.spec.js
@@ -3,6 +3,7 @@ import "@oui-angular/common/test-utils";
 loadTests(require.context("../../oui-button/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-calendar/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-checkbox/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-collapsible/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-message/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-radio/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-spinner/src/", true, /.*((\.spec)|(index))$/));
diff --git a/packages/oui-collapsible/README.md b/packages/oui-collapsible/README.md
new file mode 100644
index 00000000..9a2032c0
--- /dev/null
+++ b/packages/oui-collapsible/README.md
@@ -0,0 +1,31 @@
+# Collapsible
+
+<component-status cx-design="complete" ux="complete"></component-status>
+
+## Usage
+
+### Normal
+
+```html:preview
+<oui-collapsible title="Title" aria-label="Action">
+    <div>Collapsible body</div>
+</oui-collapsible>
+```
+
+### Expanded
+
+```html:preview
+<oui-collapsible title="Title" aria-label="Action" expanded="true">
+    <div>Collapsible body</div>
+</oui-collapsible>
+```
+
+## API
+
+### oui-collapsible
+
+| Attribute         | Type            | Binding | One-time binding | Values                    | Default             | Description                        |
+| ----              | ----            | ----    | ----             | ----                      | ----                | ----                               |
+| `title`           | string          | @       | yes              |                           |                     | collapsible title                  |
+| `aria-label`      | string          | @?      | yes              |                           |                     | accessibility label                |
+| `expanded`        | boolean         | <?      | yes              |                           | `false`             | initial expanded state             |
diff --git a/packages/oui-collapsible/src/collapsible.component.js b/packages/oui-collapsible/src/collapsible.component.js
new file mode 100644
index 00000000..fcb63c9c
--- /dev/null
+++ b/packages/oui-collapsible/src/collapsible.component.js
@@ -0,0 +1,13 @@
+import controller from "./collapsible.controller.js";
+import template from "./collapsible.html";
+
+export default {
+    template,
+    controller,
+    bindings: {
+        title: "@",
+        ariaLabel: "@?",
+        expanded: "<?"
+    },
+    transclude: true
+};
diff --git a/packages/oui-collapsible/src/collapsible.controller.js b/packages/oui-collapsible/src/collapsible.controller.js
new file mode 100644
index 00000000..e9d7f07a
--- /dev/null
+++ b/packages/oui-collapsible/src/collapsible.controller.js
@@ -0,0 +1,22 @@
+import { addBooleanParameter } from "@oui-angular/common/component-utils";
+
+const baseClass = "oui-collapsible";
+
+export default class {
+    constructor ($attrs, $element, $timeout) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$timeout = $timeout;
+    }
+
+    $onInit () {
+        this.baseClass = baseClass;
+        addBooleanParameter(this, "expanded");
+    }
+
+    toggle () {
+        this.expanded = !this.expanded;
+    }
+}
diff --git a/packages/oui-collapsible/src/collapsible.html b/packages/oui-collapsible/src/collapsible.html
new file mode 100644
index 00000000..fcd8d59e
--- /dev/null
+++ b/packages/oui-collapsible/src/collapsible.html
@@ -0,0 +1,13 @@
+<div class="oui-collapsible" data-ng-class="{'oui-collapsible_open':$ctrl.expanded}">
+    <div class="oui-collapsible__header" data-ng-click="$ctrl.toggle()">
+        <div class="oui-collapsible__header-label" data-ng-bind="::$ctrl.title"></div>
+        <button
+            type="button"
+            aria-label="{{::$ctrl.ariaLabel}}"
+            aria-pressed="{{$ctrl.expanded}}"
+            class="oui-collapsible__header-button">
+            <i class="oui-icon oui-icon-chevron-down oui-collapsible__header-button-icon" aria-hidden="true"></i>
+        </button>
+    </div>
+    <div class="oui-collapsible__body" data-ng-transclude></div>
+</div>
diff --git a/packages/oui-collapsible/src/index.js b/packages/oui-collapsible/src/index.js
new file mode 100644
index 00000000..447637a1
--- /dev/null
+++ b/packages/oui-collapsible/src/index.js
@@ -0,0 +1,4 @@
+import Collapsible from "./collapsible.component.js";
+
+angular.module("oui.collapsible", [])
+    .component("ouiCollapsible", Collapsible);
diff --git a/packages/oui-collapsible/src/index.spec.js b/packages/oui-collapsible/src/index.spec.js
new file mode 100644
index 00000000..97a74470
--- /dev/null
+++ b/packages/oui-collapsible/src/index.spec.js
@@ -0,0 +1,139 @@
+describe("ouiCollapsible", () => {
+    let TestUtils;
+
+    beforeEach(angular.mock.module("oui.collapsible"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_TestUtils_) => {
+        TestUtils = _TestUtils_;
+    }));
+
+    describe("Component", () => {
+        it("should have a header", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const headerEl = element[0].querySelector(".oui-collapsible__header");
+            expect(headerEl).toBeTruthy();
+        });
+
+        it("should have a body", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const bodyEl = element[0].querySelector(".oui-collapsible__body");
+            expect(bodyEl).toBeTruthy();
+        });
+
+        it("should have the correct title", () => {
+            const titleText = "Collapsible title";
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="${titleText}" aria-label="Action">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const titleEl = element[0].querySelector(".oui-collapsible__header-label");
+            expect(titleEl).toBeTruthy();
+            expect(titleEl.innerText).toBe(titleText);
+        });
+
+        it("should have the toggle button", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const buttonEl = element[0].querySelector(".oui-collapsible__header-button");
+            expect(buttonEl).toBeTruthy();
+            const iconEl = buttonEl.querySelector(".oui-collapsible__header-button-icon");
+            expect(iconEl).toBeTruthy();
+        });
+
+        it("should have the correct aria-label", () => {
+            const ariaLabel = "Action";
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="${ariaLabel}">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const buttonEl = element[0].querySelector(".oui-collapsible__header-button");
+            expect(buttonEl).toBeTruthy();
+            expect(buttonEl.getAttribute("aria-label")).toBe(ariaLabel);
+        });
+
+        it("should not be expanded when expanded is false", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action" expanded="false">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const openCollapsible = element[0].querySelector(".oui-collapsible_open");
+            expect(openCollapsible).toBeFalsy();
+        });
+
+        it("should be expanded when expanded is true", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action" expanded="true">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const openCollapsible = element[0].querySelector(".oui-collapsible_open");
+            expect(openCollapsible).toBeTruthy();
+        });
+
+        it("should be expand when header is clicked", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action" expanded="false">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const headerEl = element[0].querySelector(".oui-collapsible__header");
+            expect(headerEl).toBeTruthy();
+            angular.element(headerEl).triggerHandler("click");
+
+            const openCollapsible = element[0].querySelector(".oui-collapsible_open");
+            expect(openCollapsible).toBeTruthy();
+        });
+
+        it("should be collapsed when header is clicked", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action" expanded="true">
+                    <div>Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const headerEl = element[0].querySelector(".oui-collapsible__header");
+            expect(headerEl).toBeTruthy();
+            angular.element(headerEl).triggerHandler("click");
+
+            const openCollapsible = element[0].querySelector(".oui-collapsible_open");
+            expect(openCollapsible).toBeFalsy();
+        });
+
+        it("should transclude the contents into the collapsible body", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action" expanded="true">
+                    <div class="custom-content">Collapsible body</div>
+                </oui-collapsible>`
+            );
+
+            const bodyEl = element[0].querySelector(".oui-collapsible__body");
+            expect(bodyEl).toBeTruthy();
+
+            const contentEl = bodyEl.querySelector(".custom-content");
+            expect(contentEl).toBeTruthy();
+        });
+    });
+});

From 7fdd31bb053210dd2f9ab7e3d9c2be1bf0058e81 Mon Sep 17 00:00:00 2001
From: ganeshkumar1989 <ganeshkumar1989@gmail.com>
Date: Wed, 25 Apr 2018 11:58:29 +0530
Subject: [PATCH 2/7] fix(oui-collapsible): example update

---
 packages/oui-collapsible/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/oui-collapsible/README.md b/packages/oui-collapsible/README.md
index 9a2032c0..0fc42076 100644
--- a/packages/oui-collapsible/README.md
+++ b/packages/oui-collapsible/README.md
@@ -8,7 +8,7 @@
 
 ```html:preview
 <oui-collapsible title="Title" aria-label="Action">
-    <div>Collapsible body</div>
+    Collapsible body
 </oui-collapsible>
 ```
 
@@ -16,7 +16,7 @@
 
 ```html:preview
 <oui-collapsible title="Title" aria-label="Action" expanded="true">
-    <div>Collapsible body</div>
+    Collapsible body
 </oui-collapsible>
 ```
 

From 51040a1ec861ba5ff24419b2badeb756de3abc97 Mon Sep 17 00:00:00 2001
From: ganeshkumar1989 <ganeshkumar1989@gmail.com>
Date: Wed, 25 Apr 2018 13:21:44 +0530
Subject: [PATCH 3/7] fix(oui-collapsible): code clean-up

---
 packages/oui-collapsible/src/collapsible.controller.js | 3 ---
 packages/oui-collapsible/src/collapsible.html          | 6 +++---
 packages/oui-collapsible/src/index.spec.js             | 8 ++++----
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/oui-collapsible/src/collapsible.controller.js b/packages/oui-collapsible/src/collapsible.controller.js
index e9d7f07a..279fe33e 100644
--- a/packages/oui-collapsible/src/collapsible.controller.js
+++ b/packages/oui-collapsible/src/collapsible.controller.js
@@ -1,7 +1,5 @@
 import { addBooleanParameter } from "@oui-angular/common/component-utils";
 
-const baseClass = "oui-collapsible";
-
 export default class {
     constructor ($attrs, $element, $timeout) {
         "ngInject";
@@ -12,7 +10,6 @@ export default class {
     }
 
     $onInit () {
-        this.baseClass = baseClass;
         addBooleanParameter(this, "expanded");
     }
 
diff --git a/packages/oui-collapsible/src/collapsible.html b/packages/oui-collapsible/src/collapsible.html
index fcd8d59e..3b76ecb8 100644
--- a/packages/oui-collapsible/src/collapsible.html
+++ b/packages/oui-collapsible/src/collapsible.html
@@ -1,12 +1,12 @@
 <div class="oui-collapsible" data-ng-class="{'oui-collapsible_open':$ctrl.expanded}">
     <div class="oui-collapsible__header" data-ng-click="$ctrl.toggle()">
-        <div class="oui-collapsible__header-label" data-ng-bind="::$ctrl.title"></div>
+        <div class="oui-collapsible__header-text" data-ng-bind="::$ctrl.title"></div>
         <button
             type="button"
             aria-label="{{::$ctrl.ariaLabel}}"
             aria-pressed="{{$ctrl.expanded}}"
-            class="oui-collapsible__header-button">
-            <i class="oui-icon oui-icon-chevron-down oui-collapsible__header-button-icon" aria-hidden="true"></i>
+            class="oui-collapsible__toggle-button">
+            <i class="oui-icon oui-icon-chevron-down oui-collapsible__toggle-icon" aria-hidden="true"></i>
         </button>
     </div>
     <div class="oui-collapsible__body" data-ng-transclude></div>
diff --git a/packages/oui-collapsible/src/index.spec.js b/packages/oui-collapsible/src/index.spec.js
index 97a74470..2ed8ecd4 100644
--- a/packages/oui-collapsible/src/index.spec.js
+++ b/packages/oui-collapsible/src/index.spec.js
@@ -39,7 +39,7 @@ describe("ouiCollapsible", () => {
                 </oui-collapsible>`
             );
 
-            const titleEl = element[0].querySelector(".oui-collapsible__header-label");
+            const titleEl = element[0].querySelector(".oui-collapsible__header-text");
             expect(titleEl).toBeTruthy();
             expect(titleEl.innerText).toBe(titleText);
         });
@@ -51,9 +51,9 @@ describe("ouiCollapsible", () => {
                 </oui-collapsible>`
             );
 
-            const buttonEl = element[0].querySelector(".oui-collapsible__header-button");
+            const buttonEl = element[0].querySelector(".oui-collapsible__toggle-button");
             expect(buttonEl).toBeTruthy();
-            const iconEl = buttonEl.querySelector(".oui-collapsible__header-button-icon");
+            const iconEl = buttonEl.querySelector(".oui-collapsible__toggle-icon");
             expect(iconEl).toBeTruthy();
         });
 
@@ -65,7 +65,7 @@ describe("ouiCollapsible", () => {
                 </oui-collapsible>`
             );
 
-            const buttonEl = element[0].querySelector(".oui-collapsible__header-button");
+            const buttonEl = element[0].querySelector(".oui-collapsible__toggle-button");
             expect(buttonEl).toBeTruthy();
             expect(buttonEl.getAttribute("aria-label")).toBe(ariaLabel);
         });

From d3639964b130b60f1b253a44cf808c8e8a7022ee Mon Sep 17 00:00:00 2001
From: ganeshkumar1989 <ganeshkumar1989@gmail.com>
Date: Fri, 27 Apr 2018 16:41:52 +0530
Subject: [PATCH 4/7] fix(oui-collapsible): accessibility fixes

---
 packages/oui-collapsible/README.md                  |  4 ++--
 .../oui-collapsible/src/collapsible.component.js    |  1 +
 .../oui-collapsible/src/collapsible.controller.js   | 13 ++++++++++---
 packages/oui-collapsible/src/collapsible.html       | 11 ++++++-----
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/oui-collapsible/README.md b/packages/oui-collapsible/README.md
index 0fc42076..a71c8a9c 100644
--- a/packages/oui-collapsible/README.md
+++ b/packages/oui-collapsible/README.md
@@ -7,7 +7,7 @@
 ### Normal
 
 ```html:preview
-<oui-collapsible title="Title" aria-label="Action">
+<oui-collapsible id="collapsible-1" title="Title" aria-label="Action">
     Collapsible body
 </oui-collapsible>
 ```
@@ -15,7 +15,7 @@
 ### Expanded
 
 ```html:preview
-<oui-collapsible title="Title" aria-label="Action" expanded="true">
+<oui-collapsible id="collapsible-2" title="Title" aria-label="Action" expanded="true">
     Collapsible body
 </oui-collapsible>
 ```
diff --git a/packages/oui-collapsible/src/collapsible.component.js b/packages/oui-collapsible/src/collapsible.component.js
index fcb63c9c..7daf76ac 100644
--- a/packages/oui-collapsible/src/collapsible.component.js
+++ b/packages/oui-collapsible/src/collapsible.component.js
@@ -5,6 +5,7 @@ export default {
     template,
     controller,
     bindings: {
+        id: "@",
         title: "@",
         ariaLabel: "@?",
         expanded: "<?"
diff --git a/packages/oui-collapsible/src/collapsible.controller.js b/packages/oui-collapsible/src/collapsible.controller.js
index 279fe33e..8fc4551b 100644
--- a/packages/oui-collapsible/src/collapsible.controller.js
+++ b/packages/oui-collapsible/src/collapsible.controller.js
@@ -1,16 +1,23 @@
-import { addBooleanParameter } from "@oui-angular/common/component-utils";
+import { addDefaultParameter } from "@oui-angular/common/component-utils";
 
 export default class {
     constructor ($attrs, $element, $timeout) {
         "ngInject";
-
         this.$attrs = $attrs;
         this.$element = $element;
         this.$timeout = $timeout;
     }
 
     $onInit () {
-        addBooleanParameter(this, "expanded");
+        addDefaultParameter(this, "expanded", false);
+    }
+
+    $postLink () {
+        // Sometimes the digest cycle is done before dom manipulation,
+        // So we use $timeout to force the $apply
+        this.$timeout(() =>
+            this.$element.removeAttr("id")
+        );
     }
 
     toggle () {
diff --git a/packages/oui-collapsible/src/collapsible.html b/packages/oui-collapsible/src/collapsible.html
index 3b76ecb8..4a484664 100644
--- a/packages/oui-collapsible/src/collapsible.html
+++ b/packages/oui-collapsible/src/collapsible.html
@@ -1,13 +1,14 @@
-<div class="oui-collapsible" data-ng-class="{'oui-collapsible_open':$ctrl.expanded}">
-    <div class="oui-collapsible__header" data-ng-click="$ctrl.toggle()">
-        <div class="oui-collapsible__header-text" data-ng-bind="::$ctrl.title"></div>
+<div class="oui-collapsible" ng-class="{'oui-collapsible_open':$ctrl.expanded}">
+    <div class="oui-collapsible__header" ng-click="$ctrl.toggle()">
+        <div class="oui-collapsible__header-text" ng-bind="::$ctrl.title"></div>
         <button
             type="button"
             aria-label="{{::$ctrl.ariaLabel}}"
-            aria-pressed="{{$ctrl.expanded}}"
+            aria-expanded="{{$ctrl.expanded}}"
+            aria-controls="{{::$ctrl.id}}"
             class="oui-collapsible__toggle-button">
             <i class="oui-icon oui-icon-chevron-down oui-collapsible__toggle-icon" aria-hidden="true"></i>
         </button>
     </div>
-    <div class="oui-collapsible__body" data-ng-transclude></div>
+    <div class="oui-collapsible__body" ng-attr-id="{{::$ctrl.id}}" ng-transclude></div>
 </div>

From 797d9962c8e575c6de0d300f6625c771c8e2610d Mon Sep 17 00:00:00 2001
From: ganeshkumar1989 <ganeshkumar1989@gmail.com>
Date: Mon, 30 Apr 2018 15:33:08 +0530
Subject: [PATCH 5/7] fix(oui-collapsible): header replaced with button

---
 .../src/collapsible.controller.js             |  1 +
 packages/oui-collapsible/src/collapsible.html | 19 ++++++++-----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/oui-collapsible/src/collapsible.controller.js b/packages/oui-collapsible/src/collapsible.controller.js
index 8fc4551b..c1b77fdf 100644
--- a/packages/oui-collapsible/src/collapsible.controller.js
+++ b/packages/oui-collapsible/src/collapsible.controller.js
@@ -17,6 +17,7 @@ export default class {
         // So we use $timeout to force the $apply
         this.$timeout(() =>
             this.$element.removeAttr("id")
+                .removeAttr("aria-label")
         );
     }
 
diff --git a/packages/oui-collapsible/src/collapsible.html b/packages/oui-collapsible/src/collapsible.html
index 4a484664..c6be8f82 100644
--- a/packages/oui-collapsible/src/collapsible.html
+++ b/packages/oui-collapsible/src/collapsible.html
@@ -1,14 +1,11 @@
 <div class="oui-collapsible" ng-class="{'oui-collapsible_open':$ctrl.expanded}">
-    <div class="oui-collapsible__header" ng-click="$ctrl.toggle()">
-        <div class="oui-collapsible__header-text" ng-bind="::$ctrl.title"></div>
-        <button
-            type="button"
-            aria-label="{{::$ctrl.ariaLabel}}"
-            aria-expanded="{{$ctrl.expanded}}"
-            aria-controls="{{::$ctrl.id}}"
-            class="oui-collapsible__toggle-button">
-            <i class="oui-icon oui-icon-chevron-down oui-collapsible__toggle-icon" aria-hidden="true"></i>
-        </button>
-    </div>
+    <button class="oui-button oui-button_full-width oui-collapsible__header-button"
+        ng-click="$ctrl.toggle()"
+        aria-label="{{::$ctrl.ariaLabel}}"
+        aria-expanded="{{$ctrl.expanded}}"
+        aria-controls="{{::$ctrl.id}}">
+        {{::$ctrl.title}}
+        <i class="oui-icon oui-icon-chevron-down oui-collapsible__toggle-icon" aria-hidden="true"></i>
+    </button>
     <div class="oui-collapsible__body" ng-attr-id="{{::$ctrl.id}}" ng-transclude></div>
 </div>

From 7202ba458e55aa4ccd1c9834a8b28672ab1bf234 Mon Sep 17 00:00:00 2001
From: Jean-Frederic Durand <jean-frederic.durand@corp.ovh.com>
Date: Thu, 17 May 2018 16:43:33 -0400
Subject: [PATCH 6/7] fix(oui-collapsible): fix test and update readme

---
 packages/oui-collapsible/README.md            | 17 ++---
 .../src/collapsible.controller.js             |  3 +-
 packages/oui-collapsible/src/index.spec.js    | 70 ++++++-------------
 3 files changed, 32 insertions(+), 58 deletions(-)

diff --git a/packages/oui-collapsible/README.md b/packages/oui-collapsible/README.md
index a71c8a9c..9ffb5d16 100644
--- a/packages/oui-collapsible/README.md
+++ b/packages/oui-collapsible/README.md
@@ -1,13 +1,13 @@
 # Collapsible
 
-<component-status cx-design="complete" ux="complete"></component-status>
+<component-status cx-design="complete" ux="rc"></component-status>
 
 ## Usage
 
 ### Normal
 
 ```html:preview
-<oui-collapsible id="collapsible-1" title="Title" aria-label="Action">
+<oui-collapsible id="collapsible1" title="Title" aria-label="Action">
     Collapsible body
 </oui-collapsible>
 ```
@@ -15,7 +15,7 @@
 ### Expanded
 
 ```html:preview
-<oui-collapsible id="collapsible-2" title="Title" aria-label="Action" expanded="true">
+<oui-collapsible id="collapsible2" title="Title" aria-label="Action" expanded="true">
     Collapsible body
 </oui-collapsible>
 ```
@@ -24,8 +24,9 @@
 
 ### oui-collapsible
 
-| Attribute         | Type            | Binding | One-time binding | Values                    | Default             | Description                        |
-| ----              | ----            | ----    | ----             | ----                      | ----                | ----                               |
-| `title`           | string          | @       | yes              |                           |                     | collapsible title                  |
-| `aria-label`      | string          | @?      | yes              |                           |                     | accessibility label                |
-| `expanded`        | boolean         | <?      | yes              |                           | `false`             | initial expanded state             |
+| Attribute         | Type            | Binding | One-time binding | Values                | Default             | Description                        |
+| ----              | ----            | ----    | ----             | ----                  | ----                | ----                               |
+| `id`              | string          | @       | yes              |                       |                     | id attribute of the collapsible    |
+| `title`           | string          | @       | yes              |                       |                     | collapsible title                  |
+| `aria-label`      | string          | @?      | yes              |                       |                     | accessibility label                |
+| `expanded`        | boolean         | <?      | yes              |                       | `false`             | initial expanded state             |
diff --git a/packages/oui-collapsible/src/collapsible.controller.js b/packages/oui-collapsible/src/collapsible.controller.js
index c1b77fdf..fd6d1561 100644
--- a/packages/oui-collapsible/src/collapsible.controller.js
+++ b/packages/oui-collapsible/src/collapsible.controller.js
@@ -16,7 +16,8 @@ export default class {
         // Sometimes the digest cycle is done before dom manipulation,
         // So we use $timeout to force the $apply
         this.$timeout(() =>
-            this.$element.removeAttr("id")
+            this.$element
+                .removeAttr("id")
                 .removeAttr("aria-label")
         );
     }
diff --git a/packages/oui-collapsible/src/index.spec.js b/packages/oui-collapsible/src/index.spec.js
index 2ed8ecd4..3fdfb6bb 100644
--- a/packages/oui-collapsible/src/index.spec.js
+++ b/packages/oui-collapsible/src/index.spec.js
@@ -8,16 +8,26 @@ describe("ouiCollapsible", () => {
         TestUtils = _TestUtils_;
     }));
 
+    function getHeaderElement (element) {
+        return element[0].querySelector(".oui-collapsible__header-button");
+    }
+
+    function getBodyElement (element) {
+        return element[0].querySelector(".oui-collapsible__body");
+    }
+
     describe("Component", () => {
-        it("should have a header", () => {
+        it("should have a header button with icon", () => {
             const element = TestUtils.compileTemplate(`
                 <oui-collapsible title="Title" aria-label="Action">
                     <div>Collapsible body</div>
                 </oui-collapsible>`
             );
 
-            const headerEl = element[0].querySelector(".oui-collapsible__header");
+            const headerEl = getHeaderElement(element);
+            const iconEl = headerEl.querySelector(".oui-collapsible__toggle-icon");
             expect(headerEl).toBeTruthy();
+            expect(iconEl).toBeTruthy();
         });
 
         it("should have a body", () => {
@@ -27,7 +37,7 @@ describe("ouiCollapsible", () => {
                 </oui-collapsible>`
             );
 
-            const bodyEl = element[0].querySelector(".oui-collapsible__body");
+            const bodyEl = getBodyElement(element);
             expect(bodyEl).toBeTruthy();
         });
 
@@ -39,22 +49,8 @@ describe("ouiCollapsible", () => {
                 </oui-collapsible>`
             );
 
-            const titleEl = element[0].querySelector(".oui-collapsible__header-text");
-            expect(titleEl).toBeTruthy();
-            expect(titleEl.innerText).toBe(titleText);
-        });
-
-        it("should have the toggle button", () => {
-            const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="Title" aria-label="Action">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
-            );
-
-            const buttonEl = element[0].querySelector(".oui-collapsible__toggle-button");
-            expect(buttonEl).toBeTruthy();
-            const iconEl = buttonEl.querySelector(".oui-collapsible__toggle-icon");
-            expect(iconEl).toBeTruthy();
+            const headerEl = getHeaderElement(element);
+            expect(headerEl.innerText).toContain(titleText);
         });
 
         it("should have the correct aria-label", () => {
@@ -65,42 +61,19 @@ describe("ouiCollapsible", () => {
                 </oui-collapsible>`
             );
 
-            const buttonEl = element[0].querySelector(".oui-collapsible__toggle-button");
-            expect(buttonEl).toBeTruthy();
-            expect(buttonEl.getAttribute("aria-label")).toBe(ariaLabel);
+            const headerEl = getHeaderElement(element);
+            expect(headerEl.getAttribute("aria-label")).toBe(ariaLabel);
         });
 
-        it("should not be expanded when expanded is false", () => {
-            const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="Title" aria-label="Action" expanded="false">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
-            );
 
-            const openCollapsible = element[0].querySelector(".oui-collapsible_open");
-            expect(openCollapsible).toBeFalsy();
-        });
-
-        it("should be expanded when expanded is true", () => {
-            const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="Title" aria-label="Action" expanded="true">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
-            );
-
-            const openCollapsible = element[0].querySelector(".oui-collapsible_open");
-            expect(openCollapsible).toBeTruthy();
-        });
-
-        it("should be expand when header is clicked", () => {
+        it("should expand on header click", () => {
             const element = TestUtils.compileTemplate(`
                 <oui-collapsible title="Title" aria-label="Action" expanded="false">
                     <div>Collapsible body</div>
                 </oui-collapsible>`
             );
 
-            const headerEl = element[0].querySelector(".oui-collapsible__header");
-            expect(headerEl).toBeTruthy();
+            const headerEl = getHeaderElement(element);
             angular.element(headerEl).triggerHandler("click");
 
             const openCollapsible = element[0].querySelector(".oui-collapsible_open");
@@ -114,8 +87,7 @@ describe("ouiCollapsible", () => {
                 </oui-collapsible>`
             );
 
-            const headerEl = element[0].querySelector(".oui-collapsible__header");
-            expect(headerEl).toBeTruthy();
+            const headerEl = getHeaderElement(element);
             angular.element(headerEl).triggerHandler("click");
 
             const openCollapsible = element[0].querySelector(".oui-collapsible_open");
@@ -129,7 +101,7 @@ describe("ouiCollapsible", () => {
                 </oui-collapsible>`
             );
 
-            const bodyEl = element[0].querySelector(".oui-collapsible__body");
+            const bodyEl = getBodyElement(element);
             expect(bodyEl).toBeTruthy();
 
             const contentEl = bodyEl.querySelector(".custom-content");

From 60df190558fcaea776a9abaa4db513c15feaf8bf Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Thu, 31 May 2018 13:21:37 +0200
Subject: [PATCH 7/7] fix(oui-collapsible): fix collapse animation

---
 packages/oui-collapsible/README.md            | 19 +++---
 .../src/collapsible.controller.js             | 20 ++++--
 packages/oui-collapsible/src/collapsible.html | 20 +++---
 packages/oui-collapsible/src/index.spec.js    | 66 +++++--------------
 4 files changed, 52 insertions(+), 73 deletions(-)

diff --git a/packages/oui-collapsible/README.md b/packages/oui-collapsible/README.md
index 9ffb5d16..32c2725b 100644
--- a/packages/oui-collapsible/README.md
+++ b/packages/oui-collapsible/README.md
@@ -7,16 +7,16 @@
 ### Normal
 
 ```html:preview
-<oui-collapsible id="collapsible1" title="Title" aria-label="Action">
-    Collapsible body
+<oui-collapsible title="Title" aria-label="Action">
+    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>
 ```
 
 ### Expanded
 
 ```html:preview
-<oui-collapsible id="collapsible2" title="Title" aria-label="Action" expanded="true">
-    Collapsible body
+<oui-collapsible title="Title" aria-label="Action" expanded="true">
+    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>
 ```
 
@@ -24,9 +24,8 @@
 
 ### oui-collapsible
 
-| Attribute         | Type            | Binding | One-time binding | Values                | Default             | Description                        |
-| ----              | ----            | ----    | ----             | ----                  | ----                | ----                               |
-| `id`              | string          | @       | yes              |                       |                     | id attribute of the collapsible    |
-| `title`           | string          | @       | yes              |                       |                     | collapsible title                  |
-| `aria-label`      | string          | @?      | yes              |                       |                     | accessibility label                |
-| `expanded`        | boolean         | <?      | yes              |                       | `false`             | initial expanded state             |
+| Attribute     | Type      | Binding | One-time binding | Values | Default   | Description
+| ----          | ----      | ----    | ----             | ----   | ----      | ----
+| `title`       | string    | @       |                  |        |           | collapsible title
+| `aria-label`  | string    | @?      | yes              |        |           | accessibility label
+| `expanded`    | boolean   | <?      | yes              |        | `false`   | initial expanded state
diff --git a/packages/oui-collapsible/src/collapsible.controller.js b/packages/oui-collapsible/src/collapsible.controller.js
index fd6d1561..8a4c973a 100644
--- a/packages/oui-collapsible/src/collapsible.controller.js
+++ b/packages/oui-collapsible/src/collapsible.controller.js
@@ -1,25 +1,37 @@
 import { addDefaultParameter } from "@oui-angular/common/component-utils";
 
 export default class {
-    constructor ($attrs, $element, $timeout) {
+    constructor ($attrs, $element, $scope, $timeout, $window) {
         "ngInject";
         this.$attrs = $attrs;
         this.$element = $element;
+        this.$scope = $scope;
         this.$timeout = $timeout;
+        this.$window = $window;
     }
 
     $onInit () {
         addDefaultParameter(this, "expanded", false);
+
+        // Check body height for transition animation
+        const body = this.$element[0].querySelector(".oui-collapsible__body");
+        this.$scope.$watch(() => body.offsetHeight, (newHeight, oldHeight) => {
+            if (newHeight !== oldHeight) {
+                this.wrapperHeight = `${newHeight}px`;
+            }
+        });
     }
 
     $postLink () {
-        // Sometimes the digest cycle is done before dom manipulation,
-        // So we use $timeout to force the $apply
         this.$timeout(() =>
             this.$element
-                .removeAttr("id")
+                .addClass("oui-collapsible")
                 .removeAttr("aria-label")
         );
+
+        // Apply on resize for new body height
+        angular.element(this.$window)
+            .on("resize", () => this.$scope.$apply());
     }
 
     toggle () {
diff --git a/packages/oui-collapsible/src/collapsible.html b/packages/oui-collapsible/src/collapsible.html
index c6be8f82..9e911b9f 100644
--- a/packages/oui-collapsible/src/collapsible.html
+++ b/packages/oui-collapsible/src/collapsible.html
@@ -1,11 +1,11 @@
-<div class="oui-collapsible" ng-class="{'oui-collapsible_open':$ctrl.expanded}">
-    <button class="oui-button oui-button_full-width oui-collapsible__header-button"
-        ng-click="$ctrl.toggle()"
-        aria-label="{{::$ctrl.ariaLabel}}"
-        aria-expanded="{{$ctrl.expanded}}"
-        aria-controls="{{::$ctrl.id}}">
-        {{::$ctrl.title}}
-        <i class="oui-icon oui-icon-chevron-down oui-collapsible__toggle-icon" aria-hidden="true"></i>
-    </button>
-    <div class="oui-collapsible__body" ng-attr-id="{{::$ctrl.id}}" ng-transclude></div>
+<button class="oui-button oui-button_full-width oui-collapsible__header"
+    ng-click="$ctrl.toggle()"
+    aria-label="{{::$ctrl.ariaLabel}}"
+    aria-expanded="{{$ctrl.expanded}}"
+    aria-controls="{{::$ctrl.id}}">
+    {{::$ctrl.title}}
+    <i class="oui-icon oui-icon-chevron-down oui-collapsible__toggle-icon" aria-hidden="true"></i>
+</button>
+<div class="oui-collapsible__wrapper" ng-style="{ 'height': $ctrl.wrapperHeight }">
+    <div class="oui-collapsible__body" ng-transclude></div>
 </div>
diff --git a/packages/oui-collapsible/src/index.spec.js b/packages/oui-collapsible/src/index.spec.js
index 3fdfb6bb..fa48f5b9 100644
--- a/packages/oui-collapsible/src/index.spec.js
+++ b/packages/oui-collapsible/src/index.spec.js
@@ -9,7 +9,7 @@ describe("ouiCollapsible", () => {
     }));
 
     function getHeaderElement (element) {
-        return element[0].querySelector(".oui-collapsible__header-button");
+        return element[0].querySelector(".oui-collapsible__header");
     }
 
     function getBodyElement (element) {
@@ -17,36 +17,10 @@ describe("ouiCollapsible", () => {
     }
 
     describe("Component", () => {
-        it("should have a header button with icon", () => {
-            const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="Title" aria-label="Action">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
-            );
-
-            const headerEl = getHeaderElement(element);
-            const iconEl = headerEl.querySelector(".oui-collapsible__toggle-icon");
-            expect(headerEl).toBeTruthy();
-            expect(iconEl).toBeTruthy();
-        });
-
-        it("should have a body", () => {
-            const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="Title" aria-label="Action">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
-            );
-
-            const bodyEl = getBodyElement(element);
-            expect(bodyEl).toBeTruthy();
-        });
-
         it("should have the correct title", () => {
             const titleText = "Collapsible title";
             const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="${titleText}" aria-label="Action">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
+                <oui-collapsible title="${titleText}" aria-label="Action"></oui-collapsible>`
             );
 
             const headerEl = getHeaderElement(element);
@@ -56,9 +30,7 @@ describe("ouiCollapsible", () => {
         it("should have the correct aria-label", () => {
             const ariaLabel = "Action";
             const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="Title" aria-label="${ariaLabel}">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
+                <oui-collapsible title="Title" aria-label="${ariaLabel}"></oui-collapsible>`
             );
 
             const headerEl = getHeaderElement(element);
@@ -66,32 +38,28 @@ describe("ouiCollapsible", () => {
         });
 
 
-        it("should expand on header click", () => {
+        it("should expand and collapse on header click", () => {
             const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="Title" aria-label="Action" expanded="false">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
+                <oui-collapsible title="Title" aria-label="Action"></oui-collapsible>`
             );
 
-            const headerEl = getHeaderElement(element);
-            angular.element(headerEl).triggerHandler("click");
+            const headerEl = angular.element(getHeaderElement(element));
 
-            const openCollapsible = element[0].querySelector(".oui-collapsible_open");
-            expect(openCollapsible).toBeTruthy();
+            // Expand
+            headerEl.triggerHandler("click");
+            expect(headerEl.attr("aria-expanded")).toBe("true");
+
+            // Collapse
+            headerEl.triggerHandler("click");
+            expect(headerEl.attr("aria-expanded")).toBe("false");
         });
 
-        it("should be collapsed when header is clicked", () => {
+        it("should be expanded", () => {
             const element = TestUtils.compileTemplate(`
-                <oui-collapsible title="Title" aria-label="Action" expanded="true">
-                    <div>Collapsible body</div>
-                </oui-collapsible>`
+                <oui-collapsible title="Title" aria-label="Action" expanded="true"></oui-collapsible>`
             );
-
-            const headerEl = getHeaderElement(element);
-            angular.element(headerEl).triggerHandler("click");
-
-            const openCollapsible = element[0].querySelector(".oui-collapsible_open");
-            expect(openCollapsible).toBeFalsy();
+            const headerEl = angular.element(getHeaderElement(element));
+            expect(headerEl.attr("aria-expanded")).toBe("true");
         });
 
         it("should transclude the contents into the collapsible body", () => {