Merge branch 'master' of https://github.com/IBM/carbon-components-angular into storybook-styles

Author: youda97

src/file-uploader/file-uploader.component.ts

@@ -16,27 +16,35 @@ const noop = () => {};
 @Component({
 	selector: "ibm-file-uploader",
 	template: `
-		<strong class="bx--label">{{title}}</strong>
-		<p class="bx--label-description">{{description}}</p>
-		<div class="bx--file">
-			<button
-				ibmButton="secondary"
-				(click)="fileInput.click()"
-				[attr.for]="fileUploaderId">
-				{{buttonText}}
-			</button>
-			<input
-				#fileInput
-				type="file"
-				class="bx--file-input"
-				[accept]="accept"
-				[id]="fileUploaderId"
-				[multiple]="multiple"
-				(change)="onFilesAdded()"/>
-			<div class="bx--file-container">
-				<ibm-file *ngFor="let fileItem of files" [fileItem]="fileItem" (remove)="removeFile(fileItem)"></ibm-file>
+		<ng-container *ngIf="!skeleton; else skeletonTemplate">
+			<strong class="bx--label">{{title}}</strong>
+			<p class="bx--label-description">{{description}}</p>
+			<div class="bx--file">
+				<button
+					ibmButton="secondary"
+					(click)="fileInput.click()"
+					[attr.for]="fileUploaderId">
+					{{buttonText}}
+				</button>
+				<input
+					#fileInput
+					type="file"
+					class="bx--file-input"
+					[accept]="accept"
+					[id]="fileUploaderId"
+					[multiple]="multiple"
+					(change)="onFilesAdded()"/>
+				<div class="bx--file-container">
+					<ibm-file *ngFor="let fileItem of files" [fileItem]="fileItem" (remove)="removeFile(fileItem)"></ibm-file>
+				</div>
 			</div>
-		</div>
+		</ng-container>
+
+		<ng-template #skeletonTemplate>
+			<div class="bx--skeleton__text" style="width: 100px"></div>
+			<div class="bx--skeleton__text" style="width: 225px"></div>
+			<button ibmButton skeleton="true"></button>
+		</ng-template>
 	`,
 	providers: [
 		{
@@ -75,6 +83,10 @@ export class FileUploader implements OnInit {
 	 * Defaults to `true`. Accepts multiple files.
 	 */
 	@Input() multiple = true;
+	/**
+	 * Set to `true` for a loading file uploader.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * Provides a unique id for the underlying <input> node
 	 */

src/file-uploader/file-uploader.stories.ts

@@ -21,6 +21,7 @@ import { NotificationService } from "../notification/notification.service";
 			[buttonText]="buttonText"
 			[accept]="accept"
 			[multiple]="multiple"
+			[skeleton]="skeleton"
 			[(files)]="files">
 		</ibm-file-uploader>
 
@@ -40,6 +41,7 @@ class FileUploaderStory {
 	@Input() buttonText;
 	@Input() accept;
 	@Input() multiple;
+	@Input() skeleton = false;
 
 	protected maxSize = 500000;
 
@@ -181,4 +183,9 @@ storiesOf("File Uploader", module)
 			accept: array("Accepted file extensions", [".png", ".jpg"], ","),
 			multiple: boolean("Supports multiple files", true)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<app-file-uploader skeleton="true"></app-file-uploader>
+		`
 	}));

src/table/table.component.ts

@@ -8,6 +8,8 @@ import {
 import { Subscription, fromEvent } from "rxjs";
 
 import { TableModel } from "./table.module";
+import { TableHeaderItem } from "./table-header-item.class";
+import { TableItem } from "./table-item.class";
 import { getScrollbarWidth } from "../common/utils";
 import { I18n } from "./../i18n/i18n.module";
 
@@ -165,12 +167,13 @@ import { I18n } from "./../i18n/i18n.module";
 	[ngClass]="{
 		'bx--data-table-v2--compact': size === 'sm',
 		'bx--data-table-v2--tall': size === 'lg',
-		'bx--data-table-v2--zebra': striped
+		'bx--data-table-v2--zebra': striped,
+		'bx--skeleton': skeleton
 	}">
 		<thead>
 			<tr>
 				<th *ngIf="model.hasExpandableRows()"></th>
-				<th *ngIf="showSelectionColumn" style="width: 10px;">
+				<th *ngIf="!skeleton && showSelectionColumn" style="width: 10px;">
 					<ibm-checkbox
 						[size]="size !== ('lg' ? 'sm' : 'md')"
 						[(ngModel)]="selectAllCheckbox"
@@ -187,6 +190,7 @@ import { I18n } from "./../i18n/i18n.module";
 					[draggable]="columnsDraggable"
 					(dragstart)="columnDragStart($event, i)"
 					(dragend)="columnDragEnd($event, i)">
+						<span *ngIf="skeleton"></span>
 						<div
 						*ngIf="columnsResizable"
 						class="column-resize-handle"
@@ -215,7 +219,7 @@ import { I18n } from "./../i18n/i18n.module";
 						</button>
 						<span
 							class="bx--table-header-label"
-							*ngIf="this.sort.observers.length === 0 || (this.sort.observers.length > 0 && !column.sortable)">
+							*ngIf="!skeleton && this.sort.observers.length === 0 || (this.sort.observers.length > 0 && !column.sortable)">
 							<span *ngIf="!column.template" [title]="column.data">{{column.data}}</span>
 							<ng-template
 								[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">
@@ -271,7 +275,7 @@ import { I18n } from "./../i18n/i18n.module";
 						</div>
 					</th>
 				</ng-container>
-				<th [ngStyle]="{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}">
+				<th *ngIf="!skeleton" [ngStyle]="{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}">
 					<!--
 						Scrollbar pushes body to the left so this header column is added to push
 						the title bar the same amount and keep the header and body columns aligned.
@@ -311,7 +315,7 @@ import { I18n } from "./../i18n/i18n.module";
 							</svg>
 						</button>
 					</td>
-					<td *ngIf="showSelectionColumn">
+					<td *ngIf="!skeleton && showSelectionColumn">
 						<ibm-checkbox
 							aria-label="Select row"
 							[size]="size !== ('lg' ? 'sm' : 'md')"
@@ -364,13 +368,48 @@ import { I18n } from "./../i18n/i18n.module";
 	`
 })
 export class Table {
+	/**
+	 * Creates a skeleton model with a row and column count specified by the user
+	 *
+	 * Example:
+	 *
+	 * ```typescript
+	 * this.model = Table.skeletonModel(5, 5);
+	 * ```
+	 *
+	 * @param {number} rowCount
+	 * @param {number} columnCount
+	 */
+	static skeletonModel(rowCount: number, columnCount: number) {
+		const model = new TableModel();
+		let header = new Array<TableHeaderItem>();
+		let data = new Array<Array<TableItem>>();
+		let row = new Array<TableItem>();
+
+		for (let i = 0; i < columnCount; i++) {
+			header.push(new TableHeaderItem());
+			row.push(new TableItem());
+		}
+		for (let i = 0; i < rowCount - 1; i++) {
+			data.push(row);
+		}
+
+		model.header = header;
+		model.data = data;
+		return model;
+	}
+
 	/**
 	 * Size of the table rows.
 	 *
 	 * @type {("sm" | "md" | "lg")}
 	 * @memberof Table
 	 */
 	@Input() size: "sm" | "md" | "lg" = "md";
+	/**
+	 * Set to `true` for a loading table.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * Object of all the strings table needs.
 	 * Defaults to the `TABLE` value from the i18n service.

src/table/table.stories.ts

@@ -17,6 +17,7 @@ import {
 } from "@storybook/addon-knobs/angular";
 
 import {
+	Table,
 	TableModule,
 	TableModel,
 	TableItem,
@@ -414,6 +415,29 @@ function sort(model, index: number) {
 	model.sort(index);
 }
 
+@Component({
+	selector: "app-skeleton-table",
+	template: `
+		<ibm-table
+			[model]="skeletonModel"
+			[skeleton]="skeleton"
+			[size]="size"
+			[striped]="striped">
+			<ng-content></ng-content>
+		</ibm-table>
+	`
+})
+class SkeletonTableStory implements OnInit, OnChanges {
+	@Input() size = "md";
+	@Input() striped = false;
+	@Input() skeleton = true;
+	@Input() skeletonModel = new TableModel();
+
+	ngOnInit() {
+		// Creates an empty table with 5 rows and 5 columns
+		this.skeletonModel = Table.skeletonModel(5, 5);
+	}
+}
 
 storiesOf("Table", module).addDecorator(
 		moduleMetadata({
@@ -428,7 +452,8 @@ storiesOf("Table", module).addDecorator(
 				DynamicTableStory,
 				ExpansionTableStory,
 				OverflowTableStory,
-				PaginationTableStory
+				PaginationTableStory,
+				SkeletonTableStory
 			]
 		})
 	)
@@ -537,5 +562,20 @@ storiesOf("Table", module).addDecorator(
 			model: simpleModel,
 			totalDataLength: number("totalDataLength", 105)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<div style="width: 800px">
+			<app-skeleton-table
+				[skeletonModel]="skeletonModel"
+				[size]="size"
+				[striped]="striped">
+			</app-skeleton-table>
+		</div>
+	`,
+		props: {
+			size: selectV2("size", {Small: "sm", Normal: "md", Large: "lg"}, "md"),
+			striped: boolean("striped", false)
+		}
 	}));