Merge pull request #355 from youda97/skeleton-file-uploader

feat(file-uploader): Add skeleton state

Author: zvonimirfras

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>
+		`
 	}));