feat(oui-page-header): create page-header component (#204)

* feat(oui-page-header): create component

* feat(oui-page-header): add test

Author: rfougier

packages/oui-angular/src/index.js

@@ -30,6 +30,7 @@ import "@oui-angular/oui-stepper/src";
 import "@oui-angular/oui-skeleton/src";
 import "@oui-angular/oui-clipboard/src";
 import "@oui-angular/oui-slideshow/src";
+import "@oui-angular/oui-page-header/src";
 
 angular.module("oui", [
     "oui.button",
@@ -63,5 +64,6 @@ angular.module("oui", [
     "oui.stepper",
     "oui.skeleton",
     "oui.clipboard",
-    "oui.slideshow"
+    "oui.slideshow",
+    "oui.page-header"
 ]);

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

@@ -31,6 +31,7 @@ loadTests(require.context("../../oui-stepper/src/", true, /.*((\.spec)|(index))$
 loadTests(require.context("../../oui-skeleton/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-clipboard/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-slideshow/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-page-header/src/", true, /.*((\.spec)|(index))$/));
 
 function loadTests (context) {
     context.keys().forEach(context);

packages/oui-page-header/README.md

@@ -0,0 +1,37 @@
+# Page Header
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Default
+
+```html:preview
+<oui-page-header heading="My title"></oui-page-header>
+```
+
+```html:preview
+<oui-page-header heading="My title" description="My subtitle"></oui-page-header>
+```
+
+
+### With guide
+
+```html:preview
+<oui-page-header heading="My title" description="My subtitle"></oui-page-header>
+```
+
+
+### With tabs
+
+```html:preview
+<oui-page-header heading="My title" description="My subtitle"></oui-page-header>
+```
+
+
+## API
+
+| Attribute     | Type     | Binding | One-time Binding | Values                 | Default   | Description                      |
+| ----          | ----     | ----    | ----             | ----                   | ----      | ----                             |
+| heading       | string   | @?      | true             |                        |           | title of the header              |
+| description   | string   | @?      | true             |                        |           | subtitle of the header           |

packages/oui-page-header/src/index.js

@@ -0,0 +1,4 @@
+import PageHeader from "./page-header.component";
+
+angular.module("oui.page-header", [])
+    .component("ouiPageHeader", PageHeader);

packages/oui-page-header/src/index.spec.js

@@ -0,0 +1,36 @@
+describe("ouiPageHeader", () => {
+    let TestUtils;
+
+    beforeEach(angular.mock.module("oui.page-header"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_TestUtils_) => {
+        TestUtils = _TestUtils_;
+    }));
+
+    function getTitleElement (element) {
+        return element[0].querySelector(".oui-page-header__title");
+    }
+
+    function getDescriptionElement (element) {
+        return element[0].querySelector(".oui-page-header__description");
+    }
+
+    describe("Component", () => {
+        it("should display page-header with title only", () => {
+            const element = TestUtils.compileTemplate("<oui-page-header heading=\"title\"></oui-page-header>");
+
+            const titleElement = getTitleElement(element);
+            expect(angular.element(titleElement).html()).toBe("title");
+        });
+
+        it("should display page-header with title and subtitle", () => {
+            const element = TestUtils.compileTemplate("<oui-page-header heading=\"title\" description=\"subtitle\"></oui-page-header>");
+
+            const titleElement = getTitleElement(element);
+            const subtitleElement = getDescriptionElement(element);
+            expect(angular.element(titleElement).html()).toBe("title");
+            expect(angular.element(subtitleElement).html()).toBe("subtitle");
+        });
+    });
+});

packages/oui-page-header/src/page-header.component.js

@@ -0,0 +1,15 @@
+import controller from "./page-header.controller.js";
+import template from "./page-header.html";
+
+export default {
+    template,
+    controller,
+    bindings: {
+        heading: "@?",
+        description: "@?"
+    },
+    transclude: {
+        guide: "?ouiGuide",
+        tabs: "?ouiHeaderTabs"
+    }
+};

packages/oui-page-header/src/page-header.controller.js

@@ -0,0 +1,14 @@
+export default class {
+    constructor ($attrs, $transclude) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$transclude = $transclude;
+    }
+
+    $onInit () {
+        this.transcludeGuide = this.$transclude.isSlotFilled("guide");
+        this.transcludeTabs = this.$transclude.isSlotFilled("tabs");
+    }
+
+}

packages/oui-page-header/src/page-header.html

@@ -0,0 +1,16 @@
+<header class="oui-page-header">
+    <div class="oui-page-header__container">
+        <div class="oui-page-header__content">
+            <h1 class="oui-page-header__title" ng-bind="::$ctrl.heading"></h1>
+            <h2 class="oui-page-header__description"
+            	ng-if="::!!$ctrl.description"
+                ng-bind="::$ctrl.description"></h2>
+        </div>
+        <div class="oui-page-header__guide"
+             ng-if="$ctrl.transcludeGuide"
+        	 ng-transclude="guide"></div>
+    </div>
+    <div class="oui-page-header__tabs"
+         ng-if="$ctrl.transcludeTabs"
+		 ng-transclude="tabs"></div>
+</header>