Merge pull request #527 from cal-smith/issue#256

feat(tabs): add before and after content support to tab headers

Author: zvonimirfras

src/tabs/tab-headers.component.ts

@@ -50,6 +50,9 @@ import { Tab } from "./tab.component";
 				}"
 				class="bx--tabs__nav"
 				role="tablist">
+				<li role="presentation">
+					<ng-container *ngIf="contentBefore" [ngTemplateOutlet]="contentBefore"></ng-container>
+				</li>
 				<li
 					*ngFor="let tab of tabs; let i = index;"
 					[ngClass]="{
@@ -79,11 +82,11 @@ import { Tab } from "./tab.component";
 						</ng-template>
 					</a>
 				</li>
+				<li role="presentation">
+					<ng-container *ngIf="contentAfter" [ngTemplateOutlet]="contentAfter"></ng-container>
+				</li>
 			</ul>
 		</nav>
-		<div>
-			<ng-content select="ibm-tab"></ng-content>
-		</div>
 	 `
 })
 
@@ -108,6 +111,9 @@ export class TabHeaders implements AfterContentInit {
 	 */
 	@Input() skeleton = false;
 
+	@Input() contentBefore;
+	@Input() contentAfter;
+
 	/**
 	 * Gets the Unordered List element that holds the `Tab` headings from the view DOM.
 	 */

src/tabs/tabs.component.ts

@@ -44,9 +44,17 @@ import { TabHeaders } from "./tab-headers.component";
 				[skeleton]="skeleton"
 				[tabs]="tabs"
 				[followFocus]="followFocus"
-				[cacheActive]="cacheActive">
+				[cacheActive]="cacheActive"
+				[contentBefore]="before"
+				[contentAfter]="after">
 			</ibm-tab-headers>
 			<ng-content></ng-content>
+			<ng-template #before>
+				<ng-content select="[before]"></ng-content>
+			</ng-template>
+			<ng-template #after>
+				<ng-content select="[after]"></ng-content>
+			</ng-template>
 			<ibm-tab-headers
 				*ngIf="hasTabHeaders() && position === 'bottom'"
 				[skeleton]="skeleton"

src/tabs/tabs.stories.ts

@@ -55,6 +55,33 @@ storiesOf("Tabs", module)
 			]
 		}
 	}))
+	.add("Width before and after content", () => ({
+		template: `
+			<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">before</div>
+			<ibm-tabs [followFocus]="followFocus" [isNavigation]="isNavigation">
+				<ibm-tab heading="one">foo</ibm-tab>
+				<ibm-tab heading="two">bar</ibm-tab>
+				<span before>content before</span>
+			</ibm-tabs>
+			<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">after</div>
+			<ibm-tabs [followFocus]="followFocus" [isNavigation]="isNavigation">
+				<ibm-tab heading="one">foo</ibm-tab>
+				<ibm-tab heading="two">bar</ibm-tab>
+				<span after>content after</span>
+			</ibm-tabs>
+			<div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">both</div>
+			<ibm-tabs [followFocus]="followFocus" [isNavigation]="isNavigation">
+				<ibm-tab heading="one">foo</ibm-tab>
+				<ibm-tab heading="two">bar</ibm-tab>
+				<span before>content before</span>
+				<span after>content after</span>
+			</ibm-tabs>
+		`,
+		props: {
+			followFocus: boolean("followFocus", true),
+			isNavigation: boolean("isNavigation", false)
+		}
+	}))
 	.add("Skeleton", () => ({
 		template: `
 			<ibm-tabs skeleton="true">