feat(oui-collapsible): collapsible component addition

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",

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))$/));

packages/oui-collapsible/README.md

@@ -0,0 +1,31 @@
+# Collapsible
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Normal
+
+```html:preview
+<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 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>
+```
+
+## API
+
+### oui-collapsible
+
+| 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

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

@@ -0,0 +1,14 @@
+import controller from "./collapsible.controller.js";
+import template from "./collapsible.html";
+
+export default {
+    template,
+    controller,
+    bindings: {
+        id: "@",
+        title: "@",
+        ariaLabel: "@?",
+        expanded: "<?"
+    },
+    transclude: true
+};

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

@@ -0,0 +1,40 @@
+import { addDefaultParameter } from "@oui-angular/common/component-utils";
+
+export default class {
+    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 () {
+        this.$timeout(() =>
+            this.$element
+                .addClass("oui-collapsible")
+                .removeAttr("aria-label")
+        );
+
+        // Apply on resize for new body height
+        angular.element(this.$window)
+            .on("resize", () => this.$scope.$apply());
+    }
+
+    toggle () {
+        this.expanded = !this.expanded;
+    }
+}

packages/oui-collapsible/src/collapsible.html

@@ -0,0 +1,11 @@
+<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>

packages/oui-collapsible/src/index.js

@@ -0,0 +1,4 @@
+import Collapsible from "./collapsible.component.js";
+
+angular.module("oui.collapsible", [])
+    .component("ouiCollapsible", Collapsible);

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

@@ -0,0 +1,79 @@
+describe("ouiCollapsible", () => {
+    let TestUtils;
+
+    beforeEach(angular.mock.module("oui.collapsible"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_TestUtils_) => {
+        TestUtils = _TestUtils_;
+    }));
+
+    function getHeaderElement (element) {
+        return element[0].querySelector(".oui-collapsible__header");
+    }
+
+    function getBodyElement (element) {
+        return element[0].querySelector(".oui-collapsible__body");
+    }
+
+    describe("Component", () => {
+        it("should have the correct title", () => {
+            const titleText = "Collapsible title";
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="${titleText}" aria-label="Action"></oui-collapsible>`
+            );
+
+            const headerEl = getHeaderElement(element);
+            expect(headerEl.innerText).toContain(titleText);
+        });
+
+        it("should have the correct aria-label", () => {
+            const ariaLabel = "Action";
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="${ariaLabel}"></oui-collapsible>`
+            );
+
+            const headerEl = getHeaderElement(element);
+            expect(headerEl.getAttribute("aria-label")).toBe(ariaLabel);
+        });
+
+
+        it("should expand and collapse on header click", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action"></oui-collapsible>`
+            );
+
+            const headerEl = angular.element(getHeaderElement(element));
+
+            // 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 expanded", () => {
+            const element = TestUtils.compileTemplate(`
+                <oui-collapsible title="Title" aria-label="Action" expanded="true"></oui-collapsible>`
+            );
+            const headerEl = angular.element(getHeaderElement(element));
+            expect(headerEl.attr("aria-expanded")).toBe("true");
+        });
+
+        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 = getBodyElement(element);
+            expect(bodyEl).toBeTruthy();
+
+            const contentEl = bodyEl.querySelector(".custom-content");
+            expect(contentEl).toBeTruthy();
+        });
+    });
+});