feat(conent-switcher): add content switcher

Author: cal-smith

.travis.yml

@@ -1,23 +1,34 @@
+sudo: required
 dist: trusty
 language: node_js
-sudo: required
 node_js:
-  - '8'
+  - "8"
 addons:
   chrome: stable
 before_install:
-- google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
+  - "google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &"
 before_script:
-- export DISPLAY=:99.0
-- sh -e /etc/init.d/xvfb start
-- sleep 3
-- "sudo chown root /opt/google/chrome/chrome-sandbox"
-- "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
-script: npm run lint && npm test
-sudo: false
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+  - "sleep 3"
+  - "sudo chown root /opt/google/chrome/chrome-sandbox"
+  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
+script: "npm run lint && npm test"
 deploy:
-  skip_cleanup: true
-  provider: script
-  script: bash ./scripts/deploy.sh
-  on:
-    branch: master
+  -
+    provider: script
+    script: "bash ./scripts/deploy.sh"
+    skip_cleanup: true
+    true:
+      branch: master
+  -
+    allow-empty-commit: true
+    email: [email protected]
+    github-token: $GH_TOKEN
+    keep-history: true
+    local-dir: pages
+    name: carbon-bot
+    provider: pages
+    skip_cleanup: true
+    true:
+      branch: master

src/content-switcher/content-switcher-option.directive.ts

@@ -0,0 +1,40 @@
+import {
+	Directive,
+	HostBinding,
+	Input,
+	HostListener,
+	Output,
+	EventEmitter
+} from "@angular/core";
+
+@Directive({
+	selector: "[ibmContentOption]"
+})
+export class ContentSwitcherOption {
+	@Input() set active (value: boolean) {
+		this._active = value;
+		this.selectedClass = value;
+		this.ariaSelected = value;
+	}
+
+	get active() {
+		return this._active;
+	}
+
+	@Input() name = "option";
+
+	@Output() selected = new EventEmitter();
+
+	@HostBinding("class") switcherClass = "bx--content-switcher-btn";
+	@HostBinding("class.bx--content-switcher--selected") selectedClass = false;
+	@HostBinding("attr.role") role = "tab";
+	@HostBinding("attr.aria-selected") ariaSelected = false;
+
+	protected _active = false;
+
+	@HostListener("click")
+	hostClick() {
+		this.active = true;
+		this.selected.emit(true);
+	}
+}

src/content-switcher/content-switcher.component.ts

@@ -0,0 +1,47 @@
+import {
+	Component,
+	Input,
+	ContentChildren,
+	QueryList,
+	Output,
+	EventEmitter,
+	AfterViewInit
+} from "@angular/core";
+import { ContentSwitcherOption } from "./content-switcher-option.directive";
+
+/**
+ *
+ *
+ */
+@Component({
+	selector: "ibm-content-switcher",
+	template: `
+		<div
+			[attr.aria-label]="label"
+			class="bx--content-switcher"
+			role="tablist">
+			<ng-content></ng-content>
+		</div>
+	`,
+})
+export class ContentSwitcher implements AfterViewInit {
+	@Input() label = "content switcher";
+
+	@Output() selected = new EventEmitter();
+
+	@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;
+
+	ngAfterViewInit() {
+		this.options.forEach(option => {
+			option.selected.subscribe(_ => {
+				const active = option;
+				this.options.forEach(option => {
+					if (option !== active) {
+						option.active = false;
+					}
+				});
+				this.selected.emit(active);
+			});
+		});
+	}
+}

src/content-switcher/content-switcher.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { ContentSwitcher } from "./content-switcher.component";
+import { ContentSwitcherOption } from "./content-switcher-option.directive";
+
+export { ContentSwitcher } from "./content-switcher.component";
+export { ContentSwitcherOption } from "./content-switcher-option.directive";
+
+@NgModule({
+	declarations: [
+		ContentSwitcher,
+		ContentSwitcherOption
+	],
+	exports: [
+		ContentSwitcher,
+		ContentSwitcherOption
+	],
+	imports: [CommonModule]
+})
+export class ContentSwitcherModule { }

src/content-switcher/content-switcher.stories.ts

@@ -0,0 +1,29 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withNotes } from "@storybook/addon-notes";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+
+import { ContentSwitcherModule } from "../";
+
+
+storiesOf("Content Switcher", module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [
+				ContentSwitcherModule,
+			]
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+			<ibm-content-switcher (selected)="selected($event)">
+				<button ibmContentOption>First section</button>
+				<button ibmContentOption>Second section</button>
+				<button ibmContentOption>Third section</button>
+			</ibm-content-switcher>
+		`,
+		props: {
+			selected: action("selection changed")
+		}
+	}));

src/index.ts

@@ -12,3 +12,4 @@ export * from "./table/table.module";
 export * from "./tabs/tabs.module";
 export * from "./pill-input/pill-input.module";
 export * from "./utils/position";
+export * from "./content-switcher/content-switcher.module";