Merge pull request #350 from youda97/tabs

feat(tabs): Add skeleton state

Author: zvonimirfras

src/tabs/tab-headers.component.ts

@@ -25,7 +25,12 @@ import { Tab } from "./tab.component";
 @Component({
 	selector: "ibm-tab-headers",
 	template: `
-		<nav class="bx--tabs" role="navigation">
+		<nav
+			class="bx--tabs"
+			[ngClass]="{
+				'bx--skeleton': skeleton
+			}"
+			role="navigation">
 			<div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()">
 				<a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1">
 					<ng-container *ngIf="!getSelectedTab().headingIsTemplate">
@@ -102,6 +107,10 @@ export class TabHeaders implements AfterViewInit, AfterContentInit {
 	 * @memberof TabHeaders
 	 */
 	@Input() followFocus: boolean;
+	/**
+	 * Set to `true` to put tabs in a loading state.
+	 */
+	@Input() skeleton = false;
 
 	/**
 	 * Gets the Unordered List element that holds the `Tab` headings from the view DOM.

src/tabs/tabs.component.ts

@@ -41,13 +41,15 @@ import { TabHeaders } from "./tab-headers.component";
 	template: `
 			<ibm-tab-headers
 				*ngIf="hasTabHeaders() && position === 'top'"
+				[skeleton]="skeleton"
 				[tabs]="tabs"
 				[followFocus]="followFocus"
 				[cacheActive]="cacheActive">
 			</ibm-tab-headers>
 			<ng-content></ng-content>
 			<ibm-tab-headers
 				*ngIf="hasTabHeaders() && position === 'bottom'"
+				[skeleton]="skeleton"
 				[tabs]="tabs"
 				[cacheActive]="cacheActive">
 			</ibm-tab-headers>
@@ -71,6 +73,10 @@ export class Tabs implements AfterContentInit {
 	 * @memberof Tabs
 	 */
 	@Input() followFocus = true;
+	/**
+	 * Set to `true` to put tabs in a loading state.
+	 */
+	@Input() skeleton = false;
 
 	/**
 	 * Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.

src/tabs/tabs.stories.ts

@@ -39,4 +39,12 @@ storiesOf("Tabs", module)
 				<ibm-tab [heading]="customTab">foo</ibm-tab>
 			</ibm-tabs>
 		`
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<ibm-tabs skeleton="true">
+				<ibm-tab></ibm-tab>
+				<ibm-tab></ibm-tab>
+			</ibm-tabs>
+		`
 	}));