Merge pull request #344 from youda97/skeleton-pagination

feat(pagination): Add skeleton state

Author: zvonimirfras

src/pagination/pagination.component.ts

@@ -36,8 +36,19 @@ import { BehaviorSubject } from "rxjs";
 @Component({
 	selector: "ibm-pagination",
 	template: `
-	<div class="bx--pagination">
-		<div class="bx--pagination__left">
+	<div
+		class="bx--pagination"
+		[ngClass]="{
+			'bx--skeleton' : skeleton
+		}">
+
+		<div *ngIf="skeleton" class="bx--pagination__left">
+			<p class="bx--skeleton__text" style="width: 70px"></p>
+			<p class="bx--skeleton__text" style="width: 35px"></p>
+			<p class="bx--skeleton__text" style="width: 105px"></p>
+		</div>
+
+		<div *ngIf="!skeleton" class="bx--pagination__left">
 			<span class="bx--pagination__text">{{itemsPerPageText | async}}</span>
 			<div class="bx--form-item">
 				<div class="bx--select bx--select--inline">
@@ -76,7 +87,12 @@ import { BehaviorSubject } from "rxjs";
 				{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}
 			</span>
 		</div>
-		<div class="bx--pagination__right bx--pagination--inline">
+
+		<div *ngIf="skeleton" class="bx--pagination__right bx--pagination--inline">
+			<p class="bx--skeleton__text" style="width: 70px"></p>
+		</div>
+
+		<div *ngIf="!skeleton" class="bx--pagination__right bx--pagination--inline">
 			<span class="bx--pagination__text">{{totalPagesText | i18nReplace:{current: currentPage, last: lastPage} | async}}</span>
 			<button
 				class="bx--pagination__button bx--pagination__button--backward"
@@ -139,6 +155,10 @@ import { BehaviorSubject } from "rxjs";
 export class Pagination {
 	static paginationCounter = 0;
 
+	/**
+	 * Set to `true` for a loading pagination component.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * `PaginationModel` with the information about pages you're controlling.
 	 *

src/pagination/pagination.stories.ts

@@ -18,12 +18,14 @@ import { PaginationModel } from "./pagination-model.class";
 	template: `
 		<ibm-pagination
 			[model]="model"
+			[skeleton]="skeleton"
 			(selectPage)="selectPage($event)">
 		</ibm-pagination>
 	`
 })
 class PaginationStory implements OnInit {
 	@Input() model = new PaginationModel();
+	@Input() skeleton = false;
 
 	@Input() get totalDataLength() {
 		return this.model.totalDataLength;
@@ -63,5 +65,13 @@ storiesOf("Pagination", module).addDecorator(
 		props: {
 			totalDataLength: number("totalDataLength", 105)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<app-pagination [totalDataLength]="totalDataLength" [skeleton]="true"></app-pagination>
+		`,
+		props: {
+			totalDataLength: number("totalDataLength", 105)
+		}
 	}));