Merge pull request #553 from cal-smith/master

zvonimirfras · web-flow · commit 1a03b01a1bde · 2019-05-21T13:43:48.000-04:00
feat(ui-shell): add panel and product switcher, refactor into modules
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ui-shell/header-action.component.ts b/src/ui-shell/header-action.component.ts
diff --git a/src/ui-shell/header/hamburger.component.ts b/src/ui-shell/header/hamburger.component.ts
@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { I18n } from "../i18n/i18n.module";
+import { I18n } from "../../i18n/i18n.module";
 
 /**
  * A slide-out hamburger menu
diff --git a/src/ui-shell/header/header-action.component.ts b/src/ui-shell/header/header-action.component.ts
@@ -0,0 +1,33 @@
+import {
+	Component,
+	Input,
+	Output,
+	EventEmitter
+} from "@angular/core";
+
+@Component({
+	selector: "ibm-header-action",
+	template: `
+		<button
+			class="bx--header__action"
+			[ngClass]="{
+				'bx--header__action--active': active
+			}"
+			[attr.aria-label]="title"
+			[title]="title"
+			(click)="onClick()">
+			<ng-content></ng-content>
+			<svg ibmIconClose20 class="bx--navigation-menu-panel-collapse-icon"></svg>
+		</button>
+	`
+})
+export class HeaderAction {
+	@Input() title;
+	@Input() active = false;
+	@Output() selected = new EventEmitter<boolean>();
+
+	onClick() {
+		this.active = !this.active;
+		this.selected.emit(this.active);
+	}
+}
diff --git a/src/ui-shell/header/header-global.component.ts b/src/ui-shell/header/header-global.component.ts
diff --git a/src/ui-shell/header/header-item.component.ts b/src/ui-shell/header/header-item.component.ts
diff --git a/src/ui-shell/header/header-menu.component.ts b/src/ui-shell/header/header-menu.component.ts
diff --git a/src/ui-shell/header/header-navigation.component.ts b/src/ui-shell/header/header-navigation.component.ts
diff --git a/src/ui-shell/header/header.component.spec.ts b/src/ui-shell/header/header.component.spec.ts
@@ -2,9 +2,9 @@ import { Component } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 
-import { I18nModule } from "../i18n/i18n.module";
+import { I18nModule } from "../../i18n/i18n.module";
 import { Header } from "./header.component";
-import { Hamburger } from "./ui-shell.module";
+import { Hamburger } from "../ui-shell.module";
 
 /**
  * Testing component for projecting an ibm-hamburger component
diff --git a/src/ui-shell/header/header.component.ts b/src/ui-shell/header/header.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, HostBinding } from "@angular/core";
-import { I18n } from "./../i18n/i18n.module";
+import { I18n } from "../../i18n/i18n.module";
 
 /**
  * [See demo](../../?path=/story/ui-shell--header)
diff --git a/src/ui-shell/header/header.module.ts b/src/ui-shell/header/header.module.ts
@@ -0,0 +1,52 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Close20Module } from "@carbon/icons-angular/lib/close/20";
+
+import { I18nModule } from "./../../i18n/i18n.module";
+
+import { Header } from "./header.component";
+import { HeaderItem } from "./header-item.component";
+import { HeaderMenu } from "./header-menu.component";
+import { HeaderNavigation } from "./header-navigation.component";
+import { HeaderGlobal } from "./header-global.component";
+import { HeaderAction } from "./header-action.component";
+
+import { Hamburger } from "./hamburger.component";
+
+export {
+	Header,
+	HeaderItem,
+	HeaderMenu,
+	HeaderNavigation,
+	HeaderGlobal,
+	HeaderAction,
+	Hamburger
+};
+
+@NgModule({
+	declarations: [
+		Header,
+		HeaderItem,
+		HeaderMenu,
+		HeaderNavigation,
+		HeaderGlobal,
+		HeaderAction,
+		Hamburger
+	],
+	imports: [
+		CommonModule,
+		I18nModule,
+		Close20Module
+	],
+	exports: [
+		Header,
+		HeaderItem,
+		HeaderMenu,
+		HeaderNavigation,
+		HeaderGlobal,
+		HeaderAction,
+		Hamburger
+	]
+})
+export class HeaderModule { }
diff --git a/src/ui-shell/panel/panel.component.ts b/src/ui-shell/panel/panel.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+	selector: "ibm-panel",
+	template: `
+		<aside
+			class="bx--panel--overlay"
+			[ngClass]="{
+				'bx--panel--expanded': expanded
+			}">
+			<ng-content></ng-content>
+		</aside>
+	`
+})
+export class Panel {
+	@Input() expanded = false;
+}
diff --git a/src/ui-shell/panel/panel.module.ts b/src/ui-shell/panel/panel.module.ts
@@ -0,0 +1,37 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { I18nModule } from "./../../i18n/i18n.module";
+
+import { Panel } from "./panel.component";
+import { ProductSwitcher } from "./product-switcher.component";
+import { ProductSwitcherList } from "./product-switcher-list.component";
+import { ProductSwitcherListItem } from "./product-switcher-list-item.component";
+import { ProductSwitcherItem } from "./product-switcher-item.component";
+
+export {
+	Panel,
+	ProductSwitcher,
+	ProductSwitcherList,
+	ProductSwitcherListItem,
+	ProductSwitcherItem
+};
+
+@NgModule({
+	declarations: [
+		Panel,
+		ProductSwitcher,
+		ProductSwitcherList,
+		ProductSwitcherListItem,
+		ProductSwitcherItem
+	],
+	imports: [CommonModule, I18nModule],
+	exports: [
+		Panel,
+		ProductSwitcher,
+		ProductSwitcherList,
+		ProductSwitcherListItem,
+		ProductSwitcherItem
+	]
+})
+export class PanelModule { }
diff --git a/src/ui-shell/panel/product-switcher-item.component.ts b/src/ui-shell/panel/product-switcher-item.component.ts
@@ -0,0 +1,9 @@
+import { Component, HostBinding } from "@angular/core";
+
+@Component({
+	selector: "ibm-product-switcher-item",
+	template: `<ng-content></ng-content>`
+})
+export class ProductSwitcherItem {
+	@HostBinding("class.bx--product-switcher__item") hostClass = true;
+}
diff --git a/src/ui-shell/panel/product-switcher-list-item.component.ts b/src/ui-shell/panel/product-switcher-list-item.component.ts
@@ -0,0 +1,34 @@
+import { Component, HostBinding, Input } from "@angular/core";
+import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
+
+@Component({
+	selector: "ibm-product-switcher-list-item",
+	template: `
+		<li class="bx--product-list__item">
+			<a class="bx--product-link" tabindex="0" [href]="href">
+				<div class="bx--product-switcher__icon">
+					<ng-content select="svg"></ng-content>
+				</div>
+				<span class="bx--product-link__name">
+					<ng-content></ng-content>
+				</span>
+			</a>
+			<ng-content select="ibm-overflow-menu"></ng-content>
+		</li>
+	`
+})
+export class ProductSwitcherListItem {
+	@Input() set href(value: string) {
+		this._href = this.domSanitizer.bypassSecurityTrustUrl(value);
+	}
+
+	get href() {
+		return this._href as string;
+	}
+
+	protected _href: SafeUrl;
+
+	constructor(protected domSanitizer: DomSanitizer) {
+		this.href = "javascript:void(0)";
+	}
+}
diff --git a/src/ui-shell/panel/product-switcher-list.component.ts b/src/ui-shell/panel/product-switcher-list.component.ts
@@ -0,0 +1,12 @@
+import { Component, HostBinding } from "@angular/core";
+
+@Component({
+	selector: "ibm-product-switcher-list",
+	template: `
+		<ul class="bx--product-switcher__product-list">
+			<ng-content></ng-content>
+		</ul>
+	`
+})
+export class ProductSwitcherList {
+}
diff --git a/src/ui-shell/panel/product-switcher.component.ts b/src/ui-shell/panel/product-switcher.component.ts
@@ -0,0 +1,16 @@
+import { Component, HostBinding, Input } from "@angular/core";
+
+@Component({
+	selector: "ibm-product-switcher",
+	template: `
+		<div class="bx--product-switcher__search">
+			<ng-content select="ibm-search"></ng-content>
+		</div>
+		<p class="bx--product-switcher__subheader">{{header}}</p>
+		<ng-content></ng-content>
+	`
+})
+export class ProductSwitcher {
+	@Input() header = "";
+	@HostBinding("class.bx--product-switcher") hostClass = true;
+}
diff --git a/src/ui-shell/sidenav/sidenav-header.component.ts b/src/ui-shell/sidenav/sidenav-header.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from "@angular/core";
-import { ListItem } from "./../dropdown/dropdown.module";
-import { I18n } from "./../i18n/i18n.module";
+import { ListItem } from "../../dropdown/dropdown.module";
+import { I18n } from "../../i18n/i18n.module";
 
 @Component({
 	selector: "ibm-sidenav-header",
diff --git a/src/ui-shell/sidenav/sidenav-item.component.ts b/src/ui-shell/sidenav/sidenav-item.component.ts
diff --git a/src/ui-shell/sidenav/sidenav-menu.component.ts b/src/ui-shell/sidenav/sidenav-menu.component.ts
@@ -5,7 +5,7 @@ import {
 	Input,
 	QueryList
 } from "@angular/core";
-import { SideNavItem } from "./ui-shell.module";
+import { SideNavItem } from "./sidenav-item.component";
 
 @Component({
 	selector: "ibm-sidenav-menu",
diff --git a/src/ui-shell/sidenav/sidenav.component.ts b/src/ui-shell/sidenav/sidenav.component.ts
@@ -4,7 +4,7 @@ import {
 	Input,
 	ViewEncapsulation
 } from "@angular/core";
-import { I18n } from "./../i18n/i18n.module";
+import { I18n } from "../../i18n/i18n.module";
 
 /**
  * [See demo](../../?path=/story/ui-shell--side-navigation)
diff --git a/src/ui-shell/sidenav/sidenav.module.ts b/src/ui-shell/sidenav/sidenav.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { I18nModule } from "./../../i18n/i18n.module";
+
+import { SideNav } from "./sidenav.component";
+import { SideNavHeader } from "./sidenav-header.component";
+import { SideNavItem } from "./sidenav-item.component";
+import { SideNavMenu } from "./sidenav-menu.component";
+
+export {
+	SideNav,
+	SideNavHeader,
+	SideNavItem,
+	SideNavMenu
+};
+
+@NgModule({
+	declarations: [
+		SideNav,
+		SideNavHeader,
+		SideNavItem,
+		SideNavMenu
+	],
+	imports: [CommonModule, I18nModule],
+	exports: [
+		SideNav,
+		SideNavHeader,
+		SideNavItem,
+		SideNavMenu
+	]
+})
+export class SideNavModule { }
diff --git a/src/ui-shell/ui-shell.module.ts b/src/ui-shell/ui-shell.module.ts
@@ -3,61 +3,26 @@ import { CommonModule } from "@angular/common";
 
 import { I18nModule } from "./../i18n/i18n.module";
 
-import { Header } from "./header.component";
-import { HeaderItem } from "./header-item.component";
-import { HeaderMenu } from "./header-menu.component";
-import { HeaderNavigation } from "./header-navigation.component";
-import { HeaderGlobal } from "./header-global.component";
-import { HeaderAction } from "./header-action.component";
+import { HeaderModule } from "./header/header.module";
+import { SideNavModule } from "./sidenav/sidenav.module";
+import { PanelModule } from "./panel/panel.module";
 
-import { Hamburger } from "./hamburger.component";
-
-import { SideNav } from "./sidenav.component";
-import { SideNavHeader } from "./sidenav-header.component";
-import { SideNavItem } from "./sidenav-item.component";
-import { SideNavMenu } from "./sidenav-menu.component";
-
-export {
-	Header,
-	HeaderItem,
-	HeaderMenu,
-	HeaderNavigation,
-	HeaderGlobal,
-	HeaderAction,
-	Hamburger,
-	SideNav,
-	SideNavHeader,
-	SideNavItem,
-	SideNavMenu
-};
+export * from "./header/header.module";
+export * from "./sidenav/sidenav.module";
+export * from "./panel/panel.module";
 
 @NgModule({
-	declarations: [
-		Header,
-		HeaderItem,
-		HeaderMenu,
-		HeaderNavigation,
-		HeaderGlobal,
-		HeaderAction,
-		Hamburger,
-		SideNav,
-		SideNavHeader,
-		SideNavItem,
-		SideNavMenu
+	imports: [
+		CommonModule,
+		I18nModule,
+		HeaderModule,
+		SideNavModule,
+		PanelModule
 	],
-	imports: [CommonModule, I18nModule],
 	exports: [
-		Header,
-		HeaderItem,
-		HeaderMenu,
-		HeaderNavigation,
-		HeaderGlobal,
-		HeaderAction,
-		Hamburger,
-		SideNav,
-		SideNavHeader,
-		SideNavItem,
-		SideNavMenu
+		HeaderModule,
+		SideNavModule,
+		PanelModule
 	]
 })
 export class UIShellModule { }
diff --git a/src/ui-shell/ui-shell.stories.ts b/src/ui-shell/ui-shell.stories.ts
